v.1

.gitignore

@@ -0,0 +1,33 @@
+# Node.js
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# Databases
+*.sqlite
+*.sqlite-journal
+*.db
+backup.xlsx
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Build outputs
+/client/dist
+/server/dist
+
+# IDEs
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS files
+.DS_Store
+Thumbs.db

DEPLOYMENT.md

@@ -0,0 +1,48 @@
+# Deployment Guide (Free Hosting)
+
+Follow these steps to host your application for free on the web.
+
+## 1. Push Code to GitHub
+1.  Initialize git in your project root:
+    ```bash
+    git init
+    git add .
+    git commit -m "Initial commit"
+    ```
+2.  Create a **Private** repository on [GitHub](https://github.com/new).
+3.  Push your code to GitHub following the instructions on the screen.
+
+## 2. Database (Turso)
+1.  Go to [Turso.tech](https://turso.tech) and sign up (Free, no credit card).
+2.  Create a new database (e.g., `wallets-db`).
+3.  Get your **Database URL** and **Auth Token**.
+4.  You will use these in the next step.
+
+## 3. Backend (Render)
+1.  Go to [Render.com](https://render.com) and sign up.
+2.  Create a new **Web Service**.
+3.  Connect your GitHub repository.
+4.  Set the following:
+    - **Language**: `Node`
+    - **Build Command**: `cd server && npm install`
+    - **Start Command**: `cd server && npx tsx src/index.ts`
+5.  Add **Environment Variables**:
+    - `DATABASE_URL`: (From Turso)
+    - `DATABASE_AUTH_TOKEN`: (From Turso)
+    - `JWT_SECRET`: (Any random string like `my-secret-key-123`)
+    - `EMAIL_USER`: (Your Gmail if using backup)
+    - `EMAIL_PASS`: (Your Gmail App Password)
+    - `EMAIL_TO`: (Where to send backups)
+6.  Render will give you a URL like `https://wallets-api.onrender.com`.
+
+## 4. Frontend (Vercel)
+1.  Go to [Vercel.com](https://vercel.com) and sign up.
+2.  Create a new **Project**.
+3.  Connect your GitHub repository.
+4.  Set the **Root Directory** to `client`.
+5.  Add **Environment Variable**:
+    - `VITE_API_URL`: `https://your-render-api-url.onrender.com/api`
+6.  Deploy!
+
+## 5. Mobile Access
+Just open your Vercel URL (e.g., `https://my-wallets.vercel.app`) on your phone browser. It will work from anywhere!

client/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

client/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

client/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

client/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>client</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.13.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.71.2",
+    "react-is": "^19.2.4",
+    "react-router-dom": "^7.13.1",
+    "recharts": "^3.8.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
+    "xlsx": "^0.18.5",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}

client/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

client/src/App.tsx

@@ -0,0 +1,44 @@
+import { MainLayout } from './layouts/MainLayout';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { useAuthStore } from './store/useAuthStore';
+
+import Transactions from './pages/Transactions';
+import Dashboard from './pages/Dashboard';
+import Loans from './pages/Loans';
+import Settings from './pages/Settings';
+import WalletsView from './pages/WalletsView';
+import Analytics from './pages/Analytics';
+import Login from './pages/Login';
+
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
+};
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route
+          path="/"
+          element={
+            <ProtectedRoute>
+              <MainLayout />
+            </ProtectedRoute>
+          }
+        >
+          <Route index element={<Dashboard />} />
+          <Route path="transactions" element={<Transactions />} />
+          <Route path="wallets" element={<WalletsView />} />
+          <Route path="analytics" element={<Analytics />} />
+          <Route path="loans" element={<Loans />} />
+          <Route path="settings" element={<Settings />} />
+        </Route>
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

client/src/api.ts

@@ -0,0 +1,58 @@
+import axios from 'axios';
+import type { Transaction, Wallet, Exchange, Loan } from './types';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001/api';
+
+const apiClient = axios.create({
+    baseURL: API_URL,
+    headers: {
+        'Content-Type': 'application/json'
+    }
+});
+
+// Add a request interceptor to add the auth token
+apiClient.interceptors.request.use(
+    (config) => {
+        const token = localStorage.getItem('auth_token');
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+    },
+    (error) => Promise.reject(error)
+);
+
+// Add a response interceptor for generic error handling
+apiClient.interceptors.response.use(
+    (response) => response,
+    (error) => {
+        if (error.response?.status === 401 || error.response?.status === 403) {
+            // Token expired or unauthorized, logout
+            localStorage.removeItem('auth_token');
+            localStorage.removeItem('auth_username');
+            window.location.href = '/login';
+        }
+        console.error('API Error:', error.response?.data || error.message);
+        return Promise.reject(error);
+    }
+);
+
+export const api = {
+    getRates: () => apiClient.get<Record<string, number>>('/rates').then(res => res.data),
+
+    getWallets: () => apiClient.get<Wallet[]>('/wallets').then(res => res.data),
+
+    getTransactions: () => apiClient.get<Transaction[]>('/transactions').then(res => res.data),
+    createTransaction: (data: Omit<Transaction, 'id'>) => apiClient.post('/transactions', data).then(res => res.data),
+
+    getExchanges: () => apiClient.get<Exchange[]>('/exchanges').then(res => res.data),
+    createExchange: (data: Omit<Exchange, 'id'>) => apiClient.post('/exchanges', data).then(res => res.data),
+
+    getLoans: () => apiClient.get<Loan[]>('/loans').then(res => res.data),
+    createLoan: (data: Omit<Loan, 'id'>) => apiClient.post('/loans', data).then(res => res.data),
+    updateLoan: (id: number, data: Omit<Loan, 'id'>) => apiClient.put(`/loans/${id}`, data).then(res => res.data),
+    deleteLoan: (id: number) => apiClient.delete(`/loans/${id}`).then(res => res.data),
+    payLoan: (id: number, amount: number) => apiClient.post(`/loans/${id}/pay`, { amount }).then(res => res.data),
+    
+    getDashboardAnalytics: () => apiClient.get<any>('/analytics/dashboard').then(res => res.data)
+};

client/src/components/ui/AmountInput.tsx

@@ -0,0 +1,83 @@
+import * as React from "react"
+import { Input } from "./input"
+
+interface AmountInputProps extends Omit<React.ComponentProps<typeof Input>, 'value' | 'onChange'> {
+  value?: string | number;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const AmountInput = React.forwardRef<HTMLInputElement, AmountInputProps>(
+  ({ value, onChange, name, ...props }, ref) => {
+    const formatNumber = (val: string) => {
+      if (!val) return "";
+      // Remove all commas first
+      const clean = val.replace(/,/g, "");
+      const parts = clean.split(".");
+      // Format the integer part
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      return parts.join(".");
+    };
+
+    const [cursor, setCursor] = React.useState<number | null>(null);
+    const inputRef = React.useRef<HTMLInputElement | null>(null);
+
+    // Sync ref
+    React.useImperativeHandle(ref, () => inputRef.current!);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const inputVal = e.target.value;
+      
+      // Allow only numbers, dots and commas
+      if (/[^\d.,]/.test(inputVal)) return;
+
+      const stripped = inputVal.replace(/,/g, "");
+      const formatted = formatNumber(stripped);
+
+      // Track cursor position changes due to formatting
+      const selectionStart = e.target.selectionStart || 0;
+      const commasBefore = (inputVal.substring(0, selectionStart).match(/,/g) || []).length;
+      const commasAfter = (formatted.substring(0, selectionStart).match(/,/g) || []).length;
+      
+      const diff = commasAfter - commasBefore;
+      setCursor(selectionStart + diff);
+
+      if (onChange) {
+        // We pass the stripped value back to handlers (like react-hook-form)
+        // so they can treat it as a normal numeric string
+        const event = {
+          ...e,
+          target: {
+            ...e.target,
+            name: name,
+            value: stripped
+          }
+        } as React.ChangeEvent<HTMLInputElement>;
+        onChange(event);
+      }
+    };
+
+    // Restore cursor position after render
+    React.useLayoutEffect(() => {
+      if (inputRef.current && cursor !== null) {
+        inputRef.current.setSelectionRange(cursor, cursor);
+      }
+    });
+
+    const displayValue = formatNumber(value?.toString() || "");
+
+    return (
+      <Input
+        {...props}
+        ref={inputRef}
+        type="text"
+        inputMode="decimal"
+        value={displayValue}
+        onChange={handleChange}
+      />
+    );
+  }
+);
+
+AmountInput.displayName = "AmountInput";
+
+export { AmountInput };

client/src/components/ui/badge.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-blue-500/20 text-blue-400 hover:bg-blue-500/30",
+        secondary: "border-transparent bg-white/10 text-neutral-100 hover:bg-white/20",
+        destructive: "border-transparent bg-rose-500/20 text-rose-400 hover:bg-rose-500/30",
+        success: "border-transparent bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30",
+        outline: "text-neutral-100 border-white/20",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

client/src/components/ui/button.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-blue-600 text-white shadow-lg shadow-blue-500/20 hover:bg-blue-500",
+        destructive: "bg-rose-500 text-white shadow-sm hover:bg-rose-600",
+        outline: "border border-white/10 bg-transparent hover:bg-white/5",
+        secondary: "bg-white/5 text-neutral-100 hover:bg-white/10",
+        ghost: "hover:bg-white/5 hover:text-neutral-100",
+        link: "text-blue-500 underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-8 rounded-lg px-3 text-xs",
+        lg: "h-12 rounded-xl px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

client/src/components/ui/card.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md shadow-xl text-neutral-100 relative overflow-hidden", className)}
+      {...props}
+    />
+  )
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+  )
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-neutral-400", className)} {...props} />
+  )
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+)
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  )
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

client/src/components/ui/input.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-sm ring-offset-neutral-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral-500 focus-visible:outline-none focus-visible:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50 text-white",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

client/src/components/ui/label.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-neutral-300",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Label.displayName = "Label"
+
+export { Label }

client/src/components/ui/modal.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { X } from "lucide-react"
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Modal({ isOpen, onClose, title, children, className }: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[100] bg-black/80 flex items-center justify-center p-4 sm:p-0 backdrop-blur-sm shadow-2xl">
+      <div className={cn("bg-neutral-900 border border-white/10 shadow-2xl rounded-2xl w-full max-w-lg overflow-hidden animate-in fade-in zoom-in-95 duration-200", className)}>
+        <div className="flex items-center justify-between p-4 border-b border-white/5">
+          {title && <h2 className="text-lg font-semibold text-white">{title}</h2>}
+          <button onClick={onClose} className="rounded-full p-1.5 hover:bg-white/10 transition-colors text-neutral-400 hover:text-white ml-auto">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+        <div className="p-4 sm:p-6 overflow-y-auto max-h-[80vh]">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/ui/select.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          "flex h-10 w-full rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-sm ring-offset-neutral-950 focus-visible:outline-none focus-visible:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50 text-white appearance-none",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    )
+  }
+)
+Select.displayName = "Select"
+
+export { Select }

client/src/features/analytics/useAnalyticsStats.ts

@@ -0,0 +1,347 @@
+import { useState, useMemo } from 'react';
+import { useTransactions, useRates, useWallets, useExchanges, useLoans } from '../../hooks/queries';
+import { useAppStore } from '../../store/useAppStore';
+import { 
+    startOfMonth, 
+    endOfMonth, 
+    eachDayOfInterval, 
+    format, 
+    subDays, 
+    isSameDay, 
+    startOfDay
+} from 'date-fns';
+
+export function useAnalyticsStats() {
+    const { data: transactions = [], isLoading: txLoading } = useTransactions();
+    const { data: wallets = [], isLoading: wlLoading } = useWallets();
+    const { data: exchanges = [], isLoading: exLoading } = useExchanges();
+    const { data: loans = [], isLoading: lnLoading } = useLoans();
+    const { data: rates, isLoading: ratesLoading } = useRates();
+    const mainCurrency = useAppStore(s => s.mainCurrency);
+
+    // New State for Year/Month Selector
+    const [selectedYear, setSelectedYear] = useState(() => new Date().getFullYear());
+    const [selectedMonth, setSelectedMonth] = useState<number | null>(() => new Date().getMonth() + 1); // 1-12
+
+    const exchangeRates = rates || { 'USD': 1, 'IQD': 1500, 'RMB': 7.2 };
+
+    const toMain = (amount: number, currency: string) => {
+        const rate = exchangeRates[currency] || 1;
+        return (amount / rate) * (exchangeRates[mainCurrency] || 1);
+    };
+
+    const stats = useMemo(() => {
+        // Filter interval based on selectedYear/Month
+        let start: Date;
+        let end: Date;
+
+        if (selectedMonth !== null) {
+            start = startOfMonth(new Date(selectedYear, selectedMonth - 1));
+            end = endOfMonth(new Date(selectedYear, selectedMonth - 1));
+        } else {
+            start = new Date(selectedYear, 0, 1);
+            end = new Date(selectedYear, 11, 31, 23, 59, 59);
+        }
+
+        let periodIncome = 0;
+        let periodExpense = 0;
+        let totalDeposits = 0;
+        let totalWithdrawals = 0;
+        
+        const categories: Record<string, { total: number, count: number }> = {};
+        const incomeCategories: Record<string, { total: number, count: number }> = {};
+        const dailyData: Record<string, { date: string, income: number, expense: number, balance: number }> = {};
+        const monthlyData: Record<string, { month: string, income: number, expense: number, balance: number }> = {};
+        
+        // Initialize daily data
+        const days = eachDayOfInterval({ start, end });
+        days.forEach(day => {
+            const dateStr = format(day, 'yyyy-MM-dd');
+            dailyData[dateStr] = { date: dateStr, income: 0, expense: 0, balance: 0 };
+        });
+
+        const filteredTxs = transactions.filter((t: any) => {
+            const txDate = new Date(t.date);
+            return txDate >= start && txDate <= end;
+        });
+
+        filteredTxs.forEach((tx: any) => {
+            const amountInMain = toMain(tx.amount, tx.currency);
+            const dateStr = tx.date.split('T')[0];
+            const monthKey = dateStr.substring(0, 7); // YYYY-MM
+
+            if (!monthlyData[monthKey]) {
+                monthlyData[monthKey] = { month: monthKey, income: 0, expense: 0, balance: 0 };
+            }
+
+            if (tx.type === 'income') {
+                periodIncome += amountInMain;
+                totalDeposits += amountInMain;
+                if (dailyData[dateStr]) dailyData[dateStr].income += amountInMain;
+                monthlyData[monthKey].income += amountInMain;
+                const cat = tx.category || 'Other';
+                if (!incomeCategories[cat]) incomeCategories[cat] = { total: 0, count: 0 };
+                incomeCategories[cat].total += amountInMain;
+                incomeCategories[cat].count += 1;
+            } else if (tx.type === 'expense') {
+                periodExpense += amountInMain;
+                totalWithdrawals += amountInMain;
+                if (dailyData[dateStr]) dailyData[dateStr].expense += amountInMain;
+                monthlyData[monthKey].expense += amountInMain;
+                const cat = tx.category || 'Other';
+                if (!categories[cat]) categories[cat] = { total: 0, count: 0 };
+                categories[cat].total += amountInMain;
+                categories[cat].count += 1;
+            }
+        });
+
+        // 1. Advanced Loan Metrics (Global)
+        let totalLent = 0;
+        let totalBorrowed = 0;
+        loans.forEach((l: any) => {
+            const amountInMain = toMain(l.amount, l.currency);
+            const paidInMain = toMain(l.paid || 0, l.currency);
+            const remaining = amountInMain - paidInMain;
+            if (l.type === 'borrowed_from_me') {
+                totalLent += remaining;
+            } else {
+                totalBorrowed += remaining;
+            }
+        });
+
+        // 2. Spending Deltas (Today vs Yesterday)
+        const today = startOfDay(new Date());
+        const yesterday = subDays(today, 1);
+        const todaySpend = transactions
+            .filter((t: any) => t.type === 'expense' && isSameDay(new Date(t.date), today))
+            .reduce((acc, t) => acc + toMain(t.amount, t.currency), 0);
+        const yesterdaySpend = transactions
+            .filter((t: any) => t.type === 'expense' && isSameDay(new Date(t.date), yesterday))
+            .reduce((acc, t) => acc + toMain(t.amount, t.currency), 0);
+        
+        const dailySpendChange = yesterdaySpend > 0 
+            ? ((todaySpend - yesterdaySpend) / yesterdaySpend) * 100 
+            : todaySpend > 0 ? 100 : 0;
+
+        // 3. Asset & Net Worth Calculation
+        const cBalances: Record<string, number> = { 'USD': 0, 'IQD': 0, 'RMB': 0 };
+        wallets.forEach((w: any) => {
+            const txBal = transactions.reduce((acc: number, tx: any) => {
+                let effectiveAmount = tx.amount;
+                if (tx.currency !== w.currency) {
+                    const txRate = exchangeRates[tx.currency] || 1;
+                    const walletRate = exchangeRates[w.currency] || 1;
+                    effectiveAmount = (tx.amount / txRate) * walletRate;
+                }
+                if (tx.type === 'income' && tx.wallet_id === w.id) return acc + effectiveAmount;
+                if (tx.type === 'expense' && tx.wallet_id === w.id) return acc - effectiveAmount;
+                if (tx.type === 'transfer') {
+                    if (tx.wallet_id === w.id) return acc - effectiveAmount;
+                    if (tx.to_wallet_id === w.id) return acc + effectiveAmount;
+                }
+                return acc;
+            }, 0);
+
+            const exBal = exchanges.reduce((acc: number, ex: any) => {
+                let bal = 0;
+                if (ex.from_wallet_id === w.id) bal -= ex.from_amount;
+                if (ex.to_wallet_id === w.id) bal += ex.to_amount;
+                return acc + bal;
+            }, 0);
+
+            cBalances[w.currency] = (cBalances[w.currency] || 0) + (txBal + exBal);
+        });
+
+        const liquidAssets = Object.entries(cBalances).reduce((acc, [curr, amt]) => {
+            const rate = exchangeRates[curr] || 1;
+            return acc + (amt / rate * (exchangeRates[mainCurrency] || 1));
+        }, 0);
+
+        const netWorth = liquidAssets + totalLent - totalBorrowed;
+
+        // Cumulative Net Worth Trend (Historical)
+        const netCashFlowSinceStart = transactions.reduce((acc, tx) => {
+            if (new Date(tx.date) < start) return acc; // Simplified: only trend within selected period
+            const amt = toMain(tx.amount, tx.currency);
+            if (tx.type === 'income') return acc + amt;
+            if (tx.type === 'expense') return acc - amt;
+            return acc;
+        }, 0);
+        
+        const startingNetWorth = liquidAssets - netCashFlowSinceStart;
+        let cumulative = startingNetWorth;
+        const cumulativeHistory = Object.values(dailyData).map(d => {
+            cumulative += d.income - d.expense;
+            return { date: d.date, balance: cumulative };
+        });
+
+        // 4. Advanced Risk & Efficiency Metrics
+        const numDays = days.length || 1;
+        const avgDailySpend = periodExpense / numDays;
+        
+        // Sharpe Ratio Calculation (Daily Volatility of Balances)
+        const dailyReturns = [];
+        for (let i = 1; i < cumulativeHistory.length; i++) {
+            const prev = cumulativeHistory[i-1].balance;
+            const curr = cumulativeHistory[i].balance;
+            if (prev !== 0) dailyReturns.push((curr - prev) / Math.abs(prev));
+        }
+        const avgReturn = dailyReturns.length > 0 ? dailyReturns.reduce((a, b) => a + b, 0) / dailyReturns.length : 0;
+        const stdDev = dailyReturns.length > 0 ? Math.sqrt(dailyReturns.reduce((a, b) => a + Math.pow(b - avgReturn, 2), 0) / dailyReturns.length) : 0;
+        const sharpeRatio = stdDev !== 0 ? (avgReturn / stdDev) * Math.sqrt(365) : 0; // Annualized
+
+        // Max Drawdown
+        let peak = -Infinity;
+        let maxDrawdown = 0;
+        cumulativeHistory.forEach(d => {
+            if (d.balance > peak) peak = d.balance;
+            const drawdown = peak !== 0 ? (peak - d.balance) / peak : 0;
+            if (drawdown > maxDrawdown) maxDrawdown = drawdown;
+        });
+
+        // Velocity of Money (Total Flow / Avg Balance)
+        const avgBalance = cumulativeHistory.reduce((a, b) => a + b.balance, 0) / cumulativeHistory.length || 1;
+        const velocity = (periodIncome + periodExpense) / avgBalance;
+
+        // 5. 50/30/20 Analysis
+        const RULES = { needs: 0, wants: 0, savings: 0 };
+        const NEEDS_CATS = ['market', 'bills', 'health', 'transport', 'tax', 'rent', 'utilities', 'bills'];
+
+        Object.entries(categories).forEach(([name, data]) => {
+            if (NEEDS_CATS.includes(name.toLowerCase())) RULES.needs += data.total;
+            else RULES.wants += data.total;
+        });
+        RULES.savings = Math.max(0, periodIncome - periodExpense);
+
+        const totalRuleBase = (RULES.needs + RULES.wants + RULES.savings) || 1;
+        const ruleAnalysis = {
+            needs: (RULES.needs / totalRuleBase) * 100,
+            wants: (RULES.wants / totalRuleBase) * 100,
+            savings: (RULES.savings / totalRuleBase) * 100
+        };
+
+        // 6. Trend Projection (Linear Regression: y = mx + b)
+        const n = cumulativeHistory.length;
+        let sumX = 0, sumY = 0, sumXY = 0, sumX2 = 0;
+        cumulativeHistory.forEach((d, i) => {
+            sumX += i;
+            sumY += d.balance;
+            sumXY += i * d.balance;
+            sumX2 += i * i;
+        });
+        const m = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX) || 0;
+        const b = (sumY - m * sumX) / n;
+        
+        const projectionDays = selectedMonth ? (endOfMonth(new Date(selectedYear, selectedMonth - 1)).getDate()) : 365;
+        const projectedBalance = m * projectionDays + b;
+
+        // 7. Spending Heatmap Data (Day of Week vs Hour)
+        const heatmap: Record<string, number> = {};
+        transactions.forEach((tx: any) => {
+            if (tx.type !== 'expense') return;
+            const d = new Date(tx.date);
+            if (d < start || d > end) return;
+            const key = `${d.getDay()}-${d.getHours()}`;
+            heatmap[key] = (heatmap[key] || 0) + toMain(tx.amount, tx.currency);
+        });
+
+        // 8. Formatting Return Data
+        const savingsRate = periodIncome > 0 ? ((periodIncome - periodExpense) / periodIncome) * 100 : 0;
+        const debtRatio = (liquidAssets + totalLent) > 0 ? (totalBorrowed / (liquidAssets + totalLent)) * 100 : 0;
+        const expenseRatio = periodIncome > 0 ? (periodExpense / periodIncome) * 100 : 0;
+
+        // Top spending categories
+        const totalExpenseForPct = periodExpense || 1;
+        const spendingByCategory = Object.entries(categories)
+            .map(([name, data]) => ({ 
+                name, 
+                value: data.total, 
+                count: data.count,
+                pct: (data.total / totalExpenseForPct) * 100 
+            }))
+            .sort((a, b) => b.value - a.value);
+
+        const incomeBreakdown = Object.entries(incomeCategories)
+            .map(([name, data]) => ({ 
+                name, 
+                value: data.total, 
+                count: data.count,
+                pct: (data.total / (periodIncome || 1)) * 100 
+            }))
+            .sort((a, b) => b.value - a.value);
+
+        const comparisonTableData = selectedMonth 
+            ? Object.values(dailyData).sort((a, b) => b.date.localeCompare(a.date)).map(d => ({
+                date: d.date,
+                income: d.income,
+                expense: d.expense,
+                balance: d.income - d.expense
+            }))
+            : Object.values(monthlyData).sort((a, b) => b.month.localeCompare(a.month)).map(m => ({
+                date: m.month,
+                income: m.income,
+                expense: m.expense,
+                balance: m.income - m.expense
+            }));
+
+        const largestTransaction = filteredTxs.length > 0
+            ? filteredTxs.reduce((prev: any, curr: any) => (toMain(curr.amount, curr.currency) > toMain(prev.amount, prev.currency) ? curr : prev))
+            : null;
+
+        return {
+            periodIncome,
+            periodExpense,
+            netCashFlow: periodIncome - periodExpense,
+            totalDeposits,
+            totalWithdrawals,
+            liquidAssets,
+            totalLent,
+            totalBorrowed,
+            netWorth,
+            spendingByCategory,
+            incomeBreakdown,
+            avgDailySpend,
+            savingsRate,
+            debtRatio,
+            expenseRatio,
+            todaySpend,
+            dailySpendChange,
+            cumulativeHistory,
+            comparisonTableData,
+            sharpeRatio,
+            maxDrawdown,
+            velocity,
+            ruleAnalysis,
+            projectedBalance,
+            heatmap,
+            trendLine: { m, b },
+            largestTransaction: largestTransaction ? {
+                ...largestTransaction,
+                mainAmount: toMain(largestTransaction.amount, largestTransaction.currency)
+            } : null,
+            currencyDistribution: Object.entries(cBalances).map(([name, value]) => {
+                const rate = exchangeRates[name] || 1;
+                return { 
+                    name, 
+                    value: value / rate * (exchangeRates[mainCurrency] || 1),
+                    originalValue: value
+                };
+            }).filter(d => d.value !== 0), 
+        };
+    }, [transactions, wallets, exchanges, loans, rates, mainCurrency, selectedYear, selectedMonth, exchangeRates]);
+
+    // Available Years
+    const availableYears = useMemo(() => {
+        const currentYear = new Date().getFullYear();
+        return [currentYear, currentYear - 1, currentYear - 2];
+    }, []);
+
+    return {
+        isLoaded: !txLoading && !wlLoading && !exLoading && !lnLoading && !ratesLoading,
+        mainCurrency,
+        selectedYear, setSelectedYear,
+        selectedMonth, setSelectedMonth,
+        availableYears,
+        ...stats
+    };
+}

