Upload 28 files

Dockerfile

@@ -0,0 +1,18 @@
+# Sử dụng Python bản ổn định
+FROM python:3.10-slim
+
+# Thiết lập thư mục làm việc
+WORKDIR /app
+
+# Copy file requirements và cài đặt
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy toàn bộ code vào container
+COPY . .
+
+# Cổng mặc định của Hugging Face là 7860
+EXPOSE 7860
+
+# Lệnh chạy ứng dụng
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

frontend/.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

frontend/.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?

frontend/App.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { HashRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { ShopProvider } from './contexts/ShopContext';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
+import Layout from './components/Layout';
+import Dashboard from './pages/Dashboard';
+import ProfitAnalytics from './pages/ProfitAnalytics';
+import Orders from './pages/Orders';
+import DataImport from './pages/DataImport';
+import Settings from './pages/Settings';
+import ShopManagement from './pages/ShopManagement';
+import { Login } from './pages/Login';
+import { AdminDashboard } from './pages/AdminDashboard';
+
+const RequireAuth: React.FC<{ children: React.ReactNode; permission?: string }> = ({ children, permission }) => {
+  const { isAuthenticated, isLoading, hasPermission, isAdmin } = useAuth();
+  const location = useLocation();
+
+  if (isLoading) {
+    return <div className="flex h-screen items-center justify-center">Loading...</div>;
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  if (permission && !hasPermission(permission) && !isAdmin) {
+    return <div className="p-8 text-center text-red-600">Access Denied: You do not have permission to view this page.</div>;
+  }
+
+  return <>{children}</>;
+};
+
+const AppRoutes: React.FC = () => {
+  return (
+    <Routes>
+      <Route path="/login" element={<Login />} />
+
+      <Route path="/" element={
+        <RequireAuth permission="view_dashboard">
+          <Layout>
+            <Dashboard />
+          </Layout>
+        </RequireAuth>
+      } />
+
+      <Route path="/profit" element={
+        <RequireAuth permission="view_profit">
+          <Layout>
+            <ProfitAnalytics />
+          </Layout>
+        </RequireAuth>
+      } />
+
+      <Route path="/orders" element={
+        <RequireAuth permission="view_orders">
+          <Layout>
+            <Orders />
+          </Layout>
+        </RequireAuth>
+      } />
+
+      <Route path="/import" element={
+        <RequireAuth permission="view_import">
+          <Layout>
+            <DataImport />
+          </Layout>
+        </RequireAuth>
+      } />
+
+      <Route path="/shops" element={
+        <RequireAuth permission="view_shops">
+          <Layout>
+            <ShopManagement />
+          </Layout>
+        </RequireAuth>
+      } />
+
+      <Route path="/settings" element={
+        <RequireAuth permission="manage_settings">
+          <Layout>
+            <Settings />
+          </Layout>
+        </RequireAuth>
+      } />
+
+      <Route path="/admin" element={
+        <RequireAuth>
+          <Layout>
+            <AdminDashboard />
+          </Layout>
+        </RequireAuth>
+      } />
+
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+};
+
+const App: React.FC = () => {
+  return (
+    <AuthProvider>
+      <ShopProvider>
+        <Router>
+          <AppRoutes />
+        </Router>
+      </ShopProvider>
+    </AuthProvider>
+  );
+};
+
+export default App;

frontend/README.md

@@ -0,0 +1,20 @@
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/16GQbpwiomN0VwS61QXpdHLgZPLiRv7Cs
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

frontend/components/Layout.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { NavLink, useLocation, useNavigate } from 'react-router-dom';
+import ShopSelector from './ShopSelector';
+import { useAuth } from '../contexts/AuthContext';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const { user, isAdmin, logout, hasPermission } = useAuth();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  const navItems = [
+    { name: 'Dashboard', path: '/', icon: 'dashboard', permission: 'view_dashboard' },
+    { name: 'Profit Analytics', path: '/profit', icon: 'bar_chart', permission: 'view_profit' },
+    { name: 'Orders', path: '/orders', icon: 'shopping_cart', permission: 'view_orders' },
+    { name: 'Data Import', path: '/import', icon: 'cloud_upload', permission: 'view_import' },
+    { name: 'Shops', path: '/shops', icon: 'storefront', permission: 'view_shops' },
+    { name: 'Settings', path: '/settings', icon: 'settings', permission: 'manage_settings' },
+  ];
+
+  const filteredNavItems = navItems.filter(item => hasPermission(item.permission));
+
+  if (isAdmin) {
+    // Admin link doesn't need a permission check because isAdmin covers it, 
+    // but for type consistency we can add a dummy permission or just push to filteredNavItems 
+    // since filteredNavItems is what we iterate over.
+    // However, navItems is defined as read-only implicitly by ts inference unless typed.
+    // Let's just push to filteredNavItems.
+    filteredNavItems.push({ name: 'Admin', path: '/admin', icon: 'admin_panel_settings', permission: 'admin' });
+  }
+
+  return (
+    <div className="flex h-screen w-full overflow-hidden bg-background-light">
+      {/* Sidebar */}
+      <aside className={`fixed inset-y-0 left-0 z-30 w-64 transform bg-white border-r border-border-light transition-transform duration-300 ease-in-out md:relative md:translate-x-0 ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}`}>
+        <div className="flex h-full flex-col justify-between p-4">
+          <div className="flex flex-col gap-6">
+            {/* Logo */}
+            <div className="flex items-center gap-3 px-2">
+              <div
+                className="bg-gradient-to-br from-primary to-primary/70 rounded-xl size-10 shadow-lg shadow-primary/20 flex items-center justify-center"
+              >
+                <span className="material-symbols-outlined text-white">analytics</span>
+              </div>
+              <h1 className="text-text-main text-lg font-bold tracking-tight">Etsy Manager</h1>
+            </div>
+
+            {/* Shop Selector */}
+            <div className="px-1">
+              <ShopSelector />
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex flex-col gap-1">
+              {filteredNavItems.map((item) => {
+                const isActive = location.pathname === item.path;
+                return (
+                  <NavLink
+                    key={item.path}
+                    to={item.path}
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors group ${isActive
+                      ? 'bg-primary/10 text-primary border border-primary/20'
+                      : 'text-text-secondary hover:text-primary hover:bg-slate-50'
+                      }`}
+                  >
+                    <span className={`material-symbols-outlined ${isActive ? 'filled' : ''}`}>{item.icon}</span>
+                    <span className={`text-sm ${isActive ? 'font-semibold' : 'font-medium'}`}>{item.name}</span>
+                  </NavLink>
+                );
+              })}
+            </nav>
+          </div>
+
+          {/* User Info */}
+          <div className="flex items-center justify-between gap-2 px-3 py-3 mt-auto rounded-xl bg-slate-50 border border-border-light">
+            <div className="flex items-center gap-3 overflow-hidden">
+              <div className="size-8 rounded-full bg-gradient-to-br from-slate-400 to-slate-300 flex items-center justify-center flex-shrink-0">
+                <span className="material-symbols-outlined text-white text-sm">person</span>
+              </div>
+              <div className="flex flex-col overflow-hidden">
+                <span className="text-sm font-medium text-text-main truncate">{user?.username || 'User'}</span>
+                <span className="text-xs text-text-secondary truncate capitalize">{user?.role || 'Guest'}</span>
+              </div>
+            </div>
+            <button
+              onClick={handleLogout}
+              className="text-gray-400 hover:text-red-500 transition-colors p-1"
+              title="Logout"
+            >
+              <span className="material-symbols-outlined text-xl">logout</span>
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 flex flex-col h-full overflow-hidden relative">
+        {/* Mobile Header */}
+        <header className="md:hidden flex items-center justify-between p-4 border-b border-border-light bg-white">
+          <h1 className="text-text-main font-bold">Etsy Manager</h1>
+          <button
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            className="text-text-secondary material-symbols-outlined"
+          >
+            menu
+          </button>
+        </header>
+
+        {/* Content Scroll Area */}
+        <div className="flex-1 overflow-y-auto p-4 md:p-8">
+          {children}
+        </div>
+      </main>
+
+      {/* Mobile Overlay */}
+      {isMobileMenuOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-20 md:hidden"
+          onClick={() => setIsMobileMenuOpen(false)}
+        ></div>
+      )}
+    </div>
+  );
+};
+
+export default Layout;

frontend/components/ShopSelector.tsx

@@ -0,0 +1,200 @@
+import React, { useState, useMemo } from 'react';
+import { useShop } from '../contexts/ShopContext';
+import { Shop } from '../types';
+
+interface ShopSelectorProps {
+    compact?: boolean;
+}
+
+const ShopSelector: React.FC<ShopSelectorProps> = ({ compact = false }) => {
+    const { shops, currentShop, setCurrentShop, isLoading, isAllShopsMode } = useShop();
+    const [isOpen, setIsOpen] = useState(false);
+
+    // Calculate total orders across all shops
+    const totalOrders = useMemo(() => {
+        return shops.reduce((sum, shop) => sum + (shop.order_count || 0), 0);
+    }, [shops]);
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-100 animate-pulse">
+                <div className="w-8 h-8 rounded-full bg-slate-200"></div>
+                <div className="h-4 w-24 bg-slate-200 rounded"></div>
+            </div>
+        );
+    }
+
+    if (shops.length === 0) {
+        return (
+            <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-amber-50 border border-amber-200">
+                <span className="material-symbols-outlined text-amber-600">warning</span>
+                <span className="text-sm text-amber-700">No shops configured</span>
+            </div>
+        );
+    }
+
+    const handleSelect = (shop: Shop | null) => {
+        setCurrentShop(shop);
+        setIsOpen(false);
+    };
+
+    // Determine display text and styling based on mode
+    const displayName = isAllShopsMode ? 'All Shops' : (currentShop?.name || 'Select Shop');
+    const displayLabel = isAllShopsMode ? 'Viewing All' : 'Current Shop';
+
+    return (
+        <div className="relative">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className={`
+                    flex items-center gap-2 px-3 py-2 rounded-lg 
+                    ${isAllShopsMode
+                        ? 'bg-gradient-to-r from-purple-100 to-indigo-100 border border-purple-200 hover:border-purple-300'
+                        : 'bg-gradient-to-r from-primary/10 to-primary/5 border border-primary/20 hover:border-primary/40'
+                    }
+                    transition-all duration-200 group
+                    ${compact ? 'pr-2' : 'min-w-[200px]'}
+                `}
+            >
+                {/* Shop Icon */}
+                <div className={`w-8 h-8 rounded-full flex items-center justify-center shadow-sm ${isAllShopsMode
+                        ? 'bg-gradient-to-br from-purple-500 to-indigo-500'
+                        : 'bg-gradient-to-br from-primary to-primary/70'
+                    }`}>
+                    <span className="material-symbols-outlined text-white text-sm">
+                        {isAllShopsMode ? 'dashboard' : 'storefront'}
+                    </span>
+                </div>
+
+                {/* Shop Name */}
+                {!compact && (
+                    <div className="flex-1 text-left overflow-hidden">
+                        <p className="text-xs text-text-secondary font-medium">{displayLabel}</p>
+                        <p className={`text-sm font-semibold truncate ${isAllShopsMode ? 'text-purple-700' : 'text-text-main'}`}>
+                            {displayName}
+                        </p>
+                    </div>
+                )}
+
+                {/* Dropdown Arrow */}
+                <span className={`material-symbols-outlined text-text-secondary transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>
+                    expand_more
+                </span>
+            </button>
+
+            {/* Dropdown Menu */}
+            {isOpen && (
+                <>
+                    {/* Backdrop */}
+                    <div
+                        className="fixed inset-0 z-40"
+                        onClick={() => setIsOpen(false)}
+                    />
+
+                    {/* Menu */}
+                    <div className="absolute top-full left-0 right-0 mt-2 z-50 bg-white rounded-xl shadow-xl border border-border-light overflow-hidden min-w-[240px]">
+                        <div className="p-2 border-b border-border-light bg-slate-50">
+                            <p className="text-xs font-medium text-text-secondary px-2">Select View</p>
+                        </div>
+
+                        <div className="max-h-72 overflow-y-auto py-1">
+                            {/* All Shops Option */}
+                            <button
+                                onClick={() => handleSelect(null)}
+                                className={`
+                                    w-full flex items-center gap-3 px-3 py-3 text-left
+                                    transition-colors duration-150 border-b border-border-light
+                                    ${isAllShopsMode
+                                        ? 'bg-purple-50 text-purple-700'
+                                        : 'hover:bg-slate-50 text-text-main'
+                                    }
+                                `}
+                            >
+                                <div className={`
+                                    w-9 h-9 rounded-full flex items-center justify-center
+                                    ${isAllShopsMode
+                                        ? 'bg-gradient-to-br from-purple-500 to-indigo-500 text-white'
+                                        : 'bg-gradient-to-br from-purple-100 to-indigo-100 text-purple-600'
+                                    }
+                                `}>
+                                    <span className="material-symbols-outlined text-lg">dashboard</span>
+                                </div>
+
+                                <div className="flex-1 min-w-0">
+                                    <p className={`text-sm font-semibold ${isAllShopsMode ? 'text-purple-700' : 'text-text-main'}`}>
+                                        📊 All Shops
+                                    </p>
+                                    <p className="text-xs text-text-secondary">
+                                        {shops.length} shops • {totalOrders} total orders
+                                    </p>
+                                </div>
+
+                                {isAllShopsMode && (
+                                    <span className="material-symbols-outlined text-purple-600 text-lg">check_circle</span>
+                                )}
+                            </button>
+
+                            {/* Divider with label */}
+                            <div className="px-3 py-2 bg-slate-50">
+                                <p className="text-[10px] font-semibold text-text-secondary uppercase tracking-wider">Individual Shops</p>
+                            </div>
+
+                            {/* Individual Shops */}
+                            {shops.map((shop) => (
+                                <button
+                                    key={shop.id}
+                                    onClick={() => handleSelect(shop)}
+                                    className={`
+                                        w-full flex items-center gap-3 px-3 py-2.5 text-left
+                                        transition-colors duration-150
+                                        ${currentShop?.id === shop.id && !isAllShopsMode
+                                            ? 'bg-primary/10 text-primary'
+                                            : 'hover:bg-slate-50 text-text-main'
+                                        }
+                                    `}
+                                >
+                                    <div className={`
+                                        w-8 h-8 rounded-full flex items-center justify-center text-sm
+                                        ${currentShop?.id === shop.id && !isAllShopsMode
+                                            ? 'bg-primary text-white'
+                                            : 'bg-slate-200 text-text-secondary'
+                                        }
+                                    `}>
+                                        <span className="material-symbols-outlined text-sm">storefront</span>
+                                    </div>
+
+                                    <div className="flex-1 min-w-0">
+                                        <p className={`text-sm font-medium truncate ${currentShop?.id === shop.id && !isAllShopsMode ? 'text-primary' : ''}`}>
+                                            {shop.name}
+                                        </p>
+                                        <p className="text-xs text-text-secondary">
+                                            {shop.order_count || 0} orders
+                                        </p>
+                                    </div>
+
+                                    {currentShop?.id === shop.id && !isAllShopsMode && (
+                                        <span className="material-symbols-outlined text-primary text-lg">check_circle</span>
+                                    )}
+                                </button>
+                            ))}
+                        </div>
+
+                        {/* Manage Shops Link */}
+                        <div className="p-2 border-t border-border-light bg-slate-50">
+                            <a
+                                href="#/shops"
+                                onClick={() => setIsOpen(false)}
+                                className="flex items-center gap-2 px-2 py-1.5 text-sm text-primary hover:text-primary/80 transition-colors"
+                            >
+                                <span className="material-symbols-outlined text-sm">settings</span>
+                                Manage Shops
+                            </a>
+                        </div>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+};
+
+export default ShopSelector;

frontend/contexts/AuthContext.tsx

@@ -0,0 +1,115 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { User, LoginResponse } from '../types';
+import { API_BASE_URL } from '../services/api';
+
+interface AuthContextType {
+    user: User | null;
+    token: string | null;
+    login: (token: string) => Promise<void>;
+    logout: () => void;
+    isLoading: boolean;
+    isAdmin: boolean;
+    isAuthenticated: boolean;
+    hasPermission: (permission: string) => boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [user, setUser] = useState<User | null>(null);
+    const [token, setToken] = useState<string | null>(localStorage.getItem('token'));
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+
+    // Initial load / Token validation
+    useEffect(() => {
+        const initAuth = async () => {
+            const storedToken = localStorage.getItem('token');
+            if (storedToken) {
+                try {
+                    const response = await fetch(`${API_BASE_URL}/users/me`, {
+                        headers: {
+                            'Authorization': `Bearer ${storedToken}`
+                        }
+                    });
+
+                    if (response.ok) {
+                        const userData: User = await response.json();
+                        setUser(userData);
+                        setToken(storedToken);
+                    } else {
+                        // Token invalid or expired
+                        logout();
+                    }
+                } catch (error) {
+                    console.error("Auth initialization failed", error);
+                    logout();
+                }
+            }
+            setIsLoading(false);
+        };
+
+        initAuth();
+    }, []);
+
+    const login = async (newToken: string) => {
+        localStorage.setItem('token', newToken);
+        setToken(newToken);
+
+        // Fetch user details immediately
+        try {
+            const response = await fetch(`${API_BASE_URL}/users/me`, {
+                headers: {
+                    'Authorization': `Bearer ${newToken}`
+                }
+            });
+
+            if (response.ok) {
+                const userData: User = await response.json();
+                setUser(userData);
+            } else {
+                throw new Error("Failed to fetch user profile");
+            }
+        } catch (error) {
+            console.error("Login failed", error);
+            logout();
+            throw error;
+        }
+    };
+
+    const logout = () => {
+        localStorage.removeItem('token');
+        setToken(null);
+        setUser(null);
+    };
+
+    const hasPermission = (permission: string) => {
+        if (!user) return false;
+        if (user.role === 'admin') return true;
+        return user.permissions?.includes(permission) || false;
+    };
+
+    const value = {
+        user,
+        token,
+        login,
+        logout,
+        isLoading,
+        isAdmin: user?.role === 'admin',
+        isAuthenticated: !!user,
+        hasPermission
+    };
+
+    return (
+        <AuthContext.Provider value={value}>
+            {children}
+        </AuthContext.Provider>
+    );
+};
+
+export const useAuth = () => {
+    const context = useContext(AuthContext);
+    if (context === undefined) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+};

frontend/contexts/ShopContext.tsx

@@ -0,0 +1,95 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { Shop } from '../types';
+import { fetchShops } from '../services/api';
+
+interface ShopContextType {
+    shops: Shop[];
+    currentShop: Shop | null;
+    setCurrentShop: (shop: Shop | null) => void;
+    isLoading: boolean;
+    error: string | null;
+    refreshShops: () => Promise<void>;
+    isAllShopsMode: boolean;
+}
+
+const ShopContext = createContext<ShopContextType | undefined>(undefined);
+
+const STORAGE_KEY = 'etsy_manager_current_shop_id';
+
+export const ShopProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [shops, setShops] = useState<Shop[]>([]);
+    const [currentShop, setCurrentShopState] = useState<Shop | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const loadShops = async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const data = await fetchShops();
+            setShops(data);
+
+            // Restore last selected shop from localStorage
+            const savedShopId = localStorage.getItem(STORAGE_KEY);
+            if (savedShopId) {
+                const savedShop = data.find(s => s.id === parseInt(savedShopId));
+                if (savedShop) {
+                    setCurrentShopState(savedShop);
+                } else if (data.length > 0) {
+                    // Saved shop no longer exists, select first
+                    setCurrentShopState(data[0]);
+                }
+            } else if (data.length > 0) {
+                // No saved shop, select first
+                setCurrentShopState(data[0]);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load shops');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadShops();
+    }, []);
+
+    const setCurrentShop = (shop: Shop | null) => {
+        setCurrentShopState(shop);
+        if (shop) {
+            localStorage.setItem(STORAGE_KEY, shop.id.toString());
+        } else {
+            localStorage.removeItem(STORAGE_KEY);
+        }
+    };
+
+    const refreshShops = async () => {
+        await loadShops();
+    };
+
+    const isAllShopsMode = currentShop === null && shops.length > 0;
+
+    return (
+        <ShopContext.Provider value={{
+            shops,
+            currentShop,
+            setCurrentShop,
+            isLoading,
+            error,
+            refreshShops,
+            isAllShopsMode
+        }}>
+            {children}
+        </ShopContext.Provider>
+    );
+};
+
+export const useShop = (): ShopContextType => {
+    const context = useContext(ShopContext);
+    if (context === undefined) {
+        throw new Error('useShop must be used within a ShopProvider');
+    }
+    return context;
+};
+
+export default ShopContext;

frontend/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Etsy Profit Analytics</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: "#137fec",
+              "primary-dark": "#0b63b8",
+              "background-light": "#f6f7f8",
+              "surface-white": "#ffffff",
+              "text-main": "#0f172a",
+              "text-secondary": "#64748b",
+              "border-light": "#e2e8f0",
+            },
+            fontFamily: {
+              sans: ["Inter", "sans-serif"],
+            },
+          },
+        },
+      };
+    </script>
+    <style>
+      body {
+        font-family: "Inter", sans-serif;
+      }
+      .material-symbols-outlined {
+        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+      }
+      .material-symbols-outlined.filled {
+        font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+      }
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: #f1f5f9;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+        border-radius: 4px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #94a3b8;
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
+    "recharts": "https://esm.sh/recharts@^3.6.0",
+    "react/": "https://esm.sh/react@^19.2.3/",
+    "react": "https://esm.sh/react@^19.2.3",
+    "react-router-dom": "https://esm.sh/react-router-dom@^7.11.0"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-background-light text-text-main antialiased overflow-hidden">
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

frontend/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Etsy Profit Analytics",
+  "description": "A comprehensive dashboard to track Etsy shop revenue, costs, and net profit with data import capabilities.",
+  "requestFramePermissions": []
+}

frontend/package-lock.json

@@ -0,0 +1,2235 @@
+{
+  "name": "etsy-profit-analytics",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "etsy-profit-analytics",
+      "version": "0.0.0",
+      "dependencies": {
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "react-router-dom": "^7.11.0",
+        "recharts": "^3.6.0"
+      },
+      "devDependencies": {
+        "@types/node": "^22.14.0",
+        "@vitejs/plugin-react": "^5.0.0",
+        "typescript": "~5.8.2",
+        "vite": "^6.2.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.3.tgz",
+      "integrity": "sha512-6jQTc5z0KJFtr1UgFpIL3N9XSC3saRaI9PwWtzM2pSqkNGtiNkYY2OSwkOGDK2XcTRcLb1pi/aNkKZz0nxVH4Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
+      "integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.54.0.tgz",
+      "integrity": "sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.54.0.tgz",
+      "integrity": "sha512-Skx39Uv+u7H224Af+bDgNinitlmHyQX1K/atIA32JP3JQw6hVODX5tkbi2zof/E69M1qH2UoN3Xdxgs90mmNYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.54.0.tgz",
+      "integrity": "sha512-k43D4qta/+6Fq+nCDhhv9yP2HdeKeP56QrUUTW7E6PhZP1US6NDqpJj4MY0jBHlJivVJD5P8NxrjuobZBJTCRw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.54.0.tgz",
+      "integrity": "sha512-cOo7biqwkpawslEfox5Vs8/qj83M/aZCSSNIWpVzfU2CYHa2G3P1UN5WF01RdTHSgCkri7XOlTdtk17BezlV3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.54.0.tgz",
+      "integrity": "sha512-miSvuFkmvFbgJ1BevMa4CPCFt5MPGw094knM64W9I0giUIMMmRYcGW/JWZDriaw/k1kOBtsWh1z6nIFV1vPNtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.54.0.tgz",
+      "integrity": "sha512-KGXIs55+b/ZfZsq9aR026tmr/+7tq6VG6MsnrvF4H8VhwflTIuYh+LFUlIsRdQSgrgmtM3fVATzEAj4hBQlaqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.54.0.tgz",
+      "integrity": "sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.54.0.tgz",
+      "integrity": "sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.54.0.tgz",
+      "integrity": "sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.54.0.tgz",
+      "integrity": "sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.54.0.tgz",
+      "integrity": "sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.54.0.tgz",
+      "integrity": "sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.54.0.tgz",
+      "integrity": "sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.54.0.tgz",
+      "integrity": "sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.54.0.tgz",
+      "integrity": "sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.54.0.tgz",
+      "integrity": "sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.54.0.tgz",
+      "integrity": "sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.54.0.tgz",
+      "integrity": "sha512-huT3fd0iC7jigGh7n3q/+lfPcXxBi+om/Rs3yiFxjvSxbSB6aohDFXbWvlspaqjeOh+hx7DDHS+5Es5qRkWkZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.54.0.tgz",
+      "integrity": "sha512-c2V0W1bsKIKfbLMBu/WGBz6Yci8nJ/ZJdheE0EwB73N3MvHYKiKGs3mVilX4Gs70eGeDaMqEob25Tw2Gb9Nqyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.54.0.tgz",
+      "integrity": "sha512-woEHgqQqDCkAzrDhvDipnSirm5vxUXtSKDYTVpZG3nUdW/VVB5VdCYA2iReSj/u3yCZzXID4kuKG7OynPnB3WQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.54.0.tgz",
+      "integrity": "sha512-dzAc53LOuFvHwbCEOS0rPbXp6SIhAf2txMP5p6mGyOXXw5mWY8NGGbPMPrs4P1WItkfApDathBj/NzMLUZ9rtQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.54.0.tgz",
+      "integrity": "sha512-hYT5d3YNdSh3mbCU1gwQyPgQd3T2ne0A3KG8KSBdav5TiBg6eInVmV+TeR5uHufiIgSFg0XsOWGW5/RhNcSvPg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz",
+      "integrity": "sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.53",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.18.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.11",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
+      "integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001762",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001762.tgz",
+      "integrity": "sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.267",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/es-toolkit": {
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.43.0.tgz",
+      "integrity": "sha512-SKCT8AsWvYzBBuUqMk4NPwFlSdqLpJwmy6AP322ERn8W2YLIB6JBXnwMI2Qsh2gfphT3q7EKAxKb23cvFHFwKA==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.3"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
+      "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
+      "integrity": "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz",
+      "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz",
+      "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.11.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/recharts": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.6.0.tgz",
+      "integrity": "sha512-L5bjxvQRAe26RlToBAziKUB7whaGKEwD3znoM6fz3DrTowCIC/FnJYnuq1GEzB8Zv2kdTfaxQfi5GoH0tBinyg==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
+    "node_modules/rollup": {
+      "version": "4.54.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
+      "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.54.0",
+        "@rollup/rollup-android-arm64": "4.54.0",
+        "@rollup/rollup-darwin-arm64": "4.54.0",
+        "@rollup/rollup-darwin-x64": "4.54.0",
+        "@rollup/rollup-freebsd-arm64": "4.54.0",
+        "@rollup/rollup-freebsd-x64": "4.54.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.54.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.54.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.54.0",
+        "@rollup/rollup-linux-arm64-musl": "4.54.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.54.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.54.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.54.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.54.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.54.0",
+        "@rollup/rollup-linux-x64-gnu": "4.54.0",
+        "@rollup/rollup-linux-x64-musl": "4.54.0",
+        "@rollup/rollup-openharmony-arm64": "4.54.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.54.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.54.0",
+        "@rollup/rollup-win32-x64-gnu": "4.54.0",
+        "@rollup/rollup-win32-x64-msvc": "4.54.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/vite": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
+      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "etsy-profit-analytics",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react-dom": "^19.2.3",
+    "recharts": "^3.6.0",
+    "react": "^19.2.3",
+    "react-router-dom": "^7.11.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

frontend/pages/AdminDashboard.tsx

@@ -0,0 +1,380 @@
+import React, { useState, useEffect } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { User } from '../types';
+import { API_BASE_URL } from '../services/api';
+
+export const PERMISSIONS_LIST = [
+    { id: 'view_dashboard', label: 'View Dashboard' },
+    { id: 'view_profit', label: 'View Profit Analytics' },
+    { id: 'view_orders', label: 'View Orders' },
+    { id: 'view_import', label: 'View Data Import' },
+    { id: 'perform_import', label: 'Perform Data Import' },
+    { id: 'view_shops', label: 'View Shops' },
+    { id: 'manage_shops', label: 'Manage Shops (Create/Edit/Delete)' },
+    { id: 'manage_settings', label: 'Manage Settings' },
+];
+
+export const AdminDashboard: React.FC = () => {
+    const { token, isAdmin } = useAuth();
+    const [users, setUsers] = useState<User[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+
+    // New user form state
+    const [newUser, setNewUser] = useState({ username: '', password: '', role: 'user', permissions: [] as string[] });
+    const [createLoading, setCreateLoading] = useState(false);
+
+    // Edit permissions state
+    const [editingUser, setEditingUser] = useState<User | null>(null);
+    const [editPermissions, setEditPermissions] = useState<string[]>([]);
+
+    useEffect(() => {
+        fetchUsers();
+    }, []);
+
+    const fetchUsers = async () => {
+        try {
+            const response = await fetch(`${API_BASE_URL}/admin/users`, {
+                headers: {
+                    'Authorization': `Bearer ${token}`
+                }
+            });
+            if (!response.ok) throw new Error('Failed to fetch users');
+            const data = await response.json();
+            setUsers(data);
+        } catch (err: any) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleCreateUser = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setCreateLoading(true);
+        setError('');
+
+        try {
+            // If role is admin, they usually imply full permissions, but we can save explicit ones too.
+            // If role is user, permissions are critical.
+
+            const payload = { ...newUser };
+            if (payload.role === 'admin') {
+                // Optionally force all permissions for admin, but user might want granular admin roles?
+                // User request implies "assign rights... to user". 
+                // Admins generally have full access, but let's just send what is checked.
+            }
+
+            const response = await fetch(`${API_BASE_URL}/admin/users`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify(payload)
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.detail || 'Failed to create user');
+            }
+
+            const createdUser = await response.json();
+            setUsers([...users, createdUser]);
+            setNewUser({ username: '', password: '', role: 'user', permissions: [] }); // Reset form
+        } catch (err: any) {
+            setError(err.message);
+        } finally {
+            setCreateLoading(false);
+        }
+    };
+
+    const handlePermissionChange = (permId: string, isChecked: boolean) => {
+        if (isChecked) {
+            setNewUser(prev => ({ ...prev, permissions: [...prev.permissions, permId] }));
+        } else {
+            setNewUser(prev => ({ ...prev, permissions: prev.permissions.filter(p => p !== permId) }));
+        }
+    };
+
+    const handleEditPermissionChange = (permId: string, isChecked: boolean) => {
+        if (isChecked) {
+            setEditPermissions(prev => [...prev, permId]);
+        } else {
+            setEditPermissions(prev => prev.filter(p => p !== permId));
+        }
+    };
+
+    const openEditModal = (user: User) => {
+        setEditingUser(user);
+        setEditPermissions(user.permissions || []);
+    };
+
+    const savePermissions = async () => {
+        if (!editingUser) return;
+        try {
+            const response = await fetch(`${API_BASE_URL}/admin/users/${editingUser.id}/permissions`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify(editPermissions)
+            });
+
+            if (!response.ok) throw new Error('Failed to update permissions');
+
+            const updatedUser = await response.json();
+            setUsers(users.map(u => u.id === updatedUser.id ? updatedUser : u));
+            setEditingUser(null);
+        } catch (err: any) {
+            alert(err.message);
+        }
+    };
+
+    const handleDeleteUser = async (userId: number) => {
+        if (!window.confirm('Are you sure you want to delete this user?')) return;
+
+        try {
+            const response = await fetch(`${API_BASE_URL}/admin/users/${userId}`, {
+                method: 'DELETE',
+                headers: {
+                    'Authorization': `Bearer ${token}`
+                }
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.detail || 'Failed to delete user');
+            }
+
+            setUsers(users.filter(u => u.id !== userId));
+        } catch (err: any) {
+            alert(err.message);
+        }
+    };
+
+    if (!isAdmin) {
+        return <div className="p-8 text-center text-red-600">Access Denied</div>;
+    }
+
+    return (
+        <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+            <h1 className="text-2xl font-semibold text-gray-900 mb-6">Admin User Management</h1>
+
+            {error && (
+                <div className="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
+                    {error}
+                </div>
+            )}
+
+            {/* Create User Form */}
+            <div className="bg-white shadow rounded-lg p-6 mb-8">
+                <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">Create New User</h3>
+                <form onSubmit={handleCreateUser} className="space-y-4">
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div>
+                            <label htmlFor="username" className="block text-sm font-medium text-gray-700">Username</label>
+                            <input
+                                type="text"
+                                name="username"
+                                id="username"
+                                required
+                                className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
+                                value={newUser.username}
+                                onChange={(e) => setNewUser({ ...newUser, username: e.target.value })}
+                            />
+                        </div>
+                        <div>
+                            <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
+                            <input
+                                type="password"
+                                name="password"
+                                id="password"
+                                required
+                                className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
+                                value={newUser.password}
+                                onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
+                            />
+                        </div>
+                        <div>
+                            <label htmlFor="role" className="block text-sm font-medium text-gray-700">Role</label>
+                            <select
+                                id="role"
+                                name="role"
+                                className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                                value={newUser.role}
+                                onChange={(e) => setNewUser({ ...newUser, role: e.target.value })}
+                            >
+                                <option value="user">User</option>
+                                <option value="admin">Admin</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    {newUser.role === 'user' && (
+                        <div className="mt-4">
+                            <label className="block text-sm font-medium text-gray-700 mb-2">Permissions</label>
+                            <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+                                {PERMISSIONS_LIST.map(perm => (
+                                    <div key={perm.id} className="flex items-center">
+                                        <input
+                                            id={`perm-${perm.id}`}
+                                            type="checkbox"
+                                            checked={newUser.permissions.includes(perm.id)}
+                                            onChange={(e) => handlePermissionChange(perm.id, e.target.checked)}
+                                            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+                                        />
+                                        <label htmlFor={`perm-${perm.id}`} className="ml-2 block text-sm text-gray-900">
+                                            {perm.label}
+                                        </label>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="flex justify-end mt-4">
+                        <button
+                            type="submit"
+                            disabled={createLoading}
+                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                        >
+                            {createLoading ? 'Creating...' : 'Create User'}
+                        </button>
+                    </div>
+                </form>
+            </div>
+
+            {/* Users List */}
+            <div className="flex flex-col">
+                <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                    <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+                        <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+                            <table className="min-w-full divide-y divide-gray-200">
+                                <thead className="bg-gray-50">
+                                    <tr>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            Username
+                                        </th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            Role
+                                        </th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            Permissions
+                                        </th>
+                                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            Created At
+                                        </th>
+                                        <th scope="col" className="relative px-6 py-3">
+                                            <span className="sr-only">Actions</span>
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody className="bg-white divide-y divide-gray-200">
+                                    {loading ? (
+                                        <tr><td colSpan={5} className="text-center py-4">Loading...</td></tr>
+                                    ) : users.map((user) => (
+                                        <tr key={user.id}>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                                                {user.username}
+                                            </td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                                <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${user.role === 'admin' ? 'bg-purple-100 text-purple-800' : 'bg-green-100 text-green-800'
+                                                    }`}>
+                                                    {user.role}
+                                                </span>
+                                            </td>
+                                            <td className="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">
+                                                {user.role === 'admin' ? (
+                                                    <span className="text-gray-400 italic">All Permissions</span>
+                                                ) : (
+                                                    <span title={user.permissions?.join(', ')}>
+                                                        {user.permissions?.length ? `${user.permissions.length} active` : 'None'}
+                                                    </span>
+                                                )}
+                                            </td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                                {new Date(user.created_at).toLocaleDateString()}
+                                            </td>
+                                            <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                                <button
+                                                    onClick={() => openEditModal(user)}
+                                                    className="text-indigo-600 hover:text-indigo-900 mr-4"
+                                                >
+                                                    Edit Rights
+                                                </button>
+                                                <button
+                                                    onClick={() => handleDeleteUser(user.id)}
+                                                    className="text-red-600 hover:text-red-900"
+                                                >
+                                                    Delete
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Edit Permissions Modal */}
+            {editingUser && (
+                <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+                    <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onClick={() => setEditingUser(null)}></div>
+                        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+                        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+                            <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                                <div className="sm:flex sm:items-start">
+                                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                                        <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+                                            Edit Permissions for {editingUser.username}
+                                        </h3>
+                                        <div className="mt-4">
+                                            <p className="text-sm text-gray-500 mb-4">Select allowed actions for this user.</p>
+                                            <div className="space-y-2">
+                                                {PERMISSIONS_LIST.map(perm => (
+                                                    <div key={perm.id} className="flex items-center">
+                                                        <input
+                                                            id={`edit-perm-${perm.id}`}
+                                                            type="checkbox"
+                                                            checked={editPermissions.includes(perm.id)}
+                                                            onChange={(e) => handleEditPermissionChange(perm.id, e.target.checked)}
+                                                            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+                                                        />
+                                                        <label htmlFor={`edit-perm-${perm.id}`} className="ml-2 block text-sm text-gray-900">
+                                                            {perm.label}
+                                                        </label>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                                <button
+                                    type="button"
+                                    onClick={savePermissions}
+                                    className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"
+                                >
+                                    Save Changes
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={() => setEditingUser(null)}
+                                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                                >
+                                    Cancel
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

frontend/pages/Dashboard.tsx

@@ -0,0 +1,698 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Legend } from 'recharts';
+import { fetchProfitData, fetchAllShopsSummary, fetchShopSummary } from '../services/api';
+import { ProfitData, AllShopsSummaryResponse, ShopSummaryResponse } from '../types';
+import { useShop } from '../contexts/ShopContext';
+
+// Color palette for shops
+const SHOP_COLORS = ['#6366f1', '#8b5cf6', '#a855f7', '#d946ef', '#ec4899', '#f43f5e', '#f97316', '#eab308'];
+
+// Time period presets - Main buttons
+const MAIN_PRESETS = [
+  { label: 'Today', value: 'today' },
+  { label: 'Yesterday', value: 'yesterday' },
+  { label: 'Last 7 days', value: '7d' },
+  { label: 'Last 30 days', value: '30d' },
+  { label: 'All Time', value: 'all' },
+];
+
+// Quick select options in custom picker
+const QUICK_SELECT_OPTIONS = [
+  { label: 'Last 90 days', value: '90d' },
+  { label: 'This Year', value: 'ytd' },
+  { label: 'Last Year', value: 'lastyear' },
+];
+
+// Helper to get date range from preset
+const getDateRangeFromPreset = (preset: string): { startDate: string; endDate: string } | null => {
+  const today = new Date();
+  const formatDate = (d: Date) => d.toISOString().split('T')[0];
+
+  switch (preset) {
+    case 'today':
+      return { startDate: formatDate(today), endDate: formatDate(today) };
+    case 'yesterday': {
+      const yesterday = new Date(today);
+      yesterday.setDate(yesterday.getDate() - 1);
+      return { startDate: formatDate(yesterday), endDate: formatDate(yesterday) };
+    }
+    case '7d': {
+      const start = new Date(today);
+      start.setDate(start.getDate() - 6);
+      return { startDate: formatDate(start), endDate: formatDate(today) };
+    }
+    case '30d': {
+      const start = new Date(today);
+      start.setDate(start.getDate() - 29);
+      return { startDate: formatDate(start), endDate: formatDate(today) };
+    }
+    case '90d': {
+      const start = new Date(today);
+      start.setDate(start.getDate() - 89);
+      return { startDate: formatDate(start), endDate: formatDate(today) };
+    }
+    case 'ytd': {
+      const start = new Date(today.getFullYear(), 0, 1);
+      return { startDate: formatDate(start), endDate: formatDate(today) };
+    }
+    case 'lastyear': {
+      const start = new Date(today.getFullYear() - 1, 0, 1);
+      const end = new Date(today.getFullYear() - 1, 11, 31);
+      return { startDate: formatDate(start), endDate: formatDate(end) };
+    }
+    case 'all':
+    default:
+      return null; // null means all time - no date filter
+  }
+};
+
+const Dashboard: React.FC = () => {
+  const { currentShop, isLoading: shopLoading, isAllShopsMode, shops } = useShop();
+  // State for single shop raw data (for backwards compatibility/charts if needed)
+  const [data, setData] = useState<ProfitData[]>([]);
+  // State for single shop summary
+  const [shopSummary, setShopSummary] = useState<ShopSummaryResponse | null>(null);
+  // State for all shops summary
+  const [allShopsData, setAllShopsData] = useState<AllShopsSummaryResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // Time period state
+  const [selectedPreset, setSelectedPreset] = useState('30d');
+  const [customStartDate, setCustomStartDate] = useState('');
+  const [customEndDate, setCustomEndDate] = useState('');
+  const [showCustomPicker, setShowCustomPicker] = useState(false);
+
+  // Load data when preset changes
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        let startDate: string | undefined;
+        let endDate: string | undefined;
+
+        if (selectedPreset === 'custom' && customStartDate && customEndDate) {
+          startDate = customStartDate;
+          endDate = customEndDate;
+        } else if (selectedPreset !== 'all') {
+          const range = getDateRangeFromPreset(selectedPreset);
+          if (range) {
+            startDate = range.startDate;
+            endDate = range.endDate;
+          }
+        }
+
+        if (isAllShopsMode) {
+          const result = await fetchAllShopsSummary(startDate, endDate);
+          setAllShopsData(result);
+          setData([]);
+          setShopSummary(null);
+        } else if (currentShop) {
+          // Fetch both raw data (for charts) and summary (for KPIs)
+          const [summaryResult, rawDataResult] = await Promise.all([
+            fetchShopSummary(currentShop.id, startDate, endDate),
+            fetchProfitData(currentShop.id)
+          ]);
+          setShopSummary(summaryResult);
+          setData(rawDataResult);
+          setAllShopsData(null);
+        } else {
+          setData([]);
+          setAllShopsData(null);
+          setShopSummary(null);
+        }
+      } catch (e) {
+        console.error("Failed to load dashboard data", e);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadData();
+  }, [currentShop, isAllShopsMode, selectedPreset, customStartDate, customEndDate]);
+
+  // Filter raw data for single shop charts based on date range
+  const filteredData = useMemo(() => {
+    let startDate: Date | null = null;
+    let endDate: Date | null = null;
+
+    if (selectedPreset === 'custom' && customStartDate && customEndDate) {
+      startDate = new Date(customStartDate);
+      endDate = new Date(customEndDate);
+    } else if (selectedPreset !== 'all') {
+      const range = getDateRangeFromPreset(selectedPreset);
+      if (range) {
+        startDate = new Date(range.startDate);
+        endDate = new Date(range.endDate);
+      }
+    }
+
+    if (!startDate || !endDate) return data;
+
+    return data.filter(item => {
+      if (!item.sale_date) return false;
+      const itemDate = new Date(item.sale_date);
+      return itemDate >= startDate! && itemDate <= endDate!;
+    });
+  }, [data, selectedPreset, customStartDate, customEndDate]);
+
+  // Aggregate stats from summary or raw data
+  const aggregates = useMemo(() => {
+    if (shopSummary) {
+      return {
+        revenue: shopSummary.aggregates.total_revenue,
+        profit: shopSummary.aggregates.total_profit,
+        orders: shopSummary.aggregates.total_orders,
+        margin: shopSummary.aggregates.profit_margin,
+        fulfillmentRate: shopSummary.aggregates.fulfillment_rate
+      };
+    }
+    // Fallback if summary not available
+    return filteredData.reduce((acc, curr) => ({
+      revenue: acc.revenue + curr.revenue,
+      profit: acc.profit + curr.profit,
+      orders: acc.orders + 1,
+      margin: 0,
+      fulfillmentRate: 0
+    }), { revenue: 0, profit: 0, orders: 0, margin: 0, fulfillmentRate: 0 });
+  }, [shopSummary, filteredData]);
+
+  // Changes from summary
+  const changes = useMemo(() => {
+    if (shopSummary) {
+      return shopSummary.changes;
+    }
+    return null;
+  }, [shopSummary]);
+
+  const chartData = useMemo(() => {
+    const grouped = filteredData.reduce((acc, curr) => {
+      const date = curr.sale_date?.substring(5) || 'N/A';
+      if (!acc[date]) acc[date] = { name: date, revenue: 0 };
+      acc[date].revenue += curr.revenue;
+      return acc;
+    }, {} as Record<string, any>);
+    return Object.values(grouped).reverse().slice(0, selectedPreset === '7d' ? 7 : selectedPreset === '30d' ? 30 : 999);
+  }, [filteredData, selectedPreset]);
+
+  const formatCurrency = (val: number) => `$${val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+
+  const handlePresetChange = (preset: string) => {
+    setSelectedPreset(preset);
+    if (preset !== 'custom') {
+      setShowCustomPicker(false);
+    }
+  };
+
+  const handleQuickSelect = (value: string) => {
+    setSelectedPreset(value);
+    setShowCustomPicker(false);
+  };
+
+  const applyCustomDates = () => {
+    if (customStartDate && customEndDate) {
+      setSelectedPreset('custom');
+      setShowCustomPicker(false);
+    }
+  };
+
+  if (shopLoading || loading) {
+    return (
+      <div className="flex h-full items-center justify-center min-h-[400px]">
+        <div className="flex flex-col items-center gap-2">
+          <span className="material-symbols-outlined text-4xl text-primary animate-spin">progress_activity</span>
+          <p className="text-text-secondary">Loading dashboard...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!currentShop && !isAllShopsMode) {
+    return (
+      <div className="flex h-full items-center justify-center min-h-[400px]">
+        <div className="flex flex-col items-center gap-4 text-center">
+          <div className="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center">
+            <span className="material-symbols-outlined text-3xl text-amber-600">storefront</span>
+          </div>
+          <h2 className="text-xl font-bold text-text-main">No Shop Selected</h2>
+          <p className="text-text-secondary max-w-md">
+            Please select a shop from the sidebar or create a new one to view the dashboard.
+          </p>
+          <a
+            href="#/shops"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors"
+          >
+            <span className="material-symbols-outlined">add</span>
+            Manage Shops
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  // ALL SHOPS MODE VIEW
+  if (isAllShopsMode && allShopsData) {
+    const { aggregates: agg, shops: shopList, best_performer, changes: allShopChanges } = allShopsData;
+
+    // Pie chart data for revenue distribution
+    const pieData = shopList.map((shop, idx) => ({
+      name: shop.shop_name,
+      value: shop.total_revenue,
+      color: SHOP_COLORS[idx % SHOP_COLORS.length]
+    }));
+
+    // Bar chart data for comparison
+    const barData = shopList.map((shop, idx) => ({
+      name: shop.shop_name.length > 12 ? shop.shop_name.substring(0, 12) + '...' : shop.shop_name,
+      revenue: shop.total_revenue,
+      profit: shop.total_profit,
+      cost: shop.total_cost,
+      fill: SHOP_COLORS[idx % SHOP_COLORS.length]
+    }));
+
+    return (
+      <div className="max-w-[1400px] mx-auto flex flex-col gap-6">
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+          <div>
+            <div className="flex items-center gap-2 mb-1">
+              <span className="px-3 py-1 text-xs font-semibold bg-gradient-to-r from-purple-100 to-indigo-100 text-purple-700 rounded-full border border-purple-200">
+                📊 All Shops Overview
+              </span>
+            </div>
+            <h2 className="text-3xl font-bold text-text-main tracking-tight">Multi-Shop Dashboard</h2>
+            <p className="text-text-secondary mt-1">Aggregated metrics and comparison across {agg.shop_count} shops.</p>
+          </div>
+
+          {/* Time Period Selector - Component */}
+          <TimeSelector
+            selectedPreset={selectedPreset}
+            handlePresetChange={handlePresetChange}
+            showCustomPicker={showCustomPicker}
+            setShowCustomPicker={setShowCustomPicker}
+            handleQuickSelect={handleQuickSelect}
+            customStartDate={customStartDate}
+            setCustomStartDate={setCustomStartDate}
+            customEndDate={customEndDate}
+            setCustomEndDate={setCustomEndDate}
+            applyCustomDates={applyCustomDates}
+          />
+        </div>
+
+        {/* Aggregated Stats Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <StatCard
+            title="Total Revenue"
+            value={formatCurrency(agg.total_revenue)}
+            subtitle={`${agg.shop_count} shops`}
+            icon="payments"
+            colorClass="text-green-600 bg-green-50 border-green-100"
+            changePercent={allShopChanges?.revenue_change}
+          />
+          <StatCard
+            title="Total Orders"
+            value={agg.total_orders.toLocaleString()}
+            subtitle={`${agg.total_fulfilled} fulfilled`}
+            icon="shopping_cart"
+            colorClass="text-primary bg-orange-50 border-orange-100"
+            changePercent={allShopChanges?.orders_change}
+          />
+          <StatCard
+            title="Total Profit"
+            value={formatCurrency(agg.total_profit)}
+            subtitle={`${agg.overall_margin}% margin`}
+            icon="account_balance_wallet"
+            colorClass="text-purple-600 bg-purple-50 border-purple-100"
+            changePercent={allShopChanges?.profit_change}
+          />
+          <StatCard
+            title="Fulfillment Rate"
+            value={`${agg.overall_fulfillment_rate}%`}
+            subtitle={`${agg.total_fulfilled}/${agg.total_orders}`}
+            icon="local_shipping"
+            colorClass="text-blue-600 bg-blue-50 border-blue-100"
+            changePercent={allShopChanges?.fulfillment_rate_change}
+          />
+        </div>
+
+        {/* Top Performer Card Only */}
+        {best_performer && (
+          <div className="grid grid-cols-1 md:grid-cols-1 gap-4">
+            <div className="bg-gradient-to-r from-emerald-50 to-green-50 rounded-xl p-5 border border-emerald-200">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded-full bg-emerald-500 flex items-center justify-center">
+                  <span className="material-symbols-outlined text-white text-2xl">emoji_events</span>
+                </div>
+                <div>
+                  <p className="text-xs text-emerald-600 font-medium uppercase tracking-wide">Top Performer</p>
+                  <p className="text-lg font-bold text-emerald-800">{best_performer.shop_name}</p>
+                  <p className="text-sm text-emerald-600">
+                    {formatCurrency(best_performer.total_profit)} profit • {best_performer.profit_margin}% margin
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Charts Row */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Revenue Comparison Bar Chart */}
+          <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm">
+            <h3 className="text-lg font-bold text-text-main mb-6">Shop Revenue Comparison</h3>
+            <div className="h-[300px]">
+              {barData.length > 0 ? (
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={barData} layout="vertical" margin={{ left: 20 }}>
+                    <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#e2e8f0" />
+                    <XAxis type="number" axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} tickFormatter={(val) => `$${(val / 1000).toFixed(0)}k`} />
+                    <YAxis type="category" dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} width={100} />
+                    <Tooltip formatter={(val: number) => formatCurrency(val)} />
+                    <Bar dataKey="revenue" radius={[0, 4, 4, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="flex items-center justify-center h-full text-text-secondary">
+                  <p>No shop data available</p>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Revenue Distribution Pie Chart */}
+          <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm">
+            <h3 className="text-lg font-bold text-text-main mb-6">Revenue Distribution</h3>
+            <div className="h-[300px]">
+              {pieData.length > 0 ? (
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={pieData}
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={60}
+                      outerRadius={100}
+                      paddingAngle={2}
+                      dataKey="value"
+                      label={({ name, percent }) => `${name} (${(percent * 100).toFixed(0)}%)`}
+                      labelLine={false}
+                    >
+                      {pieData.map((entry, index) => (
+                        <Cell key={`cell-${index}`} fill={entry.color} />
+                      ))}
+                    </Pie>
+                    <Tooltip formatter={(val: number) => formatCurrency(val)} />
+                  </PieChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="flex items-center justify-center h-full text-text-secondary">
+                  <p>No data available</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Shop Leaderboard Table */}
+        <div className="bg-white rounded-xl border border-border-light shadow-sm overflow-hidden">
+          <div className="p-6 border-b border-border-light bg-gradient-to-r from-slate-50 to-white">
+            <h3 className="text-lg font-bold text-text-main">Shop Performance Leaderboard</h3>
+            <p className="text-sm text-text-secondary">Ranked by profit (highest to lowest)</p>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm text-left">
+              <thead className="text-xs text-text-secondary uppercase bg-slate-50 border-b border-border-light">
+                <tr>
+                  <th className="px-6 py-4 font-semibold">Rank</th>
+                  <th className="px-6 py-4 font-semibold">Shop</th>
+                  <th className="px-6 py-4 font-semibold text-right">Orders</th>
+                  <th className="px-6 py-4 font-semibold text-right">Revenue</th>
+                  <th className="px-6 py-4 font-semibold text-right">Cost</th>
+                  <th className="px-6 py-4 font-semibold text-right">Profit</th>
+                  <th className="px-6 py-4 font-semibold text-center">Margin</th>
+                  <th className="px-6 py-4 font-semibold text-center">Fulfillment</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border-light">
+                {shopList.map((shop, idx) => (
+                  <tr key={shop.shop_id} className="hover:bg-slate-50 transition-colors">
+                    <td className="px-6 py-4">
+                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${idx === 0 ? 'bg-yellow-100 text-yellow-700' :
+                        idx === 1 ? 'bg-slate-200 text-slate-600' :
+                          idx === 2 ? 'bg-orange-100 text-orange-700' :
+                            'bg-slate-100 text-slate-500'
+                        }`}>
+                        {idx + 1}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="flex items-center gap-2">
+                        <div className="w-3 h-3 rounded-full" style={{ backgroundColor: SHOP_COLORS[idx % SHOP_COLORS.length] }}></div>
+                        <span className="font-medium text-text-main">{shop.shop_name}</span>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 text-right">{shop.order_count}</td>
+                    <td className="px-6 py-4 text-right font-medium">{formatCurrency(shop.total_revenue)}</td>
+                    <td className="px-6 py-4 text-right text-text-secondary">{formatCurrency(shop.total_cost)}</td>
+                    <td className={`px-6 py-4 text-right font-bold ${shop.total_profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+                      {formatCurrency(shop.total_profit)}
+                    </td>
+                    <td className="px-6 py-4 text-center">
+                      <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${shop.profit_margin >= 30 ? 'bg-green-100 text-green-700' :
+                        shop.profit_margin >= 15 ? 'bg-yellow-100 text-yellow-700' :
+                          'bg-red-100 text-red-700'
+                        }`}>
+                        {shop.profit_margin}%
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 text-center">
+                      <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${shop.fulfillment_rate >= 80 ? 'bg-green-100 text-green-700' :
+                        shop.fulfillment_rate >= 50 ? 'bg-yellow-100 text-yellow-700' :
+                          'bg-red-100 text-red-700'
+                        }`}>
+                        {shop.fulfillment_rate}%
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // SINGLE SHOP MODE VIEW
+  const shopChanges = changes;
+
+  return (
+    <div className="max-w-[1280px] mx-auto flex flex-col gap-6">
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <span className="px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full">
+              {currentShop?.name}
+            </span>
+          </div>
+          <h2 className="text-3xl font-bold text-text-main tracking-tight">Overview</h2>
+          <p className="text-text-secondary mt-1">Here's what's happening with your shop.</p>
+        </div>
+
+        {/* Time Period Selector - Component */}
+        <TimeSelector
+          selectedPreset={selectedPreset}
+          handlePresetChange={handlePresetChange}
+          showCustomPicker={showCustomPicker}
+          setShowCustomPicker={setShowCustomPicker}
+          handleQuickSelect={handleQuickSelect}
+          customStartDate={customStartDate}
+          setCustomStartDate={setCustomStartDate}
+          customEndDate={customEndDate}
+          setCustomEndDate={setCustomEndDate}
+          applyCustomDates={applyCustomDates}
+        />
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          title="Total Revenue"
+          value={formatCurrency(aggregates.revenue)}
+          icon="payments"
+          colorClass="text-green-600 bg-green-50 border-green-100"
+          changePercent={shopChanges?.revenue_change}
+        />
+        <StatCard
+          title="Total Orders"
+          value={aggregates.orders.toLocaleString()}
+          icon="shopping_cart"
+          colorClass="text-primary bg-orange-50 border-orange-100"
+          changePercent={shopChanges?.orders_change}
+        />
+        <StatCard
+          title="Net Profit"
+          value={formatCurrency(aggregates.profit)}
+          icon="account_balance_wallet"
+          colorClass="text-purple-600 bg-purple-50 border-purple-100"
+          changePercent={shopChanges?.profit_change}
+        />
+        <StatCard
+          title="Fulfillment Rate"
+          value={`${aggregates.fulfillmentRate || 0}%`}
+          icon="local_shipping"
+          colorClass="text-blue-600 bg-blue-50 border-blue-100"
+          changePercent={shopChanges?.fulfillment_rate_change}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+        {/* Main Chart */}
+        <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm">
+          <div className="flex justify-between items-center mb-6">
+            <div>
+              <h3 className="text-lg font-bold text-text-main">Sales Performance</h3>
+              <p className="text-sm text-text-secondary">Revenue over time ({selectedPreset === 'custom' ? 'Custom Range' : MAIN_PRESETS.find(p => p.value === selectedPreset)?.label})</p>
+            </div>
+          </div>
+          <div className="h-[300px] w-full">
+            {chartData.length > 0 ? (
+              <ResponsiveContainer width="100%" height="100%">
+                <AreaChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+                  <defs>
+                    <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#137fec" stopOpacity={0.2} />
+                      <stop offset="95%" stopColor="#137fec" stopOpacity={0} />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                  <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} dy={10} />
+                  <YAxis axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} />
+                  <Tooltip
+                    contentStyle={{ backgroundColor: '#fff', border: '1px solid #e2e8f0', borderRadius: '8px' }}
+                    itemStyle={{ color: '#1e293b' }}
+                    formatter={(val: number) => formatCurrency(val)}
+                  />
+                  <Area type="monotone" dataKey="revenue" stroke="#137fec" strokeWidth={3} fillOpacity={1} fill="url(#colorRevenue)" />
+                </AreaChart>
+              </ResponsiveContainer>
+            ) : (
+              <div className="flex items-center justify-center h-full text-text-secondary">
+                <div className="text-center">
+                  <span className="material-symbols-outlined text-4xl mb-2">bar_chart</span>
+                  <p>No data available for this period.</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface StatCardProps {
+  title: string;
+  value: string;
+  subtitle?: string;
+  icon: string;
+  colorClass: string;
+  changePercent?: number | null;
+}
+
+const StatCard = ({ title, value, subtitle, icon, colorClass, changePercent }: StatCardProps) => (
+  <div className="bg-white rounded-xl p-5 border border-border-light hover:border-slate-300 transition-colors shadow-sm">
+    <div className="flex justify-between items-start mb-4">
+      <div className={`p-2 rounded-lg border ${colorClass}`}>
+        <span className="material-symbols-outlined">{icon}</span>
+      </div>
+    </div>
+    <p className="text-text-secondary text-sm font-medium">{title}</p>
+    <h3 className="text-2xl font-bold text-text-main mt-1">{value}</h3>
+    {subtitle && <p className="text-xs text-text-secondary mt-1">{subtitle}</p>}
+    {changePercent !== undefined && changePercent !== null && (
+      <div className={`flex items-center gap-1 mt-2 text-xs font-medium ${changePercent >= 0 ? 'text-green-600' : 'text-red-500'}`}>
+        <span className="material-symbols-outlined text-[14px]">
+          {changePercent >= 0 ? 'trending_up' : 'trending_down'}
+        </span>
+        <span>{changePercent >= 0 ? '+' : ''}{changePercent.toFixed(1)}% vs previous period</span>
+      </div>
+    )}
+  </div>
+);
+
+// Extracted TimeSelector to reuse in both views
+const TimeSelector = ({ selectedPreset, handlePresetChange, showCustomPicker, setShowCustomPicker, handleQuickSelect, customStartDate, setCustomStartDate, customEndDate, setCustomEndDate, applyCustomDates }: any) => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2 flex-wrap">
+        {MAIN_PRESETS.map((preset) => (
+          <button
+            key={preset.value}
+            onClick={() => handlePresetChange(preset.value)}
+            className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-all ${selectedPreset === preset.value
+                ? 'bg-primary text-white shadow-md'
+                : 'bg-white border border-border-light text-text-main hover:bg-slate-50'
+              }`}
+          >
+            {preset.label}
+          </button>
+        ))}
+        <div className="relative">
+          <button
+            onClick={() => setShowCustomPicker(!showCustomPicker)}
+            className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-all flex items-center gap-1 ${selectedPreset === 'custom' || QUICK_SELECT_OPTIONS.some(o => o.value === selectedPreset)
+                ? 'bg-primary text-white shadow-md'
+                : 'bg-white border border-border-light text-text-main hover:bg-slate-50'
+              }`}
+          >
+            <span className="material-symbols-outlined text-[16px]">calendar_month</span>
+            {selectedPreset === 'custom' ? 'Custom' :
+              QUICK_SELECT_OPTIONS.find(o => o.value === selectedPreset)?.label || 'More'}
+          </button>
+
+          {/* Custom Picker Dropdown */}
+          {showCustomPicker && (
+            <div className="absolute right-0 top-full mt-2 bg-white border border-border-light rounded-xl shadow-lg p-4 z-50 min-w-[300px]">
+              <p className="text-xs font-semibold text-text-secondary uppercase mb-2">Quick Select</p>
+              <div className="flex flex-wrap gap-2 mb-4">
+                {QUICK_SELECT_OPTIONS.map((opt) => (
+                  <button
+                    key={opt.value}
+                    onClick={() => handleQuickSelect(opt.value)}
+                    className="px-3 py-1.5 text-sm bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors"
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+              <p className="text-xs font-semibold text-text-secondary uppercase mb-2">Custom Range</p>
+              <div className="flex items-center gap-2 mb-3">
+                <input
+                  type="date"
+                  value={customStartDate}
+                  onChange={(e) => setCustomStartDate(e.target.value)}
+                  className="flex-1 px-2 py-1.5 text-sm border border-border-light rounded-lg focus:outline-none focus:border-primary"
+                />
+                <span className="text-text-secondary text-sm">to</span>
+                <input
+                  type="date"
+                  value={customEndDate}
+                  onChange={(e) => setCustomEndDate(e.target.value)}
+                  className="flex-1 px-2 py-1.5 text-sm border border-border-light rounded-lg focus:outline-none focus:border-primary"
+                />
+              </div>
+              <button
+                onClick={applyCustomDates}
+                disabled={!customStartDate || !customEndDate}
+                className="w-full py-2 bg-primary text-white text-sm font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90"
+              >
+                Apply
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Dashboard;

frontend/pages/DataImport.tsx

@@ -0,0 +1,511 @@
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { uploadFile, fetchProviders, fetchImportHistory, deleteImport, fetchImportDetails, createProvider } from '../services/api';
+import { FulfillmentProvider, ImportHistory } from '../types';
+import { useShop } from '../contexts/ShopContext';
+
+const parseCSV = (str: string) => {
+    const arr: string[][] = [];
+    let quote = false;
+    let row: string[] = [];
+    let col = '';
+
+    str = str.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+    for (let i = 0; i < str.length; i++) {
+        let c = str[i];
+        if (quote) {
+            if (c === '"') {
+                if (str[i + 1] === '"') {
+                    col += '"';
+                    i++;
+                } else {
+                    quote = false;
+                }
+            } else {
+                col += c;
+            }
+        } else {
+            if (c === '"') {
+                quote = true;
+            } else if (c === ',') {
+                row.push(col);
+                col = '';
+            } else if (c === '\n') {
+                row.push(col);
+                arr.push(row);
+                row = [];
+                col = '';
+            } else {
+                col += c;
+            }
+        }
+    }
+    if (col || row.length > 0) {
+        row.push(col);
+        arr.push(row);
+    }
+    return arr;
+};
+
+const CSVPreview: React.FC<{ content: string }> = ({ content }) => {
+    const rows = useMemo(() => parseCSV(content), [content]);
+
+    if (!rows.length) return <div className="p-6 text-center text-text-secondary">Empty file</div>;
+
+    const header = rows[0];
+    const body = rows.slice(1).filter(r => r.some(c => c.trim() !== ''));
+
+    return (
+        <div className="w-full h-full overflow-auto">
+            <table className="min-w-full text-left text-sm border-collapse">
+                <thead className="bg-slate-100 sticky top-0 z-10 shadow-sm">
+                    <tr>
+                        {header.map((h, i) => (
+                            <th key={i} className="px-4 py-2 font-semibold text-text-main border-b border-border-light whitespace-nowrap bg-slate-100">
+                                {h}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody className="divide-y divide-border-light">
+                    {body.map((row, i) => (
+                        <tr key={i} className="hover:bg-slate-50">
+                            {row.map((cell, j) => (
+                                <td key={j} className="px-4 py-2 text-text-secondary border-r border-border-light/50 last:border-r-0 whitespace-nowrap" title={cell}>
+                                    {cell}
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+const DataImport: React.FC = () => {
+    const { currentShop, isLoading: shopLoading } = useShop();
+    const [activeTab, setActiveTab] = useState<'etsy' | 'fulfillment'>('etsy');
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState<string | null>(null);
+
+    // Data
+    const [providers, setProviders] = useState<FulfillmentProvider[]>([]);
+    const [history, setHistory] = useState<ImportHistory[]>([]);
+
+    // Fulfillment Selection
+    const [selectedProviderId, setSelectedProviderId] = useState<number | null>(null);
+
+    // Modals
+    const [showFileModal, setShowFileModal] = useState(false);
+    const [viewingFile, setViewingFile] = useState<{ name: string, content: string } | null>(null);
+    const [showProviderModal, setShowProviderModal] = useState(false);
+    const [newProviderName, setNewProviderName] = useState("");
+
+    // Load providers when shop changes
+    useEffect(() => {
+        if (currentShop) {
+            loadProviders();
+        } else {
+            setProviders([]);
+        }
+    }, [currentShop]);
+
+    // Load History when dependencies change
+    useEffect(() => {
+        if (currentShop) {
+            loadHistory();
+        } else {
+            setHistory([]);
+        }
+    }, [activeTab, selectedProviderId, currentShop]);
+
+    const loadProviders = async () => {
+        if (!currentShop) return;
+        try {
+            const data = await fetchProviders(currentShop.id);
+            setProviders(data);
+        } catch (e) {
+            console.error("Failed to load providers", e);
+        }
+    };
+
+    const loadHistory = async () => {
+        if (!currentShop) return;
+        try {
+            if (activeTab === 'etsy') {
+                const data = await fetchImportHistory(currentShop.id, 'etsy');
+                setHistory(data);
+            } else if (activeTab === 'fulfillment' && selectedProviderId) {
+                const data = await fetchImportHistory(currentShop.id, 'fulfillment', selectedProviderId);
+                setHistory(data);
+            } else {
+                setHistory([]);
+            }
+        } catch (e) {
+            console.error("Failed to load history", e);
+        }
+    };
+
+    const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file || !currentShop) return;
+
+        if (activeTab === 'fulfillment' && !selectedProviderId) {
+            setMessage("Please select a fulfillment provider first.");
+            return;
+        }
+
+        setLoading(true);
+        setMessage(null);
+        try {
+            const res = await uploadFile(currentShop.id, activeTab, file, selectedProviderId || undefined);
+            setMessage(`${activeTab === 'etsy' ? 'Etsy' : 'Fulfillment'} file uploaded successfully: ${res.message}`);
+            loadHistory();
+        } catch (err) {
+            setMessage("Upload failed. Please check the backend connection.");
+        } finally {
+            setLoading(false);
+            e.target.value = "";
+        }
+    };
+
+    const handleDelete = async (id: number) => {
+        if (!currentShop) return;
+        if (!confirm("Are you sure you want to delete this import? All associated records will be removed.")) return;
+        try {
+            await deleteImport(currentShop.id, id);
+            loadHistory();
+            setMessage("Import record deleted.");
+        } catch (e) {
+            alert("Failed to delete import");
+        }
+    }
+
+    const handleViewFile = async (id: number) => {
+        if (!currentShop) return;
+        try {
+            const data = await fetchImportDetails(currentShop.id, id);
+            setViewingFile({ name: data.file_name, content: data.raw_content });
+            setShowFileModal(true);
+        } catch (e) {
+            alert("Failed to load file details");
+        }
+    }
+
+    const handleCreateProvider = async (mapping: any) => {
+        if (!newProviderName || !currentShop) return;
+        try {
+            await createProvider(currentShop.id, newProviderName, mapping);
+            await loadProviders();
+            setNewProviderName("");
+            setShowProviderModal(false);
+            setMessage("Provider created successfully.");
+        } catch (e) {
+            alert("Failed to create provider");
+        }
+    }
+
+    if (shopLoading) {
+        return (
+            <div className="flex h-full items-center justify-center min-h-[400px]">
+                <div className="flex flex-col items-center gap-2">
+                    <span className="material-symbols-outlined text-4xl text-primary animate-spin">progress_activity</span>
+                    <p className="text-text-secondary">Loading...</p>
+                </div>
+            </div>
+        );
+    }
+
+    if (!currentShop) {
+        return (
+            <div className="flex h-full items-center justify-center min-h-[400px]">
+                <div className="flex flex-col items-center gap-4 text-center">
+                    <div className="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center">
+                        <span className="material-symbols-outlined text-3xl text-amber-600">storefront</span>
+                    </div>
+                    <h2 className="text-xl font-bold text-text-main">No Shop Selected</h2>
+                    <p className="text-text-secondary max-w-md">
+                        Please select a shop from the sidebar to import data.
+                    </p>
+                    <a
+                        href="#/shops"
+                        className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg font-medium"
+                    >
+                        Manage Shops
+                    </a>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="max-w-[1200px] mx-auto flex flex-col gap-6">
+            <div>
+                <div className="flex items-center gap-2 mb-1">
+                    <span className="px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full">
+                        {currentShop.name}
+                    </span>
+                </div>
+                <h2 className="text-3xl font-black text-text-main">Data Import</h2>
+                <p className="text-text-secondary mt-2">Manage your data sources: Etsy Orders and Fulfillment Costs.</p>
+            </div>
+
+            {/* Tabs */}
+            <div className="flex border-b border-border-light">
+                <button
+                    onClick={() => { setActiveTab('etsy'); setMessage(null); }}
+                    className={`px-6 py-3 font-medium text-sm transition-colors ${activeTab === 'etsy' ? 'border-b-2 border-primary text-primary' : 'text-text-secondary hover:text-text-main'}`}
+                >
+                    Etsy Orders
+                </button>
+                <button
+                    onClick={() => { setActiveTab('fulfillment'); setMessage(null); }}
+                    className={`px-6 py-3 font-medium text-sm transition-colors ${activeTab === 'fulfillment' ? 'border-b-2 border-primary text-primary' : 'text-text-secondary hover:text-text-main'}`}
+                >
+                    Fulfillment Costs
+                </button>
+            </div>
+
+            {message && (
+                <div className={`p-4 rounded-lg border ${message.includes('failed') || message.includes('select') ? 'bg-red-50 border-red-200 text-red-700' : 'bg-green-50 border-green-200 text-green-700'}`}>
+                    <p className="font-medium flex items-center gap-2">
+                        <span className="material-symbols-outlined">{message.includes('failed') || message.includes('select') ? 'error' : 'check_circle'}</span>
+                        {message}
+                    </p>
+                </div>
+            )}
+
+            {/* Content Range */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+
+                {/* Left Panel: Upload / Management */}
+                <div className="md:col-span-1 flex flex-col gap-6">
+
+                    {activeTab === 'fulfillment' && (
+                        <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm">
+                            <h3 className="text-lg font-bold text-text-main mb-4">Select Provider</h3>
+                            <div className="flex gap-2 mb-4">
+                                <select
+                                    className="flex-1 h-10 px-3 bg-white border border-border-light rounded-lg text-sm outline-none focus:border-primary"
+                                    value={selectedProviderId || ""}
+                                    onChange={(e) => setSelectedProviderId(Number(e.target.value))}
+                                >
+                                    <option value="" disabled>Select a provider...</option>
+                                    {providers.map(p => (
+                                        <option key={p.id} value={p.id}>{p.name}</option>
+                                    ))}
+                                </select>
+                                <button
+                                    onClick={() => setShowProviderModal(true)}
+                                    className="size-10 flex items-center justify-center bg-slate-100 hover:bg-slate-200 rounded-lg text-text-main transition-colors"
+                                    title="Add New Provider"
+                                >
+                                    <span className="material-symbols-outlined">add</span>
+                                </button>
+                            </div>
+                            {!selectedProviderId && (
+                                <p className="text-sm text-text-secondary">Select a provider to manage imports.</p>
+                            )}
+                        </div>
+                    )}
+
+                    {(activeTab === 'etsy' || selectedProviderId) && (
+                        <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm">
+                            <div className={`size-12 rounded-full ${activeTab === 'etsy' ? 'bg-orange-100 text-orange-600' : 'bg-blue-100 text-blue-600'} flex items-center justify-center mb-4`}>
+                                <span className="material-symbols-outlined text-2xl">cloud_upload</span>
+                            </div>
+                            <h3 className="text-lg font-bold text-text-main mb-2">Upload New File</h3>
+                            <p className="text-sm text-text-secondary mb-4">
+                                {activeTab === 'etsy' ? 'Upload standard Etsy CSV export.' : 'Upload Cost CSV for this provider.'}
+                            </p>
+
+                            <label className={`flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-border-light rounded-lg cursor-pointer hover:bg-slate-50 transition-colors ${loading ? 'opacity-50 pointer-events-none' : ''}`}>
+                                <span className="material-symbols-outlined text-text-secondary text-3xl mb-2">upload_file</span>
+                                <p className="text-sm text-text-secondary"><span className="font-semibold text-primary">Click to upload</span></p>
+                                <input type="file" className="hidden" accept=".csv" onChange={handleFileUpload} />
+                            </label>
+                        </div>
+                    )}
+                </div>
+
+                {/* Right Panel: History */}
+                <div className="md:col-span-2">
+                    <div className="bg-white rounded-xl border border-border-light shadow-sm overflow-hidden">
+                        <div className="px-6 py-4 border-b border-border-light bg-slate-50 flex justify-between items-center">
+                            <h3 className="text-lg font-bold text-text-main">
+                                {activeTab === 'etsy' ? 'Etsy Import History' : 'Provider Import History'}
+                            </h3>
+                            <button onClick={loadHistory} className="text-text-secondary hover:text-primary">
+                                <span className="material-symbols-outlined">refresh</span>
+                            </button>
+                        </div>
+
+                        {!history.length ? (
+                            <div className="p-8 text-center text-text-secondary">
+                                <p>No history found.</p>
+                            </div>
+                        ) : (
+                            <div className="overflow-x-auto">
+                                <table className="w-full text-left text-sm">
+                                    <thead className="text-xs text-text-secondary uppercase bg-slate-50 border-b border-border-light">
+                                        <tr>
+                                            <th className="px-6 py-3 font-semibold">Date</th>
+                                            <th className="px-6 py-3 font-semibold">Filename</th>
+                                            <th className="px-6 py-3 font-semibold text-center">Records</th>
+                                            <th className="px-6 py-3 font-semibold text-right">Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody className="divide-y divide-border-light">
+                                        {history.map(item => (
+                                            <tr key={item.id} className="hover:bg-slate-50">
+                                                <td className="px-6 py-4 text-text-secondary">
+                                                    {new Date(item.date).toLocaleDateString()} {new Date(item.date).toLocaleTimeString()}
+                                                </td>
+                                                <td className="px-6 py-4 font-medium text-text-main">{item.file_name}</td>
+                                                <td className="px-6 py-4 text-center">
+                                                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                                        {item.count}
+                                                    </span>
+                                                </td>
+                                                <td className="px-6 py-4 text-right flex justify-end gap-2">
+                                                    <button
+                                                        onClick={() => handleViewFile(item.id)}
+                                                        className="text-blue-600 hover:text-blue-800 text-sm font-medium"
+                                                    >
+                                                        View
+                                                    </button>
+                                                    <button
+                                                        onClick={() => handleDelete(item.id)}
+                                                        className="text-red-600 hover:text-red-800 text-sm font-medium"
+                                                    >
+                                                        Delete
+                                                    </button>
+                                                </td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Modal: View File */}
+            {showFileModal && viewingFile && (
+                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+                    <div className="bg-white rounded-xl shadow-xl w-[95vw] h-[90vh] flex flex-col">
+                        <div className="px-6 py-4 border-b border-border-light flex justify-between items-center">
+                            <h3 className="text-lg font-bold text-text-main">File Content: {viewingFile.name}</h3>
+                            <button onClick={() => setShowFileModal(false)} className="text-text-secondary hover:text-text-main">
+                                <span className="material-symbols-outlined">close</span>
+                            </button>
+                        </div>
+                        <div className="flex-1 overflow-hidden bg-white">
+                            <CSVPreview content={viewingFile.content} />
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Modal: Add Provider */}
+            {showProviderModal && (
+                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+                    <div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto">
+                        <h3 className="text-xl font-bold text-text-main mb-4">Add Fulfillment Provider</h3>
+
+                        <div className="space-y-4">
+                            <div>
+                                <label className="block text-sm font-medium text-text-secondary mb-1">Provider Name</label>
+                                <input
+                                    type="text"
+                                    className="w-full h-10 px-3 bg-white border border-border-light rounded-lg text-sm outline-none focus:border-primary"
+                                    placeholder="e.g. Printify"
+                                    value={newProviderName}
+                                    onChange={(e) => setNewProviderName(e.target.value)}
+                                />
+                            </div>
+
+                            <div className="border-t border-border-light pt-4">
+                                <h4 className="text-sm font-bold text-text-main mb-2">Column Mapping</h4>
+                                <p className="text-xs text-text-secondary mb-3">Enter the exact column headers from your CSV file.</p>
+
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div className="col-span-2">
+                                        <label className="block text-xs font-medium text-text-secondary mb-1">Ref/Order ID Column</label>
+                                        <input type="text" id="ref_id_col" className="w-full h-9 px-3 bg-slate-50 border border-border-light rounded text-sm outline-none focus:border-primary" placeholder="e.g. Reference ID" />
+                                    </div>
+
+                                    <div>
+                                        <label className="block text-xs font-medium text-text-secondary mb-1">First Name Column</label>
+                                        <input type="text" id="first_name_col" className="w-full h-9 px-3 bg-slate-50 border border-border-light rounded text-sm outline-none focus:border-primary" placeholder="First Name" />
+                                    </div>
+                                    <div>
+                                        <label className="block text-xs font-medium text-text-secondary mb-1">Last Name Column</label>
+                                        <input type="text" id="last_name_col" className="w-full h-9 px-3 bg-slate-50 border border-border-light rounded text-sm outline-none focus:border-primary" placeholder="Last Name" />
+                                    </div>
+
+                                    <div className="col-span-2">
+                                        <label className="block text-xs font-medium text-text-secondary mb-1">Address Column (Street 1)</label>
+                                        <input type="text" id="address_col" className="w-full h-9 px-3 bg-slate-50 border border-border-light rounded text-sm outline-none focus:border-primary" placeholder="Address Line 1" />
+                                    </div>
+
+                                    <div>
+                                        <label className="block text-xs font-medium text-text-secondary mb-1">City Column</label>
+                                        <input type="text" id="city_col" className="w-full h-9 px-3 bg-slate-50 border border-border-light rounded text-sm outline-none focus:border-primary" placeholder="City" />
+                                    </div>
+                                    <div>
+                                        <label className="block text-xs font-medium text-text-secondary mb-1">State Column</label>
+                                        <input type="text" id="state_col" className="w-full h-9 px-3 bg-slate-50 border border-border-light rounded text-sm outline-none focus:border-primary" placeholder="State" />
+                                    </div>
+
+                                    <div className="col-span-2">
+                                        <label className="block text-xs font-medium text-text-secondary mb-1">Total Cost Column (Important)</label>
+                                        <input type="text" id="total_cost_col" className="w-full h-9 px-3 bg-slate-50 border border-border-light rounded text-sm outline-none focus:border-primary" placeholder="e.g. Total Cost" />
+                                    </div>
+
+                                    <div className="col-span-2">
+                                        <label className="block text-xs font-medium text-text-secondary mb-1">Tracking Number (Optional)</label>
+                                        <input type="text" id="tracking_col" className="w-full h-9 px-3 bg-slate-50 border border-border-light rounded text-sm outline-none focus:border-primary" placeholder="e.g. Tracking" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="flex justify-end gap-2 mt-6">
+                            <button
+                                onClick={() => setShowProviderModal(false)}
+                                className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-slate-100 rounded-lg"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={() => {
+                                    const mapping: any = {};
+                                    ['ref_id_col', 'first_name_col', 'last_name_col', 'address_col', 'city_col', 'state_col', 'total_cost_col', 'tracking_col'].forEach(id => {
+                                        const val = (document.getElementById(id) as HTMLInputElement)?.value;
+                                        if (val) mapping[id] = val;
+                                    });
+
+                                    if (!newProviderName) {
+                                        alert("Please enter a provider name");
+                                        return;
+                                    }
+
+                                    handleCreateProvider(mapping);
+                                }}
+                                className="px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary-dark rounded-lg"
+                            >
+                                Create
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default DataImport;

frontend/pages/Login.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { API_BASE_URL } from '../services/api';
+
+export const Login: React.FC = () => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const { login } = useAuth();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    // Redirect to where they came from or dashboard
+    const from = location.state?.from?.pathname || "/dashboard";
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+        setIsSubmitting(true);
+
+        try {
+            const formData = new FormData();
+            formData.append('username', username);
+            formData.append('password', password);
+
+            const response = await fetch(`${API_BASE_URL}/token`, {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.detail || 'Login failed');
+            }
+
+            const data = await response.json();
+            await login(data.access_token);
+            navigate(from, { replace: true });
+        } catch (err: any) {
+            setError(err.message || 'An error occurred during login');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-md w-full space-y-8">
+                <div>
+                    <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+                        Sign in to your account
+                    </h2>
+                </div>
+                <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+                    <div className="rounded-md shadow-sm -space-y-px">
+                        <div>
+                            <label htmlFor="username" className="sr-only">Username</label>
+                            <input
+                                id="username"
+                                name="username"
+                                type="text"
+                                required
+                                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                                placeholder="Username"
+                                value={username}
+                                onChange={(e) => setUsername(e.target.value)}
+                            />
+                        </div>
+                        <div>
+                            <label htmlFor="password" className="sr-only">Password</label>
+                            <input
+                                id="password"
+                                name="password"
+                                type="password"
+                                required
+                                className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                                placeholder="Password"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                            />
+                        </div>
+                    </div>
+
+                    {error && (
+                        <div className="text-red-600 text-sm text-center">
+                            {error}
+                        </div>
+                    )}
+
+                    <div>
+                        <button
+                            type="submit"
+                            disabled={isSubmitting}
+                            className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                        >
+                            {isSubmitting ? 'Signing in...' : 'Sign in'}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};

frontend/pages/Orders.tsx

@@ -0,0 +1,664 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { fetchOrders, fetchAllShopsOrders } from '../services/api';
+import { Order, AllShopsOrder } from '../types';
+import { useShop } from '../contexts/ShopContext';
+
+// Color palette for shop badges
+const SHOP_COLORS: Record<number, string> = {};
+const COLOR_PALETTE = ['#6366f1', '#8b5cf6', '#a855f7', '#d946ef', '#ec4899', '#f43f5e', '#f97316', '#eab308'];
+let colorIndex = 0;
+
+const getShopColor = (shopId: number): string => {
+   if (!SHOP_COLORS[shopId]) {
+      SHOP_COLORS[shopId] = COLOR_PALETTE[colorIndex % COLOR_PALETTE.length];
+      colorIndex++;
+   }
+   return SHOP_COLORS[shopId];
+};
+
+// Time period presets - reuse consistent definitions
+const MAIN_PRESETS = [
+   { label: 'Today', value: 'today' },
+   { label: 'Yesterday', value: 'yesterday' },
+   { label: 'Last 7 days', value: '7d' },
+   { label: 'Last 30 days', value: '30d' },
+   { label: 'All Time', value: 'all' },
+];
+
+const QUICK_SELECT_OPTIONS = [
+   { label: 'Last 90 days', value: '90d' },
+   { label: 'This Year', value: 'ytd' },
+   { label: 'Last Year', value: 'lastyear' },
+];
+
+const getDateRangeFromPreset = (preset: string): { startDate: string; endDate: string } | null => {
+   const today = new Date();
+   const formatDate = (d: Date) => d.toISOString().split('T')[0];
+
+   switch (preset) {
+      case 'today':
+         return { startDate: formatDate(today), endDate: formatDate(today) };
+      case 'yesterday': {
+         const yesterday = new Date(today);
+         yesterday.setDate(yesterday.getDate() - 1);
+         return { startDate: formatDate(yesterday), endDate: formatDate(yesterday) };
+      }
+      case '7d': {
+         const start = new Date(today);
+         start.setDate(start.getDate() - 6);
+         return { startDate: formatDate(start), endDate: formatDate(today) };
+      }
+      case '30d': {
+         const start = new Date(today);
+         start.setDate(start.getDate() - 29);
+         return { startDate: formatDate(start), endDate: formatDate(today) };
+      }
+      case '90d': {
+         const start = new Date(today);
+         start.setDate(start.getDate() - 89);
+         return { startDate: formatDate(start), endDate: formatDate(today) };
+      }
+      case 'ytd': {
+         const start = new Date(today.getFullYear(), 0, 1);
+         return { startDate: formatDate(start), endDate: formatDate(today) };
+      }
+      case 'lastyear': {
+         const start = new Date(today.getFullYear() - 1, 0, 1);
+         const end = new Date(today.getFullYear() - 1, 11, 31);
+         return { startDate: formatDate(start), endDate: formatDate(end) };
+      }
+      case 'all':
+      default:
+         return null;
+   }
+};
+
+const Orders: React.FC = () => {
+   const { currentShop, isLoading: shopLoading, isAllShopsMode, shops } = useShop();
+   const [orders, setOrders] = useState<Order[]>([]);
+   const [allShopsOrders, setAllShopsOrders] = useState<AllShopsOrder[]>([]);
+   const [loading, setLoading] = useState(true);
+   const [searchTerm, setSearchTerm] = useState('');
+   const [selectedShopFilter, setSelectedShopFilter] = useState<number | 'all'>('all');
+
+   // Time selector state
+   const [selectedPreset, setSelectedPreset] = useState('all'); // Default to all time for orders 
+   const [customStartDate, setCustomStartDate] = useState('');
+   const [customEndDate, setCustomEndDate] = useState('');
+   const [showCustomPicker, setShowCustomPicker] = useState(false);
+
+   // Pagination state
+   const [currentPage, setCurrentPage] = useState(1);
+   const ordersPerPage = 20;
+
+   // Time Selector Handlers
+   const handlePresetChange = (preset: string) => {
+      setSelectedPreset(preset);
+      if (preset !== 'custom') {
+         setShowCustomPicker(false);
+      }
+   };
+
+   const handleQuickSelect = (value: string) => {
+      setSelectedPreset(value);
+      setShowCustomPicker(false);
+   };
+
+   const applyCustomDates = () => {
+      if (customStartDate && customEndDate) {
+         setSelectedPreset('custom');
+         setShowCustomPicker(false);
+      }
+   };
+
+   useEffect(() => {
+      const loadOrders = async () => {
+         setLoading(true);
+         try {
+            if (isAllShopsMode) {
+               const data = await fetchAllShopsOrders();
+               setAllShopsOrders(data);
+               setOrders([]);
+            } else if (currentShop) {
+               const data = await fetchOrders(currentShop.id);
+               setOrders(data);
+               setAllShopsOrders([]);
+            } else {
+               setOrders([]);
+               setAllShopsOrders([]);
+            }
+         } catch (e) {
+            console.error("Failed to load orders", e);
+         } finally {
+            setLoading(false);
+         }
+      };
+      loadOrders();
+   }, [currentShop, isAllShopsMode]);
+
+   // Reset pagination when filters change
+   useEffect(() => {
+      setCurrentPage(1);
+   }, [searchTerm, selectedShopFilter, isAllShopsMode, selectedPreset, customStartDate, customEndDate]);
+
+   // Date Filtering Helper
+   const filterByDate = (items: any[]) => {
+      let startDate: Date | null = null;
+      let endDate: Date | null = null;
+
+      if (selectedPreset === 'custom' && customStartDate && customEndDate) {
+         startDate = new Date(customStartDate);
+         endDate = new Date(customEndDate);
+      } else if (selectedPreset !== 'all') {
+         const range = getDateRangeFromPreset(selectedPreset);
+         if (range) {
+            startDate = new Date(range.startDate);
+            endDate = new Date(range.endDate);
+         }
+      }
+
+      if (!startDate || !endDate) return items;
+
+      // End date should be end of day
+      const adjustEndDate = new Date(endDate);
+      adjustEndDate.setHours(23, 59, 59, 999);
+
+      return items.filter(item => {
+         // Assuming item.date is YYYY-MM-DD or similar format
+         if (!item.date) return false;
+         const itemDate = new Date(item.date);
+         return itemDate >= startDate! && itemDate <= adjustEndDate;
+      });
+   };
+
+   // Filter logic for single shop mode
+   const filteredOrders = useMemo(() => {
+      let filtered = orders.filter(order =>
+         order.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
+         order.customer?.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      return filterByDate(filtered);
+   }, [orders, searchTerm, selectedPreset, customStartDate, customEndDate]);
+
+   // Paginated single shop orders
+   const paginatedOrders = useMemo(() => {
+      const startIndex = (currentPage - 1) * ordersPerPage;
+      return filteredOrders.slice(startIndex, startIndex + ordersPerPage);
+   }, [filteredOrders, currentPage]);
+
+   const totalPagesOrders = Math.ceil(filteredOrders.length / ordersPerPage);
+
+   // Filter logic for all shops mode
+   const filteredAllShopsOrders = useMemo(() => {
+      let filtered = allShopsOrders.filter(order => {
+         const matchesSearch = order.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            order.customer?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            order.shop_name?.toLowerCase().includes(searchTerm.toLowerCase());
+         const matchesShop = selectedShopFilter === 'all' || order.shop_id === selectedShopFilter;
+         return matchesSearch && matchesShop;
+      });
+      return filterByDate(filtered);
+   }, [allShopsOrders, searchTerm, selectedShopFilter, selectedPreset, customStartDate, customEndDate]);
+
+   // Paginated all shops orders
+   const paginatedAllShopsOrders = useMemo(() => {
+      const startIndex = (currentPage - 1) * ordersPerPage;
+      return filteredAllShopsOrders.slice(startIndex, startIndex + ordersPerPage);
+   }, [filteredAllShopsOrders, currentPage]);
+
+   const totalPagesAllShops = Math.ceil(filteredAllShopsOrders.length / ordersPerPage);
+
+   // Statistics for all shops mode
+   const allShopsStats = useMemo(() => {
+      const uniqueShops = new Set(filteredAllShopsOrders.map(o => o.shop_id));
+      const totalValue = filteredAllShopsOrders.reduce((sum, o) => sum + (o.total || 0), 0);
+      const shippedCount = filteredAllShopsOrders.filter(o => o.status === 'Shipped').length;
+      return {
+         orderCount: filteredAllShopsOrders.length,
+         shopCount: uniqueShops.size,
+         totalValue,
+         shippedCount
+      };
+   }, [filteredAllShopsOrders]);
+
+   const formatCurrency = (val: number) => `$${val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+
+   // Reusable TimeSelector Component
+   const TimeSelector = () => (
+      <div className="flex flex-col gap-2">
+         <div className="flex items-center gap-2 flex-wrap">
+            {MAIN_PRESETS.map((preset) => (
+               <button
+                  key={preset.value}
+                  onClick={() => handlePresetChange(preset.value)}
+                  className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-all ${selectedPreset === preset.value
+                        ? 'bg-primary text-white shadow-md'
+                        : 'bg-white border border-border-light text-text-main hover:bg-slate-50'
+                     }`}
+               >
+                  {preset.label}
+               </button>
+            ))}
+            <div className="relative">
+               <button
+                  onClick={() => setShowCustomPicker(!showCustomPicker)}
+                  className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-all flex items-center gap-1 ${selectedPreset === 'custom' || QUICK_SELECT_OPTIONS.some(o => o.value === selectedPreset)
+                        ? 'bg-primary text-white shadow-md'
+                        : 'bg-white border border-border-light text-text-main hover:bg-slate-50'
+                     }`}
+               >
+                  <span className="material-symbols-outlined text-[16px]">calendar_month</span>
+                  {selectedPreset === 'custom' ? 'Custom' :
+                     QUICK_SELECT_OPTIONS.find(o => o.value === selectedPreset)?.label || 'More'}
+               </button>
+
+               {/* Custom Picker Dropdown */}
+               {showCustomPicker && (
+                  <div className="absolute right-0 top-full mt-2 bg-white border border-border-light rounded-xl shadow-lg p-4 z-50 min-w-[300px]">
+                     <p className="text-xs font-semibold text-text-secondary uppercase mb-2">Quick Select</p>
+                     <div className="flex flex-wrap gap-2 mb-4">
+                        {QUICK_SELECT_OPTIONS.map((opt) => (
+                           <button
+                              key={opt.value}
+                              onClick={() => handleQuickSelect(opt.value)}
+                              className="px-3 py-1.5 text-sm bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors"
+                           >
+                              {opt.label}
+                           </button>
+                        ))}
+                     </div>
+                     <p className="text-xs font-semibold text-text-secondary uppercase mb-2">Custom Range</p>
+                     <div className="flex items-center gap-2 mb-3">
+                        <input
+                           type="date"
+                           value={customStartDate}
+                           onChange={(e) => setCustomStartDate(e.target.value)}
+                           className="flex-1 px-2 py-1.5 text-sm border border-border-light rounded-lg focus:outline-none focus:border-primary"
+                        />
+                        <span className="text-text-secondary text-sm">to</span>
+                        <input
+                           type="date"
+                           value={customEndDate}
+                           onChange={(e) => setCustomEndDate(e.target.value)}
+                           className="flex-1 px-2 py-1.5 text-sm border border-border-light rounded-lg focus:outline-none focus:border-primary"
+                        />
+                     </div>
+                     <button
+                        onClick={applyCustomDates}
+                        disabled={!customStartDate || !customEndDate}
+                        className="w-full py-2 bg-primary text-white text-sm font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90"
+                     >
+                        Apply
+                     </button>
+                  </div>
+               )}
+            </div>
+         </div>
+      </div>
+   );
+
+   // Pagination Component
+   const PaginationComponent = ({ currentPage, totalPages, onPageChange }: { currentPage: number; totalPages: number; onPageChange: (page: number) => void }) => {
+      if (totalPages <= 1) return null;
+
+      return (
+         <div className="flex items-center justify-between px-6 py-4 border-t border-border-light bg-slate-50">
+            <p className="text-sm text-text-secondary">
+               Page {currentPage} of {totalPages}
+            </p>
+            <div className="flex items-center gap-2">
+               <button
+                  onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+                  disabled={currentPage === 1}
+                  className="px-3 py-1.5 text-sm font-medium rounded-lg border border-border-light bg-white hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
+               >
+                  <span className="material-symbols-outlined text-[16px]">chevron_left</span>
+                  Previous
+               </button>
+               <div className="flex items-center gap-1">
+                  {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                     let pageNum;
+                     if (totalPages <= 5) {
+                        pageNum = i + 1;
+                     } else if (currentPage <= 3) {
+                        pageNum = i + 1;
+                     } else if (currentPage >= totalPages - 2) {
+                        pageNum = totalPages - 4 + i;
+                     } else {
+                        pageNum = currentPage - 2 + i;
+                     }
+                     return (
+                        <button
+                           key={pageNum}
+                           onClick={() => onPageChange(pageNum)}
+                           className={`w-8 h-8 text-sm font-medium rounded-lg ${currentPage === pageNum
+                              ? 'bg-primary text-white'
+                              : 'bg-white border border-border-light hover:bg-slate-50'
+                              }`}
+                        >
+                           {pageNum}
+                        </button>
+                     );
+                  })}
+               </div>
+               <button
+                  onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+                  disabled={currentPage === totalPages}
+                  className="px-3 py-1.5 text-sm font-medium rounded-lg border border-border-light bg-white hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
+               >
+                  Next
+                  <span className="material-symbols-outlined text-[16px]">chevron_right</span>
+               </button>
+            </div>
+         </div>
+      );
+   };
+
+   if (shopLoading || loading) {
+      return (
+         <div className="flex h-full items-center justify-center min-h-[400px]">
+            <div className="flex flex-col items-center gap-2">
+               <span className="material-symbols-outlined text-4xl text-primary animate-spin">progress_activity</span>
+               <p className="text-text-secondary">Loading orders...</p>
+            </div>
+         </div>
+      );
+   }
+
+   if (!currentShop && !isAllShopsMode) {
+      return (
+         <div className="flex h-full items-center justify-center min-h-[400px]">
+            <div className="flex flex-col items-center gap-4 text-center">
+               <div className="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center">
+                  <span className="material-symbols-outlined text-3xl text-amber-600">storefront</span>
+               </div>
+               <h2 className="text-xl font-bold text-text-main">No Shop Selected</h2>
+               <p className="text-text-secondary max-w-md">
+                  Please select a shop from the sidebar to view orders.
+               </p>
+               <a
+                  href="#/shops"
+                  className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg font-medium"
+               >
+                  Manage Shops
+               </a>
+            </div>
+         </div>
+      );
+   }
+
+   // ALL SHOPS MODE VIEW
+   if (isAllShopsMode) {
+      return (
+         <div className="max-w-[1400px] mx-auto flex flex-col gap-6">
+            {/* Header with Time Selector */}
+            <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+               <div>
+                  <div className="flex items-center gap-2 mb-1">
+                     <span className="px-3 py-1 text-xs font-semibold bg-gradient-to-r from-purple-100 to-indigo-100 text-purple-700 rounded-full border border-purple-200">
+                        📊 All Shops
+                     </span>
+                  </div>
+                  <h1 className="text-text-main text-3xl font-extrabold leading-tight tracking-tight">All Orders</h1>
+                  <p className="text-text-secondary text-base font-normal">View and manage orders from all shops</p>
+               </div>
+               <TimeSelector />
+            </div>
+
+            {/* Stats Bar */}
+            <div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl p-4 border border-purple-200 flex flex-wrap items-center gap-6">
+               <div className="flex items-center gap-2">
+                  <span className="material-symbols-outlined text-purple-600">receipt_long</span>
+                  <span className="text-sm font-medium text-purple-800">{allShopsStats.orderCount} orders</span>
+               </div>
+               <div className="flex items-center gap-2">
+                  <span className="material-symbols-outlined text-purple-600">storefront</span>
+                  <span className="text-sm font-medium text-purple-800">{allShopsStats.shopCount} shops</span>
+               </div>
+               <div className="flex items-center gap-2">
+                  <span className="material-symbols-outlined text-purple-600">payments</span>
+                  <span className="text-sm font-medium text-purple-800">{formatCurrency(allShopsStats.totalValue)} total</span>
+               </div>
+               <div className="flex items-center gap-2">
+                  <span className="material-symbols-outlined text-purple-600">local_shipping</span>
+                  <span className="text-sm font-medium text-purple-800">{allShopsStats.shippedCount} shipped</span>
+               </div>
+            </div>
+
+            {/* Filters */}
+            <div className="flex flex-wrap items-center gap-4 bg-white p-4 rounded-xl border border-border-light shadow-sm">
+               <div className="flex-1 min-w-[300px] relative">
+                  <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">search</span>
+                  <input
+                     className="w-full h-10 pl-10 pr-4 bg-white border border-border-light text-text-main rounded-lg focus:ring-1 focus:ring-primary focus:border-primary placeholder-text-secondary text-sm"
+                     placeholder="Search by order ID, customer, or shop..."
+                     type="text"
+                     value={searchTerm}
+                     onChange={(e) => setSearchTerm(e.target.value)}
+                  />
+               </div>
+               <div className="flex gap-3">
+                  <select
+                     value={selectedShopFilter}
+                     onChange={(e) => setSelectedShopFilter(e.target.value === 'all' ? 'all' : parseInt(e.target.value))}
+                     className="h-10 px-4 bg-white border border-border-light rounded-lg text-text-main text-sm font-medium shadow-sm focus:outline-none focus:border-primary"
+                  >
+                     <option value="all">All Shops</option>
+                     {shops.map(shop => (
+                        <option key={shop.id} value={shop.id}>{shop.name}</option>
+                     ))}
+                  </select>
+               </div>
+            </div>
+
+            {/* Table */}
+            <div className="flex flex-col border border-border-light rounded-xl bg-white overflow-hidden shadow-sm">
+               {filteredAllShopsOrders.length === 0 ? (
+                  <div className="p-12 text-center text-text-secondary">
+                     <span className="material-symbols-outlined text-4xl mb-2">receipt_long</span>
+                     <p>{allShopsOrders.length === 0 ? 'No orders yet. Import Etsy orders to get started.' : 'No matching orders found.'}</p>
+                  </div>
+               ) : (
+                  <>
+                     <div className="overflow-x-auto">
+                        <table className="w-full text-left border-collapse">
+                           <thead className="bg-slate-50 border-b border-border-light">
+                              <tr>
+                                 <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Shop</th>
+                                 <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Order ID</th>
+                                 <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Date</th>
+                                 <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Customer</th>
+                                 <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Products</th>
+                                 <th className="p-4 text-xs font-semibold text-text-secondary uppercase text-right">Total</th>
+                                 <th className="p-4 text-xs font-semibold text-text-secondary uppercase text-right">Fulfill Cost</th>
+                                 <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Status</th>
+                              </tr>
+                           </thead>
+                           <tbody className="divide-y divide-border-light">
+                              {paginatedAllShopsOrders.map(order => (
+                                 <tr key={`${order.shop_id}-${order.id}`} className="group hover:bg-slate-50 transition-colors">
+                                    <td className="p-4">
+                                       <span
+                                          className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium text-white"
+                                          style={{ backgroundColor: getShopColor(order.shop_id) }}
+                                       >
+                                          {order.shop_name}
+                                       </span>
+                                    </td>
+                                    <td className="p-4"><span className="text-primary font-semibold cursor-pointer hover:underline">{order.id}</span></td>
+                                    <td className="p-4 text-sm text-text-main">{order.date}</td>
+                                    <td className="p-4 text-sm font-medium text-text-main">{order.customer}</td>
+                                    <td className="p-4 text-sm text-text-secondary">{order.items}</td>
+                                    <td className="p-4 text-right text-sm font-bold text-text-main">{formatCurrency(order.total)}</td>
+                                    <td className="p-4 text-right text-sm">
+                                       {order.fulfillment_cost ? (
+                                          <div className="flex flex-col items-end">
+                                             <span className="font-medium text-text-main">{formatCurrency(order.fulfillment_cost)}</span>
+                                             {order.match_info && order.match_info.length > 0 && (
+                                                <div className="flex gap-1 mt-1 justify-end flex-wrap max-w-[120px]">
+                                                   {order.match_info.map((m, i) => (
+                                                      <span key={i} className="text-[10px] bg-green-100 text-green-700 px-1 rounded truncate max-w-full" title={m}>
+                                                         {m.replace('Verified: ', '')}
+                                                      </span>
+                                                   ))}
+                                                </div>
+                                             )}
+                                          </div>
+                                       ) : (
+                                          <span className="text-text-secondary text-xs italic">--</span>
+                                       )}
+                                    </td>
+                                    <td className="p-4">
+                                       <StatusBadge status={order.status} />
+                                    </td>
+                                 </tr>
+                              ))}
+                           </tbody>
+                        </table>
+                     </div>
+
+                     {/* Pagination */}
+                     <PaginationComponent
+                        currentPage={currentPage}
+                        totalPages={totalPagesAllShops}
+                        onPageChange={setCurrentPage}
+                     />
+                  </>
+               )}
+            </div>
+         </div>
+      );
+   }
+
+   // SINGLE SHOP MODE VIEW
+   return (
+      <div className="max-w-[1400px] mx-auto flex flex-col gap-6">
+         {/* Header with Time Selector */}
+         <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+            <div className="flex flex-col gap-1">
+               <div className="flex items-center gap-2 mb-1">
+                  <span className="px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full">
+                     {currentShop?.name}
+                  </span>
+               </div>
+               <h1 className="text-text-main text-3xl font-extrabold leading-tight tracking-tight">Order List</h1>
+               <p className="text-text-secondary text-base font-normal">Manage and track all order statuses</p>
+            </div>
+            <TimeSelector />
+         </div>
+
+         {/* Filters */}
+         <div className="flex flex-wrap items-center gap-4 bg-white p-4 rounded-xl border border-border-light shadow-sm">
+            <div className="flex-1 min-w-[300px] relative">
+               <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">search</span>
+               <input
+                  className="w-full h-10 pl-10 pr-4 bg-white border border-border-light text-text-main rounded-lg focus:ring-1 focus:ring-primary focus:border-primary placeholder-text-secondary text-sm"
+                  placeholder="Search by order ID, customer..."
+                  type="text"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+               />
+            </div>
+            <div className="flex gap-3">
+               <button className="h-10 px-4 bg-white border border-border-light rounded-lg text-text-main text-sm font-medium hover:bg-slate-50 flex items-center gap-2">
+                  <span className="material-symbols-outlined text-[20px]">filter_list</span>
+                  Filter
+               </button>
+            </div>
+         </div>
+
+         {/* Table */}
+         <div className="flex flex-col border border-border-light rounded-xl bg-white overflow-hidden shadow-sm">
+            {filteredOrders.length === 0 ? (
+               <div className="p-12 text-center text-text-secondary">
+                  <span className="material-symbols-outlined text-4xl mb-2">receipt_long</span>
+                  <p>{orders.length === 0 ? 'No orders yet. Import Etsy orders to get started.' : 'No matching orders found.'}</p>
+               </div>
+            ) : (
+               <>
+                  <div className="overflow-x-auto">
+                     <table className="w-full text-left border-collapse">
+                        <thead className="bg-slate-50 border-b border-border-light">
+                           <tr>
+                              <th className="p-4 w-12"><input type="checkbox" className="rounded border-gray-300 text-primary focus:ring-primary" /></th>
+                              <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Order ID</th>
+                              <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Date</th>
+                              <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Customer</th>
+                              <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Products</th>
+                              <th className="p-4 text-xs font-semibold text-text-secondary uppercase text-right">Total</th>
+                              <th className="p-4 text-xs font-semibold text-text-secondary uppercase text-right">Fulfill Cost</th>
+                              <th className="p-4 text-xs font-semibold text-text-secondary uppercase">Status</th>
+                              <th className="p-4 w-12"></th>
+                           </tr>
+                        </thead>
+                        <tbody className="divide-y divide-border-light">
+                           {paginatedOrders.map(order => (
+                              <tr key={order.id} className="group hover:bg-slate-50 transition-colors">
+                                 <td className="p-4"><input type="checkbox" className="rounded border-gray-300 text-primary focus:ring-primary" /></td>
+                                 <td className="p-4"><span className="text-primary font-semibold cursor-pointer hover:underline">{order.id}</span></td>
+                                 <td className="p-4 text-sm text-text-main">{order.date}</td>
+                                 <td className="p-4 text-sm font-medium text-text-main">{order.customer}</td>
+                                 <td className="p-4 text-sm text-text-secondary">{order.items}</td>
+                                 <td className="p-4 text-right text-sm font-bold text-text-main">{formatCurrency(order.total)}</td>
+                                 <td className="p-4 text-right text-sm">
+                                    {order.fulfillment_cost ? (
+                                       <div className="flex flex-col items-end">
+                                          <span className="font-medium text-text-main">{formatCurrency(order.fulfillment_cost)}</span>
+                                          {order.match_info && order.match_info.length > 0 && (
+                                             <div className="flex gap-1 mt-1 justify-end flex-wrap max-w-[120px]">
+                                                {order.match_info.map((m, i) => (
+                                                   <span key={i} className="text-[10px] bg-green-100 text-green-700 px-1 rounded truncate max-w-full" title={m}>
+                                                      {m.replace('Verified: ', '')}
+                                                   </span>
+                                                ))}
+                                             </div>
+                                          )}
+                                       </div>
+                                    ) : (
+                                       <span className="text-text-secondary text-xs italic">--</span>
+                                    )}
+                                 </td>
+                                 <td className="p-4">
+                                    <StatusBadge status={order.status} />
+                                 </td>
+                                 <td className="p-4">
+                                    <button className="text-text-secondary hover:text-primary transition-colors">
+                                       <span className="material-symbols-outlined">more_vert</span>
+                                    </button>
+                                 </td>
+                              </tr>
+                           ))}
+                        </tbody>
+                     </table>
+                  </div>
+
+                  {/* Pagination */}
+                  <PaginationComponent
+                     currentPage={currentPage}
+                     totalPages={totalPagesOrders}
+                     onPageChange={setCurrentPage}
+                  />
+               </>
+            )}
+         </div>
+      </div>
+   );
+};
+
+const StatusBadge = ({ status }: { status: string }) => {
+   const getStatusStyle = (s: string) => {
+      switch (s) {
+         case 'Shipped': return 'bg-green-100 text-green-800';
+         case 'Unshipped': return 'bg-yellow-100 text-yellow-800';
+         default: return 'bg-slate-100 text-slate-800';
+      }
+   };
+
+   return (
+      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusStyle(status)}`}>
+         {status}
+      </span>
+   );
+};
+
+export default Orders;

frontend/pages/ProfitAnalytics.tsx

@@ -0,0 +1,938 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { fetchProfitData, fetchAllShopsProfitData, fetchAllShopsSummary, fetchShopSummary } from '../services/api';
+import { ProfitData, AllShopsProfitData, AllShopsSummaryResponse, ShopSummaryResponse } from '../types';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, Legend, LineChart, Line } from 'recharts';
+import { useShop } from '../contexts/ShopContext';
+
+// Color palette for shops
+const SHOP_COLORS = ['#6366f1', '#8b5cf6', '#a855f7', '#d946ef', '#ec4899', '#f43f5e', '#f97316', '#eab308'];
+
+const getShopColor = (index: number): string => SHOP_COLORS[index % SHOP_COLORS.length];
+
+// Time period presets - Main buttons (same as Dashboard)
+const MAIN_PRESETS = [
+    { label: 'Today', value: 'today' },
+    { label: 'Yesterday', value: 'yesterday' },
+    { label: 'Last 7 days', value: '7d' },
+    { label: 'Last 30 days', value: '30d' },
+    { label: 'All Time', value: 'all' },
+];
+
+// Quick select options in custom picker
+const QUICK_SELECT_OPTIONS = [
+    { label: 'Last 90 days', value: '90d' },
+    { label: 'This Year', value: 'ytd' },
+    { label: 'Last Year', value: 'lastyear' },
+];
+
+// Helper to get date range from preset
+const getDateRangeFromPreset = (preset: string): { startDate: string; endDate: string } | null => {
+    const today = new Date();
+    const formatDate = (d: Date) => d.toISOString().split('T')[0];
+
+    switch (preset) {
+        case 'today':
+            return { startDate: formatDate(today), endDate: formatDate(today) };
+        case 'yesterday': {
+            const yesterday = new Date(today);
+            yesterday.setDate(yesterday.getDate() - 1);
+            return { startDate: formatDate(yesterday), endDate: formatDate(yesterday) };
+        }
+        case '7d': {
+            const start = new Date(today);
+            start.setDate(start.getDate() - 6);
+            return { startDate: formatDate(start), endDate: formatDate(today) };
+        }
+        case '30d': {
+            const start = new Date(today);
+            start.setDate(start.getDate() - 29);
+            return { startDate: formatDate(start), endDate: formatDate(today) };
+        }
+        case '90d': {
+            const start = new Date(today);
+            start.setDate(start.getDate() - 89);
+            return { startDate: formatDate(start), endDate: formatDate(today) };
+        }
+        case 'ytd': {
+            const start = new Date(today.getFullYear(), 0, 1);
+            return { startDate: formatDate(start), endDate: formatDate(today) };
+        }
+        case 'lastyear': {
+            const start = new Date(today.getFullYear() - 1, 0, 1);
+            const end = new Date(today.getFullYear() - 1, 11, 31);
+            return { startDate: formatDate(start), endDate: formatDate(end) };
+        }
+        case 'all':
+        default:
+            return null;
+    }
+};
+
+// Get display days for trend chart
+const getTrendDays = (preset: string): number => {
+    switch (preset) {
+        case 'today': return 1;
+        case 'yesterday': return 1;
+        case '7d': return 7;
+        case '30d': return 30;
+        case '90d': return 90;
+        case 'ytd': return Math.ceil((new Date().getTime() - new Date(new Date().getFullYear(), 0, 1).getTime()) / (1000 * 60 * 60 * 24));
+        case 'lastyear': return 365;
+        case 'all':
+        default: return 30; // Default to 30 days for all time
+    }
+};
+
+const ProfitAnalytics: React.FC = () => {
+    const { currentShop, isLoading: shopLoading, isAllShopsMode, shops } = useShop();
+    const [data, setData] = useState<ProfitData[]>([]);
+    const [allShopsData, setAllShopsData] = useState<AllShopsProfitData[]>([]);
+    const [allShopsSummary, setAllShopsSummary] = useState<AllShopsSummaryResponse | null>(null);
+    const [singleShopSummary, setSingleShopSummary] = useState<ShopSummaryResponse | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [selectedShopFilter, setSelectedShopFilter] = useState<number | 'all'>('all');
+
+    // Time period state
+    const [selectedPreset, setSelectedPreset] = useState('30d');
+    const [customStartDate, setCustomStartDate] = useState('');
+    const [customEndDate, setCustomEndDate] = useState('');
+    const [showCustomPicker, setShowCustomPicker] = useState(false);
+
+    // Pagination & Search state
+    const [ordersSearchTerm, setOrdersSearchTerm] = useState('');
+    const [ordersPage, setOrdersPage] = useState(1);
+    const ordersPerPage = 15;
+
+    // Load data when preset changes
+    useEffect(() => {
+        const loadData = async () => {
+            setLoading(true);
+            try {
+                let startDate: string | undefined;
+                let endDate: string | undefined;
+
+                if (selectedPreset === 'custom' && customStartDate && customEndDate) {
+                    startDate = customStartDate;
+                    endDate = customEndDate;
+                } else if (selectedPreset !== 'all') {
+                    const range = getDateRangeFromPreset(selectedPreset);
+                    if (range) {
+                        startDate = range.startDate;
+                        endDate = range.endDate;
+                    }
+                }
+
+                if (isAllShopsMode) {
+                    const [profitData, summaryData] = await Promise.all([
+                        fetchAllShopsProfitData(),
+                        fetchAllShopsSummary(startDate, endDate)
+                    ]);
+                    setAllShopsData(profitData);
+                    setAllShopsSummary(summaryData);
+                    setData([]);
+                    setSingleShopSummary(null);
+                } else if (currentShop) {
+                    const [profitResult, summaryResult] = await Promise.all([
+                        fetchProfitData(currentShop.id),
+                        fetchShopSummary(currentShop.id, startDate, endDate)
+                    ]);
+                    setData(profitResult);
+                    setSingleShopSummary(summaryResult);
+                    setAllShopsData([]);
+                    setAllShopsSummary(null);
+                } else {
+                    setData([]);
+                    setAllShopsData([]);
+                    setAllShopsSummary(null);
+                    setSingleShopSummary(null);
+                }
+            } catch (e) {
+                console.error("Failed to load profit data", e);
+            } finally {
+                setLoading(false);
+            }
+        };
+        loadData();
+    }, [currentShop, isAllShopsMode, selectedPreset, customStartDate, customEndDate]);
+
+    // Reset pagination when filter changes
+    useEffect(() => {
+        setOrdersPage(1);
+    }, [selectedShopFilter, ordersSearchTerm, currentShop]);
+
+    const formatCurrency = (val: number) => `$${val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+
+    // Get margin class without emoji
+    const getMarginClass = (margin: number) => {
+        if (margin >= 30) return 'text-green-600 bg-green-50';
+        if (margin >= 15) return 'text-yellow-600 bg-yellow-50';
+        return 'text-red-600 bg-red-50';
+    };
+
+    const handlePresetChange = (preset: string) => {
+        setSelectedPreset(preset);
+        if (preset !== 'custom') {
+            setShowCustomPicker(false);
+        }
+    };
+
+    const handleQuickSelect = (value: string) => {
+        setSelectedPreset(value);
+        setShowCustomPicker(false);
+    };
+
+    const applyCustomDates = () => {
+        if (customStartDate && customEndDate) {
+            setSelectedPreset('custom');
+            setShowCustomPicker(false);
+        }
+    };
+
+    // Filter logic for single shop mode
+    const filteredSingleShopData = useMemo(() => {
+        let items = data;
+
+        // Filter by date first
+        let startDate: Date | null = null;
+        let endDate: Date | null = null;
+
+        if (selectedPreset === 'custom' && customStartDate && customEndDate) {
+            startDate = new Date(customStartDate);
+            endDate = new Date(customEndDate);
+        } else if (selectedPreset !== 'all') {
+            const range = getDateRangeFromPreset(selectedPreset);
+            if (range) {
+                startDate = new Date(range.startDate);
+                endDate = new Date(range.endDate);
+            }
+        }
+
+        if (startDate && endDate) {
+            items = items.filter(order => {
+                if (!order.sale_date) return false;
+                const orderDate = new Date(order.sale_date);
+                return orderDate >= startDate! && orderDate <= endDate!;
+            });
+        }
+
+        // Then filter by search term
+        if (ordersSearchTerm) {
+            const term = ordersSearchTerm.toLowerCase();
+            items = items.filter(order =>
+                order.order_id.toLowerCase().includes(term) ||
+                order.customer?.toLowerCase().includes(term)
+            );
+        }
+
+        return items;
+    }, [data, selectedPreset, customStartDate, customEndDate, ordersSearchTerm]);
+
+    // Filter logic for all shops mode
+    const filteredAllShopsData = useMemo(() => {
+        let items = allShopsData;
+
+        // Date filter
+        let startDate: Date | null = null;
+        let endDate: Date | null = null;
+
+        if (selectedPreset === 'custom' && customStartDate && customEndDate) {
+            startDate = new Date(customStartDate);
+            endDate = new Date(customEndDate);
+        } else if (selectedPreset !== 'all') {
+            const range = getDateRangeFromPreset(selectedPreset);
+            if (range) {
+                startDate = new Date(range.startDate);
+                endDate = new Date(range.endDate);
+            }
+        }
+
+        if (startDate && endDate) {
+            items = items.filter(order => {
+                if (!order.sale_date) return false;
+                const orderDate = new Date(order.sale_date);
+                return orderDate >= startDate! && orderDate <= endDate!;
+            });
+        }
+
+        // Shop and Search filter
+        return items.filter(order => {
+            const matchesShop = selectedShopFilter === 'all' || order.shop_id === selectedShopFilter;
+            const matchesSearch = ordersSearchTerm === '' ||
+                order.order_id.toLowerCase().includes(ordersSearchTerm.toLowerCase()) ||
+                order.customer?.toLowerCase().includes(ordersSearchTerm.toLowerCase()) ||
+                order.shop_name?.toLowerCase().includes(ordersSearchTerm.toLowerCase());
+            return matchesShop && matchesSearch;
+        });
+    }, [allShopsData, selectedPreset, customStartDate, customEndDate, selectedShopFilter, ordersSearchTerm]);
+
+    // Helpers to access paginated data depending on mode
+    const currentTableData = isAllShopsMode ? filteredAllShopsData : filteredSingleShopData;
+    const totalPages = Math.ceil(currentTableData.length / ordersPerPage);
+    const paginatedData = useMemo(() => {
+        const startIndex = (ordersPage - 1) * ordersPerPage;
+        return currentTableData.slice(startIndex, startIndex + ordersPerPage);
+    }, [currentTableData, ordersPage]);
+
+    // Single shop chart data
+    const singleShopChartData = useMemo(() => {
+        const grouped = filteredSingleShopData.reduce((acc, curr) => {
+            const date = curr.sale_date?.substring(5) || 'N/A';
+            if (!acc[date]) acc[date] = { name: date, revenue: 0, profit: 0, cost: 0 };
+            acc[date].revenue += curr.revenue;
+            acc[date].profit += curr.profit;
+            acc[date].cost += curr.cost;
+            return acc;
+        }, {} as Record<string, any>);
+
+        // Show max 30 points or all filtered points
+        const keys = Object.keys(grouped).sort();
+        return keys.map(k => grouped[k]);
+    }, [filteredSingleShopData]);
+
+    // Define TimeSelector Component here or reuse
+    const TimeSelector = () => (
+        <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2 flex-wrap">
+                {MAIN_PRESETS.map((preset) => (
+                    <button
+                        key={preset.value}
+                        onClick={() => handlePresetChange(preset.value)}
+                        className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-all ${selectedPreset === preset.value
+                                ? 'bg-primary text-white shadow-md'
+                                : 'bg-white border border-border-light text-text-main hover:bg-slate-50'
+                            }`}
+                    >
+                        {preset.label}
+                    </button>
+                ))}
+                <div className="relative">
+                    <button
+                        onClick={() => setShowCustomPicker(!showCustomPicker)}
+                        className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-all flex items-center gap-1 ${selectedPreset === 'custom' || QUICK_SELECT_OPTIONS.some(o => o.value === selectedPreset)
+                                ? 'bg-primary text-white shadow-md'
+                                : 'bg-white border border-border-light text-text-main hover:bg-slate-50'
+                            }`}
+                    >
+                        <span className="material-symbols-outlined text-[16px]">calendar_month</span>
+                        {selectedPreset === 'custom' ? 'Custom' :
+                            QUICK_SELECT_OPTIONS.find(o => o.value === selectedPreset)?.label || 'More'}
+                    </button>
+
+                    {/* Custom Picker Dropdown */}
+                    {showCustomPicker && (
+                        <div className="absolute right-0 top-full mt-2 bg-white border border-border-light rounded-xl shadow-lg p-4 z-50 min-w-[300px]">
+                            <p className="text-xs font-semibold text-text-secondary uppercase mb-2">Quick Select</p>
+                            <div className="flex flex-wrap gap-2 mb-4">
+                                {QUICK_SELECT_OPTIONS.map((opt) => (
+                                    <button
+                                        key={opt.value}
+                                        onClick={() => handleQuickSelect(opt.value)}
+                                        className="px-3 py-1.5 text-sm bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors"
+                                    >
+                                        {opt.label}
+                                    </button>
+                                ))}
+                            </div>
+                            <p className="text-xs font-semibold text-text-secondary uppercase mb-2">Custom Range</p>
+                            <div className="flex items-center gap-2 mb-3">
+                                <input
+                                    type="date"
+                                    value={customStartDate}
+                                    onChange={(e) => setCustomStartDate(e.target.value)}
+                                    className="flex-1 px-2 py-1.5 text-sm border border-border-light rounded-lg focus:outline-none focus:border-primary"
+                                />
+                                <span className="text-text-secondary text-sm">to</span>
+                                <input
+                                    type="date"
+                                    value={customEndDate}
+                                    onChange={(e) => setCustomEndDate(e.target.value)}
+                                    className="flex-1 px-2 py-1.5 text-sm border border-border-light rounded-lg focus:outline-none focus:border-primary"
+                                />
+                            </div>
+                            <button
+                                onClick={applyCustomDates}
+                                disabled={!customStartDate || !customEndDate}
+                                className="w-full py-2 bg-primary text-white text-sm font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90"
+                            >
+                                Apply
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+
+    if (shopLoading || loading) {
+        return (
+            <div className="flex h-full items-center justify-center">
+                <div className="flex flex-col items-center gap-2">
+                    <span className="material-symbols-outlined text-4xl text-primary animate-spin">progress_activity</span>
+                    <p className="text-text-secondary">Loading financial data...</p>
+                </div>
+            </div>
+        );
+    }
+
+    if (!currentShop && !isAllShopsMode) {
+        return (
+            <div className="flex h-full items-center justify-center min-h-[400px]">
+                <div className="flex flex-col items-center gap-4 text-center">
+                    <div className="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center">
+                        <span className="material-symbols-outlined text-3xl text-amber-600">storefront</span>
+                    </div>
+                    <h2 className="text-xl font-bold text-text-main">No Shop Selected</h2>
+                    <p className="text-text-secondary max-w-md">
+                        Please select a shop from the sidebar to view profit analytics.
+                    </p>
+                    <a
+                        href="#/shops"
+                        className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg font-medium"
+                    >
+                        Manage Shops
+                    </a>
+                </div>
+            </div>
+        );
+    }
+
+    // ALL SHOPS MODE VIEW
+    if (isAllShopsMode && allShopsSummary) {
+        const { aggregates: agg, shops: shopList, changes } = allShopsSummary;
+
+        // Shop profit comparison data
+        const profitComparisonData = shopList.map((shop, idx) => ({
+            name: shop.shop_name.length > 15 ? shop.shop_name.substring(0, 15) + '...' : shop.shop_name,
+            profit: shop.total_profit,
+            revenue: shop.total_revenue,
+            cost: shop.total_cost,
+            margin: shop.profit_margin,
+            fill: getShopColor(idx)
+        }));
+
+        // Unique shop names for multi-line chart
+        // Need to refilter profit data based on date for chart
+        const itemsForChart = allShopsData.filter(order => {
+            if (!order.sale_date) return false;
+            let startDate: Date | null = null;
+            let endDate: Date | null = null;
+
+            if (selectedPreset === 'custom' && customStartDate && customEndDate) {
+                startDate = new Date(customStartDate);
+                endDate = new Date(customEndDate);
+            } else if (selectedPreset !== 'all') {
+                const range = getDateRangeFromPreset(selectedPreset);
+                if (range) {
+                    startDate = new Date(range.startDate);
+                    endDate = new Date(range.endDate);
+                }
+            }
+            if (!startDate || !endDate) return true;
+            const orderDate = new Date(order.sale_date);
+            return orderDate >= startDate && orderDate <= endDate;
+        });
+
+        const multiLineTrendData = (() => {
+            const dateGroups: Record<string, Record<string, number>> = {};
+            itemsForChart.forEach(order => {
+                const date = order.sale_date?.toString().substring(5) || 'N/A';
+                if (!dateGroups[date]) {
+                    dateGroups[date] = { name: date };
+                }
+                const shopKey = order.shop_name.replace(/\s+/g, '_');
+                dateGroups[date][shopKey] = (dateGroups[date][shopKey] || 0) + order.profit;
+            });
+            const sortedDates = Object.keys(dateGroups).sort();
+            const maxPoints = Math.min(sortedDates.length, 30);
+            return sortedDates.slice(-maxPoints).map(date => dateGroups[date]);
+        })();
+
+        const shopNames = [...new Set(itemsForChart.map(o => o.shop_name))];
+
+        return (
+            <div className="max-w-[1400px] mx-auto flex flex-col gap-6">
+                {/* Header */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                    <div>
+                        <div className="flex items-center gap-2 mb-1">
+                            <span className="px-3 py-1 text-xs font-semibold bg-gradient-to-r from-purple-100 to-indigo-100 text-purple-700 rounded-full border border-purple-200">
+                                📊 All Shops
+                            </span>
+                        </div>
+                        <h2 className="text-3xl font-black tracking-tight mb-1 text-text-main">Multi-Shop Profit Analytics</h2>
+                        <p className="text-text-secondary">Compare revenue, costs, and profit across all your shops.</p>
+                    </div>
+
+                    {/* Time Period Selector */}
+                    <TimeSelector />
+                </div>
+
+                {/* Aggregated KPI Cards with Real Change Indicator */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <KpiCard title="Total Revenue" value={formatCurrency(agg.total_revenue)} icon="payments" color="primary" subtitle={`${agg.shop_count} shops`} changePercent={changes?.revenue_change} />
+                    <KpiCard title="Total Costs" value={formatCurrency(agg.total_cost)} icon="shopping_bag" color="orange" subtitle={`Fulfillment costs`} changePercent={changes?.cost_change} />
+                    <KpiCard title="Total Profit" value={formatCurrency(agg.total_profit)} icon="savings" color="emerald" subtitle={`${agg.overall_margin}% margin`} changePercent={changes?.profit_change} />
+                    <KpiCard title="Orders Processed" value={agg.total_orders.toString()} icon="receipt_long" color="blue" subtitle={`${agg.total_fulfilled} fulfilled`} changePercent={changes?.orders_change} />
+                </div>
+
+                {/* Profit Trend by Shop */}
+                <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm">
+                    <h3 className="text-lg font-bold text-text-main mb-2">Profit Trend by Shop</h3>
+                    <div className="h-[300px]">
+                        {multiLineTrendData.length > 0 ? (
+                            <ResponsiveContainer width="100%" height="100%">
+                                <LineChart data={multiLineTrendData}>
+                                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                                    <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} />
+                                    <YAxis axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} />
+                                    <Tooltip />
+                                    <Legend />
+                                    {shopNames.map((name, idx) => (
+                                        <Line
+                                            key={name}
+                                            type="monotone"
+                                            dataKey={name.replace(/\s+/g, '_')}
+                                            stroke={getShopColor(idx)}
+                                            strokeWidth={2}
+                                            dot={false}
+                                            name={name}
+                                        />
+                                    ))}
+                                </LineChart>
+                            </ResponsiveContainer>
+                        ) : (
+                            <div className="flex items-center justify-center h-full text-text-secondary">
+                                <p>No trend data available for selected period</p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* Shop Margin Indicators */}
+                <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm">
+                    <h3 className="text-lg font-bold text-text-main mb-4">Shop Profit Margins</h3>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                        {shopList.map((shop, idx) => {
+                            const marginClass = getMarginClass(shop.profit_margin);
+                            return (
+                                <div key={shop.shop_id} className="flex items-center gap-3 p-3 rounded-lg bg-slate-50 border border-border-light">
+                                    <div
+                                        className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm"
+                                        style={{ backgroundColor: getShopColor(idx) }}
+                                    >
+                                        {shop.shop_name.charAt(0).toUpperCase()}
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                        <p className="text-sm font-medium text-text-main truncate">{shop.shop_name}</p>
+                                        <p className="text-xs text-text-secondary">{formatCurrency(shop.total_profit)}</p>
+                                    </div>
+                                    <div className={`px-2.5 py-1 rounded-lg text-sm font-bold ${marginClass}`}>
+                                        {shop.profit_margin}%
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+
+                {/* Charts Row */}
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    {/* Profit Comparison Bar Chart */}
+                    <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm min-h-[400px]">
+                        <h3 className="text-lg font-bold text-text-main mb-6">Shop Profit Ranking</h3>
+                        <div className="h-[320px]">
+                            {profitComparisonData.length > 0 ? (
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <BarChart data={profitComparisonData} layout="vertical" margin={{ left: 20 }}>
+                                        <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} stroke="#e2e8f0" />
+                                        <XAxis type="number" axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} tickFormatter={(val) => `$${(val / 1000).toFixed(0)}k`} />
+                                        <YAxis type="category" dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} width={120} />
+                                        <Tooltip formatter={(val: number) => formatCurrency(val)} />
+                                        <Bar dataKey="profit" radius={[0, 4, 4, 0]} name="Profit" />
+                                    </BarChart>
+                                </ResponsiveContainer>
+                            ) : (
+                                <div className="flex items-center justify-center h-full text-text-secondary">
+                                    <p>No data available</p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Revenue vs Cost Comparison */}
+                    <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm min-h-[400px]">
+                        <h3 className="text-lg font-bold text-text-main mb-6">Revenue vs Cost by Shop</h3>
+                        <div className="h-[320px]">
+                            {profitComparisonData.length > 0 ? (
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <BarChart data={profitComparisonData}>
+                                        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                                        <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 10 }} angle={-45} textAnchor="end" height={80} />
+                                        <YAxis axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} tickFormatter={(val) => `$${(val / 1000).toFixed(0)}k`} />
+                                        <Tooltip formatter={(val: number) => formatCurrency(val)} />
+                                        <Legend />
+                                        <Bar dataKey="revenue" fill="#6366f1" radius={[4, 4, 0, 0]} name="Revenue" />
+                                        <Bar dataKey="cost" fill="#f97316" radius={[4, 4, 0, 0]} name="Cost" />
+                                    </BarChart>
+                                </ResponsiveContainer>
+                            ) : (
+                                <div className="flex items-center justify-center h-full text-text-secondary">
+                                    <p>No data available</p>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                {/* Detail Table */}
+                <DetailTable
+                    data={paginatedData}
+                    totalOrders={currentTableData.length}
+                    page={ordersPage}
+                    setPage={setOrdersPage}
+                    totalPages={totalPages}
+                    searchTerm={ordersSearchTerm}
+                    setSearchTerm={setOrdersSearchTerm}
+                    shops={shops}
+                    selectedShopFilter={selectedShopFilter}
+                    setSelectedShopFilter={setSelectedShopFilter}
+                    isAllShops={true}
+                    formatCurrency={formatCurrency}
+                    getMarginClass={getMarginClass}
+                    getShopColor={getShopColor}
+                    ordersPerPage={ordersPerPage}
+                />
+            </div>
+        );
+    }
+
+    // SINGLE SHOP MODE VIEW
+    // Ensure we have data
+    const aggregates = singleShopSummary?.aggregates || {
+        total_revenue: 0,
+        total_cost: 0,
+        total_profit: 0,
+        total_orders: 0,
+        fulfillment_rate: 0,
+        profit_margin: 0,
+        total_fulfilled: 0
+    };
+    const shopChanges = singleShopSummary?.changes;
+
+    return (
+        <div className="max-w-[1400px] mx-auto flex flex-col gap-6">
+            {/* Header */}
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                <div>
+                    <div className="flex items-center gap-2 mb-1">
+                        <span className="px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full">
+                            {currentShop?.name}
+                        </span>
+                    </div>
+                    <h2 className="text-3xl font-black tracking-tight mb-1 text-text-main">Revenue & Profit Analytics</h2>
+                    <p className="text-text-secondary">Track your shop's net profit after fulfillment costs.</p>
+                </div>
+                {/* Time Period Selector */}
+                <div className="flex items-center gap-3">
+                    <TimeSelector />
+                    <button className="flex items-center justify-center gap-2 h-10 px-5 bg-primary text-white rounded-lg text-sm font-bold shadow-md hover:bg-primary-dark transition-colors">
+                        <span className="material-symbols-outlined text-[20px]">download</span>
+                        <span>Export</span>
+                    </button>
+                </div>
+            </div>
+
+            {/* KPI Cards */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                <KpiCard title="Total Revenue" value={formatCurrency(aggregates.total_revenue)} icon="payments" color="primary" changePercent={shopChanges?.revenue_change} />
+                <KpiCard title="Total Costs" value={formatCurrency(aggregates.total_cost)} icon="shopping_bag" color="orange" changePercent={shopChanges?.cost_change} />
+                <KpiCard title="Net Profit" value={formatCurrency(aggregates.total_profit)} icon="savings" color="emerald" changePercent={shopChanges?.profit_change} />
+                <KpiCard title="Profit Margin" value={`${aggregates.profit_margin}%`} icon="percent" color="blue" changePercent={shopChanges?.profit_change} />
+            </div>
+
+            {/* Charts Row */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm min-h-[400px]">
+                    <h3 className="text-lg font-bold text-text-main mb-6">Profit Trend</h3>
+                    <div className="h-[300px]">
+                        {singleShopChartData.length > 0 ? (
+                            <ResponsiveContainer width="100%" height="100%">
+                                <AreaChart data={singleShopChartData}>
+                                    <defs>
+                                        <linearGradient id="colorProfit" x1="0" y1="0" x2="0" y2="1">
+                                            <stop offset="5%" stopColor="#10b981" stopOpacity={0.2} />
+                                            <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                                        </linearGradient>
+                                    </defs>
+                                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                                    <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} dy={10} />
+                                    <YAxis axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} />
+                                    <Tooltip contentStyle={{ borderRadius: '8px' }} />
+                                    <Area type="monotone" dataKey="profit" stroke="#10b981" strokeWidth={3} fillOpacity={1} fill="url(#colorProfit)" />
+                                </AreaChart>
+                            </ResponsiveContainer>
+                        ) : (
+                            <div className="flex items-center justify-center h-full text-text-secondary">
+                                <p>No data available</p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm min-h-[400px]">
+                    <h3 className="text-lg font-bold text-text-main mb-6">Revenue vs Cost</h3>
+                    <div className="h-[300px]">
+                        {singleShopChartData.length > 0 ? (
+                            <ResponsiveContainer width="100%" height="100%">
+                                <BarChart data={singleShopChartData}>
+                                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                                    <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} dy={10} />
+                                    <YAxis axisLine={false} tickLine={false} tick={{ fill: '#64748b', fontSize: 12 }} />
+                                    <Tooltip cursor={{ fill: 'transparent' }} contentStyle={{ borderRadius: '8px' }} />
+                                    <Legend />
+                                    <Bar dataKey="revenue" fill="#137fec" radius={[4, 4, 0, 0]} name="Revenue" />
+                                    <Bar dataKey="cost" fill="#f97316" radius={[4, 4, 0, 0]} name="Cost" />
+                                </BarChart>
+                            </ResponsiveContainer>
+                        ) : (
+                            <div className="flex items-center justify-center h-full text-text-secondary">
+                                <p>No data available</p>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Detail Table */}
+            <DetailTable
+                data={paginatedData}
+                totalOrders={currentTableData.length}
+                page={ordersPage}
+                setPage={setOrdersPage}
+                totalPages={totalPages}
+                searchTerm={ordersSearchTerm}
+                setSearchTerm={setOrdersSearchTerm}
+                shops={shops} // Not needed for single shop filter but consistent API
+                selectedShopFilter={null}
+                setSelectedShopFilter={null}
+                isAllShops={false}
+                formatCurrency={formatCurrency}
+                getMarginClass={getMarginClass}
+                getShopColor={getShopColor}
+                ordersPerPage={ordersPerPage}
+            />
+        </div>
+    );
+};
+
+interface KpiCardProps {
+    title: string;
+    value: string;
+    icon: string;
+    color?: string;
+    subtitle?: string;
+    changePercent?: number | null;
+}
+
+const KpiCard = ({ title, value, icon, color = "primary", subtitle, changePercent }: KpiCardProps) => {
+    const colorMap: any = {
+        primary: "text-primary bg-blue-50",
+        orange: "text-orange-600 bg-orange-50",
+        emerald: "text-emerald-600 bg-emerald-50",
+        blue: "text-blue-600 bg-blue-50"
+    };
+
+    return (
+        <div className="bg-white rounded-xl p-5 border border-border-light shadow-sm flex flex-col gap-1">
+            <div className="flex items-center justify-between">
+                <p className="text-text-secondary text-sm font-medium">{title}</p>
+                <div className={`p-1.5 rounded-md ${colorMap[color]}`}>
+                    <span className="material-symbols-outlined text-[20px] block">{icon}</span>
+                </div>
+            </div>
+            <p className="text-2xl font-bold tracking-tight text-text-main mt-1">{value}</p>
+            {subtitle && <p className="text-xs text-text-secondary">{subtitle}</p>}
+            {changePercent !== undefined && changePercent !== null && (
+                <div className={`flex items-center gap-1 mt-1 text-xs font-medium ${changePercent >= 0 ? 'text-green-600' : 'text-red-500'}`}>
+                    <span className="material-symbols-outlined text-[14px]">
+                        {changePercent >= 0 ? 'trending_up' : 'trending_down'}
+                    </span>
+                    <span>{changePercent >= 0 ? '+' : ''}{changePercent.toFixed(1)}% vs previous period</span>
+                </div>
+            )}
+        </div>
+    )
+}
+
+const DetailTable = ({
+    data,
+    totalOrders,
+    page,
+    setPage,
+    totalPages,
+    searchTerm,
+    setSearchTerm,
+    shops,
+    selectedShopFilter,
+    setSelectedShopFilter,
+    isAllShops,
+    formatCurrency,
+    getMarginClass,
+    getShopColor,
+    ordersPerPage
+}: any) => {
+    return (
+        <div className="bg-white rounded-xl border border-border-light shadow-sm overflow-hidden">
+            <div className="p-6 border-b border-border-light flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-slate-50">
+                <div>
+                    <h3 className="text-lg font-bold text-text-main">Order Financial Details</h3>
+                    <p className="text-sm text-text-secondary">Showing {totalOrders} orders</p>
+                </div>
+                <div className="flex flex-wrap items-center gap-3">
+                    {/* Search Input */}
+                    <div className="relative">
+                        <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary text-[18px]">search</span>
+                        <input
+                            type="text"
+                            placeholder="Search orders..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="h-10 pl-9 pr-4 bg-white border border-border-light rounded-lg text-text-main text-sm focus:outline-none focus:border-primary w-48"
+                        />
+                    </div>
+                    {isAllShops && (
+                        <select
+                            value={selectedShopFilter}
+                            onChange={(e) => setSelectedShopFilter(e.target.value === 'all' ? 'all' : parseInt(e.target.value))}
+                            className="h-10 px-4 bg-white border border-border-light rounded-lg text-text-main text-sm font-medium shadow-sm focus:outline-none focus:border-primary"
+                        >
+                            <option value="all">All Shops</option>
+                            {shops.map((shop: any) => (
+                                <option key={shop.id} value={shop.id}>{shop.name}</option>
+                            ))}
+                        </select>
+                    )}
+                </div>
+            </div>
+            {data.length === 0 ? (
+                <div className="p-12 text-center text-text-secondary">
+                    <span className="material-symbols-outlined text-4xl mb-2">receipt_long</span>
+                    <p>No order data available for selected period.</p>
+                </div>
+            ) : (
+                <>
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-sm text-left">
+                            <thead className="text-xs text-text-secondary uppercase bg-slate-50 border-b border-border-light">
+                                <tr>
+                                    {isAllShops && <th className="px-6 py-4 font-semibold">Shop</th>}
+                                    <th className="px-6 py-4 font-semibold">Order ID</th>
+                                    <th className="px-6 py-4 font-semibold">Date</th>
+                                    <th className="px-6 py-4 font-semibold">Customer</th>
+                                    <th className="px-6 py-4 font-semibold text-right">Revenue</th>
+                                    <th className="px-6 py-4 font-semibold text-right">Cost</th>
+                                    <th className="px-6 py-4 font-semibold text-right">Profit</th>
+                                    <th className="px-6 py-4 font-semibold text-center">Margin</th>
+                                    <th className="px-6 py-4 font-semibold text-center">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-border-light">
+                                {data.map((row: any) => {
+                                    const shopIdx = isAllShops ? shops.findIndex((s: any) => s.id === row.shop_id) : 0;
+                                    const marginClass = getMarginClass(row.margin);
+                                    return (
+                                        <tr key={`${row.shop_id || 'single'}-${row.order_id}`} className="hover:bg-slate-50 transition-colors">
+                                            {isAllShops && (
+                                                <td className="px-6 py-4">
+                                                    <span
+                                                        className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium text-white"
+                                                        style={{ backgroundColor: getShopColor(shopIdx >= 0 ? shopIdx : 0) }}
+                                                    >
+                                                        {row.shop_name}
+                                                    </span>
+                                                </td>
+                                            )}
+                                            <td className="px-6 py-4 font-medium text-primary">{row.order_id}</td>
+                                            <td className="px-6 py-4 text-text-secondary">{row.sale_date}</td>
+                                            <td className="px-6 py-4 font-medium text-text-main">{row.customer}</td>
+                                            <td className="px-6 py-4 text-right font-medium">{formatCurrency(row.revenue)}</td>
+                                            <td className="px-6 py-4 text-right text-text-secondary">{formatCurrency(row.cost)}</td>
+                                            <td className={`px-6 py-4 text-right font-bold ${row.profit > 0 ? 'text-green-600' : 'text-red-500'}`}>
+                                                {formatCurrency(row.profit)}
+                                            </td>
+                                            <td className="px-6 py-4 text-center">
+                                                <span className={`inline-flex items-center px-2 py-0.5 rounded-lg text-xs font-medium ${marginClass}`}>
+                                                    {row.margin !== undefined ? row.margin.toFixed(1) : '0.0'}%
+                                                </span>
+                                            </td>
+                                            <td className="px-6 py-4 text-center">
+                                                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${row.status === 'Fulfilled' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
+                                                    }`}>
+                                                    {row.status}
+                                                </span>
+                                            </td>
+                                        </tr>
+                                    );
+                                })}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    {/* Pagination */}
+                    {totalPages > 1 && (
+                        <div className="flex items-center justify-between px-6 py-4 border-t border-border-light bg-slate-50">
+                            <p className="text-sm text-text-secondary">
+                                Showing {((page - 1) * ordersPerPage) + 1} to {Math.min(page * ordersPerPage, totalOrders)} of {totalOrders} orders
+                            </p>
+                            <div className="flex items-center gap-2">
+                                <button
+                                    onClick={() => setPage((p: number) => Math.max(1, p - 1))}
+                                    disabled={page === 1}
+                                    className="px-3 py-1.5 text-sm font-medium rounded-lg border border-border-light bg-white hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
+                                >
+                                    <span className="material-symbols-outlined text-[16px]">chevron_left</span>
+                                    Previous
+                                </button>
+                                <div className="flex items-center gap-1">
+                                    {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                                        let pageNum;
+                                        if (totalPages <= 5) {
+                                            pageNum = i + 1;
+                                        } else if (page <= 3) {
+                                            pageNum = i + 1;
+                                        } else if (page >= totalPages - 2) {
+                                            pageNum = totalPages - 4 + i;
+                                        } else {
+                                            pageNum = page - 2 + i;
+                                        }
+                                        return (
+                                            <button
+                                                key={pageNum}
+                                                onClick={() => setPage(pageNum)}
+                                                className={`w-8 h-8 text-sm font-medium rounded-lg ${page === pageNum
+                                                    ? 'bg-primary text-white'
+                                                    : 'bg-white border border-border-light hover:bg-slate-50'
+                                                    }`}
+                                            >
+                                                {pageNum}
+                                            </button>
+                                        );
+                                    })}
+                                </div>
+                                <button
+                                    onClick={() => setPage((p: number) => Math.min(totalPages, p + 1))}
+                                    disabled={page === totalPages}
+                                    className="px-3 py-1.5 text-sm font-medium rounded-lg border border-border-light bg-white hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
+                                >
+                                    Next
+                                    <span className="material-symbols-outlined text-[16px]">chevron_right</span>
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </>
+            )}
+        </div>
+    );
+};
+
+export default ProfitAnalytics;

frontend/pages/Settings.tsx

@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+import { resetDatabase, resetShopData } from '../services/api';
+import { useShop } from '../contexts/ShopContext';
+
+const Settings: React.FC = () => {
+    const { currentShop, refreshShops } = useShop();
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState<string | null>(null);
+    const [showDangerZone, setShowDangerZone] = useState(false);
+
+    const handleResetCurrentShop = async () => {
+        if (!currentShop) {
+            alert("Please select a shop first.");
+            return;
+        }
+
+        const confirmText = "RESET SHOP";
+        const userInput = prompt(`⚠️ WARNING: This will permanently delete ALL data for "${currentShop.name}" (orders, imports, providers).\n\nType "${confirmText}" to confirm:`);
+
+        if (userInput !== confirmText) {
+            if (userInput !== null) {
+                alert("Confirmation text did not match. Reset cancelled.");
+            }
+            return;
+        }
+
+        setLoading(true);
+        try {
+            await resetShopData(currentShop.id);
+            await refreshShops();
+            setMessage(`Shop "${currentShop.name}" data has been reset successfully.`);
+        } catch (e) {
+            setMessage("Failed to reset shop data. Please try again.");
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    const handleResetAllDatabase = async () => {
+        const confirmText = "DELETE EVERYTHING";
+        const userInput = prompt(`⚠️ EXTREME WARNING: This will permanently delete ALL shops and ALL data. This cannot be undone!\n\nType "${confirmText}" to confirm:`);
+
+        if (userInput !== confirmText) {
+            if (userInput !== null) {
+                alert("Confirmation text did not match. Reset cancelled.");
+            }
+            return;
+        }
+
+        setLoading(true);
+        try {
+            await resetDatabase();
+            await refreshShops();
+            setMessage("Entire database has been reset. All shops and data deleted.");
+        } catch (e) {
+            setMessage("Failed to reset database. Please try again.");
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <div className="max-w-[800px] mx-auto flex flex-col gap-6">
+            <div>
+                <h2 className="text-3xl font-black text-text-main">Settings</h2>
+                <p className="text-text-secondary mt-2">Configure your application preferences and manage data.</p>
+            </div>
+
+            {message && (
+                <div className={`p-4 rounded-lg border ${message.includes('Failed') ? 'bg-red-50 border-red-200 text-red-700' : 'bg-green-50 border-green-200 text-green-700'}`}>
+                    <p className="font-medium flex items-center gap-2">
+                        <span className="material-symbols-outlined">{message.includes('Failed') ? 'error' : 'check_circle'}</span>
+                        {message}
+                    </p>
+                </div>
+            )}
+
+            {/* General Settings */}
+            <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm">
+                <div className="flex items-center gap-3 mb-4">
+                    <div className="size-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center">
+                        <span className="material-symbols-outlined">tune</span>
+                    </div>
+                    <h3 className="text-lg font-bold text-text-main">General</h3>
+                </div>
+                <p className="text-text-secondary text-sm">
+                    Configure your API keys and Shop preferences here. (Coming soon)
+                </p>
+            </div>
+
+            {/* Multi-Shop Info */}
+            <div className="bg-white rounded-xl border border-border-light p-6 shadow-sm">
+                <div className="flex items-center gap-3 mb-4">
+                    <div className="size-10 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center">
+                        <span className="material-symbols-outlined">storefront</span>
+                    </div>
+                    <h3 className="text-lg font-bold text-text-main">Multi-Shop Mode</h3>
+                </div>
+                <div className="bg-emerald-50 rounded-lg p-4 border border-emerald-200">
+                    <p className="text-sm text-emerald-800">
+                        <strong>✓ Active:</strong> Your application is running in multi-shop mode. Each shop has completely isolated data.
+                    </p>
+                    <ul className="mt-2 text-sm text-emerald-700 list-disc list-inside space-y-1">
+                        <li>Orders are stored per-shop (same Order ID can exist in multiple shops)</li>
+                        <li>Providers are managed per-shop</li>
+                        <li>Matching algorithm only works within a single shop</li>
+                        <li>Deleting a shop removes all its data permanently</li>
+                    </ul>
+                </div>
+                {currentShop && (
+                    <div className="mt-4 p-3 bg-slate-50 rounded-lg border border-border-light">
+                        <p className="text-sm text-text-secondary">
+                            Currently selected: <strong className="text-primary">{currentShop.name}</strong>
+                        </p>
+                    </div>
+                )}
+            </div>
+
+            {/* Danger Zone - Collapsible */}
+            <div className="bg-white rounded-xl border border-border-light shadow-sm overflow-hidden">
+                <button
+                    onClick={() => setShowDangerZone(!showDangerZone)}
+                    className="w-full px-6 py-4 flex items-center justify-between hover:bg-slate-50 transition-colors"
+                >
+                    <div className="flex items-center gap-3">
+                        <div className="size-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center">
+                            <span className="material-symbols-outlined">warning</span>
+                        </div>
+                        <div className="text-left">
+                            <h3 className="text-lg font-bold text-text-main">Danger Zone</h3>
+                            <p className="text-sm text-text-secondary">Advanced actions that can affect your data</p>
+                        </div>
+                    </div>
+                    <span className={`material-symbols-outlined text-text-secondary transition-transform ${showDangerZone ? 'rotate-180' : ''}`}>
+                        expand_more
+                    </span>
+                </button>
+
+                {showDangerZone && (
+                    <div className="px-6 pb-6 pt-2 border-t border-border-light bg-red-50/50 space-y-4">
+                        {/* Reset Current Shop */}
+                        {currentShop && (
+                            <div className="bg-white rounded-lg border border-amber-200 p-4">
+                                <div className="flex items-start gap-4">
+                                    <span className="material-symbols-outlined text-amber-600 text-2xl mt-0.5">refresh</span>
+                                    <div className="flex-1">
+                                        <h4 className="font-bold text-amber-800 mb-1">Reset Current Shop</h4>
+                                        <p className="text-sm text-amber-600 mb-3">
+                                            Delete all data (orders, imports, providers) for <strong>{currentShop.name}</strong> but keep the shop itself.
+                                        </p>
+                                        <button
+                                            onClick={handleResetCurrentShop}
+                                            disabled={loading}
+                                            className="px-4 py-2 text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 rounded-lg transition-colors disabled:opacity-50"
+                                        >
+                                            {loading ? 'Processing...' : `Reset "${currentShop.name}" Data`}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Reset Everything */}
+                        <div className="bg-white rounded-lg border border-red-200 p-4">
+                            <div className="flex items-start gap-4">
+                                <span className="material-symbols-outlined text-red-600 text-2xl mt-0.5">delete_forever</span>
+                                <div className="flex-1">
+                                    <h4 className="font-bold text-red-800 mb-1">Reset Entire Database</h4>
+                                    <p className="text-sm text-red-600 mb-3">
+                                        Permanently delete ALL shops and ALL data. This action cannot be undone.
+                                    </p>
+                                    <button
+                                        onClick={handleResetAllDatabase}
+                                        disabled={loading}
+                                        className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors disabled:opacity-50"
+                                    >
+                                        {loading ? (
+                                            <span className="flex items-center gap-2">
+                                                <span className="animate-spin">⏳</span>
+                                                Processing...
+                                            </span>
+                                        ) : (
+                                            <span className="flex items-center gap-2">
+                                                <span className="material-symbols-outlined text-lg">delete_forever</span>
+                                                Reset Entire Database
+                                            </span>
+                                        )}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Settings;

frontend/pages/ShopManagement.tsx

@@ -0,0 +1,407 @@
+import React, { useState } from 'react';
+import { useShop } from '../contexts/ShopContext';
+import { Shop } from '../types';
+import { createShop, deleteShop, resetShopData, updateShop } from '../services/api';
+
+const ShopManagement: React.FC = () => {
+    const { shops, currentShop, setCurrentShop, refreshShops, isLoading } = useShop();
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState<Shop | null>(null);
+    const [showResetConfirm, setShowResetConfirm] = useState<Shop | null>(null);
+    const [editingShop, setEditingShop] = useState<Shop | null>(null);
+
+    // Form states
+    const [formName, setFormName] = useState('');
+    const [formSlug, setFormSlug] = useState('');
+    const [formDescription, setFormDescription] = useState('');
+    const [formError, setFormError] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const handleCreateShop = async () => {
+        if (!formName.trim() || !formSlug.trim()) {
+            setFormError('Name and Slug are required');
+            return;
+        }
+
+        setIsSubmitting(true);
+        setFormError('');
+        try {
+            await createShop(formName, formSlug, formDescription);
+            await refreshShops();
+            setShowCreateModal(false);
+            resetForm();
+        } catch (err) {
+            setFormError(err instanceof Error ? err.message : 'Failed to create shop');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const handleUpdateShop = async () => {
+        if (!editingShop || !formName.trim()) {
+            setFormError('Name is required');
+            return;
+        }
+
+        setIsSubmitting(true);
+        setFormError('');
+        try {
+            await updateShop(editingShop.id, {
+                name: formName,
+                description: formDescription
+            });
+            await refreshShops();
+            setEditingShop(null);
+            resetForm();
+        } catch (err) {
+            setFormError(err instanceof Error ? err.message : 'Failed to update shop');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const handleDeleteShop = async (shop: Shop) => {
+        setIsSubmitting(true);
+        try {
+            await deleteShop(shop.id);
+            if (currentShop?.id === shop.id) {
+                setCurrentShop(null);
+            }
+            await refreshShops();
+            setShowDeleteConfirm(null);
+        } catch (err) {
+            alert(err instanceof Error ? err.message : 'Failed to delete shop');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const handleResetShop = async (shop: Shop) => {
+        setIsSubmitting(true);
+        try {
+            await resetShopData(shop.id);
+            await refreshShops();
+            setShowResetConfirm(null);
+        } catch (err) {
+            alert(err instanceof Error ? err.message : 'Failed to reset shop');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const resetForm = () => {
+        setFormName('');
+        setFormSlug('');
+        setFormDescription('');
+        setFormError('');
+    };
+
+    const openEditModal = (shop: Shop) => {
+        setFormName(shop.name);
+        setFormDescription(shop.description || '');
+        setEditingShop(shop);
+    };
+
+    const generateSlug = (name: string) => {
+        return name
+            .toLowerCase()
+            .replace(/[^a-z0-9\s-]/g, '')
+            .replace(/\s+/g, '-')
+            .substring(0, 30);
+    };
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center justify-center h-64">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="max-w-6xl mx-auto space-y-6">
+            {/* Header */}
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <div>
+                    <h1 className="text-2xl font-bold text-text-main">Shop Management</h1>
+                    <p className="text-text-secondary mt-1">Manage your Etsy shops. Each shop has completely isolated data.</p>
+                </div>
+                <button
+                    onClick={() => { resetForm(); setShowCreateModal(true); }}
+                    className="inline-flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-primary to-primary/90 text-white rounded-xl font-medium shadow-lg shadow-primary/20 hover:shadow-primary/30 transition-all"
+                >
+                    <span className="material-symbols-outlined">add</span>
+                    Create New Shop
+                </button>
+            </div>
+
+            {/* Stats Overview */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div className="bg-white rounded-xl p-4 border border-border-light">
+                    <p className="text-2xl font-bold text-primary">{shops.length}</p>
+                    <p className="text-sm text-text-secondary">Total Shops</p>
+                </div>
+                <div className="bg-white rounded-xl p-4 border border-border-light">
+                    <p className="text-2xl font-bold text-emerald-600">
+                        {shops.reduce((acc, s) => acc + (s.order_count || 0), 0)}
+                    </p>
+                    <p className="text-sm text-text-secondary">Total Orders</p>
+                </div>
+                <div className="bg-white rounded-xl p-4 border border-border-light">
+                    <p className="text-2xl font-bold text-blue-600">
+                        {shops.reduce((acc, s) => acc + (s.provider_count || 0), 0)}
+                    </p>
+                    <p className="text-sm text-text-secondary">Total Providers</p>
+                </div>
+                <div className="bg-white rounded-xl p-4 border border-border-light">
+                    <p className="text-2xl font-bold text-amber-600">
+                        {shops.filter(s => s.is_active).length}
+                    </p>
+                    <p className="text-sm text-text-secondary">Active Shops</p>
+                </div>
+            </div>
+
+            {/* Shops Grid */}
+            {shops.length === 0 ? (
+                <div className="bg-white rounded-2xl border border-border-light p-12 text-center">
+                    <div className="w-16 h-16 rounded-full bg-slate-100 mx-auto flex items-center justify-center mb-4">
+                        <span className="material-symbols-outlined text-3xl text-slate-400">storefront</span>
+                    </div>
+                    <h3 className="text-lg font-semibold text-text-main mb-2">No Shops Yet</h3>
+                    <p className="text-text-secondary mb-6">Create your first shop to start managing Etsy orders.</p>
+                    <button
+                        onClick={() => { resetForm(); setShowCreateModal(true); }}
+                        className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-xl font-medium"
+                    >
+                        <span className="material-symbols-outlined">add</span>
+                        Create Your First Shop
+                    </button>
+                </div>
+            ) : (
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {shops.map((shop) => (
+                        <div
+                            key={shop.id}
+                            className={`bg-white rounded-2xl border-2 p-5 transition-all hover:shadow-lg ${currentShop?.id === shop.id
+                                    ? 'border-primary shadow-primary/10'
+                                    : 'border-border-light hover:border-primary/30'
+                                }`}
+                        >
+                            {/* Shop Header */}
+                            <div className="flex items-start justify-between mb-4">
+                                <div className="flex items-center gap-3">
+                                    <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${currentShop?.id === shop.id
+                                            ? 'bg-gradient-to-br from-primary to-primary/70'
+                                            : 'bg-slate-100'
+                                        }`}>
+                                        <span className={`material-symbols-outlined text-2xl ${currentShop?.id === shop.id ? 'text-white' : 'text-slate-500'
+                                            }`}>storefront</span>
+                                    </div>
+                                    <div>
+                                        <h3 className="font-semibold text-text-main">{shop.name}</h3>
+                                        <p className="text-xs text-text-secondary">{shop.slug}</p>
+                                    </div>
+                                </div>
+                                {currentShop?.id === shop.id && (
+                                    <span className="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">
+                                        Active
+                                    </span>
+                                )}
+                            </div>
+
+                            {/* Description */}
+                            {shop.description && (
+                                <p className="text-sm text-text-secondary mb-4 line-clamp-2">{shop.description}</p>
+                            )}
+
+                            {/* Stats */}
+                            <div className="grid grid-cols-2 gap-3 mb-4">
+                                <div className="bg-slate-50 rounded-lg p-3">
+                                    <p className="text-lg font-semibold text-text-main">{shop.order_count || 0}</p>
+                                    <p className="text-xs text-text-secondary">Orders</p>
+                                </div>
+                                <div className="bg-slate-50 rounded-lg p-3">
+                                    <p className="text-lg font-semibold text-text-main">{shop.provider_count || 0}</p>
+                                    <p className="text-xs text-text-secondary">Providers</p>
+                                </div>
+                            </div>
+
+                            {/* Actions */}
+                            <div className="flex flex-wrap gap-2">
+                                <button
+                                    onClick={() => setCurrentShop(shop)}
+                                    disabled={currentShop?.id === shop.id}
+                                    className={`flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${currentShop?.id === shop.id
+                                            ? 'bg-slate-100 text-slate-400 cursor-not-allowed'
+                                            : 'bg-primary text-white hover:bg-primary/90'
+                                        }`}
+                                >
+                                    {currentShop?.id === shop.id ? 'Selected' : 'Select'}
+                                </button>
+                                <button
+                                    onClick={() => openEditModal(shop)}
+                                    className="p-2 text-text-secondary hover:text-primary hover:bg-primary/10 rounded-lg transition-colors"
+                                    title="Edit Shop"
+                                >
+                                    <span className="material-symbols-outlined text-lg">edit</span>
+                                </button>
+                                <button
+                                    onClick={() => setShowResetConfirm(shop)}
+                                    className="p-2 text-amber-600 hover:bg-amber-50 rounded-lg transition-colors"
+                                    title="Reset Shop Data"
+                                >
+                                    <span className="material-symbols-outlined text-lg">refresh</span>
+                                </button>
+                                <button
+                                    onClick={() => setShowDeleteConfirm(shop)}
+                                    className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                                    title="Delete Shop"
+                                >
+                                    <span className="material-symbols-outlined text-lg">delete</span>
+                                </button>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            {/* Create/Edit Modal */}
+            {(showCreateModal || editingShop) && (
+                <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+                    <div className="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl">
+                        <h2 className="text-xl font-bold text-text-main mb-4">
+                            {editingShop ? 'Edit Shop' : 'Create New Shop'}
+                        </h2>
+
+                        {formError && (
+                            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
+                                {formError}
+                            </div>
+                        )}
+
+                        <div className="space-y-4">
+                            <div>
+                                <label className="block text-sm font-medium text-text-main mb-1">Shop Name *</label>
+                                <input
+                                    type="text"
+                                    value={formName}
+                                    onChange={(e) => {
+                                        setFormName(e.target.value);
+                                        if (!editingShop) {
+                                            setFormSlug(generateSlug(e.target.value));
+                                        }
+                                    }}
+                                    placeholder="My Etsy Shop"
+                                    className="w-full px-4 py-2.5 border border-border-light rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none"
+                                />
+                            </div>
+
+                            {!editingShop && (
+                                <div>
+                                    <label className="block text-sm font-medium text-text-main mb-1">Slug *</label>
+                                    <input
+                                        type="text"
+                                        value={formSlug}
+                                        onChange={(e) => setFormSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-'))}
+                                        placeholder="my-etsy-shop"
+                                        className="w-full px-4 py-2.5 border border-border-light rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none font-mono text-sm"
+                                    />
+                                    <p className="mt-1 text-xs text-text-secondary">Unique identifier, lowercase letters and hyphens only</p>
+                                </div>
+                            )}
+
+                            <div>
+                                <label className="block text-sm font-medium text-text-main mb-1">Description</label>
+                                <textarea
+                                    value={formDescription}
+                                    onChange={(e) => setFormDescription(e.target.value)}
+                                    placeholder="Optional description for this shop..."
+                                    rows={3}
+                                    className="w-full px-4 py-2.5 border border-border-light rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none resize-none"
+                                />
+                            </div>
+                        </div>
+
+                        <div className="flex gap-3 mt-6">
+                            <button
+                                onClick={() => { setShowCreateModal(false); setEditingShop(null); resetForm(); }}
+                                className="flex-1 px-4 py-2.5 border border-border-light rounded-lg font-medium text-text-secondary hover:bg-slate-50 transition-colors"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={editingShop ? handleUpdateShop : handleCreateShop}
+                                disabled={isSubmitting}
+                                className="flex-1 px-4 py-2.5 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
+                            >
+                                {isSubmitting ? 'Saving...' : (editingShop ? 'Save Changes' : 'Create Shop')}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Delete Confirmation Modal */}
+            {showDeleteConfirm && (
+                <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+                    <div className="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl">
+                        <div className="w-12 h-12 rounded-full bg-red-100 mx-auto flex items-center justify-center mb-4">
+                            <span className="material-symbols-outlined text-2xl text-red-500">warning</span>
+                        </div>
+                        <h2 className="text-xl font-bold text-text-main text-center mb-2">Delete Shop?</h2>
+                        <p className="text-text-secondary text-center mb-6">
+                            This will permanently delete <strong>{showDeleteConfirm.name}</strong> and ALL its data including orders, providers, and import history. This action cannot be undone.
+                        </p>
+                        <div className="flex gap-3">
+                            <button
+                                onClick={() => setShowDeleteConfirm(null)}
+                                className="flex-1 px-4 py-2.5 border border-border-light rounded-lg font-medium text-text-secondary hover:bg-slate-50 transition-colors"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={() => handleDeleteShop(showDeleteConfirm)}
+                                disabled={isSubmitting}
+                                className="flex-1 px-4 py-2.5 bg-red-500 text-white rounded-lg font-medium hover:bg-red-600 transition-colors disabled:opacity-50"
+                            >
+                                {isSubmitting ? 'Deleting...' : 'Delete Shop'}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Reset Confirmation Modal */}
+            {showResetConfirm && (
+                <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+                    <div className="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl">
+                        <div className="w-12 h-12 rounded-full bg-amber-100 mx-auto flex items-center justify-center mb-4">
+                            <span className="material-symbols-outlined text-2xl text-amber-600">refresh</span>
+                        </div>
+                        <h2 className="text-xl font-bold text-text-main text-center mb-2">Reset Shop Data?</h2>
+                        <p className="text-text-secondary text-center mb-6">
+                            This will delete all data (orders, providers, imports) for <strong>{showResetConfirm.name}</strong> but keep the shop itself. This action cannot be undone.
+                        </p>
+                        <div className="flex gap-3">
+                            <button
+                                onClick={() => setShowResetConfirm(null)}
+                                className="flex-1 px-4 py-2.5 border border-border-light rounded-lg font-medium text-text-secondary hover:bg-slate-50 transition-colors"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={() => handleResetShop(showResetConfirm)}
+                                disabled={isSubmitting}
+                                className="flex-1 px-4 py-2.5 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition-colors disabled:opacity-50"
+                            >
+                                {isSubmitting ? 'Resetting...' : 'Reset Data'}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ShopManagement;

frontend/services/api.ts

@@ -0,0 +1,206 @@
+import { ProfitData, Order, FulfillmentProvider, Shop, ShopSummary, AllShopsSummaryResponse, AllShopsOrder, AllShopsProfitData, ShopSummaryResponse } from '../types';
+
+// CONFIGURATION
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+if (!API_BASE_URL) {
+  console.error("CRITICAL: VITE_API_BASE_URL is missing. The app cannot connect to the backend.");
+}
+
+// ==========================================
+// SHOP MANAGEMENT APIs
+// ==========================================
+
+export const fetchShops = async (): Promise<Shop[]> => {
+  const response = await fetch(`${API_BASE_URL}/api/shops`);
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+};
+
+export const createShop = async (name: string, slug: string, description?: string): Promise<Shop> => {
+  const formData = new FormData();
+  formData.append('name', name);
+  formData.append('slug', slug);
+  if (description) formData.append('description', description);
+
+  const response = await fetch(`${API_BASE_URL}/api/shops`, {
+    method: 'POST',
+    body: formData
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ detail: response.statusText }));
+    throw new Error(error.detail || 'Failed to create shop');
+  }
+  return await response.json();
+};
+
+export const updateShop = async (
+  shopId: number,
+  data: { name?: string; description?: string; is_active?: boolean }
+): Promise<void> => {
+  const formData = new FormData();
+  if (data.name) formData.append('name', data.name);
+  if (data.description !== undefined) formData.append('description', data.description);
+  if (data.is_active !== undefined) formData.append('is_active', data.is_active.toString());
+
+  const response = await fetch(`${API_BASE_URL}/api/shops/${shopId}`, {
+    method: 'PUT',
+    body: formData
+  });
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+};
+
+export const deleteShop = async (shopId: number): Promise<void> => {
+  const response = await fetch(`${API_BASE_URL}/api/shops/${shopId}`, {
+    method: 'DELETE'
+  });
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+};
+
+export const resetShopData = async (shopId: number): Promise<void> => {
+  const response = await fetch(`${API_BASE_URL}/api/shops/${shopId}/reset`, {
+    method: 'POST'
+  });
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+};
+
+// ==========================================
+// SHOP-SCOPED DATA APIs
+// ==========================================
+
+export const fetchShopSummary = async (shopId: number, startDate?: string, endDate?: string): Promise<ShopSummaryResponse> => {
+  let url = `${API_BASE_URL}/api/shops/${shopId}/analytics/summary`;
+  const params = new URLSearchParams();
+  if (startDate) params.append('start_date', startDate);
+  if (endDate) params.append('end_date', endDate);
+  if (params.toString()) url += `?${params.toString()}`;
+
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}
+
+export const fetchProfitData = async (shopId: number): Promise<ProfitData[]> => {
+  const response = await fetch(`${API_BASE_URL}/api/shops/${shopId}/analytics/net-profit`);
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+};
+
+export const fetchOrders = async (shopId: number): Promise<Order[]> => {
+  const response = await fetch(`${API_BASE_URL}/api/shops/${shopId}/orders`);
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}
+
+export const uploadFile = async (shopId: number, type: 'etsy' | 'fulfillment', file: File, providerId?: number) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  if (providerId) {
+    formData.append('provider_id', providerId.toString());
+  }
+
+  const endpoint = type === 'etsy'
+    ? `/api/shops/${shopId}/upload/etsy`
+    : `/api/shops/${shopId}/upload/fulfillment`;
+
+  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+    method: 'POST',
+    body: formData,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Upload failed: ${response.statusText}`);
+  }
+  return await response.json();
+};
+
+export const createProvider = async (shopId: number, name: string, mapping: any) => {
+  const formData = new FormData();
+  formData.append('name', name);
+  formData.append('mapping_config', JSON.stringify(mapping));
+
+  const response = await fetch(`${API_BASE_URL}/api/shops/${shopId}/providers`, {
+    method: 'POST',
+    body: formData
+  });
+  if (!response.ok) throw new Error('Failed to create provider');
+  return await response.json();
+}
+
+export const fetchProviders = async (shopId: number): Promise<FulfillmentProvider[]> => {
+  const response = await fetch(`${API_BASE_URL}/api/shops/${shopId}/providers`);
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}
+
+export const fetchImportHistory = async (shopId: number, type: string, providerId?: number): Promise<any[]> => {
+  let url = `${API_BASE_URL}/api/shops/${shopId}/imports?import_type=${type}`;
+  if (providerId) {
+    url += `&provider_id=${providerId}`;
+  }
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}
+
+export const fetchImportDetails = async (shopId: number, id: number): Promise<{ id: number, file_name: string, raw_content: string }> => {
+  const response = await fetch(`${API_BASE_URL}/api/shops/${shopId}/imports/${id}`);
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}
+
+export const deleteImport = async (shopId: number, id: number) => {
+  const response = await fetch(`${API_BASE_URL}/api/shops/${shopId}/imports/${id}`, {
+    method: 'DELETE'
+  });
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}
+
+export const runMatching = async (shopId: number) => {
+  const response = await fetch(`${API_BASE_URL}/api/shops/${shopId}/actions/run-matching`, {
+    method: 'POST'
+  });
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}
+
+// ==========================================
+// CROSS-SHOP ANALYTICS APIs
+// ==========================================
+
+export const fetchAllShopsSummary = async (startDate?: string, endDate?: string): Promise<AllShopsSummaryResponse> => {
+  let url = `${API_BASE_URL}/api/analytics/all-shops/summary`;
+  const params = new URLSearchParams();
+  if (startDate) params.append('start_date', startDate);
+  if (endDate) params.append('end_date', endDate);
+  if (params.toString()) url += `?${params.toString()}`;
+
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}
+
+export const fetchAllShopsOrders = async (): Promise<AllShopsOrder[]> => {
+  const response = await fetch(`${API_BASE_URL}/api/analytics/all-shops/orders`);
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}
+
+export const fetchAllShopsProfitData = async (): Promise<AllShopsProfitData[]> => {
+  const response = await fetch(`${API_BASE_URL}/api/analytics/all-shops/profit`);
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}
+
+// ==========================================
+// LEGACY/ADMIN APIs
+// ==========================================
+
+export const resetDatabase = async () => {
+  const response = await fetch(`${API_BASE_URL}/api/admin/reset-database`, {
+    method: 'POST'
+  });
+  if (!response.ok) throw new Error(`Backend error: ${response.statusText}`);
+  return await response.json();
+}

frontend/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

frontend/types.ts

@@ -0,0 +1,188 @@
+// ==========================================
+// SHOP TYPES
+// ==========================================
+
+export interface Shop {
+  id: number;
+  name: string;
+  slug: string;
+  description?: string;
+  created_at: string;
+  is_active: boolean;
+  order_count?: number;
+  provider_count?: number;
+}
+
+export interface ShopCreate {
+  name: string;
+  slug: string;
+  description?: string;
+}
+
+// ==========================================
+// ORDER & ANALYTICS TYPES
+// ==========================================
+
+export interface ProfitData {
+  order_id: string;
+  internal_id: number;
+  sale_date: string;
+  customer: string;
+  revenue: number;
+  etsy_net: number;
+  cost: number;
+  profit: number;
+  margin: number;
+  status: 'Fulfilled' | 'Unfulfilled';
+  match_info: string[];
+}
+
+export interface Order {
+  id: string;
+  internal_id: number;
+  date: string;
+  customer: string;
+  items: string;
+  total: number;
+  status: 'Shipped' | 'Pending' | 'Completed' | 'Cancelled';
+  fulfillment_cost?: number;
+  match_info?: string[];
+}
+
+// ==========================================
+// FULFILLMENT TYPES
+// ==========================================
+
+export interface FulfillmentProvider {
+  id: number;
+  name: string;
+  mapping_config: Record<string, string>;
+}
+
+export enum UploadType {
+  ETSY = 'etsy',
+  FULFILLMENT = 'fulfillment'
+}
+
+// ==========================================
+// IMPORT TYPES
+// ==========================================
+
+export interface ImportHistory {
+  id: number;
+  date: string;
+  file_name: string;
+  count: number;
+  provider_id?: number;
+}
+
+// ==========================================
+// CROSS-SHOP ANALYTICS
+// ==========================================
+
+export interface ShopSummary {
+  shop_id: number;
+  shop_name: string;
+  order_count: number;
+  fulfilled_count: number;
+  fulfillment_rate: number;
+  total_revenue: number;
+  total_cost: number;
+  total_profit: number;
+  profit_margin: number;
+  avg_order_value: number;
+}
+
+export interface AllShopsAggregates {
+  total_revenue: number;
+  total_cost: number;
+  total_profit: number;
+  total_orders: number;
+  total_fulfilled: number;
+  overall_margin: number;
+  overall_fulfillment_rate: number;
+  shop_count: number;
+}
+
+export interface AllShopsChanges {
+  revenue_change: number | null;
+  cost_change: number | null;
+  profit_change: number | null;
+  orders_change: number | null;
+  fulfillment_rate_change: number | null;
+}
+
+export interface AllShopsSummaryResponse {
+  shops: ShopSummary[];
+  aggregates: AllShopsAggregates;
+  changes: AllShopsChanges;
+  previous_period: AllShopsAggregates | null;
+  best_performer: ShopSummary | null;
+  worst_performer: ShopSummary | null;
+}
+
+export interface ShopSummaryResponse {
+  shop: {
+    id: number;
+    name: string;
+    slug: string;
+  };
+  aggregates: {
+    total_revenue: number;
+    total_cost: number;
+    total_profit: number;
+    total_orders: number;
+    total_fulfilled: number;
+    profit_margin: number;
+    fulfillment_rate: number;
+    avg_order_value: number;
+  };
+  changes: AllShopsChanges;
+  previous_period: {
+    total_revenue: number;
+    total_cost: number;
+    total_profit: number;
+    total_orders: number;
+    total_fulfilled: number;
+    profit_margin: number;
+    fulfillment_rate: number;
+    avg_order_value: number;
+  } | null;
+}
+
+export interface AllShopsOrder extends Order {
+  shop_id: number;
+  shop_name: string;
+}
+
+export interface AllShopsProfitData extends ProfitData {
+  shop_id: number;
+  shop_name: string;
+}
+
+
+// ==========================================
+// AUTH TYPES
+// ==========================================
+
+export interface User {
+  id: number;
+  username: string;
+  role: 'admin' | 'user';
+  permissions: string[];
+  is_active: boolean;
+  created_at: string;
+}
+
+export interface LoginResponse {
+  access_token: string;
+  token_type: string;
+}
+
+export interface UserCreate {
+  username: string;
+  password?: string;
+  role: 'admin' | 'user';
+  permissions: string[];
+}
+

frontend/vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});

main.py

@@ -0,0 +1,1516 @@
+import os
+import pandas as pd
+import io
+import re
+import json
+from typing import List, Optional, Dict, Any
+from datetime import datetime, timedelta
+
+from fastapi import FastAPI, UploadFile, File, Depends, HTTPException, Form, Path, status
+from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
+from fastapi.responses import RedirectResponse
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from sqlalchemy import create_engine, Column, Integer, String, Float, DateTime, ForeignKey, Boolean, Date, JSON, or_, text, UniqueConstraint
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker, Session, relationship, joinedload, subqueryload
+from passlib.context import CryptContext
+from jose import JWTError, jwt
+
+# ==========================================
+# 1. DATABASE CONFIGURATION
+# ==========================================
+from dotenv import load_dotenv
+
+# Load environment variables from .env file (if it exists)
+load_dotenv()
+
+# ==========================================
+# 1. DATABASE CONFIGURATION
+# ==========================================
+# STRICT MODE: Requires DATABASE_URL in environment variables or .env file
+SQLALCHEMY_DATABASE_URL = os.getenv("DATABASE_URL")
+
+if not SQLALCHEMY_DATABASE_URL:
+    raise ValueError(
+        "CRITICAL ERROR: DATABASE_URL is missing!\n"
+        " - If running locally: Create a .env file (copy from .env.example) and define DATABASE_URL.\n"
+        " - If running on Render: Add DATABASE_URL to 'Environment Variables'."
+    )
+
+engine = create_engine(SQLALCHEMY_DATABASE_URL)
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+Base = declarative_base()
+
+# ==========================================
+# 2. DATABASE MODELS - MULTI-SHOP ARCHITECTURE
+# ==========================================
+
+class User(Base):
+    __tablename__ = "users"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    username = Column(String, unique=True, index=True, nullable=False)
+    hashed_password = Column(String, nullable=False)
+    role = Column(String, default="user") # 'admin', 'user'
+    permissions = Column(JSON, default=[]) # List of permission strings
+    is_active = Column(Boolean, default=True)
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+class Shop(Base):
+    """Master Shop entity - each shop is completely isolated"""
+    __tablename__ = "shops"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    name = Column(String, nullable=False)
+    slug = Column(String, unique=True, nullable=False, index=True)
+    description = Column(String, nullable=True)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    is_active = Column(Boolean, default=True)
+    
+    # Relationships - CASCADE DELETE ensures complete isolation
+    orders = relationship("EtsyOrder", back_populates="shop", cascade="all, delete-orphan")
+    providers = relationship("FulfillmentProvider", back_populates="shop", cascade="all, delete-orphan")
+    imports = relationship("ImportHistory", back_populates="shop", cascade="all, delete-orphan")
+    fulfillment_records = relationship("FulfillmentRecord", back_populates="shop", cascade="all, delete-orphan")
+
+
+class ImportHistory(Base):
+    __tablename__ = "import_history"
+
+    id = Column(Integer, primary_key=True, index=True)
+    shop_id = Column(Integer, ForeignKey("shops.id", ondelete="CASCADE"), nullable=False, index=True)
+    import_type = Column(String)  # 'etsy' or 'fulfillment'
+    file_name = Column(String)
+    upload_date = Column(DateTime, default=datetime.utcnow)
+    record_count = Column(Integer, default=0)
+    provider_id = Column(Integer, ForeignKey("fulfillment_providers.id", ondelete="SET NULL"), nullable=True)
+    raw_content = Column(String)
+
+    # Relationships
+    shop = relationship("Shop", back_populates="imports")
+    etsy_orders = relationship("EtsyOrder", back_populates="import_source", cascade="all, delete-orphan")
+    fulfillment_records = relationship("FulfillmentRecord", back_populates="import_source", cascade="all, delete-orphan", foreign_keys="FulfillmentRecord.import_id")
+
+
+class EtsyOrder(Base):
+    __tablename__ = "etsy_orders"
+    __table_args__ = (
+        UniqueConstraint('shop_id', 'order_id', name='uq_shop_order'),
+    )
+
+    id = Column(Integer, primary_key=True, index=True)  # New auto-increment PK
+    shop_id = Column(Integer, ForeignKey("shops.id", ondelete="CASCADE"), nullable=False, index=True)
+    order_id = Column(String, nullable=False, index=True)  # Etsy's order ID (not globally unique anymore)
+    sale_date = Column(Date)
+    
+    full_name = Column(String)
+    first_name = Column(String)
+    last_name = Column(String)
+    buyer_user_id = Column(String)
+    email = Column(String, nullable=True) 
+    
+    street_1 = Column(String)
+    street_2 = Column(String, nullable=True)
+    ship_city = Column(String)
+    ship_state = Column(String)
+    ship_zipcode = Column(String, index=True)
+    ship_country = Column(String)
+    
+    currency = Column(String, default="USD")
+    order_value = Column(Float, default=0.0)
+    order_total = Column(Float, default=0.0)
+    order_net = Column(Float, default=0.0) 
+    shipping_revenue = Column(Float, default=0.0)
+    
+    skus = Column(String) 
+    
+    import_id = Column(Integer, ForeignKey("import_history.id", ondelete="SET NULL"), nullable=True)
+    
+    # Relationships
+    shop = relationship("Shop", back_populates="orders")
+    import_source = relationship("ImportHistory", back_populates="etsy_orders")
+    fulfillment_records = relationship("FulfillmentRecord", back_populates="etsy_order")
+
+
+class FulfillmentProvider(Base):
+    __tablename__ = "fulfillment_providers"
+    __table_args__ = (
+        UniqueConstraint('shop_id', 'name', name='uq_shop_provider_name'),
+    )
+    
+    id = Column(Integer, primary_key=True, index=True)
+    shop_id = Column(Integer, ForeignKey("shops.id", ondelete="CASCADE"), nullable=False, index=True)
+    name = Column(String, nullable=False)
+    mapping_config = Column(JSON, default={})
+    
+    # Relationships
+    shop = relationship("Shop", back_populates="providers")
+    fulfillment_records = relationship("FulfillmentRecord", back_populates="provider")
+
+
+class FulfillmentRecord(Base):
+    __tablename__ = "fulfillment_records"
+    
+    id = Column(Integer, primary_key=True, index=True)
+    shop_id = Column(Integer, ForeignKey("shops.id", ondelete="CASCADE"), nullable=False, index=True)
+    provider_id = Column(Integer, ForeignKey("fulfillment_providers.id", ondelete="SET NULL"), nullable=True)
+    
+    ref_id_value = Column(String, index=True) 
+    total_cost = Column(Float, default=0.0)   
+    tracking_number = Column(String, nullable=True)
+    
+    raw_data = Column(JSON) 
+    
+    is_matched = Column(Boolean, default=False)
+    match_method = Column(String, nullable=True) 
+    
+    etsy_order_id = Column(Integer, ForeignKey("etsy_orders.id", ondelete="SET NULL"), nullable=True)
+    import_id = Column(Integer, ForeignKey("import_history.id", ondelete="SET NULL"), nullable=True)
+    
+    # Relationships
+    shop = relationship("Shop", back_populates="fulfillment_records")
+    provider = relationship("FulfillmentProvider", back_populates="fulfillment_records")
+    etsy_order = relationship("EtsyOrder", back_populates="fulfillment_records")
+    import_source = relationship("ImportHistory", back_populates="fulfillment_records", foreign_keys=[import_id])
+
+
+# ==========================================
+# 3. DATABASE MIGRATION
+# ==========================================
+
+def run_migrations(engine):
+    """Run migrations to add new columns for multi-shop support"""
+    with engine.connect() as conn:
+        conn = conn.execution_options(isolation_level="AUTOCOMMIT")
+        
+        # Check if shops table exists, if not the schema is fresh
+        try:
+            conn.execute(text("SELECT 1 FROM shops LIMIT 1"))
+        except Exception:
+            # Fresh database, no migration needed
+            return
+        
+    # Add shop_id columns if missing (for existing installations)
+        migrations = [
+            ("etsy_orders", "shop_id", "INTEGER REFERENCES shops(id) ON DELETE CASCADE"),
+            ("fulfillment_providers", "shop_id", "INTEGER REFERENCES shops(id) ON DELETE CASCADE"),
+            ("fulfillment_records", "shop_id", "INTEGER REFERENCES shops(id) ON DELETE CASCADE"),
+            ("import_history", "shop_id", "INTEGER REFERENCES shops(id) ON DELETE CASCADE"),
+            ("users", "permissions", "JSON DEFAULT '[]'"),
+        ]
+        
+        for table, column, definition in migrations:
+            try:
+                conn.execute(text(f"ALTER TABLE {table} ADD COLUMN {column} {definition}"))
+                print(f"Migrated: Added {column} to {table}")
+            except Exception:
+                pass  # Column likely exists
+
+# Create all tables
+Base.metadata.create_all(bind=engine)
+run_migrations(engine)
+
+
+# ==========================================
+# 4. HELPER FUNCTIONS
+# ==========================================
+
+# Security Config
+# Security Config
+SECRET_KEY = os.getenv("API_SECRET_KEY", "changeme_in_production_please_9bd5644faf")
+ALGORITHM = "HS256"
+ACCESS_TOKEN_EXPIRE_MINUTES = 60 * 24 # 24 hours for convenience
+
+pwd_context = CryptContext(schemes=["argon2"], deprecated="auto")
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")
+
+def verify_password(plain_password, hashed_password):
+    return pwd_context.verify(plain_password, hashed_password)
+
+def get_password_hash(password):
+    return pwd_context.hash(password)
+
+def create_access_token(data: dict, expires_delta: Optional[timedelta] = None):
+    to_encode = data.copy()
+    if expires_delta:
+        expire = datetime.utcnow() + expires_delta
+    else:
+        expire = datetime.utcnow() + timedelta(minutes=15)
+    to_encode.update({"exp": expire})
+    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
+    return encoded_jwt
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+async def get_current_user(token: str = Depends(oauth2_scheme), db: Session = Depends(get_db)):
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        username: str = payload.get("sub")
+        if username is None:
+            raise credentials_exception
+        token_data = TokenData(username=username)
+    except JWTError:
+        raise credentials_exception
+    user = db.query(User).filter(User.username == token_data.username).first()
+    if user is None:
+        raise credentials_exception
+    return user
+
+async def get_current_active_user(current_user: User = Depends(get_current_user)):
+    if not current_user.is_active:
+        raise HTTPException(status_code=400, detail="Inactive user")
+    return current_user
+
+async def get_admin_user(current_user: User = Depends(get_current_active_user)):
+    if current_user.role != "admin":
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN, 
+            detail="The user doesn't have enough privileges"
+        )
+    return current_user
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+def clean_currency(value):
+    if pd.isna(value) or value == "":
+        return 0.0
+    if isinstance(value, (int, float)):
+        return float(value)
+    clean_str = str(value).lower().replace('$', '').replace('usd', '').replace('eur', '').strip()
+    clean_str = clean_str.replace(',', '')
+    try:
+        match = re.search(r'(\d+(\.\d+)?)', clean_str)
+        if match:
+            return float(match.group(1))
+        return 0.0
+    except ValueError:
+        return 0.0
+
+def clean_value(value):
+    """Convert pandas NaN to None for database insertion"""
+    if pd.isna(value):
+        return None
+    return value
+
+def safe_str(value, default=""):
+    """Safely convert value to string, handling NaN"""
+    if pd.isna(value) or value is None:
+        return default
+    return str(value)
+
+def normalize_search_text(s):
+    if not s or pd.isna(s):
+        return ""
+    s = str(s).lower()
+    s = re.sub(r'[^\w\s]', ' ', s) 
+    return re.sub(r'\s+', ' ', s).strip()
+
+def extract_house_number(address):
+    if not address: return ""
+    match = re.search(r'\d+', str(address))
+    return match.group(0) if match else ""
+
+def get_shop_or_404(db: Session, shop_id: int) -> Shop:
+    """Helper to get shop or raise 404"""
+    shop = db.query(Shop).filter(Shop.id == shop_id).first()
+    if not shop:
+        raise HTTPException(status_code=404, detail=f"Shop with id {shop_id} not found")
+    return shop
+
+
+# ==========================================
+# 5. PYDANTIC MODELS
+# ==========================================
+
+class Token(BaseModel):
+    access_token: str
+    token_type: str
+
+class TokenData(BaseModel):
+    username: Optional[str] = None
+
+class UserBase(BaseModel):
+    username: str
+
+class UserCreate(UserBase):
+    password: str
+    role: str = "user"
+    permissions: List[str] = []
+
+class UserResponse(UserBase):
+    id: int
+    role: str
+    permissions: List[str] = []
+    is_active: bool
+    created_at: datetime
+
+    class Config:
+        from_attributes = True
+
+class ShopCreate(BaseModel):
+    name: str
+    slug: str
+    description: Optional[str] = None
+
+class ShopUpdate(BaseModel):
+    name: Optional[str] = None
+    description: Optional[str] = None
+    is_active: Optional[bool] = None
+
+class ProviderCreate(BaseModel):
+    name: str  
+    mapping_config: Dict[str, str]
+
+
+# ==========================================
+# 6. FASTAPI APPLICATION
+# ==========================================
+
+app = FastAPI(title="Etsy Profit Manager Backend - Multi-Shop")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+# ==========================================
+# 7. AUTHENTICATION & USER MANAGEMENT
+# ==========================================
+
+@app.on_event("startup")
+def create_initial_admin():
+    db = SessionLocal()
+    try:
+        if db.query(User).count() == 0:
+            admin_user = User(
+                username="admin",
+                hashed_password=get_password_hash("admin123"),
+                role="admin"
+            )
+            db.add(admin_user)
+            db.commit()
+            print("Default admin created: admin / admin123")
+    finally:
+        db.close()
+
+@app.post("/token", response_model=Token)
+async def login_for_access_token(form_data: OAuth2PasswordRequestForm = Depends(), db: Session = Depends(get_db)):
+    user = db.query(User).filter(User.username == form_data.username).first()
+    if not user or not verify_password(form_data.password, user.hashed_password):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
+    access_token = create_access_token(
+        data={"sub": user.username}, expires_delta=access_token_expires
+    )
+    return {"access_token": access_token, "token_type": "bearer"}
+
+@app.get("/users/me", response_model=UserResponse)
+async def read_users_me(current_user: User = Depends(get_current_active_user)):
+    return current_user
+
+@app.get("/admin/users", response_model=List[UserResponse])
+async def read_users(db: Session = Depends(get_db), current_user: User = Depends(get_admin_user)):
+    users = db.query(User).all()
+    return users
+
+@app.post("/admin/users", response_model=UserResponse)
+async def create_user(user: UserCreate, db: Session = Depends(get_db), current_user: User = Depends(get_admin_user)):
+    db_user = db.query(User).filter(User.username == user.username).first()
+    if db_user:
+        raise HTTPException(status_code=400, detail="Username already registered")
+    hashed_password = get_password_hash(user.password)
+    new_user = User(
+        username=user.username,
+        hashed_password=hashed_password,
+        role=user.role,
+        permissions=user.permissions
+    )
+    db.add(new_user)
+    db.commit()
+    db.refresh(new_user)
+    return new_user
+
+@app.put("/admin/users/{user_id}/permissions", response_model=UserResponse)
+async def update_user_permissions(user_id: int, permissions: List[str], db: Session = Depends(get_db), current_user: User = Depends(get_admin_user)):
+    user = db.query(User).filter(User.id == user_id).first()
+    if not user:
+        raise HTTPException(status_code=404, detail="User not found")
+    
+    # Don't allow removing permissions from super admin if checks were strict, 
+    # but here we rely on role='admin' mostly. 
+    # Still good practice not to mess with own permissions if not needed.
+    
+    user.permissions = permissions
+    db.commit()
+    db.refresh(user)
+    return user
+
+@app.delete("/admin/users/{user_id}")
+async def delete_user(user_id: int, db: Session = Depends(get_db), current_user: User = Depends(get_admin_user)):
+    user = db.query(User).filter(User.id == user_id).first()
+    if not user:
+        raise HTTPException(status_code=404, detail="User not found")
+    if user.id == current_user.id:
+        raise HTTPException(status_code=400, detail="Cannot delete yourself")
+    db.delete(user)
+    db.commit()
+    return {"status": "success", "message": "User deleted"}
+
+
+# ==========================================
+# 8. SHOP MANAGEMENT ENDPOINTS
+# ==========================================
+
+@app.get("/")
+def read_root():
+    return RedirectResponse(url="/docs")
+
+@app.get("/api/shops")
+def list_shops(db: Session = Depends(get_db)):
+    """List all shops"""
+    shops = db.query(Shop).options(subqueryload(Shop.orders), subqueryload(Shop.providers)).filter(Shop.is_active == True).order_by(Shop.created_at.desc()).all()
+    return [{
+        "id": s.id,
+        "name": s.name,
+        "slug": s.slug,
+        "description": s.description,
+        "created_at": s.created_at,
+        "is_active": s.is_active,
+        "order_count": len(s.orders),
+        "provider_count": len(s.providers)
+    } for s in shops]
+
+@app.post("/api/shops")
+def create_shop(
+    name: str = Form(...),
+    slug: str = Form(...),
+    description: str = Form(None),
+    db: Session = Depends(get_db)
+):
+    """Create a new shop"""
+    # Validate slug uniqueness
+    existing = db.query(Shop).filter(Shop.slug == slug).first()
+    if existing:
+        raise HTTPException(status_code=400, detail=f"Shop with slug '{slug}' already exists")
+    
+    # Normalize slug
+    normalized_slug = re.sub(r'[^a-z0-9-]', '-', slug.lower().strip())
+    
+    shop = Shop(
+        name=name,
+        slug=normalized_slug,
+        description=description
+    )
+    db.add(shop)
+    db.commit()
+    db.refresh(shop)
+    
+    return {
+        "id": shop.id,
+        "name": shop.name,
+        "slug": shop.slug,
+        "description": shop.description,
+        "message": "Shop created successfully"
+    }
+
+@app.get("/api/shops/{shop_id}")
+def get_shop(shop_id: int, db: Session = Depends(get_db)):
+    """Get shop details"""
+    shop = get_shop_or_404(db, shop_id)
+    return {
+        "id": shop.id,
+        "name": shop.name,
+        "slug": shop.slug,
+        "description": shop.description,
+        "created_at": shop.created_at,
+        "is_active": shop.is_active,
+        "order_count": len(shop.orders),
+        "provider_count": len(shop.providers)
+    }
+
+@app.put("/api/shops/{shop_id}")
+def update_shop(
+    shop_id: int,
+    name: str = Form(None),
+    description: str = Form(None),
+    is_active: bool = Form(None),
+    db: Session = Depends(get_db)
+):
+    """Update shop details"""
+    shop = get_shop_or_404(db, shop_id)
+    
+    if name is not None:
+        shop.name = name
+    if description is not None:
+        shop.description = description
+    if is_active is not None:
+        shop.is_active = is_active
+    
+    db.commit()
+    return {"status": "success", "message": "Shop updated"}
+
+@app.delete("/api/shops/{shop_id}")
+def delete_shop(shop_id: int, db: Session = Depends(get_db)):
+    """Delete shop and ALL its data (CASCADE)"""
+    shop = get_shop_or_404(db, shop_id)
+    
+    db.delete(shop)
+    db.commit()
+    
+    return {"status": "success", "message": f"Shop '{shop.name}' and all its data deleted"}
+
+@app.post("/api/shops/{shop_id}/reset")
+def reset_shop_data(shop_id: int, db: Session = Depends(get_db)):
+    """Reset all data for a specific shop (keep shop itself)"""
+    shop = get_shop_or_404(db, shop_id)
+    
+    # Delete in order respecting FK constraints
+    db.query(FulfillmentRecord).filter(FulfillmentRecord.shop_id == shop_id).delete()
+    db.query(EtsyOrder).filter(EtsyOrder.shop_id == shop_id).delete()
+    db.query(ImportHistory).filter(ImportHistory.shop_id == shop_id).delete()
+    db.query(FulfillmentProvider).filter(FulfillmentProvider.shop_id == shop_id).delete()
+    db.commit()
+    
+    return {"status": "success", "message": f"All data for shop '{shop.name}' has been reset"}
+
+
+# ==========================================
+# 8. SHOP-SCOPED ORDER ENDPOINTS
+# ==========================================
+
+@app.get("/api/shops/{shop_id}/orders")
+def get_orders(shop_id: int, db: Session = Depends(get_db)):
+    """Get all orders for a specific shop"""
+    get_shop_or_404(db, shop_id)
+    
+    orders = db.query(EtsyOrder).options(joinedload(EtsyOrder.fulfillment_records)).filter(EtsyOrder.shop_id == shop_id).all()
+    result = []
+    for o in orders:
+        status = "Pending"
+        fulfillment_cost = 0.0
+        match_info = []
+
+        if o.fulfillment_records:
+            status = "Shipped"
+            for rec in o.fulfillment_records:
+                fulfillment_cost += rec.total_cost
+                if rec.match_method:
+                    match_info.append(rec.match_method)
+        
+        result.append({
+            "id": o.order_id,
+            "internal_id": o.id,
+            "date": o.sale_date,
+            "customer": o.full_name,
+            "items": o.skus,
+            "total": o.order_total,
+            "status": status,
+            "fulfillment_cost": fulfillment_cost,
+            "match_info": match_info
+        })
+    return result
+
+
+# ==========================================
+# 9. SHOP-SCOPED PROVIDER ENDPOINTS
+# ==========================================
+
+@app.get("/api/shops/{shop_id}/providers")
+def get_providers(shop_id: int, db: Session = Depends(get_db)):
+    """Get all providers for a specific shop"""
+    get_shop_or_404(db, shop_id)
+    
+    providers = db.query(FulfillmentProvider).filter(FulfillmentProvider.shop_id == shop_id).all()
+    return [{"id": p.id, "name": p.name, "mapping_config": p.mapping_config} for p in providers]
+
+@app.post("/api/shops/{shop_id}/providers")
+def create_provider(
+    shop_id: int,
+    name: str = Form(...), 
+    mapping_config: str = Form(...), 
+    db: Session = Depends(get_db)
+):
+    """Create or update a provider for a specific shop"""
+    get_shop_or_404(db, shop_id)
+    
+    try:
+        config_dict = json.loads(mapping_config)
+    except json.JSONDecodeError:
+        raise HTTPException(status_code=400, detail="Invalid JSON for mapping_config")
+
+    # Check if provider exists for THIS shop
+    provider = db.query(FulfillmentProvider).filter(
+        FulfillmentProvider.shop_id == shop_id,
+        FulfillmentProvider.name == name
+    ).first()
+    
+    if not provider:
+        provider = FulfillmentProvider(
+            shop_id=shop_id,
+            name=name, 
+            mapping_config=config_dict
+        )
+        db.add(provider)
+    else:
+        provider.mapping_config = config_dict 
+    
+    db.commit()
+    db.refresh(provider)
+    return {"status": "success", "provider_id": provider.id}
+
+
+# ==========================================
+# 10. SHOP-SCOPED UPLOAD ENDPOINTS
+# ==========================================
+
+@app.post("/api/shops/{shop_id}/upload/etsy")
+async def upload_etsy(shop_id: int, file: UploadFile = File(...), db: Session = Depends(get_db)):
+    """Upload Etsy orders CSV for a specific shop"""
+    get_shop_or_404(db, shop_id)
+    
+    contents = await file.read()
+    content_str = contents.decode('utf-8')
+    df = pd.read_csv(io.StringIO(content_str))
+    df.columns = [c.strip() for c in df.columns]
+
+    # Create History Record for THIS shop
+    history = ImportHistory(
+        shop_id=shop_id,
+        import_type="etsy",
+        file_name=file.filename,
+        raw_content=content_str,
+        record_count=0
+    )
+    db.add(history)
+    db.commit()
+    db.refresh(history)
+
+    count = 0
+    for _, row in df.iterrows():
+        order_id = str(row.get('Order ID', ''))
+        
+        # Check if order exists for THIS shop only
+        existing_order = db.query(EtsyOrder).filter(
+            EtsyOrder.shop_id == shop_id,
+            EtsyOrder.order_id == order_id
+        ).first()
+        
+        order_data = {
+            "shop_id": shop_id,
+            "order_id": order_id,
+            "sale_date": pd.to_datetime(row.get('Sale Date')).date(),
+            "full_name": clean_value(row.get('Full Name')),
+            "first_name": clean_value(row.get('First Name')),
+            "last_name": clean_value(row.get('Last Name')),
+            "buyer_user_id": safe_str(row.get('Buyer User ID'), None),
+            "street_1": clean_value(row.get('Street 1')),
+            "street_2": clean_value(row.get('Street 2')),
+            "ship_city": clean_value(row.get('Ship City')),
+            "ship_state": clean_value(row.get('Ship State')),
+            "ship_zipcode": safe_str(row.get('Ship Zipcode', ''), ''),
+            "ship_country": clean_value(row.get('Ship Country')),
+            "currency": safe_str(row.get('Currency', 'USD'), 'USD'),
+            "order_value": clean_currency(row.get('Order Value')),
+            "order_total": clean_currency(row.get('Order Total')),
+            "order_net": clean_currency(row.get('Order Net')),
+            "shipping_revenue": clean_currency(row.get('Shipping')),
+            "skus": clean_value(row.get('SKU')),
+            "import_id": history.id
+        }
+
+        if existing_order:
+            for key, value in order_data.items():
+                setattr(existing_order, key, value)
+        else:
+            new_order = EtsyOrder(**order_data)
+            db.add(new_order)
+        count += 1
+    
+    history.record_count = count
+    db.commit()
+    return {"message": f"Successfully processed {count} Etsy orders for shop"}
+
+@app.post("/api/shops/{shop_id}/upload/fulfillment")
+async def upload_fulfillment(
+    shop_id: int,
+    provider_id: int = Form(...), 
+    file: UploadFile = File(...), 
+    db: Session = Depends(get_db)
+):
+    """Upload fulfillment CSV for a specific shop"""
+    get_shop_or_404(db, shop_id)
+    
+    # Ensure provider belongs to this shop
+    provider = db.query(FulfillmentProvider).filter(
+        FulfillmentProvider.id == provider_id,
+        FulfillmentProvider.shop_id == shop_id
+    ).first()
+    if not provider:
+        raise HTTPException(status_code=404, detail="Provider not found for this shop")
+    
+    mapping = provider.mapping_config 
+    contents = await file.read()
+    content_str = contents.decode('utf-8')
+    df = pd.read_csv(io.StringIO(content_str))
+    
+    # Create History Record
+    history = ImportHistory(
+        shop_id=shop_id,
+        import_type="fulfillment",
+        file_name=file.filename,
+        raw_content=content_str,
+        record_count=0,
+        provider_id=provider.id
+    )
+    db.add(history)
+    db.commit()
+    db.refresh(history)
+
+    count = 0
+    
+    ref_id_col = mapping.get("ref_id_col")
+    cost_col = mapping.get("total_cost_col")
+    tracking_col = mapping.get("tracking_col")
+
+    for _, row in df.iterrows():
+        raw_data = row.where(pd.notnull(row), None).to_dict()
+        
+        ref_val = ""
+        if ref_id_col and ref_id_col in row:
+            ref_val = str(row[ref_id_col])
+
+        cost_val = 0.0
+        if cost_col and cost_col in row:
+            cost_val = clean_currency(row[cost_col])
+
+        track_val = ""
+        if tracking_col and tracking_col in row:
+            track_val = str(row[tracking_col])
+
+        record = FulfillmentRecord(
+            shop_id=shop_id,
+            provider_id=provider.id,
+            ref_id_value=ref_val,
+            total_cost=cost_val,
+            tracking_number=track_val,
+            raw_data=raw_data,
+            is_matched=False,
+            import_id=history.id
+        )
+        db.add(record)
+        count += 1
+        
+    history.record_count = count
+    db.commit()
+    
+    # Run matching for THIS shop only
+    match_result = run_matching_algorithm(db, shop_id)
+    
+    return {
+        "message": f"Imported {count} records", 
+        "matches_found": match_result
+    }
+
+
+# ==========================================
+# 11. SHOP-SCOPED IMPORT HISTORY ENDPOINTS
+# ==========================================
+
+@app.get("/api/shops/{shop_id}/imports")
+def get_imports(
+    shop_id: int,
+    import_type: Optional[str] = None, 
+    provider_id: Optional[int] = None, 
+    db: Session = Depends(get_db)
+):
+    """Get import history for a specific shop"""
+    get_shop_or_404(db, shop_id)
+    
+    query = db.query(ImportHistory).filter(ImportHistory.shop_id == shop_id)
+    if import_type:
+        query = query.filter(ImportHistory.import_type == import_type)
+    if provider_id:
+        query = query.filter(ImportHistory.provider_id == provider_id)
+    
+    records = query.order_by(ImportHistory.upload_date.desc()).all()
+    return [{
+        "id": r.id,
+        "date": r.upload_date,
+        "file_name": r.file_name,
+        "count": r.record_count,
+        "provider_id": r.provider_id
+    } for r in records]
+
+@app.get("/api/shops/{shop_id}/imports/{import_id}")
+def get_import_details(shop_id: int, import_id: int, db: Session = Depends(get_db)):
+    """Get import details for a specific shop"""
+    get_shop_or_404(db, shop_id)
+    
+    record = db.query(ImportHistory).filter(
+        ImportHistory.id == import_id,
+        ImportHistory.shop_id == shop_id
+    ).first()
+    if not record:
+        raise HTTPException(status_code=404, detail="Import not found for this shop")
+    return {
+        "id": record.id,
+        "file_name": record.file_name,
+        "raw_content": record.raw_content
+    }
+
+@app.delete("/api/shops/{shop_id}/imports/{import_id}")
+def delete_import(shop_id: int, import_id: int, db: Session = Depends(get_db)):
+    """Delete import for a specific shop"""
+    get_shop_or_404(db, shop_id)
+    
+    record = db.query(ImportHistory).filter(
+        ImportHistory.id == import_id,
+        ImportHistory.shop_id == shop_id
+    ).first()
+    if not record:
+        raise HTTPException(status_code=404, detail="Import not found for this shop")
+    
+    db.delete(record)
+    db.commit()
+    return {"status": "success", "message": "Import deleted"}
+
+
+# ==========================================
+# 12. SHOP-SCOPED ANALYTICS ENDPOINTS
+# ==========================================
+
+@app.get("/api/shops/{shop_id}/analytics/summary")
+def get_shop_summary(
+    shop_id: int,
+    start_date: Optional[str] = None,
+    end_date: Optional[str] = None,
+    db: Session = Depends(get_db)
+):
+    """Get comprehensive summary for a specific shop with comparison to previous period"""
+    from datetime import timedelta
+    
+    get_shop_or_404(db, shop_id)
+    
+    # Parse dates
+    current_start = None
+    current_end = None
+    if start_date:
+        current_start = datetime.strptime(start_date, "%Y-%m-%d").date()
+    if end_date:
+        current_end = datetime.strptime(end_date, "%Y-%m-%d").date()
+    
+    # Calculate previous period dates
+    prev_start = None
+    prev_end = None
+    if current_start and current_end:
+        duration = (current_end - current_start).days + 1
+        prev_end = current_start - timedelta(days=1)
+        prev_start = prev_end - timedelta(days=duration - 1)
+    
+    def calculate_period_stats(start_dt, end_dt):
+        """Calculate stats for a date range using efficient querying"""
+        # Base query with EAGER LOADING of fulfillment records to prevent N+1
+        query = db.query(EtsyOrder).options(joinedload(EtsyOrder.fulfillment_records)).filter(EtsyOrder.shop_id == shop_id)
+        
+        if start_dt and end_dt:
+            query = query.filter(EtsyOrder.sale_date >= start_dt, EtsyOrder.sale_date <= end_dt)
+            
+        orders_list = query.all()
+
+        total_revenue = sum(o.order_total for o in orders_list)
+        total_net = sum(o.order_net for o in orders_list)
+        total_cost = 0
+        fulfilled_count = 0
+        
+        for order in orders_list:
+            if order.fulfillment_records:
+                fulfilled_count += 1
+                total_cost += sum(r.total_cost for r in order.fulfillment_records)
+        
+        total_profit = total_net - total_cost
+        margin = (total_profit / total_revenue * 100) if total_revenue > 0 else 0
+        fulfillment_rate = (fulfilled_count / len(orders_list) * 100) if len(orders_list) > 0 else 0
+        avg_order_value = total_revenue / len(orders_list) if len(orders_list) > 0 else 0
+        
+        return {
+            "total_revenue": round(total_revenue, 2),
+            "total_cost": round(total_cost, 2),
+            "total_profit": round(total_profit, 2),
+            "total_orders": len(orders_list),
+            "total_fulfilled": fulfilled_count,
+            "profit_margin": round(margin, 1),
+            "fulfillment_rate": round(fulfillment_rate, 1),
+            "avg_order_value": round(avg_order_value, 2)
+        }
+    
+    # Calculate current period stats
+    current_stats = calculate_period_stats(current_start, current_end)
+    
+    # Calculate previous period stats
+    prev_stats = None
+    if prev_start and prev_end:
+        prev_stats = calculate_period_stats(prev_start, prev_end)
+    
+    # Calculate percentage changes
+    def calc_change(current, previous):
+        if previous and previous > 0:
+            return round(((current - previous) / previous) * 100, 1)
+        return None
+    
+    changes = {}
+    if prev_stats:
+        changes = {
+            "revenue_change": calc_change(current_stats["total_revenue"], prev_stats["total_revenue"]),
+            "cost_change": calc_change(current_stats["total_cost"], prev_stats["total_cost"]),
+            "profit_change": calc_change(current_stats["total_profit"], prev_stats["total_profit"]),
+            "orders_change": calc_change(current_stats["total_orders"], prev_stats["total_orders"]),
+            "fulfillment_rate_change": calc_change(current_stats["fulfillment_rate"], prev_stats["fulfillment_rate"])
+        }
+    
+    shop = db.query(Shop).filter(Shop.id == shop_id).first()
+    
+    return {
+        "shop": {
+            "id": shop.id,
+            "name": shop.name,
+            "slug": shop.slug
+        },
+        "aggregates": current_stats,
+        "changes": changes,
+        "previous_period": prev_stats
+    }
+
+@app.get("/api/shops/{shop_id}/analytics/net-profit")
+def get_profit_data(
+    shop_id: int, 
+    start_date: Optional[str] = None,
+    end_date: Optional[str] = None,
+    db: Session = Depends(get_db)
+):
+    """Get profit analytics for a specific shop"""
+    get_shop_or_404(db, shop_id)
+    
+    # OPTIMIZATION: Use joinedload to fetch fulfillment records in the SAME query
+    query = db.query(EtsyOrder).options(joinedload(EtsyOrder.fulfillment_records)).filter(EtsyOrder.shop_id == shop_id)
+    
+    # OPTIMIZATION: Filter by date at database level if provided
+    if start_date:
+        query = query.filter(EtsyOrder.sale_date >= start_date)
+    if end_date:
+        query = query.filter(EtsyOrder.sale_date <= end_date)
+        
+    results = query.all()
+    
+    data = []
+    for order in results:
+        fulfillment_recs = order.fulfillment_records
+        total_fulfillment_cost = sum(rec.total_cost for rec in fulfillment_recs)
+        net_profit = order.order_net - total_fulfillment_cost
+        
+        status = "Unfulfilled"
+        match_info = []
+        if fulfillment_recs:
+            status = "Fulfilled"
+            methods = set()
+            for r in fulfillment_recs:
+                if r.match_method:
+                    methods.add(r.match_method)
+            match_info = list(methods)
+            
+        data.append({
+            "order_id": order.order_id,
+            "internal_id": order.id,
+            "sale_date": order.sale_date,
+            "customer": order.full_name,
+            "revenue": order.order_total,
+            "etsy_net": order.order_net,
+            "cost": total_fulfillment_cost,
+            "profit": net_profit,
+            "margin": (net_profit / order.order_total * 100) if order.order_total else 0,
+            "status": status,
+            "match_info": match_info
+        })
+    return data
+
+@app.post("/api/shops/{shop_id}/actions/run-matching")
+def trigger_manual_matching(shop_id: int, db: Session = Depends(get_db)):
+    """Manually re-run matching for a specific shop"""
+    get_shop_or_404(db, shop_id)
+    count = run_matching_algorithm(db, shop_id)
+    return {"message": f"Matching completed. Found {count} new matches."}
+
+
+
+# ==========================================
+# 13. CROSS-SHOP ANALYTICS
+# ==========================================
+
+@app.get("/api/analytics/all-shops/summary")
+def get_all_shops_summary(
+    start_date: Optional[str] = None,
+    end_date: Optional[str] = None,
+    db: Session = Depends(get_db)
+):
+    """Get comprehensive summary across all shops with aggregates and comparison to previous period"""
+    from datetime import timedelta
+    
+    # Parse dates
+    current_start = None
+    current_end = None
+    if start_date:
+        current_start = datetime.strptime(start_date, "%Y-%m-%d").date()
+    if end_date:
+        current_end = datetime.strptime(end_date, "%Y-%m-%d").date()
+    
+    # Calculate previous period dates_
+    prev_start = None
+    prev_end = None
+    if current_start and current_end:
+        duration = (current_end - current_start).days + 1
+        prev_end = current_start - timedelta(days=1)
+        prev_start = prev_end - timedelta(days=duration - 1)
+    
+    # Get all active shops for mapping
+    active_shops = db.query(Shop).filter(Shop.is_active == True).all()
+    active_shop_ids = [s.id for s in active_shops]
+    shop_map = {s.id: s for s in active_shops}
+
+    def calculate_period_stats(start_dt, end_dt):
+        """Calculate stats for a specific period using efficient querying"""
+        # OPTIMIZATION: Query ORDERS directly with joinedload, instead of looping shops
+        query = db.query(EtsyOrder).options(joinedload(EtsyOrder.fulfillment_records)).filter(EtsyOrder.shop_id.in_(active_shop_ids))
+        
+        if start_dt and end_dt:
+            query = query.filter(EtsyOrder.sale_date >= start_dt, EtsyOrder.sale_date <= end_dt)
+            
+        all_orders = query.all()
+        
+        # Group by shop in Python (in-memory aggregation is fast enough for <10k items, better than N+1 queries)
+        shop_stats_map = {} 
+        
+        # Initialize map
+        for s_id in active_shop_ids:
+            shop_stats_map[s_id] = {
+                "revenue": 0, "net": 0, "cost": 0, "orders": 0, "fulfilled_count": 0
+            }
+
+        grand_totals = {
+            "total_revenue": 0, "total_cost": 0, "total_profit": 0, "total_orders": 0, "total_fulfilled": 0
+        }
+
+        for order in all_orders:
+            s_id = order.shop_id
+            if s_id not in shop_stats_map: continue
+            
+            stats = shop_stats_map[s_id]
+            
+            stats["revenue"] += order.order_total
+            stats["net"] += order.order_net
+            stats["orders"] += 1
+            
+            order_cost = 0
+            if order.fulfillment_records:
+                stats["fulfilled_count"] += 1
+                order_cost = sum(r.total_cost for r in order.fulfillment_records)
+                stats["cost"] += order_cost
+                
+            # Grand totals
+            grand_totals["total_revenue"] += order.order_total
+            grand_totals["total_cost"] += order_cost
+            grand_totals["total_profit"] += (order.order_net - order_cost)
+            grand_totals["total_orders"] += 1
+            if order.fulfillment_records:
+                grand_totals["total_fulfilled"] += 1
+
+        # Format shop summaries
+        shop_summaries = []
+        for s_id, stats in shop_stats_map.items():
+            shop = shop_map.get(s_id)
+            if not shop: continue
+            
+            shop_profit = stats["net"] - stats["cost"]
+            shop_margin = (shop_profit / stats["revenue"] * 100) if stats["revenue"] > 0 else 0
+            fulfillment_rate = (stats["fulfilled_count"] / stats["orders"] * 100) if stats["orders"] > 0 else 0
+            avg_order_value = stats["revenue"] / stats["orders"] if stats["orders"] > 0 else 0
+            
+            shop_summaries.append({
+                "shop_id": s_id,
+                "shop_name": shop.name,
+                "order_count": stats["orders"],
+                "fulfilled_count": stats["fulfilled_count"],
+                "fulfillment_rate": round(fulfillment_rate, 1),
+                "total_revenue": round(stats["revenue"], 2),
+                "total_cost": round(stats["cost"], 2),
+                "total_profit": round(shop_profit, 2),
+                "profit_margin": round(shop_margin, 1),
+                "avg_order_value": round(avg_order_value, 2)
+            })
+
+        overall_margin = (grand_totals["total_profit"] / grand_totals["total_revenue"] * 100) if grand_totals["total_revenue"] > 0 else 0
+        overall_fulfillment_rate = (grand_totals["total_fulfilled"] / grand_totals["total_orders"] * 100) if grand_totals["total_orders"] > 0 else 0
+        
+        return shop_summaries, grand_totals, overall_margin, overall_fulfillment_rate
+    
+    # Calculate current period
+    shop_summaries, grand_totals, overall_margin, overall_fulfillment_rate = calculate_period_stats(current_start, current_end)
+    
+    # Calculate previous period for comparison
+    prev_totals = None
+    if prev_start and prev_end:
+        _, prev_grand_totals, prev_margin, prev_fulfillment_rate = calculate_period_stats(prev_start, prev_end)
+        prev_totals = {
+            "total_revenue": prev_grand_totals["total_revenue"],
+            "total_cost": prev_grand_totals["total_cost"],
+            "total_profit": prev_grand_totals["total_profit"],
+            "total_orders": prev_grand_totals["total_orders"],
+            "total_fulfilled": prev_grand_totals["total_fulfilled"],
+            "overall_margin": prev_margin,
+            "overall_fulfillment_rate": prev_fulfillment_rate
+        }
+    
+    # Calculate percentage changes
+    def calc_change(current, previous):
+        if previous and previous > 0:
+            return round(((current - previous) / previous) * 100, 1)
+        return None
+    
+    changes = {}
+    if prev_totals:
+        changes = {
+            "revenue_change": calc_change(grand_totals["total_revenue"], prev_totals["total_revenue"]),
+            "cost_change": calc_change(grand_totals["total_cost"], prev_totals["total_cost"]),
+            "profit_change": calc_change(grand_totals["total_profit"], prev_totals["total_profit"]),
+            "orders_change": calc_change(grand_totals["total_orders"], prev_totals["total_orders"]),
+            "fulfillment_rate_change": calc_change(overall_fulfillment_rate, prev_totals["overall_fulfillment_rate"])
+        }
+    
+    # Sort shops by profit for ranking
+    shop_summaries.sort(key=lambda x: x["total_profit"], reverse=True)
+    
+    # Identify best/worst performers
+    best_performer = shop_summaries[0] if shop_summaries else None
+    worst_performer = shop_summaries[-1] if len(shop_summaries) > 1 else None
+    
+    return {
+        "shops": shop_summaries,
+        "aggregates": {
+            "total_revenue": round(grand_totals["total_revenue"], 2),
+            "total_cost": round(grand_totals["total_cost"], 2),
+            "total_profit": round(grand_totals["total_profit"], 2),
+            "total_orders": grand_totals["total_orders"],
+            "total_fulfilled": grand_totals["total_fulfilled"],
+            "overall_margin": round(overall_margin, 1),
+            "overall_fulfillment_rate": round(overall_fulfillment_rate, 1),
+            "shop_count": len(active_shops)
+        },
+        "changes": changes,
+        "previous_period": prev_totals,
+        "best_performer": best_performer,
+        "worst_performer": worst_performer
+    }
+
+
+@app.get("/api/analytics/all-shops/orders")
+def get_all_shops_orders(db: Session = Depends(get_db)):
+    """Get all orders from all active shops with shop info"""
+    # OPTIMIZATION: Query EtsyOrder directly with joinedload
+    orders = db.query(EtsyOrder).options(joinedload(EtsyOrder.fulfillment_records), joinedload(EtsyOrder.shop)).join(Shop).filter(Shop.is_active == True).all()
+    
+    result = []
+    for o in orders:
+        status = "Pending"
+        fulfillment_cost = 0.0
+        match_info = []
+        
+        if o.fulfillment_records:
+            status = "Shipped"
+            for rec in o.fulfillment_records:
+                fulfillment_cost += rec.total_cost
+                if rec.match_method:
+                    match_info.append(rec.match_method)
+        
+        result.append({
+            "id": o.order_id,
+            "internal_id": o.id,
+            "date": o.sale_date,
+            "customer": o.full_name,
+            "items": o.skus,
+            "total": o.order_total,
+            "status": status,
+            "fulfillment_cost": fulfillment_cost,
+            "match_info": match_info,
+            "shop_id": o.shop_id,
+            "shop_name": o.shop.name if o.shop else "Unknown"
+        })
+    
+    # Sort by date descending
+    result.sort(key=lambda x: x["date"] if x["date"] else "", reverse=True)
+    return result
+
+
+@app.get("/api/analytics/all-shops/profit")
+def get_all_shops_profit(db: Session = Depends(get_db)):
+    """Get profit data from all active shops with shop info"""
+    shops = db.query(Shop).filter(Shop.is_active == True).all()
+    
+    result = []
+    for shop in shops:
+        orders = db.query(EtsyOrder).filter(EtsyOrder.shop_id == shop.id).all()
+        
+        for order in orders:
+            fulfillment_recs = order.fulfillment_records
+            total_fulfillment_cost = sum(rec.total_cost for rec in fulfillment_recs)
+            net_profit = order.order_net - total_fulfillment_cost
+            
+            status = "Unfulfilled"
+            match_info = []
+            if fulfillment_recs:
+                status = "Fulfilled"
+                methods = set()
+                for r in fulfillment_recs:
+                    if r.match_method:
+                        methods.add(r.match_method)
+                match_info = list(methods)
+            
+            result.append({
+                "order_id": order.order_id,
+                "internal_id": order.id,
+                "sale_date": order.sale_date,
+                "customer": order.full_name,
+                "revenue": order.order_total,
+                "etsy_net": order.order_net,
+                "cost": total_fulfillment_cost,
+                "profit": net_profit,
+                "margin": (net_profit / order.order_total * 100) if order.order_total else 0,
+                "status": status,
+                "match_info": match_info,
+                "shop_id": shop.id,
+                "shop_name": shop.name
+            })
+    
+    # Sort by date descending
+    result.sort(key=lambda x: str(x["sale_date"]) if x["sale_date"] else "", reverse=True)
+    return result
+
+
+# ==========================================
+# 14. MATCHING ALGORITHM (SHOP-ISOLATED)
+# ==========================================
+
+def run_matching_algorithm(db: Session, shop_id: int):
+    """Run matching algorithm for a SPECIFIC shop only"""
+    
+    # Get unmatched records for THIS shop only
+    unmatched_records = db.query(FulfillmentRecord).filter(
+        FulfillmentRecord.shop_id == shop_id,
+        FulfillmentRecord.is_matched == False
+    ).order_by(FulfillmentRecord.id.asc()).all()
+    
+    match_count = 0
+    
+    # Get providers for THIS shop
+    providers = db.query(FulfillmentProvider).filter(
+        FulfillmentProvider.shop_id == shop_id
+    ).all()
+    provider_map = {p.id: p for p in providers}
+
+    # Session tracking (prevents double-booking within this run)
+    session_matched_ids = set()
+
+    for record in unmatched_records:
+        provider = provider_map.get(record.provider_id)
+        if not provider: 
+            continue
+        
+        mapping = provider.mapping_config
+        raw = record.raw_data
+        
+        def get_mapped_val(key):
+            col_name = mapping.get(key)
+            if col_name and col_name in raw:
+                return normalize_search_text(raw[col_name])
+            return ""
+
+        prov_id_txt = get_mapped_val("ref_id_col")
+        prov_fname_txt = get_mapped_val("first_name_col")
+        prov_lname_txt = get_mapped_val("last_name_col")
+        prov_addr_txt = get_mapped_val("address_col")
+        prov_city_txt = get_mapped_val("city_col")
+        prov_state_txt = get_mapped_val("state_col")
+
+        prov_name_context = f"{prov_fname_txt} {prov_lname_txt}"
+        prov_addr_context = f"{prov_addr_txt} {prov_city_txt} {prov_state_txt}"
+
+        candidate_orders = []
+
+        # 1. ID Search - WITHIN THIS SHOP ONLY
+        if prov_id_txt:
+            potential_ids = re.findall(r'\d{9,}', prov_id_txt)
+            for pid in potential_ids:
+                order = db.query(EtsyOrder).filter(
+                    EtsyOrder.shop_id == shop_id,  # CRITICAL: Shop isolation
+                    EtsyOrder.order_id == pid
+                ).first()
+                if order:
+                    candidate_orders.append(order)
+
+        # 2. Name Search - WITHIN THIS SHOP ONLY
+        if len(prov_name_context) > 3:
+            tokens = prov_name_context.split()
+            for t in tokens:
+                if len(t) > 3: 
+                    candidates = db.query(EtsyOrder).filter(
+                        EtsyOrder.shop_id == shop_id,  # CRITICAL: Shop isolation
+                        or_(
+                            EtsyOrder.first_name.ilike(f"%{t}%"),
+                            EtsyOrder.last_name.ilike(f"%{t}%")
+                        )
+                    ).limit(50).all()
+                    candidate_orders.extend(candidates)
+                    if len(candidate_orders) > 100: 
+                        break 
+
+        # Deduplicate
+        unique_candidates = {}
+        for c in candidate_orders:
+            unique_candidates[c.id] = c  # Use internal ID
+        candidate_orders = list(unique_candidates.values())
+
+        # Exclude already matched in this session
+        candidate_orders = [
+            c for c in candidate_orders 
+            if c.id not in session_matched_ids
+        ]
+
+        # Sort: unfulfilled first, then by date
+        def sort_key(order):
+            is_fulfilled = 1 if order.fulfillment_records else 0
+            s_date = order.sale_date if order.sale_date else datetime.max.date() 
+            return (is_fulfilled, s_date)
+        
+        candidate_orders.sort(key=sort_key)
+
+        # Verification
+        final_match = None
+        match_details = []
+
+        for cand in candidate_orders:
+            verifications = []
+            
+            etsy_id = str(cand.order_id)
+            etsy_fname = normalize_search_text(cand.first_name)
+            etsy_lname = normalize_search_text(cand.last_name)
+            etsy_addr1 = normalize_search_text(cand.street_1)
+            etsy_city = normalize_search_text(cand.ship_city)
+            etsy_state = normalize_search_text(cand.ship_state)
+
+            # A. ID Verification
+            if prov_id_txt and etsy_id in prov_id_txt:
+                verifications.append("ID")
+
+            # B. Name Verification
+            name_verified = False
+            if etsy_fname and etsy_lname:
+                if (etsy_fname in prov_name_context) and (etsy_lname in prov_name_context):
+                    name_verified = True
+                    verifications.append("Name")
+
+            # C. Address Verification
+            addr_verified = False
+            etsy_hn = extract_house_number(cand.street_1)
+            prov_hn = extract_house_number(prov_addr_context)
+            
+            hn_match = False
+            if etsy_hn and prov_hn and etsy_hn == prov_hn:
+                hn_match = True
+            
+            city_in_context = (len(etsy_city) > 2) and (etsy_city in prov_addr_context)
+            state_in_context = (len(etsy_state) >= 2) and (etsy_state in prov_addr_context)
+            
+            street_name_only = etsy_addr1.replace(etsy_hn, "").strip() if etsy_hn else etsy_addr1
+            street_in_context = (len(street_name_only) > 3) and (street_name_only in prov_addr_context)
+            
+            if hn_match:
+                if street_in_context or (city_in_context and state_in_context):
+                    addr_verified = True
+                    verifications.append("Address")
+            elif street_in_context and city_in_context:
+                addr_verified = True
+                verifications.append("Address(NoHN)")
+
+            # Final Decision
+            is_valid = False
+            if "ID" in str(verifications): 
+                is_valid = True 
+            elif name_verified and addr_verified:
+                is_valid = True
+            
+            if is_valid:
+                final_match = cand
+                match_details = verifications
+                session_matched_ids.add(cand.id)
+                break
+        
+        if final_match:
+            record.etsy_order_id = final_match.id  # Use internal ID
+            record.is_matched = True
+            record.match_method = f"{', '.join(match_details)}"
+            match_count += 1
+            
+    db.commit()
+    return match_count
+
+
+# ==========================================
+# 15. LEGACY ENDPOINTS (For backward compatibility)
+# ==========================================
+# These can be removed once frontend is fully migrated
+
+@app.get("/api/orders")
+def get_orders_legacy(db: Session = Depends(get_db)):
+    """Legacy: Get all orders (returns empty if no default shop)"""
+    return {"warning": "Please use /api/shops/{shop_id}/orders", "data": []}
+
+@app.get("/api/providers")
+def get_providers_legacy(db: Session = Depends(get_db)):
+    """Legacy: Get all providers"""
+    return {"warning": "Please use /api/shops/{shop_id}/providers", "data": []}
+
+@app.post("/api/admin/reset-database")
+def reset_database_legacy(db: Session = Depends(get_db)):
+    """Legacy: Reset entire database"""
+    try:
+        db.query(FulfillmentRecord).delete()
+        db.query(EtsyOrder).delete()
+        db.query(ImportHistory).delete()
+        db.query(FulfillmentProvider).delete()
+        db.query(Shop).delete()
+        db.commit()
+        return {"status": "success", "message": "Database has been reset completely."}
+    except Exception as e:
+        db.rollback()
+        raise HTTPException(status_code=500, detail=f"Reset failed: {str(e)}")

requirements.txt

@@ -0,0 +1,12 @@
+fastapi
+uvicorn
+python-multipart
+sqlalchemy
+psycopg2-binary
+pandas
+python-jose[cryptography]
+passlib[argon2]
+python-dotenv
+pydantic
+numpy
+requests