Spaces:
Running
Running
انشئ Giedo Group يقوم بإدارة 3شركات في مصر يعمل علي اضافه 1GIEDO Digital Mall اكبر مول الكتروني في مصر يعمل علي اضافه التجار والبايعين الي المول الالكتروني الذين يريدون بيع منتجات لهم واضافه هذا صفحه خاصه لكل تاجر له صفحه داش بورد خاصه له يعرض 2 Giedo Digital Marketing اكبر شركه دعاية واعلان وتسويق وتجارة الكترونيه وبها اعلانات مبوبة وجميع خدمات سوشيال ميديا ودعاية عاليه الجوده واريد ان تربط كل هذا بإدارة صفحه داش بورد خاصه لي تقوم بإدارة الإدارة
1719308 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vendor Dashboard | GIEDO Digital Mall</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .sidebar { | |
| width: 280px; | |
| transition: all 0.3s; | |
| } | |
| .sidebar-collapsed { | |
| width: 80px; | |
| } | |
| .main-content { | |
| margin-left: 280px; | |
| transition: all 0.3s; | |
| } | |
| .main-content-collapsed { | |
| margin-left: 80px; | |
| } | |
| .active-menu { | |
| background: rgba(79, 70, 229, 0.2); | |
| border-left: 4px solid #4f46e5; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 text-gray-800"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white shadow-md fixed h-full z-10"> | |
| <div class="p-4 border-b border-gray-200 flex items-center justify-between"> | |
| <a href="digital-mall.html" class="text-xl font-bold gradient-text whitespace-nowrap">Vendor Dashboard</a> | |
| <button id="toggleSidebar" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| <div class="py-4"> | |
| <div class="px-4 py-3 flex items-center space-x-3 text-gray-700 hover:bg-gray-100"> | |
| <img src="http://static.photos/retail/200x200/5" alt="Vendor Logo" class="w-10 h-10 rounded-full object-cover"> | |
| <div> | |
| <p class="font-medium">Tech Haven</p> | |
| <p class="text-sm text-gray-500">Premium Electronics</p> | |
| </div> | |
| </div> | |
| <nav class="mt-6"> | |
| <a href="#" class="flex items-center px-4 py-3 text-gray-700 active-menu"> | |
| <i data-feather="home" class="w-5 h-5"></i> | |
| <span class="ml-3">Dashboard</span> | |
| </a> | |
| <a href="vendor-products.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="box" class="w-5 h-5"></i> | |
| <span class="ml-3">Products</span> | |
| <span class="ml-auto bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">24</span> | |
| </a> | |
| <a href="vendor-orders.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="shopping-bag" class="w-5 h-5"></i> | |
| <span class="ml-3">Orders</span> | |
| <span class="ml-auto bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">15</span> | |
| </a> | |
| <a href="vendor-customers.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="users" class="w-5 h-5"></i> | |
| <span class="ml-3">Customers</span> | |
| </a> | |
| <a href="vendor-analytics.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> | |
| <span class="ml-3">Analytics</span> | |
| </a> | |
| <a href="vendor-promotions.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="tag" class="w-5 h-5"></i> | |
| <span class="ml-3">Promotions</span> | |
| </a> | |
| <a href="vendor-settings.html" class="flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="settings" class="w-5 h-5"></i> | |
| <span class="ml-3">Settings</span> | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="absolute bottom-0 w-full p-4 border-t border-gray-200"> | |
| <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded"> | |
| <i data-feather="log-out" class="w-5 h-5"></i> | |
| <span class="ml-3">Logout</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content flex-1 overflow-auto"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <h1 class="text-2xl font-bold">Dashboard Overview</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i data-feather="bell"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i data-feather="message-square"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <img src="http://static.photos/people/200x200/1" alt="User" class="w-8 h-8 rounded-full"> | |
| <span class="font-medium">Ahmed Mohamed</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="p-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Total Revenue</p> | |
| <h3 class="text-2xl font-bold">EGP 24,589</h3> | |
| <p class="text-green-500 text-sm flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| <span>12% from last month</span> | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i data-feather="dollar-sign" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Total Orders</p> | |
| <h3 class="text-2xl font-bold">156</h3> | |
| <p class="text-green-500 text-sm flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| <span>8% from last month</span> | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i data-feather="shopping-bag" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Products</p> | |
| <h3 class="text-2xl font-bold">24</h3> | |
| <p class="text-red-500 text-sm flex items-center"> | |
| <i data-feather="trending-down" class="w-4 h-4 mr-1"></i> | |
| <span>2 less than last month</span> | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i data-feather="box" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Conversion Rate</p> | |
| <h3 class="text-2xl font-bold">3.2%</h3> | |
| <p class="text-green-500 text-sm flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| <span>0.5% from last month</span> | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i data-feather="percent" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Row --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <!-- Sales Chart --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold">Sales Overview</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-purple-600 text-white rounded">Weekly</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded">Monthly</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded">Yearly</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="salesChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Orders Chart --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold">Orders Overview</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-purple-600 text-white rounded">Weekly</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded">Monthly</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded">Yearly</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="ordersChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Orders --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb -8"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-bold">Recent Orders</h3> | |
| <a href="vendor-orders.html" class="text-purple-600 hover:text-purple-800 text-sm font-medium">View All</a> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-7854</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mohamed Ali</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 Oct, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 1,245</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-purple-600 hover:text-purple-900"><i data-feather="eye" class="w-4 h-4"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-7853</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ahmed Hassan</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11 Oct, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 899</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Processing</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-purple-600 hover:text-purple-900"><i data-feather="eye" class="w-4 h-4"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-7852</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yasmine Adel</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10 Oct, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 2,345</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Shipped</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-purple-600 hover:text-purple-900"><i data-feather="eye" class="w-4 h-4"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-7851</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mostafa Kamal</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9 Oct, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 450</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Cancelled</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-purple-600 hover:text-purple-900"><i data-feather="eye" class="w-4 h-4"></i></a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Top Products --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-bold">Top Selling Products</h3> | |
| <a href="vendor-products.html" class="text-purple-600 hover:text-purple-800 text-sm font-medium">View All</a> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sold</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Revenue</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rating</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded" src="http://static.photos/technology/200x200/1" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Wireless Headphones Pro</div> | |
| <div class="text-sm text-gray-500">Electronics</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 1,299</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">45</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 58,455</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <span class="ml-1 text-sm text-gray-500">(24)</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-purple-600 hover:text-purple-900 mr-3"><i data-feather="edit" class="w-4 h-4"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i data-feather="trash-2" class="w-4 h-4"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded" src="http://static.photos/technology/200x200/2" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Smart Watch X3</div> | |
| <div class="text-sm text-gray-500">Electronics</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 2,499</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 79,968</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <span class="ml-1 text-sm text-gray-500">(18)</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-purple-600 hover:text-purple-900 mr-3"><i data-feather="edit" class="w-4 h-4"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i data-feather="trash-2" class="w-4 h-4"></i></a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded" src="http://static.photos/technology/200x200/3" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Bluetooth Speaker</div> | |
| <div class="text-sm text-gray-500">Electronics</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 899</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 25,172</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <span class="ml-1 text-sm text-gray-500">(15)</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-purple-600 hover:text-purple-900 mr-3"><i data-feather="edit" class="w-4 h-4"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-900"><i data-feather="trash-2" class="w-4 h-4"></i></a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Toggle Sidebar | |
| document.getElementById('toggleSidebar').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('sidebar-collapsed'); | |
| document.querySelector('.main-content').classList.toggle('main-content-collapsed'); | |
| // Update all feather icons | |
| setTimeout(() => { | |
| feather.replace(); | |
| }, 300); | |
| }); | |
| // Sales Chart | |
| const salesCtx = document.getElementById('salesChart').getContext('2d'); | |
| const salesChart = new Chart(salesCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], | |
| datasets: [{ | |
| label: 'Sales (EGP)', | |
| data: [12000, 19000, 15000, 18000, 17000, 22000, 21000, 25000, 23000, 28000], | |
| backgroundColor: 'rgba(79, 70, 229, 0.1)', | |
| borderColor: 'rgba(79, 70, 229, 1)', | |
| borderWidth: 2, | |
| tension: 0.3, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| drawBorder: false | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Orders Chart | |
| const ordersCtx = document.getElementById('ordersChart').getContext('2d'); | |
| const ordersChart = new Chart(ordersCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], | |
| datasets: [{ | |
| label: 'Orders', | |
| data: [45, 60, 50, 55, 60, 70, 65, 80, 75, 90], | |
| backgroundColor: 'rgba(99, 102, 241, 0.7)', | |
| borderColor: 'rgba(99, 102, 241, 1)', | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| drawBorder: false | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |