Feature/seller

frontend/src/App.jsx

@@ -7,8 +7,14 @@ import {
 } from './components/RoleBasedSidebar';
 import WorkspaceView from './components/WorkspaceView';
 
+
 import { CartProvider } from './context/CartContext';
 
+// Auth Pages
+import Login from './pages/shared/Login';
+import Signup from './pages/shared/Signup';
+import SellerVerification from './pages/shared/SellerVerification';
+
 // Buyer Pages
 import MapDiscovery from './pages/buyer/MapDiscovery';
 import Discover from './pages/buyer/Discover';
@@ -18,6 +24,7 @@ import ProductDetail from './pages/buyer/ProductDetail';
 import Cart from './pages/buyer/Cart';
 import Checkout from './pages/buyer/Checkout';
 import Orders from './pages/buyer/Orders';
+import BuyerProfile from './pages/buyer/BuyerProfile';
 
 // Seller Pages
 import Dashboard from './pages/seller/dashboard';
@@ -34,10 +41,43 @@ import Users from './pages/admin/users';
 import Logs from './pages/admin/logs';
 import Disputes from './pages/admin/disputes';
 
+// Admin Pages
+import Overview from './pages/admin/overview';
+import Verify from './pages/admin/verify';
+import Moderate from './pages/admin/moderate';
+import Users from './pages/admin/users';
+import Logs from './pages/admin/logs';
+import Disputes from './pages/admin/disputes';
+
 const App = () => (
+  <BrowserRouter>
+    <Routes>
+      <Route path="/admin/*" element={<RootLayout sidebarContent={<AdminSidebar />} />} >
+        <Route path="" element={<Overview />} />
+        <Route path="verify" element={<Verify />} />
+        <Route path="moderate" element={<Moderate />} />
+        <Route path="users" element={<Users />} />
+        <Route path="logs" element={<Logs />} />
+        <Route path="disputes" element={<Disputes />} />
+        <Route path="*" element={<WorkspaceView />} />
+      </Route>
+
+      <Route path="/seller/*" element={<RootLayout sidebarContent={<SellerSidebar />} />}>
+        <Route path="*" element={<WorkspaceView />} />
+      </Route>
+
+      <Route path="/*" element={<RootLayout sidebarContent={<BuyerSidebar />} />}>
+        <Route path="*" element={<WorkspaceView />} />
+      </Route>
+    </Routes>
+  </BrowserRouter>
   <CartProvider>
     <BrowserRouter>
       <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Signup />} />
+        <Route path="/verify-seller" element={<SellerVerification />} />
+
         {/* Admin Routes */}
         <Route
           path="/admin/*"
