Anatomy of a Xetuu Module

Xetuu ERP uses a clean, monorepo-friendly pluggable architecture. Third-party developers and enterprise teams can build modular additions inside packages/[module-name] or as standalone external npm packages.

#

1. Directory Structure

packages/fleet-management/
├── package.json
├── xetuu.manifest.json
├── src/
│   ├── index.ts
│   ├── backend/
│   │   ├── fleet.module.ts
│   │   ├── fleet.service.ts
│   │   └── fleet.controller.ts
│   └── frontend/
│       ├── components/
│       │   ├── FleetVehicleList.tsx
│       │   └── VehicleCard.tsx
│       └── pages/
│           └── FleetDashboard.tsx
└── README.md

#

2. Module Manifest (xetuu.manifest.json)

Every module declares its metadata, required database migrations, navigation entries, and permissions:

{
  "id": "fleet-management",
  "name": "Fleet & Logistics Management",
  "version": "1.0.0",
  "author": "Acme Devs Ltd",
  "category": "operations",
  "icon": "Truck",
  "color": "#10b981",
  "routes": [
    {
      "path": "/fleet",
      "label": "Fleet Management",
      "icon": "Truck",
      "requiredPermission": "fleet:view"
    },
    {
      "path": "/fleet/vehicles",
      "label": "Vehicles",
      "parent": "/fleet",
      "requiredPermission": "fleet:vehicles:manage"
    }
  ],
  "permissions": [
    { "key": "fleet:view", "label": "View fleet dashboard" },
    { "key": "fleet:vehicles:manage", "label": "Add or modify vehicles" }
  ],
  "dependencies": ["inventory", "accounting"]
}

#

3. Registering Backend Endpoints (NestJS)

import { Controller, Get, UseGuards } from '@nestjs/common';
import { TenantAuthGuard } from '@xetuu/api-core';
@Controller('v1/fleet')
@UseGuards(TenantAuthGuard)
export class FleetController {
  @Get('vehicles')
  async listVehicles() {
    return {
      success: true,
      data: [
        { id: 'veh_01', registration: 'KDA 123X', status: 'ACTIVE', mileage: 45200 }
      ]
    };
  }
}

#

4. Registering UI Components

Third-party modules leverage @xetuu/ui to maintain consistent styling, dark mode support, and accessibility automatically:

import React from 'react';
import { Button, Table, Badge } from '@xetuu/ui';
export function FleetVehicleList({ vehicles }) {
  return (
    

      

        
Fleet Vehicles
        Add New Vehicle
      
      {/* Dynamic Data Table */}
    
  );
}