376 lines
10 KiB
TypeScript
376 lines
10 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { signOut, useSession } from 'next-auth/react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import {
|
|
BarChart3,
|
|
BrainCircuit,
|
|
Eye,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
Package,
|
|
PanelTop,
|
|
ShoppingCart,
|
|
Truck,
|
|
User,
|
|
UserCog,
|
|
Users,
|
|
Wrench,
|
|
} from 'lucide-react'
|
|
import POSModule from '@/components/pos/POSModule'
|
|
import { ProduitListe } from '@/components/products/ProduitListe'
|
|
import { ClientList } from '@/components/clients/client-list'
|
|
import AtelierModule from '@/components/atelier/AtelierModule'
|
|
import { SupplierList } from '@/components/suppliers/SupplierList'
|
|
import PurchaseModule from '@/components/purchases/PurchaseModule'
|
|
import ReportsModule from '@/components/reports/ReportsModule'
|
|
import { EmployeeManagement } from '@/components/employees/EmployeeManagement'
|
|
import { AIAssistant } from '@/components/ai/AIAssistant'
|
|
import { ThemeToggle } from '@/components/theme-toggle'
|
|
import { SellerWizard } from '@/components/seller-wizard/SellerWizard'
|
|
|
|
type RoleEmploye = 'VENDEUR' | 'RESPONSABLE' | 'ADMIN'
|
|
type Module =
|
|
| 'HOME'
|
|
| 'CLIENTS'
|
|
| 'PRODUITS'
|
|
| 'FOURNISSEURS'
|
|
| 'ACHATS'
|
|
| 'VENTE'
|
|
| 'RAPPORTS'
|
|
| 'ATELIER'
|
|
| 'UTILISATEURS'
|
|
| 'IA'
|
|
| 'VENDEUR_WIZARD'
|
|
|
|
interface ModuleCard {
|
|
id: Module
|
|
title: string
|
|
description: string
|
|
icon: React.ReactNode
|
|
badge?: string
|
|
color: string
|
|
roles: RoleEmploye[]
|
|
}
|
|
|
|
const modules: ModuleCard[] = [
|
|
{
|
|
id: 'VENDEUR_WIZARD',
|
|
title: 'Vendeur Express',
|
|
description: 'Parcours rapide client, service, recu',
|
|
icon: <PanelTop className="h-8 w-8" />,
|
|
badge: 'Tablette',
|
|
color: 'bg-rose-500',
|
|
roles: ['VENDEUR', 'RESPONSABLE', 'ADMIN'],
|
|
},
|
|
{
|
|
id: 'CLIENTS',
|
|
title: 'Gestion Clients',
|
|
description: 'Fiches clients, mesures de vision, ordonnances',
|
|
icon: <Users className="h-8 w-8" />,
|
|
color: 'bg-blue-500',
|
|
roles: ['VENDEUR', 'RESPONSABLE', 'ADMIN'],
|
|
},
|
|
{
|
|
id: 'PRODUITS',
|
|
title: 'Gestion Produits',
|
|
description: 'Catalogue, stock, images, QR codes',
|
|
icon: <Package className="h-8 w-8" />,
|
|
badge: 'Alertes',
|
|
color: 'bg-emerald-500',
|
|
roles: ['VENDEUR', 'RESPONSABLE', 'ADMIN'],
|
|
},
|
|
{
|
|
id: 'FOURNISSEURS',
|
|
title: 'Fournisseurs',
|
|
description: 'Gestion des fournisseurs et contacts',
|
|
icon: <Truck className="h-8 w-8" />,
|
|
color: 'bg-orange-500',
|
|
roles: ['RESPONSABLE', 'ADMIN'],
|
|
},
|
|
{
|
|
id: 'ACHATS',
|
|
title: 'Achats & Stock',
|
|
description: 'Reception, factures fournisseurs, entrees stock',
|
|
icon: <ShoppingCart className="h-8 w-8" />,
|
|
color: 'bg-purple-500',
|
|
roles: ['RESPONSABLE', 'ADMIN'],
|
|
},
|
|
{
|
|
id: 'VENTE',
|
|
title: 'Point de Vente',
|
|
description: 'Encaissement, facturation, POS',
|
|
icon: <ShoppingCart className="h-8 w-8" />,
|
|
badge: 'Actif',
|
|
color: 'bg-green-500',
|
|
roles: ['VENDEUR', 'RESPONSABLE', 'ADMIN'],
|
|
},
|
|
{
|
|
id: 'ATELIER',
|
|
title: 'Atelier',
|
|
description: 'Montage de lunettes, commandes en cours',
|
|
icon: <Wrench className="h-8 w-8" />,
|
|
badge: 'En cours',
|
|
color: 'bg-amber-500',
|
|
roles: ['VENDEUR', 'RESPONSABLE', 'ADMIN'],
|
|
},
|
|
{
|
|
id: 'RAPPORTS',
|
|
title: 'Rapports',
|
|
description: 'Statistiques, exports Excel/CSV/PDF',
|
|
icon: <BarChart3 className="h-8 w-8" />,
|
|
color: 'bg-cyan-500',
|
|
roles: ['RESPONSABLE', 'ADMIN'],
|
|
},
|
|
{
|
|
id: 'UTILISATEURS',
|
|
title: 'Utilisateurs',
|
|
description: 'Employes, roles et niveaux d acces',
|
|
icon: <UserCog className="h-8 w-8" />,
|
|
color: 'bg-indigo-500',
|
|
roles: ['ADMIN'],
|
|
},
|
|
{
|
|
id: 'IA',
|
|
title: 'Assistant IA',
|
|
description: 'Conseils, priorites et aide a la decision',
|
|
icon: <BrainCircuit className="h-8 w-8" />,
|
|
badge: 'Nouveau',
|
|
color: 'bg-sky-500',
|
|
roles: ['RESPONSABLE', 'ADMIN'],
|
|
},
|
|
]
|
|
|
|
export default function Home() {
|
|
const { data: session, status } = useSession()
|
|
const router = useRouter()
|
|
const [currentModule, setCurrentModule] = useState<Module>('HOME')
|
|
|
|
const currentRole = ((session?.user as any)?.role || 'VENDEUR') as RoleEmploye
|
|
const visibleModules = modules.filter((module) => module.roles.includes(currentRole))
|
|
|
|
useEffect(() => {
|
|
if (status === 'unauthenticated') {
|
|
router.push('/login')
|
|
}
|
|
}, [status, router])
|
|
|
|
useEffect(() => {
|
|
const current = modules.find((module) => module.id === currentModule)
|
|
if (current && !current.roles.includes(currentRole)) {
|
|
setCurrentModule('HOME')
|
|
}
|
|
}, [currentModule, currentRole])
|
|
|
|
if (status === 'loading') {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-background">
|
|
<p className="text-muted-foreground">Chargement...</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (status === 'unauthenticated') return null
|
|
|
|
const moduleInfo = modules.find((module) => module.id === currentModule)
|
|
|
|
const moduleHeader = (
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setCurrentModule('HOME')}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<LayoutDashboard className="h-4 w-4" />
|
|
Retour a l'accueil
|
|
</Button>
|
|
<div className={`flex items-center gap-3 rounded-lg p-4 ${moduleInfo?.color} text-white`}>
|
|
{moduleInfo?.icon}
|
|
<h2 className="text-2xl font-bold">{moduleInfo?.title}</h2>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
const renderModule = () => {
|
|
if (currentModule === 'HOME') {
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="space-y-2 text-center">
|
|
<h1 className="text-4xl font-bold text-foreground">OptiqueStock</h1>
|
|
<p className="text-lg text-muted-foreground">
|
|
Systeme de Gestion de Magasin d'Optique
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{visibleModules.map((module) => (
|
|
<Card
|
|
key={module.id}
|
|
className="group cursor-pointer border-2 transition-all duration-200 hover:scale-105 hover:border-primary hover:shadow-lg"
|
|
onClick={() => setCurrentModule(module.id)}
|
|
>
|
|
<CardHeader>
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<div className={`rounded-lg p-3 ${module.color} text-white`}>{module.icon}</div>
|
|
{module.badge && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
{module.badge}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<CardTitle className="text-lg">{module.title}</CardTitle>
|
|
<CardDescription className="text-sm">{module.description}</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentModule === 'CLIENTS') {
|
|
return (
|
|
<div className="space-y-6">
|
|
{moduleHeader}
|
|
<ClientList />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentModule === 'VENTE') {
|
|
return (
|
|
<div className="space-y-6">
|
|
{moduleHeader}
|
|
<POSModule />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentModule === 'PRODUITS') {
|
|
return (
|
|
<div className="space-y-6">
|
|
{moduleHeader}
|
|
<ProduitListe />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentModule === 'ATELIER') {
|
|
return (
|
|
<div className="space-y-6">
|
|
{moduleHeader}
|
|
<AtelierModule />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentModule === 'FOURNISSEURS') {
|
|
return (
|
|
<div className="space-y-6">
|
|
{moduleHeader}
|
|
<SupplierList />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentModule === 'ACHATS') {
|
|
return (
|
|
<div className="space-y-6">
|
|
{moduleHeader}
|
|
<PurchaseModule />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentModule === 'RAPPORTS') {
|
|
return (
|
|
<div className="space-y-6">
|
|
{moduleHeader}
|
|
<ReportsModule />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentModule === 'UTILISATEURS') {
|
|
return (
|
|
<div className="space-y-6">
|
|
{moduleHeader}
|
|
<EmployeeManagement />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentModule === 'IA') {
|
|
return (
|
|
<div className="space-y-6">
|
|
{moduleHeader}
|
|
<AIAssistant />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentModule === 'VENDEUR_WIZARD') {
|
|
return (
|
|
<div className="space-y-6">
|
|
{moduleHeader}
|
|
<SellerWizard />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground">
|
|
<header className="border-b bg-card shadow-sm">
|
|
<div className="container mx-auto px-4 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="rounded-lg bg-primary p-2">
|
|
<Eye className="h-6 w-6 text-primary-foreground" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold text-foreground">OptiqueStock</h1>
|
|
<p className="text-xs text-muted-foreground">Gestion de Magasin d'Optique</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<ThemeToggle />
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<User className="h-4 w-4" />
|
|
<span className="hidden sm:inline">{session?.user?.name}</span>
|
|
<Badge variant="secondary">{currentRole}</Badge>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => signOut({ redirect: false }).then(() => router.replace('/login'))}
|
|
title="Se deconnecter"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="container mx-auto px-4 py-8">{renderModule()}</main>
|
|
|
|
<footer className="mt-auto border-t bg-card">
|
|
<div className="container mx-auto px-4 py-4">
|
|
<div className="flex items-center justify-center">
|
|
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
|
<span>Version 1.0.0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|