client/src/features/dashboard/components/CashFlowWidget.tsx

@@ -0,0 +1,47 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../../../components/ui/card"
+import { BarChart3 } from 'lucide-react'
+import { cn } from "../../../lib/utils"
+
+interface Props {
+  periodIncome: number;
+  periodExpense: number;
+  mainCurrency: string;
+}
+
+export function CashFlowWidget({ periodIncome, periodExpense, mainCurrency }: Props) {
+    const netSavings = periodIncome - periodExpense;
+    const isPositive = netSavings > 0;
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-neutral-200">
+                    <BarChart3 className="w-5 h-5 text-purple-400" /> Cash Flow (Selected Period)
+                </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6">
+                <div className="flex justify-between items-center bg-white/5 p-4 rounded-xl border border-white/5">
+                    <div>
+                        <p className="text-sm text-neutral-400 mb-1 text-left">Total Income</p>
+                        <p className="text-xl font-semibold text-emerald-400 text-left">+{periodIncome.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}</p>
+                    </div>
+                    <div className="text-right">
+                        <p className="text-sm text-neutral-400 mb-1">Total Expenses</p>
+                        <p className="text-xl font-semibold text-rose-400">-{periodExpense.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}</p>
+                    </div>
+                </div>
+                
+                <div className="p-4 rounded-xl border border-white/5 relative overflow-hidden">
+                    <div className={cn("absolute inset-0 opacity-10", isPositive ? "bg-emerald-500" : "bg-rose-500")} />
+                    <div className="relative z-10 flex justify-between items-center">
+                        <span className="font-medium">Net Savings</span>
+                        <span className={cn("font-bold text-lg", isPositive ? "text-emerald-400" : "text-rose-400")}>
+                            {isPositive ? '+' : ''}
+                            {netSavings.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}
+                        </span>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

client/src/features/dashboard/components/NetWorthWidget.tsx

@@ -0,0 +1,52 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../../components/ui/card"
+import { Wallet as WalletIcon, TrendingUp, HandCoins, Building2 } from 'lucide-react'
+
+interface Props {
+  totalNetWorth: number;
+  cashAssetsTotal: number;
+  loansOwedToYouTotal: number;
+  debtsYouOweTotal: number;
+  mainCurrency: string;
+}
+
+export function NetWorthWidget({ totalNetWorth, cashAssetsTotal, loansOwedToYouTotal, debtsYouOweTotal, mainCurrency }: Props) {
+    return (
+        <Card className="mb-6 md:mb-8 group relative border-blue-500/20 shrink-0">
+            <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity hidden sm:block">
+                <Building2 className="w-32 h-32 text-blue-500" />
+            </div>
+            <CardHeader className="pb-2">
+                <CardDescription className="text-sm md:text-base text-neutral-400 font-medium mb-1 md:mb-2 text-left">Total Net Worth</CardDescription>
+                <CardTitle className="text-3xl md:text-5xl font-bold tracking-tight text-white mb-4 md:mb-6 text-left">
+                    {totalNetWorth.toLocaleString(undefined, { maximumFractionDigits: 2 })} <span className="text-xl md:text-2xl text-blue-400">{mainCurrency}</span>
+                </CardTitle>
+            </CardHeader>
+
+            <CardContent>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-6 pt-4 md:pt-6 border-t border-white/10 relative z-10 text-left">
+                    <div>
+                        <div className="flex items-center gap-2 text-emerald-400 mb-1">
+                            <WalletIcon className="w-4 h-4" />
+                            <span className="text-xs md:text-sm font-medium">Cash Assets</span>
+                        </div>
+                        <p className="text-lg md:text-2xl font-semibold">{cashAssetsTotal.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}</p>
+                    </div>
+                    <div>
+                        <div className="flex items-center gap-2 text-indigo-400 mb-1">
+                            <HandCoins className="w-4 h-4" />
+                            <span className="text-xs md:text-sm font-medium">Owed to You</span>
+                        </div>
+                        <p className="text-lg md:text-2xl font-semibold">{loansOwedToYouTotal.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}</p>
+                    </div>
+                    <div>
+                        <div className="flex items-center gap-2 text-rose-400 mb-1">
+                            <TrendingUp className="w-4 h-4 rotate-180" />
+                            <span className="text-xs md:text-sm font-medium">Your Debts</span>
+                        </div>
+                        <p className="text-lg md:text-2xl font-semibold">{debtsYouOweTotal.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}</p>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

client/src/features/dashboard/useDashboardStats.ts

@@ -0,0 +1,152 @@
+import { useState, useMemo } from 'react';
+import { useTransactions, useRates, useWallets, useExchanges, useLoans } from '../../hooks/queries';
+import { useAppStore } from '../../store/useAppStore';
+
+export function useDashboardStats() {
+    const { data: transactions = [], isLoading: txLoading } = useTransactions();
+    const { data: wallets = [], isLoading: wlLoading } = useWallets();
+    const { data: exchanges = [], isLoading: exLoading } = useExchanges();
+    const { data: loans = [], isLoading: lnLoading } = useLoans();
+    const { data: rates, isLoading: ratesLoading } = useRates();
+    const mainCurrency = useAppStore(s => s.mainCurrency);
+
+    const [startDate, setStartDate] = useState(() => {
+        const now = new Date();
+        return new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0];
+    });
+    const [endDate, setEndDate] = useState(() => new Date().toISOString().split('T')[0]);
+
+    const exchangeRates = rates || { 'USD': 1, 'IQD': 1539.5, 'RMB': 6.86 };
+
+    const {
+        cashAssetsTotal,
+        loansOwedToYouTotal,
+        debtsYouOweTotal,
+        currencyBalances,
+        rawWalletBalances
+    } = useMemo(() => {
+        const cBalances: Record<string, number> = { 'USD': 0, 'IQD': 0, 'RMB': 0 };
+
+        const computedWalletBalances = wallets.map((w: any) => {
+            const isExcluded = w.name.toLowerCase().trim() === 'kj wallets';
+            const txBal = transactions.reduce((acc: number, tx: any) => {
+                let effectiveAmount = tx.amount;
+                if (tx.currency !== w.currency) {
+                    const txRate = exchangeRates[tx.currency] || 1;
+                    const walletRate = exchangeRates[w.currency] || 1;
+                    effectiveAmount = (tx.amount / txRate) * walletRate;
+                }
+
+                if (tx.type === 'income' && tx.wallet_id === w.id) return acc + effectiveAmount;
+                if (tx.type === 'expense' && tx.wallet_id === w.id) return acc - effectiveAmount;
+                if (tx.type === 'transfer') {
+                    if (tx.wallet_id === w.id) return acc - effectiveAmount;
+                    if (tx.to_wallet_id === w.id) return acc + effectiveAmount;
+                }
+                return acc;
+            }, 0);
+
+            const exBal = exchanges.reduce((acc: number, ex: any) => {
+                let bal = 0;
+                if (ex.from_wallet_id === w.id) bal -= ex.from_amount;
+                if (ex.to_wallet_id === w.id) bal += ex.to_amount;
+                return acc + bal;
+            }, 0);
+
+            const total = txBal + exBal;
+
+            if (!isExcluded) {
+                if (cBalances[w.currency] === undefined) cBalances[w.currency] = 0;
+                cBalances[w.currency] += total;
+            }
+            return { ...w, balance: total };
+        });
+
+        const loansOwedToYou: Record<string, number> = { 'USD': 0, 'IQD': 0, 'RMB': 0 };
+        const debtsYouOwe: Record<string, number> = { 'USD': 0, 'IQD': 0, 'RMB': 0 };
+
+        loans.forEach((loan: any) => {
+            if (loansOwedToYou[loan.currency] === undefined) loansOwedToYou[loan.currency] = 0;
+            if (debtsYouOwe[loan.currency] === undefined) debtsYouOwe[loan.currency] = 0;
+
+            const remaining = loan.amount - (loan.paid || 0);
+            if (loan.type === 'borrowed_from_me') {
+                loansOwedToYou[loan.currency] += remaining;
+            } else if (loan.type === 'owed_by_me') {
+                debtsYouOwe[loan.currency] += remaining;
+            }
+        });
+
+        const calculateMainCurrency = (balances: Record<string, number>) => {
+            let total = 0;
+            Object.entries(balances).forEach(([currency, amount]) => {
+                const rate = exchangeRates[currency] || 1;
+                total += (amount / rate);
+            });
+            return total * (exchangeRates[mainCurrency] || 1);
+        };
+
+        return {
+            cashAssetsTotal: calculateMainCurrency(cBalances) || 0,
+            loansOwedToYouTotal: calculateMainCurrency(loansOwedToYou) || 0,
+            debtsYouOweTotal: calculateMainCurrency(debtsYouOwe) || 0,
+            currencyBalances: cBalances,
+            rawWalletBalances: computedWalletBalances
+        };
+    }, [wallets, transactions, exchanges, loans, exchangeRates, mainCurrency]);
+
+    const { periodIncome, periodExpense, spendingByCategory, topExpenseCategory } = useMemo(() => {
+        const start = new Date(startDate).toISOString();
+        const endDay = new Date(endDate);
+        endDay.setHours(23, 59, 59, 999);
+        const end = endDay.toISOString();
+        
+        let income = 0;
+        let expense = 0;
+        const categories: Record<string, number> = {};
+        const excludedWalletIds = wallets
+            .filter((w: any) => w.name.toLowerCase().trim() === 'kj wallets')
+            .map((w: any) => w.id);
+
+        transactions.filter((t: any) => t.date >= start && t.date <= end).forEach((tx: any) => {
+            if (excludedWalletIds.includes(tx.wallet_id)) return;
+
+            const rate = exchangeRates[tx.currency] || 1;
+            const amountInMain = tx.amount / rate * (exchangeRates[mainCurrency] || 1);
+
+            if (tx.type === 'income') income += amountInMain;
+            if (tx.type === 'expense') {
+                expense += amountInMain;
+                const cat = tx.category || 'Other';
+                categories[cat] = (categories[cat] || 0) + amountInMain;
+            }
+        });
+
+        let topCategory = { name: 'None', amount: 0 };
+        Object.entries(categories).forEach(([name, amount]) => {
+            if (amount > topCategory.amount) topCategory = { name, amount };
+        });
+
+        return { periodIncome: income, periodExpense: expense, spendingByCategory: categories, topExpenseCategory: topCategory };
+    }, [transactions, exchangeRates, mainCurrency, startDate, endDate]);
+
+    const totalNetWorth = (cashAssetsTotal + loansOwedToYouTotal - debtsYouOweTotal) || 0;
+
+    return {
+        isLoaded: !txLoading && !wlLoading && !exLoading && !lnLoading && !ratesLoading,
+        mainCurrency,
+        totalNetWorth,
+        cashAssetsTotal,
+        loansOwedToYouTotal,
+        debtsYouOweTotal,
+        currencyBalances,
+        rawWalletBalances,
+        periodIncome,
+        periodExpense,
+        spendingByCategory,
+        topExpenseCategory,
+        startDate, setStartDate,
+        endDate, setEndDate,
+        exchangeRates
+    };
+}

client/src/features/transactions/components/TransactionForm.tsx

@@ -0,0 +1,161 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "../../../components/ui/button";
+import { Input } from "../../../components/ui/input";
+import { AmountInput } from "../../../components/ui/AmountInput";
+import { Select } from "../../../components/ui/select";
+import { Label } from "../../../components/ui/label";
+import { cn } from "../../../lib/utils";
+import type { Wallet } from "../../../types";
+import { useEffect } from "react";
+
+export const transactionSchema = z.object({
+  type: z.enum(['expense', 'income', 'transfer']),
+  amount: z.coerce.number().positive("Amount must be positive"),
+  currency: z.string().min(1, "Currency is required"),
+  wallet_id: z.coerce.number().min(1, "Wallet is required"),
+  to_wallet_id: z.coerce.number().optional().nullable(),
+  category: z.string().optional(),
+  note: z.string().optional()
+}).refine(data => {
+  if (data.type === 'transfer' && !data.to_wallet_id) return false;
+  return true;
+}, {
+  message: "Destination wallet is required",
+  path: ["to_wallet_id"]
+}).refine(data => {
+  if (data.type === 'transfer' && data.wallet_id === data.to_wallet_id) return false;
+  return true;
+}, {
+  message: "Cannot transfer to same wallet",
+  path: ["to_wallet_id"]
+});
+
+export type TransactionFormValues = z.infer<typeof transactionSchema>;
+
+const CATEGORIES = ['Food', 'Transport', 'Utilities', 'Shopping', 'Entertainment', 'Health', 'Salary', 'Investment', 'Other'];
+
+export function TransactionForm({ 
+    wallets, 
+    onSubmit, 
+    isSubmitting,
+    submitError 
+}: { 
+    wallets: Wallet[], 
+    onSubmit: (values: TransactionFormValues) => void,
+    isSubmitting: boolean,
+    submitError: string
+}) {
+    const form = useForm<TransactionFormValues>({
+        resolver: zodResolver(transactionSchema),
+        defaultValues: {
+            type: 'expense',
+            amount: '' as any,
+            currency: wallets[0]?.currency || 'USD',
+            wallet_id: wallets[0]?.id || 0,
+            category: 'Other',
+            note: ''
+        }
+    });
+
+    const type = form.watch('type');
+    const walletId = form.watch('wallet_id');
+
+    useEffect(() => {
+        const w = wallets.find(w => w.id === Number(walletId));
+        if (w) {
+            form.setValue('currency', w.currency);
+        }
+    }, [walletId, wallets, form]);
+
+    return (
+        <div className="glass-panel p-6 mb-8 border border-blue-500/30 shadow-blue-500/5 relative overflow-hidden">
+            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500" />
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                <div className="flex flex-wrap gap-2 md:gap-4 mb-4 md:mb-6">
+                    {['expense', 'income', 'transfer'].map(t => (
+                        <button
+                            key={t} type="button"
+                            onClick={() => form.setValue('type', t as any)}
+                            className={cn(
+                                "flex-1 min-w-[30%] py-2 rounded-lg font-medium capitalize border transition-all text-sm md:text-base",
+                                type === t
+                                    ? "bg-blue-500/20 border-blue-500/50 text-blue-400"
+                                    : "bg-white/5 border-white/10 text-neutral-400 hover:text-neutral-200"
+                            )}
+                        >
+                            {t}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <Label>Amount</Label>
+                        <AmountInput {...form.register('amount')} />
+                        {form.formState.errors.amount && <p className="text-rose-400 text-xs mt-1">{form.formState.errors.amount.message}</p>}
+                    </div>
+                    <div>
+                        <Label>Currency</Label>
+                        <Select {...form.register('currency')}>
+                            <option value="USD">USD</option>
+                            <option value="IQD">IQD</option>
+                            <option value="RMB">RMB</option>
+                        </Select>
+                    </div>
+
+                    <div>
+                        <Label>Wallet</Label>
+                        <Select {...form.register('wallet_id')}>
+                            {wallets.map(w => <option key={w.id} value={w.id}>{w.name} ({w.currency})</option>)}
+                        </Select>
+                    </div>
+
+                    {type === 'transfer' && (
+                        <div>
+                            <Label>To Wallet</Label>
+                            <Select {...form.register('to_wallet_id')}>
+                                <option value="">Select Destination</option>
+                                {wallets.filter(w => w.id.toString() !== walletId.toString()).map(w => <option key={w.id} value={w.id}>{w.name}</option>)}
+                            </Select>
+                            {form.formState.errors.to_wallet_id && <p className="text-rose-400 text-xs mt-1">{form.formState.errors.to_wallet_id.message}</p>}
+                        </div>
+                    )}
+
+                    {type !== 'transfer' && (
+                        <div>
+                            <Label>Category</Label>
+                            <Select {...form.register('category')}>
+                                {CATEGORIES.map(cat => <option key={cat} value={cat}>{cat}</option>)}
+                            </Select>
+                        </div>
+                    )}
+
+                    <div className={cn("col-span-2", type === 'transfer' && "md:col-span-2")}>
+                        <Label>Note (Optional)</Label>
+                        <Input type="text" {...form.register('note')} placeholder="e.g. Paid university fee" />
+                    </div>
+                </div>
+
+                {submitError && (
+                    <div className="bg-rose-500/10 border border-rose-500/20 text-rose-400 p-3 rounded-xl text-sm mb-4">
+                        {submitError}
+                    </div>
+                )}
+
+                <div className="flex justify-end pt-2 md:pt-4">
+                    <Button type="submit" disabled={isSubmitting} className="w-full md:w-auto">
+                        {isSubmitting ? (
+                            <span className="flex items-center gap-2">
+                                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Saving...
+                            </span>
+                        ) : (
+                            <>Save {type}</>
+                        )}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}

client/src/hooks/queries.ts

@@ -0,0 +1,110 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../api';
+import type { Loan } from '../types';
+
+export const useRates = () => useQuery({
+  queryKey: ['rates'],
+  queryFn: api.getRates,
+});
+
+export const useWallets = () => useQuery({
+  queryKey: ['wallets'],
+  queryFn: api.getWallets,
+});
+
+export const useTransactions = () => useQuery({
+  queryKey: ['transactions'],
+  queryFn: api.getTransactions,
+});
+
+export const useCreateTransaction = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createTransaction,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['transactions'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard-analytics'] });
+      queryClient.invalidateQueries({ queryKey: ['wallets'] });
+    },
+  });
+};
+
+export const useExchanges = () => useQuery({
+  queryKey: ['exchanges'],
+  queryFn: api.getExchanges,
+});
+
+export const useCreateExchange = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createExchange,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['exchanges'] });
+      queryClient.invalidateQueries({ queryKey: ['transactions'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard-analytics'] });
+      queryClient.invalidateQueries({ queryKey: ['wallets'] });
+    },
+  });
+};
+
+export const useLoans = () => useQuery({
+  queryKey: ['loans'],
+  queryFn: api.getLoans,
+});
+
+export const useCreateLoan = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createLoan,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['loans'] });
+      queryClient.invalidateQueries({ queryKey: ['transactions'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard-analytics'] });
+      queryClient.invalidateQueries({ queryKey: ['wallets'] });
+    },
+  });
+};
+
+export const useUpdateLoan = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: number, data: Omit<Loan, 'id'> }) => api.updateLoan(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['loans'] });
+      queryClient.invalidateQueries({ queryKey: ['transactions'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard-analytics'] });
+      queryClient.invalidateQueries({ queryKey: ['wallets'] });
+    },
+  });
+};
+
+export const useDeleteLoan = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) => api.deleteLoan(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['loans'] });
+      queryClient.invalidateQueries({ queryKey: ['transactions'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard-analytics'] });
+      queryClient.invalidateQueries({ queryKey: ['wallets'] });
+    },
+  });
+};
+
+export const usePayLoan = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, amount }: { id: number, amount: number }) => api.payLoan(id, amount),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['loans'] });
+      queryClient.invalidateQueries({ queryKey: ['transactions'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard-analytics'] });
+      queryClient.invalidateQueries({ queryKey: ['wallets'] });
+    },
+  });
+};
+
+export const useDashboardAnalytics = () => useQuery({
+  queryKey: ['dashboard-analytics'],
+  queryFn: api.getDashboardAnalytics,
+});

