= {
+ EQUIPMENT: 'Catégories d’équipement',
+ COMPONENT_TYPE: 'Types d’organes',
+};
+
+/** Écran 7 des maquettes R1 : référentiels administrables — renommer,
+ * ajouter, (dés)activer. Jamais de suppression si utilisé. */
+export default function PageCategories() {
+ return (
+ <>
+ Catégories
+
+ {CATEGORY_KINDS.map((kind) => (
+
+ ))}
+
+
+ Une catégorie utilisée ne peut pas être supprimée — seulement renommée ou
+ désactivée (elle disparaît des sélecteurs, l'historique reste lisible).
+
+
+ );
+}
+
+function ListeCategories({ kind }: { kind: CategoryKind }) {
+ const { data: categories } = useCategories();
+ const { can } = usePermissions();
+ const creation = useCreateCategory();
+ const [nom, setNom] = useState('');
+
+ const liste = (categories ?? []).filter((c) => c.kind === kind);
+ const peutEditer = can('SETTINGS', 'edit');
+
+ const surAjout = (e: FormEvent) => {
+ e.preventDefault();
+ if (!nom.trim()) return;
+ creation.mutate({ kind, name: nom.trim() }, { onSuccess: () => setNom('') });
+ };
+
+ return (
+
+
{TITRES[kind]}
+ {liste.map((categorie) => (
+
+ ))}
+ {can('SETTINGS', 'create') ? (
+
+ ) : null}
+ {creation.isError ? (
+
{creation.error.message}
+ ) : null}
+
+ {categorie.name}
+ {!categorie.isActive ? (désactivée) : null}
+
+
+ {categorie.usageCount} {categorie.kind === 'EQUIPMENT' ? 'appareils' : ''}
+
+ {peutEditer ? (
+ <>
+ ·{' '}
+
+ ·{' '}
+
+
+ ) : null}
+
+
+ );
+}
diff --git a/apps/web/src/pages/etiquette.tsx b/apps/web/src/pages/etiquette.tsx
new file mode 100644
index 0000000..e5b3dbc
--- /dev/null
+++ b/apps/web/src/pages/etiquette.tsx
@@ -0,0 +1,76 @@
+import { QRCodeSVG } from 'qrcode.react';
+import { Link, useParams } from 'react-router-dom';
+import { useAsset } from '@/api/referentiel';
+import { Button } from '@/components/ui/button';
+
+/** Écran 5 des maquettes R1 : l'étiquette A6 imprimable — objet PAPIER
+ * (noir sur blanc, même en thème sombre). window.print n'imprime qu'elle. */
+export default function PageEtiquette() {
+ const { id } = useParams<{ id: string }>();
+ const { data: asset } = useAsset(id);
+ if (!asset) return null;
+
+ const url = `${window.location.origin}/q/${asset.reference}`;
+
+ return (
+ <>
+
+ Ascenseurs /{' '}
+ Ascenseur {asset.reference} / Étiquette QR
+
+
+
Étiquette cabine — Ascenseur {asset.reference}
+
+
+
+
+
+
+ ▲
▼
+ SIOP
+
+ Maintenance d'ascenseurs
+
+ SPELEV
+
+
+
+
+
+
Ascenseur {asset.reference}
+
+ {asset.siteName}
+
+ {asset.locationName !== asset.siteName ? `${asset.locationName} — ` : ''}
+ {asset.brand} {asset.model ?? ''}
+
+
+
+
+ Un problème ? Une personne bloquée ?
+
+ 📱 Scannez ce code pour signaler
+
+
+ SIOP · {asset.reference}
+ {asset.serialNumber ? ` · ${asset.serialNumber}` : ''} · {url.replace(/^https?:\/\//, '')}
+
+
+
+
Ce que fait le scan
+
+ - Gardien
+ - ouvrira le portail de signalement, équipement prérempli (R2)
+ - Technicien
+ - connecté → ouvre la fiche de l'appareil
+ - Impression
+ - A6 autocollant, noir sur blanc
+
+
+
+ Ascenseurs / Ascenseur {asset.reference}
+
+
+
+ Ascenseur {asset.reference} — {asset.brand} {asset.model ?? ''}
+
+
+
+ {can('ASSETS', 'edit') ? (
+
+ ) : null}
+
+
+
+
+
Identité
+
+ - N° de série
+ - {asset.serialNumber ?? '—'}
+ - Marque · modèle
+ - {asset.brand} — {asset.model ?? '—'}
+ - Mise en service
+ - {formatDateFr(asset.commissionedAt)}
+ - Site
+ -
+ {asset.siteName}
+ {asset.locationName !== asset.siteName ? ` — ${asset.locationName}` : ''}
+
+ - Catégorie
+ - {asset.categoryName}
+ - Charge · niveaux
+ -
+ {asset.loadKg ? `${asset.loadKg} kg` : '—'} · {asset.floors ?? '—'} niveaux
+
+
+
+
+
Étiquette cabine
+
+
+
+ Collée en cabine.
+ Scan gardien → signalement prérempli (R2).
+ Scan technicien → cette fiche.
+
+
+
+
+
+
Organes
+ {asset.components.map((c) => (
+
+
+ {c.typeName}
+ {c.designation ? {c.designation} : null}
+
+
+ {can('ASSETS', 'edit') ? (
+
+ ) : null}
+
+
+ ))}
+ {asset.components.length === 0 ? (
+
Aucun organe déclaré.
+ ) : null}
+ {can('ASSETS', 'edit') ? (
+
+ ) : null}
+
+
+
+
Historique
+
+ Les interventions de cet appareil apparaîtront ici avec l’exploitation (R2).
+
+
+
+
Documents
+
+ Notices et certificats rejoindront la bibliothèque en R3.
+
+
+
+
+ Sites / {site.name}
+
+
+
{site.name}
+
+ {can('ASSETS', 'create') ? (
+
+ ) : null}
+
+
+
+
Identité
+
+ - Adresse
+ - {[site.address, site.city].filter(Boolean).join(' — ') || '—'}
+ - Position
+ -
+ {site.latitude != null
+ ? `${site.latitude} N · ${Math.abs(site.longitude!)} O`
+ : 'non posée'}
+
+ - Gardien
+ -
+ {site.guardianName ?? '—'}
+ {site.guardianPhone ? (
+ · {site.guardianPhone}
+ ) : null}
+
+ - Appareils
+ - {site.assetCount}
+
+
+ {site.latitude != null && site.longitude != null ? (
+
+ ) : (
+
Position non posée — modifiez le site pour la placer.
+ )}
+
+
+
Emplacements & appareils
+
+ -
+ {site.name}
+ site
+ {site.assetCount} appareils
+
+ {zones.map((zone) => (
+ -
+ {zone.name}
+ zone
+
+ {appareils
+ .filter((a) => a.locationId === zone.id)
+ .map((a) => a.reference)
+ .join(' · ') || '—'}
+
+
+ ))}
+
+ {can('LOCATIONS', 'create') ? (
+
+ ) : null}
+
+
+
Ascenseurs du site
+ {appareils.map((a) => (
+
+
+ {a.reference} — {a.brand} {a.model ?? ''}
+
+
+
+
+
+ ))}
+ {appareils.length === 0 ? (
+
Aucun appareil rattaché pour l’instant.
+ ) : null}
+
+
+
+ Ascenseurs / Nouvel ascenseur
+
+
Nouvel ascenseur
+
+
+
Personnes & équipes
+
+ {can('PEOPLE_TEAMS', 'create') ? (
+
+ ) : null}
+
+
+
+
+
+
+ | Personne |
+ Rôle |
+ Équipe |
+ Statut |
+ |
+
+
+
+ {(users ?? []).map((u) => (
+
+
+
+
+
+ {u.displayName}
+ {u.email}
+
+ |
+ {u.role.name} |
+ {u.teams.map((t) => t.name).join(', ') || '—'} |
+
+ {u.status === 'active' ? (
+ Actif
+ ) : u.status === 'invited' ? (
+ Invitation envoyée
+ ) : (
+ Désactivé
+ )}
+ |
+
+ {u.status === 'invited' && can('PEOPLE_TEAMS', 'edit') ? (
+
+ ) : null}
+ |
+
+ ))}
+
+
+
+
+
Équipes
+
+ {(teams ?? []).map((t) => (
+
+
{t.name}
+
{t.description ?? '—'}
+
+ {t.members.map((m) => (
+
+ ))}
+ {t.members.length === 0 ? (
+
aucun membre
+ ) : null}
+
+
+ ))}
+ {can('PEOPLE_TEAMS', 'create') ? (
+
+ ) : null}
+
+
+ Transmettez ce lien à la personne (valable jusqu'au{' '}
+ {new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' }).format(new Date(lien.expiresAt))}) :
+
+ {url}
+
+
+
+
+
+ );
+}
+
+function ModaleEquipe({
+ ouverte,
+ surFermeture,
+}: {
+ ouverte: boolean;
+ surFermeture: (o: boolean) => void;
+}) {
+ const creation = useCreateTeam();
+ const surEnvoi = (e: FormEvent) => {
+ e.preventDefault();
+ const donnees = new FormData(e.currentTarget);
+ creation.mutate(
+ {
+ name: String(donnees.get('name')),
+ description: String(donnees.get('description')) || undefined,
+ },
+ { onSuccess: () => surFermeture(false) },
+ );
+ };
+ return (
+
+
+
+ );
+}
diff --git a/apps/web/src/pages/sites.tsx b/apps/web/src/pages/sites.tsx
new file mode 100644
index 0000000..04061ee
--- /dev/null
+++ b/apps/web/src/pages/sites.tsx
@@ -0,0 +1,172 @@
+import { useState, type FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useCreateLocation, useLocations } from '@/api/referentiel';
+import { usePermissions } from '@/auth/use-permissions';
+import { CarteGeo } from '@/components/carte-geo';
+import { Button } from '@/components/ui/button';
+import { Modale } from '@/components/ui/modale';
+import { construireArbre } from '@/lib/lieux';
+
+/** Écran 1 des maquettes R1 : liste dense + carte OSM (positions PostGIS). */
+export default function PageSites() {
+ const navigate = useNavigate();
+ const { data: locations } = useLocations();
+ const { can } = usePermissions();
+ const [modale, setModale] = useState(false);
+
+ const sites = construireArbre(locations ?? []);
+ const totalAppareils = sites.reduce((n, s) => n + s.assetCount, 0);
+
+ return (
+ <>
+
+
Sites
+
+ {sites.length} sites · {totalAppareils} ascenseurs
+
+
+ {can('LOCATIONS', 'create') ? (
+
+ ) : null}
+
+
+
+
+
+
+
+ | Site |
+ Ascenseurs |
+ Gardien |
+ Zones |
+
+
+
+ {sites.map((site) => (
+ navigate(`/sites/${site.id}`)}
+ style={{ cursor: 'pointer' }}
+ >
+ |
+ {site.name}
+
+ {[site.address, site.city].filter(Boolean).join(', ') || '—'}
+
+ |
+ {site.assetCount} |
+ {site.guardianName ?? '—'} |
+ {site.zones.length} |
+
+ ))}
+
+
+
+
+
s.latitude != null && s.longitude != null)
+ .map((s) => ({
+ id: s.id,
+ latitude: s.latitude!,
+ longitude: s.longitude!,
+ libelle: `${s.name} · ${s.assetCount}`,
+ onClick: () => navigate(`/sites/${s.id}`),
+ }))}
+ />
+