MIF_E31232435/lib/screens

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