Files
L-Ami-Fiduciaire/resources/js/pages/Welcome.vue
Saad Ibn-Ezzoubayr fd43a6f429 feat: complete Epic 0 — foundation migration & infrastructure setup
Stories 0.2-0.5: rename folders→declarations (backend+frontend), configure
Redis for cache/queue/sessions, add foundation database migrations
(permissions, archived_at), replace DeclarationStatus enum with architecture
lifecycle values, create DeclarationObserver for status transition validation
and auto-archive, fix controller status transitions to respect observer rules.

93 tests pass (240 assertions).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 18:25:32 +00:00

264 lines
11 KiB
Vue

<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import {
Building2,
Calendar,
FileCheck,
Mail,
Shield,
Users,
} from 'lucide-vue-next';
import AppLogoIcon from '@/components/AppLogoIcon.vue';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { dashboard, login, register } from '@/routes';
withDefaults(
defineProps<{
canRegister: boolean;
}>(),
{
canRegister: true,
},
);
</script>
<template>
<Head :title="`${$page.props.name} — Gestion des déclarations fiscales`" />
<div class="min-h-screen bg-background">
<!-- Header -->
<header
class="sticky top-0 z-50 border-b border-sidebar-border/70 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
>
<div
class="mx-auto flex h-16 max-w-6xl items-center justify-between px-4"
>
<Link href="/" class="flex items-center gap-2 font-semibold">
<AppLogoIcon class="size-8 fill-current text-primary" />
<span>{{ $page.props.name }}</span>
</Link>
<nav class="flex items-center gap-4">
<template v-if="$page.props.auth.user">
<Button as-child>
<Link :href="dashboard()">Tableau de bord</Link>
</Button>
</template>
<template v-else>
<Button variant="ghost" as-child>
<Link :href="login()">Connexion</Link>
</Button>
<Button v-if="canRegister" as-child>
<Link :href="register()">Créer un compte</Link>
</Button>
</template>
</nav>
</div>
</header>
<main>
<!-- Hero -->
<section class="px-4 py-20 md:py-28">
<div class="mx-auto max-w-4xl text-center">
<h1
class="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl"
>
Simplifiez la gestion des
<span class="text-primary">déclarations fiscales</span>
</h1>
<p
class="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground"
>
Plateforme dédiée aux cabinets d'expertise comptable au
Maroc. Centralisez les documents, les demandes de pièces
et les validations clients en un seul endroit.
</p>
<div
class="mt-10 flex flex-wrap items-center justify-center gap-4"
>
<template v-if="$page.props.auth.user">
<Button size="lg" as-child>
<Link :href="dashboard()"
>Accéder au tableau de bord</Link
>
</Button>
</template>
<template v-else>
<Button size="lg" as-child>
<Link :href="register()"
>Commencer gratuitement</Link
>
</Button>
<Button size="lg" variant="outline" as-child>
<Link :href="login()">Se connecter</Link>
</Button>
</template>
</div>
</div>
</section>
<Separator />
<!-- Features -->
<section class="px-4 py-20">
<div class="mx-auto max-w-6xl">
<div class="mb-16 text-center">
<h2
class="text-3xl font-bold tracking-tight sm:text-4xl"
>
Tout ce dont votre cabinet a besoin
</h2>
<p class="mx-auto mt-4 max-w-2xl text-muted-foreground">
Une solution complète pour gérer les échanges de
documents fiscaux avec vos clients.
</p>
</div>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader>
<div
class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10"
>
<Users class="size-6 text-primary" />
</div>
<CardTitle>Gestion des clients</CardTitle>
<CardDescription>
Gérez vos clients et leurs informations
(ICE, IF, RC, CNSS)
</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<div
class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10"
>
<Calendar class="size-6 text-primary" />
</div>
<CardTitle>Déclarations par type</CardTitle>
<CardDescription>
TVA, IS, IR, CNSS, Bilan annuel créez et
suivez vos déclarations
</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<div
class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10"
>
<Mail class="size-6 text-primary" />
</div>
<CardTitle>Invitations sécurisées</CardTitle>
<CardDescription>
Envoyez des liens par email pour que vos
clients déposent leurs documents
</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<div
class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10"
>
<FileCheck class="size-6 text-primary" />
</div>
<CardTitle>Documents centralisés</CardTitle>
<CardDescription>
Tous les documents dans un espace unique,
avec historique et téléchargement
</CardDescription>
</CardHeader>
</Card>
<!-- <Card>
<CardHeader>
<div class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10">
<Building2 class="size-6 text-primary" />
</div>
<CardTitle>Multi-tenant</CardTitle>
<CardDescription>
Un workspace par cabinet, isolation complète des données
</CardDescription>
</CardHeader>
</Card> -->
<Card>
<CardHeader>
<div
class="mb-2 flex size-12 items-center justify-center rounded-lg bg-primary/10"
>
<Shield class="size-6 text-primary" />
</div>
<CardTitle>Validation client</CardTitle>
<CardDescription>
Demandez une confirmation avec signature
pour valider vos situations
</CardDescription>
</CardHeader>
</Card>
</div>
</div>
</section>
<Separator />
<!-- CTA -->
<section class="px-4 py-20">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
Prêt à simplifier votre quotidien ?
</h2>
<p class="mt-4 text-muted-foreground">
Rejoignez les cabinets qui font confiance à
{{ $page.props.name }}.
</p>
<div class="mt-8">
<template v-if="$page.props.auth.user">
<Button size="lg" as-child>
<Link :href="dashboard()"
>Accéder au tableau de bord</Link
>
</Button>
</template>
<template v-else>
<Button size="lg" as-child>
<Link :href="register()"
>Créer un compte gratuit</Link
>
</Button>
</template>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-sidebar-border/70 py-8">
<div class="mx-auto max-w-6xl px-4">
<div
class="flex flex-col items-center justify-between gap-4 sm:flex-row"
>
<div class="flex items-center gap-2">
<AppLogoIcon
class="size-5 fill-current text-muted-foreground"
/>
<span class="text-sm text-muted-foreground">{{
$page.props.name
}}</span>
</div>
<p class="text-sm text-muted-foreground">
Tous droits réservés © {{ new Date().getFullYear() }}
{{ $page.props.name }}.
</p>
</div>
</div>
</footer>
</div>
</template>