From d3b326e78c13c10b5a0a423496c5799ce3000fa9 Mon Sep 17 00:00:00 2001 From: Horux Dev Date: Sat, 13 Jun 2026 19:55:06 +0000 Subject: [PATCH] feat(ui): make dashboard responsive for iPhone and mobile devices MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add Sheet primitive component for mobile drawers - Add MobileNav with hamburger menu for dashboard layout - Hide desktop sidebars on mobile; show mobile header - Make dashboard header responsive with stacked layout on small screens - Hide selector text on mobile, show icons only - Convert fixed-width filters to responsive widths (CFDI, Clientes, Admin, Documentos, Alertas) - Cap dialog widths to 95vw on mobile (CFDI viewer, Documentos, Reportes, Contribuyentes, Facturación) - Make calendar grid smaller and use single-letter weekdays on mobile - Update viewport to include viewport-fit=cover for Samsung safe areas --- .../app/(dashboard)/admin/usuarios/page.tsx | 4 +- .../alertas/discrepancia-regimen/page.tsx | 4 +- .../alertas/tipo-relacion-sospechosa/page.tsx | 4 +- apps/web/app/(dashboard)/calendario/page.tsx | 9 +- apps/web/app/(dashboard)/cfdi/page.tsx | 4 +- apps/web/app/(dashboard)/clientes/page.tsx | 6 +- .../contribuyentes/addons-dialog.tsx | 2 +- apps/web/app/(dashboard)/documentos/page.tsx | 6 +- apps/web/app/(dashboard)/facturacion/page.tsx | 2 +- apps/web/app/(dashboard)/layout.tsx | 27 ++- .../reportes/components/drill-down-modal.tsx | 2 +- apps/web/app/layout.tsx | 8 +- .../web/components/cfdi/cfdi-viewer-modal.tsx | 2 +- .../web/components/contribuyente-selector.tsx | 4 +- apps/web/components/layouts/header.tsx | 40 ++-- apps/web/components/layouts/mobile-nav.tsx | 181 ++++++++++++++++++ apps/web/components/membership-switcher.tsx | 4 +- apps/web/components/tenant-selector.tsx | 4 +- packages/shared-ui/src/primitives/dialog.tsx | 2 +- packages/shared-ui/src/primitives/index.ts | 1 + packages/shared-ui/src/primitives/sheet.tsx | 103 ++++++++++ 21 files changed, 365 insertions(+), 54 deletions(-) create mode 100644 apps/web/components/layouts/mobile-nav.tsx create mode 100644 packages/shared-ui/src/primitives/sheet.tsx diff --git a/apps/web/app/(dashboard)/admin/usuarios/page.tsx b/apps/web/app/(dashboard)/admin/usuarios/page.tsx index 95f8693..e830f8b 100644 --- a/apps/web/app/(dashboard)/admin/usuarios/page.tsx +++ b/apps/web/app/(dashboard)/admin/usuarios/page.tsx @@ -173,7 +173,7 @@ export default function AdminUsuariosPage() { onChange={(e) => setSearchTerm(e.target.value)} /> -
+
- + diff --git a/apps/web/app/(dashboard)/clientes/page.tsx b/apps/web/app/(dashboard)/clientes/page.tsx index 4f652ab..fc92376 100644 --- a/apps/web/app/(dashboard)/clientes/page.tsx +++ b/apps/web/app/(dashboard)/clientes/page.tsx @@ -205,9 +205,9 @@ export default function ClientesPage() {
Periodo: - setFrom(e.target.value)} className="w-[150px]" /> + setFrom(e.target.value)} className="w-full sm:w-[150px]" /> a - setTo(e.target.value)} className="w-[150px]" /> + setTo(e.target.value)} className="w-full sm:w-[150px]" />
+ {/* Actions section */} +
+
+ + + +
+ +
); diff --git a/apps/web/components/layouts/mobile-nav.tsx b/apps/web/components/layouts/mobile-nav.tsx new file mode 100644 index 0000000..b7714c8 --- /dev/null +++ b/apps/web/components/layouts/mobile-nav.tsx @@ -0,0 +1,181 @@ +'use client'; + +import Link from 'next/link'; +import Image from 'next/image'; +import { usePathname } from 'next/navigation'; +import { useState } from 'react'; +import { cn, Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@horux/shared-ui'; +import { + LayoutDashboard, + FileText, + Calculator, + Settings, + LogOut, + BarChart3, + Calendar, + Bell, + Users, + Building2, + Scale, + Send, + ListChecks, + FileCheck, + ClipboardList, + CreditCard, + CheckSquare2, + UserCog, + Shield, + FileWarning, + Rocket, + Menu, +} from 'lucide-react'; +import { useAuthStore } from '@/stores/auth-store'; +import { logout } from '@/lib/api/auth'; +import { useNavGate } from '@/lib/hooks/use-nav-gate'; +import { useRouter } from 'next/navigation'; +import { hasDespachoFeature, isGlobalAdminRfc, type DespachoPlan } from '@horux/shared'; + +interface NavItem { + name: string; + href: string; + icon: typeof LayoutDashboard; + feature?: string; + roles?: string[]; +} + +const navigation: NavItem[] = [ + { name: 'Despacho', href: '/despachos', icon: ListChecks, roles: ['owner', 'cfo', 'contador', 'auxiliar', 'supervisor'] }, + { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard, roles: ['owner', 'cfo', 'contador', 'auxiliar', 'supervisor', 'cliente'] }, + { name: 'CFDI', href: '/cfdi', icon: FileText }, + { name: 'Impuestos', href: '/impuestos', icon: Calculator }, + { name: 'Reportes', href: '/reportes', icon: BarChart3, feature: 'reportes', roles: ['owner', 'cfo', 'supervisor', 'cliente'] }, + { name: 'Conciliacion', href: '/conciliacion', icon: Scale, feature: 'conciliacion' }, + { name: 'Calendario', href: '/calendario', icon: Calendar, feature: 'calendario' }, + { name: 'Alertas', href: '/alertas', icon: Bell, feature: 'alertas' }, + { name: 'Facturación', href: '/facturacion', icon: Send, roles: ['owner', 'cfo', 'contador', 'auxiliar', 'supervisor'] }, + { name: 'Documentos', href: '/documentos', icon: FileCheck, feature: 'documentos' }, + { name: 'Carteras', href: '/carteras', icon: ClipboardList, roles: ['supervisor', 'auxiliar'] }, + { name: 'Contribuyentes', href: '/contribuyentes', icon: Building2, roles: ['owner', 'cfo', 'supervisor', 'contador', 'auxiliar'] }, + { name: 'Usuarios', href: '/usuarios', icon: Users, roles: ['owner', 'cfo', 'supervisor', 'auxiliar'] }, + { name: 'Tareas', href: '/tareas', icon: CheckSquare2, roles: ['owner', 'cfo', 'contador', 'auxiliar', 'supervisor'] }, + { name: 'Planes', href: '/configuracion/planes-despacho', icon: CreditCard, roles: ['owner', 'cfo'] }, + { name: 'Configuracion', href: '/configuracion', icon: Settings, roles: ['owner', 'cfo', 'supervisor', 'auxiliar', 'cliente'] }, +]; + +const adminNavigation: NavItem[] = [ + { name: 'Clientes', href: '/clientes', icon: Building2 }, + { name: 'Admin Usuarios', href: '/admin/usuarios', icon: UserCog }, + { name: 'Staff', href: '/admin/staff', icon: Shield }, + { name: 'Audit Log', href: '/admin/audit-log', icon: FileWarning }, +]; + +export function MobileNav() { + const pathname = usePathname(); + const router = useRouter(); + const { user, logout: clearAuth } = useAuthStore(); + const [open, setOpen] = useState(false); + + const handleLogout = async () => { + try { + await logout(); + } catch { + // Ignore errors + } finally { + clearAuth(); + router.push('/login'); + } + }; + + const plan = (user?.plan || 'trial') as DespachoPlan; + const role = user?.role || 'visor'; + const navGate = useNavGate(); + const filteredNav = navigation.filter((item) => { + if (item.feature && !hasDespachoFeature(plan, item.feature)) return false; + if (item.roles && !item.roles.includes(role)) return false; + if (!navGate.isAllowed(item.href)) return false; + return true; + }); + + const isGlobalAdmin = isGlobalAdminRfc(user?.tenantRfc, role, user?.platformRoles); + const allNavigation = isGlobalAdmin + ? [...filteredNav.slice(0, -1), ...adminNavigation, filteredNav[filteredNav.length - 1]] + : filteredNav; + + const handleLinkClick = () => { + setOpen(false); + }; + + return ( + + + + + + {/* Logo */} + + + + Horux Despachos +
+ Horux + Despachos +
+ + + + + {/* Navigation */} + + + {/* User & Logout */} +
+ {!isGlobalAdmin && ( +
+

{user?.nombre}

+

{user?.email}

+
+ )} + +
+ + + ); +} diff --git a/apps/web/components/membership-switcher.tsx b/apps/web/components/membership-switcher.tsx index ae8a389..7f2c649 100644 --- a/apps/web/components/membership-switcher.tsx +++ b/apps/web/components/membership-switcher.tsx @@ -65,10 +65,10 @@ export function MembershipSwitcher() {