Modèle HTML de tableau de bord Couture Atelier

1,107 houessoueros3

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de tableau de bord Couture Atelier

Recommandé

28 August 2025

Visionneuse de démonstration Web : modèles réactifs et conception numérique

3 September 2024

GRANDE ROUE

16 September 2025

Formulaire HTML de transfert de pièces avec sélection de paiement

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau de Bord - Gestion Atelier Couture</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f7f6;
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 250px;
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            flex-shrink: 0;
        }
        .sidebar h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #ecf0f1;
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
        }
        .sidebar ul li {
            margin-bottom: 15px;
        }
        .sidebar ul li a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            display: block;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        .sidebar ul li a:hover, .sidebar ul li a.active {
            background-color: #34495e;
        }
        .main-content {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
        }
        .header {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            color: #333;
        }
        .section-card {
            background-color: #ffffff;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        .section-card h2 {
            color: #333;
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        .section-card p {
            color: #666;
            line-height: 1.6;
        }
        .footer {
            text-align: center;
            padding: 20px;
            color: #888;
            margin-top: auto; /* Pushes footer to the bottom */
            width: 100%;
            box-sizing: border-box; /* Include padding in width calculation */
        }
        .button {
            background-color: #3498db;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <aside class="sidebar">
        <h2>Gestion Atelier</h2>
        <nav>
            <ul>
                <li><a href="#clients" class="active">2.1 Clients Internes</a></li>
                <li><a href="#commandes">2.2 Commandes</a></li>
                <li><a href="#modeles">2.3 Modèles de Couture</a></li>
                <li><a href="#stock">2.4 Tissus et Fournitures</a></li>
                <li><a href="#employes">2.5 Employés / Apprentis</a></li>
                <li><a href="#financier">2.6 Suivi Financier</a></li>
                <li><a href="#notifications">2.7 Notifications Internes</a></li>
                <li><a href="#securite">2.8 Sécurité & Sauvegarde</a></li>
            </ul>
        </nav>
    </aside>

<div class="main-content">
        <header class="header">
            <h1>Tableau de Bord</h1>
            <button class="button">Ajouter une commande</button>
        </header>

<section id="clients" class="section-card">
            <h2>2.1 Clients Internes</h2>
            <p><strong>Gestion des clients:</strong> Ajout, modification, suppression. Fiche détaillée (nom, prénom, téléphone, e-mail, mensurations, préférences). Recherche par nom ou téléphone. Historique des commandes passées.</p>
            <p><a href="#" class="button">Voir tous les clients</a></p>
        </section>

<section id="commandes" class="section-card">
            <h2>2.2 Commandes</h2>
            <p><strong>Création de commande:</strong> Client associé, type de vêtement, mensurations, tissu, dates, prix, statut. Vue par filtre (statut, date, client). Statistiques (mensuelles, par statut, par client).</p>
            <p><a href="#" class="button">Gérer les commandes</a></p>
        </section>

<section id="modeles" class="section-card">
            <h2>2.3 Modèles de Couture</h2>
            <p><strong>Galerie de modèles:</strong> Image, nom, description, difficulté, prix indicatif. Ajout/modification/suppression. Association à une commande. Classement par catégorie, saison, popularité. Modèles spécifiques par atelier.</p>
            <p><a href="#" class="button">Explorer les modèles</a></p>
        </section>

<section id="stock" class="section-card">
            <h2>2.4 Tissus et Fournitures</h2>
            <p><strong>Gestion de stock:</strong> Tissus (nom, couleur, métrage), accessoires (boutons, zips). Entrée/sortie de stock. Alertes de seuil critique. Historique de mouvement.</p>
            <p><a href="#" class="button">Gérer le stock</a></p>
        </section>

<section id="employes" class="section-card">
            <h2>2.5 Employés / Apprentis</h2>
            <p><strong>Gestion des profils:</strong> Nom, poste, spécialité. Attribution de commandes. Suivi des productions. Historique de travail par employé.</p>
            <p><a href="#" class="button">Voir les employés</a></p>
        </section>

<section id="financier" class="section-card">
            <h2>2.6 Suivi Financier</h2>
            <p><strong>Paiements:</strong> Acomptes, soldes. Vue mensuelle (revenu, dépenses, bénéfices). Export (PDF, Excel, CSV). Récapitulatif par client, par commande.</p>
            <p><a href="#" class="button">Accéder au suivi financier</a></p>
        </section>

<section id="notifications" class="section-card">
            <h2>2.7 Notifications Internes</h2>
            <p><strong>Alertes:</strong> Livraison dans 48h, stock faible, commandes en retard. Notifications par mail ou via interface.</p>
            <p><a href="#" class="button">Voir les notifications</a></p>
        </section>

<section id="securite" class="section-card">
            <h2>2.8 Sécurité & Sauvegarde</h2>
            <p><strong>Authentification:</strong> Mot de passe ou OTP. Rôles (Admin, Responsable d’atelier, Couturier/Apprenti). Permissions selon rôle. Sauvegarde automatique (Supabase ou stockage externe).</p>
            <p><a href="#" class="button">Gérer les paramètres de sécurité</a></p>
        </section>

CSS