Spaces:
Running
Running
انشئ Giedo Group يقوم بإدارة 3شركات في مصر يعمل علي اضافه 1GIEDO Digital Mall اكبر مول الكتروني في مصر يعمل علي اضافه التجار والبايعين الي المول الالكتروني الذين يريدون بيع منتجات لهم واضافه هذا صفحه خاصه لكل تاجر له صفحه داش بورد خاصه له يعرض 2 Giedo Digital Marketing اكبر شركه دعاية واعلان وتسويق وتجارة الكترونيه وبها اعلانات مبوبة وجميع خدمات سوشيال ميديا ودعاية عاليه الجوده واريد ان تربط كل هذا بإدارة صفحه داش بورد خاصه لي تقوم بإدارة الإدارة
83664b2 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Giedo Group Dashboard</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 { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 80px; | |
| } | |
| .sidebar.collapsed .nav-text { | |
| display: none; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-100 text-gray-900 overflow-hidden"> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col"> | |
| <div class="p-4 flex items-center justify-between border-b border-gray-800"> | |
| <a href="#" class="text-xl font-bold gradient-text">Giedo Dashboard</a> | |
| <button id="toggleSidebar" class="text-gray-400 hover:text-white"> | |
| <i data-feather="chevron-left"></i> | |
| </button> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto p-4"> | |
| <div class="space-y-2"> | |
| <div class="text-xs uppercase text-gray-500 mb-2">Main</div> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-purple-300"> | |
| <i data-feather="home"></i> | |
| <span class="nav-text">Dashboard</span> | |
| </a> | |
| <div class="text-xs uppercase text-gray-500 mb-2 mt-4">Digital Mall</div> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="shopping-bag"></i> | |
| <span class="nav-text">Products</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="dollar-sign"></i> | |
| <span class="nav-text">Sales</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="users"></i> | |
| <span class="nav-text">Customers</span> | |
| </a> | |
| <div class="text-xs uppercase text-gray-500 mb-2 mt-4">Digital Marketing</div> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="bar-chart-2"></i> | |
| <span class="nav-text">Campaigns</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="trending-up"></i> | |
| <span class="nav-text">Analytics</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="edit"></i> | |
| <span class="nav-text">Content</span> | |
| </a> | |
| <div class="text-xs uppercase text-gray-500 mb-2 mt-4">Administration</div> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="settings"></i> | |
| <span class="nav-text">Settings</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="user"></i> | |
| <span class="nav-text">Account</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-gray-800"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| </div> | |
| <div class="nav-text"> | |
| <div class="font-medium">Admin User</div> | |
| <div class="text-xs text-gray-400">Super Admin</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Topbar --> | |
| <header class="bg-white border-b border-gray-200 p-4 flex items-center justify-between"> | |
| <h1 class="text-2xl font-bold gradient-text">Management Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i data-feather="bell" class="text-gray-600 hover:text-purple-600 cursor-pointer"></i> | |
| <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span> | |
| </div> | |
| <button class="flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg"> | |
| <span class="text-sm font-medium">Quick Actions</span> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Content --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-gray-500 font-medium">Total Revenue</h3> | |
| <i data-feather="dollar-sign" class="text-purple-500"></i> | |
| </div> | |
| <div class="text-3xl font-bold mb-2">EGP 254,870</div> | |
| <div class="text-sm text-green-500 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| <span>12% from last month</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-gray-500 font-medium">Digital Mall Orders</h3> | |
| <i data-feather="shopping-bag" class="text-blue-500"></i> | |
| </div> | |
| <div class="text-3xl font-bold mb-2">1,248</div> | |
| <div class="text-sm text-green-500 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| <span>8% from last month</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-gray-500 font-medium">Marketing Campaigns</h3> | |
| <i data-feather="bar-chart-2" class="text-yellow-500"></i> | |
| </div> | |
| <div class="text-3xl font-bold mb-2">27</div> | |
| <div class="text-sm text-red-500 flex items-center"> | |
| <i data-feather="trending-down" class="w-4 h-4 mr-1"></i> | |
| <span>3 inactive</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-gray-500 font-medium">Active Merchants</h3> | |
| <i data-feather="users" class="text-green-500"></i> | |
| </div> | |
| <div class="text-3xl font-bold mb-2">5,421</div> | |
| <div class="text-sm text-green-500 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| <span>156 new this month</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold">Revenue Overview</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-purple-100 text-purple-600 rounded-full">Monthly</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Yearly</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="revenueChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold">Top Performing Products</h3> | |
| <button class="text-sm text-purple-600 hover:text-purple-800">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="smartphone" class="text-blue-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Smartphone X</div> | |
| <div class="text-sm text-gray-500">Electronics</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-medium">EGP 1,248</div> | |
| <div class="text-sm text-green-500">+24%</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="watch" class="text-purple-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Premium Watch</div> | |
| <div class="text-sm text-gray-500">Accessories</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-medium">EGP 899</div> | |
| <div class="text-sm text-green-500">+18%</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="shirt" class="text-yellow-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Cotton T-Shirt</div> | |
| <div class="text-sm text-gray-500">Fashion</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-medium">EGP 199</div> | |
| <div class="text-sm text-red-500">-5%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover mb-8"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold">Recent Orders</h3> | |
| <button class="text-sm text-purple-600 hover:text-purple-800">View All Orders</button> | |
| </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">Status</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> | |
| </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-2810</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ahmed Mohamed</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">Delivered</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 1,499</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2809</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Nourhan Ali</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-sm text-gray-500">May 15, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 2,999</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2808</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mahmoud Hassan</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-sm text-gray-500">May 14, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 899</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold">Marketing Campaigns</h3> | |
| <button class="text-sm text-purple-600 hover:text-purple-800">Create New</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="instagram" class="text-purple-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Summer Sale</div> | |
| <div class="text-sm text-gray-500">Instagram & Facebook</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm text-gray-500">Active</div> | |
| <div class="text-xs text-gray-400">Ends Jun 30</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="mail" class="text-blue-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Email Newsletter</div> | |
| <div class="text-sm text-gray-500">Monthly Digest</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm text-gray-500">Scheduled</div> | |
| <div class="text-xs text-gray-400">Jun 1</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded-lg"> | |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="search" class="text-green-500"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">SEO Optimization</div> | |
| <div class="text-sm text-gray-500">Ongoing</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm text-gray-500">Active</div> | |
| <div class="text-xs text-gray-400">Continuous</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold">Recent Activities</h3> | |
| <button class="text-sm text-purple-600 hover:text-purple-800">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="user-plus" class="text-purple-500 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">New merchant registered</div> | |
| <div class="text-sm text-gray-500">Electronics Store at 10:45 AM</div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="shopping-cart" class="text-blue-500 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">New order placed</div> | |
| <div class="text-sm text-gray-500">#ORD-2811 at 9:30 AM</div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="dollar-sign" class="text-green-500 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Payment received</div> | |
| <div class="text-sm text-gray-500">EGP 1,499 at 8:15 AM</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Toggle sidebar | |
| document.getElementById('toggleSidebar').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('collapsed'); | |
| const icon = this.querySelector('i'); | |
| if (document.querySelector('.sidebar').classList.contains('collapsed')) { | |
| feather.replace(); | |
| icon.setAttribute('data-feather', 'chevron-right'); | |
| } else { | |
| feather.replace(); | |
| icon.setAttribute('data-feather', 'chevron-left'); | |
| } | |
| feather.replace(); | |
| }); | |
| // Revenue chart | |
| const revenueCtx = document.getElementById('revenueChart').getContext('2d'); | |
| const revenueChart = new Chart(revenueCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], | |
| datasets: [{ | |
| label: 'Digital Mall', | |
| data: [12000, 19000, 15000, 22000, 25000, 28000], | |
| borderColor: '#8b5cf6', | |
| backgroundColor: 'rgba(139, 92, 246, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, { | |
| label: 'Marketing Services', | |
| data: [8000, 12000, 10000, 15000, 18000, 21000], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| ticks: { | |
| callback: function(value) { | |
| return 'EGP ' + value.toLocaleString(); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |