consultoria-as/HoruxDespachosNuevo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): make dashboard responsive for iPhone and mobile devices

Browse Source 
- 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
This commit is contained in:
Horux Dev
2026-06-13 19:55:06 +00:00
parent b1eaf41681
commit d3b326e78c
21 changed files with 365 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/app/(dashboard)/admin/usuarios/page.tsx
View File

@@ -173,7 +173,7 @@ export default function AdminUsuariosPage() {
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
<div className="w-[250px]">
<div className="w-full sm:w-[250px]">
<Select value={filterTenant} onValueChange={setFilterTenant}>
<SelectTrigger>
<SelectValue placeholder="Filtrar por empresa" />
@@ -337,7 +337,7 @@ export default function AdminUsuariosPage() {
value={editingUser.role}
onValueChange={(v) => setEditingUser({ ...editingUser, role: v as any })}
>
<SelectTrigger className="h-8 w-[140px]">
<SelectTrigger className="h-8 w-full sm:w-[140px]">
<SelectValue />
</SelectTrigger>
<SelectContent>

4
apps/web/app/(dashboard)/alertas/discrepancia-regimen/page.tsx
View File

@@ -240,7 +240,7 @@ export default function DiscrepanciaRegimenPage() {
type="date"
value={fechaDesde}
onChange={e => setFechaDesde(e.target.value)}
className="h-8 w-[150px] text-sm"
className="h-8 w-full sm:w-[150px] text-sm"
/>
</div>
<div className="flex items-center gap-2">
@@ -249,7 +249,7 @@ export default function DiscrepanciaRegimenPage() {
type="date"
value={fechaHasta}
onChange={e => setFechaHasta(e.target.value)}
className="h-8 w-[150px] text-sm"
className="h-8 w-full sm:w-[150px] text-sm"
/>
</div>
<div className="flex items-center gap-2">

4
apps/web/app/(dashboard)/alertas/tipo-relacion-sospechosa/page.tsx
View File

@@ -222,7 +222,7 @@ export default function TipoRelacionSospechosaPage() {
type="date"
value={fechaDesde}
onChange={e => setFechaDesde(e.target.value)}
className="h-8 w-[150px] text-sm"
className="h-8 w-full sm:w-[150px] text-sm"
/>
</div>
<div className="flex items-center gap-2">
@@ -231,7 +231,7 @@ export default function TipoRelacionSospechosaPage() {
type="date"
value={fechaHasta}
onChange={e => setFechaHasta(e.target.value)}
className="h-8 w-[150px] text-sm"
className="h-8 w-full sm:w-[150px] text-sm"
/>
</div>
<div className="flex items-center gap-2">

9
apps/web/app/(dashboard)/calendario/page.tsx
View File

@@ -302,8 +302,9 @@ export default function CalendarioPage() {
</div>
<div className="grid grid-cols-7 gap-1">
{['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'].map(d => (
<div key={d} className="text-center text-sm font-medium text-muted-foreground py-2">
{d}
<div key={d} className="text-center text-xs md:text-sm font-medium text-muted-foreground py-1 md:py-2">
<span className="md:hidden">{d.charAt(0)}</span>
<span className="hidden md:inline">{d}</span>
</div>
))}
{days.map((day, i) => {
@@ -313,14 +314,14 @@ export default function CalendarioPage() {
<div
key={i}
className={cn(
'min-h-[80px] p-1 border rounded-md',
'min-h-[60px] md:min-h-[80px] p-0.5 md:p-1 border rounded-md',
day ? 'bg-background' : 'bg-muted/30',
isToday && 'ring-2 ring-primary'
)}
>
{day && (
<>
<div className={cn('text-sm font-medium', isToday && 'text-primary')}>{day}</div>
<div className={cn('text-xs md:text-sm font-medium', isToday && 'text-primary')}>{day}</div>
<div className="space-y-1 mt-1">
{dayEventos.slice(0, 2).map((e, idx) => {
const Icon = tipoIcons[e.tipo] || Calendar;

4
apps/web/app/(dashboard)/cfdi/page.tsx
View File

@@ -967,7 +967,7 @@ export default function CfdiPage() {
<Card>
<CardContent className="p-4">
<div className="flex flex-wrap gap-4">
<div className="flex gap-2 w-[300px]">
<div className="flex gap-2 w-full sm:w-[300px]">
<Input
placeholder="Buscar por UUID, RFC o nombre..."
value={searchTerm}
@@ -1012,7 +1012,7 @@ export default function CfdiPage() {
})
}
>
<SelectTrigger className="w-[200px]">
<SelectTrigger className="w-full sm:w-[200px]">
<SelectValue placeholder="Tipo de Comprobante" />
</SelectTrigger>
<SelectContent>

6
apps/web/app/(dashboard)/clientes/page.tsx
View File

@@ -205,9 +205,9 @@ export default function ClientesPage() {
<Calendar className="h-5 w-5 text-muted-foreground" />
<div className="flex items-center gap-2 text-sm">
<span className="text-muted-foreground">Periodo:</span>
<Input type="date" value={from} onChange={(e) => setFrom(e.target.value)} className="w-[150px]" />
<Input type="date" value={from} onChange={(e) => setFrom(e.target.value)} className="w-full sm:w-[150px]" />
<span className="text-muted-foreground">a</span>
<Input type="date" value={to} onChange={(e) => setTo(e.target.value)} className="w-[150px]" />
<Input type="date" value={to} onChange={(e) => setTo(e.target.value)} className="w-full sm:w-[150px]" />
</div>
</div>
<Button onClick={() => setShowForm(true)}>
@@ -369,7 +369,7 @@ export default function ClientesPage() {
onClick={() => setUsuariosTenantId(null)}
>
<div
className="bg-background rounded-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto"
className="bg-background rounded-lg max-w-[95vw] md:max-w-2xl w-full max-h-[80vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
<div className="p-6 border-b flex items-center justify-between">

2
apps/web/app/(dashboard)/contribuyentes/addons-dialog.tsx
View File

@@ -67,7 +67,7 @@ export function AddonsDialog({
return (
<Dialog open={!!target} onOpenChange={(o) => !o && onClose()}>
<DialogContent className="max-w-2xl">
<DialogContent className="max-w-[95vw] md:max-w-2xl">
<DialogHeader>
<DialogTitle className="flex items-center gap-2"><Sparkles className="h-5 w-5 text-amber-500" /> Add-ons — {target?.nombre}</DialogTitle>
</DialogHeader>

6
apps/web/app/(dashboard)/documentos/page.tsx
View File

@@ -379,11 +379,11 @@ function DeclaracionesTab() {
<div className="flex flex-wrap items-end gap-3 mb-4 pb-3 border-b">
<div className="flex items-center gap-2">
<label className="text-xs text-muted-foreground">Desde</label>
<Input type="date" value={fechaDesde} onChange={(e) => setFechaDesde(e.target.value)} className="h-8 w-[150px] text-sm" />
<Input type="date" value={fechaDesde} onChange={(e) => setFechaDesde(e.target.value)} className="h-8 w-full sm:w-[150px] text-sm" />
</div>
<div className="flex items-center gap-2">
<label className="text-xs text-muted-foreground">Hasta</label>
<Input type="date" value={fechaHasta} onChange={(e) => setFechaHasta(e.target.value)} className="h-8 w-[150px] text-sm" />
<Input type="date" value={fechaHasta} onChange={(e) => setFechaHasta(e.target.value)} className="h-8 w-full sm:w-[150px] text-sm" />
</div>
</div>
@@ -552,7 +552,7 @@ function UploadDialog({ onClose }: { onClose: () => void }) {
return (
<Dialog open onOpenChange={(o) => { if (!o) onClose(); }}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="max-w-[95vw] md:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Subir declaración</DialogTitle>
<DialogDescription>

2
apps/web/app/(dashboard)/facturacion/page.tsx
View File

@@ -812,7 +812,7 @@ export default function FacturacionPage() {
{/* Modal de búsqueda de conceptos previos */}
{showConceptoSearch && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="bg-white dark:bg-zinc-900 rounded-xl shadow-2xl w-full max-w-3xl max-h-[80vh] flex flex-col m-4">
<div className="bg-white dark:bg-zinc-900 rounded-xl shadow-2xl w-full max-w-[95vw] md:max-w-3xl max-h-[80vh] flex flex-col m-4">
<div className="flex items-center justify-between p-4 border-b">
<h3 className="text-lg font-semibold">Buscar Concepto en Facturas</h3>
<Button variant="ghost" size="icon" onClick={() => setShowConceptoSearch(false)}>

27
apps/web/app/(dashboard)/layout.tsx
View File

@@ -9,6 +9,7 @@ import { Sidebar } from '@/components/layouts/sidebar';
import { TopNav } from '@/components/layouts/topnav';
import { SidebarCompact } from '@/components/layouts/sidebar-compact';
import { SidebarFloating } from '@/components/layouts/sidebar-floating';
import { MobileNav } from '@/components/layouts/mobile-nav';
import { SubscriptionBanner } from '@/components/subscription-banner';
import { cn } from '@horux/shared-ui';
@@ -45,7 +46,7 @@ export default function DashboardLayout({
}
// Render layout based on theme
const renderNavigation = () => {
const renderDesktopNavigation = () => {
switch (layout) {
case 'topnav':
return <TopNav />;
@@ -62,14 +63,14 @@ export default function DashboardLayout({
const getContentClasses = () => {
switch (layout) {
case 'topnav':
return 'pt-16'; // Top padding for fixed top nav
return 'pt-16 px-4 md:px-6'; // Top padding for fixed top nav
case 'sidebar-compact':
return 'pl-16'; // Small left padding for compact sidebar
return 'md:pl-16 px-4 md:px-0'; // Small left padding for compact sidebar on desktop
case 'sidebar-floating':
return 'pl-72 pr-4 py-4'; // Padding for floating sidebar
return 'px-4 py-4 md:pl-72 md:pr-4 md:py-4'; // Padding for floating sidebar on desktop
case 'sidebar-standard':
default:
return 'pl-64'; // Standard sidebar width
return 'px-4 md:pl-64 md:px-0'; // Standard sidebar width on desktop
}
};
@@ -78,8 +79,20 @@ export default function DashboardLayout({
'min-h-screen bg-background',
layout === 'sidebar-floating' && 'bg-gradient-to-br from-background via-background to-muted/20'
)}>
{renderNavigation()}
<div className={getContentClasses()}>
{/* Mobile header with hamburger menu */}
<header className="md:hidden fixed top-0 left-0 right-0 z-40 h-14 border-b bg-card px-4 flex items-center justify-between">
<MobileNav />
<span className="font-bold text-lg">Horux</span>
<div className="w-10" />
</header>
{/* Desktop navigation - hidden on mobile */}
<div className="hidden md:block">
{renderDesktopNavigation()}
</div>
{/* Main content */}
<div className={cn('pt-14 md:pt-0', getContentClasses())}>
<SubscriptionBanner />
{children}
</div>

2
apps/web/app/(dashboard)/reportes/components/drill-down-modal.tsx
View File

@@ -103,7 +103,7 @@ export function EstadoResultadosDrillDownModal({
return (
<Dialog open onOpenChange={(open) => !open && onClose()}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
<DialogContent className="max-w-[95vw] md:max-w-4xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<div className="flex items-center gap-2">
{selectedRfc && (

8
apps/web/app/layout.tsx
View File

@@ -1,4 +1,4 @@
import type { Metadata } from 'next';
import type { Metadata, Viewport } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { ThemeProvider } from '@/components/providers/theme-provider';
@@ -11,6 +11,12 @@ export const metadata: Metadata = {
description: 'Plataforma de análisis financiero y gestión fiscal para empresas mexicanas',
};
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
viewportFit: 'cover',
};
export default function RootLayout({
children,
}: {