diyoanggara
/
MIF_E31221222
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add readme

This commit is contained in:
vergiLgood1 2025-08-05 14:37:12 +07:00
parent aa675f04f9
commit 92d906de5e
4 changed files with 128 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -1,3 +1,12 @@
# sigap-v
# SIGAP
SIGAP is a project that consists of a mobile application and a website.
## Modules
* [**sigap-mobile**](./sigap-mobile/README.md): A mobile application built with Flutter.
* [**sigap-website**](./sigap-website/README.md): A website built with Next.js.
## Getting Started
To get started with this project, please refer to the README files in each module.

114
sigap-mobile/PANIC_BUTTON_IMPROVEMENTS.md
View File

@ -1,114 +0,0 @@
# Panic Button Feature Improvements
## Overview
Fixed and optimized the panic button feature to properly handle the emergency session flow and user interactions, particularly the "Stop" button functionality.
## Key Improvements Made
### 1. Enhanced Stop Button Functionality
- **Location**: `lib/src/features/panic/presentation/widgets/emergency_view.dart`
- **Changes**:
- Added confirmation dialog before stopping emergency session
- Improved button styling with better visual feedback
- Added icon and clearer text ("Stop Emergency Session")
- Increased button size and prominence
### 2. Improved Session Status Indicator
- **Location**: `lib/src/features/panic/presentation/widgets/emergency_view.dart`
- **Changes**:
- Enhanced visual design with gradient background
- Added more informative text layout
- Clearer instructions for user actions
- Better responsive design for small screens
### 3. Fixed Session Management Flow
- **Location**: `lib/src/features/panic/presentation/controllers/panic_button_controller.dart`
- **Changes**:
- Added `endSessionAndGoToUpdateIncident()` method with proper state management
- Added `startCooldownAfterIncidentUpdate()` method for post-update cooldown
- Fixed navigation flow to use proper route constants
- Improved error handling and user feedback
### 4. Enhanced Incident Update Process
- **Location**: `lib/src/features/panic/presentation/controllers/incident_update_controller.dart`
- **Changes**:
- Integration with panic button controller for cooldown management
- Automatic cooldown start after successful incident update
- Better success messaging and flow control
### 5. Improved Incident Update Screen UI
- **Location**: `lib/src/features/panic/presentation/screens/incident_update_screen.dart`
- **Changes**:
- Added back button confirmation dialog
- Enhanced header information with clearer instructions
- Added informational note about cooldown period
- Better user guidance throughout the process
### 6. Enhanced Panic Button Visual States
- **Location**: `lib/src/features/panic/presentation/widgets/panic_button.dart`
- **Changes**:
- Improved session content display with emergency icon
- Better text hierarchy and visual feedback
- Enhanced session timer display
## User Flow Improvements
### Before:
1. User activates panic button
2. Session runs for 60 seconds
3. Automatic end → cooldown starts immediately
4. User may miss opportunity to provide details
### After:
1. User activates panic button
2. Session runs with prominent "Stop" button visible
3. User can press "Stop" → confirmation dialog
4. User gets redirected to incident update form
5. After completing form → cooldown starts
6. If user goes back without completing → cooldown starts with warning
## Technical Improvements
### Error Handling
- Added proper error handling for missing controllers
- Graceful degradation when components are not found
- Better user feedback for error scenarios
### State Management
- Proper cleanup of timers and resources
- Clear state transitions between session, update, and cooldown phases
- Synchronized state between related controllers
### Navigation
- Used proper route constants instead of hardcoded strings
- Implemented proper navigation stack management
- Added confirmation dialogs for critical actions
## Benefits
1. **Better User Experience**: Clear visual feedback and instructions
2. **Proper Emergency Flow**: Users are guided to complete incident reports
3. **Reduced Accidental Usage**: Confirmation dialogs prevent mistakes
4. **Improved Data Collection**: Users more likely to provide incident details
5. **System Stability**: Better error handling and state management
## Testing Recommendations
1. Test the complete flow: activate → stop → update → cooldown
2. Test automatic session timeout behavior
3. Test back button behavior in incident update screen
4. Test error scenarios (missing data, network issues)
5. Test on different screen sizes for responsive design
6. Test rapid button pressing and edge cases

66
sigap-mobile/README.md
View File

