src/app/admin/page.tsx

@@ -7,65 +7,53 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 import { useState } from 'react';
 
 export default function AdminDashboardPage() {
-  const [appointments, setAppointments] = useState([
-    { id: "1", client: "John Doe", service: "Precision Fade", time: "10:00 AM", status: "Confirmed" },
-    { id: "2", client: "Mike Smith", service: "Hot Towel Shave", time: "11:30 AM", status: "Confirmed" },
-  ]);
-
-  const handleCancel = (id: string) => {
-    setAppointments(appointments.filter(app => app.id !== id));
-  };
+  const [activeTab, setActiveTab] = useState('appointments');
 
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="background-highlight"
-      borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="floatingGradient"
-      cardStyle="gradient-bordered"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="normal"
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="floatingGradient"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[{ name: "Home", id: "/" }, { name: "Admin", id: "/admin" }]}
-          brandName="Elite Grooming"
-        />
-        <main className="pt-32 pb-20 px-6 max-w-5xl mx-auto min-h-screen">
-          <h1 className="text-4xl font-bold mb-8">Appointment Management</h1>
-          <div className="bg-card p-6 rounded-lg border shadow-sm">
-            <table className="w-full text-left">
-              <thead>
-                <tr className="border-b">
-                  <th className="pb-4">Client</th>
-                  <th className="pb-4">Service</th>
-                  <th className="pb-4">Time</th>
-                  <th className="pb-4">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {appointments.map((app) => (
-                  <tr key={app.id} className="border-b last:border-0">
-                    <td className="py-4">{app.client}</td>
-                    <td className="py-4">{app.service}</td>
-                    <td className="py-4">{app.time}</td>
-                    <td className="py-4">
-                      <button onClick={() => handleCancel(app.id)} className="text-red-500 hover:underline">Cancel</button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Appointments", id: "appointments" },
+              { name: "Schedule", id: "schedule" },
+              { name: "Services", id: "services" },
+              { name: "Customers", id: "customers" }
+            ]}
+            brandName="Admin Panel"
+          />
+        </div>
+
+        <main className="pt-32 pb-20 px-6 min-h-screen container mx-auto">
+          <h1 className="text-4xl font-bold mb-8">Dashboard: {activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}</h1>
+          <div className="grid gap-8">
+            <div className="p-8 bg-card rounded-xl border border-border shadow-sm">
+              <p className="text-muted-foreground">Admin management tools for {activeTab} will be implemented here.</p>
+            </div>
           </div>
         </main>
-        <FooterBase
-          logoText="Elite Grooming"
-          columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }] }]}
-        />
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Elite Grooming"
+            columns={[
+              { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Dashboard", href: "/admin" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}