rdodiya · imSubhro · May 13, 2026 · May 16, 2026 · May 16, 2026 · May 16, 2026
diff --git a/RestroHub-FrontEnd/index.html b/RestroHub-FrontEnd/index.html
@@ -7,8 +7,8 @@
     <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=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="@styles/variables.css">
-    <link rel="stylesheet" href="@styles/global.css">
+    <link rel="stylesheet" href="/src/styles/variables.css">
+    <link rel="stylesheet" href="/src/styles/global.css">
 </head>
 <body>
     <div id="root"></div>

diff --git a/RestroHub-FrontEnd/package-lock.json b/RestroHub-FrontEnd/package-lock.json
diff --git a/RestroHub-FrontEnd/src/App.jsx b/RestroHub-FrontEnd/src/App.jsx
@@ -3,6 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 import AppRoutes from './routes';
 import { ThemeProvider } from '@context/ThemeContext';
 import './index.css';
+import './styles/global.css';
 
 function App() {
   return (

diff --git a/RestroHub-FrontEnd/src/components/admin/dashboard/cards/LiveOrders.jsx b/RestroHub-FrontEnd/src/components/admin/dashboard/cards/LiveOrders.jsx
@@ -131,7 +131,7 @@ const LiveOrders = () => {
   // RENDER
   // ------------------------------------
   return (
-    <div className={`lg:col-span-2 rounded-2xl p-6 shadow-sm border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-100'}`}>
+    <div className={`lg:col-span-2 rounded-2xl p-6 shadow-sm border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
       {/* Header */}
       <div className="flex items-center justify-between mb-6">
         <div className="flex items-center gap-3">

diff --git a/RestroHub-FrontEnd/src/components/admin/dashboard/cards/QuickActions.jsx b/RestroHub-FrontEnd/src/components/admin/dashboard/cards/QuickActions.jsx
@@ -167,7 +167,7 @@ const QuickActions = () => {
   // RENDER
   // ------------------------------------
   return (
-    <div className={`rounded-2xl p-6 shadow-sm border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-100'}`}>
+    <div className={`rounded-2xl p-6 shadow-sm border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
       <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-gray-100' : 'text-gray-800'}`}>Quick Actions</h2>
       <div className="flex flex-wrap gap-3">
         {actions.map((action) => (

diff --git a/RestroHub-FrontEnd/src/components/admin/dashboard/cards/RevenueChart.jsx b/RestroHub-FrontEnd/src/components/admin/dashboard/cards/RevenueChart.jsx
@@ -67,7 +67,7 @@ const RevenueChart = () => {
   // RENDER
   // ------------------------------------
   return (
-    <div className={`rounded-2xl p-6 shadow-sm border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-100'}`}>
+    <div className={`rounded-2xl p-6 shadow-sm border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
       {/* Header */}
       <div className="flex items-center justify-between mb-6">
         <h2 className={`text-lg font-semibold ${isDark ? 'text-gray-100' : 'text-gray-800'}`}>Revenue (30 Days)</h2>

diff --git a/RestroHub-FrontEnd/src/components/admin/dashboard/cards/StatsSection.jsx b/RestroHub-FrontEnd/src/components/admin/dashboard/cards/StatsSection.jsx
@@ -26,7 +26,7 @@ const StatCard = ({ title, value, change, positive, subtitle, icon: Icon, color,
   };
 
   return (
-    <div className={`rounded-2xl p-6 shadow-sm border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-100'}`}>
+    <div className={`rounded-2xl p-6 shadow-sm border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
       <div className="flex items-center justify-between mb-4">
         <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${colorClasses[color]}`}>
           <Icon className="w-6 h-6" />
@@ -71,7 +71,7 @@ const StatCard = ({ title, value, change, positive, subtitle, icon: Icon, color,
 const StatCardSkeleton = () => {
   const { isDark } = useAdminTheme();
   return (
-    <div className={`rounded-2xl p-6 shadow-sm border animate-pulse ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-100'}`}>
+    <div className={`rounded-2xl p-6 shadow-sm border animate-pulse ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
       <div className="flex items-center justify-between mb-4">
         <div className={`w-12 h-12 rounded-xl ${isDark ? 'bg-gray-700' : 'bg-gray-200'}`} />
         <div className={`w-16 h-5 rounded ${isDark ? 'bg-gray-700' : 'bg-gray-200'}`} />

diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/BulkActions.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/BulkActions.jsx
@@ -99,7 +99,7 @@ const BulkActions = ({ onRefresh }) => {
             key={action.id}
             onClick={action.onClick}
             disabled={isLoading}
-            className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-xl hover:bg-blue-50 hover:border-blue-200 hover:text-blue-600 text-sm transition-all disabled:opacity-50"
+            className="flex items-center gap-2 px-4 py-2 text-gray-500 bg-white border border-gray-200 rounded-xl hover:bg-blue-50 hover:border-blue-200 hover:text-blue-600 text-sm transition-all disabled:opacity-50"
           >
             {isLoading ? (
               <Loader2 className="w-4 h-4 animate-spin" />

diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx
@@ -1,24 +1,29 @@
 import { useState, useEffect } from 'react';
 import { ChevronRight, RefreshCw, FolderPlus } from 'lucide-react';
 import api from "@services/common/api";
+import { useAdminTheme } from '@context/AdminThemeContext';
 
 // ============================================
 // SKELETON (Private)
 // ============================================
-const CategorySkeleton = () => (
-  <div className="space-y-2">
-    {[1, 2, 3, 4].map(i => (
-      <div key={i} className="h-12 bg-gray-100 rounded-xl animate-pulse" />
-    ))}
-  </div>
-);
+const CategorySkeleton = () => {
+  const { isDark } = useAdminTheme();
+  return (
+    <div className="space-y-2">
+      {[1, 2, 3, 4].map(i => (
+        <div key={i} className={`h-12 rounded-xl animate-pulse ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`} />
+      ))}
+    </div>
+  );
+};
 
 // ============================================
 // MAIN COMPONENT
 // ============================================
 const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, setAllCategories }) => {
   const [categories, setCategories] = useState([]);
   const [loading, setLoading] = useState(true);
+  const { isDark } = useAdminTheme();
 
   // ------------------------------------
   // FALLBACK DATA
@@ -64,13 +69,13 @@ const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, se
   // ------------------------------------
   return (
     <div className="lg:w-64 flex-shrink-0">
-      <div className="bg-white rounded-2xl p-4 shadow-sm border border-gray-100">
+      <div className={`rounded-2xl p-4 shadow-sm border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
         {/* Header */}
         <div className="flex items-center justify-between mb-4">
-          <h2 className="font-semibold text-gray-800">Categories</h2>
+          <h2 className={`font-semibold ${isDark ? 'text-gray-100' : 'text-gray-800'}`}>Categories</h2>
           <button
             onClick={fetchCategories}
-            className="text-gray-400 hover:text-blue-600 transition-colors"
+            className={`transition-colors ${isDark ? 'text-gray-500 hover:text-blue-400' : 'text-gray-400 hover:text-blue-600'}`}
           >
             <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
           </button>
@@ -87,7 +92,7 @@ const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, se
                 onClick={() => onCategoryChange(cat.categoryId)}
                 className={`w-full flex items-center justify-between p-3 rounded-xl transition-all ${selectedCategory === cat.categoryId
                   ? 'bg-blue-600 text-white shadow-md shadow-blue-200'
-                  : 'hover:bg-blue-50 text-gray-600'
+                  : isDark ? 'hover:bg-gray-700 text-gray-400' : 'hover:bg-blue-50 text-gray-600'
                   }`}
               >
                 <div className="flex items-center gap-3">
@@ -101,7 +106,7 @@ const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, se
                   >
                     {cat.foodIds.length}
                   </span>
-                  <ChevronRight className="w-4 h-4" />
+                  <ChevronRight className={`w-4 h-4 ${selectedCategory === cat.categoryId ? 'text-white/70' : isDark ? 'text-gray-600' : 'text-gray-400'}`} />
                 </div>
               </button>
             ))}
@@ -111,7 +116,7 @@ const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, se
         {/* Add Category */}
         <button
           onClick={onAddCategory}
-          className="w-full mt-4 flex items-center justify-center gap-2 p-3 border-2 border-dashed border-gray-200 rounded-xl text-gray-400 hover:border-blue-300 hover:text-blue-500 transition-all text-sm"
+          className={`w-full mt-4 flex items-center justify-center gap-2 p-3 border-2 border-dashed rounded-xl transition-all text-sm ${isDark ? 'border-gray-600 text-gray-500 hover:border-blue-500 hover:text-blue-400' : 'border-gray-200 text-gray-400 hover:border-blue-300 hover:text-blue-500'}`}
         >
           <FolderPlus className="w-4 h-4" />
           Add Category

diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemCard.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemCard.jsx
@@ -10,10 +10,12 @@ import {
   Loader2
 } from 'lucide-react';
 import api from "@services/common/api";
+import { useAdminTheme } from '@context/AdminThemeContext';
 
 const MenuItemCard = ({ item, onEdit, onToggle, onDelete }) => {
   const [togglingAvailability, setTogglingAvailability] = useState(false);
   const [deleting, setDeleting] = useState(false);
+  const { isDark } = useAdminTheme();
 
   // ------------------------------------
   // HANDLERS
@@ -62,8 +64,8 @@ const MenuItemCard = ({ item, onEdit, onToggle, onDelete }) => {
   return (
     <div
       className={`
-        bg-white rounded-2xl shadow-sm border border-gray-100
-        hover:shadow-md hover:border-blue-100 transition-all
+        rounded-2xl shadow-sm border transition-all
+        ${isDark ? 'bg-gray-800 border-gray-700 hover:border-gray-600 hover:shadow-md' : 'bg-white border-gray-200 hover:shadow-md hover:border-blue-100'}
         ${!item.isAvailable ? 'opacity-70' : ''}
 
         /* MOBILE: vertical stack with padding */
@@ -81,7 +83,8 @@ const MenuItemCard = ({ item, onEdit, onToggle, onDelete }) => {
       {/* ================================= */}
       <div
         className={`
-          relative bg-blue-50 rounded-xl flex items-center justify-center overflow-hidden border border-blue-100/50
+          relative rounded-xl flex items-center justify-center overflow-hidden border
+          ${isDark ? 'bg-gray-700 border-gray-600' : 'bg-blue-50 border-blue-100/50'}
 
           /* MOBILE: full width, shorter */
           w-full h-36 mb-3
@@ -123,7 +126,7 @@ const MenuItemCard = ({ item, onEdit, onToggle, onDelete }) => {
         {/* Header: Name + Price + More button */}
         <div className="flex items-start justify-between mb-2 sm:mb-1.5 lg:mb-3">
           <div className="min-w-0 flex-1">
-            <h3 className="font-semibold text-gray-900 text-base sm:text-sm lg:text-base truncate">
+            <h3 className={`font-semibold text-base sm:text-sm lg:text-base truncate ${isDark ? 'text-gray-100' : 'text-gray-900'}`}>
               {item.name}
             </h3>
             <p className="text-lg sm:text-base lg:text-lg font-bold text-blue-600">
@@ -137,7 +140,7 @@ const MenuItemCard = ({ item, onEdit, onToggle, onDelete }) => {
 
         {/* Stock Info */}
         <div className="flex items-center justify-between mb-3 sm:mb-2 lg:mb-4">
-          <span className="text-sm sm:text-xs lg:text-sm text-gray-600">
+          <span className={`text-sm sm:text-xs lg:text-sm ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
             Avalilablity :
           </span>
           <span

diff --git a/RestroHub-FrontEnd/src/index.css b/RestroHub-FrontEnd/src/index.css
@@ -5,7 +5,7 @@
 
 @layer base {
   body {
-    @apply antialiased bg-gray-50 dark:bg-slate-900;
+    @apply antialiased bg-gray-50 dark:bg-gray-800;
   }
 }
 

diff --git a/RestroHub-FrontEnd/src/index.jsx b/RestroHub-FrontEnd/src/index.jsx
@@ -1,15 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
-
-// ============================================
-// APPLICATION ENTRY POINT
-// ============================================
+import { GoogleOAuthProvider } from '@react-oauth/google';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
+  <React.StrictMode>
+    <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID || ''}>
+      <App />
+    </GoogleOAuthProvider>
+  </React.StrictMode>
 );
diff --git a/RestroHub-FrontEnd/src/layouts/AdminLayout.jsx b/RestroHub-FrontEnd/src/layouts/AdminLayout.jsx
@@ -25,7 +25,7 @@ const AdminLayout = () => {
           onCollapseToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
         />
 
-        <main className={`flex-1 overflow-y-auto overflow-x-hidden ${isDark ? 'bg-gray-900' : ''}`}>
+        <main className={`admin-content flex-1 overflow-y-auto overflow-x-hidden ${isDark ? 'bg-gray-900' : ''}`}>
           <div className="mx-auto max-w-screen-2xl p-4 sm:p-5 lg:p-6 2xl:p-8">
             <Outlet />
           </div>

diff --git a/RestroHub-FrontEnd/src/main.jsx b/RestroHub-FrontEnd/src/main.jsx
@@ -3,14 +3,12 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
-import { GoogleOAuthProvider } from "@react-oauth/google";
-<GoogleOAuthProvider clientId="YOUR_GOOGLE_CLIENT_ID"> 
-  <App /> 
-</GoogleOAuthProvider>
+import { GoogleOAuthProvider } from '@react-oauth/google';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID} > 
-      <App /> 
-      </GoogleOAuthProvider> 
-      </React.StrictMode> );
+    <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID || ''}>
+      <App />
+    </GoogleOAuthProvider>
+  </React.StrictMode>
+);
diff --git a/RestroHub-FrontEnd/src/styles/global.css b/RestroHub-FrontEnd/src/styles/global.css
@@ -299,3 +299,35 @@ select.input option {
     border-color: rgba(0, 0, 0, 0.08);
     border-top-color: var(--color-primary);
 }
+
+/* ============================================
+   PASSWORD INPUT — hide browser native eye icon
+   ============================================ */
+
+/* Edge */
+input[type="password"]::-ms-reveal,
+input[type="password"]::-ms-clear {
+    display: none !important;
+}
+
+/* ============================================
+   ADMIN DARK MODE — force dark backgrounds & light text
+   Overrides hardcoded bg-white / bg-gray-50 and dark text
+   on all admin panel components when dark mode is active.
+   ============================================ */
+
+.dark .admin-content .bg-white,
+.dark .admin-content .bg-gray-50 {
+    background-color: rgb(31 41 55) !important;
+}
+
+.dark .admin-content .text-gray-900,
+.dark .admin-content .text-gray-800,
+.dark .admin-content .text-gray-700 {
+    color: rgb(243 244 246) !important; /* gray-100 */
+}
+
+.dark .admin-content .text-gray-600,
+.dark .admin-content .text-gray-500 {
+    color: rgb(209 213 219) !important; /* gray-300 */
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ @@
     @layer base {
       body {
-        @apply antialiased bg-gray-50 dark:bg-slate-900;
+        @apply antialiased bg-gray-50 dark:bg-gray-800;
       }
     }
@@ Expand Down @@