atualizacoes modulo fechamento

2026-04-26 22:54:56 -03:00
parent 7a01c6f97b
commit 6da067c641
29 changed files with 5973 additions and 3 deletions
@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+import {
+  ChevronLeft,
+  ClipboardList,
+  Landmark,
+  Menu,
+  Settings,
+  Users,
+  Wallet,
+  X,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useAuthAccess } from "@/contexts/AuthAccessContext";
+
+const navItems = [
+  { title: "Fechamentos", path: "", icon: ClipboardList, onlyAdmin: false },
+  { title: "Banco de Pontos", path: "banco-pontos", icon: Landmark, onlyAdmin: false },
+  { title: "Parceiros", path: "parceiros", icon: Wallet, onlyAdmin: true },
+  { title: "Usuários", path: "usuarios", icon: Users, onlyAdmin: true },
+  { title: "Configurações", path: "configuracoes", icon: Settings, onlyAdmin: true },
+];
+
+export function AppSidebar() {
+  const { papel } = useAuthAccess();
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const isAdmin = papel === "admin";
+  const allowedNavItems = navItems.filter((item) => isAdmin || !item.onlyAdmin);
+
+  const SidebarContent = () => (
+    <>
+      <div className="flex items-center gap-3 border-b border-sidebar-border px-4 py-6">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 cyber-glow">
+          <ClipboardList className="h-5 w-5 text-primary" />
+        </div>
+        {!collapsed && (
+          <div className="animate-fade-in">
+            <h1 className="text-lg font-semibold text-sidebar-foreground">Fechamento HGTX</h1>
+            <p className="text-xs text-muted-foreground">
+              {isAdmin ? "Painel Admin" : "Painel Parceiro"}
+            </p>
+          </div>
+        )}
+      </div>
+
+      <nav className="flex-1 space-y-1 px-3 py-4">
+        {allowedNavItems.map((item) => (
+          <NavLink
+            key={item.path}
+            to={item.path}
+            end={item.path === ""}
+            onClick={() => setMobileOpen(false)}
+            className={({ isActive }) =>
+              cn(
+                "nav-item flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200",
+                isActive
+                  ? "bg-sidebar-accent font-medium text-primary"
+                  : "text-muted-foreground hover:bg-sidebar-accent hover:text-foreground",
+              )
+            }
+          >
+            <item.icon className="h-5 w-5 flex-shrink-0" />
+            {!collapsed && <span className="animate-fade-in">{item.title}</span>}
+          </NavLink>
+        ))}
+      </nav>
+
+      <div className="hidden border-t border-sidebar-border px-3 py-4 lg:block">
+        <button
+          onClick={() => setCollapsed(!collapsed)}
+          className="nav-item flex w-full items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground transition-all duration-200 hover:bg-sidebar-accent hover:text-foreground lg:justify-start"
+        >
+          <ChevronLeft
+            className={cn(
+              "h-5 w-5 flex-shrink-0 transition-transform duration-300",
+              collapsed && "rotate-180",
+            )}
+          />
+          {!collapsed && <span>Recolher</span>}
+        </button>
+      </div>
+    </>
+  );
+
+  return (
+    <>
+      <button
+        onClick={() => setMobileOpen(true)}
+        className="fixed left-4 top-4 z-50 rounded-lg border border-border bg-card p-2 shadow-sm lg:hidden"
+      >
+        <Menu className="h-5 w-5" />
+      </button>
+
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm lg:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      <aside
+        className={cn(
+          "fixed left-0 top-0 z-50 flex h-full w-64 flex-col border-r border-sidebar-border bg-sidebar transition-transform duration-300 lg:hidden",
+          mobileOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        <button
+          onClick={() => setMobileOpen(false)}
+          className="absolute right-4 top-4 rounded-lg p-2 hover:bg-sidebar-accent"
+        >
+          <X className="h-5 w-5" />
+        </button>
+        <SidebarContent />
+      </aside>
+
+      <aside
+        className={cn(
+          "sticky top-0 hidden h-screen flex-col border-r border-sidebar-border bg-sidebar transition-all duration-300 lg:flex",
+          collapsed ? "w-[72px]" : "w-64",
+        )}
+      >
+        <SidebarContent />
+      </aside>
+    </>
+  );
+}