refactor: extract DashboardSidebar component to reduce code duplication
- Create shared DashboardSidebar component in components/ui/ - Refactor employe/layout.tsx to use shared component - Refactor admin/Sidebar.tsx to use shared component - Reduces duplicated lines from ~60% to minimal 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
671d60738a
commit
b41602b35c
|
|
@ -2,15 +2,28 @@
|
|||
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect } from "react";
|
||||
import { Loading } from "@/components/ui/Loading";
|
||||
import toast from "react-hot-toast";
|
||||
import { Ticket, BarChart3, Menu, X } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Logo from "@/components/Logo";
|
||||
import { Ticket, BarChart3 } from "lucide-react";
|
||||
import DashboardSidebar from "@/components/ui/DashboardSidebar";
|
||||
import UserDropdown from "@/components/UserDropdown";
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
label: "Dashboard",
|
||||
href: "/employe/dashboard",
|
||||
icon: <BarChart3 className="w-5 h-5" />,
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
label: "Validation des Tickets",
|
||||
href: "/employe/verification",
|
||||
icon: <Ticket className="w-5 h-5" />,
|
||||
color: "emerald",
|
||||
},
|
||||
];
|
||||
|
||||
export default function EmployeLayout({
|
||||
children,
|
||||
}: {
|
||||
|
|
@ -18,8 +31,6 @@ export default function EmployeLayout({
|
|||
}) {
|
||||
const { user, isAuthenticated, isLoading, logout } = useAuth();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && !isAuthenticated) {
|
||||
|
|
@ -51,102 +62,15 @@ export default function EmployeLayout({
|
|||
return null;
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
label: "Dashboard",
|
||||
href: "/employe/dashboard",
|
||||
icon: <BarChart3 className="w-5 h-5" />,
|
||||
color: "green",
|
||||
},
|
||||
{
|
||||
label: "Validation des Tickets",
|
||||
href: "/employe/verification",
|
||||
icon: <Ticket className="w-5 h-5" />,
|
||||
color: "emerald",
|
||||
},
|
||||
];
|
||||
|
||||
const isActive = (href: string) => pathname === href;
|
||||
|
||||
const getActiveStyles = (color: string) => {
|
||||
const styles: Record<string, string> = {
|
||||
green: "bg-gradient-to-r from-green-600 to-green-700 text-white shadow-lg shadow-green-500/30",
|
||||
emerald: "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-500/30",
|
||||
};
|
||||
return styles[color] || styles.green;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-gray-50">
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-xl bg-white shadow-lg hover:bg-gray-50 border border-gray-100"
|
||||
>
|
||||
{isOpen ? (
|
||||
<X className="w-6 h-6 text-gray-600" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6 text-gray-600" />
|
||||
)}
|
||||
</button>
|
||||
<DashboardSidebar
|
||||
navItems={navItems}
|
||||
title="Thé Tip Top"
|
||||
subtitle="Espace Employé"
|
||||
/>
|
||||
|
||||
{/* Overlay for mobile */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-30"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`
|
||||
fixed top-0 left-0 h-full bg-[#faf8f5] shadow-xl z-40 transition-transform duration-300 ease-in-out border-r border-gray-200
|
||||
${isOpen ? "translate-x-0" : "-translate-x-full"}
|
||||
lg:translate-x-0 lg:static
|
||||
w-72
|
||||
`}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Logo/Header */}
|
||||
<div className="p-6 border-b border-gray-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<Logo size="md" showText={false} />
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-[#1e3a5f]">Thé Tip Top</h2>
|
||||
<p className="text-sm text-gray-500">Espace Employé</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4 space-y-2">
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 mb-3">Menu Principal</p>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200
|
||||
${
|
||||
isActive(item.href)
|
||||
? getActiveStyles(item.color)
|
||||
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{item.icon}
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="bg-[#faf8f5] shadow-sm border-b border-gray-200 px-6 py-3">
|
||||
<div className="flex items-center justify-end">
|
||||
<UserDropdown
|
||||
|
|
@ -158,7 +82,6 @@ export default function EmployeLayout({
|
|||
</div>
|
||||
</header>
|
||||
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 overflow-auto">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,154 +1,60 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Ticket,
|
||||
BarChart3,
|
||||
Gift,
|
||||
Menu,
|
||||
X,
|
||||
Trophy,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import Logo from "@/components/Logo";
|
||||
import DashboardSidebar from "@/components/ui/DashboardSidebar";
|
||||
|
||||
interface NavItem {
|
||||
label: string;
|
||||
href: string;
|
||||
icon: React.ReactNode;
|
||||
color: string;
|
||||
}
|
||||
const navItems = [
|
||||
{
|
||||
label: "Dashboard",
|
||||
href: "/admin/dashboard",
|
||||
icon: <LayoutDashboard className="w-5 h-5" />,
|
||||
color: "darkblue",
|
||||
},
|
||||
{
|
||||
label: "Utilisateurs",
|
||||
href: "/admin/utilisateurs",
|
||||
icon: <Users className="w-5 h-5" />,
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
label: "Tickets",
|
||||
href: "/admin/tickets",
|
||||
icon: <Ticket className="w-5 h-5" />,
|
||||
color: "emerald",
|
||||
},
|
||||
{
|
||||
label: "Lots & Prix",
|
||||
href: "/admin/lots",
|
||||
icon: <Gift className="w-5 h-5" />,
|
||||
color: "purple",
|
||||
},
|
||||
{
|
||||
label: "Données Marketing",
|
||||
href: "/admin/marketing-data",
|
||||
icon: <BarChart3 className="w-5 h-5" />,
|
||||
color: "indigo",
|
||||
},
|
||||
{
|
||||
label: "Tirages",
|
||||
href: "/admin/tirages",
|
||||
icon: <Trophy className="w-5 h-5" />,
|
||||
color: "amber",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
label: "Dashboard",
|
||||
href: "/admin/dashboard",
|
||||
icon: <LayoutDashboard className="w-5 h-5" />,
|
||||
color: "darkblue",
|
||||
},
|
||||
{
|
||||
label: "Utilisateurs",
|
||||
href: "/admin/utilisateurs",
|
||||
icon: <Users className="w-5 h-5" />,
|
||||
color: "blue",
|
||||
},
|
||||
{
|
||||
label: "Tickets",
|
||||
href: "/admin/tickets",
|
||||
icon: <Ticket className="w-5 h-5" />,
|
||||
color: "emerald",
|
||||
},
|
||||
{
|
||||
label: "Lots & Prix",
|
||||
href: "/admin/lots",
|
||||
icon: <Gift className="w-5 h-5" />,
|
||||
color: "purple",
|
||||
},
|
||||
{
|
||||
label: "Données Marketing",
|
||||
href: "/admin/marketing-data",
|
||||
icon: <BarChart3 className="w-5 h-5" />,
|
||||
color: "indigo",
|
||||
},
|
||||
{
|
||||
label: "Tirages",
|
||||
href: "/admin/tirages",
|
||||
icon: <Trophy className="w-5 h-5" />,
|
||||
color: "amber",
|
||||
},
|
||||
];
|
||||
|
||||
const isActive = (href: string) => {
|
||||
return pathname === href;
|
||||
};
|
||||
|
||||
const getActiveStyles = (color: string) => {
|
||||
const styles: Record<string, string> = {
|
||||
darkblue: "bg-gradient-to-r from-[#1e3a5f] to-[#2d5a8f] text-white shadow-lg shadow-blue-900/30",
|
||||
blue: "bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-500/30",
|
||||
emerald: "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-500/30",
|
||||
purple: "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg shadow-purple-500/30",
|
||||
indigo: "bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg shadow-indigo-500/30",
|
||||
amber: "bg-gradient-to-r from-amber-500 to-orange-600 text-white shadow-lg shadow-amber-500/30",
|
||||
};
|
||||
return styles[color] || styles.blue;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-xl bg-white shadow-lg hover:bg-gray-50 border border-gray-100"
|
||||
>
|
||||
{isOpen ? (
|
||||
<X className="w-6 h-6 text-gray-600" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6 text-gray-600" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Overlay for mobile */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-30"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`
|
||||
fixed top-0 left-0 h-full bg-[#faf8f5] shadow-xl z-40 transition-transform duration-300 ease-in-out border-r border-gray-200
|
||||
${isOpen ? "translate-x-0" : "-translate-x-full"}
|
||||
lg:translate-x-0 lg:static
|
||||
w-72
|
||||
`}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Logo/Header */}
|
||||
<div className="p-6 border-b border-gray-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<Logo size="md" showText={false} />
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-[#1e3a5f]">Thé Tip Top</h2>
|
||||
<p className="text-sm text-gray-500">Administration</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4 space-y-2">
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 mb-3">Menu Principal</p>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200
|
||||
${
|
||||
isActive(item.href)
|
||||
? getActiveStyles(item.color)
|
||||
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{item.icon}
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
<DashboardSidebar
|
||||
navItems={navItems}
|
||||
title="Thé Tip Top"
|
||||
subtitle="Administration"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
117
components/ui/DashboardSidebar.tsx
Normal file
117
components/ui/DashboardSidebar.tsx
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import Logo from "@/components/Logo";
|
||||
|
||||
export interface NavItem {
|
||||
label: string;
|
||||
href: string;
|
||||
icon: React.ReactNode;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface DashboardSidebarProps {
|
||||
navItems: NavItem[];
|
||||
title: string;
|
||||
subtitle: string;
|
||||
colorStyles?: Record<string, string>;
|
||||
}
|
||||
|
||||
const defaultColorStyles: Record<string, string> = {
|
||||
darkblue: "bg-gradient-to-r from-[#1e3a5f] to-[#2d5a8f] text-white shadow-lg shadow-blue-900/30",
|
||||
blue: "bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-500/30",
|
||||
green: "bg-gradient-to-r from-green-600 to-green-700 text-white shadow-lg shadow-green-500/30",
|
||||
emerald: "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-500/30",
|
||||
purple: "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg shadow-purple-500/30",
|
||||
indigo: "bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg shadow-indigo-500/30",
|
||||
amber: "bg-gradient-to-r from-amber-500 to-orange-600 text-white shadow-lg shadow-amber-500/30",
|
||||
};
|
||||
|
||||
export default function DashboardSidebar({
|
||||
navItems,
|
||||
title,
|
||||
subtitle,
|
||||
colorStyles = defaultColorStyles,
|
||||
}: DashboardSidebarProps) {
|
||||
const pathname = usePathname();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const isActive = (href: string) => pathname === href;
|
||||
|
||||
const getActiveStyles = (color: string) => {
|
||||
return colorStyles[color] || colorStyles.blue || defaultColorStyles.blue;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-xl bg-white shadow-lg hover:bg-gray-50 border border-gray-100"
|
||||
>
|
||||
{isOpen ? (
|
||||
<X className="w-6 h-6 text-gray-600" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6 text-gray-600" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Overlay for mobile */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-30"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`
|
||||
fixed top-0 left-0 h-full bg-[#faf8f5] shadow-xl z-40 transition-transform duration-300 ease-in-out border-r border-gray-200
|
||||
${isOpen ? "translate-x-0" : "-translate-x-full"}
|
||||
lg:translate-x-0 lg:static
|
||||
w-72
|
||||
`}
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Logo/Header */}
|
||||
<div className="p-6 border-b border-gray-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<Logo size="md" showText={false} />
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-[#1e3a5f]">{title}</h2>
|
||||
<p className="text-sm text-gray-500">{subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 p-4 space-y-2">
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 mb-3">Menu Principal</p>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200
|
||||
${
|
||||
isActive(item.href)
|
||||
? getActiveStyles(item.color)
|
||||
: "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{item.icon}
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user