mirror of
https://github.com/R0m1k3/Regisflow.git
synced 2026-10-22 06:38:21 +02:00
Improve application layout and elements for use on different screen sizes
Adds CSS classes and updates component structures to enhance responsiveness. 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/44fdf252-fbbe-4731-95e0-abf005cc2ded.jpg
This commit is contained in:
michaelschal committed
1 parent
fdf86598de
commit
686512516d
5 files changed
+202
-122
No files matched your search
@@ -41,32 +41,32 @@ function DashboardContent() {
|
||||
<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-4">
|
||||
<div className="max-w-7xl mx-auto mobile-padding">
|
||||
<div className="flex justify-between items-center h-14 sm:h-16">
|
||||
<div className="flex items-center gap-2 sm: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 className="p-1.5 sm:p-2 bg-gradient-to-br from-primary to-purple-600 rounded-lg sm:rounded-xl shadow-sm">
|
||||
<Package className="h-5 w-5 sm:h-6 sm: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 className="absolute -inset-1 bg-gradient-to-br from-primary to-purple-600 rounded-lg sm:rounded-xl blur opacity-20 -z-10"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold gradient-text">RegisFlow</h1>
|
||||
<p className="text-sm text-muted-foreground">Registre des ventes des Feux d'artifice</p>
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-lg sm:text-xl font-bold gradient-text truncate">RegisFlow</h1>
|
||||
<p className="text-xs sm:text-sm text-muted-foreground hidden sm:block">Registre des ventes des Feux d'artifice</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
{/* Store Selector for Admin */}
|
||||
{isAdmin && !isLoadingStores && (
|
||||
<div className="flex items-center gap-3 p-2 bg-muted/50 rounded-lg border border-border/50">
|
||||
<div className="hidden sm:flex items-center gap-2 sm:gap-3 p-1.5 sm: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 border-0 bg-transparent focus:ring-0">
|
||||
<SelectValue placeholder="Sélectionner un magasin" />
|
||||
<SelectTrigger className="w-32 sm:w-48 border-0 bg-transparent focus:ring-0 text-sm">
|
||||
<SelectValue placeholder="Magasin" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{stores.map((store) => (
|
||||
@@ -81,14 +81,14 @@ function DashboardContent() {
|
||||
|
||||
{/* Current Store Display for Non-Admin */}
|
||||
{!isAdmin && selectedStore && (
|
||||
<div className="flex items-center gap-2 px-3 py-2 bg-muted/50 rounded-lg border border-border/50">
|
||||
<div className="hidden sm:flex items-center gap-2 px-2 sm:px-3 py-1.5 sm: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="flex items-center gap-3">
|
||||
<div className="text-right">
|
||||
<div className="flex items-center gap-1 sm:gap-3">
|
||||
<div className="text-right hidden sm:block">
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{user?.firstName} {user?.lastName}
|
||||
</p>
|
||||
@@ -101,10 +101,10 @@ function DashboardContent() {
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleLogout}
|
||||
className="border-2 hover:bg-destructive hover:text-destructive-foreground hover:border-destructive smooth-transition"
|
||||
className="border-2 hover:bg-destructive hover:text-destructive-foreground hover:border-destructive smooth-transition touch-friendly-button"
|
||||
>
|
||||
<LogOut className="h-4 w-4 mr-2" />
|
||||
Déconnexion
|
||||
<LogOut className="h-4 w-4 sm:mr-2" />
|
||||
<span className="hidden sm:inline">Déconnexion</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,38 +113,38 @@ function DashboardContent() {
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<main className="max-w-7xl mx-auto mobile-padding py-4 sm:py-6 lg:py-8">
|
||||
{selectedStore && (
|
||||
<div className="mb-8 slide-in-up">
|
||||
<div className="mb-6 sm:mb-8 slide-in-up">
|
||||
<Card className="modern-card-elevated overflow-hidden">
|
||||
<CardContent className="pt-6">
|
||||
<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" />
|
||||
<CardContent className="mobile-card-content">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
|
||||
<div className="relative flex-shrink-0">
|
||||
<div className="p-3 sm:p-4 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl sm:rounded-2xl shadow-lg">
|
||||
<Building2 className="h-6 w-6 sm:h-8 sm: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 className="absolute -inset-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl sm:rounded-2xl blur opacity-20 -z-10"></div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">{selectedStore.name}</h2>
|
||||
<div className="space-y-1">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-foreground mb-2 truncate">{selectedStore.name}</h2>
|
||||
<div className="space-y-1 sm:space-y-2">
|
||||
{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 className="text-muted-foreground flex items-start gap-2 text-sm sm:text-base">
|
||||
<span className="w-4 h-4 flex items-center justify-center flex-shrink-0 mt-0.5">📍</span>
|
||||
<span className="break-words">{selectedStore.address}</span>
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-6 text-sm">
|
||||
<div className="flex flex-col sm:flex-row gap-2 sm: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 className="w-4 h-4 flex items-center justify-center flex-shrink-0">📞</span>
|
||||
<span className="break-all">{selectedStore.phone}</span>
|
||||
</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 className="w-4 h-4 flex items-center justify-center flex-shrink-0">✉️</span>
|
||||
<span className="break-all">{selectedStore.email}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -157,29 +157,32 @@ function DashboardContent() {
|
||||
)}
|
||||
|
||||
<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`}>
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="mobile-form-responsive">
|
||||
<TabsList className={`grid w-full ${canAccessAdmin ? 'grid-cols-3' : 'grid-cols-2'} max-w-full sm:max-w-2xl h-12 sm:h-14 bg-muted/50 p-1.5 sm:p-2 rounded-xl sm: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"
|
||||
className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
|
||||
>
|
||||
<Package className="h-5 w-5 mr-2" />
|
||||
Nouvelle Vente
|
||||
<Package className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
|
||||
<span className="hidden sm:inline">Nouvelle Vente</span>
|
||||
<span className="sm:hidden">Vente</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="history"
|
||||
className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
|
||||
className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
|
||||
>
|
||||
<History className="h-5 w-5 mr-2" />
|
||||
Historique
|
||||
<History className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
|
||||
<span className="hidden sm:inline">Historique</span>
|
||||
<span className="sm:hidden">Liste</span>
|
||||
</TabsTrigger>
|
||||
{canAccessAdmin && (
|
||||
<TabsTrigger
|
||||
value="admin"
|
||||
className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
|
||||
className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
|
||||
>
|
||||
<Settings className="h-5 w-5 mr-2" />
|
||||
Administration
|
||||
<Settings className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
|
||||
<span className="hidden sm:inline">Administration</span>
|
||||
<span className="sm:hidden">Admin</span>
|
||||
</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
|
||||
+16
-16
@@ -51,7 +51,7 @@ export default function Login() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center gradient-bg p-4 relative overflow-hidden">
|
||||
<div className="min-h-screen flex items-center justify-center gradient-bg mobile-padding py-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>
|
||||
@@ -59,33 +59,33 @@ export default function Login() {
|
||||
</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">
|
||||
<CardHeader className="text-center space-y-4 sm:space-y-6 mobile-card-header">
|
||||
<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 className="p-3 sm:p-4 bg-gradient-to-br from-primary to-purple-600 rounded-xl sm:rounded-2xl shadow-lg">
|
||||
<Sparkles className="h-6 w-6 sm:h-8 sm: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 className="absolute -inset-2 bg-gradient-to-br from-primary to-purple-600 rounded-xl sm:rounded-2xl blur opacity-20 -z-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<CardTitle className="text-3xl font-bold gradient-text">RegisFlow</CardTitle>
|
||||
<p className="text-muted-foreground text-lg">Registre des ventes des Feux d'artifice</p>
|
||||
<CardTitle className="responsive-title font-bold gradient-text">RegisFlow</CardTitle>
|
||||
<p className="text-muted-foreground responsive-subtitle">Registre des ventes des Feux d'artifice</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<CardContent className="mobile-card-content space-y-4 sm:space-y-6">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="mobile-form-responsive">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-3">
|
||||
<FormLabel className="text-sm font-semibold text-foreground">Nom d'utilisateur</FormLabel>
|
||||
<FormItem className="space-y-2 sm:space-y-3">
|
||||
<FormLabel className="responsive-body font-semibold text-foreground">Nom d'utilisateur</FormLabel>
|
||||
<FormControl>
|
||||
<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"
|
||||
className="touch-friendly responsive-body border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -97,13 +97,13 @@ export default function Login() {
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem className="space-y-3">
|
||||
<FormLabel className="text-sm font-semibold text-foreground">Mot de passe</FormLabel>
|
||||
<FormItem className="space-y-2 sm:space-y-3">
|
||||
<FormLabel className="responsive-body font-semibold text-foreground">Mot de passe</FormLabel>
|
||||
<FormControl>
|
||||
<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"
|
||||
className="touch-friendly responsive-body border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -113,7 +113,7 @@ export default function Login() {
|
||||
/>
|
||||
<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"
|
||||
className="w-full touch-friendly responsive-body 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" />
|
||||
|
||||
Reference in new issue
Block a user