Appearance
naluri-admin (Frontend)
Admin panel frontend untuk Naluri.
Source Code References
Untuk Claude: Gunakan path ini untuk akses langsung ke source code.
| Item | Path |
|---|---|
| Repository | /Users/joko/Documents/projects/naluri-admin |
| Coupon Module | src/modules/coupon/ |
| Focus Dashboard | src/modules/coupon/tabs/FocusDashboard.tsx |
| API Queries | src/api/queries/ |
| API Mutations | src/api/mutations/ |
| Router Config | src/router/index.tsx |
Tech Stack
| Technology | Version | Purpose |
|---|---|---|
| React | 18.x | UI Framework |
| TypeScript | 5.x | Type Safety |
| Vite | 5.x | Build Tool |
| TailwindCSS | 3.x | Styling |
| React Query | 5.x | Data Fetching |
| React Router | 6.x | Routing |
| React Hook Form | 7.x | Form Management |
| Zod | 3.x | Validation |
Project Structure
src/
├── api/ # API layer
│ ├── config.ts # Axios config, query keys
│ ├── queries/ # React Query hooks (GET)
│ │ ├── coupon.ts
│ │ ├── focusDashboard.ts
│ │ └── ...
│ └── mutations/ # React Query hooks (POST/PUT/DELETE)
│ ├── coupon.ts
│ ├── focusDashboard.ts
│ └── ...
├── modules/ # Feature modules
│ ├── coupon/
│ │ ├── Coupon.tsx # Parent layout with tabs
│ │ ├── CouponList.tsx # Listing page
│ │ ├── tabs/ # Tab components
│ │ │ ├── Details.tsx
│ │ │ ├── FocusDashboard.tsx
│ │ │ ├── Onboarding.tsx
│ │ │ └── ...
│ │ ├── components/ # Module-specific components
│ │ └── store/ # Module state types
│ └── ...
├── services/ # Business logic services
│ └── Acl.service.ts # Permission checking
├── constants/ # App constants
└── common/ # Shared componentsKey Modules
| Module | Path | Description |
|---|---|---|
| Coupon | /coupons | Coupon & sponsor code management |
| Members | /members | Member listing & management |
| Groups | /groups | Member group management |
| Coach | /coach | Coach assignment |
Data Flow Pattern
┌─────────────────────────────────────────────────────────────┐
│ Component │
│ const { data } = useQuery(...) // Fetch data │
│ const mutation = useMutation(...) // Mutate data │
└────────────────────────────────────┬────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ api/queries/*.ts │
│ export const useCouponDetail = (id) => useQuery({ │
│ queryKey: ['coupon', id], │
│ queryFn: () => apiClient.get(`/coupon/show/${id}`) │
│ }) │
└────────────────────────────────────┬────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ api/config.ts │
│ export const apiClient = axios.create({ │
│ baseURL: import.meta.env.VITE_API_URL │
│ }) │
└────────────────────────────────────┬────────────────────────┘
│
▼
admin-api (backend)Routing Structure
typescript
// Main routes
/coupons // Coupon list
/coupons/details // Coupon detail (Details tab)
/coupons/coupon-member-all // All members tab
/coupons/coupon-member-groups // Groups tab
/coupons/onboarding // Onboarding/bloodtest tab
/coupons/focus-dashboard // Focus Dashboard tabAuthentication & Authorization
JWT Token
- Stored in localStorage
- Attached to every request via Axios interceptor
- Refresh token mechanism
Permissions (ACL)
typescript
// services/Acl.service.ts
AclService.permissionAccess(CouponPermissions.COUPON_EDIT)
// Usage in component
if (!AclService.permissionAccess(CouponPermissions.COUPON_EDIT)) {
return <div>You have no access</div>
}Environment Variables
| Variable | Example | Description |
|---|---|---|
VITE_API_URL | http://localhost:3000 | admin-api URL |
Module Documentation
Last updated: March 2026