@@ -78,6 +118,7 @@ const App = () => (
           <Route path="cart" element={<Cart />} />
           <Route path="checkout" element={<Checkout />} />
           <Route path="orders" element={<Orders />} />
+          <Route path="profile" element={<BuyerProfile />} />
           <Route path="*" element={<WorkspaceView />} />
         </Route>
       </Routes>

frontend/src/components/RoleBasedSidebar.jsx

@@ -15,6 +15,7 @@
   Truck,
   DollarSign,
   Compass,
+  User,
 } from 'lucide-react';
 
 const SidebarNavItem = ({

frontend/src/components/admin/ActiveDisputeQueue.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArrowUpDown, SlidersHorizontal } from 'lucide-react';
-import Pagination from '../seller/Pagination';
+import Pagination from './Pagination';
 
 const ReasonBadge = ({ reason }) => {
   return (
@@ -17,13 +17,13 @@
       <div className="flex flex-col md:flex-row justify-between items-start md:items-center p-6 border-b border-neutral-dark/10 gap-4">
         <h2 className="text-lg font-headline font-bold text-neutral-dark">Active Dispute Queue</h2>
         <div className="flex items-center gap-4 text-neutral-dark/60">
-          <button 
+          <button
             onClick={onSortClick}
             className="text-neutral-dark/40 hover:text-neutral-dark transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
           >
             <ArrowUpDown className="w-4 h-4" />
           </button>
-          <button 
+          <button
             onClick={onFilterClick}
             className="text-neutral-dark/40 hover:text-neutral-dark transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
           >
@@ -50,8 +50,8 @@
           </thead>
           <tbody>
             {data.map((row, i) => (
-              <tr 
-                key={i} 
+              <tr
+                key={i}
                 onClick={() => onRowClick(row.id)}
                 className={`border-b border-neutral-dark/5 hover:bg-neutral-dark/5 transition-colors cursor-pointer group/row ${i === data.length - 1 ? 'border-b-0' : ''}`}
               >

frontend/src/components/admin/ApplicationsTable.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Filter, Download, ChevronRight } from 'lucide-react';
-import Pagination from '../seller/Pagination';
+import Pagination from './Pagination';
 
 const StatusBadge = ({ status }) => {
   const isFlagged = status === 'FLAGGED';
@@ -21,7 +21,7 @@
         {score}
       </div>
       <div className="h-1 w-full bg-[#EBE5D9] rounded-full overflow-hidden flex">
-        <div 
+        <div
           className={`h-full rounded-full transition-all duration-500 ${colorClass}`}
           style={{ width: `${score}%` }}
         />
@@ -37,13 +37,13 @@
       <div className="flex justify-between items-center p-6 border-b border-neutral-dark/10">
         <h2 className="text-lg font-headline font-bold text-neutral-dark">Applications Overview</h2>
         <div className="flex items-center gap-4 text-neutral-dark/60">
-          <button 
+          <button
             onClick={onFilterClick}
             className="hover:text-primary transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm p-1"
           >
             <Filter className="w-4 h-4" />
           </button>
-          <button 
+          <button
             onClick={onDownloadClick}
             className="hover:text-primary transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm p-1"
           >
@@ -67,8 +67,8 @@
           </thead>
           <tbody>
             {data.map((row, i) => (
-              <tr 
-                key={i} 
+              <tr
+                key={i}
                 onClick={() => onRowClick(row.name)}
                 className={`border-b border-neutral-dark/5 hover:bg-neutral-dark/5 transition-colors group/row cursor-pointer ${i === data.length - 1 ? 'border-b-0' : ''}`}
               >

frontend/src/components/admin/ModerationTable.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChevronDown, Download } from 'lucide-react';
-import Pagination from '../seller/Pagination';
+import Pagination from './Pagination';
 
 const ViolationBadge = ({ type }) => {
   let styleClass = "bg-neutral-dark/10 text-neutral-dark/60"; // Default
@@ -33,7 +33,7 @@ const SeverityBar = ({ score }) => {
         {score}
       </div>
       <div className="h-1 w-full bg-[#EBE5D9] rounded-full overflow-hidden flex">
-        <div 
+        <div
           className={`h-full rounded-full transition-all duration-500 ${colorClass.split(' ')[0]}`}
           style={{ width: `${score}%` }}
         />
@@ -67,22 +67,22 @@ const ModerationTable = ({ data, onFilterClick, onDownloadClick, onReviewClick }
       <div className="flex flex-col md:flex-row justify-between items-start md:items-center p-6 border-b border-neutral-dark/10 gap-4">
         <h2 className="text-lg font-headline font-bold text-neutral-dark">Moderation Queue</h2>
         <div className="flex items-center gap-4 text-neutral-dark/60">
-          <button 
+          <button
             onClick={() => onFilterClick('Violation')}
             className="flex items-center gap-2 px-3 py-1.5 rounded-md border border-neutral-dark/10 bg-neutral-dark/5 hover:bg-neutral-dark/10 text-[11px] font-sans font-bold text-neutral-dark transition-colors uppercase tracking-wider"
           >
             ALL VIOLATION TYPES
             <ChevronDown className="w-3 h-3 text-neutral-dark/50" />
           </button>
-          <button 
+          <button
             onClick={() => onFilterClick('Severity')}
             className="flex items-center gap-2 px-3 py-1.5 rounded-md border border-neutral-dark/10 bg-neutral-dark/5 hover:bg-neutral-dark/10 text-[11px] font-sans font-bold text-neutral-dark transition-colors uppercase tracking-wider"
           >
             SEVERITY: HIGH FIRST
             <ChevronDown className="w-3 h-3 text-neutral-dark/50" />
           </button>
           <div className="w-px h-5 bg-neutral-dark/10 mx-1"></div>
-          <button 
+          <button
             onClick={onDownloadClick}
             className="hover:text-primary transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm p-1"
           >
@@ -106,8 +106,8 @@ const ModerationTable = ({ data, onFilterClick, onDownloadClick, onReviewClick }
           </thead>
           <tbody>
             {data.map((row, i) => (
-              <tr 
-                key={i} 
+              <tr
+                key={i}
                 className={`border-b border-neutral-dark/5 hover:bg-neutral-dark/5 transition-colors group/row ${i === data.length - 1 ? 'border-b-0' : ''}`}
               >
                 <td className="py-5 px-6 flex items-center gap-4">
@@ -145,7 +145,7 @@ const ModerationTable = ({ data, onFilterClick, onDownloadClick, onReviewClick }
                 <td className="py-5 px-6">
                   <div className="flex items-center justify-between gap-4">
                     <StatusDisplay status={row.status} />
-                    <button 
+                    <button
                       onClick={() => onReviewClick(row.productName)}
                       className="px-4 py-1.5 rounded-md border border-neutral-dark/20 text-neutral-dark text-[11px] font-sans font-bold hover:bg-neutral-dark/5 transition-colors shadow-sm bg-background shrink-0"
                     >

frontend/src/components/admin/Pagination.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const Pagination = () => {
+  return (
+    <div className="flex items-center justify-center gap-2 mt-12 mb-8">
+      {/* Previous Button */}
+      <button className="w-8 h-8 flex items-center justify-center rounded-md border border-neutral-dark/15 text-neutral-dark/60 hover:bg-neutral-dark/5 transition-colors disabled:opacity-50" aria-label="Previous page">
+        <ChevronLeft className="w-4 h-4" />
+      </button>
+
+      {/* Page Numbers */}
+      <button className="w-8 h-8 flex items-center justify-center rounded-md bg-[#8C5233] text-white text-[13px] font-sans font-medium transition-colors">
+        1
+      </button>
+      <button className="w-8 h-8 flex items-center justify-center rounded-md border border-neutral-dark/15 text-neutral-dark/70 hover:bg-neutral-dark/5 hover:text-neutral-dark text-[13px] font-sans font-medium transition-colors">
+        2
+      </button>
+      <button className="w-8 h-8 flex items-center justify-center rounded-md border border-neutral-dark/15 text-neutral-dark/70 hover:bg-neutral-dark/5 hover:text-neutral-dark text-[13px] font-sans font-medium transition-colors">
+        3
+      </button>
+
+      {/* Ellipsis */}
+      <span className="w-8 h-8 flex items-center justify-center text-neutral-dark/50 text-[13px] font-sans">
+        ...
+      </span>
+
+      <button className="w-8 h-8 flex items-center justify-center rounded-md border border-neutral-dark/15 text-neutral-dark/70 hover:bg-neutral-dark/5 hover:text-neutral-dark text-[13px] font-sans font-medium transition-colors">
+        12
+      </button>
+
+      {/* Next Button */}
+      <button className="w-8 h-8 flex items-center justify-center rounded-md border border-neutral-dark/15 text-neutral-dark/60 hover:bg-neutral-dark/5 transition-colors" aria-label="Next page">
+        <ChevronRight className="w-4 h-4" />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

frontend/src/components/admin/TransactionLogsTable.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChevronDown, Eye } from 'lucide-react';
-import Pagination from '../seller/Pagination';
+import Pagination from './Pagination';
 
 const TypeBadge = ({ type }) => {
   return (

frontend/src/components/admin/UserDirectoryTable.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChevronDown, Pencil, Store, Ban, CheckCircle, RefreshCw } from 'lucide-react';
-import Pagination from '../seller/Pagination';
+import Pagination from './Pagination';
 
 const RoleBadge = ({ role }) => {
   return (
@@ -32,14 +32,14 @@ const UserDirectoryTable = ({ data, onFilterClick, onActionClick }) => {
       <div className="flex flex-col md:flex-row justify-between items-start md:items-center p-6 border-b border-neutral-dark/10 gap-4">
         <h2 className="text-lg font-headline font-bold text-neutral-dark">Directory</h2>
         <div className="flex items-center gap-4 text-neutral-dark/60">
-          <button 
+          <button
             onClick={() => onFilterClick('Role')}
             className="flex items-center gap-2 px-3 py-1.5 rounded-md border border-neutral-dark/10 bg-neutral-dark/5 hover:bg-neutral-dark/10 text-[11px] font-sans font-bold text-neutral-dark transition-colors uppercase tracking-wider"
           >
             ALL ROLES
             <ChevronDown className="w-3 h-3 text-neutral-dark/50" />
           </button>
-          <button 
+          <button
             onClick={() => onFilterClick('Status')}
             className="flex items-center gap-2 px-3 py-1.5 rounded-md border border-neutral-dark/10 bg-neutral-dark/5 hover:bg-neutral-dark/10 text-[11px] font-sans font-bold text-neutral-dark transition-colors uppercase tracking-wider"
           >
@@ -67,8 +67,8 @@ const UserDirectoryTable = ({ data, onFilterClick, onActionClick }) => {
           </thead>
           <tbody>
             {data.map((row, i) => (
-              <tr 
-                key={i} 
+              <tr
+                key={i}
                 className={`border-b border-neutral-dark/5 hover:bg-neutral-dark/5 transition-colors group/row ${i === data.length - 1 ? 'border-b-0' : ''}`}
               >
                 <td className="py-5 px-6 flex items-center gap-4">
@@ -96,7 +96,7 @@ const UserDirectoryTable = ({ data, onFilterClick, onActionClick }) => {
                 <td className="py-5 px-6">
                   <div className="flex items-center justify-end gap-5">
                     {/* Common Edit Action */}
-                    <button 
+                    <button
                       onClick={() => onActionClick('Edit', row.name)}
                       className="text-neutral-dark/40 hover:text-neutral-dark transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
                     >
@@ -105,14 +105,14 @@ const UserDirectoryTable = ({ data, onFilterClick, onActionClick }) => {
 
                     {/* Role-specific Action */}
                     {row.role === 'SELLER' ? (
-                      <button 
+                      <button
                         onClick={() => onActionClick('View Shop', row.name)}
                         className="text-[#8C5233] hover:text-[#7E4A2E] transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
                       >
                         <Store className="w-4 h-4" />
                       </button>
                     ) : row.status === 'PENDING' ? (
-                      <button 
+                      <button
                         onClick={() => onActionClick('Approve', row.name)}
                         className="text-primary hover:text-primary-dark transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
                       >
@@ -124,14 +124,14 @@ const UserDirectoryTable = ({ data, onFilterClick, onActionClick }) => {
 
                     {/* Status-specific Action (Suspend / Restore) */}
                     {row.status === 'SUSPENDED' ? (
-                      <button 
+                      <button
                         onClick={() => onActionClick('Restore', row.name)}
                         className="text-primary hover:text-primary-dark transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
                       >
                         <RefreshCw className="w-4 h-4" />
                       </button>
                     ) : (
-                      <button 
+                      <button
                         onClick={() => onActionClick('Suspend', row.name)}
                         className="text-destructive hover:text-red-700 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
                       >

frontend/src/index.css

@@ -431,6 +431,9 @@ h6 {
   --input: rgba(54, 46, 37, 0.15);
   --ring: #A0522D;
 
+  --muted: rgba(54, 46, 37, 0.05);
+  --muted-foreground: rgba(54, 46, 37, 0.55);
+
   --chart-1: #A0522D;
   --chart-2: #3D5A3E;
   --chart-3: #8B6914;
@@ -488,6 +491,9 @@ h6 {
   --input: rgba(245, 240, 232, 0.12);
   --ring: #C8744C;
 
+  --muted: rgba(245, 240, 232, 0.05);
+  --muted-foreground: rgba(245, 240, 232, 0.55);
+
   --sidebar: #241F1B;
   --sidebar-foreground: #F5F0E8;