csa-dashboard-sementara/csa-dashboard/README.md

Admin CSA - Enterprise Dashboard

Modern, scalable admin dashboard built with Next.js 15, TypeScript, and shadcn/ui. Auto-generated from Postman collection with complete CRUD operations for all endpoints.

• Framework: Next.js 15.1.3
• Language: TypeScript 5
• Styling: Tailwind CSS 3.4
• UI Components: shadcn/ui (Radix UI)
• State Management: React Query 5
• Form Handling: react-hook-form 7
• Validation: Zod 3
• HTTP Client: Axios 1.7
• Icons: Lucide React

Project Structure

admin-csa/
├── app/                      # Next.js App Router
│   ├── (dashboard)/         # Protected dashboard routes
│   │   ├── api-management/
│   │   ├── cms/
│   │   │   ├── content/
│   │   │   └── buckets/
│   │   ├── users/
│   │   └── openai/
│   ├── login/
│   ├── register/
│   ├── layout.tsx
│   └── globals.css
├── components/              # Reusable components
│   ├── ui/                 # shadcn UI components
│   ├── layout/             # Layout components
│   └── data-table/         # DataTable components
├── modules/                # Feature modules
│   ├── admin/
│   ├── api-management/
│   ├── cms/
│   │   ├── content/
│   │   └── bucket/
│   ├── users/
│   └── openai/
├── providers/              # Context providers
├── lib/                    # Utilities
├── config/                 # Configuration
└── hooks/                  # Custom hooks

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd admin-csa

2. Install dependencies:

npm install

3. Configure environment variables:

# .env file is already configured with:
NEXT_PUBLIC_API_BASE_URL=https://api-management.cifo.co.id
NEXT_PUBLIC_API_KEY=cifosuperapp

4. Run the development server:

npm run dev

5. Open http://localhost:3000

Default Credentials

Email: admin@csa.id
Password: aadmin1234

Build for Production

npm run build
npm start

Development

Adding a New Module

1. Create module structure:

modules/
└── your-module/
    ├── schemas.ts      # Zod validation schemas
    ├── services.ts     # API service functions
    └── hooks.ts        # React Query hooks

2. Create pages:

app/(dashboard)/
└── your-module/
    ├── page.tsx           # List view
    ├── create/page.tsx    # Create form
    └── edit/[id]/page.tsx # Edit form

3. Add route to sidebar in components/layout/sidebar.tsx

API Integration

All API calls are centralized in module services:

// modules/your-module/services.ts
import { apiClient } from "@/lib/api-client";

export const yourService = {
  getAll: async () => {
    const response = await apiClient.get("/endpoint");
    return response.data;
  },
};

Form Validation

Use Zod schemas for type-safe validation:

// modules/your-module/schemas.ts
import { z } from "zod";

export const yourSchema = z.object({
  field: z.string().min(1, "Required"),
});

export type YourInput = z.infer<typeof yourSchema>;

Architecture Highlights

Modular Structure

Each feature is self-contained with its own schemas, services, and hooks.

Type Safety

Full TypeScript coverage with strict mode enabled.

Auto-generated from Postman

All endpoints from the Postman collection are automatically mapped to modules.

Scalable

Easy to add new modules following the established patterns.

Enterprise-Ready

• Clean code architecture
• SOLID principles
• DRY approach
• Maintainable codebase

Environment Variables

NEXT_PUBLIC_API_BASE_URL=https://api-management.cifo.co.id
NEXT_PUBLIC_API_KEY=cifosuperapp
NEXT_PUBLIC_API_MANAGEMENT=api-management
NEXT_PUBLIC_CMS_MANAGEMENT=cms-management
NEXT_PUBLIC_BUCKET_MANAGEMENT=bucket-management
NEXT_PUBLIC_USER_MANAGEMENT=user-management
NEXT_PUBLIC_ADMIN_MANAGEMENT=admin-management

Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

License

MIT

Support

For issues and questions, please open an issue in the repository.