Tech Stack

// Example: Using React 19 features
import { Suspense } from 'react'

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <InventoryPage />
    </Suspense>
  )
}

// Example: Type safety in action
interface InventoryItem {
  id_inventario: string
  stock_actual: number
  posicion: string
}

function updateStock(item: InventoryItem, newStock: number) {
  // TypeScript ensures item has correct properties
  return { ...item, stock_actual: newStock }
}

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'Trazea',
        short_name: 'Trazea',
        theme_color: '#ffffff'
      }
    })
  ],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

// Example: Tailwind in components
export function Button({ children, variant = 'primary' }: ButtonProps) {
  return (
    <button className="
      px-4 py-2 rounded-md font-medium
      transition-colors duration-200
      hover:opacity-90 focus:ring-2
      disabled:opacity-50 disabled:cursor-not-allowed
      {variant === 'primary' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-900'}
    ">
      {children}
    </button>
  )
}

import { Package, Warehouse, ClipboardList } from 'lucide-react'

<Package className="w-5 h-5" />

// Example: Cart store
import { create } from 'zustand'

interface CartState {
  items: CartItem[]
  addItem: (item: CartItem) => void
  removeItem: (id: string) => void
  clear: () => void
}

export const useCartStore = create<CartState>((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ 
    items: [...state.items, item] 
  })),
  removeItem: (id) => set((state) => ({ 
    items: state.items.filter(i => i.id !== id) 
  })),
  clear: () => set({ items: [] }),
}))

// Example: Query with TanStack Query
import { useQuery } from '@tanstack/react-query'

export function useInventory(locationId: string) {
  return useQuery({
    queryKey: ['inventory', locationId],
    queryFn: () => getInventoryItems(locationId),
    staleTime: 5 * 60 * 1000, // 5 minutes
    refetchOnWindowFocus: true,
  })
}

// Example: Mutation
export function useUpdateStock() {
  const queryClient = useQueryClient()
  
  return useMutation({
    mutationFn: updateInventoryStock,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['inventory'] })
    },
  })
}

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'

export function CreateSpareForm() {
  const form = useForm<CreateSpareData>({
    resolver: zodResolver(createSpareSchema),
    defaultValues: {
      referencia: '',
      nombre: '',
      descontinuado: false,
    }
  })
  
  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <input {...form.register('referencia')} />
      {form.formState.errors.referencia && <span>Required</span>}
    </form>
  )
}

import { z } from 'zod'

export const inventoryItemSchema = z.object({
  id_repuesto: z.string().uuid(),
  stock_actual: z.number().int().min(0),
  posicion: z.string().min(1).max(50),
  cantidad_minima: z.number().int().min(0),
})

export type InventoryItem = z.infer<typeof inventoryItemSchema>

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'inventario', element: <InventoryPage /> },
      { path: 'repuestos', element: <SparesPage /> },
      { path: 'garantias', element: <GuaranteesPage /> },
    ]
  },
  {
    path: '/login',
    element: <LoginPage />,
  },
])

import { toast } from 'sonner'

toast.success('Item added to inventory')
toast.error('Failed to update stock')
toast.promise(updateStock(), {
  loading: 'Updating...',
  success: 'Stock updated!',
  error: 'Update failed',
})

import { format, formatDistanceToNow } from 'date-fns'
import { es } from 'date-fns/locale'

format(new Date(), 'PPP', { locale: es })
// "4 de marzo de 2026"

formatDistanceToNow(item.created_at, { locale: es, addSuffix: true })
// "hace 2 horas"

import * as XLSX from 'xlsx'

const workbook = XLSX.read(fileData, { type: 'binary' })
const worksheet = workbook.Sheets[workbook.SheetNames[0]]
const data = XLSX.utils.sheet_to_json(worksheet)

import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Usage
<div className={cn(
  'base-class',
  isActive && 'active-class',
  'override-class'
)} />

import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

import * as Sentry from '@sentry/react'

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  environment: import.meta.env.MODE,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
})

import { ErrorBoundary } from '@sentry/react'
import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'

<ErrorBoundary fallback={<ErrorPage />}>
  <App />
</ErrorBoundary>

{
  "scripts": {
    "test": "vitest",
    "test:watch": "vitest --watch",
    "test:coverage": "vitest --coverage"
  }
}

{
  "pnpm": {
    "overrides": {
      "vite": "npm:[email protected]"
    }
  }
}

FROM node:22-alpine
WORKDIR /app
COPY package*.json ./
RUN pnpm install
COPY . .
RUN pnpm build
EXPOSE 80
CMD ["pnpm", "preview", "--host", "0.0.0.0", "--port", "80"]