feat: L'Ami Fiduciaire V1.0.0 — full codebase with Story 0.1 complete
Initial commit of the L'Ami Fiduciaire SaaS platform built on Laravel 12, Vue 3, Inertia.js 2, and Tailwind CSS 4. Story 0.1 (rename folders to declarations in database) is implemented and code-reviewed: migration, rollback, and 6 Pest tests all passing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
513
resources/js/pages/clients/Show.vue
Normal file
513
resources/js/pages/clients/Show.vue
Normal file
@@ -0,0 +1,513 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { computed } from 'vue';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import FolderCalendar from '@/components/clients/FolderCalendar.vue';
|
||||
import { Building2, FileText, FolderOpen } from 'lucide-vue-next';
|
||||
|
||||
type ClientContact = {
|
||||
id: number;
|
||||
full_name: string;
|
||||
job_title: string | null;
|
||||
email: string | null;
|
||||
phone: string | null;
|
||||
is_principal: boolean;
|
||||
};
|
||||
|
||||
type Client = {
|
||||
id: number;
|
||||
company_name: string;
|
||||
legal_form: string;
|
||||
ice: string | null;
|
||||
fiscal_id: string | null;
|
||||
rc: string | null;
|
||||
cnss: string | null;
|
||||
patente: string | null;
|
||||
contacts: ClientContact[];
|
||||
internal_responsible_id: number | null;
|
||||
internal_responsible_name: string | null;
|
||||
status: string | null;
|
||||
internal_notes: string | null;
|
||||
};
|
||||
|
||||
type Folder = {
|
||||
id: number;
|
||||
title: string;
|
||||
type: string;
|
||||
status: string;
|
||||
due_date: string | null;
|
||||
created_at: string;
|
||||
showUrl: string;
|
||||
};
|
||||
|
||||
type Stats = {
|
||||
total: number;
|
||||
by_status: Record<string, number>;
|
||||
by_type: Record<string, number>;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
client: Client;
|
||||
folders: Folder[];
|
||||
stats: Stats;
|
||||
indexUrl: string;
|
||||
editUrl: string;
|
||||
createFolderUrl: string;
|
||||
};
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
actif: 'Actif',
|
||||
inactif: 'Inactif',
|
||||
suspendu: 'Suspendu',
|
||||
};
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
vat: 'TVA',
|
||||
vat_monthly: 'TVA mensuelle',
|
||||
vat_quarterly: 'TVA trimestrielle',
|
||||
corporate_tax: 'IS',
|
||||
income_tax: 'IR',
|
||||
cnss: 'CNSS',
|
||||
annual_balance: 'Bilan',
|
||||
other: 'Autre',
|
||||
};
|
||||
|
||||
const folderStatusLabels: Record<string, string> = {
|
||||
draft: 'Brouillon',
|
||||
waiting_documents: 'En attente documents',
|
||||
documents_received: 'Documents reçus',
|
||||
processing: 'En cours de traitement',
|
||||
additional_documents_requested: 'Pièces complémentaires demandées',
|
||||
waiting_client_validation: 'En attente validation client',
|
||||
validated: 'Validé',
|
||||
closed: 'Clôturé',
|
||||
cancelled: 'Annulé',
|
||||
};
|
||||
|
||||
function getLegalFormLabel(legalForm: string): string {
|
||||
const labels: Record<string, string> = {
|
||||
sarl: 'SARL',
|
||||
sa: 'SA',
|
||||
snc: 'SNC',
|
||||
scs: 'SCS',
|
||||
eurl: 'EURL',
|
||||
sel: 'SEL',
|
||||
auto_entrepreneur: 'Auto-entrepreneur',
|
||||
entreprise_individuelle: 'Entreprise individuelle',
|
||||
other: 'Autre',
|
||||
};
|
||||
return labels[legalForm] ?? legalForm;
|
||||
}
|
||||
|
||||
function getFieldValue(fieldKey: string): string {
|
||||
const client = props.client as Record<string, unknown>;
|
||||
if (fieldKey === 'legal_form') {
|
||||
return getLegalFormLabel((client.legal_form as string) ?? '');
|
||||
}
|
||||
if (fieldKey === 'status') {
|
||||
const status = client.status as string | null;
|
||||
return status ? (statusLabels[status] ?? status) : '—';
|
||||
}
|
||||
if (fieldKey === 'internal_responsible_name') {
|
||||
return (client.internal_responsible_name as string) ?? '—';
|
||||
}
|
||||
const val = client[fieldKey];
|
||||
return val != null && val !== '' ? String(val) : '—';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout
|
||||
:breadcrumbs="[
|
||||
{ title: 'Clients', href: props.indexUrl },
|
||||
{ title: props.client.company_name },
|
||||
]"
|
||||
>
|
||||
<Head :title="props.client.company_name" />
|
||||
|
||||
<div class="flex flex-col space-y-6 p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<Heading
|
||||
:title="props.client.company_name"
|
||||
:description="getLegalFormLabel(props.client.legal_form)"
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="outline" as-child>
|
||||
<Link :href="createFolderUrl">Nouveau dossier</Link>
|
||||
</Button>
|
||||
<Button variant="outline" as-child>
|
||||
<Link :href="editUrl">Modifier le client</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader
|
||||
class="flex flex-row items-center justify-between space-y-0 pb-2"
|
||||
>
|
||||
<CardTitle class="text-sm font-medium"
|
||||
>Total dossiers</CardTitle
|
||||
>
|
||||
<FolderOpen class="size-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ stats.total }}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader
|
||||
class="flex flex-row items-center justify-between space-y-0 pb-2"
|
||||
>
|
||||
<CardTitle class="text-sm font-medium"
|
||||
>En cours</CardTitle
|
||||
>
|
||||
<FileText class="size-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{
|
||||
(stats.by_status?.processing ?? 0) +
|
||||
(stats.by_status
|
||||
?.additional_documents_requested ?? 0) +
|
||||
(stats.by_status?.waiting_documents ?? 0) +
|
||||
(stats.by_status?.documents_received ?? 0) +
|
||||
(stats.by_status
|
||||
?.waiting_client_validation ?? 0)
|
||||
}}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader
|
||||
class="flex flex-row items-center justify-between space-y-0 pb-2"
|
||||
>
|
||||
<CardTitle class="text-sm font-medium"
|
||||
>Validés</CardTitle
|
||||
>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ stats.by_status?.validated ?? 0 }}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader
|
||||
class="flex flex-row items-center justify-between space-y-0 pb-2"
|
||||
>
|
||||
<CardTitle class="text-sm font-medium"
|
||||
>Clôturés</CardTitle
|
||||
>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
{{ stats.by_status?.closed ?? 0 }}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-3">
|
||||
<!-- Client info -->
|
||||
<div class="space-y-6 lg:col-span-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<Building2 class="size-4" />
|
||||
Informations société
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<p
|
||||
class="text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
ICE
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{ getFieldValue('ice') }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
class="text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
IF
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{ getFieldValue('fiscal_id') }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
class="text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
RC
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{ getFieldValue('rc') }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
class="text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
CNSS
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{ getFieldValue('cnss') }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
class="text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
Patente
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{ getFieldValue('patente') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Responsables</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div
|
||||
v-for="contact in client.contacts"
|
||||
:key="contact.id"
|
||||
class="rounded-lg border border-sidebar-border/70 p-4"
|
||||
>
|
||||
<div class="mb-2 flex items-center gap-2">
|
||||
<p class="text-sm font-medium">
|
||||
{{ contact.full_name }}
|
||||
</p>
|
||||
<Badge
|
||||
v-if="
|
||||
contact.is_principal &&
|
||||
client.contacts.length > 1
|
||||
"
|
||||
variant="secondary"
|
||||
>
|
||||
Principal
|
||||
</Badge>
|
||||
</div>
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
<div v-if="contact.job_title">
|
||||
<p
|
||||
class="text-sm text-muted-foreground"
|
||||
>
|
||||
Fonction
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{ contact.job_title }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="contact.email">
|
||||
<p
|
||||
class="text-sm text-muted-foreground"
|
||||
>
|
||||
Email
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{ contact.email }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="contact.phone">
|
||||
<p
|
||||
class="text-sm text-muted-foreground"
|
||||
>
|
||||
Téléphone
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{ contact.phone }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
v-if="!client.contacts.length"
|
||||
class="text-sm text-muted-foreground"
|
||||
>
|
||||
Aucun responsable enregistré.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Suivi interne</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div>
|
||||
<p
|
||||
class="text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
Responsable
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{
|
||||
getFieldValue(
|
||||
'internal_responsible_name',
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
class="text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
Statut
|
||||
</p>
|
||||
<p class="text-sm">
|
||||
{{ getFieldValue('status') }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="client.internal_notes">
|
||||
<p
|
||||
class="text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
Notes
|
||||
</p>
|
||||
<p class="whitespace-pre-wrap text-sm">
|
||||
{{ client.internal_notes }}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Calendar -->
|
||||
<div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Calendrier des échéances</CardTitle>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Dossiers par date limite
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<FolderCalendar :folders="folders" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Folders history -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Historique des dossiers</CardTitle>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Derniers dossiers du client
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
v-if="folders.length"
|
||||
class="overflow-x-auto rounded-xl border border-sidebar-border/70"
|
||||
>
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-muted/50">
|
||||
<tr>
|
||||
<th
|
||||
class="px-4 py-3 text-left font-medium"
|
||||
>
|
||||
Dossier
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-3 text-left font-medium"
|
||||
>
|
||||
Type
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-3 text-left font-medium"
|
||||
>
|
||||
Statut
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-3 text-left font-medium"
|
||||
>
|
||||
Échéance
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-3 text-left font-medium"
|
||||
>
|
||||
Créé le
|
||||
</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-sidebar-border/70">
|
||||
<tr
|
||||
v-for="folder in folders"
|
||||
:key="folder.id"
|
||||
class="hover:bg-muted/30"
|
||||
>
|
||||
<td class="px-4 py-3 font-medium">
|
||||
{{ folder.title }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
{{
|
||||
typeLabels[folder.type] ??
|
||||
folder.type
|
||||
}}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
{{
|
||||
folderStatusLabels[
|
||||
folder.status
|
||||
] ?? folder.status
|
||||
}}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
{{ folder.due_date ?? '—' }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
{{ folder.created_at }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
as-child
|
||||
>
|
||||
<Link :href="folder.showUrl"
|
||||
>Voir</Link
|
||||
>
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-xl border border-sidebar-border/70 p-8 text-center text-muted-foreground"
|
||||
>
|
||||
Aucun dossier.
|
||||
<Link
|
||||
:href="createFolderUrl"
|
||||
class="text-primary underline"
|
||||
>Créer un dossier</Link
|
||||
>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user