Michael/Priceflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Priceflow.git synced 2026-10-11 17:29:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement initial application structure with routing, authentication flow, and responsive layout.

Browse Source
This commit is contained in:
Michael committed 2025-12-01 11:32:12 +01:00
1 parent 7592c2781e
commit f27a75d9d6
3 files changed
+157 -154
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/App.jsx
+2 -5
View File
@@ -55,12 +55,9 @@ function PublicRoute({ children }) {
}
function AppRoutes() {
const { theme, toggleTheme } = useTheme();
const { isAuthenticated } = useAuth();
return (
<>
<Toaster position="bottom-right" theme={theme} />
<Toaster position="bottom-right" />
<Routes>
<Route
path="/login"
@@ -74,7 +71,7 @@ function AppRoutes() {
path="/*"
element={
<ProtectedRoute>
<Layout theme={theme} toggleTheme={toggleTheme}>
<Layout>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/search" element={<Search />} />
frontend/src/components/layout/Layout.jsx
+121 -98
View File
@@ -1,13 +1,13 @@
import React, { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { LayoutDashboard, Search, TrendingUp, BookOpen, Moon, Sun, Menu, LogOut, Shield, ShoppingBag } from 'lucide-react';
import { LayoutDashboard, Search, TrendingUp, BookOpen, Menu, LogOut, Shield, ShoppingBag } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { cn } from '@/lib/utils';
import { useAuth } from '@/hooks/use-auth';
const Layout = ({ children, theme, toggleTheme }) => {
const Layout = ({ children }) => {
const { t } = useTranslation();
const location = useLocation();
const navigate = useNavigate();
@@ -19,6 +19,7 @@ const Layout = ({ children, theme, toggleTheme }) => {
navigate('/login');
};
// Main navigation items (without admin)
const navItems = [
{ icon: LayoutDashboard, label: t('nav.dashboard'), path: '/' },
{ icon: Search, label: t('nav.search') || 'Recherche', path: '/search' },
@@ -27,25 +28,23 @@ const Layout = ({ children, theme, toggleTheme }) => {
{ icon: BookOpen, label: 'Catalogues', path: '/catalogues' },
];
// Add admin link for admin users
if (isAdmin) {
navItems.push({ icon: Shield, label: 'Administration', path: '/admin' });
}
return (
<div className="min-h-screen bg-background font-sans antialiased">
{/* Sidebar */}
<aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r bg-card hidden md:block">
<div className="min-h-screen bg-background">
{/* Desktop Sidebar */}
<aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r bg-white hidden md:block">
<div className="flex h-full flex-col">
<div className="flex h-14 items-center border-b px-6">
<Link to="/" className="flex items-center gap-2 font-semibold">
<img src="/logo.png" alt="PriceFlow Logo" className="h-8 w-8 rounded-lg" />
<span className="text-xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
{/* Logo */}
<div className="flex h-16 items-center border-b px-6">
<Link to="/" className="flex items-center gap-3">
<img src="/logo.png" alt="PriceFlow" className="h-8 w-8" />
<span className="text-lg font-semibold text-foreground">
PriceFlow
</span>
</Link>
</div>
<nav className="flex-1 space-y-1 p-4">
{/* Main Navigation */}
<nav className="flex-1 p-3 space-y-1">
{navItems.map((item) => {
const Icon = item.icon;
const isActive = location.pathname === item.path;
@@ -53,55 +52,68 @@ const Layout = ({ children, theme, toggleTheme }) => {
<Link key={item.path} to={item.path}>
<Button
variant={isActive ? "secondary" : "ghost"}
className={cn("w-full justify-start gap-2", isActive && "bg-secondary")}
className={cn(
"w-full justify-start gap-3 h-10 px-3",
isActive && "bg-secondary font-medium"
)}
>
<Icon className="h-4 w-4" />
{item.label}
<span className="text-sm">{item.label}</span>
</Button>
</Link>
);
})}
</nav>
<div className="border-t p-4 space-y-2">
{/* User info */}
<div className="px-4 py-2 text-sm text-muted-foreground">
<span className="font-medium text-foreground">{user?.username}</span>
{isAdmin && <span className="ml-2 text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">Admin</span>}
{/* Bottom Section: Admin + User + Logout */}
<div className="border-t">
{/* Admin Button (separated) */}
{isAdmin && (
<div className="p-3 border-b">
<Link to="/admin">
<Button
variant={location.pathname === '/admin' ? "secondary" : "ghost"}
className={cn(
"w-full justify-start gap-3 h-10 px-3",
location.pathname === '/admin' && "bg-secondary font-medium"
)}
>
<Shield className="h-4 w-4" />
<span className="text-sm">Administration</span>
</Button>
</Link>
</div>
)}
{/* User Info */}
<div className="p-3 border-b">
<div className="px-3 py-2 text-xs text-muted-foreground">
<div className="font-medium text-foreground text-sm">{user?.username}</div>
{isAdmin && (
<div className="mt-1 inline-block text-xs bg-secondary px-2 py-0.5 rounded">
Administrateur
</div>
)}
</div>
</div>
{/* Logout */}
<div className="p-3">
<Button
variant="ghost"
onClick={handleLogout}
className="w-full justify-start gap-3 h-10 px-3 text-muted-foreground hover:text-foreground"
>
<LogOut className="h-4 w-4" />
<span className="text-sm">Déconnexion</span>
</Button>
</div>
{/* Theme toggle */}
<Button
variant="ghost"
size="icon"
onClick={toggleTheme}
className="w-full justify-start gap-2 px-4"
>
{theme === 'dark' ? (
<>
<Sun className="h-4 w-4" />
<span>{t('nav.lightMode')}</span>
</>
) : (
<>
<Moon className="h-4 w-4" />
<span>{t('nav.darkMode')}</span>
</>
)}
</Button>
{/* Logout button */}
<Button
variant="ghost"
onClick={handleLogout}
className="w-full justify-start gap-2 px-4 text-destructive hover:text-destructive hover:bg-destructive/10"
>
<LogOut className="h-4 w-4" />
<span>Déconnexion</span>
</Button>
</div>
</div>
</aside>
{/* Mobile Header */}
<header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-6 md:hidden">
<header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b bg-white px-4 md:hidden">
<Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
<SheetTrigger asChild>
<Button variant="ghost" size="icon">
@@ -110,13 +122,14 @@ const Layout = ({ children, theme, toggleTheme }) => {
</SheetTrigger>
<SheetContent side="left" className="w-64 p-0">
<div className="flex h-full flex-col">
<div className="flex h-14 items-center border-b px-6">
<img src="/logo.svg" alt="PriceFlow Logo" className="h-8 w-8 mr-2 rounded-lg" />
<span className="text-xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
PriceFlow
</span>
{/* Mobile Logo */}
<div className="flex h-16 items-center border-b px-6">
<img src="/logo.png" alt="PriceFlow" className="h-8 w-8 mr-3" />
<span className="text-lg font-semibold">PriceFlow</span>
</div>
<nav className="flex-1 space-y-1 p-4">
{/* Mobile Navigation */}
<nav className="flex-1 p-3 space-y-1">
{navItems.map((item) => {
const Icon = item.icon;
const isActive = location.pathname === item.path;
@@ -124,63 +137,73 @@ const Layout = ({ children, theme, toggleTheme }) => {
<Link key={item.path} to={item.path} onClick={() => setMobileMenuOpen(false)}>
<Button
variant={isActive ? "secondary" : "ghost"}
className={cn("w-full justify-start gap-2", isActive && "bg-secondary")}
className={cn(
"w-full justify-start gap-3 h-10 px-3",
isActive && "bg-secondary font-medium"
)}
>
<Icon className="h-4 w-4" />
{item.label}
<span className="text-sm">{item.label}</span>
</Button>
</Link>
);
})}
</nav>
<div className="border-t p-4 space-y-2">
<div className="px-4 py-2 text-sm text-muted-foreground">
<span className="font-medium text-foreground">{user?.username}</span>
{isAdmin && <span className="ml-2 text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">Admin</span>}
{/* Mobile Bottom Section */}
<div className="border-t">
{isAdmin && (
<div className="p-3 border-b">
<Link to="/admin" onClick={() => setMobileMenuOpen(false)}>
<Button
variant={location.pathname === '/admin' ? "secondary" : "ghost"}
className={cn(
"w-full justify-start gap-3 h-10 px-3",
location.pathname === '/admin' && "bg-secondary font-medium"
)}
>
<Shield className="h-4 w-4" />
<span className="text-sm">Administration</span>
</Button>
</Link>
</div>
)}
<div className="p-3 border-b">
<div className="px-3 py-2 text-xs text-muted-foreground">
<div className="font-medium text-foreground text-sm">{user?.username}</div>
{isAdmin && (
<div className="mt-1 inline-block text-xs bg-secondary px-2 py-0.5 rounded">
Administrateur
</div>
)}
</div>
</div>
<div className="p-3">
<Button
variant="ghost"
onClick={() => { handleLogout(); setMobileMenuOpen(false); }}
className="w-full justify-start gap-3 h-10 px-3 text-muted-foreground hover:text-foreground"
>
<LogOut className="h-4 w-4" />
<span className="text-sm">Déconnexion</span>
</Button>
</div>
<Button
variant="ghost"
onClick={toggleTheme}
className="w-full justify-start gap-2"
>
{theme === 'dark' ? (
<>
<Sun className="h-4 w-4" />
<span>{t('nav.lightMode')}</span>
</>
) : (
<>
<Moon className="h-4 w-4" />
<span>{t('nav.darkMode')}</span>
</>
)}
</Button>
<Button
variant="ghost"
onClick={() => { handleLogout(); setMobileMenuOpen(false); }}
className="w-full justify-start gap-2 text-destructive hover:text-destructive"
>
<LogOut className="h-4 w-4" />
<span>Déconnexion</span>
</Button>
</div>
</div>
</SheetContent>
</Sheet>
<Link to="/" className="flex items-center gap-2 font-semibold">
<img src="/logo.png" alt="PriceFlow Logo" className="h-6 w-6 rounded" />
PriceFlow
<Link to="/" className="flex items-center gap-2">
<img src="/logo.png" alt="PriceFlow" className="h-7 w-7" />
<span className="font-semibold">PriceFlow</span>
</Link>
<div className="ml-auto flex items-center gap-2">
<Button variant="ghost" size="icon" onClick={toggleTheme}>
{theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
</Button>
</div>
</header>
{/* Main Content */}
<main className="flex-1 md:pl-64">
<div className="container py-6">
<main className="md:pl-64">
<div className="container max-w-7xl py-6 px-4">
{children}
</div>
</main>
frontend/src/index.css
+34 -51
View File
@@ -4,65 +4,36 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
/* Clean minimalist monochrome theme */
--background: 0 0% 100%; /* Pure white */
--foreground: 0 0% 10%; /* Very dark gray for text */
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--card: 0 0% 99%; /* Off-white for cards */
--card-foreground: 0 0% 10%; /* Dark gray text on cards */
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--popover: 0 0% 100%; /* White for popovers */
--popover-foreground: 0 0% 10%; /* Dark gray text */
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--primary: 0 0% 15%; /* Dark gray for primary actions */
--primary-foreground: 0 0% 100%; /* White text on primary */
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--secondary: 0 0% 97%; /* Light gray background */
--secondary-foreground: 0 0% 15%; /* Dark gray text */
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--muted: 0 0% 96%; /* Very light gray */
--muted-foreground: 0 0% 45%; /* Medium gray for muted text */
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--accent: 0 0% 95%; /* Accent gray */
--accent-foreground: 0 0% 15%; /* Dark text on accent */
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--destructive: 0 0% 30%; /* Dark gray for destructive (instead of red) */
--destructive-foreground: 0 0% 100%; /* White text */
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--border: 0 0% 90%; /* Light gray borders */
--input: 0 0% 90%; /* Light gray input borders */
--ring: 0 0% 60%; /* Medium gray focus ring */
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--radius: 0.375rem; /* Slightly reduced radius for cleaner look */
}
}
@@ -71,6 +42,18 @@
@apply border-border;
}
body {
@apply bg-background text-foreground;
@apply bg-background text-foreground antialiased;
font-feature-settings: "rlig" 1, "calt" 1;
}
/* Ensure smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Clean focus states */
:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
}