197 lines
4.4 KiB
Markdown
197 lines
4.4 KiB
Markdown
# 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.
|