Refactor code structure and remove redundant changes

2025-12-22 20:11:12 -05:00 · 2025-11-09 16:31:34 -05:00
parent 2884bc23ce
commit eb68cf40c6
1080 changed files with 27361 additions and 56687 deletions
--- a/src-old/pages/UserSettings.tsx
+++ b/src-old/pages/UserSettings.tsx
@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Settings, User, Shield, Eye, Bell, MapPin, Download } from 'lucide-react';
+import { useAuth } from '@/hooks/useAuth';
+import { useProfile } from '@/hooks/useProfile';
+import { Navigate } from 'react-router-dom';
+import { Header } from '@/components/layout/Header';
+import { AccountProfileTab } from '@/components/settings/AccountProfileTab';
+import { SecurityTab } from '@/components/settings/SecurityTab';
+import { PrivacyTab } from '@/components/settings/PrivacyTab';
+import { NotificationsTab } from '@/components/settings/NotificationsTab';
+import { LocationTab } from '@/components/settings/LocationTab';
+import { DataExportTab } from '@/components/settings/DataExportTab';
+
+export default function UserSettings() {
+  const { user, loading: authLoading } = useAuth();
+  const { data: profile, isLoading: profileLoading } = useProfile(user?.id);
+  const [activeTab, setActiveTab] = useState('profile');
+  
+  const loading = authLoading || profileLoading;
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Header />
+        <div className="container mx-auto px-4 py-8">
+          <div className="max-w-4xl mx-auto">
+            <div className="animate-pulse">
+              <div className="h-8 bg-muted rounded w-48 mb-6"></div>
+              <div className="h-96 bg-muted rounded"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/auth" replace />;
+  }
+
+  const tabs = [
+    {
+      id: 'profile',
+      label: 'Account & Profile',
+      icon: User,
+      component: AccountProfileTab
+    },
+    {
+      id: 'security',
+      label: 'Security',
+      icon: Shield,
+      component: SecurityTab
+    },
+    {
+      id: 'privacy',
+      label: 'Privacy',
+      icon: Eye,
+      component: PrivacyTab
+    },
+    {
+      id: 'notifications',
+      label: 'Notifications',
+      icon: Bell,
+      component: NotificationsTab
+    },
+    {
+      id: 'location',
+      label: 'Location & Info',
+      icon: MapPin,
+      component: LocationTab
+    },
+    {
+      id: 'data',
+      label: 'Data & Export',
+      icon: Download,
+      component: DataExportTab
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-7xl mx-auto">
+          {/* Header */}
+          <div className="flex items-center gap-3 mb-8">
+            <Settings className="w-8 h-8 text-primary" />
+            <div>
+              <h1 className="text-3xl font-bold">Settings</h1>
+              <p className="text-muted-foreground">Manage your account preferences and privacy settings</p>
+            </div>
+          </div>
+
+          {/* Settings Tabs */}
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
+            <TabsList className="grid w-full grid-cols-2 lg:grid-cols-6 h-auto p-1">
+              {tabs.map((tab) => {
+                const Icon = tab.icon;
+                return (
+                  <TabsTrigger
+                    key={tab.id}
+                    value={tab.id}
+                    className="flex flex-col sm:flex-row items-center gap-2 h-auto py-3 px-2 text-xs sm:text-sm"
+                  >
+                    <Icon className="w-4 h-4" />
+                    <span className="hidden sm:inline lg:inline">{tab.label}</span>
+                    <span className="sm:hidden lg:hidden">{tab.label.split(' ')[0]}</span>
+                  </TabsTrigger>
+                );
+              })}
+            </TabsList>
+
+            {tabs.map((tab) => {
+              const Component = tab.component;
+              return (
+                <TabsContent
+                  key={tab.id}
+                  value={tab.id}
+                  className="focus-visible:outline-none"
+                >
+                  <Component />
+                </TabsContent>
+              );
+            })}
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  );
+}