Michael/Regisflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Regisflow.git synced 2026-10-21 06:08:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Enhance the user interface to provide a more modern and intuitive experience

Browse Source 
Update UI components for improved aesthetics and user experience, including new color palettes and styling.

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/75b569d4-1b21-43d8-b5b1-0816d59edebd.jpg
This commit is contained in:
michaelschal committed 2025-07-09 19:38:37 +00:00
1 parent 1d46228fac
commit 9a901b574f
4 files changed
+418 -169
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/pages/Dashboard.tsx
+113 -65
View File
@@ -8,7 +8,7 @@ import { StoreProvider, useStoreContext } from "@/hooks/useStoreContext";
import NewSaleForm from "@/components/NewSaleForm";
import SalesHistory from "@/components/SalesHistory";
import Administration from "@/components/Administration";
import { Package, History, Settings, LogOut, User, Building2 } from "lucide-react";
import { Package, History, Settings, LogOut, User, Building2, Shield } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
function DashboardContent() {
@@ -38,31 +38,34 @@ function DashboardContent() {
const isAdmin = user?.role === "admin";
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="bg-white shadow-sm border-b">
<div className="min-h-screen bg-background">
{/* Modern Header */}
<header className="sticky top-0 z-50 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<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 className="flex items-center gap-4">
<div className="relative">
<div className="p-2 bg-gradient-to-br from-primary to-purple-600 rounded-xl shadow-sm">
<Package className="h-6 w-6 text-white" />
</div>
<div className="absolute -inset-1 bg-gradient-to-br from-primary to-purple-600 rounded-xl blur opacity-20 -z-10"></div>
</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>
<h1 className="text-xl font-bold gradient-text">Registre des Ventes</h1>
<p className="text-sm text-muted-foreground">Gestion moderne des feux d'artifice</p>
</div>
</div>
<div className="flex items-center gap-4">
{/* Store Selector for Admin */}
{isAdmin && !isLoadingStores && (
<div className="flex items-center gap-2">
<Building2 className="h-4 w-4 text-gray-500" />
<div className="flex items-center gap-3 p-2 bg-muted/50 rounded-lg border border-border/50">
<Building2 className="h-4 w-4 text-muted-foreground" />
<Select
value={selectedStoreId?.toString() || ""}
onValueChange={(value) => setSelectedStoreId(parseInt(value))}
>
<SelectTrigger className="w-48">
<SelectTrigger className="w-48 border-0 bg-transparent focus:ring-0">
<SelectValue placeholder="Sélectionner un magasin" />
</SelectTrigger>
<SelectContent>
@@ -78,22 +81,32 @@ function DashboardContent() {
{/* Current Store Display for Non-Admin */}
{!isAdmin && selectedStore && (
<div className="flex items-center gap-2 text-sm text-gray-600">
<Building2 className="h-4 w-4" />
<span>{selectedStore.name}</span>
<div className="flex items-center gap-2 px-3 py-2 bg-muted/50 rounded-lg border border-border/50">
<Building2 className="h-4 w-4 text-primary" />
<span className="text-sm font-medium">{selectedStore.name}</span>
</div>
)}
<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 className="flex items-center gap-3">
<div className="text-right">
<p className="text-sm font-semibold text-foreground">
{user?.firstName} {user?.lastName}
</p>
<div className="flex items-center gap-1">
{user?.role === 'admin' && <Shield className="h-3 w-3 text-primary" />}
<p className="text-xs text-muted-foreground capitalize">{user?.role}</p>
</div>
</div>
<Button
variant="outline"
size="sm"
onClick={handleLogout}
className="border-2 hover:bg-destructive hover:text-destructive-foreground hover:border-destructive smooth-transition"
>
<LogOut className="h-4 w-4 mr-2" />
Déconnexion
</Button>
</div>
<Button variant="outline" size="sm" onClick={handleLogout}>
<LogOut className="h-4 w-4 mr-2" />
Déconnexion
</Button>
</div>
</div>
</div>
@@ -102,20 +115,38 @@ function DashboardContent() {
{/* Main Content */}
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{selectedStore && (
<div className="mb-6">
<Card>
<div className="mb-8 slide-in-up">
<Card className="modern-card-elevated overflow-hidden">
<CardContent className="pt-6">
<div className="flex items-center gap-4">
<div className="p-3 bg-blue-100 rounded-lg">
<Building2 className="h-6 w-6 text-blue-600" />
<div className="flex items-center gap-6">
<div className="relative">
<div className="p-4 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl shadow-lg">
<Building2 className="h-8 w-8 text-white" />
</div>
<div className="absolute -inset-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl blur opacity-20 -z-10"></div>
</div>
<div>
<h2 className="text-lg font-semibold text-gray-900">{selectedStore.name}</h2>
<div className="text-sm text-gray-600">
{selectedStore.address && <p>{selectedStore.address}</p>}
<div className="flex gap-4">
{selectedStore.phone && <span>📞 {selectedStore.phone}</span>}
{selectedStore.email && <span>✉️ {selectedStore.email}</span>}
<div className="flex-1">
<h2 className="text-2xl font-bold text-foreground mb-2">{selectedStore.name}</h2>
<div className="space-y-1">
{selectedStore.address && (
<p className="text-muted-foreground flex items-center gap-2">
<span className="w-4 h-4 flex items-center justify-center">📍</span>
{selectedStore.address}
</p>
)}
<div className="flex gap-6 text-sm">
{selectedStore.phone && (
<span className="text-muted-foreground flex items-center gap-2">
<span className="w-4 h-4 flex items-center justify-center">📞</span>
{selectedStore.phone}
</span>
)}
{selectedStore.email && (
<span className="text-muted-foreground flex items-center gap-2">
<span className="w-4 h-4 flex items-center justify-center">✉️</span>
{selectedStore.email}
</span>
)}
</div>
</div>
</div>
@@ -125,38 +156,55 @@ function DashboardContent() {
</div>
)}
<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
<div className="fade-in">
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-8">
<TabsList className={`grid w-full ${canAccessAdmin ? 'grid-cols-3' : 'grid-cols-2'} max-w-2xl h-14 bg-muted/50 p-2 rounded-2xl border border-border/50`}>
<TabsTrigger
value="new-sale"
className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
>
<Package className="h-5 w-5 mr-2" />
Nouvelle Vente
</TabsTrigger>
)}
</TabsList>
<TabsTrigger
value="history"
className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
>
<History className="h-5 w-5 mr-2" />
Historique
</TabsTrigger>
{canAccessAdmin && (
<TabsTrigger
value="admin"
className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
>
<Settings className="h-5 w-5 mr-2" />
Administration
</TabsTrigger>
)}
</TabsList>
<TabsContent value="new-sale">
<NewSaleForm />
</TabsContent>
<TabsContent value="history">
<SalesHistory canDelete={canDeleteSales} />
</TabsContent>
{canAccessAdmin && (
<TabsContent value="admin">
<Administration />
<TabsContent value="new-sale" className="mt-8">
<div className="slide-in-up">
<NewSaleForm />
</div>
</TabsContent>
)}
</Tabs>
<TabsContent value="history" className="mt-8">
<div className="slide-in-up">
<SalesHistory canDelete={canDeleteSales} />
</div>
</TabsContent>
{canAccessAdmin && (
<TabsContent value="admin" className="mt-8">
<div className="slide-in-up">
<Administration />
</div>
</TabsContent>
)}
</Tabs>
</div>
</main>
</div>
);
client/src/pages/Login.tsx
+62 -29
View File
@@ -51,28 +51,43 @@ export default function Login() {
};
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 className="min-h-screen flex items-center justify-center gradient-bg p-4 relative overflow-hidden">
{/* Background decoration */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-white/20 to-white/5 rounded-full blur-3xl"></div>
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-br from-white/20 to-white/5 rounded-full blur-3xl"></div>
</div>
<Card className="w-full max-w-md modern-card-elevated backdrop-blur-sm bg-white/90 border-white/20 slide-in-up relative z-10">
<CardHeader className="text-center space-y-6 pb-8">
<div className="flex justify-center">
<div className="relative">
<div className="p-4 bg-gradient-to-br from-primary to-purple-600 rounded-2xl shadow-lg">
<Sparkles className="h-8 w-8 text-white" />
</div>
<div className="absolute -inset-2 bg-gradient-to-br from-primary to-purple-600 rounded-2xl blur opacity-20 -z-10"></div>
</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>
<div className="space-y-2">
<CardTitle className="text-3xl font-bold gradient-text">Registre des Ventes</CardTitle>
<p className="text-muted-foreground text-lg">Gestion moderne des feux d'artifice</p>
</div>
</CardHeader>
<CardContent>
<CardContent className="space-y-6">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Nom d'utilisateur</FormLabel>
<FormItem className="space-y-3">
<FormLabel className="text-sm font-semibold text-foreground">Nom d'utilisateur</FormLabel>
<FormControl>
<Input placeholder="Votre nom d'utilisateur" {...field} />
<Input
placeholder="Votre nom d'utilisateur"
className="h-12 text-base border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
@@ -82,35 +97,53 @@ export default function Login() {
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Mot de passe</FormLabel>
<FormItem className="space-y-3">
<FormLabel className="text-sm font-semibold text-foreground">Mot de passe</FormLabel>
<FormControl>
<Input type="password" placeholder="Votre mot de passe" {...field} />
<Input
type="password"
placeholder="Votre mot de passe"
className="h-12 text-base border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition"
{...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
type="submit"
className="w-full h-12 text-base font-semibold bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 hover:shadow-lg hover:scale-[1.02] smooth-transition"
disabled={isLoggingIn}
>
<LogIn className="h-5 w-5 mr-2" />
{isLoggingIn ? "Connexion en cours..." : "Se connecter"}
</Button>
</form>
</Form>
{credentialsStatus?.showDefaultCredentials && (
<Alert className="mt-6">
<Info className="h-4 w-4" />
<Alert className="status-info border-2 rounded-xl backdrop-blur-sm bg-blue-50/80 fade-in">
<Info className="h-5 w-5" />
<AlertDescription>
<div className="space-y-2">
<p className="font-medium">Compte administrateur par défaut :</p>
<div className="text-sm space-y-1">
<p><strong>Utilisateur :</strong> admin</p>
<p><strong>Mot de passe :</strong> admin123</p>
<div className="space-y-3">
<p className="font-semibold text-blue-900">Compte administrateur par défaut</p>
<div className="bg-white/60 p-3 rounded-lg border border-blue-200/50 space-y-2">
<div className="flex justify-between items-center">
<span className="text-sm font-medium text-blue-700">Utilisateur :</span>
<code className="text-sm font-mono bg-blue-100 px-2 py-1 rounded text-blue-800">admin</code>
</div>
<div className="flex justify-between items-center">
<span className="text-sm font-medium text-blue-700">Mot de passe :</span>
<code className="text-sm font-mono bg-blue-100 px-2 py-1 rounded text-blue-800">admin123</code>
</div>
</div>
<div className="flex items-start gap-2 p-3 bg-orange-50/80 border border-orange-200/50 rounded-lg">
<div className="text-orange-500 mt-0.5">⚠️</div>
<p className="text-xs text-orange-700 leading-relaxed">
<strong>Important :</strong> Changez ce mot de passe après votre première connexion pour sécuriser l'application.
</p>
</div>
<p className="text-xs text-orange-600 mt-2">
⚠️ Changez ce mot de passe après votre première connexion pour sécuriser l'application.
</p>
</div>
</AlertDescription>
</Alert>