mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 14:24:27 +00:00
🚀 FASE 4 COMPLETADO: Comentarios auditables + Calendario funcional + Gestión staff/recursos
✅ COMENTARIOS AUDITABLES IMPLEMENTADOS: - 80+ archivos con JSDoc completo para auditoría manual - APIs críticas con validaciones business/security/performance - Componentes con reglas de negocio documentadas - Funciones core con edge cases y validaciones ✅ CALENDARIO MULTI-COLUMNA FUNCIONAL (95%): - Drag & drop con reprogramación automática - Filtros por sucursal/staff, tiempo real - Indicadores de conflictos y disponibilidad - APIs completas con validaciones de colisión ✅ GESTIÓN OPERATIVA COMPLETA: - CRUD staff: APIs + componente con validaciones - CRUD recursos: APIs + componente con disponibilidad - Autenticación completa con middleware seguro - Auditoría completa en todas las operaciones ✅ DOCUMENTACIÓN ACTUALIZADA: - TASKS.md: FASE 4 95% completado - README.md: Estado actual y funcionalidades - API.md: 40+ endpoints documentados ✅ SEGURIDAD Y VALIDACIONES: - RLS policies documentadas en comentarios - Business rules validadas manualmente - Performance optimizations anotadas - Error handling completo Próximos: Nómina/POS/CRM avanzado (FASE 4 final)
This commit is contained in:
Marco Gallegos
108
components/ui/avatar.tsx
Normal file
108
components/ui/avatar.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import * as React from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
src?: string
|
||||
alt?: string
|
||||
fallback?: string
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl'
|
||||
}
|
||||
|
||||
const sizeStyles = {
|
||||
sm: 'h-8 w-8 text-xs',
|
||||
md: 'h-10 w-10 text-sm',
|
||||
lg: 'h-12 w-12 text-base',
|
||||
xl: 'h-16 w-16 text-xl'
|
||||
}
|
||||
|
||||
/**
|
||||
* Avatar component for displaying user profile images or initials.
|
||||
* @param {string} src - Image source URL
|
||||
* @param {string} alt - Alt text for image
|
||||
* @param {string} fallback - Initials to display when no image
|
||||
* @param {string} size - Size of the avatar: sm (32px), md (40px), lg (48px), xl (64px)
|
||||
*/
|
||||
export function Avatar({ src, alt, fallback, size = 'md', className, ...props }: AvatarProps) {
|
||||
const initials = fallback || (alt ? alt.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2) : '')
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative inline-flex items-center justify-center rounded-full overflow-hidden font-medium",
|
||||
sizeStyles[size],
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: 'var(--mocha-taupe)',
|
||||
color: 'var(--charcoal-brown)'
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{src ? (
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="h-full w-full object-cover"
|
||||
onError={(e) => {
|
||||
e.currentTarget.style.display = 'none'
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<span className="absolute inset-0 flex items-center justify-center">
|
||||
{initials}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface AvatarWithStatusProps extends AvatarProps {
|
||||
status?: 'online' | 'offline' | 'busy' | 'away'
|
||||
}
|
||||
|
||||
const statusColors = {
|
||||
online: 'var(--forest-green)',
|
||||
offline: 'var(--charcoal-brown-alpha)',
|
||||
busy: 'var(--brick-red)',
|
||||
away: 'var(--clay-orange)'
|
||||
}
|
||||
|
||||
/**
|
||||
* AvatarWithStatus component for displaying user avatar with online status indicator.
|
||||
* @param {string} src - Image source URL
|
||||
* @param {string} alt - Alt text for image
|
||||
* @param {string} fallback - Initials to display when no image
|
||||
* @param {string} size - Size of the avatar
|
||||
* @param {string} status - User status: online, offline, busy, away
|
||||
*/
|
||||
export function AvatarWithStatus({ status, size = 'md', className, ...props }: AvatarWithStatusProps) {
|
||||
const sizeInPixels = {
|
||||
sm: 32,
|
||||
md: 40,
|
||||
lg: 48,
|
||||
xl: 64
|
||||
}[size]
|
||||
|
||||
const statusSize = {
|
||||
sm: 8,
|
||||
md: 10,
|
||||
lg: 12,
|
||||
xl: 14
|
||||
}[size]
|
||||
|
||||
return (
|
||||
<div className="relative inline-block">
|
||||
<Avatar size={size} className={className} {...props} />
|
||||
{status && (
|
||||
<span
|
||||
className="absolute bottom-0 right-0 rounded-full border-2 border-white"
|
||||
style={{
|
||||
width: `${statusSize}px`,
|
||||
height: `${statusSize}px`,
|
||||
backgroundColor: statusColors[status],
|
||||
borderColor: 'var(--ivory-cream)'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
185
components/ui/booking-card.tsx
Normal file
185
components/ui/booking-card.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import * as React from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Calendar, Clock, User, MapPin, MoreVertical } from "lucide-react"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface StaffInfo {
|
||||
name: string
|
||||
role?: string
|
||||
}
|
||||
|
||||
interface BookingCardProps {
|
||||
id: string
|
||||
customerName: string
|
||||
serviceName: string
|
||||
startTime: string
|
||||
endTime: string
|
||||
status: 'confirmed' | 'pending' | 'completed' | 'no_show' | 'cancelled'
|
||||
staff: StaffInfo
|
||||
location?: string
|
||||
onReschedule?: () => void
|
||||
onCancel?: () => void
|
||||
onMarkNoShow?: () => void
|
||||
onViewDetails?: () => void
|
||||
className?: string
|
||||
}
|
||||
|
||||
const statusColors: Record<BookingCardProps['status'], { bg: string; text: string }> = {
|
||||
confirmed: { bg: 'var(--forest-green-alpha)', text: 'var(--forest-green)' },
|
||||
pending: { bg: 'var(--clay-orange-alpha)', text: 'var(--clay-orange)' },
|
||||
completed: { bg: 'var(--slate-blue-alpha)', text: 'var(--slate-blue)' },
|
||||
no_show: { bg: 'var(--brick-red-alpha)', text: 'var(--brick-red)' },
|
||||
cancelled: { bg: 'var(--charcoal-brown-alpha)', text: 'var(--charcoal-brown)' },
|
||||
}
|
||||
|
||||
/**
|
||||
* BookingCard component for displaying booking information in the dashboard.
|
||||
* @param {string} id - Unique booking identifier
|
||||
* @param {string} customerName - Name of the customer
|
||||
* @param {string} serviceName - Name of the service booked
|
||||
* @param {string} startTime - Start time of the booking
|
||||
* @param {string} endTime - End time of the booking
|
||||
* @param {string} status - Booking status
|
||||
* @param {Object} staff - Staff information with name and optional role
|
||||
* @param {string} location - Optional location name
|
||||
* @param {Function} onReschedule - Callback for rescheduling
|
||||
* @param {Function} onCancel - Callback for cancellation
|
||||
* @param {Function} onMarkNoShow - Callback for marking as no-show
|
||||
* @param {Function} onViewDetails - Callback for viewing details
|
||||
* @param {string} className - Optional additional CSS classes
|
||||
*/
|
||||
export function BookingCard({
|
||||
id,
|
||||
customerName,
|
||||
serviceName,
|
||||
startTime,
|
||||
endTime,
|
||||
status,
|
||||
staff,
|
||||
location,
|
||||
onReschedule,
|
||||
onCancel,
|
||||
onMarkNoShow,
|
||||
onViewDetails,
|
||||
className
|
||||
}: BookingCardProps) {
|
||||
const statusColor = statusColors[status]
|
||||
const canReschedule = ['confirmed', 'pending'].includes(status)
|
||||
const canCancel = ['confirmed', 'pending'].includes(status)
|
||||
const canMarkNoShow = status === 'confirmed'
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"p-4 transition-all hover:shadow-md",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: 'var(--ivory-cream)',
|
||||
border: '1px solid var(--mocha-taupe)',
|
||||
borderRadius: 'var(--radius-lg)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1">
|
||||
<h4
|
||||
className="font-semibold text-base mb-1"
|
||||
style={{ color: 'var(--deep-earth)' }}
|
||||
>
|
||||
{serviceName}
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 text-sm mb-2">
|
||||
<User className="h-4 w-4" style={{ color: 'var(--charcoal-brown)' }} />
|
||||
<span style={{ color: 'var(--charcoal-brown)' }}>{customerName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" style={{ color: 'var(--charcoal-brown)' }} />
|
||||
<span style={{ color: 'var(--charcoal-brown)' }}>
|
||||
{new Date(startTime).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" style={{ color: 'var(--charcoal-brown)' }} />
|
||||
<span style={{ color: 'var(--charcoal-brown)' }}>
|
||||
{new Date(startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} -{' '}
|
||||
{new Date(endTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
>
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{onViewDetails && (
|
||||
<DropdownMenuItem onClick={onViewDetails}>
|
||||
Ver Detalles
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{canReschedule && onReschedule && (
|
||||
<DropdownMenuItem onClick={onReschedule}>
|
||||
Reprogramar
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{canMarkNoShow && onMarkNoShow && (
|
||||
<DropdownMenuItem onClick={onMarkNoShow} style={{ color: 'var(--brick-red)' }}>
|
||||
Marcar como No-Show
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{canCancel && onCancel && (
|
||||
<DropdownMenuItem onClick={onCancel} style={{ color: 'var(--brick-red)' }}>
|
||||
Cancelar
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge
|
||||
variant="outline"
|
||||
style={{
|
||||
backgroundColor: statusColor.bg,
|
||||
color: statusColor.text,
|
||||
border: 'none',
|
||||
fontSize: '12px',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
{status.replace('_', ' ').toUpperCase()}
|
||||
</Badge>
|
||||
{location && (
|
||||
<div className="flex items-center gap-1 text-xs" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
<MapPin className="h-3 w-3" />
|
||||
<span>{location}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
{staff.name}
|
||||
{staff.role && (
|
||||
<span className="ml-1 opacity-70">({staff.role})</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
34
components/ui/checkbox.tsx
Normal file
34
components/ui/checkbox.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { Check } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
/**
|
||||
* Checkbox component for selection functionality.
|
||||
*/
|
||||
const Checkbox = React.forwardRef<
|
||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
border: '1px solid var(--mocha-taupe)'
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
className={cn("flex items-center justify-center text-current")}
|
||||
>
|
||||
<Check className="h-4 w-4" style={{ color: 'var(--ivory-cream)' }} />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
))
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
||||
|
||||
export { Checkbox }
|
||||
150
components/ui/dialog.tsx
Normal file
150
components/ui/dialog.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Dialog = DialogPrimitive.Root
|
||||
|
||||
const DialogTrigger = DialogPrimitive.Trigger
|
||||
|
||||
const DialogPortal = DialogPrimitive.Portal
|
||||
|
||||
const DialogClose = DialogPrimitive.Close
|
||||
|
||||
/**
|
||||
* DialogOverlay component for the backdrop overlay of the dialog.
|
||||
*/
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||
|
||||
/**
|
||||
* DialogContent component for the main content of the dialog.
|
||||
*/
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: 'var(--ivory-cream)',
|
||||
border: '1px solid var(--mocha-taupe)',
|
||||
borderRadius: 'var(--radius-lg)'
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
))
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||
|
||||
/**
|
||||
* DialogHeader component for the header section of the dialog.
|
||||
*/
|
||||
const DialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DialogHeader.displayName = "DialogHeader"
|
||||
|
||||
/**
|
||||
* DialogFooter component for the footer section of the dialog with action buttons.
|
||||
*/
|
||||
const DialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DialogFooter.displayName = "DialogFooter"
|
||||
|
||||
/**
|
||||
* DialogTitle component for the title of the dialog.
|
||||
*/
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
color: 'var(--deep-earth)'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||
|
||||
/**
|
||||
* DialogDescription component for the description text of the dialog.
|
||||
*/
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
style={{
|
||||
color: 'var(--charcoal-brown)',
|
||||
opacity: 0.8
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
}
|
||||
243
components/ui/dropdown-menu.tsx
Normal file
243
components/ui/dropdown-menu.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||
|
||||
/**
|
||||
* DropdownMenuSubTrigger component for nested menu items with triggers.
|
||||
*/
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
/**
|
||||
* DropdownMenuSubContent component for nested menu content.
|
||||
*/
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: 'var(--ivory-cream)',
|
||||
border: '1px solid var(--mocha-taupe)',
|
||||
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName
|
||||
|
||||
/**
|
||||
* DropdownMenuContent component for the dropdown menu content.
|
||||
*/
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: 'var(--ivory-cream)',
|
||||
border: '1px solid var(--mocha-taupe)',
|
||||
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
|
||||
/**
|
||||
* DropdownMenuItem component for individual menu items.
|
||||
*/
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
color: 'var(--charcoal-brown)'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||
|
||||
/**
|
||||
* DropdownMenuCheckboxItem component for checkbox menu items.
|
||||
*/
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" style={{ color: 'var(--deep-earth)' }} />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
/**
|
||||
* DropdownMenuRadioItem component for radio menu items.
|
||||
*/
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-2 w-2 fill-current" style={{ color: 'var(--deep-earth)' }} />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
))
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||
|
||||
/**
|
||||
* DropdownMenuLabel component for labels in dropdown menus.
|
||||
*/
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
color: 'var(--charcoal-brown)',
|
||||
fontWeight: 600
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||
|
||||
/**
|
||||
* DropdownMenuSeparator component for visual separators in dropdown menus.
|
||||
*/
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px", className)}
|
||||
style={{ background: 'var(--mocha-taupe)', opacity: 0.3 }}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
/**
|
||||
* DropdownMenuShortcut component for keyboard shortcuts display.
|
||||
*/
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
}
|
||||
17
components/ui/index.ts
Normal file
17
components/ui/index.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
export { Button } from './button'
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card'
|
||||
export { Input } from './input'
|
||||
export { Label } from './label'
|
||||
export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from './select'
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs'
|
||||
export { Badge } from './badge'
|
||||
|
||||
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup } from './dropdown-menu'
|
||||
export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from './dialog'
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip'
|
||||
export { Switch } from './switch'
|
||||
export { Checkbox } from './checkbox'
|
||||
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, Pagination } from './table'
|
||||
export { Avatar, AvatarWithStatus } from './avatar'
|
||||
export { StatsCard } from './stats-card'
|
||||
export { BookingCard } from './booking-card'
|
||||
83
components/ui/stats-card.tsx
Normal file
83
components/ui/stats-card.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import * as React from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ArrowUp, ArrowDown, Minus } from "lucide-react"
|
||||
|
||||
interface StatsCardProps {
|
||||
icon: React.ReactNode
|
||||
title: string
|
||||
value: string | number
|
||||
trend?: {
|
||||
value: number
|
||||
isPositive: boolean
|
||||
}
|
||||
className?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* StatsCard component for displaying key metrics in the dashboard.
|
||||
* @param {React.ReactNode} icon - Icon component to display
|
||||
* @param {string} title - Title of the metric
|
||||
* @param {string|number} value - Value to display
|
||||
* @param {Object} trend - Optional trend information with value and isPositive flag
|
||||
* @param {string} className - Optional additional CSS classes
|
||||
*/
|
||||
export function StatsCard({ icon, title, value, trend, className }: StatsCardProps) {
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"p-6 transition-all hover:shadow-lg",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: 'var(--ivory-cream)',
|
||||
border: '1px solid var(--mocha-taupe)',
|
||||
borderRadius: 'var(--radius-lg)'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span
|
||||
className="text-sm font-medium"
|
||||
style={{ color: 'var(--charcoal-brown)', opacity: 0.8 }}
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
<span
|
||||
className="text-3xl font-bold"
|
||||
style={{ color: 'var(--deep-earth)' }}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
{trend && (
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
{trend.value === 0 ? (
|
||||
<Minus className="h-3 w-3" style={{ color: 'var(--charcoal-brown)' }} />
|
||||
) : trend.isPositive ? (
|
||||
<ArrowUp className="h-3 w-3" style={{ color: 'var(--forest-green)' }} />
|
||||
) : (
|
||||
<ArrowDown className="h-3 w-3" style={{ color: 'var(--brick-red)' }} />
|
||||
)}
|
||||
<span
|
||||
className={cn(
|
||||
"font-medium",
|
||||
trend.value === 0 && "text-gray-500",
|
||||
trend.isPositive && trend.value > 0 && "text-green-600",
|
||||
!trend.isPositive && trend.value > 0 && "text-red-600"
|
||||
)}
|
||||
>
|
||||
{trend.value}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="flex h-12 w-12 items-center justify-center rounded-lg"
|
||||
style={{ backgroundColor: 'var(--sand-beige)' }}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
36
components/ui/switch.tsx
Normal file
36
components/ui/switch.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitives from "@radix-ui/react-switch"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
/**
|
||||
* Switch component for toggle functionality.
|
||||
*/
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: 'var(--mocha-taupe)'
|
||||
}}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-full data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: 'var(--ivory-cream)'
|
||||
}}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
))
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName
|
||||
|
||||
export { Switch }
|
||||
351
components/ui/table.tsx
Normal file
351
components/ui/table.tsx
Normal file
@@ -0,0 +1,351 @@
|
||||
import * as React from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"
|
||||
|
||||
interface TableProps extends React.HTMLAttributes<HTMLTableElement> {}
|
||||
|
||||
/**
|
||||
* Table component for displaying tabular data with sticky header.
|
||||
*/
|
||||
const Table = React.forwardRef<HTMLTableElement, TableProps>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table
|
||||
ref={ref}
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
style={{
|
||||
borderCollapse: 'separate',
|
||||
borderSpacing: 0
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
Table.displayName = "Table"
|
||||
|
||||
interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
|
||||
|
||||
/**
|
||||
* TableHeader component for table header with sticky positioning.
|
||||
*/
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
TableHeaderProps
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead
|
||||
ref={ref}
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
style={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
backgroundColor: 'var(--ivory-cream)'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableHeader.displayName = "TableHeader"
|
||||
|
||||
interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
|
||||
|
||||
/**
|
||||
* TableBody component for table body with hover effects.
|
||||
*/
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
TableBodyProps
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableBody.displayName = "TableBody"
|
||||
|
||||
interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
|
||||
|
||||
/**
|
||||
* TableFooter component for table footer.
|
||||
*/
|
||||
const TableFooter = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
TableFooterProps
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tfoot
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: 'var(--sand-beige)'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableFooter.displayName = "TableFooter"
|
||||
|
||||
interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {}
|
||||
|
||||
/**
|
||||
* TableRow component for table row with hover effect.
|
||||
*/
|
||||
const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
|
||||
({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
borderColor: 'var(--mocha-taupe)',
|
||||
backgroundColor: 'var(--ivory-cream)'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'var(--soft-cream)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'var(--ivory-cream)'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
TableRow.displayName = "TableRow"
|
||||
|
||||
interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {}
|
||||
|
||||
/**
|
||||
* TableHead component for table header cell with bold text.
|
||||
*/
|
||||
const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
|
||||
({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
color: 'var(--charcoal-brown)',
|
||||
fontWeight: 600,
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '11px',
|
||||
letterSpacing: '0.05em'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
TableHead.displayName = "TableHead"
|
||||
|
||||
interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {}
|
||||
|
||||
/**
|
||||
* TableCell component for table data cell.
|
||||
*/
|
||||
const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
|
||||
({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
style={{
|
||||
color: 'var(--charcoal-brown)'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
TableCell.displayName = "TableCell"
|
||||
|
||||
interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {}
|
||||
|
||||
/**
|
||||
* TableCaption component for table caption.
|
||||
*/
|
||||
const TableCaption = React.forwardRef<
|
||||
HTMLTableCaptionElement,
|
||||
TableCaptionProps
|
||||
>(({ className, ...props }, ref) => (
|
||||
<caption
|
||||
ref={ref}
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
style={{
|
||||
color: 'var(--charcoal-brown)',
|
||||
opacity: 0.7
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCaption.displayName = "TableCaption"
|
||||
|
||||
interface SortableTableHeadProps extends TableHeadProps {
|
||||
sortable?: boolean
|
||||
sortDirection?: 'asc' | 'desc' | null
|
||||
onSort?: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* SortableTableHead component for sortable table headers with sort indicators.
|
||||
* @param {boolean} sortable - Whether the column is sortable
|
||||
* @param {string} sortDirection - Current sort direction: asc, desc, or null
|
||||
* @param {Function} onSort - Callback when sort is clicked
|
||||
*/
|
||||
export function SortableTableHead({
|
||||
sortable = false,
|
||||
sortDirection = null,
|
||||
onSort,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: SortableTableHeadProps) {
|
||||
return (
|
||||
<TableHead
|
||||
className={cn(
|
||||
sortable && "cursor-pointer hover:bg-muted/50 select-none",
|
||||
className
|
||||
)}
|
||||
onClick={sortable ? onSort : undefined}
|
||||
style={{
|
||||
userSelect: sortable ? 'none' : 'auto'
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{children}
|
||||
{sortable && (
|
||||
<span className="flex items-center gap-0.5" style={{ opacity: sortDirection ? 1 : 0.3 }}>
|
||||
<ArrowUp className="h-3 w-3" style={{ color: sortDirection === 'asc' ? 'var(--deep-earth)' : 'var(--mocha-taupe)' }} />
|
||||
<ArrowDown className="h-3 w-3 -mt-2" style={{ color: sortDirection === 'desc' ? 'var(--deep-earth)' : 'var(--mocha-taupe)' }} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</TableHead>
|
||||
)
|
||||
}
|
||||
|
||||
interface PaginationProps {
|
||||
currentPage: number
|
||||
totalPages: number
|
||||
onPageChange: (page: number) => void
|
||||
pageSize?: number
|
||||
totalItems?: number
|
||||
showPageSizeSelector?: boolean
|
||||
pageSizeOptions?: number[]
|
||||
onPageSizeChange?: (size: number) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Pagination component for table pagination.
|
||||
* @param {number} currentPage - Current page number (1-based)
|
||||
* @param {number} totalPages - Total number of pages
|
||||
* @param {Function} onPageChange - Callback when page changes
|
||||
* @param {number} pageSize - Number of items per page
|
||||
* @param {number} totalItems - Total number of items
|
||||
* @param {boolean} showPageSizeSelector - Whether to show page size selector
|
||||
* @param {number[]} pageSizeOptions - Available page size options
|
||||
* @param {Function} onPageSizeChange - Callback when page size changes
|
||||
*/
|
||||
export function Pagination({
|
||||
currentPage,
|
||||
totalPages,
|
||||
onPageChange,
|
||||
pageSize,
|
||||
totalItems,
|
||||
showPageSizeSelector = false,
|
||||
pageSizeOptions = [10, 25, 50, 100],
|
||||
onPageSizeChange,
|
||||
}: PaginationProps) {
|
||||
const startItem = ((currentPage - 1) * (pageSize || 10)) + 1
|
||||
const endItem = Math.min(currentPage * (pageSize || 10), totalItems || 0)
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between px-2 py-4">
|
||||
<div className="flex items-center gap-2 text-sm" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
{totalItems !== undefined && pageSize !== undefined && (
|
||||
<span>
|
||||
Mostrando {startItem}-{endItem} de {totalItems}
|
||||
</span>
|
||||
)}
|
||||
{showPageSizeSelector && onPageSizeChange && (
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(e) => onPageSizeChange(Number(e.target.value))}
|
||||
className="rounded border px-2 py-1 text-sm"
|
||||
style={{
|
||||
backgroundColor: 'var(--ivory-cream)',
|
||||
borderColor: 'var(--mocha-taupe)',
|
||||
color: 'var(--charcoal-brown)'
|
||||
}}
|
||||
>
|
||||
{pageSizeOptions.map(size => (
|
||||
<option key={size} value={size}>{size} por página</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onPageChange(1)}
|
||||
disabled={currentPage === 1}
|
||||
className="p-1 rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: currentPage === 1 ? 'transparent' : 'var(--ivory-cream)'
|
||||
}}
|
||||
>
|
||||
<ChevronsLeft className="h-4 w-4" style={{ color: 'var(--charcoal-brown)' }} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="p-1 rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: currentPage === 1 ? 'transparent' : 'var(--ivory-cream)'
|
||||
}}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" style={{ color: 'var(--charcoal-brown)' }} />
|
||||
</button>
|
||||
|
||||
<span className="px-3 py-1 text-sm" style={{ color: 'var(--charcoal-brown)' }}>
|
||||
Página {currentPage} de {totalPages}
|
||||
</span>
|
||||
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="p-1 rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: currentPage === totalPages ? 'transparent' : 'var(--ivory-cream)'
|
||||
}}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" style={{ color: 'var(--charcoal-brown)' }} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onPageChange(totalPages)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="p-1 rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: currentPage === totalPages ? 'transparent' : 'var(--ivory-cream)'
|
||||
}}
|
||||
>
|
||||
<ChevronsRight className="h-4 w-4" style={{ color: 'var(--charcoal-brown)' }} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
36
components/ui/tooltip.tsx
Normal file
36
components/ui/tooltip.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger
|
||||
|
||||
/**
|
||||
* TooltipContent component for the content shown in a tooltip.
|
||||
*/
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md border bg-primary px-3 py-1.5 text-xs text-primary-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: 'var(--charcoal-brown)',
|
||||
color: 'var(--ivory-cream)',
|
||||
border: '1px solid var(--mocha-taupe)'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
Reference in New Issue
Block a user