Initial commit: locoutil — gestion de location d'outils
This commit is contained in:
+513
@@ -0,0 +1,513 @@
|
||||
// ─── API helpers ───────────────────────────────────────────────────────────
|
||||
const api = {
|
||||
get: (u) => fetch(u).then(r => r.json()),
|
||||
post: (u, b) => fetch(u, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(b)}).then(r => r.status===204?null:r.json()),
|
||||
put: (u, b) => fetch(u, {method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify(b)}).then(r => r.json()),
|
||||
del: (u) => fetch(u, {method:'DELETE'}),
|
||||
form: (u, fd, method='POST') => fetch(u, {method, body:fd}).then(r => r.status===204?null:r.json()),
|
||||
};
|
||||
|
||||
// ─── State ──────────────────────────────────────────────────────────────────
|
||||
let tools=[], clients=[], platforms=[], rentals=[];
|
||||
let calYear = new Date().getFullYear(), calMonth = new Date().getMonth()+1;
|
||||
let rentalFilter = '';
|
||||
|
||||
// ─── Navigation ─────────────────────────────────────────────────────────────
|
||||
document.querySelectorAll('.nav-item').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||||
document.querySelectorAll('.section').forEach(s => s.classList.add('hidden'));
|
||||
el.classList.add('active');
|
||||
const sec = 'section-' + el.dataset.section;
|
||||
document.getElementById(sec).classList.remove('hidden');
|
||||
if (el.dataset.section === 'dashboard') loadDashboard();
|
||||
if (el.dataset.section === 'tools') loadTools();
|
||||
if (el.dataset.section === 'clients') loadClients();
|
||||
if (el.dataset.section === 'rentals') loadRentals();
|
||||
if (el.dataset.section === 'calendar') loadCalendar();
|
||||
if (el.dataset.section === 'settings') loadPlatforms();
|
||||
});
|
||||
});
|
||||
|
||||
function closeModal(id) { document.getElementById(id).classList.add('hidden'); }
|
||||
document.querySelectorAll('.modal').forEach(m => m.addEventListener('click', e => { if(e.target===m) m.classList.add('hidden'); }));
|
||||
|
||||
// ─── Dashboard ──────────────────────────────────────────────────────────────
|
||||
async function loadDashboard() {
|
||||
const d = await api.get('/api/dashboard');
|
||||
const stats = document.getElementById('dash-stats');
|
||||
stats.innerHTML = `
|
||||
<div class="stat-card primary"><div class="stat-val">${d.active_rentals}</div><div class="stat-label">Location(s) en cours</div></div>
|
||||
<div class="stat-card success"><div class="stat-val">${fmt€(d.revenue_month)}</div><div class="stat-label">Revenus ce mois</div></div>
|
||||
<div class="stat-card info"><div class="stat-val">${fmt€(d.revenue_total)}</div><div class="stat-label">Revenus total</div></div>
|
||||
<div class="stat-card"><div class="stat-val">${d.tools_count}</div><div class="stat-label">Outils</div></div>
|
||||
<div class="stat-card"><div class="stat-val">${d.clients_count}</div><div class="stat-label">Clients</div></div>
|
||||
<div class="stat-card warning"><div class="stat-val">${d.pending_deposit_return}</div><div class="stat-label">Cautions à rendre</div></div>
|
||||
`;
|
||||
const ret = document.getElementById('dash-returning');
|
||||
if (!d.returning_soon.length) { ret.innerHTML = '<div class="empty-state">Aucun retour prévu dans les 7 jours</div>'; return; }
|
||||
ret.innerHTML = d.returning_soon.map(r => `
|
||||
<div class="return-row" onclick="openRentalDetail(${r.id})">
|
||||
<span>🔨 <strong>${r.tool_name}</strong></span>
|
||||
<span>👤 ${r.client_name}</span>
|
||||
<span>📅 Retour le ${fmtDate(r.end_date)}</span>
|
||||
<span class="badge badge-${r.status}">${statusLabel(r.status)}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// ─── Tools ──────────────────────────────────────────────────────────────────
|
||||
async function loadTools() {
|
||||
tools = await api.get('/api/tools');
|
||||
renderTools();
|
||||
}
|
||||
|
||||
function renderTools() {
|
||||
const q = document.getElementById('tools-search').value.toLowerCase();
|
||||
const grid = document.getElementById('tools-grid');
|
||||
const filtered = tools.filter(t => t.name.toLowerCase().includes(q) || (t.category||'').toLowerCase().includes(q));
|
||||
if (!filtered.length) { grid.innerHTML = '<div class="empty-state">Aucun outil trouvé</div>'; return; }
|
||||
grid.innerHTML = filtered.map(t => {
|
||||
const img = t.main_image ? `<img class="tool-img" src="/uploads/tools/${t.main_image}" loading="lazy"/>` : `<div class="tool-img">🔧</div>`;
|
||||
return `<div class="tool-card" onclick="openToolDetail(${t.id})">
|
||||
${img}
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">${esc(t.name)}</div>
|
||||
<div class="tool-cat">${esc(t.category||'')}</div>
|
||||
<div class="tool-prices">
|
||||
<span>${fmt€(t.daily_price)}/j</span>
|
||||
${t.weekend_price ? `<span>${fmt€(t.weekend_price)}/wk</span>` : ''}
|
||||
${t.deposit ? `<span>🔒 ${fmt€(t.deposit)}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function openToolModal(tool=null) {
|
||||
document.getElementById('tool-id').value = tool?.id || '';
|
||||
document.getElementById('modal-tool-title').textContent = tool ? 'Modifier l\'outil' : 'Ajouter un outil';
|
||||
document.getElementById('tool-name').value = tool?.name || '';
|
||||
document.getElementById('tool-category').value = tool?.category || '';
|
||||
document.getElementById('tool-daily').value = tool?.daily_price ?? 0;
|
||||
document.getElementById('tool-weekend').value = tool?.weekend_price ?? 0;
|
||||
document.getElementById('tool-deposit').value = tool?.deposit ?? 0;
|
||||
document.getElementById('tool-desc').value = tool?.description || '';
|
||||
document.getElementById('tool-notes').value = tool?.notes || '';
|
||||
document.getElementById('tool-images').value = '';
|
||||
const preview = document.getElementById('tool-images-preview');
|
||||
preview.innerHTML = '';
|
||||
if (tool?.images) {
|
||||
tool.images.forEach(img => {
|
||||
preview.innerHTML += `<div class="img-thumb">
|
||||
<img src="/uploads/tools/${img.filename}"/>
|
||||
${img.is_main ? '<span class="img-main">★</span>' : `<button class="img-main" onclick="setMainImage(${tool.id},${img.id})">★</button>`}
|
||||
<button class="img-del" onclick="deleteToolImage(${tool.id},${img.id})">×</button>
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
document.getElementById('modal-tool').classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function saveTool() {
|
||||
const id = document.getElementById('tool-id').value;
|
||||
const name = document.getElementById('tool-name').value.trim();
|
||||
if (!name) return;
|
||||
if (id) {
|
||||
// update fields
|
||||
await api.put(`/api/tools/${id}`, {
|
||||
name, description: document.getElementById('tool-desc').value,
|
||||
category: document.getElementById('tool-category').value,
|
||||
daily_price: parseFloat(document.getElementById('tool-daily').value)||0,
|
||||
weekend_price: parseFloat(document.getElementById('tool-weekend').value)||0,
|
||||
deposit: parseFloat(document.getElementById('tool-deposit').value)||0,
|
||||
notes: document.getElementById('tool-notes').value
|
||||
});
|
||||
// upload new images if any
|
||||
const files = document.getElementById('tool-images').files;
|
||||
for (const file of files) {
|
||||
const fd = new FormData(); fd.append('image', file);
|
||||
await api.form(`/api/tools/${id}/images`, fd);
|
||||
}
|
||||
} else {
|
||||
const fd = new FormData();
|
||||
fd.append('name', name);
|
||||
fd.append('description', document.getElementById('tool-desc').value);
|
||||
fd.append('category', document.getElementById('tool-category').value);
|
||||
fd.append('daily_price', document.getElementById('tool-daily').value||0);
|
||||
fd.append('weekend_price', document.getElementById('tool-weekend').value||0);
|
||||
fd.append('deposit', document.getElementById('tool-deposit').value||0);
|
||||
fd.append('notes', document.getElementById('tool-notes').value);
|
||||
const files = document.getElementById('tool-images').files;
|
||||
for (const file of files) fd.append('images', file);
|
||||
await api.form('/api/tools', fd);
|
||||
}
|
||||
closeModal('modal-tool');
|
||||
await loadTools();
|
||||
}
|
||||
|
||||
async function openToolDetail(id) {
|
||||
const t = await api.get(`/api/tools/${id}`);
|
||||
const rents = await api.get(`/api/rentals?tool_id=${id}`);
|
||||
const gallery = t.images.length ? t.images.map(img =>
|
||||
`<img src="/uploads/tools/${img.filename}" class="${img.is_main?'main-img':''}" title="${img.is_main?'Principale':''}" onclick="setMainImage(${id},${img.id})"/>`
|
||||
).join('') : '<span style="color:var(--muted)">Aucune photo</span>';
|
||||
|
||||
document.getElementById('tool-detail-content').innerHTML = `
|
||||
<h2>${esc(t.name)} ${t.category ? `<span style="font-size:.8rem;color:var(--muted)">${esc(t.category)}</span>` : ''}</h2>
|
||||
<div class="tool-detail-gallery">${gallery}</div>
|
||||
<div class="tool-detail-info">
|
||||
<div class="detail-field"><label>Prix / jour</label><div class="val price">${fmt€(t.daily_price)}</div></div>
|
||||
<div class="detail-field"><label>Prix week-end</label><div class="val price">${t.weekend_price ? fmt€(t.weekend_price) : '—'}</div></div>
|
||||
<div class="detail-field"><label>Caution</label><div class="val">${t.deposit ? fmt€(t.deposit) : '—'}</div></div>
|
||||
<div class="detail-field"><label>Description</label><div class="val">${esc(t.description)||'—'}</div></div>
|
||||
${t.notes ? `<div class="detail-field"><label>Notes</label><div class="val">${esc(t.notes)}</div></div>` : ''}
|
||||
</div>
|
||||
<h3 style="margin-top:12px">Historique locations (${rents.length})</h3>
|
||||
${rents.slice(0,5).map(r => `<div class="rental-row" onclick="closeModal('modal-tool-detail');openRentalDetail(${r.id})">
|
||||
<div class="rental-info">
|
||||
<div class="rental-title">👤 ${esc(r.client?.name||'')}</div>
|
||||
<div class="rental-meta"><span>${fmtDate(r.start_date)} → ${fmtDate(r.end_date)}</span><span>${fmt€(r.price)}</span><span class="badge badge-${r.status}">${statusLabel(r.status)}</span></div>
|
||||
</div>
|
||||
</div>`).join('')}
|
||||
${rents.length > 5 ? `<div style="color:var(--muted);font-size:.8rem">… et ${rents.length-5} autres</div>` : ''}
|
||||
`;
|
||||
document.getElementById('btn-edit-tool').onclick = () => { closeModal('modal-tool-detail'); openToolModal(t); };
|
||||
document.getElementById('btn-delete-tool').onclick = async () => {
|
||||
if (!confirm('Supprimer cet outil ?')) return;
|
||||
await api.del(`/api/tools/${id}`);
|
||||
closeModal('modal-tool-detail');
|
||||
loadTools();
|
||||
};
|
||||
document.getElementById('modal-tool-detail').classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function deleteToolImage(toolId, imgId) {
|
||||
await api.del(`/api/tools/${toolId}/images/${imgId}`);
|
||||
const t = await api.get(`/api/tools/${toolId}`);
|
||||
openToolModal(t);
|
||||
}
|
||||
async function setMainImage(toolId, imgId) {
|
||||
await api.form(`/api/tools/${toolId}/images/${imgId}/main`, new FormData(), 'POST');
|
||||
const t = await api.get(`/api/tools/${toolId}`);
|
||||
openToolModal(t);
|
||||
}
|
||||
|
||||
// ─── Clients ────────────────────────────────────────────────────────────────
|
||||
async function loadClients() {
|
||||
clients = await api.get('/api/clients');
|
||||
renderClients();
|
||||
}
|
||||
|
||||
function renderClients() {
|
||||
const q = document.getElementById('clients-search').value.toLowerCase();
|
||||
const list = document.getElementById('clients-list');
|
||||
const filtered = clients.filter(c => c.name.toLowerCase().includes(q) || (c.phone||'').includes(q) || (c.email||'').toLowerCase().includes(q));
|
||||
if (!filtered.length) { list.innerHTML = '<div class="empty-state">Aucun client trouvé</div>'; return; }
|
||||
list.innerHTML = filtered.map(c => `
|
||||
<div class="client-row" onclick="openClientDetail(${c.id})">
|
||||
<div class="client-avatar">${c.name[0].toUpperCase()}</div>
|
||||
<div class="client-info">
|
||||
<div class="client-name">${esc(c.name)}</div>
|
||||
<div class="client-meta">
|
||||
${c.phone ? `<span>📞 ${esc(c.phone)}</span>` : ''}
|
||||
${c.email ? `<span>✉️ ${esc(c.email)}</span>` : ''}
|
||||
<span>📋 ${c.rental_count} location(s)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function openClientModal(client=null) {
|
||||
document.getElementById('client-id').value = client?.id || '';
|
||||
document.getElementById('modal-client-title').textContent = client ? 'Modifier le client' : 'Ajouter un client';
|
||||
document.getElementById('client-name').value = client?.name || '';
|
||||
document.getElementById('client-phone').value = client?.phone || '';
|
||||
document.getElementById('client-email').value = client?.email || '';
|
||||
document.getElementById('client-address').value = client?.address || '';
|
||||
document.getElementById('client-notes').value = client?.notes || '';
|
||||
document.getElementById('modal-client').classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function saveClient() {
|
||||
const id = document.getElementById('client-id').value;
|
||||
const name = document.getElementById('client-name').value.trim();
|
||||
if (!name) return;
|
||||
const fd = new FormData();
|
||||
fd.append('name', name);
|
||||
fd.append('phone', document.getElementById('client-phone').value);
|
||||
fd.append('email', document.getElementById('client-email').value);
|
||||
fd.append('address', document.getElementById('client-address').value);
|
||||
fd.append('notes', document.getElementById('client-notes').value);
|
||||
if (id) {
|
||||
await api.put(`/api/clients/${id}`, {
|
||||
name, phone: document.getElementById('client-phone').value,
|
||||
email: document.getElementById('client-email').value,
|
||||
address: document.getElementById('client-address').value,
|
||||
notes: document.getElementById('client-notes').value
|
||||
});
|
||||
} else {
|
||||
await api.form('/api/clients', fd);
|
||||
}
|
||||
closeModal('modal-client');
|
||||
loadClients();
|
||||
}
|
||||
|
||||
async function openClientDetail(id) {
|
||||
const c = await api.get(`/api/clients/${id}`);
|
||||
const docsHtml = c.documents.length ? c.documents.map(d => {
|
||||
const isImg = /\.(jpg|jpeg|png|gif|webp)$/i.test(d.filename);
|
||||
return `<div class="doc-item">
|
||||
${isImg ? `<img src="/uploads/clients/${d.filename}"/>` : `<div class="doc-file">📄</div>`}
|
||||
<div class="doc-label">${esc(d.label)}</div>
|
||||
<button class="doc-del" onclick="deleteDoc(${id},${d.id})">×</button>
|
||||
</div>`;
|
||||
}).join('') : '';
|
||||
|
||||
document.getElementById('client-detail-content').innerHTML = `
|
||||
<h2>${esc(c.name)}</h2>
|
||||
<div class="tool-detail-info" style="margin-bottom:12px">
|
||||
${c.phone ? `<div class="detail-field"><label>Téléphone</label><div class="val">${esc(c.phone)}</div></div>` : ''}
|
||||
${c.email ? `<div class="detail-field"><label>Email</label><div class="val">${esc(c.email)}</div></div>` : ''}
|
||||
${c.address ? `<div class="detail-field"><label>Adresse</label><div class="val">${esc(c.address)}</div></div>` : ''}
|
||||
${c.notes ? `<div class="detail-field"><label>Notes</label><div class="val">${esc(c.notes)}</div></div>` : ''}
|
||||
</div>
|
||||
<h3>Documents (${c.documents.length})</h3>
|
||||
<div class="doc-grid">${docsHtml}</div>
|
||||
<div class="upload-zone" onclick="document.getElementById('doc-upload-${id}').click()">
|
||||
📎 Ajouter un document
|
||||
<input type="file" id="doc-upload-${id}" accept="image/*,.pdf" style="display:none" onchange="uploadDoc(${id},this)"/>
|
||||
</div>
|
||||
<h3 style="margin-top:12px">Historique locations (${c.rentals.length})</h3>
|
||||
${c.rentals.slice(0,5).map(r => `<div class="rental-row" onclick="closeModal('modal-client-detail');openRentalDetail(${r.id})">
|
||||
<div class="rental-info">
|
||||
<div class="rental-title">🔨 ${esc(r.tool_name)}</div>
|
||||
<div class="rental-meta"><span>${fmtDate(r.start_date)} → ${fmtDate(r.end_date)}</span><span>${fmt€(r.price)}</span><span class="badge badge-${r.status}">${statusLabel(r.status)}</span></div>
|
||||
</div>
|
||||
</div>`).join('')}
|
||||
`;
|
||||
document.getElementById('btn-edit-client').onclick = () => { closeModal('modal-client-detail'); openClientModal(c); };
|
||||
document.getElementById('btn-delete-client').onclick = async () => {
|
||||
if (!confirm('Supprimer ce client ?')) return;
|
||||
await api.del(`/api/clients/${id}`);
|
||||
closeModal('modal-client-detail');
|
||||
loadClients();
|
||||
};
|
||||
document.getElementById('modal-client-detail').classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function uploadDoc(clientId, input) {
|
||||
const file = input.files[0]; if (!file) return;
|
||||
const label = prompt('Libellé du document ?', 'Pièce d\'identité') || 'Document';
|
||||
const fd = new FormData(); fd.append('file', file); fd.append('label', label);
|
||||
await api.form(`/api/clients/${clientId}/documents`, fd);
|
||||
openClientDetail(clientId);
|
||||
}
|
||||
async function deleteDoc(clientId, docId) {
|
||||
if (!confirm('Supprimer ce document ?')) return;
|
||||
await api.del(`/api/clients/${clientId}/documents/${docId}`);
|
||||
openClientDetail(clientId);
|
||||
}
|
||||
|
||||
// ─── Rentals ────────────────────────────────────────────────────────────────
|
||||
async function loadRentals() {
|
||||
[tools, clients, platforms] = await Promise.all([api.get('/api/tools'), api.get('/api/clients'), api.get('/api/platforms')]);
|
||||
const url = rentalFilter ? `/api/rentals?status=${rentalFilter}` : '/api/rentals';
|
||||
rentals = await api.get(url);
|
||||
renderRentals();
|
||||
}
|
||||
|
||||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
rentalFilter = btn.dataset.status;
|
||||
loadRentals();
|
||||
});
|
||||
});
|
||||
|
||||
function renderRentals() {
|
||||
const list = document.getElementById('rentals-list');
|
||||
if (!rentals.length) { list.innerHTML = '<div class="empty-state">Aucune location trouvée</div>'; return; }
|
||||
list.innerHTML = rentals.map(r => `
|
||||
<div class="rental-row" onclick="openRentalDetail(${r.id})">
|
||||
<div class="rental-info">
|
||||
<div class="rental-title">🔨 ${esc(r.tool?.name||'')} — 👤 ${esc(r.client?.name||'')}</div>
|
||||
<div class="rental-meta">
|
||||
<span>📅 ${fmtDate(r.start_date)} → ${fmtDate(r.end_date)}</span>
|
||||
<span>💶 ${fmt€(r.price)}</span>
|
||||
${r.platform ? `<span>🔗 ${esc(r.platform.name)}</span>` : ''}
|
||||
<span class="badge badge-${r.status}">${statusLabel(r.status)}</span>
|
||||
${r.deposit_collected && !r.deposit_returned ? '<span style="color:var(--warning)">🔒 Caution à rendre</span>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function openRentalModal(rental=null) {
|
||||
if (!tools.length) [tools, clients, platforms] = await Promise.all([api.get('/api/tools'), api.get('/api/clients'), api.get('/api/platforms')]);
|
||||
document.getElementById('rental-id').value = rental?.id || '';
|
||||
document.getElementById('modal-rental-title').textContent = rental ? 'Modifier la location' : 'Nouvelle location';
|
||||
const tSel = document.getElementById('rental-tool');
|
||||
const cSel = document.getElementById('rental-client');
|
||||
const pSel = document.getElementById('rental-platform');
|
||||
tSel.innerHTML = tools.map(t => `<option value="${t.id}" ${rental?.tool_id===t.id?'selected':''}>${esc(t.name)}</option>`).join('');
|
||||
cSel.innerHTML = clients.map(c => `<option value="${c.id}" ${rental?.client_id===c.id?'selected':''}>${esc(c.name)}</option>`).join('');
|
||||
pSel.innerHTML = `<option value="">—</option>` + platforms.map(p => `<option value="${p.id}" ${rental?.platform_id===p.id?'selected':''}>${esc(p.name)}</option>`).join('');
|
||||
document.getElementById('rental-start').value = rental?.start_date || '';
|
||||
document.getElementById('rental-end').value = rental?.end_date || '';
|
||||
document.getElementById('rental-price').value = rental?.price ?? '';
|
||||
document.getElementById('rental-deposit-collected').checked = !!rental?.deposit_collected;
|
||||
document.getElementById('rental-deposit-returned').checked = !!rental?.deposit_returned;
|
||||
document.getElementById('rental-notes').value = rental?.return_notes || '';
|
||||
document.getElementById('rental-status').value = rental?.status || 'confirmed';
|
||||
document.getElementById('rental-price-hint').textContent = '';
|
||||
document.getElementById('modal-rental').classList.remove('hidden');
|
||||
}
|
||||
|
||||
function calcRentalPrice() {
|
||||
const start = document.getElementById('rental-start').value;
|
||||
const end = document.getElementById('rental-end').value;
|
||||
const toolId = parseInt(document.getElementById('rental-tool').value);
|
||||
if (!start || !end || !toolId) return;
|
||||
const t = tools.find(t => t.id === toolId);
|
||||
if (!t) return;
|
||||
const days = Math.max(1, Math.ceil((new Date(end) - new Date(start)) / 86400000) + 1);
|
||||
const isWeekend = days <= 3 && [6,0].includes(new Date(start).getDay());
|
||||
const price = isWeekend && t.weekend_price ? t.weekend_price : t.daily_price * days;
|
||||
document.getElementById('rental-price').value = price.toFixed(2);
|
||||
document.getElementById('rental-price-hint').textContent = `${days} jour(s) × ${fmt€(t.daily_price)} = ${fmt€(price)} (estimé)`;
|
||||
}
|
||||
|
||||
async function saveRental() {
|
||||
const id = document.getElementById('rental-id').value;
|
||||
const data = {
|
||||
tool_id: parseInt(document.getElementById('rental-tool').value),
|
||||
client_id: parseInt(document.getElementById('rental-client').value),
|
||||
platform_id: parseInt(document.getElementById('rental-platform').value)||null,
|
||||
start_date: document.getElementById('rental-start').value,
|
||||
end_date: document.getElementById('rental-end').value,
|
||||
price: parseFloat(document.getElementById('rental-price').value)||0,
|
||||
deposit_collected: document.getElementById('rental-deposit-collected').checked,
|
||||
deposit_returned: document.getElementById('rental-deposit-returned').checked,
|
||||
status: document.getElementById('rental-status').value,
|
||||
return_notes: document.getElementById('rental-notes').value
|
||||
};
|
||||
if (!data.start_date || !data.end_date) return;
|
||||
if (id) await api.put(`/api/rentals/${id}`, data);
|
||||
else await api.post('/api/rentals', data);
|
||||
closeModal('modal-rental');
|
||||
loadRentals();
|
||||
}
|
||||
|
||||
async function openRentalDetail(id) {
|
||||
const r = await api.get(`/api/rentals/${id}`);
|
||||
const days = Math.max(1, Math.ceil((new Date(r.end_date) - new Date(r.start_date)) / 86400000) + 1);
|
||||
// reuse rental modal for edit
|
||||
await openRentalModal(r);
|
||||
document.getElementById('modal-rental-title').textContent = 'Modifier la location';
|
||||
// add delete button
|
||||
const actions = document.querySelector('#modal-rental .modal-actions');
|
||||
if (!document.getElementById('btn-del-rental')) {
|
||||
const del = document.createElement('button');
|
||||
del.className = 'btn btn-danger'; del.id = 'btn-del-rental'; del.textContent = 'Supprimer';
|
||||
del.onclick = async () => {
|
||||
if (!confirm('Supprimer cette location ?')) return;
|
||||
await api.del(`/api/rentals/${id}`);
|
||||
closeModal('modal-rental');
|
||||
loadRentals();
|
||||
};
|
||||
actions.prepend(del);
|
||||
} else {
|
||||
document.getElementById('btn-del-rental').onclick = async () => {
|
||||
if (!confirm('Supprimer cette location ?')) return;
|
||||
await api.del(`/api/rentals/${id}`);
|
||||
closeModal('modal-rental');
|
||||
loadRentals();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Calendar ────────────────────────────────────────────────────────────────
|
||||
async function loadCalendar() {
|
||||
const data = await api.get(`/api/rentals/calendar?year=${calYear}&month=${calMonth}`);
|
||||
renderCalendar(data);
|
||||
}
|
||||
|
||||
function calPrev() { calMonth--; if(calMonth<1){calMonth=12;calYear--;} loadCalendar(); }
|
||||
function calNext() { calMonth++; if(calMonth>12){calMonth=1;calYear++;} loadCalendar(); }
|
||||
|
||||
function renderCalendar(rentals) {
|
||||
const title = document.getElementById('cal-title');
|
||||
title.textContent = new Date(calYear, calMonth-1, 1).toLocaleDateString('fr-FR', {month:'long', year:'numeric'});
|
||||
|
||||
const today = new Date().toISOString().slice(0,10);
|
||||
const firstDay = new Date(calYear, calMonth-1, 1).getDay();
|
||||
const daysInMonth = new Date(calYear, calMonth, 0).getDate();
|
||||
const startOffset = (firstDay + 6) % 7; // Monday start
|
||||
|
||||
let html = `<table class="cal-table"><thead><tr>`;
|
||||
['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'].forEach(d => html += `<th>${d}</th>`);
|
||||
html += '</tr></thead><tbody><tr>';
|
||||
|
||||
for (let i=0; i<startOffset; i++) html += '<td></td>';
|
||||
let col = startOffset;
|
||||
|
||||
for (let day=1; day<=daysInMonth; day++) {
|
||||
const dateStr = `${calYear}-${String(calMonth).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
|
||||
const dayRentals = rentals.filter(r => r.start_date <= dateStr && r.end_date >= dateStr);
|
||||
const isToday = dateStr === today;
|
||||
const numEl = isToday ? `<div class="cal-day-num today">${day}</div>` : `<div class="cal-day-num">${day}</div>`;
|
||||
const events = dayRentals.map(r =>
|
||||
`<div class="cal-event" onclick="openRentalDetail(${r.id})" title="${esc(r.tool_name)} — ${esc(r.client_name)} (${esc(r.platform_name||'Direct')})">
|
||||
🔨 ${esc(r.tool_name)}
|
||||
</div>`
|
||||
).join('');
|
||||
html += `<td>${numEl}${events}</td>`;
|
||||
col++;
|
||||
if (col % 7 === 0 && day < daysInMonth) html += '</tr><tr>';
|
||||
}
|
||||
while (col % 7 !== 0) { html += '<td></td>'; col++; }
|
||||
html += '</tr></tbody></table>';
|
||||
document.getElementById('calendar-wrap').innerHTML = html;
|
||||
}
|
||||
|
||||
// ─── Platforms ───────────────────────────────────────────────────────────────
|
||||
async function loadPlatforms() {
|
||||
platforms = await api.get('/api/platforms');
|
||||
const list = document.getElementById('platforms-list');
|
||||
list.innerHTML = platforms.length ? platforms.map(p => `
|
||||
<div class="platform-row">
|
||||
<span>${esc(p.name)}</span>
|
||||
<button class="btn-icon" onclick="deletePlatform(${p.id})">🗑️</button>
|
||||
</div>
|
||||
`).join('') : '<div style="color:var(--muted);padding:8px">Aucune plateforme</div>';
|
||||
}
|
||||
|
||||
async function addPlatform() {
|
||||
const name = document.getElementById('new-platform').value.trim();
|
||||
if (!name) return;
|
||||
await api.post('/api/platforms', {name});
|
||||
document.getElementById('new-platform').value = '';
|
||||
loadPlatforms();
|
||||
}
|
||||
document.getElementById('new-platform').addEventListener('keydown', e => { if(e.key==='Enter') addPlatform(); });
|
||||
|
||||
async function deletePlatform(id) {
|
||||
if (!confirm('Supprimer cette plateforme ?')) return;
|
||||
await api.del(`/api/platforms/${id}`);
|
||||
loadPlatforms();
|
||||
}
|
||||
|
||||
// ─── Utils ──────────────────────────────────────────────────────────────────
|
||||
function fmt€(v) { return Number(v).toLocaleString('fr-FR', {style:'currency', currency:'EUR'}); }
|
||||
function fmtDate(d) { if(!d) return '—'; return new Date(d+'T00:00:00').toLocaleDateString('fr-FR'); }
|
||||
function esc(s) { return (s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
|
||||
function statusLabel(s) {
|
||||
return {confirmed:'Confirmée', ongoing:'En cours', returned:'Retournée', cancelled:'Annulée'}[s] || s;
|
||||
}
|
||||
|
||||
// ─── Init ───────────────────────────────────────────────────────────────────
|
||||
loadDashboard();
|
||||
@@ -0,0 +1,182 @@
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--surface: #1e293b;
|
||||
--surface2: #293548;
|
||||
--border: #334155;
|
||||
--text: #f1f5f9;
|
||||
--muted: #94a3b8;
|
||||
--primary: #6366f1;
|
||||
--primary-h: #4f46e5;
|
||||
--success: #22c55e;
|
||||
--danger: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
--info: #38bdf8;
|
||||
--radius: 10px;
|
||||
--sidebar: 220px;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; }
|
||||
|
||||
.layout { display: flex; height: 100vh; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar { width: var(--sidebar); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 0; flex-shrink: 0; }
|
||||
.logo { font-size: 1.1rem; font-weight: 700; padding: 0 16px 20px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
|
||||
.nav-item { display: block; padding: 10px 16px; color: var(--muted); text-decoration: none; border-radius: 8px; margin: 2px 8px; cursor: pointer; font-size: 0.9rem; transition: background 0.15s, color 0.15s; }
|
||||
.nav-item:hover { background: var(--surface2); color: var(--text); }
|
||||
.nav-item.active { background: var(--primary); color: #fff; }
|
||||
|
||||
/* Content */
|
||||
.content { flex: 1; overflow-y: auto; padding: 24px; }
|
||||
.section { display: flex; flex-direction: column; gap: 16px; }
|
||||
.section.hidden { display: none; }
|
||||
.section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
|
||||
.section-header h2 { font-size: 1.3rem; font-weight: 700; }
|
||||
h2 { font-size: 1.3rem; font-weight: 700; }
|
||||
h3 { font-size: 1rem; font-weight: 600; color: var(--muted); }
|
||||
|
||||
/* Cards */
|
||||
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
|
||||
|
||||
/* Stats grid */
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
|
||||
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
|
||||
.stat-card .stat-val { font-size: 1.8rem; font-weight: 700; }
|
||||
.stat-card .stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
|
||||
.stat-card.primary .stat-val { color: var(--primary); }
|
||||
.stat-card.success .stat-val { color: var(--success); }
|
||||
.stat-card.warning .stat-val { color: var(--warning); }
|
||||
.stat-card.info .stat-val { color: var(--info); }
|
||||
|
||||
/* Tools grid */
|
||||
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
|
||||
.tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
|
||||
.tool-card:hover { border-color: var(--primary); transform: translateY(-2px); }
|
||||
.tool-card .tool-img { width: 100%; height: 150px; object-fit: cover; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--muted); }
|
||||
.tool-card img.tool-img { display: block; }
|
||||
.tool-card .tool-info { padding: 12px; }
|
||||
.tool-card .tool-name { font-weight: 600; font-size: 0.95rem; }
|
||||
.tool-card .tool-cat { font-size: 0.75rem; color: var(--muted); margin: 2px 0 8px; }
|
||||
.tool-card .tool-prices { font-size: 0.82rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.tool-card .tool-prices span { background: var(--surface2); padding: 2px 8px; border-radius: 99px; }
|
||||
|
||||
/* Clients list */
|
||||
.client-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color 0.15s; margin-bottom: 8px; }
|
||||
.client-row:hover { border-color: var(--primary); }
|
||||
.client-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
|
||||
.client-info { flex: 1; }
|
||||
.client-name { font-weight: 600; }
|
||||
.client-meta { font-size: 0.8rem; color: var(--muted); display: flex; gap: 12px; margin-top: 2px; }
|
||||
|
||||
/* Rentals */
|
||||
.rental-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s; }
|
||||
.rental-row:hover { border-color: var(--primary); }
|
||||
.rental-info { flex: 1; }
|
||||
.rental-title { font-weight: 600; }
|
||||
.rental-meta { font-size: 0.8rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
|
||||
.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; }
|
||||
.badge-confirmed { background: rgba(99,102,241,0.2); color: var(--primary); }
|
||||
.badge-ongoing { background: rgba(34,197,94,0.2); color: var(--success); }
|
||||
.badge-returned { background: rgba(148,163,184,0.15); color: var(--muted); }
|
||||
.badge-cancelled { background: rgba(239,68,68,0.15); color: var(--danger); }
|
||||
|
||||
/* Filter bar */
|
||||
.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.filter-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 99px; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.85rem; transition: all 0.15s; }
|
||||
.filter-btn.active, .filter-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
|
||||
|
||||
/* Search */
|
||||
.search-bar input { width: 100%; max-width: 400px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 12px; font-size: 0.9rem; outline: none; }
|
||||
.search-bar input:focus { border-color: var(--primary); }
|
||||
|
||||
/* Calendar */
|
||||
.cal-nav { display: flex; align-items: center; gap: 12px; }
|
||||
.cal-nav span { font-weight: 600; min-width: 140px; text-align: center; }
|
||||
.cal-table { width: 100%; border-collapse: collapse; }
|
||||
.cal-table th { padding: 8px; text-align: center; font-size: 0.8rem; color: var(--muted); border-bottom: 1px solid var(--border); }
|
||||
.cal-table td { padding: 4px; vertical-align: top; min-width: 80px; min-height: 80px; border: 1px solid var(--border); border-radius: 4px; }
|
||||
.cal-day-num { font-size: 0.8rem; color: var(--muted); padding: 2px 4px; }
|
||||
.cal-day-num.today { background: var(--primary); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
|
||||
.cal-event { font-size: 0.7rem; padding: 2px 5px; border-radius: 4px; margin-bottom: 2px; cursor: pointer; background: rgba(99,102,241,0.25); color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.cal-event:hover { background: rgba(99,102,241,0.45); }
|
||||
|
||||
/* Platforms */
|
||||
.platform-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
|
||||
.platform-row:last-child { border-bottom: none; }
|
||||
.platform-row span { flex: 1; }
|
||||
|
||||
/* Returning soon */
|
||||
.return-row { background: var(--surface); border: 1px solid var(--warning); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
|
||||
.return-row:hover { border-color: var(--primary); }
|
||||
|
||||
/* Buttons */
|
||||
.btn { padding: 8px 16px; border: none; border-radius: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.15s, opacity 0.15s; white-space: nowrap; }
|
||||
.btn-primary { background: var(--primary); color: #fff; }
|
||||
.btn-primary:hover { background: var(--primary-h); }
|
||||
.btn-danger { background: var(--danger); color: #fff; }
|
||||
.btn-danger:hover { opacity: 0.85; }
|
||||
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
|
||||
.btn-ghost:hover { background: var(--surface2); color: var(--text); }
|
||||
.btn-sm { padding: 4px 10px; font-size: 0.78rem; }
|
||||
.btn-icon { background: transparent; border: none; cursor: pointer; color: var(--muted); padding: 4px 6px; border-radius: 6px; }
|
||||
.btn-icon:hover { background: var(--surface2); color: var(--danger); }
|
||||
|
||||
/* Modals */
|
||||
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
|
||||
.modal.hidden { display: none; }
|
||||
.modal-box { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
|
||||
.modal-box.wide { max-width: 800px; }
|
||||
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
|
||||
|
||||
/* Forms */
|
||||
label { font-size: 0.82rem; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
|
||||
input[type="text"], input[type="email"], input[type="number"], input[type="date"], select, textarea {
|
||||
width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 12px; font-size: 0.9rem; outline: none; margin-top: 2px; font-family: inherit;
|
||||
}
|
||||
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
|
||||
select option { background: var(--surface); }
|
||||
textarea { resize: vertical; }
|
||||
input[type="checkbox"] { width: auto; margin: 0; }
|
||||
input[type="file"] { padding: 6px; font-size: 0.8rem; }
|
||||
.form-row { display: flex; gap: 10px; align-items: flex-start; }
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.form-col { display: flex; flex-direction: column; }
|
||||
.price-hint { font-size: 0.78rem; color: var(--warning); margin-top: 4px; }
|
||||
|
||||
/* Images preview */
|
||||
.images-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
|
||||
.images-preview .img-thumb { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; border: 2px solid var(--border); }
|
||||
.images-preview .img-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.images-preview .img-thumb .img-del { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.7rem; padding: 1px 4px; }
|
||||
.images-preview .img-thumb .img-main { position: absolute; bottom: 2px; left: 2px; background: var(--primary); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.6rem; padding: 1px 4px; }
|
||||
|
||||
/* Tool detail */
|
||||
.tool-detail-gallery { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; }
|
||||
.tool-detail-gallery img { height: 180px; border-radius: 8px; object-fit: cover; cursor: pointer; border: 2px solid transparent; }
|
||||
.tool-detail-gallery img.main-img { border-color: var(--primary); }
|
||||
.tool-detail-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.detail-field label { color: var(--muted); font-size: 0.78rem; }
|
||||
.detail-field .val { font-size: 0.95rem; margin-top: 2px; }
|
||||
.detail-field .price { font-size: 1.2rem; font-weight: 700; color: var(--success); }
|
||||
|
||||
/* Client detail */
|
||||
.doc-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
|
||||
.doc-item { position: relative; }
|
||||
.doc-item img, .doc-item .doc-file { width: 100px; height: 100px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 2rem; background: var(--surface2); }
|
||||
.doc-item .doc-del { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.7rem; padding: 2px 5px; }
|
||||
.doc-item .doc-label { font-size: 0.7rem; color: var(--muted); text-align: center; margin-top: 4px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.upload-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 16px; text-align: center; color: var(--muted); font-size: 0.85rem; cursor: pointer; }
|
||||
.upload-zone:hover { border-color: var(--primary); color: var(--text); }
|
||||
|
||||
.empty-state { text-align: center; color: var(--muted); padding: 40px; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.tool-detail-info { grid-template-columns: 1fr; }
|
||||
body { overflow: auto; }
|
||||
.layout { flex-direction: column; height: auto; }
|
||||
.sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 8px; gap: 4px; border-right: none; border-bottom: 1px solid var(--border); }
|
||||
.nav-item { white-space: nowrap; }
|
||||
.logo { display: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user