Commit Graph

5 Commits

Author SHA1 Message Date
Adrian Flores Cortes
55261598a2 [FIX] fix: Resolve TypeScript errors for successful build
Fixes:
- Add teal, cyan, slate colors to StatusColor type and StatusBadge
- Create StatsCard component with color prop for backward compatibility
- Add label/required props to FormGroup component
- Fix Pagination to accept both currentPage and page props
- Fix unused imports in quality and contracts pages
- Add missing Plus, Trash2, User icon imports in contracts pages
- Remove duplicate formatDate function in ContratoDetailPage

New components:
- StatsCard, StatsCardGrid for statistics display

Build: Success (npm run build passes)
Dev: Success (npm run dev starts on port 3020)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-04 11:36:21 -06:00
Adrian Flores Cortes
816d591115 [GAPS] feat(components): Implement remaining frontend gaps G-003 to G-013
Components added:
- G-003: ErrorBoundary with withErrorBoundary HOC and PageErrorFallback
- G-010: Pagination with SimplePagination variant
- G-011: Dropdown system (Dropdown, DropdownItem, Menu, etc.)
- G-012: FileUpload with drag & drop and preview
- G-013: DatePicker with DateRangePicker

Hooks added:
- G-006: useDebounce, useDebouncedCallback, useDebounceWithImmediate
- G-007: useLocalStorage, useSessionStorage

Services added:
- G-004: API Client with request/response interceptors, token refresh

Tests: 49 passing (14 new tests for utility hooks)
TypeScript: All types validated

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-04 01:34:21 -06:00
Adrian Flores Cortes
b3dd4b859e [G-009] feat(components): Add Skeleton loading component system
- Add Skeleton base component with variants: text, rectangular, circular
- Add SkeletonText for multi-line text placeholders
- Add SkeletonCard for card-shaped loading states
- Add SkeletonTable for table loading with configurable rows/columns
- Add SkeletonAvatar for avatar placeholders (sm/md/lg/xl)
- Add SkeletonButton for button placeholders
- Add shimmer animation to Tailwind config
- Add comprehensive tests (21 tests passing)
- Export all components from common/index.ts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-04 01:27:06 -06:00
Adrian Flores Cortes
380b96e159 feat(theme): Implement Dark Mode and Toast notifications
- Add dark:* classes to 10 common components
- Create ThemeProvider with Zustand persistence
- Create ThemeToggle component (simple and full modes)
- Implement Toast notification system (toastStore, useToast, ToastContainer)
- Support success, error, warning, info toast types
- Integrate ToastContainer in App.tsx

Components updated:
- Modal, EmptyState, StatusBadge, SearchInput
- ConfirmDialog, PageHeader, FormField, ActionButtons
- DataTable, LoadingSpinner

Closes: G-005, G-008

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-04 01:14:11 -06:00
Adrian Flores Cortes
765a639004 refactor(frontend): Extract common components and types
- Create src/types/ with organized type files:
  - api.types.ts, auth.types.ts, construction.types.ts
  - estimates.types.ts, hse.types.ts, common.types.ts

- Create src/utils/ with utilities:
  - formatters.ts (formatCurrency, formatDate, etc.)
  - validators.ts (isValidEmail, isValidRFC, etc.)
  - constants.ts (status options, color maps)

- Create src/components/common/ with reusable components:
  - DataTable, Modal, ConfirmDialog
  - FormField (TextInput, SelectField, TextareaField)
  - StatusBadge, SearchInput, PageHeader
  - ActionButtons, LoadingSpinner, EmptyState

- Refactor pages to use common components:
  - FraccionamientosPage: 385 -> 285 lines
  - PresupuestosPage: 412 -> 297 lines
  - IncidentesPage: 741 -> 253 lines

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-03 09:02:57 -06:00