client/src/index.css

@@ -0,0 +1,48 @@
+@import "tailwindcss";
+
+@theme {
+  --color-glass-dark: rgba(255, 255, 255, 0.05);
+  --color-glass-border: rgba(255, 255, 255, 0.1);
+  --color-accent: #3b82f6; /* Beautiful dynamic blue */
+}
+
+@layer base {
+  body {
+    @apply bg-neutral-950 text-neutral-100 antialiased font-sans;
+  }
+  
+  /* Hide native browser date picker icon */
+  input[type="date"]::-webkit-calendar-picker-indicator {
+    display: none;
+    -webkit-appearance: none;
+  }
+}
+
+.glass-panel {
+  @apply bg-glass-dark backdrop-blur-md border border-glass-border shadow-xl rounded-2xl transition-all duration-300;
+}
+
+.glass-panel:hover {
+  @apply border-white/20 shadow-2xl shadow-blue-500/10;
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.5s ease-out forwards;
+}
+
+.delay-100 { animation-delay: 100ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+.delay-400 { animation-delay: 400ms; }
+.delay-500 { animation-delay: 500ms; }

client/src/layouts/MainLayout.tsx

@@ -0,0 +1,19 @@
+import { Outlet } from 'react-router-dom';
+import { Sidebar } from './Sidebar';
+import { MobileNav } from './MobileNav';
+
+export function MainLayout() {
+    return (
+        <div className="flex flex-col md:flex-row h-screen bg-neutral-950 text-neutral-100 overflow-hidden font-sans">
+            <Sidebar />
+            
+            <main className="flex-1 overflow-y-auto p-4 md:pl-0 h-full">
+                <div id="main-content-area" className="h-full glass-panel overflow-y-auto relative no-scrollbar">
+                    <Outlet />
+                </div>
+            </main>
+
+            <MobileNav />
+        </div>
+    );
+}

client/src/layouts/MobileNav.tsx

@@ -0,0 +1,44 @@
+import { Link, useLocation } from 'react-router-dom';
+import { cn } from '../lib/utils';
+import { NAV_ITEMS } from './Sidebar';
+import { LogOut } from 'lucide-react';
+import { useAuthStore } from '../store/useAuthStore';
+
+export function MobileNav() {
+    const location = useLocation();
+
+    return (
+        <aside className="w-full glass-panel flex flex-row pt-2 pb-safe md:hidden z-50 border-t border-white/10 order-last shrink-0 rounded-b-none border-x-0 border-b-0">
+            <nav className="flex-1 px-2 flex flex-row overflow-x-auto justify-around space-x-2 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']">
+                {NAV_ITEMS.map((item) => {
+                    const Icon = item.icon;
+                    const isActive = location.pathname === item.path;
+
+                    return (
+                        <Link
+                            key={item.path}
+                            to={item.path}
+                            className={cn(
+                                'flex flex-col items-center gap-1 px-3 py-2 rounded-xl transition-all duration-200 min-w-16',
+                                isActive
+                                    ? 'bg-blue-500/10 text-blue-400 border border-blue-500/20'
+                                    : 'text-neutral-400 border border-transparent'
+                            )}
+                        >
+                            <Icon className={cn("w-5 h-5", isActive ? "text-blue-400" : "text-neutral-500")} />
+                            <span className={cn("font-medium text-[10px] whitespace-nowrap", isActive ? "" : "text-neutral-500")}>{item.name}</span>
+                        </Link>
+                    );
+                })}
+                
+                <button
+                    onClick={() => useAuthStore.getState().logout()}
+                    className="flex flex-col items-center gap-1 px-3 py-2 rounded-xl transition-all duration-200 min-w-16 text-neutral-400 hover:text-rose-400 hover:bg-rose-500/10 border border-transparent"
+                >
+                    <LogOut className="w-5 h-5" />
+                    <span className="font-medium text-[10px] whitespace-nowrap">Logout</span>
+                </button>
+            </nav>
+        </aside>
+    );
+}

client/src/layouts/Sidebar.tsx

@@ -0,0 +1,63 @@
+import { Link, useLocation } from 'react-router-dom';
+import { LayoutDashboard, Receipt, Wallet, HandCoins, Settings, PieChart, LogOut } from 'lucide-react';
+import { useAuthStore } from '../store/useAuthStore';
+import { cn } from '../lib/utils';
+
+export const NAV_ITEMS = [
+    { name: 'Dashboard', path: '/', icon: LayoutDashboard },
+    { name: 'Transactions', path: '/transactions', icon: Receipt },
+    { name: 'Wallets', path: '/wallets', icon: Wallet },
+    { name: 'Analytics', path: '/analytics', icon: PieChart },
+    { name: 'Loans', path: '/loans', icon: HandCoins },
+    { name: 'Settings', path: '/settings', icon: Settings },
+];
+
+export function Sidebar() {
+    const location = useLocation();
+
+    return (
+        <aside className="w-64 glass-panel m-4 flex flex-col pt-6 pb-4 hidden md:flex z-50 shrink-0">
+            <div className="px-6 mb-8 flex items-center gap-3">
+                <div className="w-8 h-8 flex-shrink-0 rounded-lg bg-blue-500/20 flex items-center justify-center border border-blue-500/30">
+                    <Wallet className="w-5 h-5 text-blue-400" />
+                </div>
+                <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent truncate">
+                    MoneyManager
+                </h1>
+            </div>
+
+            <nav className="flex-1 px-4 flex flex-col overflow-y-auto space-y-1">
+                {NAV_ITEMS.map((item) => {
+                    const Icon = item.icon;
+                    const isActive = location.pathname === item.path;
+
+                    return (
+                        <Link
+                            key={item.path}
+                            to={item.path}
+                            className={cn(
+                                'flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200',
+                                isActive
+                                    ? 'bg-blue-500/10 text-blue-400 border border-blue-500/20'
+                                    : 'text-neutral-400 hover:text-neutral-200 hover:bg-white/5 border border-transparent'
+                            )}
+                        >
+                            <Icon className={cn("w-5 h-5", isActive ? "text-blue-400" : "text-neutral-500")} />
+                            <span className={cn("font-medium text-sm whitespace-nowrap", isActive ? "" : "text-neutral-400")}>{item.name}</span>
+                        </Link>
+                    );
+                })}
+            </nav>
+
+            <div className="px-4 mt-auto">
+                <button
+                    onClick={() => useAuthStore.getState().logout()}
+                    className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 text-neutral-400 hover:text-rose-400 hover:bg-rose-500/10 border border-transparent hover:border-rose-500/20"
+                >
+                    <LogOut className="w-5 h-5" />
+                    <span className="font-medium text-sm">Logout</span>
+                </button>
+            </div>
+        </aside>
+    );
+}

client/src/lib/react-query.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 1000 * 60 * 5, // 5 minutes
+    },
+  },
+});

client/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

client/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { queryClient } from './lib/react-query'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+)

client/src/pages/Analytics.tsx

