diff --git a/QWEN.md b/QWEN.md new file mode 100644 index 0000000..574a841 --- /dev/null +++ b/QWEN.md @@ -0,0 +1,204 @@ +# 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 \ No newline at end of file diff --git a/src/app/api/mobile/project/route.ts b/src/app/api/mobile/project/route.ts index f480eb0..332ff51 100644 --- a/src/app/api/mobile/project/route.ts +++ b/src/app/api/mobile/project/route.ts @@ -26,14 +26,11 @@ export async function GET(request: Request) { return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 200 }); } - let grup + let grup, tahunFilter = String(tahun) const dataSkip = Number(page) * 10 - 10; const roleUser = userMobile.idUserRole const villageId = userMobile.idVillage const userId = userMobile.id - const tahunFilter = tahun ? tahun : new Date().getFullYear().toString(); - const startTahun = new Date(`${tahunFilter}-01-01T00:00:00.000Z`); - const endTahun = new Date(`${parseInt(tahunFilter) + 1}-01-01T00:00:00.000Z`); if (idGroup == "null" || idGroup == undefined || idGroup == "" || idGroup == "undefined") { grup = userMobile.idGroup @@ -41,6 +38,14 @@ export async function GET(request: Request) { grup = idGroup } + if (tahun == "null" || tahun == undefined || tahun == "" || tahun == "undefined") { + tahunFilter = new Date().getFullYear().toString(); + } + + const startTahun = new Date(`${tahunFilter}-01-01T00:00:00.000Z`); + const endTahun = new Date(`${parseInt(tahunFilter) + 1}-01-01T00:00:00.000Z`); + + const cek = await prisma.group.count({ where: { id: grup, @@ -151,7 +156,7 @@ export async function GET(request: Request) { }) - return NextResponse.json({ success: true, message: "Berhasil mendapatkan kegiatan", data: omitData, filter, total: totalData }, { status: 200 }); + return NextResponse.json({ success: true, message: "Berhasil mendapatkan kegiatan", data: omitData, filter, tahun: tahunFilter, total: totalData }, { status: 200 }); } catch (error) { console.error(error); diff --git a/src/app/api/mobile/project/tahun/route.ts b/src/app/api/mobile/project/tahun/route.ts index 192757f..ed4c4d7 100644 --- a/src/app/api/mobile/project/tahun/route.ts +++ b/src/app/api/mobile/project/tahun/route.ts @@ -36,6 +36,11 @@ export async function GET(request: Request) { // (opsional) urutkan dari terbaru ke lama uniqueYears.sort((a, b) => b - a); - return NextResponse.json({ success: true, message: "Success", data: uniqueYears }, { status: 200 }); + const formattedData = uniqueYears.map(year => ({ + id: String(year), + name: String(year) + })); + + return NextResponse.json({ success: true, message: "Success", data: formattedData }, { status: 200 }); }