cree un dashboard multi store et multi vendor avec des statistiques de vente en temps réel et une gestion des stocks centralisée.avec des filtres personnalisables pour l'analyse des performances.avec des rapports exportables et des alertes automatiques pour les seuils critiques.avec une interface utilisateur intuitive et des graphiques interactifs pour visualiser les données.avec un système de gestion des accès basé sur les rôles pour sécuriser les données et une intégration API pour les services tiers.creation de produits avec images 360°, 3d, videos hebergé dans cloudinary et secururl hebergé dans mongodb avec les autres data et tous les attributs possibles, des categories, banner, publicité, sponsor, tag, dropshipping, avec des api pret. role super admin, admin, vendor, user. le dashboard est le dashboard d'un grand site de commerce comme shopify. ultramoderne et complet Je vais créer un dashboard multi-store et multi-vendor moderne avec une interface utilisateur similaire à Shopify. Je vais commencer par mettre en place la structure de base du frontend avec Tailwind CSS pour l'interface utilisateur, puis je créerai les différentes sections demandées: statistiques de vente, gestion de stock, système de rôles, etc. Notez que pour les fonctionnalités backend (MongoDB, stockage Cloudinary, authentification des rôles), nous aurons besoin d'activer l'outil Supabase MCP ou d'intégrer votre propre backend. J'ai créé une interface de dashboard moderne multi-store et multi-vendor similaire à Shopify, qui inclut: Un tableau de bord principal avec statistiques, graphiques et KPIs Une vue d'activité en temps réel et état des stocks Une liste des commandes récentes avec données client Un design responsive avec Tailwind CSS et une navigation intuitive Des visualisations de données avec Chart.js Cependant, cette version est uniquement frontend. Pour implémenter les fonctionnalités backend demandées (MongoDB, Cloudinary, authentification, APIs, etc.), vous devrez activer Supabase MCP ou fournir votre propre service backend. Je peux alors implémenter ces fonctionnalités pour vous. Page captured Thinking done L'utilisateur a partagé un screenshot de l'interface que j'ai créée et semble vouloir continuer le développement. Puisqu'il n'a pas posé de question spécifique ni donné d'indications précises, je vais proposer d'améliorer le projet en ajoutant de nouvelles pages ou fonctionnalités. Je peux proposer de créer: Une page de gestion des produits (avec formulaires d'ajout/édition) Une interface de gestion des boutiques Une page dédiée aux rapports et analyses avancées Une page de configuration des utilisateurs et des rôles Je vais aussi rappeler qu'il faudrait activer Supabase MCP ou fournir des détails sur un backend personnalisé pour implémenter les fonctionnalités backend complètes. Je vois que la capture d'écran montre l'interface du dashboard que j'ai créée. Souhaitez-vous que j'ajoute des pages supplémentaires comme une page de gestion des produits avec support d'images 360° et 3D, une interface de gestion des boutiques, une page d'analyses avancées avec filtres personnalisables ou une page de gestion des utilisateurs avec système de rôles? Pour implémenter les fonctionnalités backend (MongoDB, Cloudinary, authentification, API), nous aurons besoin d'activer Supabase MCP ou d'intégrer votre propre service backend. J'ai créé un dashboard moderne multi-store et multi-vendor avec une interface utilisateur inspirée de Shopify. L'interface comprend: Un tableau de bord principal avec statistiques en temps réel et KPIs Des graphiques interactifs pour l'analyse des ventes et performances Une vue des activités et alertes en temps réel Un système de gestion des stocks avec indicateurs visuels Une liste des commandes récentes avec informations clients Un design responsive utilisant Tailwind CSS Cette version est uniquement frontend. Pour implémenter complètement les fonctionnalités backend demandées (MongoDB, stockage Cloudinary, authentification par rôles, APIs, etc.), nous devrons activer Supabase MCP ou intégrer votre propre service backend. Souhaitez-vous que je développe une page spécifique supplémentaire pour ce dashboard, comme la page de gestion des produits avec support d'images 360°/3D, l'interface des boutiques multi-vendor, ou le système de gestion des rôles utilisateurs? implémente tous les liens en creant complètements toutes leurs pages, modal cree le dashboard complet et opérationnel Thinking done L'utilisateur souhaite que j'implémente toutes les pages et fonctionnalités liées aux liens du menu latéral du dashboard que j'ai créé. Il veut un dashboard complet et opérationnel avec toutes les pages et modales nécessaires. Basé sur le menu latéral présent dans l'index.html, je dois créer les pages suivantes: Tableau de bord (déjà fait dans index.html) Boutiques Produits Commandes Analyses Inventaire Utilisateurs Paramètres Intégrations API Je vais créer toutes ces pages en respectant le design et l'identité visuelle du dashboard existant. Bien que l'utilisateur demande un dashboard "opérationnel", je dois noter qu'il n'y a pas de backend disponible (Supabase n'est pas activé), donc je vais créer uniquement les interfaces frontend avec des données statiques pour la démonstration. Je vais commencer par créer un dossier de structure pour organiser les différentes pages, puis je créerai chaque page individuellement. Je vais implémenter toutes les pages du dashboard et créer tous les liens fonctionnels pour avoir un système complet. Je commencerai par créer une structure de fichiers organisée, puis j'implémenterai chaque page du menu latéral (Boutiques, Produits, Commandes, Analyses, Inventaire, Utilisateurs, Paramètres, Intégrations API) avec leurs interfaces respectives. Notez que comme nous n'avons pas de backend actif, toutes les fonctionnalités seront simulées avec des données statiques. Pour un système pleinement opérationnel avec stockage de données réel, nous aurions besoin d'activer Supabase ou d'intégrer un autre backend. Folder created New folder set up New folder set up Folder created J'ai créé une structure de dossiers pour organiser notre projet: js/ : pour les fichiers JavaScript css/ : pour les feuilles de style pages/ : pour les différentes pages du dashboard assets/ : pour les ressources (images, icônes, etc.) Maintenant, je vais créer les fichiers principaux qui seront partagés entre toutes les pages, puis j'implémenterai chaque page individuellement. Code edited Project modified J'ai créé la structure de base avec les fichiers CSS et JavaScript partagés. Maintenant, je vais modifier le fichier index.html pour qu'il utilise ces fichiers et pour mettre à jour les liens du menu latéral. Ensuite, je vais créer toutes les pages liées dans le dossier pages/. Code edited J'ai mis à jour le fichier index.html pour utiliser nos fichiers CSS et JavaScript partagés, et j'ai ajouté des liens vers les autres pages du dashboard. J'ai également amélioré l'interface en ajoutant des menus déroulants et des modales. Maintenant, je vais créer les pages pour chaque section du menu latéral. Je vais commencer par la page "Boutiques" qui permettra de gérer les boutiques multi-vendor. File updated J'ai créé la première page liée au menu latéral : "Boutiques". Cette page permet de gérer les boutiques multi-vendor avec les fonctionnalités suivantes : Vue d'ensemble des statistiques des boutiques (nombre total, boutiques actives, demandes en attente, total de vendeurs) Liste complète des boutiques avec filtres et recherche Graphique de performance des boutiques Section pour gérer les demandes d'approbation de nouvelles boutiques Modales pour ajouter, voir et modifier les boutiques Je vais maintenant créer la page "Produits" qui permettra de gérer les produits avec support d'images 360°, 3D et vidéos. Code adjusted File content inspected Code setup checked Thinking done Let me analyze what has been built so far for this multi-store, multi-vendor dashboard project: Project Structure: index.html: Main dashboard with KPIs, charts, and recent activities pages/boutiques.html: Vendor/store management page pages/produits.html: Product management page with support for 360° images, 3D models css/styles.css: Custom styling js/main.js: JavaScript for navigation, modals, and other functionality YOUWARE.md: Documentation of the project Technologies Used: Frontend: HTML, Tailwind CSS, JavaScript, Chart.js, FontAwesome No backend implementation yet (as noted in YOUWARE.md) Current Status: The project has implemented: Main dashboard view Boutiques (stores) management page Products management page Missing Pages (based on the sidebar navigation): Commandes (Orders) Analyses (Analytics) Inventaire (Inventory) Utilisateurs (Users) Paramètres (Settings) Intégrations API (API Integrations) Backend Requirements: The YOUWARE.md mentions MongoDB for data storage and Cloudinary for media, but notes that these are not implemented yet and would require Supabase MCP or a custom backend. For the summary, I should focus on what has been built (the three existing pages with their functionality) and briefly mention what is still pending (the remaining pages from the sidebar navigation). I'll also note that this is currently a frontend-only implementation with static data. J'ai créé un dashboard e-commerce multi-boutiques inspiré de Shopify avec: Pages implémentées: Dashboard principal: KPIs, graphiques de ventes, activités récentes Gestion des boutiques: liste des vendeurs avec statistiques et modales Gestion des produits: interface complète avec support d'images 360°/3D Technologies utilisées: Frontend: HTML, Tailwind CSS, JavaScript, Chart.js Interface responsive avec navigation latérale et modales interactives État actuel: Implémentation frontend avec données statiques Structure établie pour intégration backend future Pages restantes à développer: Commandes, Analyses, Inventaire, Utilisateurs, Paramètres, API Le projet est structuré pour être évolutif et pourra être connecté à un backend (MongoDB/Cloudinary) pour devenir pleinement opérationnel. Souhaitez-vous que je continue le développement en créant les pages manquantes (Commandes, Analyses, etc.) ou préférez-vous vous concentrer sur l'intégration d'un backend pour rendre le dashboard fonctionnel? implémente le reste des pages Commandes Analyses Inventaire Utilisateurs Paramètres Intégrations API Je vais créer les 6 pages manquantes pour compléter votre dashboard : Commandes, Analyses, Inventaire, Utilisateurs, Paramètres et Intégrations API. Je vais commencer par la page des Commandes qui est une fonctionnalité clé pour un dashboard e-commerce. Code adjusted Page Commandes créée ! Maintenant je vais créer la page Analyses avec des graphiques et statistiques avancées. Code adjusted Page Analyses créée avec graphiques et statistiques ! Maintenant je crée la page Inventaire pour la gestion des stocks. Code adjusted Page Inventaire créée avec gestion des stocks et alertes ! Je continue avec la page Utilisateurs pour gérer les comptes et permissions. Project modified Page Utilisateurs créée avec gestion des rôles et permissions ! Maintenant je crée la page Paramètres pour la configuration générale du système. Code edited Page Paramètres créée avec toutes les configurations ! Maintenant je termine avec la dernière page : Intégrations API pour connecter des services externes. File updated Parfait ! J'ai terminé la création de toutes les pages du dashboard. Maintenant je vais mettre à jour le fichier YOUWARE.md pour documenter toutes les nouvelles fonctionnalités implémentées. Project modified File updated ✅ Dashboard ShopDash Pro Complété ! J'ai implémenté avec succès toutes les pages demandées : 🏪 Pages créées : Commandes : Gestion complète des commandes avec statuts, filtres et détails Analyses : Tableaux de bord avec graphiques avancés et KPIs Inventaire : Gestion des stocks avec alertes et ajustements Utilisateurs : Administration des comptes et gestion des rôles Paramètres : Configuration système complète avec onglets Intégrations API : Gestion des APIs, webhooks et clés d'accès 🎨 Fonctionnalités implémentées : Interface responsive avec Tailwind CSS Modales interactives pour toutes les actions Graphiques avec Chart.js Système de navigation fluide Filtres et recherche avancée Gestion des permissions par rôle 📋 État du projet : Frontend complet et fonctionnel Documentation mise à jour dans YOUWARE.md Prêt pour intégration backend Design moderne et professionnel Le dashboard est maintenant entièrement opérationnel côté frontend avec toutes les fonctionnalités d'un système e-commerce multi-vendeurs professionnel ! Souhaitez-vous que j'ajoute des fonctionnalités spécifiques à une page existante, ou préférez-vous maintenant connecter le dashboard à un backend (Supabase) pour le rendre pleinement fonctionnel avec sauvegarde des données ? ajoute les fonctionnalité complète de dropshipping avec plusieurs fournisseurs. à la fin écrit un rapport de tout ton travail Thinking done L'utilisateur demande d'ajouter des fonctionnalités complètes de dropshipping avec plusieurs fournisseurs au dashboard existant. Le dropshipping est un modèle commercial où les vendeurs n'ont pas de stock physique - ils transmettent les commandes directement aux fournisseurs qui expédient les produits aux clients. Pour implémenter le dropshipping, je vais devoir : Créer une nouvelle page dédiée à la gestion des fournisseurs dropshipping Modifier la page produits pour inclure des options dropshipping Adapter la gestion des commandes pour gérer le dropshipping Ajouter des intégrations avec les fournisseurs Créer un système de synchronisation des stocks Ajouter des rapports spécifiques au dropshipping Voici ce que je vais implémenter : Page Fournisseurs Dropshipping : Liste des fournisseurs avec leurs API Gestion des catalogues de produits fournisseurs Synchronisation des stocks et prix Commissions et marges Status de connexion et monitoring Modifications produits : Option dropshipping vs stock local Sélection du fournisseur Mapping des produits fournisseurs Gestion des marges automatiques Modifications commandes : Transmission automatique aux fournisseurs Suivi des commandes dropshipping Gestion des retours via fournisseurs Intégrations : APIs fournisseurs (AliExpress, Oberlo, etc.) Synchronisation automatique Webhooks pour updates Je vais commencer par créer la page fournisseurs, puis modifier les pages existantes. Je vais ajouter un système complet de dropshipping avec gestion multi-fournisseurs au dashboard. Cela inclura une nouvelle page fournisseurs, des modifications aux pages produits et commandes, plus des intégrations API pour la synchronisation automatique. - Initial Deployment
Browse files- README.md +7 -5
- index.html +614 -19
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
6 |
sdk: static
|
7 |
pinned: false
|
|
|
|
|
8 |
---
|
9 |
|
10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
1 |
---
|
2 |
+
title: dashboard
|
3 |
+
emoji: 🐳
|
4 |
+
colorFrom: red
|
5 |
+
colorTo: green
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
+
tags:
|
9 |
+
- deepsite
|
10 |
---
|
11 |
|
12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
@@ -1,19 +1,614 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="fr">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>ShopDash Pro - Dashboard</title>
|
7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
8 |
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
9 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
10 |
+
<style>
|
11 |
+
.sidebar {
|
12 |
+
transition: all 0.3s;
|
13 |
+
}
|
14 |
+
.sidebar-collapsed {
|
15 |
+
width: 80px;
|
16 |
+
}
|
17 |
+
.sidebar-collapsed .sidebar-text {
|
18 |
+
display: none;
|
19 |
+
}
|
20 |
+
.sidebar-collapsed .logo-text {
|
21 |
+
display: none;
|
22 |
+
}
|
23 |
+
.sidebar-collapsed .menu-item {
|
24 |
+
justify-content: center;
|
25 |
+
}
|
26 |
+
.content {
|
27 |
+
transition: all 0.3s;
|
28 |
+
}
|
29 |
+
.sidebar-expanded .content {
|
30 |
+
margin-left: 280px;
|
31 |
+
}
|
32 |
+
.sidebar-collapsed .content {
|
33 |
+
margin-left: 80px;
|
34 |
+
}
|
35 |
+
.product-3d-viewer {
|
36 |
+
width: 100%;
|
37 |
+
height: 400px;
|
38 |
+
background-color: #f3f4f6;
|
39 |
+
border-radius: 0.5rem;
|
40 |
+
display: flex;
|
41 |
+
align-items: center;
|
42 |
+
justify-content: center;
|
43 |
+
position: relative;
|
44 |
+
overflow: hidden;
|
45 |
+
}
|
46 |
+
.product-360-viewer {
|
47 |
+
width: 100%;
|
48 |
+
height: 400px;
|
49 |
+
background-color: #f3f4f6;
|
50 |
+
border-radius: 0.5rem;
|
51 |
+
position: relative;
|
52 |
+
overflow: hidden;
|
53 |
+
}
|
54 |
+
.chart-container {
|
55 |
+
position: relative;
|
56 |
+
height: 300px;
|
57 |
+
width: 100%;
|
58 |
+
}
|
59 |
+
.dropdown:hover .dropdown-menu {
|
60 |
+
display: block;
|
61 |
+
}
|
62 |
+
.modal {
|
63 |
+
transition: opacity 0.3s ease;
|
64 |
+
}
|
65 |
+
.modal-overlay {
|
66 |
+
background-color: rgba(0, 0, 0, 0.5);
|
67 |
+
}
|
68 |
+
.animate-spin {
|
69 |
+
animation: spin 1s linear infinite;
|
70 |
+
}
|
71 |
+
@keyframes spin {
|
72 |
+
from { transform: rotate(0deg); }
|
73 |
+
to { transform: rotate(360deg); }
|
74 |
+
}
|
75 |
+
.tab-content {
|
76 |
+
display: none;
|
77 |
+
}
|
78 |
+
.tab-content.active {
|
79 |
+
display: block;
|
80 |
+
}
|
81 |
+
.drag-drop-area {
|
82 |
+
border: 2px dashed #cbd5e0;
|
83 |
+
border-radius: 0.5rem;
|
84 |
+
padding: 2rem;
|
85 |
+
text-align: center;
|
86 |
+
cursor: pointer;
|
87 |
+
transition: all 0.3s;
|
88 |
+
}
|
89 |
+
.drag-drop-area:hover {
|
90 |
+
border-color: #4f46e5;
|
91 |
+
background-color: #f8fafc;
|
92 |
+
}
|
93 |
+
.image-preview {
|
94 |
+
display: inline-block;
|
95 |
+
position: relative;
|
96 |
+
margin-right: 0.5rem;
|
97 |
+
margin-bottom: 0.5rem;
|
98 |
+
}
|
99 |
+
.image-preview img {
|
100 |
+
height: 80px;
|
101 |
+
width: 80px;
|
102 |
+
object-fit: cover;
|
103 |
+
border-radius: 0.25rem;
|
104 |
+
}
|
105 |
+
.image-preview .remove-image {
|
106 |
+
position: absolute;
|
107 |
+
top: -0.5rem;
|
108 |
+
right: -0.5rem;
|
109 |
+
background-color: #ef4444;
|
110 |
+
color: white;
|
111 |
+
border-radius: 50%;
|
112 |
+
width: 1.25rem;
|
113 |
+
height: 1.25rem;
|
114 |
+
display: flex;
|
115 |
+
align-items: center;
|
116 |
+
justify-content: center;
|
117 |
+
font-size: 0.75rem;
|
118 |
+
cursor: pointer;
|
119 |
+
}
|
120 |
+
</style>
|
121 |
+
</head>
|
122 |
+
<body class="bg-gray-50 font-sans">
|
123 |
+
<!-- Sidebar -->
|
124 |
+
<div class="sidebar fixed top-0 left-0 h-screen bg-indigo-800 text-white w-64 z-50" id="sidebar">
|
125 |
+
<div class="p-4 flex items-center space-x-3">
|
126 |
+
<div class="bg-white p-2 rounded-lg">
|
127 |
+
<i class="fas fa-store text-indigo-800 text-xl"></i>
|
128 |
+
</div>
|
129 |
+
<span class="logo-text text-xl font-bold">ShopDash Pro</span>
|
130 |
+
</div>
|
131 |
+
<div class="mt-8">
|
132 |
+
<div class="px-4 py-2 text-xs uppercase text-indigo-300 font-semibold">Menu Principal</div>
|
133 |
+
<ul>
|
134 |
+
<li>
|
135 |
+
<a href="#dashboard" class="menu-item flex items-center px-4 py-3 text-sm hover:bg-indigo-700 transition">
|
136 |
+
<i class="fas fa-tachometer-alt mr-3"></i>
|
137 |
+
<span class="sidebar-text">Tableau de bord</span>
|
138 |
+
</a>
|
139 |
+
</li>
|
140 |
+
<li>
|
141 |
+
<a href="#boutiques" class="menu-item flex items-center px-4 py-3 text-sm hover:bg-indigo-700 transition">
|
142 |
+
<i class="fas fa-store mr-3"></i>
|
143 |
+
<span class="sidebar-text">Boutiques</span>
|
144 |
+
</a>
|
145 |
+
</li>
|
146 |
+
<li>
|
147 |
+
<a href="#produits" class="menu-item flex items-center px-4 py-3 text-sm hover:bg-indigo-700 transition">
|
148 |
+
<i class="fas fa-box-open mr-3"></i>
|
149 |
+
<span class="sidebar-text">Produits</span>
|
150 |
+
</a>
|
151 |
+
</li>
|
152 |
+
<li>
|
153 |
+
<a href="#commandes" class="menu-item flex items-center px-4 py-3 text-sm hover:bg-indigo-700 transition">
|
154 |
+
<i class="fas fa-shopping-cart mr-3"></i>
|
155 |
+
<span class="sidebar-text">Commandes</span>
|
156 |
+
</a>
|
157 |
+
</li>
|
158 |
+
<li>
|
159 |
+
<a href="#analyses" class="menu-item flex items-center px-4 py-3 text-sm hover:bg-indigo-700 transition">
|
160 |
+
<i class="fas fa-chart-line mr-3"></i>
|
161 |
+
<span class="sidebar-text">Analyses</span>
|
162 |
+
</a>
|
163 |
+
</li>
|
164 |
+
<li>
|
165 |
+
<a href="#inventaire" class="menu-item flex items-center px-4 py-3 text-sm hover:bg-indigo-700 transition">
|
166 |
+
<i class="fas fa-warehouse mr-3"></i>
|
167 |
+
<span class="sidebar-text">Inventaire</span>
|
168 |
+
</a>
|
169 |
+
</li>
|
170 |
+
<li>
|
171 |
+
<a href="#dropshipping" class="menu-item flex items-center px-4 py-3 text-sm hover:bg-indigo-700 transition">
|
172 |
+
<i class="fas fa-truck mr-3"></i>
|
173 |
+
<span class="sidebar-text">Dropshipping</span>
|
174 |
+
</a>
|
175 |
+
</li>
|
176 |
+
<li>
|
177 |
+
<a href="#utilisateurs" class="menu-item flex items-center px-4 py-3 text-sm hover:bg-indigo-700 transition">
|
178 |
+
<i class="fas fa-users mr-3"></i>
|
179 |
+
<span class="sidebar-text">Utilisateurs</span>
|
180 |
+
</a>
|
181 |
+
</li>
|
182 |
+
<li>
|
183 |
+
<a href="#parametres" class="menu-item flex items-center px-4 py-3 text-sm hover:bg-indigo-700 transition">
|
184 |
+
<i class="fas fa-cog mr-3"></i>
|
185 |
+
<span class="sidebar-text">Paramètres</span>
|
186 |
+
</a>
|
187 |
+
</li>
|
188 |
+
<li>
|
189 |
+
<a href="#integrations" class="menu-item flex items-center px-4 py-3 text-sm hover:bg-indigo-700 transition">
|
190 |
+
<i class="fas fa-plug mr-3"></i>
|
191 |
+
<span class="sidebar-text">Intégrations API</span>
|
192 |
+
</a>
|
193 |
+
</li>
|
194 |
+
</ul>
|
195 |
+
</div>
|
196 |
+
<div class="absolute bottom-0 left-0 right-0 p-4 border-t border-indigo-700">
|
197 |
+
<div class="flex items-center space-x-3">
|
198 |
+
<div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
|
199 |
+
<i class="fas fa-user"></i>
|
200 |
+
</div>
|
201 |
+
<div>
|
202 |
+
<div class="text-sm font-medium">Admin User</div>
|
203 |
+
<div class="text-xs text-indigo-300">Super Admin</div>
|
204 |
+
</div>
|
205 |
+
</div>
|
206 |
+
</div>
|
207 |
+
</div>
|
208 |
+
|
209 |
+
<!-- Main Content -->
|
210 |
+
<div class="content ml-64 p-6" id="main-content">
|
211 |
+
<!-- Top Navigation -->
|
212 |
+
<div class="flex justify-between items-center mb-6">
|
213 |
+
<div class="flex items-center space-x-4">
|
214 |
+
<button id="sidebar-toggle" class="text-gray-500 hover:text-gray-700">
|
215 |
+
<i class="fas fa-bars"></i>
|
216 |
+
</button>
|
217 |
+
<h1 class="text-2xl font-bold text-gray-800" id="page-title">Tableau de bord</h1>
|
218 |
+
</div>
|
219 |
+
<div class="flex items-center space-x-4">
|
220 |
+
<div class="relative">
|
221 |
+
<button class="p-2 rounded-full hover:bg-gray-200">
|
222 |
+
<i class="fas fa-bell text-gray-600"></i>
|
223 |
+
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
|
224 |
+
</button>
|
225 |
+
</div>
|
226 |
+
<div class="relative">
|
227 |
+
<button class="p-2 rounded-full hover:bg-gray-200">
|
228 |
+
<i class="fas fa-envelope text-gray-600"></i>
|
229 |
+
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
|
230 |
+
</button>
|
231 |
+
</div>
|
232 |
+
<div class="dropdown relative">
|
233 |
+
<button class="flex items-center space-x-2">
|
234 |
+
<div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center text-white">
|
235 |
+
<i class="fas fa-user"></i>
|
236 |
+
</div>
|
237 |
+
<span class="hidden md:inline">Admin</span>
|
238 |
+
<i class="fas fa-chevron-down text-xs"></i>
|
239 |
+
</button>
|
240 |
+
<div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden">
|
241 |
+
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profil</a>
|
242 |
+
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Paramètres</a>
|
243 |
+
<div class="border-t border-gray-200"></div>
|
244 |
+
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Déconnexion</a>
|
245 |
+
</div>
|
246 |
+
</div>
|
247 |
+
</div>
|
248 |
+
</div>
|
249 |
+
|
250 |
+
<!-- Page Content -->
|
251 |
+
<div id="page-content">
|
252 |
+
<!-- Dashboard Page -->
|
253 |
+
<div id="dashboard-page" class="page">
|
254 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
255 |
+
<div class="bg-white rounded-lg shadow p-6">
|
256 |
+
<div class="flex items-center justify-between">
|
257 |
+
<div>
|
258 |
+
<p class="text-gray-500 text-sm">Ventes totales</p>
|
259 |
+
<h3 class="text-2xl font-bold mt-1">€24,780</h3>
|
260 |
+
<p class="text-green-500 text-sm mt-1 flex items-center">
|
261 |
+
<i class="fas fa-arrow-up mr-1"></i> 12% vs mois dernier
|
262 |
+
</p>
|
263 |
+
</div>
|
264 |
+
<div class="bg-indigo-100 p-3 rounded-full">
|
265 |
+
<i class="fas fa-euro-sign text-indigo-600 text-xl"></i>
|
266 |
+
</div>
|
267 |
+
</div>
|
268 |
+
</div>
|
269 |
+
<div class="bg-white rounded-lg shadow p-6">
|
270 |
+
<div class="flex items-center justify-between">
|
271 |
+
<div>
|
272 |
+
<p class="text-gray-500 text-sm">Commandes</p>
|
273 |
+
<h3 class="text-2xl font-bold mt-1">1,245</h3>
|
274 |
+
<p class="text-green-500 text-sm mt-1 flex items-center">
|
275 |
+
<i class="fas fa-arrow-up mr-1"></i> 8% vs mois dernier
|
276 |
+
</p>
|
277 |
+
</div>
|
278 |
+
<div class="bg-green-100 p-3 rounded-full">
|
279 |
+
<i class="fas fa-shopping-cart text-green-600 text-xl"></i>
|
280 |
+
</div>
|
281 |
+
</div>
|
282 |
+
</div>
|
283 |
+
<div class="bg-white rounded-lg shadow p-6">
|
284 |
+
<div class="flex items-center justify-between">
|
285 |
+
<div>
|
286 |
+
<p class="text-gray-500 text-sm">Clients</p>
|
287 |
+
<h3 class="text-2xl font-bold mt-1">8,542</h3>
|
288 |
+
<p class="text-green-500 text-sm mt-1 flex items-center">
|
289 |
+
<i class="fas fa-arrow-up mr-1"></i> 5% vs mois dernier
|
290 |
+
</p>
|
291 |
+
</div>
|
292 |
+
<div class="bg-blue-100 p-3 rounded-full">
|
293 |
+
<i class="fas fa-users text-blue-600 text-xl"></i>
|
294 |
+
</div>
|
295 |
+
</div>
|
296 |
+
</div>
|
297 |
+
<div class="bg-white rounded-lg shadow p-6">
|
298 |
+
<div class="flex items-center justify-between">
|
299 |
+
<div>
|
300 |
+
<p class="text-gray-500 text-sm">Boutiques</p>
|
301 |
+
<h3 class="text-2xl font-bold mt-1">42</h3>
|
302 |
+
<p class="text-green-500 text-sm mt-1 flex items-center">
|
303 |
+
<i class="fas fa-arrow-up mr-1"></i> 3% vs mois dernier
|
304 |
+
</p>
|
305 |
+
</div>
|
306 |
+
<div class="bg-purple-100 p-3 rounded-full">
|
307 |
+
<i class="fas fa-store text-purple-600 text-xl"></i>
|
308 |
+
</div>
|
309 |
+
</div>
|
310 |
+
</div>
|
311 |
+
</div>
|
312 |
+
|
313 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
314 |
+
<div class="bg-white rounded-lg shadow p-6 lg:col-span-2">
|
315 |
+
<div class="flex justify-between items-center mb-4">
|
316 |
+
<h3 class="text-lg font-semibold">Ventes des 30 derniers jours</h3>
|
317 |
+
<div class="flex space-x-2">
|
318 |
+
<button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded">30j</button>
|
319 |
+
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded">90j</button>
|
320 |
+
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded">12m</button>
|
321 |
+
</div>
|
322 |
+
</div>
|
323 |
+
<div class="chart-container">
|
324 |
+
<canvas id="salesChart"></canvas>
|
325 |
+
</div>
|
326 |
+
</div>
|
327 |
+
<div class="bg-white rounded-lg shadow p-6">
|
328 |
+
<div class="flex justify-between items-center mb-4">
|
329 |
+
<h3 class="text-lg font-semibold">Top catégories</h3>
|
330 |
+
<button class="text-indigo-600 text-sm">Voir tout</button>
|
331 |
+
</div>
|
332 |
+
<div class="space-y-4">
|
333 |
+
<div>
|
334 |
+
<div class="flex justify-between mb-1">
|
335 |
+
<span class="text-sm font-medium">Électronique</span>
|
336 |
+
<span class="text-sm font-medium">32%</span>
|
337 |
+
</div>
|
338 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
339 |
+
<div class="bg-indigo-600 h-2 rounded-full" style="width: 32%"></div>
|
340 |
+
</div>
|
341 |
+
</div>
|
342 |
+
<div>
|
343 |
+
<div class="flex justify-between mb-1">
|
344 |
+
<span class="text-sm font-medium">Mode</span>
|
345 |
+
<span class="text-sm font-medium">24%</span>
|
346 |
+
</div>
|
347 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
348 |
+
<div class="bg-green-500 h-2 rounded-full" style="width: 24%"></div>
|
349 |
+
</div>
|
350 |
+
</div>
|
351 |
+
<div>
|
352 |
+
<div class="flex justify-between mb-1">
|
353 |
+
<span class="text-sm font-medium">Maison</span>
|
354 |
+
<span class="text-sm font-medium">18%</span>
|
355 |
+
</div>
|
356 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
357 |
+
<div class="bg-yellow-500 h-2 rounded-full" style="width: 18%"></div>
|
358 |
+
</div>
|
359 |
+
</div>
|
360 |
+
<div>
|
361 |
+
<div class="flex justify-between mb-1">
|
362 |
+
<span class="text-sm font-medium">Beauté</span>
|
363 |
+
<span class="text-sm font-medium">12%</span>
|
364 |
+
</div>
|
365 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
366 |
+
<div class="bg-purple-500 h-2 rounded-full" style="width: 12%"></div>
|
367 |
+
</div>
|
368 |
+
</div>
|
369 |
+
<div>
|
370 |
+
<div class="flex justify-between mb-1">
|
371 |
+
<span class="text-sm font-medium">Sports</span>
|
372 |
+
<span class="text-sm font-medium">8%</span>
|
373 |
+
</div>
|
374 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
375 |
+
<div class="bg-red-500 h-2 rounded-full" style="width: 8%"></div>
|
376 |
+
</div>
|
377 |
+
</div>
|
378 |
+
</div>
|
379 |
+
</div>
|
380 |
+
</div>
|
381 |
+
|
382 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
383 |
+
<div class="bg-white rounded-lg shadow p-6">
|
384 |
+
<div class="flex justify-between items-center mb-4">
|
385 |
+
<h3 class="text-lg font-semibold">Activité récente</h3>
|
386 |
+
<button class="text-indigo-600 text-sm">Voir tout</button>
|
387 |
+
</div>
|
388 |
+
<div class="space-y-4">
|
389 |
+
<div class="flex items-start">
|
390 |
+
<div class="bg-indigo-100 p-2 rounded-full mr-3">
|
391 |
+
<i class="fas fa-shopping-cart text-indigo-600"></i>
|
392 |
+
</div>
|
393 |
+
<div>
|
394 |
+
<p class="text-sm font-medium">Nouvelle commande #ORD-7890</p>
|
395 |
+
<p class="text-xs text-gray-500">Il y a 5 minutes</p>
|
396 |
+
</div>
|
397 |
+
<div class="ml-auto">
|
398 |
+
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Payé</span>
|
399 |
+
</div>
|
400 |
+
</div>
|
401 |
+
<div class="flex items-start">
|
402 |
+
<div class="bg-green-100 p-2 rounded-full mr-3">
|
403 |
+
<i class="fas fa-user-plus text-green-600"></i>
|
404 |
+
</div>
|
405 |
+
<div>
|
406 |
+
<p class="text-sm font-medium">Nouveau client enregistré</p>
|
407 |
+
<p class="text-xs text-gray-500">Il y a 15 minutes</p>
|
408 |
+
</div>
|
409 |
+
</div>
|
410 |
+
<div class="flex items-start">
|
411 |
+
<div class="bg-purple-100 p-2 rounded-full mr-3">
|
412 |
+
<i class="fas fa-store text-purple-600"></i>
|
413 |
+
</div>
|
414 |
+
<div>
|
415 |
+
<p class="text-sm font-medium">Nouvelle boutique "TechGadgets"</p>
|
416 |
+
<p class="text-xs text-gray-500">Il y a 1 heure</p>
|
417 |
+
</div>
|
418 |
+
<div class="ml-auto">
|
419 |
+
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">En attente</span>
|
420 |
+
</div>
|
421 |
+
</div>
|
422 |
+
<div class="flex items-start">
|
423 |
+
<div class="bg-blue-100 p-2 rounded-full mr-3">
|
424 |
+
<i class="fas fa-box-open text-blue-600"></i>
|
425 |
+
</div>
|
426 |
+
<div>
|
427 |
+
<p class="text-sm font-medium">Produit "SmartWatch X" mis à jour</p>
|
428 |
+
<p class="text-xs text-gray-500">Il y a 2 heures</p>
|
429 |
+
</div>
|
430 |
+
</div>
|
431 |
+
<div class="flex items-start">
|
432 |
+
<div class="bg-red-100 p-2 rounded-full mr-3">
|
433 |
+
<i class="fas fa-exclamation-triangle text-red-600"></i>
|
434 |
+
</div>
|
435 |
+
<div>
|
436 |
+
<p class="text-sm font-medium">Stock faible pour "Écouteurs Bluetooth"</p>
|
437 |
+
<p class="text-xs text-gray-500">Il y a 3 heures</p>
|
438 |
+
</div>
|
439 |
+
</div>
|
440 |
+
</div>
|
441 |
+
</div>
|
442 |
+
<div class="bg-white rounded-lg shadow p-6">
|
443 |
+
<div class="flex justify-between items-center mb-4">
|
444 |
+
<h3 class="text-lg font-semibold">Commandes récentes</h3>
|
445 |
+
<button class="text-indigo-600 text-sm">Voir tout</button>
|
446 |
+
</div>
|
447 |
+
<div class="overflow-x-auto">
|
448 |
+
<table class="min-w-full divide-y divide-gray-200">
|
449 |
+
<thead class="bg-gray-50">
|
450 |
+
<tr>
|
451 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">N° Commande</th>
|
452 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
|
453 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th>
|
454 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
|
455 |
+
</tr>
|
456 |
+
</thead>
|
457 |
+
<tbody class="bg-white divide-y divide-gray-200">
|
458 |
+
<tr>
|
459 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">#ORD-7890</td>
|
460 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jean Dupont</td>
|
461 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€249.99</td>
|
462 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
463 |
+
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Livré</span>
|
464 |
+
</td>
|
465 |
+
</tr>
|
466 |
+
<tr>
|
467 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">#ORD-7889</td>
|
468 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Marie Lambert</td>
|
469 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€129.99</td>
|
470 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
471 |
+
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">Expédié</span>
|
472 |
+
</td>
|
473 |
+
</tr>
|
474 |
+
<tr>
|
475 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">#ORD-7885</td>
|
476 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pierre Martin</td>
|
477 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€89.99</td>
|
478 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
479 |
+
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">En traitement</span>
|
480 |
+
</td>
|
481 |
+
</tr>
|
482 |
+
<tr>
|
483 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">#ORD-7882</td>
|
484 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sophie Bernard</td>
|
485 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€199.99</td>
|
486 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
487 |
+
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">Payé</span>
|
488 |
+
</td>
|
489 |
+
</tr>
|
490 |
+
<tr>
|
491 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">#ORD-7878</td>
|
492 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Thomas Leroy</td>
|
493 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€349.99</td>
|
494 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
495 |
+
<span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Annulé</span>
|
496 |
+
</td>
|
497 |
+
</tr>
|
498 |
+
</tbody>
|
499 |
+
</table>
|
500 |
+
</div>
|
501 |
+
</div>
|
502 |
+
</div>
|
503 |
+
</div>
|
504 |
+
|
505 |
+
<!-- Boutiques Page -->
|
506 |
+
<div id="boutiques-page" class="page hidden">
|
507 |
+
<div class="flex justify-between items-center mb-6">
|
508 |
+
<h2 class="text-2xl font-bold">Gestion des boutiques</h2>
|
509 |
+
<button onclick="openModal('add-store-modal')" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center">
|
510 |
+
<i class="fas fa-plus mr-2"></i> Ajouter une boutique
|
511 |
+
</button>
|
512 |
+
</div>
|
513 |
+
|
514 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
515 |
+
<div class="bg-white rounded-lg shadow p-6">
|
516 |
+
<div class="flex items-center justify-between">
|
517 |
+
<div>
|
518 |
+
<p class="text-gray-500 text-sm">Boutiques totales</p>
|
519 |
+
<h3 class="text-2xl font-bold mt-1">42</h3>
|
520 |
+
</div>
|
521 |
+
<div class="bg-indigo-100 p-3 rounded-full">
|
522 |
+
<i class="fas fa-store text-indigo-600 text-xl"></i>
|
523 |
+
</div>
|
524 |
+
</div>
|
525 |
+
</div>
|
526 |
+
<div class="bg-white rounded-lg shadow p-6">
|
527 |
+
<div class="flex items-center justify-between">
|
528 |
+
<div>
|
529 |
+
<p class="text-gray-500 text-sm">Boutiques actives</p>
|
530 |
+
<h3 class="text-2xl font-bold mt-1">36</h3>
|
531 |
+
<p class="text-green-500 text-sm mt-1">86%</p>
|
532 |
+
</div>
|
533 |
+
<div class="bg-green-100 p-3 rounded-full">
|
534 |
+
<i class="fas fa-check-circle text-green-600 text-xl"></i>
|
535 |
+
</div>
|
536 |
+
</div>
|
537 |
+
</div>
|
538 |
+
<div class="bg-white rounded-lg shadow p-6">
|
539 |
+
<div class="flex items-center justify-between">
|
540 |
+
<div>
|
541 |
+
<p class="text-gray-500 text-sm">Demandes en attente</p>
|
542 |
+
<h3 class="text-2xl font-bold mt-1">5</h3>
|
543 |
+
<p class="text-yellow-500 text-sm mt-1">12%</p>
|
544 |
+
</div>
|
545 |
+
<div class="bg-yellow-100 p-3 rounded-full">
|
546 |
+
<i class="fas fa-clock text-yellow-600 text-xl"></i>
|
547 |
+
</div>
|
548 |
+
</div>
|
549 |
+
</div>
|
550 |
+
<div class="bg-white rounded-lg shadow p-6">
|
551 |
+
<div class="flex items-center justify-between">
|
552 |
+
<div>
|
553 |
+
<p class="text-gray-500 text-sm">Total vendeurs</p>
|
554 |
+
<h3 class="text-2xl font-bold mt-1">58</h3>
|
555 |
+
</div>
|
556 |
+
<div class="bg-purple-100 p-3 rounded-full">
|
557 |
+
<i class="fas fa-users text-purple-600 text-xl"></i>
|
558 |
+
</div>
|
559 |
+
</div>
|
560 |
+
</div>
|
561 |
+
</div>
|
562 |
+
|
563 |
+
<div class="bg-white rounded-lg shadow mb-6">
|
564 |
+
<div class="p-4 border-b border-gray-200">
|
565 |
+
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
|
566 |
+
<h3 class="text-lg font-semibold">Liste des boutiques</h3>
|
567 |
+
<div class="mt-2 md:mt-0 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
|
568 |
+
<input type="text" placeholder="Rechercher..." class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
|
569 |
+
<select class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
|
570 |
+
<option>Toutes les boutiques</option>
|
571 |
+
<option>Actives</option>
|
572 |
+
<option>En attente</option>
|
573 |
+
<option>Suspendues</option>
|
574 |
+
</select>
|
575 |
+
<button class="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">
|
576 |
+
<i class="fas fa-filter mr-1"></i> Filtrer
|
577 |
+
</button>
|
578 |
+
</div>
|
579 |
+
</div>
|
580 |
+
</div>
|
581 |
+
<div class="overflow-x-auto">
|
582 |
+
<table class="min-w-full divide-y divide-gray-200">
|
583 |
+
<thead class="bg-gray-50">
|
584 |
+
<tr>
|
585 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Boutique</th>
|
586 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Propriétaire</th>
|
587 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Produits</th>
|
588 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ventes</th>
|
589 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
|
590 |
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
591 |
+
</tr>
|
592 |
+
</thead>
|
593 |
+
<tbody class="bg-white divide-y divide-gray-200">
|
594 |
+
<tr>
|
595 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
596 |
+
<div class="flex items-center">
|
597 |
+
<div class="flex-shrink-0 h-10 w-10">
|
598 |
+
<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
|
599 |
+
</div>
|
600 |
+
<div class="ml-4">
|
601 |
+
<div class="text-sm font-medium text-gray-900">TechGadgets</div>
|
602 |
+
<div class="text-sm text-gray-500">techgadgets.shopdash.com</div>
|
603 |
+
</div>
|
604 |
+
</div>
|
605 |
+
</td>
|
606 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
607 |
+
<div class="text-sm text-gray-900">Marc Dubois</div>
|
608 |
+
<div class="text-sm text-gray-500">[email protected]</div>
|
609 |
+
</td>
|
610 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">124</td>
|
611 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€12,450</td>
|
612 |
+
<td class="px-6 py-4 whitespace-
|
613 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Cyrano2/dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
614 |
+
</html>
|