# Sistem Desa Mandiri - Project Documentation

## Project Overview

Sistem Desa Mandiri is a comprehensive web application built with Next.js to assist with village-level administration and information management. The application provides various features to support village activities, including announcements, discussions, project management, and population administration.

### Key Features
- **User Management**: Manage member data and access rights
- **Announcements**: Distribute important information to all village residents
- **Discussions**: Forum for discussions among villagers or village officials
- **Project & Task Management**: Track progress of ongoing village projects and tasks
- **Documentation**: Centralized location for storing and managing important documents
- **Push Notifications**: Send real-time notifications to user devices

### Technology Stack
- **Framework**: Next.js 14
- **UI Framework**: Mantine
- **Database ORM**: Prisma
- **Styling**: Tailwind CSS, CSS Modules
- **State Management**: Hookstate
- **Push Notifications**: Web Push
- **Authentication**: Custom cookie-based authentication system
- **Icons**: Tabler Icons React
- **Rich Text Editor**: TipTap
- **Charts**: Recharts, ECharts
- **Date Handling**: Day.js, Moment.js
- **File Upload**: Multer
- **Server Framework**: Elysia.js

## Project Structure

```
sistem-desa-mandiri/
├── src/
│   ├── app/                    # Next.js app router pages
│   │   ├── (application)/      # Main application routes
│   │   ├── (auth)/            # Authentication routes
│   │   ├── api/               # API routes
│   │   └── ...                # Other route groups
│   ├── module/                # Feature modules organized by domain
│   │   ├── _global/           # Global components and utilities
│   │   ├── announcement/      # Announcement feature
│   │   ├── auth/              # Authentication feature
│   │   ├── discussion/        # Discussion forum
│   │   ├── document/          # Document management
│   │   ├── project/           # Project management
│   │   ├── user/              # User management
│   │   └── ...                # Other feature modules
│   ├── lib/                   # Utility functions and libraries
│   ├── types/                 # TypeScript type definitions
├── public/                    # Static assets
├── .env.test                  # Environment variables template
├── next.config.mjs            # Next.js configuration
├── package.json               # Dependencies and scripts
├── README.md                  # Project documentation
├── tailwind.config.ts         # Tailwind CSS configuration
└── tsconfig.json              # TypeScript configuration
```

### Module Organization
The application follows a modular architecture where each feature is contained in its own module directory under `/src/module/`. Each module typically contains:
- `api/` - API functions and server actions
- `ui/` - User interface components
- `hooks/` - Custom React hooks
- `types/` - Type definitions specific to the module
- `utils/` - Utility functions

## Building and Running

### Prerequisites
- Node.js (version 20.x or higher)
- Bun (recommended) or other package managers like npm/yarn/pnpm
- Database (PostgreSQL, MySQL, or SQLite)

### Installation Steps
1. Clone the repository:
```bash
git clone https://github.com/username/sistem-desa-mandiri.git
cd sistem-desa-mandiri
```

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

3. Setup environment variables:
```bash
cp .env.test .env
```
Edit the `.env` file and fill in the required variables, especially `DATABASE_URL`.

4. Run Prisma migrations:
```bash
npx prisma migrate dev
```

5. Seed the database (optional):
```bash
npx prisma db seed
```

6. Run the development server:
```bash
bun run dev
```
The application will run at https://localhost:3000

### Available Scripts
- `dev`: Runs the development server with HTTPS
- `build`: Creates a production build of the application
- `start`: Runs the production server
- `lint`: Runs the linter to check code quality
- `prisma:seed`: Runs the database seeding script

## Development Conventions

### Coding Standards
- Follow Next.js conventions for file-based routing
- Use TypeScript for type safety
- Maintain consistent component structure within modules
- Use Mantine components for UI elements
- Follow accessibility best practices

### Naming Conventions
- Components: PascalCase (e.g., `UserProfile.tsx`)
- Functions: camelCase (e.g., `getUserData`)
- Constants: UPPER_SNAKE_CASE (e.g., `MAX_FILE_SIZE`)
- Modules: lowercase with hyphens if needed (e.g., `discussion-general`)

### State Management
- Use Hookstate for global state management
- Use React hooks for component-local state
- Store persistent data in cookies or localStorage as appropriate

### API Design
- Organize API routes by feature in the `/src/app/api/` directory
- Use RESTful conventions where possible
- Implement proper error handling and validation
- Secure endpoints with appropriate authentication checks

### Testing
- Unit tests should be co-located with the code they test
- Integration tests should be in the `/tests/` directory
- Follow the testing pyramid: many unit tests, fewer integration tests, minimal end-to-end tests

## Key Dependencies

### Core Dependencies
- `next`: React framework for production applications
- `react`, `react-dom`: UI library
- `@mantine/core`: Component library with accessible components
- `@prisma/client`: Database toolkit
- `web-push`: Web Push protocol implementation
- `elysia`: Fast, lightweight web framework
- `@hookstate/core`: State management solution

### UI Dependencies
- `@mantine/carousel`: Carousel component
- `@mantine/charts`: Chart components
- `@mantine/form`: Form management
- `@mantine/notifications`: Notification system
- `@mantine/tiptap`: Rich text editor components
- `@tabler/icons-react`: Icon library
- `@tiptap/react`: Rich text editor
- `recharts`: Charting library
- `echarts-for-react`: Alternative charting library

### Utilities
- `dayjs`: Date manipulation library
- `lodash`: Utility functions
- `crypto-js`: Cryptographic algorithms
- `iron-session`: Session management
- `jose`: JavaScript Object Signing and Encryption
- `multer`: File upload middleware
- `firebase-admin`: Firebase admin SDK

## Architecture Patterns

### Modular Design
The application follows a modular design where each feature is encapsulated in its own module directory. This promotes separation of concerns and makes the codebase easier to maintain and scale.

### API Layer
API routes are organized by feature in the `/src/app/api/` directory. Each feature has its own subdirectory containing related API endpoints. This makes it easy to locate and maintain API functionality.

### Component Organization
Components are organized within their respective module directories. Common components that are shared across multiple modules are placed in the `_global` module.

### Data Flow
- Client-side state is managed using React hooks and Hookstate
- Server-side data fetching is done through Next.js API routes
- Database interactions are handled through Prisma ORM
- Authentication is implemented using cookies and server actions

## Deployment

The application is designed to be deployed as a Next.js application. It can be deployed to platforms like Vercel, Netlify, or any hosting service that supports Node.js applications.

For production deployment:
1. Run `bun run build` to create an optimized production build
2. Run `bun start` to start the production server
3. Configure environment variables for the production environment
4. Set up SSL certificates for secure connections
5. Configure database connection for production environment