@create-lft-app/nextjs 3.1.0 → 3.3.0

package/template/src/components/tables/data-table-toolbar.tsx

@@ -1,50 +1,140 @@
 'use client'
 
+import * as React from 'react'
 import { Table } from '@tanstack/react-table'
-import { X } from 'lucide-react'
+import { Filter, X } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { DataTableViewOptions } from './data-table-view-options'
+import { DataTableFacetedFilter } from './data-table-faceted-filter'
+import { DataTableDateFilter } from './data-table-date-filter'
+import { DataTableNumberFilter } from './data-table-number-filter'
+import { DataTableFiltersDropdown } from './data-table-filters-dropdown'
+import type { FilterConfig } from './data-table'
 
 interface DataTableToolbarProps<TData> {
   table: Table<TData>
   searchKey?: string
   searchPlaceholder?: string
+  filters?: FilterConfig[]
+  /** Modo de visualización: 'dropdown' agrupa filtros, 'inline' los muestra en línea, 'inline-collapsible' los muestra en línea pero ocultables */
+  filterMode?: 'dropdown' | 'inline' | 'inline-collapsible'
 }
 
 export function DataTableToolbar<TData>({
   table,
   searchKey,
   searchPlaceholder = 'Buscar...',
+  filters,
+  filterMode = 'dropdown',
 }: DataTableToolbarProps<TData>) {
   const isFiltered = table.getState().columnFilters.length > 0
+  const [showFilters, setShowFilters] = React.useState(false)
 
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex flex-1 items-center space-x-2">
-        {searchKey && (
-          <Input
-            placeholder={searchPlaceholder}
-            value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ''}
-            onChange={(event) =>
-              table.getColumn(searchKey)?.setFilterValue(event.target.value)
-            }
-            className="h-8 w-[150px] lg:w-[250px]"
+  const renderFilters = () => {
+    return filters?.map((filter) => {
+      const column = table.getColumn(filter.columnId)
+      if (!column) return null
+
+      if (filter.type === 'faceted' && filter.options) {
+        return (
+          <DataTableFacetedFilter
+            key={filter.columnId}
+            column={column}
+            title={filter.title}
+            options={filter.options}
+          />
+        )
+      }
+
+      if (filter.type === 'date-range') {
+        return (
+          <DataTableDateFilter
+            key={filter.columnId}
+            column={column}
+            title={filter.title}
           />
-        )}
-        {isFiltered && (
-          <Button
-            variant="ghost"
-            onClick={() => table.resetColumnFilters()}
-            className="h-8 px-2 lg:px-3"
-          >
-            Limpiar
-            <X className="ml-2 h-4 w-4" />
-          </Button>
-        )}
+        )
+      }
+
+      if (filter.type === 'number-range') {
+        return (
+          <DataTableNumberFilter
+            key={filter.columnId}
+            column={column}
+            title={filter.title}
+            format={filter.format}
+            currencySymbol={filter.currencySymbol}
+            step={filter.step}
+          />
+        )
+      }
+
+      return null
+    })
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <div className="flex flex-1 flex-wrap items-center gap-2">
+          {searchKey && (
+            <Input
+              placeholder={searchPlaceholder}
+              value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ''}
+              onChange={(event) =>
+                table.getColumn(searchKey)?.setFilterValue(event.target.value)
+              }
+              className="h-8 w-[150px] lg:w-[250px]"
+            />
+          )}
+
+          {/* Modo dropdown: un solo botón que agrupa filtros */}
+          {filterMode === 'dropdown' && filters && filters.length > 0 && (
+            <DataTableFiltersDropdown table={table} filters={filters} />
+          )}
+
+          {/* Modo inline: filtros visibles individualmente */}
+          {filterMode === 'inline' && renderFilters()}
+
+          {/* Modo inline-collapsible: botón para mostrar/ocultar filtros */}
+          {filterMode === 'inline-collapsible' && filters && filters.length > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 border-dashed"
+              onClick={() => setShowFilters(!showFilters)}
+            >
+              <Filter className="mr-2 h-4 w-4" />
+              Filtros
+              {isFiltered && (
+                <span className="ml-2 rounded-full bg-primary px-1.5 py-0.5 text-xs text-primary-foreground">
+                  {table.getState().columnFilters.length}
+                </span>
+              )}
+            </Button>
+          )}
+
+          {/* Botón limpiar para modos inline */}
+          {(filterMode === 'inline' || (filterMode === 'inline-collapsible' && showFilters)) && isFiltered && (
+            <Button
+              variant="ghost"
+              onClick={() => table.resetColumnFilters()}
+              className="h-8 px-2 lg:px-3"
+            >
+              Limpiar
+              <X className="ml-2 h-4 w-4" />
+            </Button>
+          )}
+        </div>
       </div>
