fix: document division
Deskripsi: - update menu bottom pada saat select file atau dokumen No Issues
This commit is contained in:
153
QWEN.md
Normal file
153
QWEN.md
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
# Desa+ Mobile Application - Project Overview
|
||||||
|
|
||||||
|
## Project Summary
|
||||||
|
Desa+ is a comprehensive village/desa management mobile application built with React Native and Expo. The application serves as a digital platform for village administration, community communication, and information management. It provides various features to facilitate village governance, resident communication, and administrative tasks.
|
||||||
|
|
||||||
|
## Architecture & Technology Stack
|
||||||
|
- **Framework**: React Native with Expo (SDK 53)
|
||||||
|
- **State Management**: Redux Toolkit with React-Redux
|
||||||
|
- **Navigation**: Expo Router with React Navigation
|
||||||
|
- **Backend Services**: Firebase (Authentication, Realtime Database, Cloud Messaging)
|
||||||
|
- **UI Components**: Custom-built components with React Native elements
|
||||||
|
- **Language**: TypeScript for type safety
|
||||||
|
- **Build System**: EAS (Expo Application Service) for builds and deployments
|
||||||
|
|
||||||
|
## Key Features
|
||||||
|
- Announcement and village information system
|
||||||
|
- Community discussion forums
|
||||||
|
- Village event calendar
|
||||||
|
- Document management and archiving
|
||||||
|
- Project and task management
|
||||||
|
- Member and organizational structure management
|
||||||
|
- Push notifications for important updates
|
||||||
|
- Verification and authentication features
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
```
|
||||||
|
├── app/ # Application routes and pages (Expo Router)
|
||||||
|
│ ├── (application)/ # Main application screens
|
||||||
|
│ │ ├── announcement/
|
||||||
|
│ │ ├── banner/
|
||||||
|
│ │ ├── discussion/
|
||||||
|
│ │ ├── division/
|
||||||
|
│ │ ├── group/
|
||||||
|
│ │ ├── member/
|
||||||
|
│ │ ├── position/
|
||||||
|
│ │ ├── project/
|
||||||
|
│ │ ├── _layout.tsx
|
||||||
|
│ │ ├── edit-profile.tsx
|
||||||
|
│ │ ├── feature.tsx
|
||||||
|
│ │ ├── home.tsx
|
||||||
|
│ │ ├── notification.tsx
|
||||||
|
│ │ ├── profile.tsx
|
||||||
|
│ │ └── search.tsx
|
||||||
|
│ ├── _layout.tsx # Root layout
|
||||||
|
│ ├── index.tsx # Splash/login screen
|
||||||
|
│ ├── verification.tsx # OTP verification screen
|
||||||
|
├── components/ # Reusable UI components
|
||||||
|
│ ├── announcement/
|
||||||
|
│ ├── auth/
|
||||||
|
│ ├── banner/
|
||||||
|
│ ├── calendar/
|
||||||
|
│ ├── discussion/
|
||||||
|
│ ├── division/
|
||||||
|
│ ├── document/
|
||||||
|
│ ├── group/
|
||||||
|
│ ├── home/
|
||||||
|
│ ├── member/
|
||||||
|
│ ├── position/
|
||||||
|
│ ├── project/
|
||||||
|
│ ├── task/
|
||||||
|
│ ├── alertKonfirmasi.ts
|
||||||
|
│ ├── AppHeader.tsx
|
||||||
|
│ ├── Text.tsx
|
||||||
|
│ └── ... (many more components)
|
||||||
|
├── constants/ # Constants and styles
|
||||||
|
│ ├── Colors.ts
|
||||||
|
│ ├── ColorsStatus.ts
|
||||||
|
│ ├── ConstEnv.ts
|
||||||
|
│ ├── Headers.ts
|
||||||
|
│ ├── RoleUser.ts
|
||||||
|
│ ├── Styles.ts
|
||||||
|
│ └── ... (other constants)
|
||||||
|
├── assets/ # Static assets (images, fonts)
|
||||||
|
├── lib/ # Business logic and API utilities
|
||||||
|
├── providers/ # Context providers (AuthProvider)
|
||||||
|
├── android/ # Android native code
|
||||||
|
├── ios/ # iOS native code
|
||||||
|
├── scripts/ # Build and utility scripts
|
||||||
|
├── index.js # Entry point
|
||||||
|
├── app.config.js # Expo configuration
|
||||||
|
├── package.json # Dependencies and scripts
|
||||||
|
└── eas.json # EAS build configuration
|
||||||
|
```
|
||||||
|
|
||||||
|
## Environment Configuration
|
||||||
|
The application uses environment variables defined in a `.env` file:
|
||||||
|
- `URL_API` - API endpoint
|
||||||
|
- `URL_OTP` - OTP service endpoint
|
||||||
|
- `URL_STORAGE` - Storage endpoint
|
||||||
|
- `URL_FIREBASE_DB` - Firebase database URL
|
||||||
|
- `PASS_ENC` - Encryption password
|
||||||
|
- `WA_SERVER_TOKEN` - WhatsApp server token
|
||||||
|
- `IOS_GOOGLE_SERVICES_FILE` - Path to iOS Google services file
|
||||||
|
|
||||||
|
## Building and Running
|
||||||
|
|
||||||
|
### Development
|
||||||
|
1. Install dependencies:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Run the development server:
|
||||||
|
```bash
|
||||||
|
npx expo start
|
||||||
|
```
|
||||||
|
|
||||||
|
3. For platform-specific builds:
|
||||||
|
- Android: `npm run android`
|
||||||
|
- iOS: `npm run ios`
|
||||||
|
- Web: `npm run web`
|
||||||
|
|
||||||
|
### Production Builds
|
||||||
|
- Android: `npm run build:android` (uses EAS to build an app bundle)
|
||||||
|
|
||||||
|
### Testing
|
||||||
|
- Run tests: `npm run test`
|
||||||
|
|
||||||
|
### Linting
|
||||||
|
- Check code quality: `npm run lint`
|
||||||
|
|
||||||
|
## Key Dependencies
|
||||||
|
- `@react-native-firebase/*` - Firebase integration
|
||||||
|
- `@react-navigation/*` - Navigation solutions
|
||||||
|
- `@reduxjs/toolkit` - State management
|
||||||
|
- `expo-router` - File-based routing
|
||||||
|
- `react-native-gesture-handler` - Touch gesture support
|
||||||
|
- `react-native-reanimated` - Advanced animations
|
||||||
|
- `react-native-svg` - SVG rendering support
|
||||||
|
|
||||||
|
## Development Conventions
|
||||||
|
- Uses TypeScript for type safety
|
||||||
|
- Implements custom styling through the Styles.ts constant file
|
||||||
|
- Follows Expo's file-based routing convention
|
||||||
|
- Uses Redux Toolkit for centralized state management
|
||||||
|
- Implements custom components in the components directory
|
||||||
|
- Uses absolute imports with @/ alias (e.g., "@/components/...")
|
||||||
|
- Implements Firebase for authentication and real-time data
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
- Uses EAS for building and submitting to app stores
|
||||||
|
- Supports both Android (APK and App Bundle) and iOS (TestFlight/App Store)
|
||||||
|
- Configured for internal testing, preview, and production distributions
|
||||||
|
|
||||||
|
## Special Features
|
||||||
|
- Background message handling for push notifications
|
||||||
|
- Biometric authentication support
|
||||||
|
- Image picking and media library access
|
||||||
|
- Document picker functionality
|
||||||
|
- Date/time pickers with localization
|
||||||
|
- Custom toast notifications
|
||||||
|
- Carousel components for featured content
|
||||||
|
- Data visualization with charts
|
||||||
124
README.md
124
README.md
@@ -1,50 +1,114 @@
|
|||||||
# Welcome to your Expo app 👋
|
# Desa+
|
||||||
|
|
||||||
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
|
Desa+ adalah aplikasi mobile berbasis React Native yang dikembangkan dengan Expo untuk membantu pengelolaan dan komunikasi di lingkungan desa/kelurahan. Aplikasi ini menyediakan berbagai fitur untuk memudahkan administrasi desa, komunikasi antar warga, dan pengelolaan informasi penting.
|
||||||
|
|
||||||
## Get started
|
## Fitur Utama
|
||||||
|
|
||||||
1. Install dependencies
|
- 📢 Pengumuman dan informasi desa
|
||||||
|
- 💬 Forum diskusi komunitas
|
||||||
|
- 📅 Kalender kegiatan desa
|
||||||
|
- 📄 Dokumentasi dan arsip desa
|
||||||
|
- 📊 Pengelolaan proyek dan tugas desa
|
||||||
|
- 👥 Manajemen anggota dan struktur organisasi
|
||||||
|
- 📱 Notifikasi push untuk informasi penting
|
||||||
|
- 🎯 Fitur verifikasi dan otentikasi
|
||||||
|
|
||||||
|
## Teknologi yang Digunakan
|
||||||
|
|
||||||
|
- [React Native](https://reactnative.dev/) - Framework mobile cross-platform
|
||||||
|
- [Expo](https://expo.dev/) - Platform pengembangan aplikasi React Native
|
||||||
|
- [Firebase](https://firebase.google.com/) - Backend services (Authentication, Realtime Database, Cloud Messaging)
|
||||||
|
- [Redux Toolkit](https://redux-toolkit.js.org/) - State management
|
||||||
|
- [React Navigation](https://reactnavigation.org/) - Navigasi aplikasi
|
||||||
|
- [TypeScript](https://www.typescriptlang.org/) - Type safety
|
||||||
|
|
||||||
|
## Instalasi
|
||||||
|
|
||||||
|
1. Clone repository ini
|
||||||
|
```bash
|
||||||
|
git clone <repository-url>
|
||||||
|
cd mobile-darmasaba
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Install dependencies
|
||||||
```bash
|
```bash
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Start the app
|
3. Konfigurasi environment variables
|
||||||
|
Buat file `.env` di root direktori dan tambahkan variabel berikut:
|
||||||
```bash
|
```
|
||||||
npx expo start
|
URL_API=<api-endpoint>
|
||||||
|
URL_OTP=<otp-service-endpoint>
|
||||||
|
URL_STORAGE=<storage-endpoint>
|
||||||
|
URL_FIREBASE_DB=<firebase-database-url>
|
||||||
|
PASS_ENC=<encryption-password>
|
||||||
|
WA_SERVER_TOKEN=<whatsapp-server-token>
|
||||||
|
IOS_GOOGLE_SERVICES_FILE=<path-to-ios-google-services>
|
||||||
```
|
```
|
||||||
|
|
||||||
In the output, you'll find options to open the app in a
|
4. Jalankan aplikasi
|
||||||
|
```bash
|
||||||
|
npx expo start
|
||||||
|
```
|
||||||
|
|
||||||
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
|
## Struktur Proyek
|
||||||
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
|
|
||||||
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
|
|
||||||
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
|
|
||||||
|
|
||||||
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
|
```
|
||||||
|
├── app/ # File-file halaman utama
|
||||||
## Get a fresh project
|
├── components/ # Komponen reusable
|
||||||
|
│ ├── announcement/ # Komponen pengumuman
|
||||||
When you're ready, run:
|
│ ├── auth/ # Komponen otentikasi
|
||||||
|
│ ├── discussion/ # Komponen forum diskusi
|
||||||
```bash
|
│ ├── document/ # Komponen dokumentasi
|
||||||
npm run reset-project
|
│ ├── project/ # Komponen pengelolaan proyek
|
||||||
|
│ └── ...
|
||||||
|
├── assets/ # Gambar dan aset statis
|
||||||
|
├── constants/ # Konstanta global
|
||||||
|
├── lib/ # Library dan utilitas
|
||||||
|
└── ...
|
||||||
```
|
```
|
||||||
|
|
||||||
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
|
## Platform Support
|
||||||
|
|
||||||
## Learn more
|
Aplikasi ini didukung untuk:
|
||||||
|
- ✅ Android
|
||||||
|
- ✅ iOS
|
||||||
|
- ❌ Web (belum dioptimalkan)
|
||||||
|
|
||||||
To learn more about developing your project with Expo, look at the following resources:
|
## Development
|
||||||
|
|
||||||
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
|
Untuk menjalankan aplikasi di masing-masing platform:
|
||||||
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
|
|
||||||
|
|
||||||
## Join the community
|
### Android
|
||||||
|
```bash
|
||||||
|
npm run android
|
||||||
|
```
|
||||||
|
|
||||||
Join our community of developers creating universal apps.
|
### iOS
|
||||||
|
```bash
|
||||||
|
npm run ios
|
||||||
|
```
|
||||||
|
|
||||||
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
|
### Build Production
|
||||||
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
|
|
||||||
|
Untuk membuat build production Android:
|
||||||
|
```bash
|
||||||
|
npm run build:android
|
||||||
|
```
|
||||||
|
|
||||||
|
## Kontribusi
|
||||||
|
|
||||||
|
1. Fork repository ini
|
||||||
|
2. Buat branch fitur baru (`git checkout -b fitur/NamaFitur`)
|
||||||
|
3. Commit perubahan Anda (`git commit -m 'Tambahkan fitur NamaFitur'`)
|
||||||
|
4. Push ke branch (`git push origin fitur/NamaFitur`)
|
||||||
|
5. Buat pull request
|
||||||
|
|
||||||
|
## Lisensi
|
||||||
|
|
||||||
|
Proyek ini dilisensikan di bawah lisensi MIT - lihat file [LICENSE](LICENSE) untuk detail selengkapnya.
|
||||||
|
|
||||||
|
## Dukungan
|
||||||
|
|
||||||
|
Jika Anda menemukan masalah atau memiliki pertanyaan, silakan buka issue di repository ini.
|
||||||
|
|||||||
@@ -334,7 +334,7 @@ export default function DocumentDivision() {
|
|||||||
}, [path]);
|
}, [path]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SafeAreaView>
|
<SafeAreaView style={{ flex: 1 }}>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
options={{
|
options={{
|
||||||
// headerLeft: () =>
|
// headerLeft: () =>
|
||||||
@@ -409,7 +409,6 @@ export default function DocumentDivision() {
|
|||||||
/>
|
/>
|
||||||
<ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
|
<ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
|
||||||
<ScrollView
|
<ScrollView
|
||||||
style={[Styles.h100]}
|
|
||||||
refreshControl={
|
refreshControl={
|
||||||
<RefreshControl
|
<RefreshControl
|
||||||
refreshing={refreshing}
|
refreshing={refreshing}
|
||||||
|
|||||||
@@ -571,7 +571,6 @@ const Styles = StyleSheet.create({
|
|||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
backgroundColor:'black'
|
|
||||||
},
|
},
|
||||||
animatedView: {
|
animatedView: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
|
|||||||
Reference in New Issue
Block a user