Tech Stack - SIGEAC

Overview

SIGEAC is built with modern web technologies focused on performance, developer experience, and maintainability.

Core Technologies

Next.js 14

React framework with App Router

React 18

UI library with hooks and concurrent features

TypeScript 5

Type-safe JavaScript

Framework & Runtime

Next.js 14.2.14

SIGEAC uses Next.js 14 with the App Router for:

Server Components - Improved performance with server-side rendering
File-based Routing - Intuitive route structure in /app directory
Layouts - Shared UI across routes
Dynamic Routes - [company] parameter for multi-tenancy
Middleware - Route protection and authentication
API Routes - Backend-for-frontend patterns

// Example: Dynamic company route
// app/[company]/dashboard/page.tsx
export default function DashboardPage() {
  const { selectedCompany } = useCompanyStore()
  return <div>Dashboard for {selectedCompany?.name}</div>
}

React 18

Utilizing React 18 features:

Hooks - useState, useEffect, useContext, custom hooks
Suspense - Loading states and code splitting
Concurrent Rendering - Better performance for complex UIs
Client Components - Interactive components with 'use client'

See: app/[company]/dashboard/page.tsx:1

TypeScript 5

Full type safety across the application:

Strict Mode - Enabled for maximum type safety
Type Definitions - Comprehensive types in types/index.ts
Path Aliases - @/* for clean imports
IntelliSense - Better IDE support

See: types/index.ts:1

State Management

React Query
Zustand
React Context

@tanstack/react-query ^5.51.9Server state management and data fetching:

import { useQuery } from "@tanstack/react-query"

export const useGetClients = (company: string | undefined) => {
  return useQuery<Client[]>({
    queryKey: ["clients", company],
    queryFn: () => fetchClients(company),
    staleTime: 1000 * 60 * 2,
    enabled: !!company,
  })
}

See: hooks/general/clientes/useGetClients.ts:12Features:

Automatic caching and background updates
Optimistic updates
Infinite queries and pagination
Request deduplication

zustand ^4.5.4Client-side state management:

import { create } from "zustand"

export const useCompanyStore = create<CompanyState & CompanyActions>((set) => ({
  selectedCompany: null,
  selectedStation: null,
  
  setSelectedCompany: (company) => {
    set({ selectedCompany: company })
    localStorage.setItem('selectedCompany', JSON.stringify(company))
  },
  
  initFromLocalStorage: () => {
    const saved = localStorage.getItem('selectedCompany')
    if (saved) set({ selectedCompany: JSON.parse(saved) })
  },
}))

See: stores/CompanyStore.ts:29Features:

Simple API with minimal boilerplate
No providers needed
TypeScript support
Middleware support

Built-in React Context APIGlobal authentication state:

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setIsLoading] = useState(true)
  
  const logout = useCallback(async () => {
    setUser(null)
    await deleteSession()
    queryClient.clear()
    router.push('/login')
  }, [router, queryClient])
  
  return (
    <AuthContext.Provider value={{ user, loading, logout }}>
      {children}
    </AuthContext.Provider>
  )
}

See: contexts/AuthContext.tsx:35

UI & Styling

Tailwind CSS 3.4.1

Utility-first CSS framework:

<div className="flex items-center justify-between p-4 bg-background text-foreground">
  <h1 className="text-2xl font-bold">Title</h1>
  <Button className="bg-primary hover:bg-primary/90">Action</Button>
</div>

Additional Packages:

tailwindcss-animate - Pre-built animations
tailwind-merge - Merge Tailwind classes efficiently
class-variance-authority - Variant-based component styling

shadcn/ui Components

Built on Radix UI primitives:

@radix-ui/react-dialog

Accessible modals and dialogs

@radix-ui/react-dropdown-menu

Dropdown menus and context menus

@radix-ui/react-select

Custom select components

@radix-ui/react-toast

Toast notifications

All Radix components provide:

Full keyboard navigation
ARIA attributes
Focus management
Unstyled by default (styled with Tailwind)

Additional UI Libraries

package.json

{
  "dependencies": {
    "framer-motion": "^11.3.19",      // Animations
    "lucide-react": "^0.408.0",       // Icons
    "react-icons": "^5.5.0",          // Additional icons
    "sonner": "^1.5.0",               // Toast notifications
    "next-themes": "^0.3.0"           // Dark mode support
  }
}

Data Visualization

Recharts
TanStack Table
Schedule-X

recharts ^2.15.1Chart library built on D3:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'

export function FlightHoursChart({ data }) {
  return (
    <LineChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="hours" stroke="#8884d8" />
    </LineChart>
  )
}

Features:

Line, Bar, Pie, Area charts
Responsive design
Animations
Tooltips and legends

@tanstack/react-table ^8.19.3Headless table library:

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
})

Features:

Sorting, filtering, pagination
Column resizing and reordering
Row selection
Virtualization support

@schedule-x/react ^2.36.0Calendar and scheduling:

import { ScheduleXCalendar } from '@schedule-x/react'

export function FlightCalendar({ events }) {
  return (
    <ScheduleXCalendar
      calendarApp={calendar}
      events={events}
    />
  )
}

Features:

Drag and drop events
Multiple views (day, week, month)
Event modals
Responsive design

Forms & Validation

React Hook Form 7.52.1

Performant form handling:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"

const clientSchema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email"),
  phone: z.string().optional(),
})

export function ClientForm() {
  const form = useForm<z.infer<typeof clientSchema>>({
    resolver: zodResolver(clientSchema),
  })
  
  const onSubmit = (data: z.infer<typeof clientSchema>) => {
    // Handle form submission
  }
  
  return <form onSubmit={form.handleSubmit(onSubmit)}>...</form>
}

Features:

Minimal re-renders
Easy validation integration
TypeScript support
Field arrays and dynamic forms

Zod 3.23.8

Schema validation:

import { z } from "zod"

const createClientSchema = z.object({
  name: z.string().min(1),
  email: z.string().email().optional(),
  dni: z.string().min(1),
  dni_type: z.enum(["V", "E", "J", "G"]),
  authorizing: z.enum(["PROPIETARIO", "EXPLOTADOR"]),
})

type CreateClientInput = z.infer<typeof createClientSchema>

HTTP Client

Axios 1.7.2

Configured HTTP client:

import axios from 'axios'
import Cookies from 'js-cookie'

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
  withCredentials: true,
})

// Request interceptor - Add auth token
axiosInstance.interceptors.request.use((config) => {
  const token = Cookies.get('auth_token')
  if (token) {
    config.headers.Authorization = token.startsWith('Bearer ') 
      ? token 
      : `Bearer ${token}`
  }
  return config
})

// Response interceptor - Handle 401
axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      Cookies.remove('auth_token')
      window.location.href = '/login?session=expired'
    }
    return Promise.reject(error)
  }
)

See: lib/axios.ts:1

Date & Time

date-fns

date-fns ^3.6.0Modern date utility library:

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

const formatted = format(new Date(), 'PPP', { locale: es })

moment

moment ^2.30.1Legacy date handling (being phased out):

import moment from 'moment'

const date = moment().format('YYYY-MM-DD')

Authentication & Security

jose
bcrypt-ts
Cookies

jose ^5.6.3JWT handling:

import { SignJWT, jwtVerify } from 'jose'

const secret = new TextEncoder().encode(process.env.JWT_SECRET)
const token = await new SignJWT({ userId })
  .setProtectedHeader({ alg: 'HS256' })
  .setExpirationTime('24h')
  .sign(secret)

bcrypt-ts ^5.0.2Password hashing:

import { hash, compare } from 'bcrypt-ts'

const hashed = await hash(password, 10)
const valid = await compare(password, hashed)

js-cookie ^3.0.5 & nookies ^2.5.2Cookie management:

import Cookies from 'js-cookie'

Cookies.set('auth_token', token, { expires: 7 })
const token = Cookies.get('auth_token')
Cookies.remove('auth_token')

Real-time Communication

Laravel Echo & Pusher

{
  "laravel-echo": "^1.16.1",
  "pusher-js": "^8.4.0-rc2"
}

WebSocket integration for real-time features:

import Echo from 'laravel-echo'
import Pusher from 'pusher-js'

const echo = new Echo({
  broadcaster: 'pusher',
  key: process.env.NEXT_PUBLIC_PUSHER_KEY,
  cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER,
  forceTLS: true,
})

echo.channel('notifications')
  .listen('NotificationSent', (data) => {
    toast.info(data.message)
  })

PDF Generation

@react-pdf/renderer
pdf-lib

@react-pdf/renderer ^4.1.5React components to PDF:

import { Document, Page, Text, View, PDFViewer } from '@react-pdf/renderer'

const InvoicePDF = ({ data }) => (
  <Document>
    <Page size="A4">
      <View>
        <Text>Invoice #{data.number}</Text>
        <Text>Total: ${data.total}</Text>
      </View>
    </Page>
  </Document>
)

pdf-lib ^1.17.1Modify existing PDFs:

import { PDFDocument } from 'pdf-lib'

const pdfDoc = await PDFDocument.load(existingPdfBytes)
const pages = pdfDoc.getPages()
const firstPage = pages[0]
firstPage.drawText('Watermark', { x: 50, y: 50 })

const pdfBytes = await pdfDoc.save()

Additional Libraries

UI Components

qrcode.react ^4.2.0 - QR code generation
react-confetti ^6.4.0 - Confetti animations
input-otp ^1.4.2 - OTP input component
cmdk ^1.0.0 - Command palette
vaul ^0.9.1 - Drawer component

Data Handling

query-string ^9.1.1 - URL query string parsing
react-currency-input-field ^3.8.0 - Currency input
react-day-picker ^8.10.1 - Date picker

Image Processing

sharp ^0.33.5 - High-performance image processing
next-images ^1.8.5 - Image imports

Development Tools

devDependencies

{
  "@types/node": "^20",
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "eslint": "^8",
  "eslint-config-next": "14.2.5",
  "prettier": "^3.5.3",
  "postcss": "^8",
  "tailwindcss": "^3.4.1",
  "typescript": "^5"
}

Version Matrix

Technology	Version	Purpose
Next.js	14.2.14	Framework
React	18	UI Library
TypeScript	5	Type Safety
Tailwind CSS	3.4.1	Styling
React Query	5.51.9	Data Fetching
Zustand	4.5.4	State Management
Axios	1.7.2	HTTP Client
React Hook Form	7.52.1	Forms
Zod	3.23.8	Validation

Setup

Architecture

Extending

​Overview

​Core Technologies

Next.js 14

React 18

TypeScript 5

​Framework & Runtime

​Next.js 14.2.14

​React 18

​TypeScript 5

​State Management

​UI & Styling

​Tailwind CSS 3.4.1

​shadcn/ui Components

@radix-ui/react-dialog

@radix-ui/react-dropdown-menu

@radix-ui/react-select

@radix-ui/react-toast

​Additional UI Libraries

​Data Visualization

​Forms & Validation

​React Hook Form 7.52.1

​Zod 3.23.8

​HTTP Client

​Axios 1.7.2

​Date & Time

date-fns

moment

​Authentication & Security

​Real-time Communication

​Laravel Echo & Pusher

​PDF Generation

​Additional Libraries

​Development Tools

​Version Matrix

​Next Steps

State Management

Data Fetching

Build docs developers (and LLMs) love

Overview

Core Technologies

Framework & Runtime

Next.js 14.2.14

React 18

TypeScript 5

State Management

UI & Styling

Tailwind CSS 3.4.1

shadcn/ui Components

Additional UI Libraries

Data Visualization

Forms & Validation

React Hook Form 7.52.1

Zod 3.23.8

HTTP Client

Axios 1.7.2

Date & Time

Authentication & Security

Real-time Communication

Laravel Echo & Pusher

PDF Generation

Additional Libraries

Development Tools

Version Matrix

Next Steps