Skip to main content

​
Overview

SIGEAC follows Next.js 14 App Router conventions with a modular, feature-based architecture. The codebase is organized to separate concerns and promote reusability.

​
Root Directory Structure

source/
├── actions/          # Server actions and API mutations
├── app/             # Next.js App Router pages and layouts
├── components/      # Reusable React components
├── contexts/        # React Context providers
├── hooks/           # Custom React hooks
├── lib/             # Utility libraries and configurations
├── middleware.ts    # Next.js middleware for route protection
├── providers/       # Global providers (Query, Theme)
├── public/          # Static assets
├── stores/          # Zustand state management
├── types/           # TypeScript type definitions
└── utils/           # Utility functions

​
App Directory (/app)

The app directory uses Next.js 14 App Router structure: 
app/
├── layout.tsx                    # Root layout with providers
├── page.tsx                      # Landing page
├── globals.css                   # Global styles
├── login/                        # Login page
├── inicio/                       # Home/dashboard selection
├── sistema/                      # System administration
├── ajustes/                      # Global settings
├── not-authorized/               # 403 page
├── not-found.tsx                 # 404 page
└── [company]/                    # Dynamic company routes
    ├── layout.tsx                # Company-specific layout
    ├── dashboard/                # Main dashboard
    ├── administracion/           # Administration module
    ├── almacen/                  # Warehouse module
    ├── compras/                  # Purchasing module
    ├── planificacion/            # Planning module
    ├── mantenimiento/            # Maintenance module
    └── sms/                      # Safety Management System
The [company] dynamic route enables multi-tenant functionality, allowing different companies to access their specific data and modules.

​
Layout Hierarchy

1

Root Layout

app/layout.tsx wraps the entire application with:
  • QueryClientProvider (React Query)
  • AuthProvider (Authentication)
  • ThemeProvider (Dark/Light mode)
  • TooltipProvider (Radix UI)
// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <QueryClientProvider>
      <AuthProvider>
        <ThemeProvider>
          <TooltipProvider>
            {children}
          </TooltipProvider>
        </ThemeProvider>
      </AuthProvider>
    </QueryClientProvider>
  )
}
2

Company Layout

app/[company]/layout.tsx adds the dashboard layout for authenticated users:
// app/[company]/layout.tsx
export default function CompanyLayout({ children }) {
  return <DashboardLayout>{children}</DashboardLayout>
}

​
Components Directory (/components)

Organized by feature and type: 
components/
├── ui/              # shadcn/ui base components
│   ├── button.tsx
│   ├── dialog.tsx
│   ├── input.tsx
│   └── ...
├── layout/          # Layout components
│   ├── DashboardLayout.tsx
│   ├── Navbar.tsx
│   ├── Sidebar.tsx
│   └── UserNav.tsx
├── forms/           # Form components
├── tables/          # Table components (TanStack Table)
├── charts/          # Chart components (Recharts)
├── dialogs/         # Dialog/Modal components
├── cards/           # Card components
├── dashboard/       # Dashboard-specific components
└── misc/            # Miscellaneous components
Base components from shadcn/ui using Radix UI primitives:
import { Button } from '@/components/ui/button'
import { Dialog } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'

​
Actions Directory (/actions)

Server actions and mutations organized by module: 
actions/
├── general/          # General actions (clients, employees, etc.)
│   ├── clientes/
│   │   └── actions.ts
│   ├── empleados/
│   └── usuarios/
├── aerolinea/        # Airline-specific actions
├── mantenimiento/    # Maintenance actions
├── sistema/          # System actions
└── sms/              # Safety Management actions

​
Action Pattern

Actions use React Query mutations for API calls: 
// actions/general/clientes/actions.ts
import axiosInstance from "@/lib/axios"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { toast } from "sonner"

export const useCreateClient = () => {
  const queryClient = useQueryClient()

  const createMutation = useMutation({
    mutationFn: async ({ company, data }) => {
      const response = await axiosInstance.post(`/${company}/clients`, data)
      return response.data
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['clients'] })
      toast("¡Creado!", {
        description: `¡El cliente se ha creado correctamente!`
      })
    },
    onError: (error) => {
      toast('Error', {
        description: `No se creó correctamente: ${error}`
      })
    },
  })

  return { createClient: createMutation }
}

​
Hooks Directory (/hooks)

Custom hooks organized by feature: 
hooks/
├── general/          # General hooks
│   ├── clientes/
│   │   ├── useGetClients.ts
│   │   └── useGetClientById.ts
│   ├── empleados/
│   └── proveedores/
├── sistema/          # System hooks
├── mantenimiento/    # Maintenance hooks
├── sms/              # SMS hooks
└── helpers/          # Utility hooks
    ├── useDebounce.ts
    ├── use-store.tsx
    └── use-sidebar-toggle.tsx

​
Contexts Directory (/contexts)

React Context for global state: 
contexts/
└── AuthContext.tsx   # Authentication context
The AuthContext manages user authentication state and provides auth methods throughout the app.

​
Stores Directory (/stores)

Zustand stores for client-side state: 
stores/
└── CompanyStore.ts   # Company and location selection

​
Types Directory (/types)

TypeScript type definitions: 
types/
├── index.ts          # All type definitions
└── tanstack-table.d.ts  # TanStack Table types
Defines types for:
  • User, Employee, Client, Vendor
  • Aircraft, Article, Batch, Warehouse
  • Flight, WorkOrder, Requisition
  • And 50+ more domain types

​
Lib Directory (/lib)

Utility libraries and configurations: 
lib/
├── axios.ts          # Axios instance with interceptors
├── utils.ts          # Utility functions (cn, formatters)
├── session.ts        # Session management
├── cookie.ts         # Cookie utilities
└── contants/         # Constants and configurations

​
Key Library Files

Configured Axios instance with:
  • Base URL from environment variables
  • Request interceptor for auth token
  • Response interceptor for 401 handling
See: lib/axios.ts:1
Common utilities:
  • cn() - Tailwind class merging
  • formatCurrency() - Currency formatting
  • formatDate() - Date formatting
  • generateSlug() - String to slug conversion
See: lib/utils.ts:1

​
Middleware (middleware.ts)

Route protection and authentication: 
// middleware.ts
const PROTECTED_ROUTES = [
  '/inicio',
  '/transmandu',
  '/hangar74',
  '/ajustes',
  '/planificacion',
  '/administracion'
]

export default async function middleware(req: NextRequest) {
  const currentPath = req.nextUrl.pathname
  const isProtectedRoute = PROTECTED_ROUTES.some(route =>
    currentPath.startsWith(route)
  )

  if (isProtectedRoute) {
    const authToken = req.cookies.get('auth_token')?.value
    if (!authToken) {
      const loginUrl = new URL('/login', req.nextUrl.origin)
      return NextResponse.redirect(loginUrl)
    }
  }

  return NextResponse.next()
}
See: middleware.ts:1

​
File Naming Conventions

Components

PascalCase: UserNav.tsx, DashboardLayout.tsx

Hooks

camelCase: useGetClients.ts, useDebounce.ts

Types

PascalCase: Type definitions in types/index.ts

Utils

camelCase: utils.ts, session.ts

​
Next Steps

Routing

Learn about Next.js App Router patterns

State Management

Understand state management with Zustand and Context

Build docs developers (and LLMs) love

Get started for freeTalk to us