182 lines
5.2 KiB
Markdown
182 lines
5.2 KiB
Markdown
# Flutter Screens Documentation
|
|
|
|
## Completed Screens (Phase 5)
|
|
|
|
### 1. Splash Screen (`splash_screen.dart`)
|
|
|
|
- **Purpose**: Initial loading screen with API health check
|
|
- **Features**:
|
|
- Animated logo (scale transition with elasticOut curve)
|
|
- Fade animation for app title
|
|
- Rotating loading indicator
|
|
- API connectivity status indicator
|
|
- **Usage**: Set as initial route in main.dart
|
|
|
|
### 2. Login Screen (`login_screen.dart`)
|
|
|
|
- **Purpose**: User authentication
|
|
- **Features**:
|
|
- Username & password input fields
|
|
- Password visibility toggle
|
|
- Form validation
|
|
- "Forgot password" & "Sign up" links
|
|
- Loading state during login
|
|
- **TODO**: Implement actual authentication logic
|
|
|
|
### 3. Dashboard Screen (`dashboard_screen.dart`)
|
|
|
|
- **Purpose**: Main hub showing key metrics and quick actions
|
|
- **Features**:
|
|
- Welcome greeting
|
|
- 4 stat cards (sales, revenue, low stock, critical stock)
|
|
- Quick action buttons (4 main actions)
|
|
- Recent transactions list
|
|
- Bottom navigation bar
|
|
- **Navigation**: Central to app flow, navigates to other screens
|
|
|
|
### 4. Transaction Screen (`transaction_screen.dart`) ⭐ CRITICAL
|
|
|
|
- **Purpose**: Input sales data in real-time from shop
|
|
- **Features**:
|
|
- Product dropdown selection (auto-fills category)
|
|
- Quantity & price input with auto-calculated total
|
|
- Date picker for transaction date
|
|
- Form validation
|
|
- Transaction history display (in-memory for now)
|
|
- **Importance**: This is the PRIMARY data input for ML prediction model
|
|
- **Integration**: Saves transactions to local database (future enhancement)
|
|
|
|
### 5. Product List Screen (`product_list_screen.dart`)
|
|
|
|
- **Purpose**: View and manage product inventory
|
|
- **Features**:
|
|
- Product search functionality
|
|
- Filter by status (semua/tersedia/rendah/kritis)
|
|
- Summary cards (total, available, need stock)
|
|
- Product cards with:
|
|
- Name, category, status badge
|
|
- Price and stock quantity
|
|
- Edit button (placeholder)
|
|
- **Status Colors**:
|
|
- Tersedia (Available) = Green
|
|
- Rendah (Low) = Yellow
|
|
- Kritis (Critical) = Red
|
|
|
|
### 6. Prediction Screen (`prediction_screen.dart`)
|
|
|
|
- **Purpose**: ML model prediction for stock demand
|
|
- **Features**:
|
|
- Input form: Product, Category (auto-fill), Price, Date
|
|
- API integration with MLService
|
|
- Results display showing:
|
|
- Predicted quantity
|
|
- Raw value, estimated total price
|
|
- Model accuracy (R²) and error (MAE)
|
|
- Recommendation card based on prediction
|
|
- Error handling and loading state
|
|
- **Integration**: Calls `/prediksi` endpoint from Flask API
|
|
|
|
### 7. Report Screen (`report_screen.dart`)
|
|
|
|
- **Purpose**: Sales analytics and business intelligence
|
|
- **Features**:
|
|
- Period selector (harian/mingguan/bulanan/tahunan)
|
|
- 4 KPI cards with trend indicators
|
|
- Sales trend chart (placeholder for chart library)
|
|
- Top 4 selling products with progress bars
|
|
- Category breakdown with percentage distribution
|
|
- PDF export button
|
|
- **TODO**: Integrate with actual data and chart library (e.g., fl_chart)
|
|
|
|
## Design System
|
|
|
|
### Colors (`lib/theme/colors.dart`)
|
|
|
|
- **Primary**: Brown (#8B7355)
|
|
- **Secondary**: Blue, Green, Orange, Red
|
|
- **Status**: Success (Green), Warning (Yellow), Error (Red)
|
|
- **Neutrals**: Grey scale with light cream background
|
|
|
|
### Typography (`lib/theme/text_styles.dart`)
|
|
|
|
- Display, Headline, Title, Body, Label styles
|
|
- Multiple size variants (Large, Medium, Small)
|
|
- Proper font weights and letter spacing
|
|
|
|
### Theme (`lib/theme/app_theme.dart`)
|
|
|
|
- Material 3 design system
|
|
- Consistent theming for all components
|
|
- Custom input decoration, buttons, cards, navigation
|
|
|
|
## Navigation Flow
|
|
|
|
```
|
|
Splash Screen
|
|
↓
|
|
Login Screen
|
|
↓
|
|
Dashboard Screen (home)
|
|
├→ Transaction Screen (primary input)
|
|
├→ Product List Screen
|
|
├→ Prediction Screen
|
|
└→ Report Screen
|
|
```
|
|
|
|
## Data Models
|
|
|
|
- **Product** (`lib/models/product_model.dart`): Inventory items
|
|
- **Transaction** (`lib/models/transaction_model.dart`): Sales records
|
|
- **PredictionRequest/Result** (`lib/models/prediction_model.dart`): ML API data
|
|
|
|
## Next Steps
|
|
|
|
1. **Navigation Setup**:
|
|
- Create app routing/navigation
|
|
- Set Splash as initial route
|
|
- Connect bottom navigation
|
|
|
|
2. **State Management**:
|
|
- Implement Provider pattern for state
|
|
- Create TransactionProvider, PredictionProvider, etc.
|
|
|
|
3. **Local Storage**:
|
|
- Add Hive or SQLite for persistence
|
|
- Save transaction history
|
|
- Cache product list
|
|
|
|
4. **API Integration**:
|
|
- Complete MLService integration in Prediction Screen
|
|
- Handle transactions upload to backend
|
|
- Sync data between app and server
|
|
|
|
5. **Polish & Testing**:
|
|
- Add unit tests
|
|
- Test API connectivity
|
|
- Performance optimization
|
|
- Error boundary handling
|
|
|
|
## File Structure
|
|
|
|
```
|
|
lib/
|
|
├── screens/
|
|
│ ├── splash_screen.dart
|
|
│ ├── login_screen.dart
|
|
│ ├── dashboard_screen.dart
|
|
│ ├── transaction_screen.dart
|
|
│ ├── product_list_screen.dart
|
|
│ ├── prediction_screen.dart
|
|
│ └── report_screen.dart
|
|
├── models/
|
|
│ ├── product_model.dart
|
|
│ ├── transaction_model.dart
|
|
│ └── prediction_model.dart
|
|
├── theme/
|
|
│ ├── colors.dart
|
|
│ ├── text_styles.dart
|
|
│ └── app_theme.dart
|
|
└── services/
|
|
└── ml_service.dart
|
|
```
|