fix: add missing UI components and utilities

- Add tabs.tsx component
- Add select.tsx component
- Add formatCurrency utility function
- Export new components from index

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/api/src/index.ts

@@ -3,7 +3,7 @@ import { env } from './config/env.js';
 
 const PORT = parseInt(env.PORT, 10);
 
-app.listen(PORT, () => {
+app.listen(PORT, '0.0.0.0', () => {
-  console.log(`🚀 API Server running on http://localhost:${PORT}`);
+  console.log(`🚀 API Server running on http://0.0.0.0:${PORT}`);
   console.log(`📊 Environment: ${env.NODE_ENV}`);
 });

apps/web/components/ui/index.ts

@@ -2,3 +2,5 @@ export { Button, buttonVariants, type ButtonProps } from './button';
 export { Input, type InputProps } from './input';
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card';
 export { Label } from './label';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './select';

apps/web/components/ui/select.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { ChevronDown } from 'lucide-react';
+
+interface SelectContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const SelectContext = React.createContext<SelectContextValue | undefined>(undefined);
+
+interface SelectProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+}
+
+export function Select({ value, defaultValue = '', onValueChange, children }: SelectProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [open, setOpen] = React.useState(false);
+  const currentValue = value ?? internalValue;
+
+  const handleValueChange = React.useCallback((newValue: string) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+    setOpen(false);
+  }, [onValueChange]);
+
+  return (
+    <SelectContext.Provider value={{ value: currentValue, onValueChange: handleValueChange, open, setOpen }}>
+      <div className="relative">{children}</div>
+    </SelectContext.Provider>
+  );
+}
+
+export function SelectTrigger({ children, className }: { children: React.ReactNode; className?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error('SelectTrigger must be used within Select');
+
+  return (
+    <button
+      type="button"
+      onClick={() => context.setOpen(!context.open)}
+      className={cn(
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </button>
+  );
+}
+
+export function SelectValue({ placeholder }: { placeholder?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error('SelectValue must be used within Select');
+
+  return <span>{context.value || placeholder}</span>;
+}
+
+export function SelectContent({ children, className }: { children: React.ReactNode; className?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error('SelectContent must be used within Select');
+
+  if (!context.open) return null;
+
+  return (
+    <div className={cn(
+      'absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+      className
+    )}>
+      {children}
+    </div>
+  );
+}
+
+export function SelectItem({ value, children, className }: { value: string; children: React.ReactNode; className?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error('SelectItem must be used within Select');
+
+  return (
+    <div
+      onClick={() => context.onValueChange(value)}
+      className={cn(
+        'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground',
+        context.value === value && 'bg-accent text-accent-foreground',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}

apps/web/components/ui/tabs.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const TabsContext = React.createContext<TabsContextValue | undefined>(undefined);
+
+interface TabsProps {
+  defaultValue: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Tabs({ defaultValue, value, onValueChange, children, className }: TabsProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const currentValue = value ?? internalValue;
+
+  const handleValueChange = React.useCallback((newValue: string) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+  }, [onValueChange]);
+
+  return (
+    <TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
+      <div className={className}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn('inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground', className)}>
+      {children}
+    </div>
+  );
+}
+
+export function TabsTrigger({ value, children, className }: { value: string; children: React.ReactNode; className?: string }) {
+  const context = React.useContext(TabsContext);
+  if (!context) throw new Error('TabsTrigger must be used within Tabs');
+
+  const isActive = context.value === value;
+
+  return (
+    <button
+      onClick={() => context.onValueChange(value)}
+      className={cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        isActive && 'bg-background text-foreground shadow-sm',
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TabsContent({ value, children, className }: { value: string; children: React.ReactNode; className?: string }) {
+  const context = React.useContext(TabsContext);
+  if (!context) throw new Error('TabsContent must be used within Tabs');
+
+  if (context.value !== value) return null;
+
+  return <div className={cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)}>{children}</div>;
+}

apps/web/lib/utils.ts

@@ -4,3 +4,12 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function formatCurrency(value: number): string {
+  return new Intl.NumberFormat('es-MX', {
+    style: 'currency',
+    currency: 'MXN',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+}