mirror of
https://github.com/R0m1k3/Regisflow.git
synced 2026-10-11 17:29:48 +02:00
Implement secure user authentication with role-based access control
Integrates user authentication using bcrypt, session management with PostgreSQL, and role-based access control for enhanced security and user management. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 91318273-c764-4fd4-be04-bdc12c38af32 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/ab880d72-1a34-4d36-b5be-9f44df85ed1a.jpg
This commit is contained in:
michaelschal committed
1 parent
42b249e5b0
commit
5c01234fc4
16 files changed
+2384
-827
No files matched your search
@@ -0,0 +1,110 @@
|
||||
# Registre des Ventes de Pétards
|
||||
|
||||
Application React complète pour la gestion et le suivi des ventes de feux d'artifice en conformité avec la réglementation française.
|
||||
|
||||
## Fonctionnalités
|
||||
|
||||
### 🔐 Système d'authentification
|
||||
- Connexion par nom d'utilisateur et mot de passe
|
||||
- Système de rôles : Administrateur, Manager, Employé
|
||||
- Sessions sécurisées avec PostgreSQL
|
||||
|
||||
### 👥 Gestion des utilisateurs et magasins
|
||||
- **Administrateur** : Accès complet à toutes les fonctionnalités
|
||||
- **Manager** : Accès à toutes les fonctionnalités sauf l'administration et les sauvegardes automatiques
|
||||
- **Employé** : Création de ventes et consultation de l'historique uniquement
|
||||
|
||||
### 🏪 Multi-magasins
|
||||
- Chaque magasin a son propre historique de ventes
|
||||
- Les utilisateurs sont liés à un magasin spécifique
|
||||
- Isolation des données par magasin
|
||||
|
||||
### 📋 Enregistrement des ventes
|
||||
- Formulaire complet avec validation des champs obligatoires
|
||||
- Support des codes EAN13 avec validation
|
||||
- Capture photo des pièces d'identité
|
||||
- Classification des produits (F2/F3)
|
||||
|
||||
### 📊 Historique et export
|
||||
- Historique des ventes avec filtrage par dates
|
||||
- Export CSV pour la conformité réglementaire
|
||||
- Suppression des ventes (Manager et Administrateur uniquement)
|
||||
|
||||
## Installation et démarrage
|
||||
|
||||
1. **Installation des dépendances :**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
2. **Configuration de la base de données :**
|
||||
```bash
|
||||
npm run db:push
|
||||
```
|
||||
|
||||
3. **Démarrage de l'application :**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 🔑 Compte administrateur par défaut
|
||||
|
||||
Lors de la première installation sur une base de données vierge, un compte administrateur est automatiquement créé :
|
||||
|
||||
**Nom d'utilisateur :** `admin`
|
||||
**Mot de passe :** `admin123`
|
||||
|
||||
⚠️ **IMPORTANT** : Changez ce mot de passe immédiatement après la première connexion !
|
||||
|
||||
## Configuration
|
||||
|
||||
### Variables d'environnement
|
||||
- `DATABASE_URL` : URL de connexion PostgreSQL
|
||||
- `SESSION_SECRET` : Clé secrète pour les sessions (optionnel, une clé par défaut est générée)
|
||||
|
||||
### Structure des rôles
|
||||
|
||||
#### Administrateur
|
||||
- ✅ Création et gestion des utilisateurs
|
||||
- ✅ Création et gestion des magasins
|
||||
- ✅ Accès à toutes les ventes de tous les magasins
|
||||
- ✅ Suppression des ventes
|
||||
- ✅ Export des données
|
||||
- ✅ Sauvegardes automatiques
|
||||
|
||||
#### Manager
|
||||
- ✅ Création de ventes
|
||||
- ✅ Consultation de l'historique du magasin
|
||||
- ✅ Suppression des ventes
|
||||
- ✅ Export des données
|
||||
- ❌ Administration des utilisateurs/magasins
|
||||
- ❌ Sauvegardes automatiques
|
||||
|
||||
#### Employé
|
||||
- ✅ Création de ventes
|
||||
- ✅ Consultation de l'historique du magasin
|
||||
- ❌ Suppression des ventes
|
||||
- ❌ Export des données
|
||||
- ❌ Administration
|
||||
- ❌ Sauvegardes automatiques
|
||||
|
||||
## Technologies utilisées
|
||||
|
||||
- **Frontend** : React 18, TypeScript, TailwindCSS, shadcn/ui
|
||||
- **Backend** : Express.js, TypeScript
|
||||
- **Base de données** : PostgreSQL avec Drizzle ORM
|
||||
- **Authentification** : Sessions avec bcrypt
|
||||
- **Stockage local** : IndexedDB pour la résilience
|
||||
|
||||
## Conformité réglementaire
|
||||
|
||||
L'application respecte les exigences françaises pour la vente de feux d'artifice :
|
||||
- Enregistrement obligatoire des informations vendeur
|
||||
- Vérification de l'identité de l'acheteur
|
||||
- Classification des produits (F2/F3)
|
||||
- Traçabilité complète des ventes
|
||||
- Export des données pour les autorités
|
||||
|
||||
## Support
|
||||
|
||||
Pour toute question ou problème, consultez la documentation ou contactez l'administrateur système.
|
||||
+18
-2
@@ -2,14 +2,30 @@ import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import { queryClient } from "./lib/queryClient";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import FireworksApp from "./components/FireworksApp";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import Login from "@/pages/Login";
|
||||
import Dashboard from "@/pages/Dashboard";
|
||||
|
||||
function AppContent() {
|
||||
const { isAuthenticated, isLoading } = useAuth();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return isAuthenticated ? <Dashboard /> : <Login />;
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<TooltipProvider>
|
||||
<Toaster />
|
||||
<FireworksApp />
|
||||
<AppContent />
|
||||
</TooltipProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,456 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import { insertUserSchema, insertStoreSchema, type User, type Store } from "@shared/schema";
|
||||
import { Users, Building2, Plus, Edit } from "lucide-react";
|
||||
import { z } from "zod";
|
||||
|
||||
const createUserSchema = insertUserSchema.extend({
|
||||
confirmPassword: z.string(),
|
||||
}).refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Les mots de passe ne correspondent pas",
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
type CreateUserData = z.infer<typeof createUserSchema>;
|
||||
|
||||
export default function Administration() {
|
||||
const { toast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
const [isUserDialogOpen, setIsUserDialogOpen] = useState(false);
|
||||
const [isStoreDialogOpen, setIsStoreDialogOpen] = useState(false);
|
||||
|
||||
// Queries
|
||||
const { data: users = [], isLoading: usersLoading } = useQuery<User[]>({
|
||||
queryKey: ['/api/admin/users'],
|
||||
});
|
||||
|
||||
const { data: stores = [], isLoading: storesLoading } = useQuery<Store[]>({
|
||||
queryKey: ['/api/admin/stores'],
|
||||
});
|
||||
|
||||
// Mutations
|
||||
const createUserMutation = useMutation({
|
||||
mutationFn: (userData: CreateUserData) => {
|
||||
const { confirmPassword, ...data } = userData;
|
||||
return apiRequest('/api/admin/users', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['/api/admin/users'] });
|
||||
setIsUserDialogOpen(false);
|
||||
toast({ title: "Utilisateur créé avec succès" });
|
||||
},
|
||||
onError: () => {
|
||||
toast({ title: "Erreur", description: "Impossible de créer l'utilisateur", variant: "destructive" });
|
||||
},
|
||||
});
|
||||
|
||||
const createStoreMutation = useMutation({
|
||||
mutationFn: (storeData: z.infer<typeof insertStoreSchema>) =>
|
||||
apiRequest('/api/admin/stores', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(storeData),
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['/api/admin/stores'] });
|
||||
setIsStoreDialogOpen(false);
|
||||
toast({ title: "Magasin créé avec succès" });
|
||||
},
|
||||
onError: () => {
|
||||
toast({ title: "Erreur", description: "Impossible de créer le magasin", variant: "destructive" });
|
||||
},
|
||||
});
|
||||
|
||||
// Forms
|
||||
const userForm = useForm<CreateUserData>({
|
||||
resolver: zodResolver(createUserSchema),
|
||||
defaultValues: {
|
||||
username: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
email: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
role: "employee",
|
||||
storeId: undefined,
|
||||
isActive: true,
|
||||
},
|
||||
});
|
||||
|
||||
const storeForm = useForm<z.infer<typeof insertStoreSchema>>({
|
||||
resolver: zodResolver(insertStoreSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
address: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
isActive: true,
|
||||
},
|
||||
});
|
||||
|
||||
const onCreateUser = (data: CreateUserData) => {
|
||||
createUserMutation.mutate(data);
|
||||
};
|
||||
|
||||
const onCreateStore = (data: z.infer<typeof insertStoreSchema>) => {
|
||||
createStoreMutation.mutate(data);
|
||||
};
|
||||
|
||||
const getRoleBadge = (role: string) => {
|
||||
const colors = {
|
||||
admin: "bg-red-100 text-red-800",
|
||||
manager: "bg-blue-100 text-blue-800",
|
||||
employee: "bg-green-100 text-green-800",
|
||||
};
|
||||
return colors[role as keyof typeof colors] || "bg-gray-100 text-gray-800";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold">Administration</h2>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="users" className="space-y-4">
|
||||
<TabsList>
|
||||
<TabsTrigger value="users" className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4" />
|
||||
Utilisateurs
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="stores" className="flex items-center gap-2">
|
||||
<Building2 className="h-4 w-4" />
|
||||
Magasins
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="users">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<CardTitle>Gestion des Utilisateurs</CardTitle>
|
||||
<Dialog open={isUserDialogOpen} onOpenChange={setIsUserDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Nouvel Utilisateur
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Créer un Utilisateur</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form {...userForm}>
|
||||
<form onSubmit={userForm.handleSubmit(onCreateUser)} className="space-y-4">
|
||||
<FormField
|
||||
control={userForm.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nom d'utilisateur</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={userForm.control}
|
||||
name="firstName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Prénom</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={userForm.control}
|
||||
name="lastName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nom</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<FormField
|
||||
control={userForm.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={userForm.control}
|
||||
name="role"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Rôle</FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="admin">Administrateur</SelectItem>
|
||||
<SelectItem value="manager">Manager</SelectItem>
|
||||
<SelectItem value="employee">Employé</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={userForm.control}
|
||||
name="storeId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Magasin</FormLabel>
|
||||
<Select value={field.value?.toString()} onValueChange={(value) => field.onChange(parseInt(value))}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner un magasin" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{stores.map((store) => (
|
||||
<SelectItem key={store.id} value={store.id.toString()}>
|
||||
{store.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={userForm.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Mot de passe</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={userForm.control}
|
||||
name="confirmPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Confirmer le mot de passe</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit" className="w-full" disabled={createUserMutation.isPending}>
|
||||
{createUserMutation.isPending ? "Création..." : "Créer"}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{usersLoading ? (
|
||||
<p>Chargement...</p>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Utilisateur</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Rôle</TableHead>
|
||||
<TableHead>Magasin</TableHead>
|
||||
<TableHead>Statut</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{user.firstName} {user.lastName}</p>
|
||||
<p className="text-sm text-gray-500">{user.username}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getRoleBadge(user.role)}`}>
|
||||
{user.role === 'admin' ? 'Administrateur' :
|
||||
user.role === 'manager' ? 'Manager' : 'Employé'}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{stores.find(s => s.id === user.storeId)?.name || '-'}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.isActive ? (
|
||||
<span className="text-green-600">Actif</span>
|
||||
) : (
|
||||
<span className="text-red-600">Inactif</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="stores">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<CardTitle>Gestion des Magasins</CardTitle>
|
||||
<Dialog open={isStoreDialogOpen} onOpenChange={setIsStoreDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Nouveau Magasin
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Créer un Magasin</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form {...storeForm}>
|
||||
<form onSubmit={storeForm.handleSubmit(onCreateStore)} className="space-y-4">
|
||||
<FormField
|
||||
control={storeForm.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nom du magasin</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={storeForm.control}
|
||||
name="address"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Adresse</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={storeForm.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Téléphone</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={storeForm.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit" className="w-full" disabled={createStoreMutation.isPending}>
|
||||
{createStoreMutation.isPending ? "Création..." : "Créer"}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{storesLoading ? (
|
||||
<p>Chargement...</p>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nom</TableHead>
|
||||
<TableHead>Adresse</TableHead>
|
||||
<TableHead>Téléphone</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Statut</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{stores.map((store) => (
|
||||
<TableRow key={store.id}>
|
||||
<TableCell className="font-medium">{store.name}</TableCell>
|
||||
<TableCell>{store.address}</TableCell>
|
||||
<TableCell>{store.phone}</TableCell>
|
||||
<TableCell>{store.email}</TableCell>
|
||||
<TableCell>
|
||||
{store.isActive ? (
|
||||
<span className="text-green-600">Actif</span>
|
||||
) : (
|
||||
<span className="text-red-600">Inactif</span>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +1,38 @@
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { Camera, User, Package, Users, IdCard, Save, X, Trash2 } from 'lucide-react';
|
||||
import { Sale, FormData, PhotoType } from '@/types/sale';
|
||||
import { apiRequest } from '@/lib/queryClient';
|
||||
import { validateRequiredFields, validateEAN13, ARTICLE_CATEGORY_MAPPING, IDENTITY_TYPES } from '@/lib/validation';
|
||||
import { useCamera } from '@/hooks/useCamera';
|
||||
import CameraModal from './CameraModal';
|
||||
import { Package, User, Users, Save, X } from 'lucide-react';
|
||||
|
||||
interface NewSaleFormProps {
|
||||
onSaveSale: (sale: Omit<Sale, 'id' | 'timestamp'>) => Promise<Sale>;
|
||||
interface FormData {
|
||||
vendeur: string;
|
||||
dateVente: string;
|
||||
typeArticle: string;
|
||||
categorie: string;
|
||||
quantite: string;
|
||||
gencode: string;
|
||||
nom: string;
|
||||
prenom: string;
|
||||
dateNaissance: string;
|
||||
lieuNaissance: string;
|
||||
typeIdentite: string;
|
||||
numeroIdentite: string;
|
||||
autoriteDelivrance: string;
|
||||
dateDelivrance: string;
|
||||
}
|
||||
|
||||
export default function NewSaleForm({ onSaveSale }: NewSaleFormProps) {
|
||||
export default function NewSaleForm() {
|
||||
const { toast } = useToast();
|
||||
const [photos, setPhotos] = useState<{ recto?: string; verso?: string }>({});
|
||||
const queryClient = useQueryClient();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const camera = useCamera();
|
||||
|
||||
const form = useForm<FormData>({
|
||||
defaultValues: {
|
||||
@@ -46,92 +56,18 @@ export default function NewSaleForm({ onSaveSale }: NewSaleFormProps) {
|
||||
const typeArticle = form.watch('typeArticle');
|
||||
const availableCategories = typeArticle ? ARTICLE_CATEGORY_MAPPING[typeArticle as keyof typeof ARTICLE_CATEGORY_MAPPING] || [] : [];
|
||||
|
||||
const handlePhotoCapture = async (photoType: PhotoType) => {
|
||||
try {
|
||||
await camera.startCamera(photoType);
|
||||
const createSaleMutation = useMutation({
|
||||
mutationFn: (saleData: any) =>
|
||||
apiRequest('/api/sales', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(saleData),
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['/api/sales'] });
|
||||
toast({
|
||||
title: "Caméra activée",
|
||||
description: "Positionnez la carte d'identité",
|
||||
title: "Vente enregistrée",
|
||||
description: "La vente a été enregistrée avec succès",
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erreur caméra",
|
||||
description: error instanceof Error ? error.message : "Impossible d'accéder à la caméra",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handlePhotoTaken = (photoType: PhotoType, photoData: string) => {
|
||||
setPhotos(prev => ({ ...prev, [photoType]: photoData }));
|
||||
toast({
|
||||
title: "Photo capturée",
|
||||
description: `Photo ${photoType} sauvegardée avec succès`,
|
||||
});
|
||||
};
|
||||
|
||||
const deletePhoto = (photoType: PhotoType) => {
|
||||
setPhotos(prev => {
|
||||
const newPhotos = { ...prev };
|
||||
delete newPhotos[photoType];
|
||||
return newPhotos;
|
||||
});
|
||||
toast({
|
||||
title: "Photo supprimée",
|
||||
description: `Photo ${photoType} supprimée`,
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
console.log('Form data being submitted:', data);
|
||||
console.log('Form errors:', form.formState.errors);
|
||||
|
||||
// Validate required fields
|
||||
const missingFields = validateRequiredFields(data);
|
||||
if (missingFields.length > 0) {
|
||||
console.log('Missing fields found:', missingFields);
|
||||
toast({
|
||||
title: "Champs manquants",
|
||||
description: `Veuillez remplir: ${missingFields.join(', ')}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate EAN13 (now required)
|
||||
if (!validateEAN13(data.gencode)) {
|
||||
toast({
|
||||
title: "Code EAN13 invalide",
|
||||
description: "Le gencode doit être un code EAN13 valide à 13 chiffres",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const saleData: Omit<Sale, 'id' | 'timestamp'> = {
|
||||
vendeur: data.vendeur,
|
||||
dateVente: data.dateVente,
|
||||
typeArticle: data.typeArticle,
|
||||
categorie: data.categorie as 'F2' | 'F3',
|
||||
quantite: parseInt(data.quantite),
|
||||
gencode: data.gencode,
|
||||
nom: data.nom,
|
||||
prenom: data.prenom,
|
||||
dateNaissance: data.dateNaissance,
|
||||
lieuNaissance: data.lieuNaissance || undefined,
|
||||
typeIdentite: data.typeIdentite,
|
||||
numeroIdentite: data.numeroIdentite,
|
||||
autoriteDelivrance: data.autoriteDelivrance,
|
||||
dateDelivrance: data.dateDelivrance,
|
||||
photoRecto: photos.recto,
|
||||
photoVerso: photos.verso,
|
||||
};
|
||||
|
||||
await onSaveSale(saleData);
|
||||
|
||||
// Reset form
|
||||
form.reset({
|
||||
vendeur: '',
|
||||
dateVente: new Date().toISOString().split('T')[0],
|
||||
@@ -148,445 +84,384 @@ export default function NewSaleForm({ onSaveSale }: NewSaleFormProps) {
|
||||
autoriteDelivrance: '',
|
||||
dateDelivrance: '',
|
||||
});
|
||||
setPhotos({});
|
||||
|
||||
toast({
|
||||
title: "Vente enregistrée",
|
||||
description: "La vente a été enregistrée avec succès",
|
||||
});
|
||||
} catch (error) {
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: "Erreur lors de l'enregistrement de la vente",
|
||||
description: error.message || "Erreur lors de l'enregistrement de la vente",
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Validate required fields
|
||||
const missingFields = validateRequiredFields(data);
|
||||
if (missingFields.length > 0) {
|
||||
toast({
|
||||
title: "Champs manquants",
|
||||
description: `Veuillez remplir: ${missingFields.join(', ')}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate EAN13
|
||||
if (!validateEAN13(data.gencode)) {
|
||||
toast({
|
||||
title: "Code EAN13 invalide",
|
||||
description: "Le gencode doit être un code EAN13 valide à 13 chiffres",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const saleData = {
|
||||
vendeur: data.vendeur,
|
||||
dateVente: data.dateVente,
|
||||
typeArticle: data.typeArticle,
|
||||
categorie: data.categorie as 'F2' | 'F3',
|
||||
quantite: parseInt(data.quantite),
|
||||
gencode: data.gencode,
|
||||
nom: data.nom,
|
||||
prenom: data.prenom,
|
||||
dateNaissance: data.dateNaissance,
|
||||
lieuNaissance: data.lieuNaissance || undefined,
|
||||
typeIdentite: data.typeIdentite,
|
||||
numeroIdentite: data.numeroIdentite,
|
||||
autoriteDelivrance: data.autoriteDelivrance,
|
||||
dateDelivrance: data.dateDelivrance,
|
||||
};
|
||||
|
||||
await createSaleMutation.mutateAsync(saleData);
|
||||
} catch (error) {
|
||||
console.error('Sale creation error:', error);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Package className="h-5 w-5" />
|
||||
Nouvelle Vente
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Enregistrement d'une vente de feux d'artifice
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
{/* Seller Information */}
|
||||
<div className="border-l-4 border-primary pl-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
<User className="h-5 w-5 text-primary" />
|
||||
Informations Vendeur
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="vendeur"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Vendeur <span className="text-destructive">*</span></FormLabel>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Package className="h-5 w-5" />
|
||||
Nouvelle Vente
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Enregistrement d'une vente de feux d'artifice
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
{/* Seller Information */}
|
||||
<div className="border-l-4 border-primary pl-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
<User className="h-5 w-5 text-primary" />
|
||||
Informations Vendeur
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="vendeur"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Vendeur <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Nom du vendeur" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dateVente"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Date de vente</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Information */}
|
||||
<div className="border-l-4 border-info pl-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Package className="h-5 w-5 text-info" />
|
||||
Informations Produit
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="typeArticle"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Type d'article <span className="text-destructive">*</span></FormLabel>
|
||||
<Select value={field.value} onValueChange={(value) => {
|
||||
field.onChange(value);
|
||||
form.setValue('categorie', ''); // Reset category when article changes
|
||||
}}>
|
||||
<FormControl>
|
||||
<Input placeholder="Vendeur" {...field} />
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner un type" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dateVente"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Date de vente</FormLabel>
|
||||
<SelectContent>
|
||||
{Object.keys(ARTICLE_CATEGORY_MAPPING).map((type) => (
|
||||
<SelectItem key={type} value={type}>
|
||||
{type}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="categorie"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Catégorie réglementaire <span className="text-destructive">*</span></FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange} disabled={!typeArticle}>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner une catégorie" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<SelectContent>
|
||||
{availableCategories.map((category) => (
|
||||
<SelectItem key={category} value={category}>
|
||||
{category}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="quantite"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Quantité <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min="1" placeholder="Entrez la quantité" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="gencode"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Gencode (EAN13) <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Code EAN13 à 13 chiffres" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Product Information */}
|
||||
<div className="border-l-4 border-info pl-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Package className="h-5 w-5 text-info" />
|
||||
Informations Produit
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="typeArticle"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Type d'article <span className="text-destructive">*</span></FormLabel>
|
||||
<Select value={field.value} onValueChange={(value) => {
|
||||
field.onChange(value);
|
||||
form.setValue('categorie', ''); // Reset category when article changes
|
||||
}}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner un type" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{Object.keys(ARTICLE_CATEGORY_MAPPING).map((type) => (
|
||||
<SelectItem key={type} value={type}>
|
||||
{type}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="categorie"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Catégorie réglementaire <span className="text-destructive">*</span></FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange} disabled={!typeArticle}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner une catégorie" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{availableCategories.map((category) => (
|
||||
<SelectItem key={category} value={category}>
|
||||
{category}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="quantite"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Quantité <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min="1" placeholder="Entrez la quantité" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="gencode"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Gencode (EAN13) <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Code EAN13 à 13 chiffres" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Alert className="mt-4">
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<AlertDescription>
|
||||
<strong>Information réglementaire :</strong>
|
||||
<ul className="mt-1 space-y-1 text-sm">
|
||||
<li>• <strong>F2</strong> : Feux d'artifice de catégorie F2 - Vente libre aux majeurs</li>
|
||||
<li>• <strong>F3</strong> : Feux d'artifice de catégorie F3 - Vente soumise à autorisation préfectorale</li>
|
||||
</ul>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
|
||||
<Alert className="mt-4">
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<AlertDescription>
|
||||
<strong>Information réglementaire :</strong>
|
||||
<ul className="mt-1 space-y-1 text-sm">
|
||||
<li>• <strong>F2</strong> : Feux d'artifice de catégorie F2 - Vente libre aux majeurs</li>
|
||||
<li>• <strong>F3</strong> : Feux d'artifice de catégorie F3 - Vente soumise à autorisation préfectorale</li>
|
||||
</ul>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
{/* Customer Information */}
|
||||
<div className="border-l-4 border-success pl-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-success" />
|
||||
Informations Client
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="nom"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nom de famille <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Nom de famille" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="prenom"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Prénom <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Prénom" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dateNaissance"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Date de naissance <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lieuNaissance"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Lieu de naissance</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Ville de naissance" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Customer Information */}
|
||||
<div className="border-l-4 border-success pl-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-success" />
|
||||
Informations Client
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="nom"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nom de famille <span className="text-destructive">*</span></FormLabel>
|
||||
{/* Identity Information */}
|
||||
<div className="border-l-4 border-warning pl-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
<svg className="h-5 w-5 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
|
||||
</svg>
|
||||
Pièce d'Identité
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="typeIdentite"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Type de pièce d'identité <span className="text-destructive">*</span></FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl>
|
||||
<Input placeholder="Nom de famille" {...field} />
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner le type" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="prenom"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Prénom <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Prénom" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dateNaissance"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Date de naissance <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lieuNaissance"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Lieu de naissance</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Ville de naissance" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<SelectContent>
|
||||
{IDENTITY_TYPES.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="numeroIdentite"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Numéro de pièce d'identité <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Numéro de la pièce d'identité" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="autoriteDelivrance"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Autorité de délivrance <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Préfecture, Mairie, etc." {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dateDelivrance"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Date de délivrance <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Identity Document */}
|
||||
<div className="border-l-4 border-yellow-500 pl-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
<IdCard className="h-5 w-5 text-yellow-600" />
|
||||
Pièce d'Identité
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="typeIdentite"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Type de pièce d'identité <span className="text-destructive">*</span></FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner un type" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{IDENTITY_TYPES.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="numeroIdentite"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Numéro de pièce d'identité <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Numéro de la pièce d'identité" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="autoriteDelivrance"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Autorité de délivrance <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Préfecture, Mairie, etc." {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dateDelivrance"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Date de délivrance <span className="text-destructive">*</span></FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Identity Photos */}
|
||||
<div className="border-l-4 border-purple-500 pl-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Camera className="h-5 w-5 text-purple-600" />
|
||||
Photos de la Pièce d'Identité
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Photo Recto */}
|
||||
<div className="space-y-3">
|
||||
<label className="block text-sm font-medium text-gray-700">Photo Recto</label>
|
||||
<div className="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
|
||||
{photos.recto ? (
|
||||
<div>
|
||||
<img src={photos.recto} alt="Photo recto" className="mx-auto rounded-lg shadow-md max-h-32" />
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => deletePhoto('recto')}
|
||||
className="mt-2 text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
Supprimer
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Camera className="h-8 w-8 text-gray-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-500 mb-3">Aucune photo</p>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => handlePhotoCapture('recto')}
|
||||
className="bg-primary text-white hover:bg-primary/90"
|
||||
>
|
||||
<Camera className="h-4 w-4 mr-2" />
|
||||
Prendre photo
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Photo Verso */}
|
||||
<div className="space-y-3">
|
||||
<label className="block text-sm font-medium text-gray-700">Photo Verso</label>
|
||||
<div className="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
|
||||
{photos.verso ? (
|
||||
<div>
|
||||
<img src={photos.verso} alt="Photo verso" className="mx-auto rounded-lg shadow-md max-h-32" />
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => deletePhoto('verso')}
|
||||
className="mt-2 text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
Supprimer
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Camera className="h-8 w-8 text-gray-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-500 mb-3">Aucune photo</p>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => handlePhotoCapture('verso')}
|
||||
className="bg-primary text-white hover:bg-primary/90"
|
||||
>
|
||||
<Camera className="h-4 w-4 mr-2" />
|
||||
Prendre photo
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Actions - Always visible */}
|
||||
<div className="flex justify-end space-x-4 pt-6 border-t border-gray-200 bg-white">
|
||||
<Button type="button" variant="outline" onClick={() => {
|
||||
form.reset({
|
||||
vendeur: '',
|
||||
dateVente: new Date().toISOString().split('T')[0],
|
||||
typeArticle: '',
|
||||
categorie: '',
|
||||
quantite: '',
|
||||
gencode: '',
|
||||
nom: '',
|
||||
prenom: '',
|
||||
dateNaissance: '',
|
||||
lieuNaissance: '',
|
||||
typeIdentite: '',
|
||||
numeroIdentite: '',
|
||||
autoriteDelivrance: '',
|
||||
dateDelivrance: '',
|
||||
});
|
||||
setPhotos({});
|
||||
}}>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
Annuler
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting} className="bg-green-600 hover:bg-green-700 text-white">
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{isSubmitting ? 'Enregistrement...' : 'Enregistrer la Vente'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<CameraModal
|
||||
isOpen={camera.isOpen}
|
||||
photoType={camera.currentPhotoType}
|
||||
videoRef={camera.videoRef}
|
||||
canvasRef={camera.canvasRef}
|
||||
isCapturing={camera.isCapturing}
|
||||
onClose={camera.stopCamera}
|
||||
onCapture={async () => {
|
||||
try {
|
||||
const photoData = await camera.capturePhoto();
|
||||
if (camera.currentPhotoType) {
|
||||
handlePhotoTaken(camera.currentPhotoType, photoData);
|
||||
}
|
||||
camera.stopCamera();
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: "Erreur lors de la capture de la photo",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
{/* Form Actions - Always visible */}
|
||||
<div className="flex justify-end space-x-4 pt-6 border-t border-gray-200 bg-white">
|
||||
<Button type="button" variant="outline" onClick={() => {
|
||||
form.reset({
|
||||
vendeur: '',
|
||||
dateVente: new Date().toISOString().split('T')[0],
|
||||
typeArticle: '',
|
||||
categorie: '',
|
||||
quantite: '',
|
||||
gencode: '',
|
||||
nom: '',
|
||||
prenom: '',
|
||||
dateNaissance: '',
|
||||
lieuNaissance: '',
|
||||
typeIdentite: '',
|
||||
numeroIdentite: '',
|
||||
autoriteDelivrance: '',
|
||||
dateDelivrance: '',
|
||||
});
|
||||
}}>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
Annuler
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting || createSaleMutation.isPending} className="bg-green-600 hover:bg-green-700 text-white">
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
{isSubmitting || createSaleMutation.isPending ? 'Enregistrement...' : 'Enregistrer la Vente'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,284 +1,286 @@
|
||||
import { useState } from 'react';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { Download, Save, Search, Eye, Trash2, BarChart3, AlertCircle } from 'lucide-react';
|
||||
import { Sale } from '@/types/sale';
|
||||
import { exportToCSV, formatDate } from '@/lib/export';
|
||||
import { downloadBackup, getAutoBackup } from '@/lib/storage';
|
||||
import SaleDetailsModal from './SaleDetailsModal';
|
||||
import { apiRequest } from '@/lib/queryClient';
|
||||
import type { Sale } from '@shared/schema';
|
||||
import { History, Download, Trash2, Eye, Filter } from 'lucide-react';
|
||||
|
||||
interface SalesHistoryProps {
|
||||
sales: Sale[];
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
onDeleteSale: (id: number) => Promise<void>;
|
||||
canDelete?: boolean;
|
||||
}
|
||||
|
||||
export default function SalesHistory({ sales, isLoading, error, onDeleteSale }: SalesHistoryProps) {
|
||||
export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
|
||||
const { toast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
const [selectedSale, setSelectedSale] = useState<Sale | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState<number | null>(null);
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const [endDate, setEndDate] = useState('');
|
||||
|
||||
const handleExportCSV = () => {
|
||||
if (sales.length === 0) {
|
||||
toast({
|
||||
title: "Aucune vente à exporter",
|
||||
description: "Il n'y a aucune vente enregistrée",
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Query for sales
|
||||
const { data: sales = [], isLoading } = useQuery<Sale[]>({
|
||||
queryKey: ['/api/sales', startDate, endDate],
|
||||
queryFn: () => {
|
||||
const params = new URLSearchParams();
|
||||
if (startDate) params.append('startDate', startDate);
|
||||
if (endDate) params.append('endDate', endDate);
|
||||
const queryString = params.toString();
|
||||
return apiRequest(`/api/sales${queryString ? `?${queryString}` : ''}`);
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
exportToCSV(sales);
|
||||
toast({
|
||||
title: "Export réussi !",
|
||||
description: `${sales.length} vente(s) exportée(s)`,
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erreur d'export",
|
||||
description: "Impossible d'exporter les données",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadBackup = () => {
|
||||
const backup = getAutoBackup();
|
||||
if (!backup) {
|
||||
toast({
|
||||
title: "Aucune sauvegarde disponible",
|
||||
description: "Aucun backup automatique trouvé",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
downloadBackup();
|
||||
toast({
|
||||
title: "Backup téléchargé",
|
||||
description: "Sauvegarde téléchargée avec succès",
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: "Impossible de télécharger la sauvegarde",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDiagnostic = () => {
|
||||
console.log('=== DIAGNOSTIC COMPLET ===');
|
||||
console.log('Nombre de ventes:', sales.length);
|
||||
console.log('Données:', sales);
|
||||
console.log('LocalStorage backup:', getAutoBackup());
|
||||
|
||||
toast({
|
||||
title: "Diagnostic affiché",
|
||||
description: "Vérifiez la console pour les détails",
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteSale = async (sale: Sale) => {
|
||||
const confirmed = window.confirm(
|
||||
`Supprimer définitivement la vente de ${sale.nom} ${sale.prenom} ?\n\n⚠️ Cette action est irréversible !\n\nID: ${sale.id}`
|
||||
);
|
||||
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
setIsDeleting(sale.id);
|
||||
await onDeleteSale(sale.id);
|
||||
// Delete mutation
|
||||
const deleteSaleMutation = useMutation({
|
||||
mutationFn: (saleId: number) =>
|
||||
apiRequest(`/api/sales/${saleId}`, { method: 'DELETE' }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['/api/sales'] });
|
||||
toast({
|
||||
title: "Vente supprimée",
|
||||
description: `Vente de ${sale.nom} ${sale.prenom} supprimée`,
|
||||
description: "La vente a été supprimée avec succès",
|
||||
});
|
||||
} catch (error) {
|
||||
},
|
||||
onError: () => {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: "Impossible de supprimer la vente",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsDeleting(null);
|
||||
},
|
||||
});
|
||||
|
||||
const handleDeleteSale = async (sale: Sale) => {
|
||||
if (confirm(`Êtes-vous sûr de vouloir supprimer cette vente ?`)) {
|
||||
deleteSaleMutation.mutate(sale.id);
|
||||
}
|
||||
};
|
||||
|
||||
const backup = getAutoBackup();
|
||||
const exportToCSV = () => {
|
||||
if (sales.length === 0) {
|
||||
toast({
|
||||
title: "Aucune donnée",
|
||||
description: "Aucune vente à exporter",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center py-8">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
|
||||
<p className="text-muted-foreground">Chargement des ventes...</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
const csvHeader = [
|
||||
'Date/Heure',
|
||||
'Vendeur',
|
||||
'Date de vente',
|
||||
'Type d\'article',
|
||||
'Catégorie',
|
||||
'Quantité',
|
||||
'Gencode',
|
||||
'Nom client',
|
||||
'Prénom client',
|
||||
'Date de naissance',
|
||||
'Lieu de naissance',
|
||||
'Type identité',
|
||||
'Numéro identité',
|
||||
'Autorité délivrance',
|
||||
'Date délivrance'
|
||||
].join(',');
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex items-center justify-center py-8">
|
||||
<div className="text-center">
|
||||
<AlertCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
|
||||
<p className="text-destructive">{error}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
const csvData = sales.map(sale => [
|
||||
new Date(sale.timestamp!).toLocaleString('fr-FR'),
|
||||
sale.vendeur,
|
||||
sale.dateVente,
|
||||
sale.typeArticle,
|
||||
sale.categorie,
|
||||
sale.quantite,
|
||||
sale.gencode,
|
||||
sale.nom,
|
||||
sale.prenom,
|
||||
sale.dateNaissance,
|
||||
sale.lieuNaissance || '',
|
||||
sale.typeIdentite,
|
||||
sale.numeroIdentite,
|
||||
sale.autoriteDelivrance,
|
||||
sale.dateDelivrance
|
||||
].map(field => `"${field}"`).join(',')).join('\n');
|
||||
|
||||
const csvContent = csvHeader + '\n' + csvData;
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `ventes_fireworks_${new Date().toISOString().split('T')[0]}.csv`;
|
||||
link.click();
|
||||
|
||||
toast({
|
||||
title: "Export réussi",
|
||||
description: `${sales.length} ventes exportées`,
|
||||
});
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('fr-FR');
|
||||
};
|
||||
|
||||
const formatDateTime = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString('fr-FR');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-center">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<History className="h-5 w-5" />
|
||||
Historique des Ventes
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Filters */}
|
||||
<div className="flex gap-4 items-end">
|
||||
<div className="grid grid-cols-2 gap-4 flex-1">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5" />
|
||||
Historique des Ventes
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Gestion et export des ventes enregistrées
|
||||
</p>
|
||||
<label className="text-sm font-medium">Date de début</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex space-x-3">
|
||||
<Button onClick={handleExportCSV} className="bg-success hover:bg-success/90">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Exporter CSV
|
||||
</Button>
|
||||
<Button onClick={handleDownloadBackup} variant="outline">
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
Backup Auto
|
||||
</Button>
|
||||
<Button onClick={handleDiagnostic} variant="outline">
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
Debug
|
||||
</Button>
|
||||
<div>
|
||||
<label className="text-sm font-medium">Date de fin</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{/* Status Information */}
|
||||
<div className="px-6 py-3 bg-muted border-b border-border">
|
||||
<div className="flex items-center text-sm text-muted-foreground">
|
||||
<svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>
|
||||
Données stockées localement ({sales.length} vente{sales.length !== 1 ? 's' : ''}) • Export CSV compatible Excel • Sauvegarde automatique à chaque ajout
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
{backup ? (
|
||||
<span>
|
||||
Dernier backup: {formatDate(backup.timestamp)} ({backup.recordCount} enreg.)
|
||||
</span>
|
||||
) : (
|
||||
<span>Dernier backup: Aucun</span>
|
||||
)}
|
||||
</div>
|
||||
<Button onClick={exportToCSV} variant="outline">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export CSV
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-0">
|
||||
{sales.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<svg className="h-12 w-12 text-muted-foreground mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
||||
</svg>
|
||||
<p className="text-muted-foreground">Aucune vente enregistrée</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Date</TableHead>
|
||||
<TableHead>Vendeur</TableHead>
|
||||
<TableHead>Client</TableHead>
|
||||
<TableHead>Produit</TableHead>
|
||||
<TableHead>Catégorie</TableHead>
|
||||
<TableHead>Quantité</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sales.map((sale) => (
|
||||
<TableRow key={sale.id}>
|
||||
<TableCell>
|
||||
{formatDate(sale.dateVente)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{sale.vendeur || 'Non spécifié'}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="font-medium">{sale.nom} {sale.prenom}</div>
|
||||
{sale.typeIdentite && (
|
||||
<div className="text-xs text-muted-foreground">{sale.typeIdentite}</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="font-medium">{sale.typeArticle}</div>
|
||||
{sale.gencode && (
|
||||
<div className="text-xs text-muted-foreground">{sale.gencode}</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={sale.categorie === 'F2' ? 'secondary' : 'destructive'}>
|
||||
{/* Sales Table */}
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
) : sales.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
Aucune vente trouvée
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Date/Heure</TableHead>
|
||||
<TableHead>Vendeur</TableHead>
|
||||
<TableHead>Client</TableHead>
|
||||
<TableHead>Article</TableHead>
|
||||
<TableHead>Quantité</TableHead>
|
||||
<TableHead>Gencode</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sales.map((sale) => (
|
||||
<TableRow key={sale.id}>
|
||||
<TableCell>{formatDateTime(sale.timestamp!)}</TableCell>
|
||||
<TableCell>{sale.vendeur}</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{sale.nom} {sale.prenom}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{formatDate(sale.dateNaissance)}
|
||||
</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="font-medium">{sale.typeArticle}</p>
|
||||
<span className={`inline-flex px-2 py-1 text-xs rounded-full ${
|
||||
sale.categorie === 'F3'
|
||||
? 'bg-red-100 text-red-800'
|
||||
: 'bg-green-100 text-green-800'
|
||||
}`}>
|
||||
{sale.categorie}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{sale.quantite}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedSale(sale)}
|
||||
title="Voir les détails"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{sale.quantite}</TableCell>
|
||||
<TableCell>{sale.gencode}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-2">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedSale(sale)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Détails de la vente</DialogTitle>
|
||||
</DialogHeader>
|
||||
{selectedSale && (
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">Informations générales</h4>
|
||||
<p><strong>Date/Heure :</strong> {formatDateTime(selectedSale.timestamp!)}</p>
|
||||
<p><strong>Vendeur :</strong> {selectedSale.vendeur}</p>
|
||||
<p><strong>Date de vente :</strong> {formatDate(selectedSale.dateVente)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">Produit</h4>
|
||||
<p><strong>Type :</strong> {selectedSale.typeArticle}</p>
|
||||
<p><strong>Catégorie :</strong> {selectedSale.categorie}</p>
|
||||
<p><strong>Quantité :</strong> {selectedSale.quantite}</p>
|
||||
<p><strong>Gencode :</strong> {selectedSale.gencode}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">Client</h4>
|
||||
<p><strong>Nom :</strong> {selectedSale.nom}</p>
|
||||
<p><strong>Prénom :</strong> {selectedSale.prenom}</p>
|
||||
<p><strong>Date de naissance :</strong> {formatDate(selectedSale.dateNaissance)}</p>
|
||||
{selectedSale.lieuNaissance && (
|
||||
<p><strong>Lieu de naissance :</strong> {selectedSale.lieuNaissance}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">Pièce d'identité</h4>
|
||||
<p><strong>Type :</strong> {selectedSale.typeIdentite}</p>
|
||||
<p><strong>Numéro :</strong> {selectedSale.numeroIdentite}</p>
|
||||
<p><strong>Autorité :</strong> {selectedSale.autoriteDelivrance}</p>
|
||||
<p><strong>Date délivrance :</strong> {formatDate(selectedSale.dateDelivrance)}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
{canDelete && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteSale(sale)}
|
||||
disabled={isDeleting === sale.id}
|
||||
className="text-destructive hover:text-destructive"
|
||||
title="Supprimer la vente"
|
||||
disabled={deleteSaleMutation.isPending}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<Trash2 className="h-4 w-4 text-red-600" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<SaleDetailsModal
|
||||
isOpen={!!selectedSale}
|
||||
sale={selectedSale}
|
||||
onClose={() => setSelectedSale(null)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import type { User, LoginData } from "@shared/schema";
|
||||
|
||||
export function useAuth() {
|
||||
const queryClient = useQueryClient();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/auth/me', {
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const userData = await response.json();
|
||||
setUser(userData);
|
||||
} else {
|
||||
setUser(null);
|
||||
}
|
||||
} catch (error) {
|
||||
setUser(null);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkAuth();
|
||||
}, []);
|
||||
|
||||
const loginMutation = useMutation({
|
||||
mutationFn: async (credentials: LoginData) => {
|
||||
const response = await apiRequest('/api/auth/login', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(credentials)
|
||||
});
|
||||
return response.json();
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
setUser(data.user);
|
||||
queryClient.clear();
|
||||
},
|
||||
});
|
||||
|
||||
const logoutMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await apiRequest('/api/auth/logout', { method: 'POST' });
|
||||
},
|
||||
onSuccess: () => {
|
||||
setUser(null);
|
||||
queryClient.clear();
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
user,
|
||||
isLoading,
|
||||
isAuthenticated: !!user,
|
||||
login: loginMutation.mutateAsync,
|
||||
logout: logoutMutation.mutateAsync,
|
||||
isLoggingIn: loginMutation.isPending,
|
||||
isLoggingOut: logoutMutation.isPending,
|
||||
};
|
||||
}
|
||||
@@ -8,14 +8,22 @@ async function throwIfResNotOk(res: Response) {
|
||||
}
|
||||
|
||||
export async function apiRequest(
|
||||
method: string,
|
||||
url: string,
|
||||
data?: unknown | undefined,
|
||||
options: {
|
||||
method?: string;
|
||||
headers?: Record<string, string>;
|
||||
body?: string;
|
||||
} = {}
|
||||
): Promise<Response> {
|
||||
const { method = 'GET', headers = {}, body } = options;
|
||||
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: data ? { "Content-Type": "application/json" } : {},
|
||||
body: data ? JSON.stringify(data) : undefined,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...headers,
|
||||
},
|
||||
body,
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
@@ -44,7 +52,7 @@ export const getQueryFn: <T>(options: {
|
||||
export const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
queryFn: getQueryFn({ on401: "throw" }),
|
||||
queryFn: getQueryFn({ on401: "returnNull" }),
|
||||
refetchInterval: false,
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: Infinity,
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import NewSaleForm from "@/components/NewSaleForm";
|
||||
import SalesHistory from "@/components/SalesHistory";
|
||||
import Administration from "@/components/Administration";
|
||||
import { Package, History, Settings, LogOut, User } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
export default function Dashboard() {
|
||||
const { user, logout } = useAuth();
|
||||
const { toast } = useToast();
|
||||
const [activeTab, setActiveTab] = useState("new-sale");
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await logout();
|
||||
toast({
|
||||
title: "Déconnexion réussie",
|
||||
description: "À bientôt !",
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: "Erreur lors de la déconnexion",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const canAccessAdmin = user?.role === "admin";
|
||||
const canDeleteSales = user?.role === "admin" || user?.role === "manager";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm border-b">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Package className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-gray-900">Registre des Ventes</h1>
|
||||
<p className="text-sm text-gray-500">Gestion des feux d'artifice</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{user?.firstName} {user?.lastName}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 capitalize">{user?.role}</p>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={handleLogout}>
|
||||
<LogOut className="h-4 w-4 mr-2" />
|
||||
Déconnexion
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-3 lg:w-auto lg:grid-cols-auto">
|
||||
<TabsTrigger value="new-sale" className="flex items-center gap-2">
|
||||
<Package className="h-4 w-4" />
|
||||
Nouvelle Vente
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="history" className="flex items-center gap-2">
|
||||
<History className="h-4 w-4" />
|
||||
Historique
|
||||
</TabsTrigger>
|
||||
{canAccessAdmin && (
|
||||
<TabsTrigger value="admin" className="flex items-center gap-2">
|
||||
<Settings className="h-4 w-4" />
|
||||
Administration
|
||||
</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="new-sale">
|
||||
<NewSaleForm />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="history">
|
||||
<SalesHistory canDelete={canDeleteSales} />
|
||||
</TabsContent>
|
||||
|
||||
{canAccessAdmin && (
|
||||
<TabsContent value="admin">
|
||||
<Administration />
|
||||
</TabsContent>
|
||||
)}
|
||||
</Tabs>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { loginSchema, type LoginData } from "@shared/schema";
|
||||
import { LogIn, Sparkles } from "lucide-react";
|
||||
|
||||
export default function Login() {
|
||||
const { login, isLoggingIn } = useAuth();
|
||||
const { toast } = useToast();
|
||||
|
||||
const form = useForm<LoginData>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
defaultValues: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: LoginData) => {
|
||||
try {
|
||||
await login(data);
|
||||
toast({
|
||||
title: "Connexion réussie",
|
||||
description: "Bienvenue dans l'application !",
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erreur de connexion",
|
||||
description: "Nom d'utilisateur ou mot de passe incorrect",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-purple-50 p-4">
|
||||
<Card className="w-full max-w-md shadow-lg">
|
||||
<CardHeader className="text-center">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="p-3 bg-primary/10 rounded-full">
|
||||
<Sparkles className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<CardTitle className="text-2xl font-bold">Registre des Ventes</CardTitle>
|
||||
<p className="text-muted-foreground">Connectez-vous pour accéder à l'application</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nom d'utilisateur</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Votre nom d'utilisateur" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Mot de passe</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="Votre mot de passe" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit" className="w-full" disabled={isLoggingIn}>
|
||||
<LogIn className="h-4 w-4 mr-2" />
|
||||
{isLoggingIn ? "Connexion..." : "Se connecter"}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
<div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<h4 className="font-medium text-blue-900 mb-2">Compte par défaut :</h4>
|
||||
<div className="text-sm text-blue-700 space-y-1">
|
||||
<p><strong>Utilisateur :</strong> admin</p>
|
||||
<p><strong>Mot de passe :</strong> admin123</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Generated
+215
@@ -40,6 +40,9 @@
|
||||
"@radix-ui/react-toggle-group": "^1.1.3",
|
||||
"@radix-ui/react-tooltip": "^1.2.0",
|
||||
"@tanstack/react-query": "^5.60.5",
|
||||
"@types/bcryptjs": "^2.4.6",
|
||||
"@types/memoizee": "^0.4.12",
|
||||
"bcryptjs": "^3.0.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
@@ -53,9 +56,11 @@
|
||||
"framer-motion": "^11.13.1",
|
||||
"input-otp": "^1.4.2",
|
||||
"lucide-react": "^0.453.0",
|
||||
"memoizee": "^0.4.17",
|
||||
"memorystore": "^1.6.7",
|
||||
"nanoid": "^5.1.5",
|
||||
"next-themes": "^0.4.6",
|
||||
"openid-client": "^6.6.2",
|
||||
"passport": "^0.7.0",
|
||||
"passport-local": "^1.0.0",
|
||||
"react": "^18.3.1",
|
||||
@@ -3319,6 +3324,12 @@
|
||||
"@babel/types": "^7.20.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/bcryptjs": {
|
||||
"version": "2.4.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
|
||||
"integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/body-parser": {
|
||||
"version": "1.19.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
|
||||
@@ -3465,6 +3476,12 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/memoizee": {
|
||||
"version": "0.4.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/memoizee/-/memoizee-0.4.12.tgz",
|
||||
"integrity": "sha512-EdtpwNYNhe3kZ+4TlXj/++pvBoU0KdrAICMzgI7vjWgu9sIvvUhu9XR8Ks4L6Wh3sxpZ22wkZR7yCLAqUjnZuQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/mime": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
|
||||
@@ -3744,6 +3761,15 @@
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/bcryptjs": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.2.tgz",
|
||||
"integrity": "sha512-k38b3XOZKv60C4E2hVsXTolJWfkGRMbILBIe2IBITXciy5bOsTKot5kDrf3ZfufQtQOUN5mXceUEpU1rTl9Uog==",
|
||||
"license": "BSD-3-Clause",
|
||||
"bin": {
|
||||
"bcrypt": "bin/bcrypt"
|
||||
}
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||
@@ -4112,6 +4138,19 @@
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/d": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
|
||||
"integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"es5-ext": "^0.10.64",
|
||||
"type": "^2.7.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
@@ -5010,6 +5049,58 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es5-ext": {
|
||||
"version": "0.10.64",
|
||||
"resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
|
||||
"integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
|
||||
"hasInstallScript": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"es6-iterator": "^2.0.3",
|
||||
"es6-symbol": "^3.1.3",
|
||||
"esniff": "^2.0.1",
|
||||
"next-tick": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/es6-iterator": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
|
||||
"integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"d": "1",
|
||||
"es5-ext": "^0.10.35",
|
||||
"es6-symbol": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/es6-symbol": {
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
|
||||
"integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d": "^1.0.2",
|
||||
"ext": "^1.7.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/es6-weak-map": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
|
||||
"integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d": "1",
|
||||
"es5-ext": "^0.10.46",
|
||||
"es6-iterator": "^2.0.3",
|
||||
"es6-symbol": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.25.0",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.0.tgz",
|
||||
@@ -5080,6 +5171,21 @@
|
||||
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/esniff": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
|
||||
"integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d": "^1.0.1",
|
||||
"es5-ext": "^0.10.62",
|
||||
"event-emitter": "^0.3.5",
|
||||
"type": "^2.7.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/etag": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||
@@ -5089,6 +5195,16 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/event-emitter": {
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
|
||||
"integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"d": "1",
|
||||
"es5-ext": "~0.10.14"
|
||||
}
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
|
||||
@@ -5205,6 +5321,15 @@
|
||||
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ext": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
|
||||
"integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"type": "^2.7.2"
|
||||
}
|
||||
},
|
||||
"node_modules/fast-equals": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
|
||||
@@ -5678,6 +5803,12 @@
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/is-promise": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
|
||||
"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/isexe": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
@@ -5708,6 +5839,15 @@
|
||||
"jiti": "bin/jiti.js"
|
||||
}
|
||||
},
|
||||
"node_modules/jose": {
|
||||
"version": "6.0.11",
|
||||
"resolved": "https://registry.npmjs.org/jose/-/jose-6.0.11.tgz",
|
||||
"integrity": "sha512-QxG7EaliDARm1O1S8BGakqncGT9s25bKL1WSf6/oa17Tkqwi8D2ZNglqCF+DsYF88/rV66Q/Q2mFAy697E1DUg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/panva"
|
||||
}
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@@ -6034,6 +6174,15 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lru-queue": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
|
||||
"integrity": "sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es5-ext": "~0.10.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.453.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
|
||||
@@ -6060,6 +6209,25 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/memoizee": {
|
||||
"version": "0.4.17",
|
||||
"resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.17.tgz",
|
||||
"integrity": "sha512-DGqD7Hjpi/1or4F/aYAspXKNm5Yili0QDAFAY4QYvpqpgiY6+1jOfqpmByzjxbWd/T9mChbCArXAbDAsTm5oXA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d": "^1.0.2",
|
||||
"es5-ext": "^0.10.64",
|
||||
"es6-weak-map": "^2.0.3",
|
||||
"event-emitter": "^0.3.5",
|
||||
"is-promise": "^2.2.2",
|
||||
"lru-queue": "^0.1.0",
|
||||
"next-tick": "^1.1.0",
|
||||
"timers-ext": "^0.1.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/memorystore": {
|
||||
"version": "1.6.7",
|
||||
"resolved": "https://registry.npmjs.org/memorystore/-/memorystore-1.6.7.tgz",
|
||||
@@ -6261,6 +6429,12 @@
|
||||
"react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
|
||||
}
|
||||
},
|
||||
"node_modules/next-tick": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
|
||||
"integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/node-gyp-build": {
|
||||
"version": "4.8.3",
|
||||
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.3.tgz",
|
||||
@@ -6299,6 +6473,15 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/oauth4webapi": {
|
||||
"version": "3.5.5",
|
||||
"resolved": "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-3.5.5.tgz",
|
||||
"integrity": "sha512-1K88D2GiAydGblHo39NBro5TebGXa+7tYoyIbxvqv3+haDDry7CBE1eSYuNbOSsYCCU6y0gdynVZAkm4YPw4hg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/panva"
|
||||
}
|
||||
},
|
||||
"node_modules/object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
@@ -6356,6 +6539,19 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/openid-client": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/openid-client/-/openid-client-6.6.2.tgz",
|
||||
"integrity": "sha512-Xya5TNMnnZuTM6DbHdB4q0S3ig2NTAELnii/ASie1xDEr8iiB8zZbO871OWBdrw++sd3hW6bqWjgcmSy1RTWHA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jose": "^6.0.11",
|
||||
"oauth4webapi": "^3.5.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/panva"
|
||||
}
|
||||
},
|
||||
"node_modules/package-json-from-dist": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
|
||||
@@ -7744,6 +7940,19 @@
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/timers-ext": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.8.tgz",
|
||||
"integrity": "sha512-wFH7+SEAcKfJpfLPkrgMPvvwnEtj8W4IurvEyrKsDleXnKLCDw71w8jltvfLa8Rm4qQxxT4jmDBYbJG/z7qoww==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"es5-ext": "^0.10.64",
|
||||
"next-tick": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
|
||||
@@ -8259,6 +8468,12 @@
|
||||
"url": "https://github.com/sponsors/Wombosvideo"
|
||||
}
|
||||
},
|
||||
"node_modules/type": {
|
||||
"version": "2.7.3",
|
||||
"resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
|
||||
"integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/type-is": {
|
||||
"version": "1.6.18",
|
||||
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
|
||||
|
||||
@@ -42,6 +42,9 @@
|
||||
"@radix-ui/react-toggle-group": "^1.1.3",
|
||||
"@radix-ui/react-tooltip": "^1.2.0",
|
||||
"@tanstack/react-query": "^5.60.5",
|
||||
"@types/bcryptjs": "^2.4.6",
|
||||
"@types/memoizee": "^0.4.12",
|
||||
"bcryptjs": "^3.0.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
@@ -55,9 +58,11 @@
|
||||
"framer-motion": "^11.13.1",
|
||||
"input-otp": "^1.4.2",
|
||||
"lucide-react": "^0.453.0",
|
||||
"memoizee": "^0.4.17",
|
||||
"memorystore": "^1.6.7",
|
||||
"nanoid": "^5.1.5",
|
||||
"next-themes": "^0.4.6",
|
||||
"openid-client": "^6.6.2",
|
||||
"passport": "^0.7.0",
|
||||
"passport-local": "^1.0.0",
|
||||
"react": "^18.3.1",
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## Overview
|
||||
|
||||
This is a React-based web application for managing and tracking fireworks sales in compliance with French regulations. The application provides a complete sales registration system with photo capture capabilities, data export features, and regulatory compliance tracking. It's built as a single-page application using React with TypeScript, TailwindCSS for styling, and IndexedDB for local data storage.
|
||||
Application web complète de gestion et suivi des ventes de feux d'artifice en conformité avec la réglementation française. L'application fournit un système d'enregistrement des ventes avec authentification multi-utilisateur, contrôle d'accès basé sur les rôles, gestion multi-magasins, et stockage sécurisé en base de données PostgreSQL.
|
||||
|
||||
## User Preferences
|
||||
|
||||
@@ -16,50 +16,68 @@ Preferred communication style: Simple, everyday language.
|
||||
- **Styling**: TailwindCSS with shadcn/ui component library
|
||||
- **State Management**: React Hook Form for form handling, TanStack Query for server state
|
||||
- **UI Components**: Radix UI primitives with custom shadcn/ui components
|
||||
- **Authentication**: Session-based authentication with role-based access control
|
||||
|
||||
### Backend Architecture
|
||||
- **Server**: Express.js with TypeScript
|
||||
- **Database ORM**: Drizzle ORM configured for PostgreSQL
|
||||
- **Database**: Neon Database (PostgreSQL) for production
|
||||
- **Development**: In-memory storage for development/testing
|
||||
- **Database**: PostgreSQL via environment variable DATABASE_URL
|
||||
- **Authentication**: bcrypt password hashing with Express sessions
|
||||
- **Session Storage**: PostgreSQL session store for scalability
|
||||
|
||||
### Data Storage
|
||||
- **Primary Storage**: PostgreSQL database via Neon Database service
|
||||
- **Local Storage**: IndexedDB for offline capabilities and local data persistence
|
||||
- **Primary Storage**: PostgreSQL database with complete schema
|
||||
- **Session Storage**: PostgreSQL sessions table for user authentication
|
||||
- **Schema Management**: Drizzle migrations for database versioning
|
||||
- **Multi-tenant**: Each store has isolated sales data
|
||||
|
||||
## Key Components
|
||||
|
||||
### Core Application Features
|
||||
1. **Sales Form Management**: Comprehensive form for recording fireworks sales with validation
|
||||
2. **Customer Identity Verification**: Photo capture for ID documents (front/back)
|
||||
3. **Product Classification**: Categorization system for different fireworks types (F2/F3)
|
||||
4. **Sales History**: Complete transaction history with search and filtering
|
||||
5. **Data Export**: CSV export functionality for regulatory reporting
|
||||
6. **Backup System**: Automatic local backups using IndexedDB
|
||||
1. **Multi-User Authentication**: Secure login system with role-based access control
|
||||
2. **User Management**: Administrative interface for creating and managing users
|
||||
3. **Store Management**: Multi-tenant architecture with store isolation
|
||||
4. **Sales Form Management**: Comprehensive form for recording fireworks sales with validation
|
||||
5. **Sales History**: Complete transaction history with date filtering and search
|
||||
6. **Data Export**: CSV export functionality for regulatory reporting
|
||||
7. **Role-Based Permissions**: Different access levels for Admin, Manager, and Employee roles
|
||||
|
||||
### Authentication & Authorization
|
||||
- **Administrators**: Full access to all features including user/store management
|
||||
- **Managers**: Sales management and history access, no administration features
|
||||
- **Employees**: Sales creation and history viewing only
|
||||
- **Default Account**: admin/admin123 (auto-created on first database setup)
|
||||
|
||||
### Technical Components
|
||||
- **Camera Integration**: Native device camera access for ID photo capture
|
||||
- **Session Management**: Secure session handling with PostgreSQL storage
|
||||
- **Form Validation**: Multi-step validation including EAN-13 barcode validation
|
||||
- **Responsive Design**: Mobile-first approach with tablet and desktop support
|
||||
- **Toast Notifications**: User feedback system for actions and errors
|
||||
- **Modal System**: Dialog-based UI for camera capture and sale details
|
||||
- **Modal System**: Dialog-based UI for detailed views and confirmations
|
||||
|
||||
## Data Flow
|
||||
|
||||
### Authentication Flow
|
||||
1. User accesses application and is redirected to login page
|
||||
2. Credentials verified against PostgreSQL users table with bcrypt
|
||||
3. Successful login creates secure session stored in PostgreSQL
|
||||
4. User role determines available features and access levels
|
||||
5. Session automatically managed with configurable expiration
|
||||
|
||||
### Sales Recording Process
|
||||
1. User fills out comprehensive sales form (vendor, product, customer details)
|
||||
2. Photos captured using device camera for customer ID verification
|
||||
3. Form validation ensures regulatory compliance
|
||||
4. Data saved to IndexedDB for immediate access
|
||||
5. Automatic backup created for data persistence
|
||||
6. Optional sync to PostgreSQL database for permanent storage
|
||||
1. Authenticated user fills out comprehensive sales form
|
||||
2. Form validation ensures regulatory compliance (EAN-13, required fields)
|
||||
3. Data submitted to backend with user and store association
|
||||
4. Sales record created in PostgreSQL with complete audit trail
|
||||
5. Real-time updates to sales history via TanStack Query
|
||||
6. Export capability for regulatory compliance reporting
|
||||
|
||||
### Data Management
|
||||
- **Local-First**: All data operations work offline using IndexedDB
|
||||
- **Progressive Enhancement**: Database integration available for multi-device sync
|
||||
- **Export Capability**: Data can be exported as CSV for regulatory compliance
|
||||
- **Backup/Restore**: Built-in backup system for data protection
|
||||
- **Database-First**: All data operations use PostgreSQL for consistency
|
||||
- **Multi-Tenant**: Store-based data isolation for security
|
||||
- **Role-Based Access**: Different permissions based on user role
|
||||
- **Session Security**: Secure session management with PostgreSQL storage
|
||||
- **Audit Trail**: Complete transaction history with timestamps
|
||||
|
||||
## External Dependencies
|
||||
|
||||
@@ -70,6 +88,12 @@ Preferred communication style: Simple, everyday language.
|
||||
- **react-hook-form**: Form handling and validation
|
||||
- **@hookform/resolvers**: Form validation resolvers
|
||||
|
||||
### Authentication & Security
|
||||
- **bcryptjs**: Password hashing for secure authentication
|
||||
- **express-session**: Session management middleware
|
||||
- **connect-pg-simple**: PostgreSQL session store
|
||||
- **drizzle-zod**: Schema validation with Zod integration
|
||||
|
||||
### UI and Styling
|
||||
- **@radix-ui/***: Headless UI primitives for accessibility
|
||||
- **tailwindcss**: Utility-first CSS framework
|
||||
@@ -85,23 +109,46 @@ Preferred communication style: Simple, everyday language.
|
||||
|
||||
### Development Environment
|
||||
- **Local Development**: Vite dev server with hot module replacement
|
||||
- **Database**: In-memory storage for rapid development
|
||||
- **Database**: PostgreSQL with auto-initialization of default admin account
|
||||
- **Authentication**: Session-based with development-friendly settings
|
||||
- **Build Process**: TypeScript compilation with Vite bundling
|
||||
|
||||
### Production Environment
|
||||
- **Frontend**: Static assets served via Vite build output
|
||||
- **Backend**: Express.js server bundled with esbuild
|
||||
- **Database**: PostgreSQL via Neon Database service
|
||||
- **Environment Variables**: DATABASE_URL for production database connection
|
||||
- **Database**: PostgreSQL via DATABASE_URL environment variable
|
||||
- **Sessions**: Secure session storage in PostgreSQL sessions table
|
||||
- **Environment Variables**: DATABASE_URL, SESSION_SECRET (optional)
|
||||
|
||||
### Security Configuration
|
||||
- **Password Hashing**: bcrypt with appropriate salt rounds
|
||||
- **Session Security**: HTTP-only cookies with configurable expiration
|
||||
- **Role-Based Access**: Middleware-enforced permission system
|
||||
- **CSRF Protection**: Session-based protection against cross-site attacks
|
||||
|
||||
### Build Configuration
|
||||
- **Client Build**: `vite build` generates optimized static assets
|
||||
- **Server Build**: `esbuild` bundles Express server for deployment
|
||||
- **Type Checking**: TypeScript compilation ensures type safety
|
||||
- **Database Migrations**: `drizzle-kit push` for schema updates
|
||||
- **Database Setup**: `npm run db:push` for schema deployment
|
||||
- **Default Account**: Automatic creation of admin/admin123 on first run
|
||||
|
||||
### Deployment Features
|
||||
- **Environment Detection**: Automatic development/production mode switching
|
||||
- **Asset Optimization**: Bundled and minified production builds
|
||||
- **Hot Reloading**: Development-only feature for rapid iteration
|
||||
- **Error Handling**: Comprehensive error boundaries and logging
|
||||
- **Error Handling**: Comprehensive error boundaries and logging
|
||||
- **Multi-Tenant Ready**: Store-based data isolation for scalability
|
||||
|
||||
## Recent Changes (January 2025)
|
||||
|
||||
### Migration to Full-Stack Architecture
|
||||
- ✅ Migrated from IndexedDB to PostgreSQL database with Drizzle ORM
|
||||
- ✅ Implemented complete authentication system with bcrypt password hashing
|
||||
- ✅ Added role-based access control (Administrator, Manager, Employee)
|
||||
- ✅ Created multi-tenant architecture with store-based data isolation
|
||||
- ✅ Built administration panel for user and store management
|
||||
- ✅ Generated default admin account (admin/admin123) for initial setup
|
||||
- ✅ Updated all components to work with database instead of local storage
|
||||
- ✅ Added session-based authentication with PostgreSQL session store
|
||||
- ✅ Implemented comprehensive API with proper validation and error handling
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Pool, neonConfig } from '@neondatabase/serverless';
|
||||
import { drizzle } from 'drizzle-orm/neon-serverless';
|
||||
import ws from "ws";
|
||||
import * as schema from "@shared/schema";
|
||||
|
||||
neonConfig.webSocketConstructor = ws;
|
||||
|
||||
if (!process.env.DATABASE_URL) {
|
||||
throw new Error(
|
||||
"DATABASE_URL must be set. Did you forget to provision a database?",
|
||||
);
|
||||
}
|
||||
|
||||
export const pool = new Pool({ connectionString: process.env.DATABASE_URL });
|
||||
export const db = drizzle({ client: pool, schema });
|
||||
+256
-6
@@ -1,15 +1,265 @@
|
||||
import type { Express } from "express";
|
||||
import type { Express, Request, Response, NextFunction } from "express";
|
||||
import { createServer, type Server } from "http";
|
||||
import { storage } from "./storage";
|
||||
import session from "express-session";
|
||||
import connectPg from "connect-pg-simple";
|
||||
import { loginSchema, insertUserSchema, insertStoreSchema, insertSaleSchema } from "@shared/schema";
|
||||
import { z } from "zod";
|
||||
|
||||
declare module 'express-session' {
|
||||
interface SessionData {
|
||||
userId?: number;
|
||||
}
|
||||
}
|
||||
|
||||
// Authentication middleware
|
||||
const requireAuth = (req: Request, res: Response, next: NextFunction) => {
|
||||
if (!req.session?.userId) {
|
||||
return res.status(401).json({ error: "Authentication required" });
|
||||
}
|
||||
next();
|
||||
};
|
||||
|
||||
// Role-based authorization middleware
|
||||
const requireRole = (roles: string[]) => {
|
||||
return async (req: Request, res: Response, next: NextFunction) => {
|
||||
if (!req.session?.userId) {
|
||||
return res.status(401).json({ error: "Authentication required" });
|
||||
}
|
||||
|
||||
const user = await storage.getUser(req.session.userId);
|
||||
if (!user || !roles.includes(user.role)) {
|
||||
return res.status(403).json({ error: "Insufficient permissions" });
|
||||
}
|
||||
|
||||
req.user = user;
|
||||
next();
|
||||
};
|
||||
};
|
||||
|
||||
declare global {
|
||||
namespace Express {
|
||||
interface Request {
|
||||
user?: any;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function registerRoutes(app: Express): Promise<Server> {
|
||||
// put application routes here
|
||||
// prefix all routes with /api
|
||||
// Session configuration with PostgreSQL store
|
||||
const pgStore = connectPg(session);
|
||||
app.use(session({
|
||||
store: new pgStore({
|
||||
conString: process.env.DATABASE_URL,
|
||||
createTableIfMissing: false,
|
||||
tableName: 'sessions',
|
||||
}),
|
||||
secret: process.env.SESSION_SECRET || 'fireworks-secret-key-2024',
|
||||
resave: false,
|
||||
saveUninitialized: false,
|
||||
cookie: {
|
||||
secure: false, // Set to true in production with HTTPS
|
||||
maxAge: 24 * 60 * 60 * 1000 // 24 hours
|
||||
}
|
||||
}));
|
||||
|
||||
// use storage to perform CRUD operations on the storage interface
|
||||
// e.g. storage.insertUser(user) or storage.getUserByUsername(username)
|
||||
// Initialize default admin if needed
|
||||
const initResult = await storage.initializeDefaults();
|
||||
if (initResult.defaultAdminCredentials) {
|
||||
console.log('\n=== DEFAULT ADMIN CREATED ===');
|
||||
console.log('Username:', initResult.defaultAdminCredentials.username);
|
||||
console.log('Password:', initResult.defaultAdminCredentials.password);
|
||||
console.log('Please change this password after first login!');
|
||||
console.log('==============================\n');
|
||||
}
|
||||
|
||||
// Auth routes
|
||||
app.post('/api/auth/login', async (req, res) => {
|
||||
try {
|
||||
const { username, password } = loginSchema.parse(req.body);
|
||||
|
||||
const user = await storage.authenticateUser(username, password);
|
||||
if (!user) {
|
||||
return res.status(401).json({ error: "Invalid credentials" });
|
||||
}
|
||||
|
||||
req.session.userId = user.id;
|
||||
res.json({ user: { ...user, password: undefined } });
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
if (error instanceof z.ZodError) {
|
||||
return res.status(400).json({ error: "Invalid input", details: error.errors });
|
||||
}
|
||||
res.status(500).json({ error: "Login failed" });
|
||||
}
|
||||
});
|
||||
|
||||
app.post('/api/auth/logout', (req, res) => {
|
||||
req.session.destroy((err) => {
|
||||
if (err) {
|
||||
console.error('Logout error:', err);
|
||||
return res.status(500).json({ error: "Logout failed" });
|
||||
}
|
||||
res.json({ message: "Logged out successfully" });
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/api/auth/me', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const user = await storage.getUser(req.session.userId!);
|
||||
if (!user) {
|
||||
return res.status(404).json({ error: "User not found" });
|
||||
}
|
||||
res.json({ ...user, password: undefined });
|
||||
} catch (error) {
|
||||
console.error('Get user error:', error);
|
||||
res.status(500).json({ error: "Failed to get user info" });
|
||||
}
|
||||
});
|
||||
|
||||
// Sales routes
|
||||
app.get('/api/sales', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const user = await storage.getUser(req.session.userId!);
|
||||
if (!user) {
|
||||
return res.status(404).json({ error: "User not found" });
|
||||
}
|
||||
|
||||
const { startDate, endDate } = req.query;
|
||||
const sales = await storage.getSalesByStore(
|
||||
user.storeId!,
|
||||
startDate as string,
|
||||
endDate as string
|
||||
);
|
||||
res.json(sales);
|
||||
} catch (error) {
|
||||
console.error('Get sales error:', error);
|
||||
res.status(500).json({ error: "Failed to get sales" });
|
||||
}
|
||||
});
|
||||
|
||||
app.post('/api/sales', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const user = await storage.getUser(req.session.userId!);
|
||||
if (!user) {
|
||||
return res.status(404).json({ error: "User not found" });
|
||||
}
|
||||
|
||||
const saleData = insertSaleSchema.parse({
|
||||
...req.body,
|
||||
storeId: user.storeId,
|
||||
userId: user.id
|
||||
});
|
||||
|
||||
const sale = await storage.createSale(saleData);
|
||||
res.status(201).json(sale);
|
||||
} catch (error) {
|
||||
console.error('Create sale error:', error);
|
||||
if (error instanceof z.ZodError) {
|
||||
return res.status(400).json({ error: "Invalid input", details: error.errors });
|
||||
}
|
||||
res.status(500).json({ error: "Failed to create sale" });
|
||||
}
|
||||
});
|
||||
|
||||
app.delete('/api/sales/:id', requireRole(['admin', 'manager']), async (req, res) => {
|
||||
try {
|
||||
const saleId = parseInt(req.params.id);
|
||||
await storage.deleteSale(saleId);
|
||||
res.json({ message: "Sale deleted successfully" });
|
||||
} catch (error) {
|
||||
console.error('Delete sale error:', error);
|
||||
res.status(500).json({ error: "Failed to delete sale" });
|
||||
}
|
||||
});
|
||||
|
||||
// Admin routes - Users
|
||||
app.get('/api/admin/users', requireRole(['admin']), async (req, res) => {
|
||||
try {
|
||||
const users = await storage.getAllUsers();
|
||||
const safeUsers = users.map(user => ({ ...user, password: undefined }));
|
||||
res.json(safeUsers);
|
||||
} catch (error) {
|
||||
console.error('Get users error:', error);
|
||||
res.status(500).json({ error: "Failed to get users" });
|
||||
}
|
||||
});
|
||||
|
||||
app.post('/api/admin/users', requireRole(['admin']), async (req, res) => {
|
||||
try {
|
||||
const userData = insertUserSchema.parse(req.body);
|
||||
const user = await storage.createUser(userData);
|
||||
res.status(201).json({ ...user, password: undefined });
|
||||
} catch (error) {
|
||||
console.error('Create user error:', error);
|
||||
if (error instanceof z.ZodError) {
|
||||
return res.status(400).json({ error: "Invalid input", details: error.errors });
|
||||
}
|
||||
res.status(500).json({ error: "Failed to create user" });
|
||||
}
|
||||
});
|
||||
|
||||
app.put('/api/admin/users/:id', requireRole(['admin']), async (req, res) => {
|
||||
try {
|
||||
const userId = parseInt(req.params.id);
|
||||
const userData = insertUserSchema.partial().parse(req.body);
|
||||
const user = await storage.updateUser(userId, userData);
|
||||
if (!user) {
|
||||
return res.status(404).json({ error: "User not found" });
|
||||
}
|
||||
res.json({ ...user, password: undefined });
|
||||
} catch (error) {
|
||||
console.error('Update user error:', error);
|
||||
if (error instanceof z.ZodError) {
|
||||
return res.status(400).json({ error: "Invalid input", details: error.errors });
|
||||
}
|
||||
res.status(500).json({ error: "Failed to update user" });
|
||||
}
|
||||
});
|
||||
|
||||
// Admin routes - Stores
|
||||
app.get('/api/admin/stores', requireRole(['admin']), async (req, res) => {
|
||||
try {
|
||||
const stores = await storage.getAllStores();
|
||||
res.json(stores);
|
||||
} catch (error) {
|
||||
console.error('Get stores error:', error);
|
||||
res.status(500).json({ error: "Failed to get stores" });
|
||||
}
|
||||
});
|
||||
|
||||
app.post('/api/admin/stores', requireRole(['admin']), async (req, res) => {
|
||||
try {
|
||||
const storeData = insertStoreSchema.parse(req.body);
|
||||
const store = await storage.createStore(storeData);
|
||||
res.status(201).json(store);
|
||||
} catch (error) {
|
||||
console.error('Create store error:', error);
|
||||
if (error instanceof z.ZodError) {
|
||||
return res.status(400).json({ error: "Invalid input", details: error.errors });
|
||||
}
|
||||
res.status(500).json({ error: "Failed to create store" });
|
||||
}
|
||||
});
|
||||
|
||||
app.put('/api/admin/stores/:id', requireRole(['admin']), async (req, res) => {
|
||||
try {
|
||||
const storeId = parseInt(req.params.id);
|
||||
const storeData = insertStoreSchema.partial().parse(req.body);
|
||||
const store = await storage.updateStore(storeId, storeData);
|
||||
if (!store) {
|
||||
return res.status(404).json({ error: "Store not found" });
|
||||
}
|
||||
res.json(store);
|
||||
} catch (error) {
|
||||
console.error('Update store error:', error);
|
||||
if (error instanceof z.ZodError) {
|
||||
return res.status(400).json({ error: "Invalid input", details: error.errors });
|
||||
}
|
||||
res.status(500).json({ error: "Failed to update store" });
|
||||
}
|
||||
});
|
||||
|
||||
const httpServer = createServer(app);
|
||||
|
||||
return httpServer;
|
||||
}
|
||||
+181
-22
@@ -1,39 +1,198 @@
|
||||
import { users, type User, type InsertUser } from "@shared/schema";
|
||||
|
||||
// modify the interface with any CRUD methods
|
||||
// you might need
|
||||
import {
|
||||
users,
|
||||
stores,
|
||||
sales,
|
||||
type User,
|
||||
type InsertUser,
|
||||
type Store,
|
||||
type InsertStore,
|
||||
type Sale,
|
||||
type InsertSale,
|
||||
} from "@shared/schema";
|
||||
import { db } from "./db";
|
||||
import { eq, and, gte, lte, desc } from "drizzle-orm";
|
||||
import bcrypt from "bcryptjs";
|
||||
|
||||
export interface IStorage {
|
||||
// User operations
|
||||
getUser(id: number): Promise<User | undefined>;
|
||||
getUserByUsername(username: string): Promise<User | undefined>;
|
||||
createUser(user: InsertUser): Promise<User>;
|
||||
updateUser(id: number, user: Partial<InsertUser>): Promise<User | undefined>;
|
||||
getAllUsers(): Promise<User[]>;
|
||||
|
||||
// Store operations
|
||||
getStore(id: number): Promise<Store | undefined>;
|
||||
createStore(store: InsertStore): Promise<Store>;
|
||||
getAllStores(): Promise<Store[]>;
|
||||
updateStore(id: number, store: Partial<InsertStore>): Promise<Store | undefined>;
|
||||
|
||||
// Sale operations
|
||||
getSale(id: number): Promise<Sale | undefined>;
|
||||
createSale(sale: InsertSale): Promise<Sale>;
|
||||
getSalesByStore(storeId: number, startDate?: string, endDate?: string): Promise<Sale[]>;
|
||||
deleteSale(id: number): Promise<void>;
|
||||
|
||||
// Auth operations
|
||||
authenticateUser(username: string, password: string): Promise<User | null>;
|
||||
hashPassword(password: string): Promise<string>;
|
||||
initializeDefaults(): Promise<{ defaultAdminCredentials?: { username: string; password: string } }>;
|
||||
}
|
||||
|
||||
export class MemStorage implements IStorage {
|
||||
private users: Map<number, User>;
|
||||
currentId: number;
|
||||
|
||||
constructor() {
|
||||
this.users = new Map();
|
||||
this.currentId = 1;
|
||||
}
|
||||
|
||||
export class DatabaseStorage implements IStorage {
|
||||
// User operations
|
||||
async getUser(id: number): Promise<User | undefined> {
|
||||
return this.users.get(id);
|
||||
const [user] = await db.select().from(users).where(eq(users.id, id));
|
||||
return user;
|
||||
}
|
||||
|
||||
async getUserByUsername(username: string): Promise<User | undefined> {
|
||||
return Array.from(this.users.values()).find(
|
||||
(user) => user.username === username,
|
||||
);
|
||||
const [user] = await db.select().from(users).where(eq(users.username, username));
|
||||
return user;
|
||||
}
|
||||
|
||||
async createUser(insertUser: InsertUser): Promise<User> {
|
||||
const id = this.currentId++;
|
||||
const user: User = { ...insertUser, id };
|
||||
this.users.set(id, user);
|
||||
async createUser(userData: InsertUser): Promise<User> {
|
||||
// Hash password if provided
|
||||
if (userData.password) {
|
||||
userData.password = await this.hashPassword(userData.password);
|
||||
}
|
||||
|
||||
const [user] = await db
|
||||
.insert(users)
|
||||
.values(userData)
|
||||
.returning();
|
||||
return user;
|
||||
}
|
||||
|
||||
async updateUser(id: number, userData: Partial<InsertUser>): Promise<User | undefined> {
|
||||
// Hash password if provided
|
||||
if (userData.password) {
|
||||
userData.password = await this.hashPassword(userData.password);
|
||||
}
|
||||
|
||||
const [user] = await db
|
||||
.update(users)
|
||||
.set(userData)
|
||||
.where(eq(users.id, id))
|
||||
.returning();
|
||||
return user;
|
||||
}
|
||||
|
||||
async getAllUsers(): Promise<User[]> {
|
||||
return await db.select().from(users).orderBy(desc(users.createdAt));
|
||||
}
|
||||
|
||||
// Store operations
|
||||
async getStore(id: number): Promise<Store | undefined> {
|
||||
const [store] = await db.select().from(stores).where(eq(stores.id, id));
|
||||
return store;
|
||||
}
|
||||
|
||||
async createStore(storeData: InsertStore): Promise<Store> {
|
||||
const [store] = await db
|
||||
.insert(stores)
|
||||
.values(storeData)
|
||||
.returning();
|
||||
return store;
|
||||
}
|
||||
|
||||
async getAllStores(): Promise<Store[]> {
|
||||
return await db.select().from(stores).orderBy(desc(stores.createdAt));
|
||||
}
|
||||
|
||||
async updateStore(id: number, storeData: Partial<InsertStore>): Promise<Store | undefined> {
|
||||
const [store] = await db
|
||||
.update(stores)
|
||||
.set(storeData)
|
||||
.where(eq(stores.id, id))
|
||||
.returning();
|
||||
return store;
|
||||
}
|
||||
|
||||
// Sale operations
|
||||
async getSale(id: number): Promise<Sale | undefined> {
|
||||
const [sale] = await db.select().from(sales).where(eq(sales.id, id));
|
||||
return sale;
|
||||
}
|
||||
|
||||
async createSale(saleData: InsertSale): Promise<Sale> {
|
||||
const [sale] = await db
|
||||
.insert(sales)
|
||||
.values(saleData)
|
||||
.returning();
|
||||
return sale;
|
||||
}
|
||||
|
||||
async getSalesByStore(storeId: number, startDate?: string, endDate?: string): Promise<Sale[]> {
|
||||
let query = db.select().from(sales).where(eq(sales.storeId, storeId));
|
||||
|
||||
if (startDate && endDate) {
|
||||
query = db.select().from(sales).where(
|
||||
and(
|
||||
eq(sales.storeId, storeId),
|
||||
gte(sales.dateVente, startDate),
|
||||
lte(sales.dateVente, endDate)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return await query.orderBy(desc(sales.timestamp));
|
||||
}
|
||||
|
||||
async deleteSale(id: number): Promise<void> {
|
||||
await db.delete(sales).where(eq(sales.id, id));
|
||||
}
|
||||
|
||||
// Auth operations
|
||||
async authenticateUser(username: string, password: string): Promise<User | null> {
|
||||
const user = await this.getUserByUsername(username);
|
||||
if (!user || !user.isActive) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isValid = await bcrypt.compare(password, user.password);
|
||||
return isValid ? user : null;
|
||||
}
|
||||
|
||||
async hashPassword(password: string): Promise<string> {
|
||||
return await bcrypt.hash(password, 12);
|
||||
}
|
||||
|
||||
// Initialize default admin user and store if none exist
|
||||
async initializeDefaults(): Promise<{ defaultAdminCredentials?: { username: string; password: string } }> {
|
||||
const existingUsers = await this.getAllUsers();
|
||||
|
||||
if (existingUsers.length === 0) {
|
||||
// Create default store
|
||||
const defaultStore = await this.createStore({
|
||||
name: "Magasin Principal",
|
||||
address: "À définir",
|
||||
isActive: true,
|
||||
});
|
||||
|
||||
// Create default admin user
|
||||
const defaultPassword = "admin123";
|
||||
const adminUser = await this.createUser({
|
||||
username: "admin",
|
||||
password: defaultPassword,
|
||||
email: "admin@example.com",
|
||||
firstName: "Administrateur",
|
||||
lastName: "Principal",
|
||||
role: "admin",
|
||||
storeId: defaultStore.id,
|
||||
isActive: true,
|
||||
});
|
||||
|
||||
return {
|
||||
defaultAdminCredentials: {
|
||||
username: "admin",
|
||||
password: defaultPassword
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
export const storage = new MemStorage();
|
||||
export const storage = new DatabaseStorage();
|
||||
+134
-7
@@ -1,17 +1,144 @@
|
||||
import { pgTable, text, serial, integer, boolean } from "drizzle-orm/pg-core";
|
||||
import {
|
||||
pgTable,
|
||||
text,
|
||||
varchar,
|
||||
timestamp,
|
||||
jsonb,
|
||||
index,
|
||||
serial,
|
||||
integer,
|
||||
boolean,
|
||||
} from "drizzle-orm/pg-core";
|
||||
import { relations } from "drizzle-orm";
|
||||
import { createInsertSchema } from "drizzle-zod";
|
||||
import { z } from "zod";
|
||||
|
||||
// Session storage table
|
||||
export const sessions = pgTable(
|
||||
"sessions",
|
||||
{
|
||||
sid: varchar("sid").primaryKey(),
|
||||
sess: jsonb("sess").notNull(),
|
||||
expire: timestamp("expire").notNull(),
|
||||
},
|
||||
(table) => [index("IDX_session_expire").on(table.expire)],
|
||||
);
|
||||
|
||||
// Magasins table
|
||||
export const stores = pgTable("stores", {
|
||||
id: serial("id").primaryKey(),
|
||||
name: varchar("name", { length: 255 }).notNull(),
|
||||
address: text("address"),
|
||||
phone: varchar("phone", { length: 20 }),
|
||||
email: varchar("email", { length: 255 }),
|
||||
isActive: boolean("is_active").default(true),
|
||||
createdAt: timestamp("created_at").defaultNow(),
|
||||
updatedAt: timestamp("updated_at").defaultNow(),
|
||||
});
|
||||
|
||||
// Users table with authentication
|
||||
export const users = pgTable("users", {
|
||||
id: serial("id").primaryKey(),
|
||||
username: text("username").notNull().unique(),
|
||||
password: text("password").notNull(),
|
||||
username: varchar("username", { length: 50 }).unique().notNull(),
|
||||
password: varchar("password", { length: 255 }).notNull(), // Will be hashed
|
||||
email: varchar("email", { length: 255 }).unique(),
|
||||
firstName: varchar("first_name", { length: 100 }),
|
||||
lastName: varchar("last_name", { length: 100 }),
|
||||
role: varchar("role", { length: 20 }).notNull().default("employee"), // admin, manager, employee
|
||||
storeId: integer("store_id").references(() => stores.id),
|
||||
isActive: boolean("is_active").default(true),
|
||||
createdAt: timestamp("created_at").defaultNow(),
|
||||
updatedAt: timestamp("updated_at").defaultNow(),
|
||||
});
|
||||
|
||||
export const insertUserSchema = createInsertSchema(users).pick({
|
||||
username: true,
|
||||
password: true,
|
||||
// Sales table
|
||||
export const sales = pgTable("sales", {
|
||||
id: serial("id").primaryKey(),
|
||||
storeId: integer("store_id").references(() => stores.id).notNull(),
|
||||
userId: integer("user_id").references(() => users.id).notNull(),
|
||||
timestamp: timestamp("timestamp").defaultNow(),
|
||||
|
||||
// Vendeur
|
||||
vendeur: varchar("vendeur", { length: 255 }).notNull(),
|
||||
dateVente: varchar("date_vente", { length: 10 }).notNull(),
|
||||
|
||||
// Produit
|
||||
typeArticle: varchar("type_article", { length: 255 }).notNull(),
|
||||
categorie: varchar("categorie", { length: 2 }).notNull(),
|
||||
quantite: integer("quantite").notNull(),
|
||||
gencode: varchar("gencode", { length: 13 }).notNull(),
|
||||
|
||||
// Client
|
||||
nom: varchar("nom", { length: 255 }).notNull(),
|
||||
prenom: varchar("prenom", { length: 255 }).notNull(),
|
||||
dateNaissance: varchar("date_naissance", { length: 10 }).notNull(),
|
||||
lieuNaissance: varchar("lieu_naissance", { length: 255 }),
|
||||
|
||||
// Identité
|
||||
typeIdentite: varchar("type_identite", { length: 50 }).notNull(),
|
||||
numeroIdentite: varchar("numero_identite", { length: 100 }).notNull(),
|
||||
autoriteDelivrance: varchar("autorite_delivrance", { length: 255 }).notNull(),
|
||||
dateDelivrance: varchar("date_delivrance", { length: 10 }).notNull(),
|
||||
|
||||
// Photos
|
||||
photoRecto: text("photo_recto"),
|
||||
photoVerso: text("photo_verso"),
|
||||
});
|
||||
|
||||
export type InsertUser = z.infer<typeof insertUserSchema>;
|
||||
// Relations
|
||||
export const storesRelations = relations(stores, ({ many }) => ({
|
||||
users: many(users),
|
||||
sales: many(sales),
|
||||
}));
|
||||
|
||||
export const usersRelations = relations(users, ({ one, many }) => ({
|
||||
store: one(stores, {
|
||||
fields: [users.storeId],
|
||||
references: [stores.id],
|
||||
}),
|
||||
sales: many(sales),
|
||||
}));
|
||||
|
||||
export const salesRelations = relations(sales, ({ one }) => ({
|
||||
store: one(stores, {
|
||||
fields: [sales.storeId],
|
||||
references: [stores.id],
|
||||
}),
|
||||
user: one(users, {
|
||||
fields: [sales.userId],
|
||||
references: [users.id],
|
||||
}),
|
||||
}));
|
||||
|
||||
// Insert schemas
|
||||
export const insertUserSchema = createInsertSchema(users).omit({
|
||||
id: true,
|
||||
createdAt: true,
|
||||
updatedAt: true,
|
||||
});
|
||||
|
||||
export const insertStoreSchema = createInsertSchema(stores).omit({
|
||||
id: true,
|
||||
createdAt: true,
|
||||
updatedAt: true,
|
||||
});
|
||||
|
||||
export const insertSaleSchema = createInsertSchema(sales).omit({
|
||||
id: true,
|
||||
timestamp: true,
|
||||
});
|
||||
|
||||
// Login schema
|
||||
export const loginSchema = z.object({
|
||||
username: z.string().min(1, "Nom d'utilisateur requis"),
|
||||
password: z.string().min(1, "Mot de passe requis"),
|
||||
});
|
||||
|
||||
// Types
|
||||
export type User = typeof users.$inferSelect;
|
||||
export type InsertUser = typeof users.$inferInsert;
|
||||
export type Store = typeof stores.$inferSelect;
|
||||
export type InsertStore = typeof stores.$inferInsert;
|
||||
export type Sale = typeof sales.$inferSelect;
|
||||
export type InsertSale = typeof sales.$inferInsert;
|
||||
export type LoginData = z.infer<typeof loginSchema>;
|
||||
Reference in new issue
Block a user