# 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:
```bash
git clone <repository-url>
cd admin-csa
```

2. Install dependencies:
```bash
npm install
```

3. Configure environment variables:
```bash
# .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:
```bash
npm run dev
```

5. Open [http://localhost:3000](http://localhost:3000)

### Default Credentials

```
Email: admin@csa.id
Password: aadmin1234
```

## Build for Production

```bash
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:

```typescript
// 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:

```typescript
// 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

```env
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.