diff options
Diffstat (limited to 'frontend/src/app/admin/page.js')
| -rw-r--r-- | frontend/src/app/admin/page.js | 293 |
1 files changed, 293 insertions, 0 deletions
diff --git a/frontend/src/app/admin/page.js b/frontend/src/app/admin/page.js new file mode 100644 index 0000000..9f0e737 --- /dev/null +++ b/frontend/src/app/admin/page.js @@ -0,0 +1,293 @@ +import AdminLayout from '@/components/layouts/AdminLayout'; + +export const metadata = { + title: 'Admin Dashboard - Restaurant Management System', + description: 'Admin dashboard for managing the restaurant', +}; + +const AdminDashboard = () => { + return ( + <AdminLayout> + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> + {/* Stats Card: Total Orders */} + <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md"> + <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1"> + Total Orders + </h3> + <p className="text-3xl font-bold">128</p> + <div className="mt-2 flex items-center text-sm text-green-600"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" + className="mr-1" + > + <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" /> + <polyline points="17 6 23 6 23 12" /> + </svg> + <span>12% increase</span> + </div> + </div> + + {/* Stats Card: Revenue */} + <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md"> + <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1"> + Revenue + </h3> + <p className="text-3xl font-bold">$3,240</p> + <div className="mt-2 flex items-center text-sm text-green-600"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" + className="mr-1" + > + <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" /> + <polyline points="17 6 23 6 23 12" /> + </svg> + <span>8% increase</span> + </div> + </div> + + {/* Stats Card: Customers */} + <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md"> + <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1"> + Customers + </h3> + <p className="text-3xl font-bold">64</p> + <div className="mt-2 flex items-center text-sm text-green-600"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" + className="mr-1" + > + <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" /> + <polyline points="17 6 23 6 23 12" /> + </svg> + <span>24% increase</span> + </div> + </div> + + {/* Stats Card: Reservations */} + <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md"> + <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1"> + Reservations + </h3> + <p className="text-3xl font-bold">32</p> + <div className="mt-2 flex items-center text-sm text-yellow-600"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="16" + height="16" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" + className="mr-1" + > + <line x1="5" y1="12" x2="19" y2="12" /> + </svg> + <span>Same as last week</span> + </div> + </div> + </div> + + {/* Recent Orders */} + <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md mb-8"> + <div className="p-6 border-b border-gray-200 dark:border-slate-700"> + <h2 className="text-lg font-semibold">Recent Orders</h2> + </div> + <div className="overflow-x-auto"> + <table className="w-full text-sm"> + <thead className="bg-gray-50 dark:bg-slate-700"> + <tr> + <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> + Order ID + </th> + <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> + Customer + </th> + <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> + Date + </th> + <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> + Status + </th> + <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> + Amount + </th> + </tr> + </thead> + <tbody className="divide-y divide-gray-200 dark:divide-slate-700"> + <tr> + <td className="px-6 py-4 whitespace-nowrap">#ORDER123</td> + <td className="px-6 py-4 whitespace-nowrap">John Smith</td> + <td className="px-6 py-4 whitespace-nowrap">Apr 28, 2025</td> + <td className="px-6 py-4 whitespace-nowrap"> + <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400"> + Completed + </span> + </td> + <td className="px-6 py-4 whitespace-nowrap">$128.50</td> + </tr> + <tr> + <td className="px-6 py-4 whitespace-nowrap">#ORDER122</td> + <td className="px-6 py-4 whitespace-nowrap">Sarah Johnson</td> + <td className="px-6 py-4 whitespace-nowrap">Apr 28, 2025</td> + <td className="px-6 py-4 whitespace-nowrap"> + <span className="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800/20 dark:text-yellow-400"> + Preparing + </span> + </td> + <td className="px-6 py-4 whitespace-nowrap">$75.20</td> + </tr> + <tr> + <td className="px-6 py-4 whitespace-nowrap">#ORDER121</td> + <td className="px-6 py-4 whitespace-nowrap">Michael Brown</td> + <td className="px-6 py-4 whitespace-nowrap">Apr 27, 2025</td> + <td className="px-6 py-4 whitespace-nowrap"> + <span className="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800/20 dark:text-blue-400"> + Delivered + </span> + </td> + <td className="px-6 py-4 whitespace-nowrap">$92.40</td> + </tr> + <tr> + <td className="px-6 py-4 whitespace-nowrap">#ORDER120</td> + <td className="px-6 py-4 whitespace-nowrap">Emma Wilson</td> + <td className="px-6 py-4 whitespace-nowrap">Apr 27, 2025</td> + <td className="px-6 py-4 whitespace-nowrap"> + <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400"> + Completed + </span> + </td> + <td className="px-6 py-4 whitespace-nowrap">$54.60</td> + </tr> + <tr> + <td className="px-6 py-4 whitespace-nowrap">#ORDER119</td> + <td className="px-6 py-4 whitespace-nowrap">David Clark</td> + <td className="px-6 py-4 whitespace-nowrap">Apr 26, 2025</td> + <td className="px-6 py-4 whitespace-nowrap"> + <span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800 dark:bg-red-800/20 dark:text-red-400"> + Cancelled + </span> + </td> + <td className="px-6 py-4 whitespace-nowrap">$0.00</td> + </tr> + </tbody> + </table> + </div> + </div> + + {/* Today's Reservations */} + <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md"> + <div className="p-6 border-b border-gray-200 dark:border-slate-700"> + <h2 className="text-lg font-semibold">Today's Reservations</h2> + </div> + <div className="overflow-x-auto"> + <table className="w-full text-sm"> + <thead className="bg-gray-50 dark:bg-slate-700"> + <tr> + <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> + Customer + </th> + <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> + Time + </th> + <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> + Table + </th> + <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> + Guests + </th> + <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> + Status + </th> + </tr> + </thead> + <tbody className="divide-y divide-gray-200 dark:divide-slate-700"> + <tr> + <td className="px-6 py-4 whitespace-nowrap">Jessica Lee</td> + <td className="px-6 py-4 whitespace-nowrap">12:30 PM</td> + <td className="px-6 py-4 whitespace-nowrap">Table 5</td> + <td className="px-6 py-4 whitespace-nowrap">4</td> + <td className="px-6 py-4 whitespace-nowrap"> + <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400"> + Confirmed + </span> + </td> + </tr> + <tr> + <td className="px-6 py-4 whitespace-nowrap">Robert Taylor</td> + <td className="px-6 py-4 whitespace-nowrap">1:00 PM</td> + <td className="px-6 py-4 whitespace-nowrap">Table 8</td> + <td className="px-6 py-4 whitespace-nowrap">2</td> + <td className="px-6 py-4 whitespace-nowrap"> + <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400"> + Confirmed + </span> + </td> + </tr> + <tr> + <td className="px-6 py-4 whitespace-nowrap">Maria Rodriguez</td> + <td className="px-6 py-4 whitespace-nowrap">7:00 PM</td> + <td className="px-6 py-4 whitespace-nowrap">Table 12</td> + <td className="px-6 py-4 whitespace-nowrap">6</td> + <td className="px-6 py-4 whitespace-nowrap"> + <span className="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800/20 dark:text-yellow-400"> + Pending + </span> + </td> + </tr> + <tr> + <td className="px-6 py-4 whitespace-nowrap">James Wilson</td> + <td className="px-6 py-4 whitespace-nowrap">7:30 PM</td> + <td className="px-6 py-4 whitespace-nowrap">Table 3</td> + <td className="px-6 py-4 whitespace-nowrap">2</td> + <td className="px-6 py-4 whitespace-nowrap"> + <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400"> + Confirmed + </span> + </td> + </tr> + <tr> + <td className="px-6 py-4 whitespace-nowrap">Emily Davis</td> + <td className="px-6 py-4 whitespace-nowrap">8:00 PM</td> + <td className="px-6 py-4 whitespace-nowrap">Table 7</td> + <td className="px-6 py-4 whitespace-nowrap">4</td> + <td className="px-6 py-4 whitespace-nowrap"> + <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400"> + Confirmed + </span> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </AdminLayout> + ); +}; + +export default AdminDashboard;
\ No newline at end of file |