@@ -0,0 +1,595 @@
+import { useAnalyticsStats } from '../features/analytics/useAnalyticsStats';
+import { 
+    BarChart3, 
+    TrendingUp, 
+    Crown,
+    Pizza,
+    Car,
+    Coffee,
+    ShoppingBag,
+    MoreHorizontal,
+    Plane,
+    Wallet,
+    ShoppingBasket,
+    Activity,
+    Zap,
+    ArrowUpRight,
+    ArrowDownRight,
+    Scale,
+    PiggyBank,
+    HandCoins,
+    Banknote,
+    BrainCircuit,
+    Target,
+    ZapOff,
+    Lightbulb
+} from 'lucide-react';
+import { 
+    ResponsiveContainer, 
+    Tooltip, 
+    AreaChart, 
+    Area, 
+    XAxis, 
+    YAxis,
+    CartesianGrid
+} from 'recharts';
+import { cn } from '../lib/utils';
+import { useMemo } from 'react';
+
+// Icon mapping for categories
+const CATEGORY_ICONS: Record<string, any> = {
+    'food': Pizza,
+    'market': ShoppingBag,
+    'transport': Car,
+    'cafe': Coffee,
+    'other': MoreHorizontal,
+    'salary': Crown,
+    'transfer': Wallet,
+    'travel': Plane,
+    'shopping': ShoppingBasket,
+    'health': Activity,
+    'bills': Zap,
+};
+
+const MONTHS = [
+    { id: 1, label: 'JAN' }, { id: 2, label: 'FEB' }, { id: 3, label: 'MAR' }, 
+    { id: 4, label: 'APR' }, { id: 5, label: 'MAY' }, { id: 6, label: 'JUN' }, 
+    { id: 7, label: 'JUL' }, { id: 8, label: 'AUG' }, { id: 9, label: 'SEP' }, 
+    { id: 10, label: 'OCT' }, { id: 11, label: 'NOV' }, { id: 12, label: 'DEC' }
+];
+
+const COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#14b8a6'];
+
+export default function Analytics() {
+    const stats = useAnalyticsStats();
+    
+    const {
+        isLoaded,
+        mainCurrency,
+        selectedYear,
+        setSelectedYear,
+        selectedMonth,
+        setSelectedMonth,
+        spendingByCategory,
+        avgDailySpend,
+        netWorth,
+        liquidAssets,
+        totalLent,
+        totalBorrowed,
+        savingsRate,
+        debtRatio,
+        expenseRatio,
+        todaySpend,
+        dailySpendChange,
+        totalDeposits,
+        totalWithdrawals,
+        availableYears,
+        sharpeRatio,
+        maxDrawdown,
+        velocity,
+        ruleAnalysis,
+        projectedBalance,
+        heatmap,
+        cumulativeHistory,
+        largestTransaction
+    } = stats;
+
+    const financialInsight = useMemo(() => {
+        if (!spendingByCategory.length) return null;
+        const topCat = spendingByCategory[0];
+        const leakMsg = topCat.pct > 30 ? `Spend concentration in ${topCat.name} (${topCat.pct.toFixed(0)}%) exceeds risk parameters.` : null;
+        const velocityMsg = velocity < 1 ? "Capital circulation is low. Consider redeploying stagnant assets." : "Capital velocity is healthy.";
+        const todayMsg = todaySpend > avgDailySpend ? `Today's spend (${todaySpend.toLocaleString()}) is ${(todaySpend / (avgDailySpend || 1)).toFixed(1)}x your daily average.` : "Spending is within historical daily norms.";
+        
+        return { leakMsg, velocityMsg, todayMsg, topCat };
+    }, [spendingByCategory, velocity, todaySpend, avgDailySpend]);
+
+    if (!isLoaded) {
+        return (
+            <div className="flex items-center justify-center h-screen bg-[#0a0a0a]">
+                <div className="flex flex-col items-center gap-4">
+                    <div className="relative">
+                        <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-indigo-500"></div>
+                        <div className="absolute inset-0 flex items-center justify-center">
+                            <BrainCircuit className="w-6 h-6 text-indigo-400 animate-pulse" />
+                        </div>
+                    </div>
+                    <span className="text-gray-500 text-[10px] font-black uppercase tracking-[0.5em] animate-pulse">Processing Intelligence...</span>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-[#0a0a0a] text-white p-4 font-sans pb-24 overflow-y-auto no-scrollbar selection:bg-indigo-500/30">
+            {/* Header / Date Control Section */}
+            <header className="mb-8 pt-2">
+                <div className="flex items-center justify-between mb-8">
+                    <div>
+                        <div className="flex items-center gap-2 mb-2">
+                            <BrainCircuit className="w-4 h-4 text-indigo-500" />
+                            <span className="text-gray-500 text-[10px] font-black uppercase tracking-[0.3em]">Quantitative Intelligence</span>
+                        </div>
+                        <h1 className="text-3xl font-black text-gray-100 flex items-baseline gap-2">
+                            Analytics 
+                            <span className="text-indigo-600/50 text-base font-bold italic">v2.0</span>
+                        </h1>
+                    </div>
+                    <div className="flex flex-col items-end">
+                        <p className="text-[10px] font-black text-gray-600 uppercase tracking-widest leading-none mb-1">Status</p>
+                        <div className="flex items-center gap-2 px-3 py-1 bg-emerald-500/10 border border-emerald-500/20 rounded-full">
+                            <div className="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse" />
+                            <span className="text-[8px] font-black text-emerald-500 uppercase">Live Engine</span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Filters Row */}
+                <div className="flex items-center gap-4 mb-6">
+                    <div className="flex items-center gap-2 overflow-x-auto no-scrollbar flex-1">
+                        {availableYears.map((year: number) => (
+                            <button
+                                key={year}
+                                onClick={() => setSelectedYear(year)}
+                                className={cn(
+                                    "px-6 py-2.5 rounded-2xl text-[10px] font-black transition-all border shrink-0 uppercase tracking-widest",
+                                    selectedYear === year 
+                                        ? "bg-indigo-600 text-white border-indigo-500 shadow-[0_0_25px_rgba(99,102,241,0.4)]" 
+                                        : "bg-[#111] text-gray-500 border-white/5 hover:text-white"
+                                )}
+                            >
+                                {year}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Month Selection Grid */}
+                <div className="grid grid-cols-6 gap-1.5 p-1.5 bg-[#111] rounded-[24px] border border-white/5 shadow-inner">
+                    <button
+                        onClick={() => setSelectedMonth(null)}
+                        className={cn(
+                            "py-3 rounded-[18px] text-[9px] font-black transition-all col-span-2 uppercase tracking-widest",
+                            selectedMonth === null 
+                                ? "bg-white text-black shadow-xl" 
+                                : "text-gray-500 hover:text-gray-300"
+                        )}
+                    >
+                        ANNUAL
+                    </button>
+                    {MONTHS.map((m: any) => (
+                        <button
+                            key={m.id}
+                            onClick={() => setSelectedMonth(m.id)}
+                            className={cn(
+                                "py-3 rounded-[18px] text-[9px] font-black transition-all uppercase tracking-tight",
+                                selectedMonth === m.id 
+                                    ? "bg-white text-black shadow-xl" 
+                                    : "text-gray-500 hover:text-gray-300"
+                            )}
+                        >
+                            {m.label}
+                        </button>
+                    ))}
+                </div>
+            </header>
+
+            {/* Intelligence Insights - Leak/Anomaly Detection */}
+            {financialInsight && (
+                <section className="mb-10 px-2">
+                    <div className="bg-indigo-600/10 border border-indigo-500/20 rounded-[32px] p-6 relative overflow-hidden group">
+                        <div className="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-all">
+                            <Lightbulb className="w-16 h-16 text-indigo-400" />
+                        </div>
+                        <div className="flex items-center gap-3 mb-3">
+                            <div className="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
+                                <Zap className="w-4 h-4 text-indigo-400" />
+                            </div>
+                            <span className="text-[10px] font-black text-indigo-400 uppercase tracking-[0.2em]">Strategy Insight</span>
+                        </div>
+                        <h4 className="text-sm font-black text-gray-100 mb-2">{financialInsight.leakMsg || "Spending Efficiency is Optimal"}</h4>
+                        <div className="flex flex-col gap-1">
+                            <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{financialInsight.velocityMsg}</p>
+                            <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{financialInsight.todayMsg}</p>
+                        </div>
+                    </div>
+                </section>
+            )}
+
+            {/* Hero KPI Cards - Net Worth Focus */}
+            <section className="mb-10">
+                <div className="bg-gradient-to-br from-[#1a1a1a] to-[#111] p-8 rounded-[40px] border border-white/5 shadow-2xl relative overflow-hidden group">
+                    <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
+                        <TrendingUp className="w-48 h-48 text-indigo-500 -rotate-12" />
+                    </div>
+                    
+                    <div className="flex justify-between items-start mb-10">
+                        <div>
+                            <p className="text-[10px] font-black text-indigo-400 uppercase tracking-[0.4em] mb-4">NAV (Net Asset Value)</p>
+                            <div className="flex items-baseline gap-3">
+                                <h2 className="text-5xl font-black text-white tracking-tighter">
+                                    {netWorth.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+                                </h2>
+                                <span className="text-gray-600 font-black text-lg">{mainCurrency}</span>
+                            </div>
+                        </div>
+                        <div className="text-right">
+                            <p className="text-[10px] font-black text-gray-600 uppercase tracking-widest mb-2">Projected EOM</p>
+                            <p className={cn(
+                                "text-xl font-black tracking-tight",
+                                projectedBalance > netWorth ? "text-emerald-400" : "text-rose-400"
+                            )}>
+                                {projectedBalance.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="grid grid-cols-4 gap-4">
+                        <div className="bg-white/5 p-4 rounded-2xl border border-white/5 backdrop-blur-md">
+                            <p className="text-[8px] font-bold text-gray-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
+                                <Target className="w-2.5 h-2.5 text-emerald-400" /> Savings
+                            </p>
+                            <p className={cn("text-xs font-black", savingsRate >= 20 ? "text-emerald-400" : "text-amber-400")}>
+                                {savingsRate.toFixed(1)}%
+                            </p>
+                        </div>
+                        <div className="bg-white/5 p-4 rounded-2xl border border-white/5 backdrop-blur-md">
+                            <p className="text-[8px] font-bold text-gray-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
+                                <ZapOff className="w-2.5 h-2.5 text-rose-400" /> Debt
+                            </p>
+                            <p className="text-xs font-black text-rose-400">
+                                {debtRatio.toFixed(1)}%
+                            </p>
+                        </div>
+                        <div className="bg-white/5 p-4 rounded-2xl border border-white/5 backdrop-blur-md">
+                            <p className="text-[8px] font-bold text-gray-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
+                                <Scale className="w-2.5 h-2.5 text-amber-400" /> Expense
+                            </p>
+                            <p className="text-xs font-black text-amber-400">
+                                {expenseRatio.toFixed(1)}%
+                            </p>
+                        </div>
+                        <div className="bg-white/5 p-4 rounded-2xl border border-white/5 backdrop-blur-md">
+                            <p className="text-[8px] font-bold text-gray-500 uppercase tracking-widest mb-1.5 flex items-center gap-1.5">
+                                <Activity className="w-2.5 h-2.5 text-indigo-400" /> Velocity
+                            </p>
+                            <p className="text-xs font-black text-indigo-400">
+                                {velocity.toFixed(2)}x
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Risk Metrics Section - Quant Finance Essentials */}
+            <section className="grid grid-cols-2 gap-4 mb-10">
+                <div className="bg-[#111] p-6 rounded-[32px] border border-white/5 shadow-xl relative overflow-hidden group hover:border-indigo-500/30 transition-all">
+                    <div className="flex items-center justify-between mb-4">
+                        <div className="w-10 h-10 rounded-2xl bg-indigo-500/10 flex items-center justify-center">
+                            <BarChart3 className="w-5 h-5 text-indigo-400" />
+                        </div>
+                        <div className="text-right">
+                            <p className="text-[8px] font-black text-gray-600 uppercase tracking-widest mb-0.5">Risk Adjusted</p>
+                            <span className="text-[10px] font-black text-indigo-400 uppercase tracking-tighter self-end bg-indigo-500/10 px-2 py-0.5 rounded-full border border-indigo-500/20">
+                                Sharpe: {sharpeRatio.toFixed(2)}
+                            </span>
+                        </div>
+                    </div>
+                    <p className="text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1">Daily Volatility</p>
+                    <p className="text-2xl font-black tracking-tighter">
+                        {dailySpendChange > 0 ? '+' : ''}{dailySpendChange.toFixed(1)}%
+                    </p>
+                </div>
+
+                <div className="bg-[#111] p-6 rounded-[32px] border border-white/5 shadow-xl relative overflow-hidden group hover:border-rose-500/30 transition-all">
+                    <div className="flex items-center justify-between mb-4">
+                        <div className="w-10 h-10 rounded-2xl bg-rose-500/10 flex items-center justify-center">
+                            <ZapOff className="w-5 h-5 text-rose-400" />
+                        </div>
+                        <div className="text-right">
+                            <p className="text-[8px] font-black text-gray-600 uppercase tracking-widest mb-0.5">Tolerance</p>
+                            <span className="text-[10px] font-black text-rose-400 uppercase tracking-tighter self-end bg-rose-500/10 px-2 py-0.5 rounded-full border border-rose-500/20">
+                                Drawdown
+                            </span>
+                        </div>
+                    </div>
+                    <p className="text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1">Max Exposure</p>
+                    <p className="text-2xl font-black tracking-tighter text-rose-400">
+                        -{(maxDrawdown * 100).toFixed(1)}%
+                    </p>
+                </div>
+            </section>
+
+            {/* Cash Flow Dynamics - Advanced Area + Line Projection */}
+            <section className="mb-16">
+                <h3 className="text-xs font-black text-gray-500 uppercase tracking-[0.3em] mb-8 flex items-center gap-3">
+                    <TrendingUp className="w-4 h-4 text-indigo-500" /> Capital Flow Trend
+                </h3>
+                <div className="bg-[#111] p-8 rounded-[40px] border border-white/5 shadow-2xl relative overflow-hidden group">
+                    <div className="h-[320px] w-full relative">
+                        <ResponsiveContainer width="100%" height="100%">
+                            <AreaChart data={cumulativeHistory}>
+                                <defs>
+                                    <linearGradient id="colorBalance" x1="0" y1="0" x2="0" y2="1">
+                                        <stop offset="5%" stopColor="#6366f1" stopOpacity={0.2}/>
+                                        <stop offset="95%" stopColor="#6366f1" stopOpacity={0}/>
+                                    </linearGradient>
+                                </defs>
+                                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#ffffff" strokeOpacity={0.03} />
+                                <XAxis 
+                                    dataKey="date" 
+                                    tick={{ fontSize: 8, fill: '#444', fontWeight: 'bold' }}
+                                    axisLine={false}
+                                    tickLine={false}
+                                    tickFormatter={(val) => val.split('-').slice(1).join('/')}
+                                />
+                                <YAxis hide />
+                                <Tooltip 
+                                    contentStyle={{ backgroundColor: '#111', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '16px', color: '#fff', fontSize: '10px' }}
+                                    itemStyle={{ fontWeight: 'black' }}
+                                />
+                                <Area 
+                                    type="monotone" 
+                                    dataKey="balance" 
+                                    stroke="#6366f1" 
+                                    strokeWidth={3} 
+                                    fill="url(#colorBalance)" 
+                                    animationDuration={2500} 
+                                />
+                            </AreaChart>
+                        </ResponsiveContainer>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-8 mt-8 pt-8 border-t border-white/5">
+                        <div>
+                            <p className="text-[10px] font-black text-emerald-500 uppercase tracking-widest mb-2 flex items-center gap-2">
+                                <ArrowUpRight className="w-3 h-3" /> Inflow
+                            </p>
+                            <p className="text-2xl font-black text-white">{totalDeposits.toLocaleString()}</p>
+                        </div>
+                        <div>
+                            <p className="text-[10px] font-black text-rose-500 uppercase tracking-widest mb-2 flex items-center gap-2">
+                                <ArrowDownRight className="w-3 h-3" /> Outflow
+                            </p>
+                            <p className="text-2xl font-black text-white">{totalWithdrawals.toLocaleString()}</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* 50/30/20 Rule Analysis Section */}
+            <section className="mb-16">
+                <div className="flex items-center justify-between mb-8">
+                    <h3 className="text-xs font-black text-gray-500 uppercase tracking-[0.3em] flex items-center gap-3">
+                        <Target className="w-4 h-4 text-amber-500" /> Allocation Strategy
+                    </h3>
+                    <div className="px-3 py-1 bg-white/5 rounded-full border border-white/10 text-[8px] font-black text-amber-500 uppercase tracking-widest">
+                        50/30/20 Framework
+                    </div>
+                </div>
+
+                <div className="bg-[#111] p-8 rounded-[40px] border border-white/5 shadow-xl relative overflow-hidden mb-6">
+                    <div className="flex h-12 w-full gap-1 mb-8 rounded-2xl overflow-hidden shadow-inner bg-white/5 p-1">
+                        <div 
+                            className="h-full bg-indigo-500 transition-all duration-1000 shadow-[0_0_15px_rgba(99,102,241,0.3)] rounded-l-xl" 
+                            style={{ width: `${ruleAnalysis.needs}%` }} 
+                        />
+                        <div 
+                            className="h-full bg-amber-500 transition-all duration-1000 shadow-[0_0_15px_rgba(245,158,11,0.3)]" 
+                            style={{ width: `${ruleAnalysis.wants}%` }} 
+                        />
+                        <div 
+                            className="h-full bg-emerald-500 transition-all duration-1000 shadow-[0_0_15px_rgba(16,185,129,0.3)] rounded-r-xl" 
+                            style={{ width: `${ruleAnalysis.savings}%` }} 
+                        />
+                    </div>
+
+                    <div className="grid grid-cols-3 gap-4">
+                        <div className="space-y-1">
+                            <p className="text-[8px] font-black text-gray-500 uppercase tracking-[0.1em]">Needs (Target 50%)</p>
+                            <p className="text-xl font-black text-indigo-400">{ruleAnalysis.needs.toFixed(0)}%</p>
+                        </div>
+                        <div className="space-y-1">
+                            <p className="text-[8px] font-black text-gray-500 uppercase tracking-[0.1em]">Wants (Target 30%)</p>
+                            <p className="text-xl font-black text-amber-400">{ruleAnalysis.wants.toFixed(0)}%</p>
+                        </div>
+                        <div className="space-y-1">
+                            <p className="text-[8px] font-black text-gray-500 uppercase tracking-[0.1em]">Savings (Target 20%)</p>
+                            <p className="text-xl font-black text-emerald-400">{ruleAnalysis.savings.toFixed(0)}%</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Spending Density Heatmap */}
+            <section className="mb-16">
+                <h3 className="text-xs font-black text-gray-500 uppercase tracking-[0.3em] mb-8 flex items-center gap-3">
+                    <Activity className="w-4 h-4 text-emerald-500" /> Behavioral Heatmap
+                </h3>
+                <div className="bg-[#111] p-8 rounded-[40px] border border-white/5 shadow-2xl overflow-hidden">
+                    <p className="text-[10px] font-black text-gray-600 uppercase tracking-widest mb-6">Spending Concentration (Day vs Hour)</p>
+                    <div className="flex flex-col gap-2">
+                        {['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map((day, dIdx) => (
+                            <div key={day} className="flex items-center gap-2">
+                                <span className="text-[8px] font-black text-gray-600 w-8">{day}</span>
+                                <div className="flex gap-1 flex-1">
+                                    {Array.from({ length: 24 }).map((_, hIdx) => {
+                                        const value = heatmap[`${dIdx}-${hIdx}`] || 0;
+                                        const opacity = Math.min(1, value / (avgDailySpend || 1));
+                                        return (
+                                            <div 
+                                                key={hIdx} 
+                                                className="flex-1 aspect-square rounded-[2px] transition-all hover:scale-110 active:scale-95 cursor-pointer"
+                                                style={{ 
+                                                    backgroundColor: value > 0 ? '#6366f1' : 'rgba(255,255,255,0.02)',
+                                                    opacity: value > 0 ? 0.2 + (opacity * 0.8) : 1
+                                                }}
+                                                title={`Time: ${hIdx}:00, Spend: ${value.toLocaleString()}`}
+                                            />
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                    <div className="flex justify-between mt-6 text-[8px] font-black text-gray-600 uppercase tracking-[0.2em] px-10">
+                        <span>00:00</span>
+                        <span>12:00</span>
+                        <span>23:00</span>
+                    </div>
+                </div>
+            </section>
+
+                {/* Spending Analysis Section */}
+                <section className="mb-16">
+                   <div className="flex items-center justify-between mb-8">
+                        <h3 className="text-xs font-black text-gray-500 uppercase tracking-[0.3em] flex items-center gap-3">
+                            <Pizza className="w-4 h-4 text-orange-500" /> Expenditure DNA
+                        </h3>
+                        <div className="flex gap-2">
+                           {largestTransaction && (
+                             <div className="px-3 py-1 bg-rose-500/10 rounded-full border border-rose-500/20 text-[8px] font-black text-rose-500 uppercase tracking-widest flex items-center gap-1.5">
+                                <Zap className="w-2 h-2" /> Outlier: {largestTransaction.mainAmount.toLocaleString()}
+                             </div>
+                           )}
+                           <div className="px-3 py-1 bg-white/5 rounded-full border border-white/10 uppercase font-black text-[8px] tracking-widest text-orange-400">
+                               {spendingByCategory.length} ACTIVE CLUSTERS
+                           </div>
+                        </div>
+                   </div>
+
+                    <div className="grid grid-cols-1 gap-4">
+                        {spendingByCategory.map((cat: any, index: number) => {
+                            const Icon = CATEGORY_ICONS[cat.name.toLowerCase()] || MoreHorizontal;
+                            const color = COLORS[index % COLORS.length];
+                            return (
+                                <div key={cat.name} className="bg-[#111] p-6 rounded-[32px] border border-white/5 group hover:border-white/10 transition-all relative overflow-hidden">
+                                    <div className="absolute top-0 left-0 w-1 h-full opacity-50 transition-all group-hover:w-2" style={{ backgroundColor: color }}></div>
+                                    <div className="flex items-center gap-6 mb-5">
+                                        <div className="w-14 h-14 rounded-2xl flex items-center justify-center relative overflow-hidden shrink-0 shadow-lg group-hover:scale-105 transition-transform">
+                                            <div className="absolute inset-0 opacity-10" style={{ backgroundColor: color }}></div>
+                                            <Icon className="w-7 h-7 relative z-10" style={{ color: color }} />
+                                        </div>
+                                        <div className="flex-1 min-w-0">
+                                            <div className="flex justify-between items-center mb-1.5">
+                                                <h4 className="text-base font-black text-gray-100 capitalize tracking-tight">{cat.name}</h4>
+                                                <span className="text-base font-black tracking-tight">{cat.value.toLocaleString(undefined, { maximumFractionDigits: 0 })} <span className="text-[10px] text-gray-600 ml-1">{mainCurrency}</span></span>
+                                            </div>
+                                            <div className="flex justify-between text-[10px] font-bold text-gray-500 uppercase tracking-tighter">
+                                                <span>{cat.count} Transactions Logged</span>
+                                                <span className="text-indigo-400 font-black">{cat.pct.toFixed(1)}% Global Share</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="w-full h-1.5 bg-white/5 rounded-full overflow-hidden shadow-inner">
+                                        <div className="h-full transition-all duration-1000 ease-out" style={{ width: `${cat.pct}%`, backgroundColor: color }} />
+                                    </div>
+                                </div>
+                            );
+                        })}
+                        {spendingByCategory.length === 0 && (
+                            <div className="bg-[#111] p-12 rounded-[32px] border border-white/5 text-center">
+                                <Activity className="w-12 h-12 text-gray-800 mx-auto mb-4" />
+                                <p className="text-[10px] font-black text-gray-600 uppercase tracking-widest leading-relaxed">System analysis indicates<br/>no expenditure recorded for this period.</p>
+                            </div>
+                        )}
+                    </div>
+                </section>
+
+                {/* Loans & Liabilities Section */}
+                <section className="pb-12 text-center">
+                    <h3 className="text-xs font-black text-gray-500 uppercase tracking-[0.3em] mb-8 flex items-center justify-center gap-3">
+                        <HandCoins className="w-4 h-4 text-amber-500" /> Debt & Equity Summary
+                    </h3>
+                    
+                    <div className="grid grid-cols-2 gap-4 mb-8">
+                        <div className="bg-[#111] p-6 rounded-[32px] border border-white/5 relative overflow-hidden group hover:border-emerald-500/20 transition-all">
+                            <div className="absolute -top-4 -right-4 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
+                                <PiggyBank className="w-16 h-16" />
+                            </div>
+                            <p className="text-[9px] font-black text-emerald-500 uppercase tracking-widest mb-3">Portfolio Credit</p>
+                            <p className="text-2xl font-black text-gray-100 tracking-tighter">{totalLent.toLocaleString()}</p>
+                            <p className="text-[8px] text-gray-600 mt-2 font-bold uppercase tracking-tight">Owed to you</p>
+                        </div>
+                        <div className="bg-[#111] p-6 rounded-[32px] border border-white/5 relative overflow-hidden group hover:border-rose-500/20 transition-all">
+                            <div className="absolute -top-4 -right-4 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
+                                <Banknote className="w-16 h-16" />
+                            </div>
+                            <p className="text-[9px] font-black text-rose-500 uppercase tracking-widest mb-3">Liabilities</p>
+                            <p className="text-2xl font-black text-gray-100 tracking-tighter">{totalBorrowed.toLocaleString()}</p>
+                            <p className="text-[8px] text-gray-600 mt-2 font-bold uppercase tracking-tight">System Debt</p>
+                        </div>
+                    </div>
+
+                    <div className="bg-[#111] p-8 rounded-[40px] border border-white/5 shadow-2xl relative overflow-hidden">
+                        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-500 to-rose-500"></div>
+                         <div className="flex items-center justify-between mb-8">
+                             <p className="text-[10px] font-black text-gray-500 uppercase tracking-[0.3em]">Account Solvency</p>
+                             <div className={cn(
+                                 "text-[10px] font-black px-4 py-1.5 rounded-full shadow-lg",
+                                 netWorth > 0 ? "bg-emerald-500 text-black border-none" : "bg-rose-500 text-white border-none"
+                             )}>
+                                 {netWorth > 0 ? 'CRITICAL SOLVENCY ACHIEVED' : 'LEVERAGED EXPOSURE'}
+                             </div>
+                         </div>
+                         
+                         {/* Simple visual indicator bar */}
+                         <div className="w-full h-4 bg-white/5 rounded-full overflow-hidden flex shadow-inner mb-4">
+                             <div 
+                                className="h-full bg-emerald-500 transition-all duration-1000 shadow-[0_0_15px_rgba(16,185,129,0.3)]" 
+                                style={{ width: `${(liquidAssets / (liquidAssets + totalBorrowed || 1)) * 100}%` }} 
+                             />
+                             <div 
+                                className="h-full bg-rose-500 transition-all duration-1000 shadow-[0_0_15px_rgba(239,68,68,0.3)]" 
+                                style={{ width: `${(totalBorrowed / (liquidAssets + totalBorrowed || 1)) * 100}%` }} 
+                             />
+                         </div>
+                         <div className="flex justify-between text-[10px] font-black uppercase tracking-widest text-gray-600">
+                             <span className="flex items-center gap-2"><div className="w-2 h-2 bg-emerald-500 rounded-full"></div> Assets</span>
+                             <span className="flex items-center gap-2">Liabilities <div className="w-2 h-2 bg-rose-500 rounded-full"></div></span>
+                         </div>
+                    </div>
+                </section>
+
+            {/* Sticky Bottom Nav / Quick Jump */}
+            <div className="sticky bottom-8 left-0 right-0 flex justify-center z-50 pointer-events-none">
+                <div className="bg-white/10 backdrop-blur-2xl px-1.5 py-1.5 rounded-[24px] border border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.5)] flex items-center gap-1.5 pointer-events-auto">
+                <button 
+                  onClick={() => {
+                    const container = document.getElementById('main-content-area');
+                    if (container) container.scrollTo({ top: 0, behavior: 'smooth' });
+                  }}
+                  className="px-6 py-3 rounded-[18px] bg-white text-black text-[10px] font-black transition-all shadow-xl hover:scale-105 active:scale-95 uppercase tracking-widest"
+                >
+                    TOP
+                </button>
+                </div>
+            </div>
+            
+            <style dangerouslySetInnerHTML={{ __html: `
+                .no-scrollbar::-webkit-scrollbar { display: none; }
+                .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+            `}} />
+        </div>
+    );
+}

client/src/pages/Dashboard.tsx

@@ -0,0 +1,186 @@
+import { useAppStore } from '../store/useAppStore';
+import { useDashboardStats } from '../features/dashboard/useDashboardStats';
+import { NetWorthWidget } from '../features/dashboard/components/NetWorthWidget';
+import { CashFlowWidget } from '../features/dashboard/components/CashFlowWidget';
+import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
+import { Select } from '../components/ui/select';
+import { WalletIcon, TrendingUp, PieChart } from 'lucide-react';
+import { useTransactions } from '../hooks/queries';
+import { format } from 'date-fns';
+import { cn } from '../lib/utils';
+
+export default function Dashboard() {
+    const setMainCurrency = useAppStore(s => s.setMainCurrency);
+    const { data: transactions = [] } = useTransactions();
+    
+    const {
+        isLoaded, mainCurrency, totalNetWorth, cashAssetsTotal, loansOwedToYouTotal, debtsYouOweTotal,
+        currencyBalances, rawWalletBalances, periodIncome, periodExpense, spendingByCategory, topExpenseCategory,
+        exchangeRates
+    } = useDashboardStats();
+
+    if (!isLoaded) {
+        return (
+            <div className="p-4 md:p-8 h-full flex items-center justify-center">
+                <p className="text-neutral-400 animate-pulse">Calculating net worth...</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-4 md:p-8 h-full overflow-y-auto flex flex-col">
+            <div className="flex justify-between items-center mb-6 md:mb-8 shrink-0">
+                <div>
+                    <h1 className="text-xl md:text-2xl font-bold">Dashboard</h1>
+                    <p className="text-sm md:text-base text-neutral-400">Overview of your true personal net worth.</p>
+                </div>
+                <Select value={mainCurrency} onChange={e => setMainCurrency(e.target.value)} className="w-auto border-white/20 bg-black/60 shadow-lg text-white font-medium">
+                    <option value="USD">View in USD</option>
+                    <option value="IQD">View in IQD</option>
+                    <option value="RMB">View in RMB</option>
+                </Select>
+            </div>
+
+            <div className="glass-panel items-center justify-center p-4 mb-6 md:mb-8 flex bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-blue-500/10 border-white/5 shadow-lg relative overflow-hidden group shrink-0">
+                <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(68,107,254,0.1)_50%,transparent_75%)] bg-[length:250%_250%] opacity-50 group-hover:animate-[gradient_3s_linear_infinite]" style={{ animation: "gradient 3s linear infinite" }}></div>
+                <p className="text-lg md:text-2xl font-medium flex items-center gap-3 sm:gap-6 relative z-10 flex-wrap justify-center drop-shadow-md">
+                    <span className="text-rose-400 flex items-center gap-1.5 font-semibold">
+                        {(exchangeRates['RMB'] * 100)?.toLocaleString(undefined, { maximumFractionDigits: 2 })} <span className="text-sm md:text-base text-rose-400/80">RMB</span>
+                    </span>
+                    <span className="text-neutral-500/50 font-light">=</span>
+                    <span className="text-emerald-400 font-bold flex items-center gap-1.5 shadow-emerald-500/50">
+                        100 <span className="text-sm md:text-base text-emerald-400/80">$</span>
+                    </span>
+                    <span className="text-neutral-500/50 font-light">=</span>
+                    <span className="text-indigo-400 flex items-center gap-1.5 font-semibold">
+                        {(exchangeRates['IQD'] * 100)?.toLocaleString(undefined, { maximumFractionDigits: 0 })} <span className="text-sm md:text-base text-indigo-400/80">IQD</span>
+                    </span>
+                </p>
+            </div>
+
+            <NetWorthWidget 
+                totalNetWorth={totalNetWorth} 
+                cashAssetsTotal={cashAssetsTotal} 
+                loansOwedToYouTotal={loansOwedToYouTotal} 
+                debtsYouOweTotal={debtsYouOweTotal} 
+                mainCurrency={mainCurrency} 
+            />
+
+            <Card className="mb-6 md:mb-8 shrink-0">
+               <CardHeader className="pb-2">
+                   <CardTitle className="text-base md:text-lg text-neutral-300">Available Liquid Cash Balances</CardTitle>
+               </CardHeader>
+               <CardContent>
+                   <div className="flex flex-col sm:flex-row gap-4 md:gap-6">
+                       {Object.entries(currencyBalances).map(([curr, amt]) => (
+                           <div key={curr} className="bg-white/5 rounded-xl px-4 py-3 border border-white/5 flex-1 text-center">
+                               <p className="text-sm text-neutral-400 mb-1">{curr}</p>
+                               <p className="text-xl font-semibold">{amt.toLocaleString()} {curr}</p>
+                           </div>
+                       ))}
+                   </div>
+               </CardContent>
+            </Card>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 shrink-0 pb-12">
+
+                <CashFlowWidget periodIncome={periodIncome} periodExpense={periodExpense} mainCurrency={mainCurrency} />
+
+                <Card className="flex flex-col min-h-[250px] md:min-h-[300px]">
+                    <CardHeader className="flex flex-row justify-between items-strat pb-2">
+                        <CardTitle className="flex items-center gap-2 text-neutral-200">
+                            <PieChart className="w-5 h-5 text-orange-400" /> Spending by Category
+                        </CardTitle>
+                        {topExpenseCategory.amount > 0 && (
+                            <div className="text-xs bg-orange-500/20 text-orange-300 border border-orange-500/20 px-3 py-1.5 rounded-full flex flex-col items-end">
+                                <span className="text-[10px] text-orange-400/80 uppercase tracking-widest font-semibold">Top Expense</span>
+                                <span>{topExpenseCategory.name} ({topExpenseCategory.amount.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency})</span>
+                            </div>
+                        )}
+                    </CardHeader>
+                    <CardContent className="flex-1 min-h-0 space-y-4">
+                        {Object.entries(spendingByCategory).sort((a, b) => b[1] - a[1]).map(([cat, amount]) => {
+                                const percentage = periodExpense > 0 ? (amount / periodExpense) * 100 : 0;
+                                return (
+                                    <div key={cat} className="mb-2">
+                                        <div className="flex justify-between items-end mb-1">
+                                            <span className="font-medium text-sm">{cat}</span>
+                                            <span className="text-sm text-neutral-400">{amount.toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}</span>
+                                        </div>
+                                        <div className="h-2 w-full bg-black/40 rounded-full overflow-hidden flex">
+                                            <div style={{ width: `${percentage}%` }} className="bg-orange-500 h-full rounded-full" />
+                                        </div>
+                                    </div>
+                                );
+                            })
+                        }
+                        {Object.keys(spendingByCategory).length === 0 && <p className="text-neutral-500 text-center py-4">No expenses recorded in this period.</p>}
+                    </CardContent>
+                </Card>
+
+                <Card className="flex flex-col min-h-[250px] md:min-h-[300px]">
+                    <CardHeader className="pb-2">
+                        <CardTitle className="flex items-center gap-2">
+                            <WalletIcon className="w-5 h-5 text-indigo-400" /> Wallet Balances
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="flex-1 min-h-0 space-y-3">
+                        {rawWalletBalances.map((w: any) => (
+                            <div key={w.id} className="flex justify-between items-center bg-white/5 p-3 md:p-4 rounded-xl border border-white/5 hover:bg-white/10 transition-colors">
+                                <div className="flex items-center gap-2 md:gap-3">
+                                    <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-indigo-500/20 text-indigo-400 flex items-center justify-center font-bold text-sm md:text-base">
+                                        {w.name[0]}
+                                    </div>
+                                    <div>
+                                        <p className="font-medium text-sm md:text-base text-left">{w.name}</p>
+                                        <p className="text-[10px] md:text-xs text-neutral-500 capitalize text-left">{w.type}</p>
+                                    </div>
+                                </div>
+                                <div className="text-right">
+                                    <p className="font-semibold text-sm md:text-lg">{w.balance?.toLocaleString() || 0} {w.currency}</p>
+                                    <p className="text-[10px] md:text-xs text-neutral-500">
+                                        ≈ {((w.balance || 0) / (exchangeRates[w.currency] || 1) * (exchangeRates[mainCurrency] || 1)).toLocaleString(undefined, { maximumFractionDigits: 0 })} {mainCurrency}
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                    </CardContent>
+                </Card>
+
+                <Card className="flex flex-col min-h-[250px] md:min-h-[300px]">
+                    <CardHeader className="pb-2">
+                        <CardTitle className="flex items-center gap-2">
+                            <TrendingUp className="w-5 h-5 text-emerald-400" /> Recent Activity
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent className="flex-1 min-h-0 space-y-3">
+                        {transactions.slice(0, 5).map((tx: any) => (
+                            <div key={tx.id} className="flex justify-between items-center bg-white/5 p-4 rounded-xl border border-white/5 text-left">
+                                <div>
+                                    <p className="font-medium text-neutral-200">{tx.note || <span className="capitalize">{tx.type}</span>}</p>
+                                    <div className="text-xs text-neutral-500 mt-1 flex gap-2">
+                                        <span>{format(new Date(tx.date), 'MMM d, yyyy')}</span>
+                                        {tx.category && (
+                                            <>
+                                                <span>•</span>
+                                                <span className="text-blue-400/80">{tx.category}</span>
+                                            </>
+                                        )}
+                                    </div>
+                                </div>
+                                <div className={cn(
+                                    "font-semibold text-right",
+                                    tx.type === 'income' ? "text-emerald-400" : tx.type === 'expense' ? "text-rose-400" : "text-blue-400"
+                                )}>
+                                    {tx.type === 'expense' ? '-' : tx.type === 'income' ? '+' : ''}
+                                    {tx.amount.toLocaleString()} {tx.currency}
+                                </div>
+                            </div>
+                        ))}
+                        {transactions.length === 0 && <p className="text-neutral-500 text-center py-4">No recent activity</p>}
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    );
+}

client/src/pages/Loans.tsx

@@ -0,0 +1,407 @@
+import { useState } from 'react';
+import { useLoans, useCreateLoan, usePayLoan, useUpdateLoan, useDeleteLoan, useRates } from '../hooks/queries';
+import { HandCoins, Plus, ArrowDown, ArrowUp, Pencil, Trash2, X } from 'lucide-react';
+import { format } from 'date-fns';
+import { cn } from '../lib/utils';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { AmountInput } from '../components/ui/AmountInput';
+import { Label } from '../components/ui/label';
+
+export default function Loans() {
+    const { data: loans = [] } = useLoans();
+    const { data: rates } = useRates();
+    const { mutateAsync: createLoan } = useCreateLoan();
+    
+    const [showForm, setShowForm] = useState(false);
+    const [editingLoan, setEditingLoan] = useState<any>(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const [person, setPerson] = useState('');
+    const [type, setType] = useState<'borrowed_from_me' | 'owed_by_me'>('borrowed_from_me');
+    const [amount, setAmount] = useState('');
+    const [currency, setCurrency] = useState('USD');
+    const [note, setNote] = useState('');
+
+    const { mutateAsync: updateLoan } = useUpdateLoan();
+    const { mutateAsync: deleteLoan } = useDeleteLoan();
+
+    const { mutateAsync: payLoan } = usePayLoan();
+    const [paymentId, setPaymentId] = useState<number | null>(null);
+    const [paymentAmount, setPaymentAmount] = useState('');
+
+    const exchangeRates: Record<string, number> = rates || { USD: 1, IQD: 1539.5, RMB: 6.86 };
+
+    const startEditing = (loan: any) => {
+        setEditingLoan(loan);
+        setPerson(loan.person);
+        setType(loan.type);
+        setAmount(loan.amount.toString());
+        setCurrency(loan.currency);
+        setNote(loan.note || '');
+        setShowForm(true);
+    };
+
+    const cancelEditing = () => {
+        setEditingLoan(null);
+        setPerson('');
+        setType('borrowed_from_me');
+        setAmount('');
+        setCurrency('USD');
+        setNote('');
+        setShowForm(false);
+    };
+
+    const handlePaymentSubmit = async (loanId: number, e: React.FormEvent) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        try {
+            await payLoan({ id: loanId, amount: parseFloat(paymentAmount) });
+            setPaymentId(null);
+            setPaymentAmount('');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        try {
+            const loanData: any = {
+                person,
+                type,
+                amount: parseFloat(amount),
+                currency,
+                note,
+                date: editingLoan ? editingLoan.date : new Date().toISOString()
+            };
+
+            if (editingLoan) {
+                await updateLoan({ 
+                    id: editingLoan.id, 
+                    data: { ...loanData, paid: editingLoan.paid } 
+                });
+            } else {
+                await createLoan({
+                    ...loanData,
+                    paid: 0
+                });
+            }
+            cancelEditing();
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const [showStats, setShowStats] = useState(false);
+
+    const stats = {
+        lent: loans.filter((l: any) => l.type === 'borrowed_from_me').reduce((acc: number, l: any) => {
+            const remaining = l.amount - (l.paid || 0);
+            const rate = exchangeRates[l.currency] || 1;
+            return acc + (remaining / rate);
+        }, 0),
+        borrowed: loans.filter((l: any) => l.type === 'owed_by_me').reduce((acc: number, l: any) => {
+            const remaining = l.amount - (l.paid || 0);
+            const rate = exchangeRates[l.currency] || 1;
+            return acc + (remaining / rate);
+        }, 0),
+    };
+
+    return (
+        <div className="p-4 md:p-8 h-full flex flex-col max-w-7xl mx-auto w-full">
+            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8 animate-fade-in-up">
+                <div className="flex justify-between items-center w-full sm:w-auto">
+                    <div>
+                        <h1 className="text-2xl md:text-3xl font-bold flex items-center gap-3 text-white">
+                            <HandCoins className="w-6 h-6 md:w-8 md:h-8 text-purple-400" /> Loan Tracking
+                        </h1>
+                        <p className="text-neutral-400 text-sm mt-1">Manage your debts and receivables</p>
+                    </div>
+                    <Button 
+                        variant="ghost" 
+                        size="sm" 
+                        onClick={() => setShowStats(!showStats)}
+                        className="sm:hidden text-purple-400 hover:text-purple-300 hover:bg-purple-500/10"
+                    >
+                        {showStats ? 'Hide Summary' : 'Show Summary'}
+                    </Button>
+                </div>
+                <Button onClick={() => {
+                    if (showForm) cancelEditing();
+                    else setShowForm(true);
+                }} className="w-full sm:w-auto bg-purple-600 hover:bg-purple-500 shadow-lg shadow-purple-500/20 py-6 px-6 text-lg rounded-xl transition-all hover:scale-[1.02]">
+                    {showForm ? <X className="w-5 h-5 mr-2" /> : <Plus className="w-5 h-5 mr-2" />}
+                    {showForm ? 'Cancel' : 'New Loan'}
+                </Button>
+            </div>
+
+            {/* Summary Cards */}
+            <div className={cn(
+                "grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8 animate-fade-in-up delay-100 transition-all duration-300",
+                !showStats && "hidden sm:grid"
+            )}>
+                <div className="glass-panel p-5 border-emerald-500/20 bg-emerald-500/5">
+                    <div className="flex items-center gap-3 mb-2">
+                        <div className="p-2 bg-emerald-500/20 rounded-lg text-emerald-400">
+                            <ArrowUp className="w-5 h-5" />
+                        </div>
+                        <span className="text-neutral-400 font-medium">Total Lent</span>
+                    </div>
+                    <div className="text-2xl font-bold text-white">
+                        {stats.lent.toLocaleString()} <span className="text-sm font-normal text-neutral-500">USD</span>
+                    </div>
+                </div>
+                <div className="glass-panel p-5 border-rose-500/20 bg-rose-500/5">
+                    <div className="flex items-center gap-3 mb-2">
+                        <div className="p-2 bg-rose-500/20 rounded-lg text-rose-400">
+                            <ArrowDown className="w-5 h-5" />
+                        </div>
+                        <span className="text-neutral-400 font-medium">Total Borrowed</span>
+                    </div>
+                    <div className="text-2xl font-bold text-white">
+                        {stats.borrowed.toLocaleString()} <span className="text-sm font-normal text-neutral-500">USD</span>
+                    </div>
+                </div>
+                <div className="glass-panel p-5 border-purple-500/20 bg-purple-500/5">
+                    <div className="flex items-center gap-3 mb-2">
+                        <div className="p-2 bg-purple-500/20 rounded-lg text-purple-400">
+                            <HandCoins className="w-5 h-5" />
+                        </div>
+                        <span className="text-neutral-400 font-medium">Net Position</span>
+                    </div>
+                    <div className={cn("text-2xl font-bold", (stats.lent - stats.borrowed) >= 0 ? "text-emerald-400" : "text-rose-400")}>
+                        {(stats.lent - stats.borrowed).toLocaleString()} <span className="text-sm font-normal text-neutral-500">USD</span>
+                    </div>
+                </div>
+            </div>
+
+            {showForm && (
+                <div className="glass-panel p-6 mb-8 border-purple-500/40 animate-fade-in-up">
+                    <h2 className="text-xl font-semibold mb-6 text-white flex items-center gap-2">
+                        {editingLoan ? <Pencil className="w-5 h-5 text-purple-400" /> : <Plus className="w-5 h-5 text-purple-400" />}
+                        {editingLoan ? 'Edit Loan Entry' : 'Create New Loan Entry'}
+                    </h2>
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                        <div className="flex flex-col sm:flex-row gap-4">
+                            <button type="button" onClick={() => setType('borrowed_from_me')}
+                                className={cn("flex-1 py-3 rounded-xl font-semibold capitalize border transition-all flex items-center justify-center gap-2",
+                                    type === 'borrowed_from_me' ? "bg-purple-500/20 border-purple-500/50 text-purple-400 shadow-inner" : "bg-white/5 border-white/10 text-neutral-400 hover:bg-white/10"
+                                )}>
+                                <ArrowUp className="w-5 h-5" /> They borrowed from me
+                            </button>
+                            <button type="button" onClick={() => setType('owed_by_me')}
+                                className={cn("flex-1 py-3 rounded-xl font-semibold capitalize border transition-all flex items-center justify-center gap-2",
+                                    type === 'owed_by_me' ? "bg-purple-500/20 border-purple-500/50 text-purple-400 shadow-inner" : "bg-white/5 border-white/10 text-neutral-400 hover:bg-white/10"
+                                )}>
+                                <ArrowDown className="w-5 h-5" /> I borrowed from them
+                            </button>
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div className="space-y-2">
+                                <Label className="text-neutral-300 ml-1">Person Name</Label>
+                                <Input type="text" required value={person} onChange={e => setPerson(e.target.value)} placeholder="Who is it?" className="bg-black/40 border-white/10 h-12 rounded-xl focus:border-purple-500/50" />
+                            </div>
+                            <div className="space-y-2">
+                                <Label className="text-neutral-300 ml-1">Amount & Currency</Label>
+                                <div className="flex bg-black/40 border border-white/10 rounded-xl overflow-hidden focus-within:border-purple-500/50 h-12">
+                                    <AmountInput required value={amount} onChange={e => setAmount(e.target.value)}
+                                        className="flex-1 bg-transparent border-none px-4 py-2 h-full rounded-none focus-visible:ring-0" placeholder="0.00" />
+                                    <select value={currency} onChange={e => setCurrency(e.target.value)}
+                                        className="bg-white/5 px-4 py-2 border-l border-white/10 text-white focus:outline-none cursor-pointer">
+                                        <option value="USD">USD</option>
+                                        <option value="IQD">IQD</option>
+                                        <option value="RMB">RMB</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div className="col-span-1 md:col-span-2 space-y-2">
+                                <Label className="text-neutral-300 ml-1">Note (Optional)</Label>
+                                <Input type="text" value={note} onChange={e => setNote(e.target.value)} placeholder="Add some context..." className="bg-black/40 border-white/10 h-12 rounded-xl focus:border-purple-500/50" />
+                            </div>
+                        </div>
+
+                        <div className="flex justify-end gap-3 pt-4">
+                            <Button type="button" variant="ghost" onClick={cancelEditing} disabled={isSubmitting} className="rounded-xl h-12 px-6">Cancel</Button>
+                            <Button type="submit" disabled={isSubmitting} className="w-full md:w-auto bg-purple-600 hover:bg-purple-500 rounded-xl h-12 px-10 font-bold shadow-lg shadow-purple-500/20">
+                                {editingLoan ? 'Update Loan' : 'Save Loan'}
+                            </Button>
+                        </div>
+                    </form>
+                </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 flex-1 content-start overflow-y-auto pb-32 md:pb-8 pr-2 custom-scrollbar">
+                {[...loans].sort((a, b) => {
+                    const remainingA = a.amount - (a.paid || 0);
+                    const remainingB = b.amount - (b.paid || 0);
+                    const isSettledA = remainingA <= 0;
+                    const isSettledB = remainingB <= 0;
+
+                    // Settled loans always go to the bottom
+                    if (isSettledA !== isSettledB) {
+                        return isSettledA ? 1 : -1;
+                    }
+
+                    // Otherwise sort by original total amount in USD (Highest to Lowest)
+                    const rateA = exchangeRates[a.currency] || 1;
+                    const rateB = exchangeRates[b.currency] || 1;
+                    const usdAmountA = a.amount / rateA;
+                    const usdAmountB = b.amount / rateB;
+
+                    return usdAmountB - usdAmountA;
+                }).map((loan: any, index: number) => {
+                    const isLent = loan.type === 'borrowed_from_me';
+                    const remaining = loan.amount - (loan.paid || 0);
+                    const isSettled = remaining <= 0;
+                    const paidPercentage = Math.min(100, Math.max(0, ((loan.paid || 0) / loan.amount) * 100));
+
+                    const getColors = () => {
+                        if (!isLent) { // I borrowed
+                            return isSettled 
+                                ? { border: "border-emerald-500/20", bg: "bg-emerald-500/5", text: "text-emerald-400", progress: "bg-emerald-500" } 
+                                : { border: "border-rose-500/20", bg: "bg-rose-500/5", text: "text-rose-400", progress: "bg-rose-500" };
+                        } else { // Someone borrowed from me
+                            return isSettled
+                                ? { border: "border-blue-500/20", bg: "bg-blue-500/5", text: "text-blue-400", progress: "bg-blue-500" }
+                                : { border: "border-amber-500/20", bg: "bg-amber-500/5", text: "text-amber-400", progress: "bg-amber-500" };
+                        }
+                    };
+
+                    const colors = getColors();
+                    const delayClass = `delay-${Math.min((index + 1) * 100, 500)}`;
+
+                    return (
+                        <div key={loan.id} className={cn(
+                            "glass-panel p-6 border flex flex-col relative group animate-fade-in-up",
+                            colors.border, colors.bg, delayClass,
+                            isSettled && "opacity-60 grayscale-[0.2]"
+                        )}>
+                            {/* Header Section */}
+                            <div className="flex justify-between items-start mb-6 relative z-10">
+                                <div className="flex items-center gap-4">
+                                    <div className={cn(
+                                        "w-12 h-12 rounded-2xl flex items-center justify-center font-bold text-xl bg-black/30 shadow-inner",
+                                        colors.text
+                                    )}>
+                                        {loan.person[0].toUpperCase()}
+                                    </div>
+                                    <div>
+                                        <h3 className={cn("font-bold text-lg text-white leading-none", isSettled && "line-through text-neutral-400")}>{loan.person}</h3>
+                                        <p className="text-xs text-neutral-500 mt-1.5">{format(new Date(loan.date), 'MMMM d, yyyy')}</p>
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <div className={cn(
+                                        "px-3 py-1 rounded-lg text-[10px] uppercase tracking-wider font-bold border bg-black/40",
+                                        colors.border, colors.text
+                                    )}>
+                                        {isSettled ? 'Settled' : isLent ? 'Lent' : 'Borrowed'}
+                                    </div>
+                                    <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                        <button onClick={(e) => { e.stopPropagation(); startEditing(loan); }} className="p-2 hover:bg-white/10 rounded-lg transition-colors text-neutral-400 hover:text-white" title="Edit">
+                                            <Pencil className="w-4 h-4" />
+                                        </button>
+                                        <button onClick={async (e) => { e.stopPropagation(); if (confirm('Delete this loan?')) await deleteLoan(loan.id); }} className="p-2 hover:bg-rose-500/20 rounded-lg transition-colors text-neutral-400 hover:text-rose-400" title="Delete">
+                                            <Trash2 className="w-4 h-4" />
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Main Amount Section */}
+                            <div className="mb-6 relative z-10">
+                                <span className="text-[10px] font-bold text-neutral-500 uppercase tracking-widest block mb-1">REMAINING BALANCE</span>
+                                <div className={cn("text-3xl font-black tracking-tight flex items-baseline gap-2", colors.text)}>
+                                    {remaining > 0 ? remaining.toLocaleString() : "0.00"} 
+                                    <span className="text-sm font-bold opacity-60">{loan.currency}</span>
+                                </div>
+                            </div>
+
+                            {/* Progress Section */}
+                            <div className="space-y-3 mb-6 relative z-10 bg-black/20 p-3 rounded-xl border border-white/5">
+                                <div className="flex justify-between text-[10px] font-bold uppercase tracking-tighter">
+                                    <span className="text-neutral-500">Repayment Progress</span>
+                                    <span className={colors.text}>{Math.round(paidPercentage)}%</span>
+                                </div>
+                                <div className="h-2 w-full bg-black/40 rounded-full overflow-hidden">
+                                    <div 
+                                        className={cn("h-full transition-all duration-700 ease-out", colors.progress)} 
+                                        style={{ width: `${paidPercentage}%` }}
+                                    />
+                                </div>
+                                <div className="flex justify-between text-xs">
+                                    <div className="flex flex-col">
+                                        <span className="text-[10px] text-neutral-500 uppercase">Paid</span>
+                                        <span className="text-white font-bold">{(loan.paid || 0).toLocaleString()}</span>
+                                    </div>
+                                    <div className="flex flex-col items-end">
+                                        <span className="text-[10px] text-neutral-500 uppercase">Total</span>
+                                        <span className="text-neutral-300 font-bold">{loan.amount.toLocaleString()} {loan.currency}</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Action Buttons */}
+                            <div className="mt-auto pt-4 relative z-10 border-t border-white/5">
+                                {remaining > 0 && paymentId !== loan.id && (
+                                    <div className="grid grid-cols-2 gap-3">
+                                        <Button 
+                                            variant="outline"
+                                            onClick={(e) => { e.stopPropagation(); setPaymentId(loan.id); }} 
+                                            className="bg-white/5 hover:bg-white/10 text-white border-white/10 h-12 text-xs font-bold rounded-xl transition-all active:scale-95"
+                                        >
+                                            Partial Paid
+                                        </Button>
+                                        <Button 
+                                            disabled={isSubmitting}
+                                            onClick={async (e) => {
+                                                e.stopPropagation();
+                                                setIsSubmitting(true);
+                                                try {
+                                                    await payLoan({ id: loan.id, amount: remaining });
+                                                } finally {
+                                                    setIsSubmitting(false);
+                                                }
+                                            }}
+                                            className={cn("text-white h-12 text-xs font-bold rounded-xl shadow-lg transition-all active:scale-95", colors.progress.replace('bg-', 'bg-').replace('-500', '-600') + " hover:opacity-90")}
+                                        >
+                                            Full Paid
+                                        </Button>
+                                    </div>
+                                )}
+
+                                {paymentId === loan.id && (
+                                    <form onSubmit={(e) => handlePaymentSubmit(loan.id, e)} className="flex gap-2 animate-fade-in-up">
+                                        <AmountInput autoFocus placeholder={`Amount`} value={paymentAmount} onChange={e => setPaymentAmount(e.target.value)} required className="flex-1 bg-black/40 h-11 rounded-xl border-white/10" />
+                                        <Button type="submit" disabled={isSubmitting} className="h-11 shrink-0 px-5 bg-emerald-600 hover:bg-emerald-500 font-bold rounded-xl">Pay</Button>
+                                        <Button type="button" variant="ghost" onClick={(e) => { e.stopPropagation(); setPaymentId(null); }} className="h-11 shrink-0 px-4 rounded-xl">
+                                            <X className="w-5 h-5" />
+                                        </Button>
+                                    </form>
+                                )}
+                            </div>
+
+                            {/* Background Decoration */}
+                            <div className={cn(
+                                "absolute -bottom-8 -right-8 opacity-[0.03] group-hover:opacity-[0.07] transition-all duration-500 group-hover:scale-110",
+                                colors.text
+                            )}>
+                                <HandCoins className="w-40 h-40 rotate-12" />
+                            </div>
+                        </div>
+                    );
+                })}
+                {loans.length === 0 && (
+                    <div className="col-span-full text-center py-20 glass-panel border-dashed border-white/10">
+                        <HandCoins className="w-16 h-16 text-neutral-700 mx-auto mb-4" />
+                        <h3 className="text-xl font-bold text-neutral-400">No Loans Found</h3>
+                        <p className="text-neutral-600 mt-2">Start tracking your loans by clicking the "New Loan" button.</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

client/src/pages/Login.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import { useAuthStore } from '../store/useAuthStore';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import { Wallet, Lock, User, AlertCircle, ArrowRight, Loader2 } from 'lucide-react';
+
+const Login: React.FC = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [rememberMe, setRememberMe] = useState(true);
+  
+  const { login, deviceId, username: storedUsername } = useAuthStore();
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    const attemptAutoLogin = async () => {
+      if (deviceId && storedUsername) {
+        setIsLoading(true);
+        try {
+          const response = await axios.post('http://localhost:3001/api/login-device', {
+            username: storedUsername,
+            deviceId,
+          });
+          login(response.data.token, response.data.username);
+          navigate('/');
+        } catch (err) {
+          console.error('Auto-login failed:', err);
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    };
+    attemptAutoLogin();
+  }, [deviceId, storedUsername, login, navigate]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      const deviceName = `${navigator.platform} - ${navigator.userAgent.split(') ')[0].split(' (')[1] || 'Web Browser'}`;
+      
+      const response = await axios.post('http://localhost:3001/api/login', {
+        username,
+        password,
+        deviceName,
+        rememberMe
+      });
+
+      login(response.data.token, response.data.username, response.data.deviceId);
+      navigate('/');
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Invalid username or password');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0f172a] flex items-center justify-center p-4 selection:bg-indigo-500/30">
+      {/* Background decoration */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 -left-20 w-80 h-80 bg-indigo-600/20 rounded-full blur-[100px]" />
+        <div className="absolute bottom-1/4 -right-20 w-80 h-80 bg-blue-600/20 rounded-full blur-[100px]" />
+      </div>
+
+      <div className="w-full max-w-md relative">
+        {/* Card */}
+        <div className="bg-[#1e293b]/50 backdrop-blur-xl border border-white/10 rounded-3xl p-8 shadow-2xl">
+          <div className="flex flex-col items-center mb-10">
+            <div className="w-16 h-16 bg-gradient-to-tr from-indigo-500 to-blue-500 rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-500/20 mb-4 animate-in fade-in zoom-in duration-700">
+              <Wallet className="w-8 h-8 text-white" />
+            </div>
+            <h1 className="text-3xl font-bold text-white tracking-tight mb-2">Welcome Back</h1>
+            <p className="text-slate-400 text-center">Enter your credentials to manage your wallets</p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-slate-300 ml-1">Username</label>
+              <div className="relative group">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-500 group-focus-within:text-indigo-400 transition-colors">
+                  <User size={18} />
+                </div>
+                <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  className="w-full bg-[#0f172a]/50 border border-white/5 rounded-2xl py-3.5 pl-11 pr-4 text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500/50 transition-all"
+                  placeholder="e.g. amez"
+                  required
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-slate-300 ml-1">Password</label>
+              <div className="relative group">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-500 group-focus-within:text-indigo-400 transition-colors">
+                  <Lock size={18} />
+                </div>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full bg-[#0f172a]/50 border border-white/5 rounded-2xl py-3.5 pl-11 pr-4 text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500/50 transition-all"
+                  placeholder="••••••••"
+                  required
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between px-1">
+              <label className="flex items-center gap-2 cursor-pointer group">
+                <div className="relative flex items-center">
+                  <input
+                    type="checkbox"
+                    checked={rememberMe}
+                    onChange={(e) => setRememberMe(e.target.checked)}
+                    className="peer sr-only"
+                  />
+                  <div className="w-5 h-5 border-2 border-slate-700 rounded-md peer-checked:bg-indigo-500 peer-checked:border-indigo-500 transition-all" />
+                  <svg
+                    className="absolute w-3.5 h-3.5 text-white opacity-0 peer-checked:opacity-100 transition-opacity left-[3px] pointer-events-none"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth="3"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <span className="text-sm text-slate-400 group-hover:text-slate-300 transition-colors">Remember this device</span>
+              </label>
+            </div>
+
+            {error && (
+              <div className="flex items-center gap-2 text-rose-400 bg-rose-400/10 border border-rose-400/20 p-4 rounded-2xl text-sm animate-in fade-in slide-in-from-top-2">
+                <AlertCircle size={16} className="shrink-0" />
+                <p>{error}</p>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full bg-gradient-to-r from-indigo-500 to-blue-600 hover:from-indigo-600 hover:to-blue-700 text-white font-semibold py-4 rounded-2xl shadow-lg shadow-indigo-500/25 transition-all transform active:scale-[0.98] disabled:opacity-50 disabled:active:scale-100 flex items-center justify-center gap-2 group mt-8"
+            >
+              {isLoading ? (
+                <Loader2 className="w-5 h-5 animate-spin" />
+              ) : (
+                <>
+                  Connect Wallet
+                  <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
+                </>
+              )}
+            </button>
+          </form>
+
+          <div className="mt-8 text-center">
+            <p className="text-xs text-slate-500 font-medium uppercase tracking-widest">Wallets Secure Access</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

client/src/pages/Settings.tsx

@@ -0,0 +1,292 @@
+import { useState, useRef, useEffect } from 'react';
+import { Settings as SettingsIcon, Download, Upload, Trash2, AlertCircle, CheckCircle2, ShieldAlert, Smartphone, X } from 'lucide-react';
+import { Button } from '../components/ui/button';
+import { useAuthStore } from '../store/useAuthStore';
+import axios from 'axios';
+
+export default function Settings() {
+    const [exporting, setExporting] = useState(false);
+    const [importing, setImporting] = useState(false);
+    const [clearing, setClearing] = useState(false);
+    const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
+    const [message, setMessage] = useState('');
+    const [replaceData, setReplaceData] = useState(false);
+    const [devices, setDevices] = useState<{id: number, device_name: string, last_used: string}[]>([]);
+    const [loadingDevices, setLoadingDevices] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const { token } = useAuthStore();
+
+    useEffect(() => {
+        fetchDevices();
+    }, []);
+
+    const fetchDevices = async () => {
+        if (!token) return;
+        setLoadingDevices(true);
+        try {
+            const response = await axios.get('http://localhost:3001/api/devices', {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            setDevices(response.data);
+        } catch (error) {
+            console.error('Failed to fetch devices:', error);
+        } finally {
+            setLoadingDevices(false);
+        }
+    };
+
+    const handleDeleteDevice = async (id: number) => {
+        if (!window.confirm('Are you sure you want to remove this device? You will be logged out on that device.')) return;
+        
+        try {
+            await axios.delete(`http://localhost:3001/api/devices/${id}`, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            
+            fetchDevices();
+        } catch (error) {
+            console.error('Failed to delete device:', error);
+            alert('Failed to remove device');
+        }
+    };
+
+    const handleExport = async () => {
+        setExporting(true);
+        setStatus('idle');
+        try {
+            const response = await fetch('http://localhost:3001/api/export');
+            if (!response.ok) throw new Error('Export failed');
+
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `money_manager_backup_${new Date().toISOString().split('T')[0]}.xlsx`;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            a.remove();
+            setStatus('success');
+            setMessage('Backup successfully generated and downloaded!');
+        } catch (error) {
+            console.error(error);
+            setStatus('error');
+            setMessage('Failed to generate backup. Please try again.');
+        } finally {
+            setExporting(false);
+        }
+    };
+
+    const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        if (replaceData && !window.confirm('Are you sure? This will PERMANENTLY DELETE all current transactions, exchanges, and loans and replace them with the imported data.')) {
+            if (fileInputRef.current) fileInputRef.current.value = '';
+            return;
+        }
+
+        setImporting(true);
+        setStatus('idle');
+        
+        try {
+            const reader = new FileReader();
+            reader.onload = async (event) => {
+                const base64 = (event.target?.result as string).split(',')[1];
+                try {
+                    const response = await fetch('http://localhost:3001/api/import', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ file: base64, replace: replaceData })
+                    });
+
+                    if (!response.ok) {
+                        const err = await response.json();
+                        throw new Error(err.error || 'Import failed');
+                    }
+
+                    setStatus('success');
+                    setMessage('Data imported successfully!');
+                } catch (error: any) {
+                    console.error(error);
+                    setStatus('error');
+                    setMessage(error.message || 'Failed to import data.');
+                } finally {
+                    setImporting(false);
+                    if (fileInputRef.current) fileInputRef.current.value = '';
+                }
+            };
+            reader.readAsDataURL(file);
+        } catch (error) {
+            console.error(error);
+            setStatus('error');
+            setMessage('Failed to read file.');
+            setImporting(false);
+        }
+    };
+
+    const handleClearData = async () => {
+        if (!window.confirm('EXTREME WARNING: This will PERMANENTLY DELETE ALL your transactions, exchanges, and loans. This action cannot be undone. Do you really want to continue?')) {
+            return;
+        }
+
+        setClearing(true);
+        setStatus('idle');
+        try {
+            const response = await fetch('http://localhost:3001/api/data', { method: 'DELETE' });
+            if (!response.ok) throw new Error('Clear data failed');
+            setStatus('success');
+            setMessage('All data cleared successfully.');
+        } catch (error) {
+            console.error(error);
+            setStatus('error');
+            setMessage('Failed to clear data.');
+        } finally {
+            setClearing(false);
+        }
+    };
+
+    return (
+        <div className="p-4 md:p-8 h-full flex flex-col pt-8 md:pt-8 w-full overflow-y-auto">
+            <div className="mb-6 md:mb-8 shrink-0">
+                <h1 className="text-xl md:text-2xl font-bold flex items-center gap-3">
+                    <SettingsIcon className="w-5 h-5 md:w-6 md:h-6 text-neutral-400" /> Settings & Backup
+                </h1>
+                <p className="text-sm md:text-base text-neutral-400 mt-1 md:mt-2">Manage your Data and App Preferences.</p>
+            </div>
+
+            <div className="max-w-3xl space-y-6 pb-24 md:pb-8">
+                {/* Data Backup Section */}
+                <div className="glass-panel p-4 md:p-6 border border-white/5 space-y-6">
+                    <div>
+                        <h2 className="text-base md:text-lg font-semibold mb-2 flex items-center gap-2">
+                            <Download className="w-4 h-4 text-emerald-400" /> Export Data
+                        </h2>
+                        <p className="text-sm text-neutral-400 mb-4">
+                            Export all your transactions, wallets, exchanges, and loans into an Excel file.
+                        </p>
+                        <Button onClick={handleExport} disabled={exporting} variant="secondary" className="border border-white/10 w-full md:w-auto">
+                            <Download className="w-4 h-4" />
+                            {exporting ? 'Generating Excel...' : 'Export to Excel'}
+                        </Button>
+                    </div>
+
+                    <div className="pt-6 border-t border-white/5">
+                        <h2 className="text-base md:text-lg font-semibold mb-2 flex items-center gap-2">
+                            <Upload className="w-4 h-4 text-blue-400" /> Import Data
+                        </h2>
+                        <p className="text-sm text-neutral-400 mb-4">
+                            Restore your data from a previously exported Excel backup.
+                        </p>
+                        
+                        <div className="flex flex-col gap-4">
+                            <div className="flex items-center gap-3 bg-white/5 p-3 rounded-lg border border-white/10">
+                                <input
+                                    type="checkbox"
+                                    id="replaceData"
+                                    checked={replaceData}
+                                    onChange={(e) => setReplaceData(e.target.checked)}
+                                    className="w-4 h-4 rounded border-white/20 bg-neutral-900 text-blue-500 focus:ring-blue-500"
+                                />
+                                <label htmlFor="replaceData" className="text-sm font-medium cursor-pointer">
+                                    Replace all current data with imported data
+                                </label>
+                            </div>
+
+                            <div className="flex flex-wrap gap-3">
+                                <Button 
+                                    onClick={() => fileInputRef.current?.click()} 
+                                    disabled={importing} 
+                                    variant="outline" 
+                                    className="border border-blue-500/30 hover:bg-blue-500/10 text-blue-400"
+                                >
+                                    <Upload className="w-4 h-4" />
+                                    {importing ? 'Importing...' : 'Select Excel File'}
+                                </Button>
+                                <input
+                                    type="file"
+                                    ref={fileInputRef}
+                                    onChange={handleImport}
+                                    className="hidden"
+                                    accept=".xlsx"
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    {status === 'success' && (
+                        <div className="flex items-center gap-2 text-emerald-400 text-sm bg-emerald-500/10 border border-emerald-500/20 p-3 rounded-lg animate-in fade-in duration-300">
+                            <CheckCircle2 className="w-4 h-4" /> {message}
+                        </div>
+                    )}
+
+                    {status === 'error' && (
+                        <div className="flex items-center gap-2 text-rose-400 text-sm bg-rose-500/10 border border-rose-500/20 p-3 rounded-lg animate-in fade-in duration-300">
+                            <AlertCircle className="w-4 h-4" /> {message}
+                        </div>
+                    )}
+                </div>
+
+                {/* Trusted Devices Section */}
+                <div className="glass-panel p-4 md:p-6 border border-white/5 space-y-4">
+                    <h2 className="text-base md:text-lg font-semibold flex items-center gap-2">
+                        <Smartphone className="w-4 h-4 text-indigo-400" /> Trusted Devices
+                    </h2>
+                    <p className="text-sm text-neutral-400">
+                        These devices can log in automatically without a password.
+                    </p>
+
+                    <div className="space-y-3">
+                        {loadingDevices ? (
+                            <p className="text-sm text-neutral-500 italic">Loading devices...</p>
+                        ) : devices.length === 0 ? (
+                            <p className="text-sm text-neutral-500 italic">No trusted devices found.</p>
+                        ) : (
+                            devices.map((device) => (
+                                <div key={device.id} className="flex items-center justify-between p-3 bg-white/5 rounded-xl border border-white/10 group hover:border-indigo-500/30 transition-all">
+                                    <div className="flex items-center gap-3">
+                                        <div className="w-10 h-10 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-400">
+                                            <Smartphone size={18} />
+                                        </div>
+                                        <div>
+                                            <p className="text-sm font-medium">{device.device_name}</p>
+                                            <p className="text-xs text-neutral-500">Last used: {new Date(device.last_used).toLocaleString()}</p>
+                                        </div>
+                                    </div>
+                                    <button 
+                                        onClick={() => handleDeleteDevice(device.id)}
+                                        className="p-2 text-neutral-500 hover:text-rose-400 hover:bg-rose-400/10 rounded-lg transition-all"
+                                        title="Remove device"
+                                    >
+                                        <X size={18} />
+                                    </button>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
+
+                {/* Danger Zone Section */}
+                <div className="glass-panel p-4 md:p-6 border border-rose-500/20 bg-rose-500/5">
+                    <h2 className="text-base md:text-lg font-semibold mb-2 flex items-center gap-2 text-rose-400">
+                        <ShieldAlert className="w-4 h-4" /> Danger Zone
+                    </h2>
+                    <p className="text-sm text-neutral-400 mb-6">
+                        Irreversible actions that affect your data. Please be careful.
+                    </p>
+
+                    <Button 
+                        onClick={handleClearData} 
+                        disabled={clearing} 
+                        variant="destructive" 
+                        className="bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/30 w-full md:w-auto"
+                    >
+                        <Trash2 className="w-4 h-4" />
+                        {clearing ? 'Clearing...' : 'Clear All Current Data'}
+                    </Button>
+                </div>
+
+            </div>
+        </div>
+    );
+}

client/src/pages/Transactions.tsx

@@ -0,0 +1,234 @@
+import { useState, useMemo } from 'react';
+import { useTransactions, useWallets } from '../hooks/queries';
+import { Search, Filter, X, ArrowDownRight, ArrowUpRight, ArrowRightLeft, Calendar } from 'lucide-react';
+import { format, isWithinInterval, startOfDay, endOfDay, parseISO } from 'date-fns';
+import { cn } from '../lib/utils';
+import { Input } from '../components/ui/input';
+
+type TransactionType = 'all' | 'income' | 'expense' | 'exchange';
+
+export default function Transactions() {
+    const { data: transactions = [] } = useTransactions();
+    const { data: wallets = [] } = useWallets();
+    
+    const [search, setSearch] = useState('');
+    const [typeFilter, setTypeFilter] = useState<TransactionType>('all');
+    const [walletFilter, setWalletFilter] = useState<string>('all');
+    const [categoryFilter, setCategoryFilter] = useState<string>('all');
+    const [startDate, setStartDate] = useState<string>('');
+    const [endDate, setEndDate] = useState<string>('');
+
+    const categories = useMemo(() => {
+        const cats = new Set<string>();
+        transactions.forEach((tx: any) => {
+            if (tx.category) cats.add(tx.category);
+        });
+        return Array.from(cats).sort();
+    }, [transactions]);
+
+    const filteredTransactions = useMemo(() => {
+        return transactions.filter((tx: any) => {
+            // Search filter (note only now)
+            const matchesSearch = !search || 
+                (tx.note?.toLowerCase().includes(search.toLowerCase()));
+            
+            // Type filter - special handling for 'exchange'
+            let matchesType = true;
+            if (typeFilter !== 'all') {
+                if (typeFilter === 'exchange') {
+                    matchesType = tx.type === 'transfer' || tx.category === 'Exchange';
+                } else if (typeFilter === 'income') {
+                    matchesType = tx.type === 'income' && tx.category !== 'Exchange';
+                } else if (typeFilter === 'expense') {
+                    matchesType = tx.type === 'expense' && tx.category !== 'Exchange';
+                } else {
+                    matchesType = tx.type === typeFilter;
+                }
+            }
+            
+            // Wallet filter
+            const matchesWallet = walletFilter === 'all' || 
+                tx.wallet_id === parseInt(walletFilter) || 
+                tx.to_wallet_id === parseInt(walletFilter);
+
+            // Category filter
+            const matchesCategory = categoryFilter === 'all' || tx.category === categoryFilter;
+
+            // Date filter
+            let matchesDate = true;
+            if (startDate || endDate) {
+                try {
+                    const txDate = parseISO(tx.date);
+                    const interval = {
+                        start: startDate ? startOfDay(parseISO(startDate)) : new Date(0),
+                        end: endDate ? endOfDay(parseISO(endDate)) : new Date(8640000000000000)
+                    };
+                    matchesDate = isWithinInterval(txDate, interval);
+                } catch (e) {
+                    matchesDate = true;
+                }
+            }
+            
+            return matchesSearch && matchesType && matchesWallet && matchesCategory && matchesDate;
+        });
+    }, [transactions, search, typeFilter, walletFilter, categoryFilter, startDate, endDate]);
+
+    const getWalletName = (id: number) => wallets.find(w => w.id === id)?.name || 'Unknown';
+
+    const clearFilters = () => {
+        setSearch('');
+        setTypeFilter('all');
+        setWalletFilter('all');
+        setCategoryFilter('all');
+        setStartDate('');
+        setEndDate('');
+    };
+
+    const hasActiveFilters = search !== '' || 
+                            typeFilter !== 'all' || 
+                            walletFilter !== 'all' || 
+                            categoryFilter !== 'all' ||
+                            startDate !== '' ||
+                            endDate !== '';
+
+    return (
+        <div className="p-4 md:p-8 h-full flex flex-col">
+            <div className="flex flex-col mb-6 md:mb-8 shrink-0">
+                <h1 className="text-xl md:text-2xl font-bold">Transactions</h1>
+                <p className="text-sm md:text-base text-neutral-400">View and track your financial history.</p>
+            </div>
+
+            <div className="glass-panel p-4 mb-6 shrink-0">
+                <div className="flex flex-wrap items-center gap-3">
+                    {/* Selects: Type, Wallet, Category */}
+                    <div className="flex flex-wrap gap-2 items-center w-full lg:w-auto">
+                        <select 
+                            className="bg-neutral-900 border border-neutral-800 rounded-md px-3 py-2 h-10 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1 md:flex-none md:w-[120px]"
+                            value={typeFilter}
+                            onChange={(e) => setTypeFilter(e.target.value as TransactionType)}
+                        >
+                            <option value="all">All Types</option>
+                            <option value="income">Income</option>
+                            <option value="expense">Expense</option>
+                            <option value="exchange">Exchange</option>
+                        </select>
+
+                        <select 
+                            className="bg-neutral-900 border border-neutral-800 rounded-md px-3 py-2 h-10 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1 md:flex-none md:w-[140px]"
+                            value={walletFilter}
+                            onChange={(e) => setWalletFilter(e.target.value)}
+                        >
+                            <option value="all">All Wallets</option>
+                            {wallets.map(w => (
+                                <option key={w.id} value={w.id.toString()}>{w.name}</option>
+                            ))}
+                        </select>
+
+                        <select 
+                            className="bg-neutral-900 border border-neutral-800 rounded-md px-3 py-2 h-10 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 flex-1 md:flex-none md:w-[140px]"
+                            value={categoryFilter}
+                            onChange={(e) => setCategoryFilter(e.target.value)}
+                        >
+                            <option value="all">All Categories</option>
+                            {categories.map(cat => (
+                                <option key={cat} value={cat}>{cat}</option>
+                            ))}
+                        </select>
+                    </div>
+
+                    {/* Date Range - Flexible width */}
+                    <div className="flex items-center gap-2 bg-neutral-900 border border-neutral-800 rounded-md p-1 h-10 lg:w-auto w-full flex-shrink-0">
+                        <div className="relative flex-1 md:flex-none">
+                            <Calendar className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-500 pointer-events-none" />
+                            <input 
+                                type="date"
+                                className="bg-transparent border-none pl-7 pr-1 py-1 text-[11px] focus:outline-none w-full md:w-[110px] [color-scheme:dark]"
+                                value={startDate}
+                                onChange={(e) => setStartDate(e.target.value)}
+                            />
+                        </div>
+                        <span className="text-neutral-600 text-[10px] uppercase font-bold px-1">to</span>
+                        <div className="relative flex-1 md:flex-none">
+                            <Calendar className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-500 pointer-events-none" />
+                            <input 
+                                type="date"
+                                className="bg-transparent border-none pl-7 pr-1 py-1 text-[11px] focus:outline-none w-full md:w-[110px] [color-scheme:dark]"
+                                value={endDate}
+                                onChange={(e) => setEndDate(e.target.value)}
+                            />
+                        </div>
+                    </div>
+
+                    {/* Search - Compact width */}
+                    <div className="relative w-full md:w-64">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
+                        <Input 
+                            placeholder="Search note..." 
+                            className="pl-10 h-10 w-full"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                        />
+                    </div>
+
+                    {hasActiveFilters && (
+                        <button 
+                            onClick={clearFilters}
+                            className="flex items-center gap-1.5 px-3 py-2 text-xs text-rose-400 hover:text-rose-300 transition-colors bg-rose-500/10 rounded-md border border-rose-500/20 h-10 w-full md:w-auto md:ml-auto"
+                        >
+                            <X className="w-3.5 h-3.5" /> Clear
+                        </button>
+                    )}
+                </div>
+            </div>
+
+
+            <div className="flex-1 overflow-y-auto w-full space-y-3 pb-24 md:pb-0 pr-2 pb-10">
+                {filteredTransactions.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-20 text-neutral-500">
+                        <Filter className="w-12 h-12 mb-3 opacity-20" />
+                        <p>No transactions found matching your filters</p>
+                    </div>
+                ) : (
+                    filteredTransactions.map((tx: any) => (
+                        <div key={tx.id} className="glass-panel p-3 md:p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between hover:bg-white/5 transition-colors gap-3 sm:gap-0">
+                            <div className="flex items-center gap-3 md:gap-4 w-full sm:w-auto">
+                                <div className={cn(
+                                    "w-10 h-10 rounded-full flex items-center justify-center border shrink-0",
+                                    tx.type === 'income' ? "bg-emerald-500/20 border-emerald-500/30 text-emerald-400" :
+                                        tx.type === 'expense' ? "bg-rose-500/20 border-rose-500/30 text-rose-400" :
+                                            "bg-blue-500/20 border-blue-500/30 text-blue-400"
+                                )}>
+                                    {tx.type === 'income' ? <ArrowDownRight className="w-5 h-5" /> :
+                                        tx.type === 'expense' ? <ArrowUpRight className="w-5 h-5" /> :
+                                            <ArrowRightLeft className="w-5 h-5" />}
+                                </div>
+                                <div className="flex-1 flex flex-col justify-center min-w-0">
+                                    <div className="font-medium text-neutral-200 truncate">{tx.note || <span className="opacity-50 capitalize">{tx.type}</span>}</div>
+                                    <div className="text-[10px] md:text-xs text-neutral-500 mt-0.5 md:mt-1 flex flex-wrap gap-1.5 md:gap-2 items-center">
+                                        <span className="shrink-0">{format(new Date(tx.date), 'MMM d, yy HH:mm')}</span>
+                                        <span className="hidden sm:inline">•</span>
+                                        <span className="text-neutral-400 shrink-0">{getWalletName(tx.wallet_id)}{tx.to_wallet_id ? ` → ${getWalletName(tx.to_wallet_id)}` : ''}</span>
+                                        {tx.category && (
+                                            <>
+                                                <span className="hidden sm:inline">•</span>
+                                                <span className="text-blue-400/80 bg-blue-500/10 px-1.5 py-0.5 rounded shrink-0">{tx.category}</span>
+                                            </>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                            <div className={cn(
+                                "font-semibold text-base md:text-lg self-end sm:self-auto",
+                                tx.type === 'income' ? "text-emerald-400" : tx.type === 'expense' ? "text-rose-400" : "text-blue-400"
+                            )}>
+                                {tx.type === 'expense' ? '-' : tx.type === 'income' ? '+' : ''}
+                                {tx.amount.toLocaleString()} <span className="text-xs md:text-sm text-neutral-500">{tx.currency}</span>
+                            </div>
+                        </div>
+                    ))
+                )}
+            </div>
+        </div>
+    );
+}
+

client/src/pages/WalletsView.tsx

@@ -0,0 +1,335 @@
+import { useState, useMemo } from 'react';
+import { useWallets, useTransactions, useRates, useCreateTransaction, useExchanges, useCreateExchange } from '../hooks/queries';
+import { Wallet as WalletIcon, DollarSign, Coins, Bitcoin, MessageCircle, ShieldCheck, Zap, CreditCard, PlusCircle, RefreshCw, MinusCircle } from 'lucide-react';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { AmountInput } from '../components/ui/AmountInput';
+import { Select } from '../components/ui/select';
+import { Label } from '../components/ui/label';
+
+export default function WalletsView() {
+    const getWalletStyling = (name: string) => {
+        const n = name.toLowerCase();
+        if (n.includes('dollar')) return { icon: DollarSign, color: 'text-emerald-400', bg: 'bg-emerald-500/20', border: 'border-emerald-500/30' };
+        if (n.includes('dinnar') || n.includes('dinar')) return { icon: Coins, color: 'text-indigo-400', bg: 'bg-indigo-500/20', border: 'border-indigo-500/30' };
+        if (n.includes('crypto')) return { icon: Bitcoin, color: 'text-orange-400', bg: 'bg-orange-500/20', border: 'border-orange-500/30' };
+        if (n.includes('wechat')) return { icon: MessageCircle, color: 'text-green-400', bg: 'bg-green-500/20', border: 'border-green-500/30' };
+        if (n.includes('alipay')) return { icon: ShieldCheck, color: 'text-blue-400', bg: 'bg-blue-500/20', border: 'border-blue-500/30' };
+        if (n.includes('fib')) return { icon: Zap, color: 'text-yellow-400', bg: 'bg-yellow-500/20', border: 'border-yellow-500/30' };
+        if (n.includes('fastpay')) return { icon: Zap, color: 'text-red-400', bg: 'bg-red-500/20', border: 'border-red-500/30' };
+        if (n.includes('super qi')) return { icon: CreditCard, color: 'text-blue-400', bg: 'bg-blue-500/20', border: 'border-blue-500/30' };
+        if (n.includes('kj wallets')) return { icon: WalletIcon, color: 'text-purple-400', bg: 'bg-purple-500/20', border: 'border-purple-500/30' };
+        return { icon: WalletIcon, color: 'text-indigo-400', bg: 'bg-indigo-500/20', border: 'border-indigo-500/30' };
+    };
+
+    const getAllowedDestinations = (sourceName: string) => {
+        const name = sourceName.toLowerCase();
+        if (name.includes('usd') && !name.includes('usdt')) return ['USDT', 'Cash Dinar', 'Alipay', 'WeChat'];
+        if (name.includes('kj wallets')) return ['Cash USD', 'FIB'];
+        if (name.includes('dinar')) return ['FIB', 'FastPay', 'Super Qi', 'Cash USD'];
+        if (name.includes('usdt')) return ['Cash USD'];
+        if (name.includes('fib')) return ['FastPay', 'Super Qi', 'Cash Dinar'];
+        if (name.includes('fastpay')) return ['FIB', 'Super Qi', 'Cash Dinar'];
+        if (name.includes('qi')) return ['FastPay', 'FIB', 'Cash Dinar'];
+        if (name.includes('wechat')) return ['Alipay', 'Cash USD'];
+        if (name.includes('alipay')) return ['WeChat', 'Cash USD'];
+        return [];
+    };
+
+    const { data: rawWallets = [] } = useWallets();
+    const wallets = useMemo(() => {
+        const order = ['cash usd', 'cash dinar', 'super qi', 'alipay', 'wechat', 'fib', 'fastpay', 'usdt', 'kj wallets'];
+        return [...rawWallets].sort((a: any, b: any) => {
+            const idxA = order.indexOf(a.name.toLowerCase());
+            const idxB = order.indexOf(b.name.toLowerCase());
+            return (idxA === -1 ? 999 : idxA) - (idxB === -1 ? 999 : idxB);
+        });
+    }, [rawWallets]);
+
+    const { data: transactions = [] } = useTransactions();
+    const { data: exchanges = [] } = useExchanges();
+    const { data: rates } = useRates();
+    const { mutateAsync: createTransaction } = useCreateTransaction();
+    const { mutateAsync: createExchange } = useCreateExchange();
+    
+    const [actionState, setActionState] = useState<{type: 'transfer' | 'income' | 'expense' | 'exchange', walletId?: number} | null>(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    // Form States
+    const [amount, setAmount] = useState('');
+    const [toAmount, setToAmount] = useState('');
+    const [toWallet, setToWallet] = useState('');
+    const [note, setNote] = useState('');
+    const [category, setCategory] = useState('other'); 
+
+    const exchangeRates = rates || { USD: 1, IQD: 1539.5, RMB: 6.86 };
+
+    // Calculate Balances dynamically factoring in currency differences
+    const getBalance = (w: any) => {
+        const txBal = transactions.reduce((acc: number, tx: any) => {
+            let effectiveAmount = tx.amount;
+            if (tx.currency !== w.currency) {
+                const txRate = exchangeRates[tx.currency] || 1;
+                const walletRate = exchangeRates[w.currency] || 1;
+                effectiveAmount = (tx.amount / txRate) * walletRate;
+            }
+
+            if (tx.type === 'income' && tx.wallet_id === w.id) return acc + effectiveAmount;
+            if (tx.type === 'expense' && tx.wallet_id === w.id) return acc - effectiveAmount;
+            if (tx.type === 'transfer') {
+                if (tx.wallet_id === w.id) return acc - effectiveAmount;
+                if (tx.to_wallet_id === w.id) return acc + effectiveAmount;
+            }
+            return acc;
+        }, 0);
+
+        const exBal = exchanges.reduce((acc: number, ex: any) => {
+            let bal = 0;
+            if (ex.from_wallet_id === w.id) bal -= ex.from_amount;
+            if (ex.to_wallet_id === w.id) bal += ex.to_amount;
+            return acc + bal;
+        }, 0);
+
+        return txBal + exBal;
+    };
+
+    const activeWallet = actionState?.walletId ? wallets.find((w: any) => w.id === actionState.walletId) : null;
+    const currentBalance = activeWallet ? getBalance(activeWallet) : 0;
+    const enteredAmount = parseFloat(amount) || 0;
+    const isInsufficient = (actionState?.type === 'expense' || actionState?.type === 'exchange') && enteredAmount > currentBalance;
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (isInsufficient) return;
+        setIsSubmitting(true);
+        try {
+            if (actionState?.type === 'income' || actionState?.type === 'expense') {
+                const targetWallet = wallets.find((w: any) => w.id === actionState.walletId);
+                if (!targetWallet) return;
+                
+                let finalCategory = category;
+                if (actionState.type === 'income' && category === 'other') {
+                    // If it was the default 'other' but from a previous expense, and we are in income now, 
+                    // we might want to ensure it's handled correctly if not changed.
+                    // But actually, the state is shared. So we just use 'category' state.
+                }
+
+                await createTransaction({
+                    type: actionState.type,
+                    amount: parseFloat(amount),
+                    currency: targetWallet.currency,
+                    wallet_id: targetWallet.id,
+                    category: finalCategory,
+                    note: note || (actionState.type === 'income' ? 'Added Income' : 'Recorded Expense'),
+                    date: new Date().toISOString()
+                } as any);
+            } else if (actionState?.type === 'exchange') {
+                const sourceW = wallets.find((w: any) => w.id === actionState.walletId);
+                const destW = wallets.find((w: any) => w.id.toString() === toWallet);
+                if (!sourceW || !destW) return;
+
+                const fAmt = parseFloat(amount);
+                const tAmt = parseFloat(toAmount);
+                
+                await createExchange({
+                    from_amount: fAmt,
+                    from_currency: sourceW.currency,
+                    from_wallet_id: sourceW.id,
+                    to_amount: tAmt,
+                    to_currency: destW.currency,
+                    to_wallet_id: destW.id,
+                    rate: tAmt / fAmt,
+                    note: note || `Exchanged to ${destW.name}`,
+                    date: new Date().toISOString()
+                } as any);
+            }
+
+            setActionState(null);
+            setAmount(''); setToAmount(''); setNote(''); setToWallet(''); setCategory('other');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <div className="p-4 md:p-8 h-full flex flex-col">
+            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6 md:mb-8 shrink-0">
+                <h1 className="text-xl md:text-2xl font-bold flex items-center gap-3">
+                    <WalletIcon className="w-5 h-5 md:w-6 md:h-6 text-indigo-400" /> Wallets
+                </h1>
+                <Button onClick={() => setActionState(null)} className="opacity-0 cursor-default pointer-events-none w-full sm:w-auto">
+                    Placeholder
+                </Button>
+            </div>
+
+            {actionState && (
+                <div className={`glass-panel p-4 md:p-6 mb-6 md:mb-8 border ${
+                    actionState.type === 'income' ? 'border-emerald-500/30' : 
+                    actionState.type === 'expense' ? 'border-rose-500/30' : 
+                    'border-blue-500/30'
+                }`}>
+                    <div className="flex justify-between items-center mb-4">
+                        <h2 className={`text-lg font-semibold ${
+                            actionState.type === 'income' ? 'text-emerald-400' : 
+                            actionState.type === 'expense' ? 'text-rose-400' : 
+                            'text-blue-400'
+                        }`}>
+                            {actionState.type === 'income' ? `Add Salary / Income to ${wallets.find((w: any) => w.id === actionState.walletId)?.name}` : 
+                             actionState.type === 'expense' ? `Add Expense from ${wallets.find((w: any) => w.id === actionState.walletId)?.name}` :
+                             `Exchange from ${wallets.find((w: any) => w.id === actionState.walletId)?.name}`}
+                        </h2>
+                        <Button variant="ghost" size="sm" onClick={() => setActionState(null)}>Cancel</Button>
+                    </div>
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            {actionState.type === 'exchange' && (() => {
+                                const sourceName = wallets.find((w: any) => w.id === actionState.walletId)?.name || '';
+                                const allowedNames = getAllowedDestinations(sourceName);
+                                const availableDestinations = wallets.filter((w: any) => w.id !== actionState.walletId && allowedNames.includes(w.name));
+
+                                return (
+                                    <div>
+                                        <Label>To Wallet</Label>
+                                        <Select required value={toWallet} onChange={e => setToWallet(e.target.value)} className="mt-1">
+                                            <option value="">Select Destination</option>
+                                            {availableDestinations.map((w: any) => (
+                                                <option key={w.id} value={w.id}>{w.name} ({w.currency})</option>
+                                            ))}
+                                        </Select>
+                                        {availableDestinations.length === 0 && (
+                                            <p className="text-xs text-red-400 mt-2">No allowed conversions for this wallet type.</p>
+                                        )}
+                                    </div>
+                                );
+                            })()}
+                            <div>
+                                <Label>{
+                                    actionState.type === 'exchange' ? 'Amount to Exchange' : 
+                                    actionState.type === 'income' ? 'Income Amount' : 
+                                    'Expense Amount'
+                                }</Label>
+                                <div className="relative mt-1">
+                                    <AmountInput required value={amount} onChange={e => setAmount(e.target.value)} className="pr-12" />
+                                    <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-neutral-500 font-medium text-sm">
+                                        {wallets.find((w: any) => w.id === actionState.walletId)?.currency}
+                                    </div>
+                                </div>
+                            </div>
+                            {actionState.type === 'exchange' && (
+                                <div>
+                                    <Label>Exact Amount Received</Label>
+                                    <div className="relative mt-1">
+                                        <AmountInput required value={toAmount} onChange={e => setToAmount(e.target.value)} className="pr-12" />
+                                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-neutral-500 font-medium text-sm">
+                                            {wallets.find((w: any) => w.id.toString() === toWallet)?.currency}
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                            {actionState.type === 'expense' && (
+                                <div>
+                                    <Label>Category</Label>
+                                    <Select 
+                                        value={category} 
+                                        onChange={e => setCategory(e.target.value)}
+                                        className="mt-1"
+                                    >
+                                        <option value="food">Food</option>
+                                        <option value="market">Market</option>
+                                        <option value="transport">Transport</option>
+                                        <option value="cafe">Cafe</option>
+                                        <option value="barber">Barber</option>
+                                        <option value="mobile-balance">Mobile Balance</option>
+                                        <option value="electricity">Electricity</option>
+                                        <option value="health">Health</option>
+                                        <option value="gift">Gift</option>
+                                        <option value="other">Other</option>
+                                    </Select>
+                                </div>
+                            )}
+                            {actionState.type === 'income' && (
+                                <div>
+                                    <Label>Category</Label>
+                                    <Select 
+                                        value={category} 
+                                        onChange={e => setCategory(e.target.value)}
+                                        className="mt-1"
+                                    >
+                                        <option value="salary">Salary</option>
+                                        <option value="gift">Gift</option>
+                                        <option value="other">Other</option>
+                                    </Select>
+                                </div>
+                            )}
+                            <div className={actionState.type === 'exchange' ? "col-span-1 md:col-span-2" : ""}>
+                                <Label>Note (Optional)</Label>
+                                <Input type="text" value={note} onChange={e => setNote(e.target.value)} placeholder={
+                                    actionState.type === 'income' ? 'e.g. Salary' : 
+                                    actionState.type === 'expense' ? 'e.g. Food, Transport' : 
+                                    ''
+                                } className="mt-1" />
+                            </div>
+                        </div>
+                        {isInsufficient && (
+                            <div className="bg-rose-500/10 border border-rose-500/20 text-rose-400 p-3 rounded-xl text-sm mb-4">
+                                cantbe expense balnce than your balance
+                            </div>
+                        )}
+                        <div className="flex justify-end pt-2 md:pt-4">
+                            <Button 
+                                type="submit" 
+                                disabled={isSubmitting || isInsufficient} 
+                                className={`w-full md:w-auto ${
+                                    isInsufficient ? 'bg-neutral-800 text-neutral-500 cursor-not-allowed' :
+                                    actionState.type === 'income' ? 'bg-emerald-600 hover:bg-emerald-500' : 
+                                    actionState.type === 'expense' ? 'bg-rose-600 hover:bg-rose-500' : 
+                                    'bg-blue-600 hover:bg-blue-500'
+                                } text-white`}
+                            >
+                                {actionState.type === 'income' ? 'Add Funds' : 
+                                 actionState.type === 'expense' ? 'Record Expense' : 
+                                 'Execute Exchange'}
+                            </Button>
+                        </div>
+                    </form>
+                </div>
+            )}
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 overflow-y-auto pb-24 md:pb-0 pr-2">
+                {wallets.map((w: any) => {
+                    const balance = getBalance(w);
+                    const { icon: Icon, color, bg, border } = getWalletStyling(w.name);
+                    
+                    return (
+                        <div key={w.id} className={`glass-panel p-4 md:p-6 border border-white/5 hover:border-indigo-500/30 transition-all flex flex-col justify-between group`}>
+                            <div>
+                                <div className={`w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center mb-3 md:mb-4 border ${bg} ${color} ${border}`}>
+                                    <Icon className="w-5 h-5 md:w-6 md:h-6" />
+                                </div>
+                                <h3 className="text-base md:text-lg font-bold">{w.name}</h3>
+                                <p className="text-xs md:text-sm text-neutral-400 capitalize">{w.type}</p>
+                            </div>
+                            <div className="mt-6 md:mt-8 pt-4 border-t border-white/10">
+                                <p className="text-xs md:text-sm text-neutral-500 mb-1">Current Balance</p>
+                                <p className="text-xl md:text-2xl font-bold tracking-tight mb-4">
+                                    {balance.toLocaleString(undefined, { maximumFractionDigits: 2 })} <span className="text-sm md:text-lg text-neutral-500">{w.currency}</span>
+                                </p>
+                                <div className="grid grid-cols-3 gap-1 md:gap-2 mt-auto">
+                                    <button onClick={() => { setActionState({ type: 'income', walletId: w.id }); setCategory('salary'); }} className="flex items-center justify-center gap-1 md:gap-1.5 py-2 rounded shadow-sm bg-white/5 hover:bg-emerald-500/20 text-emerald-400 hover:text-emerald-300 font-medium text-[10px] md:text-sm transition-colors border border-emerald-500/10 hover:border-emerald-500/30">
+                                        <PlusCircle className="w-3 h-3 md:w-4 md:h-4" /> Add
+                                    </button>
+                                    <button onClick={() => { setActionState({ type: 'expense', walletId: w.id }); setCategory('other'); }} className="flex items-center justify-center gap-1 md:gap-1.5 py-2 rounded shadow-sm bg-white/5 hover:bg-rose-500/20 text-rose-400 hover:text-rose-300 font-medium text-[10px] md:text-sm transition-colors border border-rose-500/10 hover:border-rose-500/30">
+                                        <MinusCircle className="w-3 h-3 md:w-4 md:h-4" /> Expense
+                                    </button>
+                                    <button onClick={() => { setActionState({ type: 'exchange', walletId: w.id }); setCategory('other'); }} className="flex items-center justify-center gap-1 md:gap-1.5 py-2 rounded shadow-sm bg-white/5 hover:bg-blue-500/20 text-blue-400 hover:text-blue-300 font-medium text-[10px] md:text-sm transition-colors border border-blue-500/10 hover:border-blue-500/30">
+                                        <RefreshCw className="w-3 h-3 md:w-3.5 md:h-3.5" /> Exch
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

client/src/store/useAppStore.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface AppState {
+  mainCurrency: string;
+  setMainCurrency: (currency: string) => void;
+}
+
+export const useAppStore = create<AppState>((set) => ({
+  mainCurrency: 'USD',
+  setMainCurrency: (currency) => set({ mainCurrency: currency }),
+}));

client/src/store/useAuthStore.ts

@@ -0,0 +1,46 @@
+import { create } from 'zustand';
+
+interface AuthState {
+  token: string | null;
+  username: string | null;
+  deviceId: string | null;
+  isAuthenticated: boolean;
+  login: (token: string, username: string, deviceId?: string | null) => void;
+  setDeviceId: (deviceId: string | null) => void;
+  logout: () => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => {
+  const storedToken = localStorage.getItem('auth_token');
+  const storedUsername = localStorage.getItem('auth_username');
+  const storedDeviceId = localStorage.getItem('auth_device_id');
+
+  return {
+    token: storedToken,
+    username: storedUsername,
+    deviceId: storedDeviceId,
+    isAuthenticated: !!storedToken,
+    login: (token, username, deviceId = null) => {
+      localStorage.setItem('auth_token', token);
+      localStorage.setItem('auth_username', username);
+      if (deviceId) {
+        localStorage.setItem('auth_device_id', deviceId);
+      }
+      set({ token, username, deviceId: deviceId || storedDeviceId, isAuthenticated: true });
+    },
+    setDeviceId: (deviceId) => {
+      if (deviceId) {
+        localStorage.setItem('auth_device_id', deviceId);
+      } else {
+        localStorage.removeItem('auth_device_id');
+      }
+      set({ deviceId });
+    },
+    logout: () => {
+      localStorage.removeItem('auth_token');
+      localStorage.removeItem('auth_username');
+      // Note: we don't remove auth_device_id here because it's used for auto-login
+      set({ token: null, username: null, isAuthenticated: false });
+    },
+  };
+});

client/src/types.ts

@@ -0,0 +1,43 @@
+export interface Wallet {
+    id: number;
+    name: string;
+    type: string;
+    currency: string;
+}
+
+export interface Transaction {
+    id: number;
+    type: 'income' | 'expense' | 'transfer';
+    amount: number;
+    currency: string;
+    wallet_id: number;
+    to_wallet_id?: number | null;
+    category?: string;
+    note?: string;
+    date: string;
+    country_id?: string;
+}
+
+export interface Exchange {
+    id: number;
+    from_amount: number;
+    from_currency: string;
+    from_wallet_id: number;
+    to_amount: number;
+    to_currency: string;
+    to_wallet_id: number;
+    rate: number;
+    date: string;
+    note?: string;
+}
+
+export interface Loan {
+    id: number;
+    person: string;
+    type: 'borrowed_from_me' | 'owed_by_me';
+    amount: number;
+    currency: string;
+    paid: number;
+    date: string;
+    note?: string;
+}

client/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

client/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

client/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

client/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    react()
+  ],
+})

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "wallets-workspace",
+  "version": "1.0.0",
+  "private": true,
+  "workspaces": [
+    "client",
+    "server"
+  ],
+  "scripts": {
+    "dev": "concurrently \"npm run dev -w server\" \"npm run dev -w client\"",
+    "build": "npm run build -w client",
+    "install:all": "npm install"
+  },
+  "devDependencies": {
+    "concurrently": "^9.1.2",
+    "puppeteer": "^24.39.0"
+  }
+}