@ -1,16 +1,64 @@
# sigap
# SIGAP Mobile App
A mobile app for SIGAP Jember
This is the mobile application for SIGAP Jember, built with Flutter.
## Features
* User Authentication (Google Sign-In, Local Auth)
* Real-time data synchronization with Supabase
* Location-based services (Mapbox, Geolocator, Geocoding)
* Face Detection (Google ML Kit)
* Notifications
* File and Image Picking
* Direct Phone Calls
* UI/UX with various Flutter packages (Lottie, Shimmer, Badges, Carousel Slider, etc.)
## Technologies Used
* **Flutter**: UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.
* **Supabase**: Open Source Firebase Alternative (Backend as a Service).
* **Google ML Kit**: For on-device machine learning capabilities, specifically face detection.
* **Mapbox**: For interactive maps and location services.
## Getting Started
This project is a starting point for a Flutter application.
### Prerequisites
A few resources to get you started if this is your first Flutter project:
* [Flutter SDK](https://flutter.dev/docs/get-started/install)
* [Android Studio](https://developer.android.com/studio) or [VS Code](https://code.visualstudio.com/) with Flutter plugin
* A Supabase project configured with your environment variables.
- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
### Installation
For help getting started with Flutter development, view the
[online documentation](https://docs.flutter.dev/), which offers tutorials,
samples, guidance on mobile development, and a full API reference.
1. Clone the repository:
```bash
git clone https://github.com/your-username/sigap-v.git
cd sigap-v/sigap-mobile
```
2. Install Flutter dependencies:
```bash
flutter pub get
```
3. Create a `.env` file in the `sigap-mobile` directory and add your Supabase credentials:
```
SUPABASE_URL=YOUR_SUPABASE_URL
SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
```
### Running the App
```bash
flutter run
```
## Project Structure
```
lib/
├── app.dart
├── main.dart
├── navigation_menu.dart
├── splash_screen.dart
├── src/ # Main application source code
└── supadart/ # Supabase related code
```

163
sigap-website/README.md
View File

@ -1,115 +1,74 @@
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/9113740/201498864-2a900c64-d88f-4ed4-b5cf-770bcb57e1f5.png">
<source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/9113740/201498152-b171abb8-9225-487a-821c-6ff49ee48579.png">
</picture>
# SIGAP Website
<div align="center"><strong>Next.js Admin Dashboard Starter Template With Shadcn-ui</strong></div>
<div align="center">Built with the Next.js 15 App Router</div>
<br />
<div align="center">
<a href="https://dub.sh/shadcn-dashboard">View Demo</a>
<span>
</div>
This is the website for SIGAP Jember, built with Next.js.
## Overview
## Features
This is a starter template using the following stack:
* User Authentication
* Data management with Prisma and Supabase
* Interactive maps with Mapbox GL JS
* UI components with Radix UI and Tailwind CSS
* Form handling with React Hook Form and Zod
* State management with Zustand
* Email handling with React Email and Resend
- Framework - [Next.js 15](https://nextjs.org/13)
- Language - [TypeScript](https://www.typescriptlang.org)
- Auth - [Clerk](https://go.clerk.com/ILdYhn7)
- Error tracking - [<picture><img alt="Sentry" src="public/assets/sentry.svg">
</picture>](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy26q2-nextjs&utm_content=github-banner-project-tryfree)
- Styling - [Tailwind CSS v4](https://tailwindcss.com)
- Components - [Shadcn-ui](https://ui.shadcn.com)
- Schema Validations - [Zod](https://zod.dev)
- State Management - [Zustand](https://zustand-demo.pmnd.rs)
- Search params state manager - [Nuqs](https://nuqs.47ng.com/)
- Tables - [Tanstack Data Tables](https://ui.shadcn.com/docs/components/data-table) • [Dice table](https://www.diceui.com/docs/components/data-table)
- Forms - [React Hook Form](https://ui.shadcn.com/docs/components/form)
- Command+k interface - [kbar](https://kbar.vercel.app/)
- Linting - [ESLint](https://eslint.org)
- Pre-commit Hooks - [Husky](https://typicode.github.io/husky/)
- Formatting - [Prettier](https://prettier.io)
## Technologies Used
_If you are looking for a React admin dashboard starter, here is the [repo](https://github.com/Kiranism/react-shadcn-dashboard-starter)._
## Pages
| Pages | Specifications |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Signup / Signin](https://go.clerk.com/ILdYhn7) | Authentication with **Clerk** provides secure authentication and user management with multiple sign-in options including passwordless authentication, social logins, and enterprise SSO - all designed to enhance security while delivering a seamless user experience. |
| [Dashboard (Overview)](https://shadcn-dashboard.kiranism.dev/dashboard) | Cards with Recharts graphs for analytics. Parallel routes in the overview sections feature independent loading, error handling, and isolated component rendering. |
| [Product](https://shadcn-dashboard.kiranism.dev/dashboard/product) | Tanstack tables with server side searching, filter, pagination by Nuqs which is a Type-safe search params state manager in nextjs |
| [Product/new](https://shadcn-dashboard.kiranism.dev/dashboard/product/new) | A Product Form with shadcn form (react-hook-form + zod). |
| [Profile](https://shadcn-dashboard.kiranism.dev/dashboard/profile) | Clerk's full-featured account management UI that allows users to manage their profile and security settings |
| [Kanban Board](https://shadcn-dashboard.kiranism.dev/dashboard/kanban) | A Drag n Drop task management board with dnd-kit and zustand to persist state locally. |
| [Not Found](https://shadcn-dashboard.kiranism.dev/dashboard/notfound) | Not Found Page Added in the root level |
| [Global Error](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy26q2-nextjs&utm_content=github-banner-project-tryfree) | A centralized error page that captures and displays errors across the application. Integrated with **Sentry** to log errors, provide detailed reports, and enable replay functionality for better debugging. |
## Feature based organization
```plaintext
src/
├── app/ # Next.js App Router directory
│ ├── (auth)/ # Auth route group
│ │ ├── (signin)/
│ ├── (dashboard)/ # Dashboard route group
│ │ ├── layout.tsx
│ │ ├── loading.tsx
│ │ └── page.tsx
│ └── api/ # API routes
│
├── components/ # Shared components
│ ├── ui/ # UI components (buttons, inputs, etc.)
│ └── layout/ # Layout components (header, sidebar, etc.)
│
├── features/ # Feature-based modules
│ ├── feature/
│ │ ├── components/ # Feature-specific components
│ │ ├── actions/ # Server actions
│ │ ├── schemas/ # Form validation schemas
│ │ └── utils/ # Feature-specific utilities
│ │
├── lib/ # Core utilities and configurations
│ ├── auth/ # Auth configuration
│ ├── db/ # Database utilities
│ └── utils/ # Shared utilities
│
├── hooks/ # Custom hooks
│ └── use-debounce.ts
│
├── stores/ # Zustand stores
│ └── dashboard-store.ts
│
└── types/ # TypeScript types
└── index.ts
```
* **Next.js**: React framework for building full-stack web applications.
* **Prisma**: Next-generation ORM for Node.js and TypeScript.
* **Supabase**: Open Source Firebase Alternative (Backend as a Service).
* **Tailwind CSS**: A utility-first CSS framework for rapidly building custom designs.
* **Radix UI**: A collection of unstyled, accessible UI components.
* **Mapbox GL JS**: For interactive, customizable vector maps on the web.
## Getting Started
> [!NOTE]
> We are using **Next 15** with **React 19**, follow these steps:
### Prerequisites
Clone the repo:
* [Node.js](https://nodejs.org/)
* [npm](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/)
* A Supabase project configured with your environment variables.
* A PostgreSQL database (for Prisma).
```
git clone https://github.com/Kiranism/next-shadcn-dashboard-starter.git
### Installation
1. Clone the repository:
```bash
git clone https://github.com/your-username/sigap-v.git
cd sigap-v/sigap-website
```
2. Install dependencies:
```bash
npm install
# or yarn install
```
3. Create a `.env` file in the `sigap-website` directory and add your environment variables (e.g., Supabase credentials, database URL):
```
DATABASE_URL="postgresql://user:password@host:port/database?schema=public"
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
```
4. Run Prisma migrations:
```bash
npx prisma migrate dev
```
### Running the App
```bash
npm run dev
# or yarn dev
```
- `pnpm install` ( we have legacy-peer-deps=true added in the .npmrc)
- Create a `.env.local` file by copying the example environment file:
`cp env.example.txt .env.local`
- Add the required environment variables to the `.env.local` file.
- `pnpm run dev`
## Project Structure
##### Environment Configuration Setup
To configure the environment for this project, refer to the `env.example.txt` file. This file contains the necessary environment variables required for authentication and error tracking.
You should now be able to access the application at http://localhost:3000.
> [!WARNING]
> After cloning or forking the repository, be cautious when pulling or syncing with the latest changes, as this may result in breaking conflicts.
Cheers! 🥂
```
src/
├── app/ # Next.js App Router pages
├── components/ # Reusable React components
├── lib/ # Utility functions and configurations
├── styles/ # Tailwind CSS styles
└── types/ # TypeScript type definitions
prisma/ # Prisma schema and migrations
public/ # Static assets
```