mirror of
https://github.com/siop-spelev/siop2.git
synced 2026-08-08 12:41:54 +00:00
feat(r6): R6.2 — Parc sur mobile (Sites, Ascenseurs)
useLocations() mobile ; écran Sites (premier niveau) ; fiche site (identité, zones, ascenseurs du site — consultation seule, D4, pas de carte ni d'édition sur mobile pour l'instant) ; écran Ascenseurs (parc complet déjà préchargé, D1) ouvrant la fiche appareil R4 telle quelle (déjà générique, aucune modification nécessaire). Menu : Ascenseurs/Sites routent réellement au lieu de « à venir » ; Catégories reste à venir (admin, hors périmètre R6.2). Exécution directe de la maquette R6 déjà validée, patrons visuels réutilisés (Carte/LigneInfo/EnteteFiche) — pas de nouveau tour de design. Typecheck propre, 17 tests Jest, lint 5/5 paquets. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
99
apps/mobile/app/sites/[id].tsx
Normal file
99
apps/mobile/app/sites/[id].tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
import { Pressable, ScrollView, Text } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { ASSET_STATUS_LABELS, type AssetStatus } from '@siop/shared';
|
||||
import { useAssets, useLocations } from '@/api/exploitation';
|
||||
import { Carte, EnteteFiche, LigneInfo } from '@/composants/ui';
|
||||
import { useTokens, type Tokens } from '@/theme/tokens';
|
||||
|
||||
/** Fiche site — R6.2. Consultation seule (D4) : identité, zones, ascenseurs
|
||||
* du site. Pas de carte interactive ni d'édition sur mobile pour l'instant
|
||||
* (réservé au web) — même filtre appareils↔site que fiche-site.tsx (web) :
|
||||
* par nom, la liste étant déjà plate côté serveur. */
|
||||
export default function PageFicheSite() {
|
||||
const t = useTokens();
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const { data: locations } = useLocations();
|
||||
const { data: assets } = useAssets();
|
||||
|
||||
const site = (locations ?? []).find((l) => l.id === id);
|
||||
if (!site) return null;
|
||||
|
||||
const zones = (locations ?? []).filter((l) => l.parentId === site.id);
|
||||
const appareils = (assets ?? []).filter((a) => a.siteName === site.name);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
|
||||
<ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
|
||||
<EnteteFiche titre={site.name} />
|
||||
|
||||
<Carte titre="Identité">
|
||||
<LigneInfo nom="Adresse" valeur={[site.address, site.city].filter(Boolean).join(' — ') || '—'} />
|
||||
<LigneInfo nom="Gardien" valeur={site.guardianName ?? '—'} />
|
||||
{site.guardianPhone ? <LigneInfo nom="Téléphone" valeur={site.guardianPhone} /> : null}
|
||||
<LigneInfo nom="Client / syndic" valeur={site.partnerName ?? '—'} />
|
||||
<LigneInfo nom="Appareils" valeur={String(site.assetCount)} />
|
||||
</Carte>
|
||||
|
||||
{zones.length ? (
|
||||
<Carte titre="Emplacements">
|
||||
{zones.map((z) => (
|
||||
<LigneInfo
|
||||
key={z.id}
|
||||
nom={z.name}
|
||||
valeur={appareils.filter((a) => a.locationId === z.id).map((a) => a.reference).join(' · ') || '—'}
|
||||
/>
|
||||
))}
|
||||
</Carte>
|
||||
) : null}
|
||||
|
||||
<Carte titre={`Ascenseurs du site (${appareils.length})`}>
|
||||
{appareils.map((a) => (
|
||||
<Pressable
|
||||
key={a.id}
|
||||
accessibilityRole="button"
|
||||
onPress={() => router.push(`/ascenseur/${a.id}`)}
|
||||
style={{ flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 3 }}
|
||||
>
|
||||
<Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 12.5, color: t.primaire }}>
|
||||
{a.reference}
|
||||
</Text>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{ flex: 1, fontFamily: 'Manrope_400Regular', fontSize: 12.5, color: t.encre }}
|
||||
>
|
||||
{a.brand} {a.model ?? ''}
|
||||
</Text>
|
||||
<ChipStatutAppareil statut={a.status} t={t} />
|
||||
</Pressable>
|
||||
))}
|
||||
{!appareils.length ? (
|
||||
<Text style={{ color: t.encre3, fontFamily: 'Manrope_400Regular', fontSize: 12.5 }}>
|
||||
Aucun appareil rattaché.
|
||||
</Text>
|
||||
) : null}
|
||||
</Carte>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
function ChipStatutAppareil({ statut, t }: { statut: AssetStatus; t: Tokens }) {
|
||||
const enService = statut === 'IN_SERVICE';
|
||||
return (
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: 'Manrope_700Bold',
|
||||
fontSize: 10.5,
|
||||
color: enService ? t.stTermine : t.stAttente,
|
||||
backgroundColor: enService ? t.stTermineFond : t.stAttenteFond,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 999,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{ASSET_STATUS_LABELS[statut]}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
69
apps/mobile/app/sites/index.tsx
Normal file
69
apps/mobile/app/sites/index.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { router } from 'expo-router';
|
||||
import { FlatList, Pressable, Text, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useLocations } from '@/api/exploitation';
|
||||
import { EnteteFiche } from '@/composants/ui';
|
||||
import { useTokens } from '@/theme/tokens';
|
||||
|
||||
/** Sites — R6.2 (Parc). Liste plate → sites de premier niveau seulement
|
||||
* (une zone n'a jamais de fiche propre, elle suit son site — même règle
|
||||
* que le web, sites.tsx). */
|
||||
export default function PageSites() {
|
||||
const t = useTokens();
|
||||
const { data: locations } = useLocations();
|
||||
const sites = (locations ?? []).filter((l) => l.parentId === null);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
|
||||
<View style={{ flex: 1, padding: 14, gap: 10 }}>
|
||||
<EnteteFiche titre="Sites" />
|
||||
<FlatList
|
||||
data={sites}
|
||||
keyExtractor={(s) => s.id}
|
||||
contentContainerStyle={{ gap: 8, paddingBottom: 12 }}
|
||||
ListEmptyComponent={
|
||||
<Text style={{ color: t.encre3, fontFamily: 'Manrope_600SemiBold', padding: 16, textAlign: 'center' }}>
|
||||
Aucun site accessible.
|
||||
</Text>
|
||||
}
|
||||
renderItem={({ item: s }) => (
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
onPress={() => router.push(`/sites/${s.id}`)}
|
||||
style={{
|
||||
backgroundColor: t.surface,
|
||||
borderColor: t.bordure,
|
||||
borderWidth: 1,
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
|
||||
<Text style={{ flex: 1, fontFamily: 'Manrope_700Bold', fontSize: 14, color: t.encre }}>
|
||||
{s.name}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: 'Manrope_700Bold',
|
||||
fontSize: 10.5,
|
||||
color: t.encre2,
|
||||
backgroundColor: t.surface2,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 999,
|
||||
}}
|
||||
>
|
||||
{s.assetCount} appareil{s.assetCount > 1 ? 's' : ''}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: t.encre2 }}>
|
||||
{[s.address, s.city].filter(Boolean).join(' — ') || '—'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user