275 lines
11 KiB
HTML
275 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||
<title>LocOutil</title>
|
||
<link rel="stylesheet" href="/static/style.css"/>
|
||
</head>
|
||
<body>
|
||
<div class="layout">
|
||
<!-- Sidebar -->
|
||
<nav class="sidebar">
|
||
<div class="logo">🔧 LocOutil</div>
|
||
<a class="nav-item active" data-section="dashboard">📊 Dashboard</a>
|
||
<a class="nav-item" data-section="tools">🔨 Outils</a>
|
||
<a class="nav-item" data-section="clients">👥 Clients</a>
|
||
<a class="nav-item" data-section="rentals">📋 Locations</a>
|
||
<a class="nav-item" data-section="calendar">📅 Calendrier</a>
|
||
<a class="nav-item" data-section="listings">📢 Annonces</a>
|
||
<a class="nav-item" data-section="settings">⚙️ Paramètres</a>
|
||
</nav>
|
||
|
||
<main class="content">
|
||
|
||
<!-- DASHBOARD -->
|
||
<section id="section-dashboard" class="section">
|
||
<h2>Dashboard</h2>
|
||
<div class="stats-grid" id="dash-stats"></div>
|
||
<h3 style="margin-top:24px">Retours dans les 7 jours</h3>
|
||
<div id="dash-returning"></div>
|
||
</section>
|
||
|
||
<!-- OUTILS -->
|
||
<section id="section-tools" class="section hidden">
|
||
<div class="section-header">
|
||
<h2>Outils</h2>
|
||
<button class="btn btn-primary" onclick="openToolModal()">+ Ajouter</button>
|
||
</div>
|
||
<div class="search-bar"><input type="text" id="tools-search" placeholder="Rechercher…" oninput="renderTools()"/></div>
|
||
<div id="tools-grid" class="tools-grid"></div>
|
||
</section>
|
||
|
||
<!-- CLIENTS -->
|
||
<section id="section-clients" class="section hidden">
|
||
<div class="section-header">
|
||
<h2>Clients</h2>
|
||
<button class="btn btn-primary" onclick="openClientModal()">+ Ajouter</button>
|
||
</div>
|
||
<div class="search-bar"><input type="text" id="clients-search" placeholder="Rechercher…" oninput="renderClients()"/></div>
|
||
<div id="clients-list"></div>
|
||
</section>
|
||
|
||
<!-- LOCATIONS -->
|
||
<section id="section-rentals" class="section hidden">
|
||
<div class="section-header">
|
||
<h2>Locations</h2>
|
||
<button class="btn btn-primary" onclick="openRentalModal()">+ Ajouter</button>
|
||
</div>
|
||
<div class="filter-bar">
|
||
<button class="filter-btn active" data-status="">Toutes</button>
|
||
<button class="filter-btn" data-status="confirmed">Confirmées</button>
|
||
<button class="filter-btn" data-status="ongoing">En cours</button>
|
||
<button class="filter-btn" data-status="returned">Retournées</button>
|
||
<button class="filter-btn" data-status="cancelled">Annulées</button>
|
||
</div>
|
||
<div id="rentals-list"></div>
|
||
</section>
|
||
|
||
<!-- CALENDRIER -->
|
||
<section id="section-calendar" class="section hidden">
|
||
<div class="section-header">
|
||
<h2>Calendrier</h2>
|
||
<div class="cal-nav">
|
||
<button class="btn btn-ghost" onclick="calPrev()">‹</button>
|
||
<span id="cal-title"></span>
|
||
<button class="btn btn-ghost" onclick="calNext()">›</button>
|
||
</div>
|
||
</div>
|
||
<div id="calendar-wrap"></div>
|
||
</section>
|
||
|
||
<!-- ANNONCES -->
|
||
<section id="section-listings" class="section hidden">
|
||
<div class="section-header">
|
||
<h2>Annonces par plateforme</h2>
|
||
<div style="font-size:.8rem;color:var(--muted)">Cliquez sur une cellule pour gérer l'annonce</div>
|
||
</div>
|
||
<div id="listings-matrix"></div>
|
||
</section>
|
||
|
||
<!-- PARAMÈTRES -->
|
||
<section id="section-settings" class="section hidden">
|
||
<h2>Paramètres — Plateformes</h2>
|
||
<div class="card" style="max-width:500px">
|
||
<div id="platforms-list"></div>
|
||
<div class="form-row" style="margin-top:12px">
|
||
<input type="text" id="new-platform" placeholder="Nouvelle plateforme…"/>
|
||
<button class="btn btn-primary" onclick="addPlatform()">Ajouter</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<!-- MODAL OUTIL -->
|
||
<div id="modal-tool" class="modal hidden">
|
||
<div class="modal-box card">
|
||
<h2 id="modal-tool-title">Ajouter un outil</h2>
|
||
<input type="hidden" id="tool-id"/>
|
||
<div class="form-grid">
|
||
<div class="form-col">
|
||
<label>Nom *</label>
|
||
<input type="text" id="tool-name" placeholder="Ex: Perceuse Bosch"/>
|
||
<label>Catégorie</label>
|
||
<input type="text" id="tool-category" placeholder="Ex: Électroportatif"/>
|
||
<label>Prix / jour (€) *</label>
|
||
<input type="number" id="tool-daily" min="0" step="0.5" value="0"/>
|
||
<label>Prix week-end (€)</label>
|
||
<input type="number" id="tool-weekend" min="0" step="0.5" value="0"/>
|
||
<label>Caution (€)</label>
|
||
<input type="number" id="tool-deposit" min="0" step="1" value="0"/>
|
||
</div>
|
||
<div class="form-col">
|
||
<label>Description</label>
|
||
<textarea id="tool-desc" rows="3" placeholder="État, accessoires inclus…"></textarea>
|
||
<label>Notes internes</label>
|
||
<textarea id="tool-notes" rows="2" placeholder="Notes privées…"></textarea>
|
||
<label>Photos</label>
|
||
<input type="file" id="tool-images" accept="image/*" multiple/>
|
||
<div id="tool-images-preview" class="images-preview"></div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="btn btn-ghost" onclick="closeModal('modal-tool')">Annuler</button>
|
||
<button class="btn btn-primary" onclick="saveTool()">Enregistrer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL OUTIL DÉTAIL -->
|
||
<div id="modal-tool-detail" class="modal hidden">
|
||
<div class="modal-box card wide">
|
||
<div id="tool-detail-content"></div>
|
||
<div class="modal-actions">
|
||
<button class="btn btn-ghost" onclick="closeModal('modal-tool-detail')">Fermer</button>
|
||
<button class="btn btn-danger" id="btn-delete-tool">Supprimer</button>
|
||
<button class="btn btn-primary" id="btn-edit-tool">Modifier</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL CLIENT -->
|
||
<div id="modal-client" class="modal hidden">
|
||
<div class="modal-box card">
|
||
<h2 id="modal-client-title">Ajouter un client</h2>
|
||
<input type="hidden" id="client-id"/>
|
||
<label>Nom *</label>
|
||
<input type="text" id="client-name"/>
|
||
<label>Téléphone</label>
|
||
<input type="text" id="client-phone"/>
|
||
<label>Email</label>
|
||
<input type="email" id="client-email"/>
|
||
<label>Adresse</label>
|
||
<input type="text" id="client-address"/>
|
||
<label>Notes</label>
|
||
<textarea id="client-notes" rows="2"></textarea>
|
||
<div class="modal-actions">
|
||
<button class="btn btn-ghost" onclick="closeModal('modal-client')">Annuler</button>
|
||
<button class="btn btn-primary" onclick="saveClient()">Enregistrer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL CLIENT DÉTAIL -->
|
||
<div id="modal-client-detail" class="modal hidden">
|
||
<div class="modal-box card wide">
|
||
<div id="client-detail-content"></div>
|
||
<div class="modal-actions">
|
||
<button class="btn btn-ghost" onclick="closeModal('modal-client-detail')">Fermer</button>
|
||
<button class="btn btn-danger" id="btn-delete-client">Supprimer</button>
|
||
<button class="btn btn-primary" id="btn-edit-client">Modifier</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL LOCATION -->
|
||
<div id="modal-rental" class="modal hidden">
|
||
<div class="modal-box card">
|
||
<h2 id="modal-rental-title">Nouvelle location</h2>
|
||
<input type="hidden" id="rental-id"/>
|
||
<div class="form-grid">
|
||
<div class="form-col">
|
||
<label>Outil *</label>
|
||
<select id="rental-tool"></select>
|
||
<label>Client *</label>
|
||
<select id="rental-client"></select>
|
||
<label>Plateforme</label>
|
||
<select id="rental-platform"></select>
|
||
<label>Statut</label>
|
||
<select id="rental-status">
|
||
<option value="confirmed">Confirmée</option>
|
||
<option value="ongoing">En cours</option>
|
||
<option value="returned">Retournée</option>
|
||
<option value="cancelled">Annulée</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-col">
|
||
<label>Date début *</label>
|
||
<input type="date" id="rental-start" oninput="calcRentalPrice()"/>
|
||
<label>Date fin *</label>
|
||
<input type="date" id="rental-end" oninput="calcRentalPrice()"/>
|
||
<label>Prix total (€) *</label>
|
||
<input type="number" id="rental-price" min="0" step="0.5"/>
|
||
<div class="price-hint" id="rental-price-hint"></div>
|
||
<label><input type="checkbox" id="rental-deposit-collected"/> Caution encaissée</label>
|
||
<label><input type="checkbox" id="rental-deposit-returned"/> Caution rendue</label>
|
||
<label>Notes de retour</label>
|
||
<textarea id="rental-notes" rows="2"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="btn btn-ghost" onclick="closeModal('modal-rental')">Annuler</button>
|
||
<button class="btn btn-primary" onclick="saveRental()">Enregistrer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL ANNONCE -->
|
||
<div id="modal-listing" class="modal hidden">
|
||
<div class="modal-box card">
|
||
<h2 id="modal-listing-title">Annonce</h2>
|
||
<input type="hidden" id="listing-id"/>
|
||
<input type="hidden" id="listing-tool-id"/>
|
||
<input type="hidden" id="listing-platform-id"/>
|
||
<div class="listing-meta" id="listing-meta" style="color:var(--muted);font-size:.85rem;margin-bottom:4px"></div>
|
||
<label>Titre de l'annonce</label>
|
||
<input type="text" id="listing-title" placeholder="Ex: Perceuse Bosch à louer — 20€/j"/>
|
||
<label>Description</label>
|
||
<textarea id="listing-desc" rows="5" placeholder="Texte de l'annonce à copier-coller sur la plateforme…"></textarea>
|
||
<label>Prix affiché (€)</label>
|
||
<input type="number" id="listing-price" min="0" step="0.5" placeholder="Laisser vide = prix standard"/>
|
||
<label>Lien de l'annonce</label>
|
||
<input type="text" id="listing-url" placeholder="https://www.leboncoin.fr/…"/>
|
||
<label>Notes</label>
|
||
<input type="text" id="listing-notes" placeholder="Ex: expire le 15/06, renouveler chaque mois…"/>
|
||
<label><input type="checkbox" id="listing-active"/> Annonce active (en ligne)</label>
|
||
<div class="modal-actions">
|
||
<button class="btn btn-ghost" onclick="closeModal('modal-listing')">Annuler</button>
|
||
<button class="btn btn-danger" id="btn-listing-delete" style="display:none">Supprimer</button>
|
||
<button class="btn btn-ghost" id="btn-listing-copy" style="display:none" onclick="copyListingText()">📋 Copier</button>
|
||
<button class="btn btn-primary" onclick="saveListing()">Enregistrer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LIGHTBOX -->
|
||
<div id="lightbox" class="lightbox hidden">
|
||
<div class="lightbox-overlay" onclick="closeLightbox()"></div>
|
||
<div class="lightbox-content">
|
||
<button class="lightbox-close" onclick="closeLightbox()">✕</button>
|
||
<button class="lightbox-nav lightbox-prev" onclick="lightboxNav(-1)">‹</button>
|
||
<img id="lightbox-img" src="" alt=""/>
|
||
<button class="lightbox-nav lightbox-next" onclick="lightboxNav(1)">›</button>
|
||
<div class="lightbox-footer">
|
||
<span id="lightbox-counter"></span>
|
||
<a id="lightbox-download" href="" download class="btn btn-primary btn-sm">⬇ Télécharger</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|