-      <DataTableViewOptions table={table} />
+
+      {/* Filtros inline colapsables - fila separada */}
+      {filterMode === 'inline-collapsible' && showFilters && filters && filters.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2">
+          {renderFilters()}
+        </div>
+      )}
     </div>
   )
 }

package/template/src/components/tables/data-table-view-options.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import * as React from 'react'
 import { Table } from '@tanstack/react-table'
 import { Settings2 } from 'lucide-react'
 
@@ -20,16 +21,18 @@ interface DataTableViewOptionsProps<TData> {
 export function DataTableViewOptions<TData>({
   table,
 }: DataTableViewOptionsProps<TData>) {
+  const [open, setOpen] = React.useState(false)
+
   return (
-    <DropdownMenu>
+    <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>
         <Button
-          variant="outline"
-          size="sm"
-          className="ml-auto hidden h-8 lg:flex"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
         >
-          <Settings2 className="mr-2 h-4 w-4" />
-          Columnas
+          <Settings2 className="h-4 w-4" />
+          <span className="sr-only">Columnas</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[150px]">
@@ -47,6 +50,7 @@ export function DataTableViewOptions<TData>({
                 key={column.id}
                 className="capitalize"
                 checked={column.getIsVisible()}
+                onSelect={(e) => e.preventDefault()}
                 onCheckedChange={(value) => column.toggleVisibility(!!value)}
               >
                 {column.id}

package/template/src/components/tables/data-table.tsx

@@ -8,6 +8,8 @@ import {
   VisibilityState,
   flexRender,
   getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
@@ -22,15 +24,31 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
-import { Input } from '@/components/ui/input'
+import { DataTableToolbar } from './data-table-toolbar'
 import { DataTablePagination } from './data-table-pagination'
 import { DataTableViewOptions } from './data-table-view-options'
 
+export interface FilterConfig {
+  columnId: string
+  type: 'faceted' | 'date-range' | 'number-range'
+  title: string
+  options?: { label: string; value: string; icon?: React.ComponentType<{ className?: string }> }[]
+  /** Para number-range: formato del número */
+  format?: 'currency' | 'number'
+  /** Para number-range: símbolo de moneda */
+  currencySymbol?: string
+  /** Para number-range: paso del input */
+  step?: number
+}
+
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
   searchKey?: string
   searchPlaceholder?: string
+  filters?: FilterConfig[]
+  /** Modo de visualización de filtros: 'dropdown' (default), 'inline', 'inline-collapsible' */
+  filterMode?: 'dropdown' | 'inline' | 'inline-collapsible'
 }
 
 export function DataTable<TData, TValue>({
@@ -38,6 +56,8 @@ export function DataTable<TData, TValue>({
   data,
   searchKey,
   searchPlaceholder = 'Buscar...',
+  filters,
+  filterMode = 'dropdown',
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
@@ -55,6 +75,8 @@ export function DataTable<TData, TValue>({
     getFilteredRowModel: getFilteredRowModel(),
     onColumnVisibilityChange: setColumnVisibility,
     onRowSelectionChange: setRowSelection,
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
     state: {
       sorting,
       columnFilters,
@@ -65,33 +87,31 @@ export function DataTable<TData, TValue>({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        {searchKey && (
-          <Input
-            placeholder={searchPlaceholder}
-            value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ''}
-            onChange={(event) =>
-              table.getColumn(searchKey)?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm"
-          />
-        )}
-        <DataTableViewOptions table={table} />
-      </div>
+      <DataTableToolbar
+        table={table}
+        searchKey={searchKey}
+        searchPlaceholder={searchPlaceholder}
+        filters={filters}
+        filterMode={filterMode}
+      />
       <div className="rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
+                {headerGroup.headers.map((header, index) => {
+                  const isLastHeader = index === headerGroup.headers.length - 1
                   return (
                     <TableHead key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
+                      <div className={isLastHeader ? 'flex items-center justify-end gap-2' : ''}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                        {isLastHeader && <DataTableViewOptions table={table} />}
+                      </div>
                     </TableHead>
                   )
                 })}

package/template/src/components/tables/index.ts

@@ -1,5 +1,9 @@
-export { DataTable } from './data-table'
+export { DataTable, type FilterConfig } from './data-table'
 export { DataTablePagination } from './data-table-pagination'
 export { DataTableColumnHeader } from './data-table-column-header'
 export { DataTableToolbar } from './data-table-toolbar'
 export { DataTableViewOptions } from './data-table-view-options'
+export { DataTableFacetedFilter, type FacetedFilterOption } from './data-table-faceted-filter'
+export { DataTableDateFilter, dateRangeFilterFn } from './data-table-date-filter'
+export { DataTableNumberFilter, numberRangeFilterFn, type NumberRange } from './data-table-number-filter'
+export { DataTableFiltersDropdown } from './data-table-filters-dropdown'

package/template/src/components/ui/alert-dialog.tsx

@@ -37,7 +37,7 @@ function AlertDialogOverlay({
       data-slot="alert-dialog-overlay"
       className={cn(
         "fixed inset-0 z-50",
-        "bg-[#f6f6f3]/60 dark:bg-[#0C0C0C]/80",
+        "bg-background/60 dark:bg-background/80",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className

package/template/src/components/ui/avatar.tsx

@@ -43,8 +43,8 @@ function AvatarFallback({
       data-slot="avatar-fallback"
       className={cn(
         "flex h-full w-full items-center justify-center rounded-full",
-        "bg-[#F2F1EF] dark:bg-[#1D1D1D]",
-        "text-sm font-medium text-[#606060]",
+        "bg-muted",
+        "text-sm font-medium text-muted-foreground",
         className
       )}
       {...props}

package/template/src/components/ui/badge.tsx

@@ -18,9 +18,9 @@ const badgeVariants = cva(
         outline:
           "text-foreground border-border",
         tag:
-          "rounded-none border-0 bg-[#F2F1EF] dark:bg-[#1D1D1D] text-[#878787] text-[10px] px-2 py-1",
+          "rounded-none border-0 bg-muted text-muted-foreground text-[10px] px-2 py-1",
         "tag-rounded":
-          "rounded-full border-0 bg-[#F2F1EF] dark:bg-[#1D1D1D] text-[#878787] text-[12px] px-3 py-1",
+          "rounded-full border-0 bg-muted text-muted-foreground text-[12px] px-3 py-1",
       },
     },
     defaultVariants: {

package/template/src/components/ui/button.tsx

@@ -42,7 +42,7 @@ const buttonVariants = cva(
           "hover:underline",
         ].join(" "),
         icon: [
-          "text-[#878787]",
+          "text-muted-foreground",
           "hover:bg-accent hover:text-accent-foreground",
           "rounded-full",
         ].join(" "),

package/template/src/components/ui/card.tsx

@@ -63,7 +63,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-sm text-[#606060]", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )

package/template/src/components/ui/command.tsx

@@ -71,7 +71,7 @@ function CommandInput({
       data-slot="command-input-wrapper"
       className="flex items-center border-b border-border px-3"
     >
-      <SearchIcon className="mr-2 h-4 w-4 shrink-0 text-[#878787]" />
+      <SearchIcon className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" />
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
@@ -156,10 +156,10 @@ function CommandItem({
         "rounded-sm px-2 py-1.5",
         "text-sm outline-none",
         "transition-colors duration-150",
-        "data-[selected=true]:bg-[#f2f2f2] dark:data-[selected=true]:bg-[#2c2c2c]",
-        "data-[selected=true]:text-foreground",
+        "data-[selected=true]:bg-accent",
+        "data-[selected=true]:text-accent-foreground",
         "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
-        "[&_svg]:mr-2 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:text-[#878787]",
+        "[&_svg]:mr-2 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:text-muted-foreground",
         className
       )}
       {...props}

package/template/src/components/ui/dropdown-menu.tsx

@@ -44,7 +44,7 @@ function DropdownMenuContent({
         className={cn(
           "z-50 min-w-[8rem] overflow-hidden",
           "rounded-md border border-border",
-          "bg-background dark:bg-[#1c1c1c]",
+          "bg-popover",
           "p-1",
           "text-popover-foreground",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -89,12 +89,12 @@ function DropdownMenuItem({
         "rounded-sm px-2 py-1.5",
         "text-sm outline-none",
         "transition-colors duration-150",
-        "focus:bg-[#f2f2f2] dark:focus:bg-[#2c2c2c]",
-        "focus:text-foreground",
+        "focus:bg-accent",
+        "focus:text-accent-foreground",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         "data-[inset]:pl-8",
         "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-        "[&_svg:not([class*='text-'])]:text-[#878787]",
+        "[&_svg:not([class*='text-'])]:text-muted-foreground",
         "data-[variant=destructive]:text-destructive",
         "data-[variant=destructive]:focus:bg-destructive/10",
         "data-[variant=destructive]:focus:text-destructive",

package/template/src/components/ui/form.tsx

@@ -98,7 +98,7 @@ function FormLabel({
       data-slot="form-label"
       data-error={!!error}
       className={cn(
-        "text-xs text-[#878787] font-normal",
+        "text-xs text-muted-foreground font-normal",
         "data-[error=true]:text-destructive",
         className
       )}

package/template/src/components/ui/icons.tsx

@@ -147,7 +147,7 @@ export const Icons = {
     <SVGIcon
       size={size}
       viewBox="0 0 24 24"
-      className={cn('animate-spin stroke-[#878787]', className)}
+      className={cn('animate-spin', className)}
       fill="none"
       stroke="currentColor"
       strokeWidth={1.5}

package/template/src/components/ui/popover.tsx

@@ -32,7 +32,7 @@ function PopoverContent({
         className={cn(
           "z-50 w-72 rounded-md p-4",
           "border border-border",
-          "bg-background dark:bg-[#1c1c1c]",
+          "bg-popover",
           "text-popover-foreground",
           "outline-none",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",

package/template/src/components/ui/progress.tsx

@@ -15,7 +15,7 @@ function Progress({
       data-slot="progress"
       className={cn(
         "relative h-1.5 w-full overflow-hidden rounded-full",
-        "bg-[#e6e6e6] dark:bg-[#2c2c2c]",
+        "bg-muted",
         className
       )}
       {...props}

package/template/src/components/ui/select.tsx

@@ -52,7 +52,7 @@ function SelectTrigger({
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="h-4 w-4 text-[#878787]" />
+        <ChevronDownIcon className="h-4 w-4 text-muted-foreground" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -71,7 +71,7 @@ function SelectContent({
         className={cn(
           "relative z-50 max-h-96 min-w-[8rem] overflow-hidden",
           "rounded-md border border-border",
-          "bg-background dark:bg-[#1c1c1c]",
+          "bg-popover",
           "text-popover-foreground",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -129,7 +129,7 @@ function SelectItem({
         "rounded-sm py-1.5 pl-2 pr-8",
         "text-sm outline-none",
         "transition-colors duration-150",
-        "focus:bg-[#f2f2f2] dark:focus:bg-[#2c2c2c]",
+        "focus:bg-accent",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       )}

package/template/src/components/ui/sonner.tsx

@@ -29,7 +29,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
           error:
             "group-[.toaster]:bg-destructive group-[.toaster]:text-destructive-foreground group-[.toaster]:border-destructive",
           success:
-            "group-[.toaster]:bg-[#d3f4e5] dark:group-[.toaster]:bg-[#1a3d2e] group-[.toaster]:text-[#1a3d2e] dark:group-[.toaster]:text-[#d3f4e5] group-[.toaster]:border-[#b0e5cc] dark:group-[.toaster]:border-[#2d5a45]",
+            "group-[.toaster]:bg-green-100 dark:group-[.toaster]:bg-green-950 group-[.toaster]:text-green-900 dark:group-[.toaster]:text-green-100 group-[.toaster]:border-green-200 dark:group-[.toaster]:border-green-800",
         },
       }}
       icons={{

package/template/src/components/ui/spinner.tsx

@@ -15,7 +15,7 @@ function Spinner({ className, size = 20, style, ...props }: SpinnerProps) {
       strokeLinecap="round"
       strokeLinejoin="round"
       xmlns="http://www.w3.org/2000/svg"
-      className={cn("animate-spin stroke-[#878787]", className)}
+      className={cn("animate-spin text-muted-foreground", className)}
       style={{ width: size, height: size, ...style }}
       {...props}
     >

package/template/src/components/ui/table.tsx

@@ -58,7 +58,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
       data-slot="table-row"
       className={cn(
         "border-b border-border transition-colors",
-        "hover:bg-[#F2F1EF] dark:hover:bg-[#0f0f0f]",
+        "hover:bg-accent/50 dark:hover:bg-accent/30",
         "data-[state=selected]:bg-accent",
         className
       )}
@@ -72,7 +72,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-12 px-4 text-left align-middle font-medium text-[#666666]",
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground",
         "[&:has([role=checkbox])]:pr-0",
         className
       )}
@@ -86,7 +86,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "px-4 py-2 align-middle",
+        "px-4 py-3 align-middle",
         "[&:has([role=checkbox])]:pr-0",
         className
       )}

package/template/src/components/ui/tooltip.tsx

@@ -48,8 +48,8 @@ function TooltipContent({
         className={cn(
           "z-50 overflow-hidden",
           "border border-border/50",
-          "bg-background backdrop-blur-lg",
-          "dark:bg-[#1A1A1A]/95 dark:border-[#2C2C2C]",
+          "bg-popover backdrop-blur-lg",
+          "border-border",
           "px-3 py-1.5 text-xs",
           "animate-in fade-in-0 zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",

package/template/src/config/navigation.ts

@@ -1,4 +1,4 @@
-import { LucideIcon, LayoutDashboard, Users, Settings, FileText } from 'lucide-react'
+import { LucideIcon, LayoutDashboard, Users, FileText } from 'lucide-react'
 
 export interface NavItem {
   title: string
@@ -45,16 +45,6 @@ export const sidebarNav: NavSection[] = [
       },
     ],
   },
-  {
-    title: 'Configuración',
-    items: [
-      {
-        title: 'Ajustes',
-        href: '/settings',
-        icon: Settings,
-      },
-    ],
-  },
 ]
 
 export const footerNav: NavItem[] = [

package/template/src/config/roles.ts

@@ -0,0 +1,27 @@
+/**
+ * Configuración centralizada de roles de usuario.
+ * Modificar aquí para agregar/quitar roles en toda la aplicación.
+ */
+
+export const USER_ROLES = ['admin', 'user', 'viewer'] as const
+
+export type UserRole = (typeof USER_ROLES)[number]
+
+export const DEFAULT_ROLE: UserRole = 'user'
+
+/**
+ * Labels para mostrar en UI (traducidos al español)
+ */
+export const ROLE_LABELS: Record<UserRole, string> = {
+  admin: 'Administrador',
+  user: 'Usuario',
+  viewer: 'Visualizador',
+}
+
+/**
+ * Opciones para selects/filtros de roles
+ */
+export const ROLE_OPTIONS = USER_ROLES.map((role) => ({
+  value: role,
+  label: ROLE_LABELS[role],
+}))

package/template/src/lib/date/config.ts

@@ -20,8 +20,10 @@ dayjs.extend(isSameOrBefore)
 // Set default locale to Spanish
 dayjs.locale('es')
 
-// Set default timezone (can be overridden)
-const DEFAULT_TIMEZONE = 'America/Mexico_City'
+// Configuración de internacionalización
+export const DEFAULT_LOCALE = 'es-AR'
+export const DEFAULT_TIMEZONE = 'America/Argentina/Buenos_Aires'
+export const DEFAULT_CURRENCY = 'ARS'
 
 export function setDefaultTimezone(tz: string) {
   dayjs.tz.setDefault(tz)

package/template/src/lib/date/formatters.ts

@@ -17,6 +17,13 @@ export function formatDateLong(date: DateInput): string {
   return dayjs(date).format('D [de] MMMM [de] YYYY')
 }
 
+/**
+ * Format date to short format (e.g., "15 ene")
+ */
+export function formatDateShort(date: DateInput): string {
+  return dayjs(date).format('D MMM')
+}
+
 /**
  * Format time (e.g., "14:30")
  */