feat: Built the Oracle Tab (#14)

app/src/components/modules/Settings.tsx

@@ -17,6 +17,8 @@ import {
   type LucideIcon,
 } from 'lucide-react';
 import { useStore } from '@/store/useStore';
+import { useCurrency, CURRENCY_OPTIONS } from '@/store/useCurrencyStore';
+import type { CurrencyCode } from '@/store/useCurrencyStore';
 
 // ── Design tokens (matching inventory glassmorphism) ─────────────────────────
 const GLASS = {
@@ -44,7 +46,7 @@ function GlassCard({
 }) {
   return (
     <motion.div
-      className={`rounded-2xl overflow-hidden ${className}`}
+      className={`relative rounded-2xl ${className}`}
       style={GLASS}
       initial={{ opacity: 0, y: 16 }}
       animate={{ opacity: 1, y: 0 }}
@@ -508,6 +510,7 @@ function DisplaySettings() {
   const [compactMode, setCompactMode] = useState(false);
   const [language, setLanguage] = useState('en');
   const [timezone, setTimezone] = useState('dxb');
+  const { currency, setCurrency } = useCurrency();
 
   return (
     <GlassCard delay={0.25}>
@@ -540,6 +543,21 @@ function DisplaySettings() {
             ]}
           />
         </SettingsRow>
+
+        {/* ── Currency ── */}
+        <SettingsRow
+          label="Currency"
+          description="Default currency shown across the entire app"
+        >
+          <DarkSelect
+            value={currency}
+            onChange={(v) => setCurrency(v as CurrencyCode)}
+            options={CURRENCY_OPTIONS.map((o) => ({
+              value: o.code,
+              label: `${o.flag}  ${o.symbol} — ${o.label}`,
+            }))}
+          />
+        </SettingsRow>
       </div>
     </GlassCard>
   );
@@ -615,25 +633,25 @@ export function Settings() {
   return (
     <div className="space-y-4">
       {/* Row 1: System + iOS */}
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 gap-4 relative z-40">
         <SystemStatusCard />
         <IOSConnectionCard />
       </div>
 
       {/* Row 2: Profile + Notifications */}
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 gap-4 relative z-30">
         <ProfileSettings />
         <NotificationSettings />
       </div>
 
       {/* Row 3: Security + Display */}
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 gap-4 relative z-20">
         <SecuritySettings />
         <DisplaySettings />
       </div>
 
       {/* Row 4: Data + About */}
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 gap-4 relative z-10">
         <DataSettings />
         <AboutSection />
       </div>