Upload project TA

.editorconfig

@@ -0,0 +1,18 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[compose.yaml]
+indent_size = 4

.env.example

@@ -0,0 +1,86 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+APP_TIMEZONE=Asia/Jakarta
+
+APP_LOCALE=en
+APP_FALLBACK_LOCALE=en
+APP_FAKER_LOCALE=en_US
+
+APP_MAINTENANCE_DRIVER=file
+# APP_MAINTENANCE_STORE=database
+
+# PHP_CLI_SERVER_WORKERS=4
+
+BCRYPT_ROUNDS=12
+
+LOG_CHANNEL=stack
+LOG_STACK=single
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=mongodb
+DB_HOST=127.0.0.1
+DB_PORT=27017
+DB_DATABASE=fruit_dashboard
+DB_USERNAME=
+DB_PASSWORD=
+
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+SESSION_ENCRYPT=false
+SESSION_PATH=/
+SESSION_DOMAIN=null
+
+BROADCAST_CONNECTION=log
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=sync
+
+CACHE_STORE=file
+# CACHE_PREFIX=
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_CLIENT=phpredis
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=log
+MAIL_SCHEME=null
+MAIL_HOST=127.0.0.1
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_FROM_ADDRESS="hello@example.com"
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+VITE_APP_NAME="${APP_NAME}"
+
+# Telegram Bot Configuration
+TELEGRAM_BOT_TOKEN=your_bot_token_here
+TELEGRAM_CHAT_ID=your_chat_id_here
+
+# Threshold (hari) untuk reminder penyortiran ulang
+SORT_THRESHOLD_RAW_BANANA=1
+SORT_THRESHOLD_RIPE_BANANA=1
+SORT_THRESHOLD_RAW_ORANGE=1
+SORT_THRESHOLD_RIPE_ORANGE=1
+
+# MQTT Configuration (HiveMQ Cloud)
+MQTT_HOST=your_hivemq_cluster.s1.eu.hivemq.cloud
+MQTT_PORT=8883
+MQTT_USERNAME=your_mqtt_username
+MQTT_PASSWORD=your_mqtt_password
+MQTT_TOPIC=fruit/sorting/data
+MQTT_CLIENT_ID=laravel-subscriber
+MQTT_TLS_VERIFY=false
+

.gitattributes

@@ -0,0 +1,11 @@
+* text=auto eol=lf
+
+*.blade.php diff=html
+*.css diff=css
+*.html diff=html
+*.md diff=markdown
+*.php diff=php
+
+/.github export-ignore
+CHANGELOG.md export-ignore
+.styleci.yml export-ignore

.gitignore

@@ -0,0 +1,24 @@
+*.log
+.DS_Store
+.env
+.env.backup
+.env.production
+.phpactor.json
+.phpunit.result.cache
+/.fleet
+/.idea
+/.nova
+/.phpunit.cache
+/.vscode
+/.zed
+/auth.json
+/node_modules
+/public/build
+/public/hot
+/public/storage
+/storage/*.key
+/storage/pail
+/vendor
+Homestead.json
+Homestead.yaml
+Thumbs.db

README.md

@@ -0,0 +1,59 @@
+<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400" alt="Laravel Logo"></a></p>
+
+<p align="center">
+<a href="https://github.com/laravel/framework/actions"><img src="https://github.com/laravel/framework/workflows/tests/badge.svg" alt="Build Status"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
+</p>
+
+## About Laravel
+
+Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
+
+- [Simple, fast routing engine](https://laravel.com/docs/routing).
+- [Powerful dependency injection container](https://laravel.com/docs/container).
+- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
+- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
+- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
+- [Robust background job processing](https://laravel.com/docs/queues).
+- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
+
+Laravel is accessible, powerful, and provides tools required for large, robust applications.
+
+## Learning Laravel
+
+Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework. You can also check out [Laravel Learn](https://laravel.com/learn), where you will be guided through building a modern Laravel application.
+
+If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains thousands of video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
+
+## Laravel Sponsors
+
+We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the [Laravel Partners program](https://partners.laravel.com).
+
+### Premium Partners
+
+- **[Vehikl](https://vehikl.com)**
+- **[Tighten Co.](https://tighten.co)**
+- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
+- **[64 Robots](https://64robots.com)**
+- **[Curotec](https://www.curotec.com/services/technologies/laravel)**
+- **[DevSquad](https://devsquad.com/hire-laravel-developers)**
+- **[Redberry](https://redberry.international/laravel-development)**
+- **[Active Logic](https://activelogic.com)**
+
+## Contributing
+
+Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
+
+## Code of Conduct
+
+In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
+
+## Security Vulnerabilities
+
+If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
+
+## License
+
+The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

app/Console/Commands/MqttSubscriberCommand.php

@@ -0,0 +1,211 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Models\SortingHistory;
+use App\Models\SortingSession;
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\Log;
+use PhpMqtt\Client\MqttClient;
+use PhpMqtt\Client\ConnectionSettings;
+
+class MqttSubscriberCommand extends Command
+{
+    /**
+     * The name and signature of the console command.
+     */
+    protected $signature = 'mqtt:subscribe';
+
+    /**
+     * The console command description.
+     */
+    protected $description = 'Subscribe ke MQTT broker (HiveMQ) dan simpan data sensor ke MongoDB';
+
+    /**
+     * Execute the console command.
+     */
+    public function handle(): int
+    {
+        $host     = config('services.mqtt.host');
+        $port     = (int) config('services.mqtt.port', 8883);
+        $username = config('services.mqtt.username');
+        $password = config('services.mqtt.password');
+        $topic    = config('services.mqtt.topic', 'fruit/sorting/data');
+        $clientId = config('services.mqtt.client_id', 'laravel-subscriber-' . uniqid());
+
+        $verifyTls = (bool) env('MQTT_TLS_VERIFY', false);
+
+        if (empty($host) || empty($username) || empty($password)) {
+            $this->error('❌ MQTT belum dikonfigurasi. Isi MQTT_HOST, MQTT_USERNAME, MQTT_PASSWORD di .env');
+            return self::FAILURE;
+        }
+
+        $this->info("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+        $this->info("🔌 MQTT Subscriber — FruitDashboard");
+        $this->info("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+        $this->info("   Broker  : {$host}:{$port}");
+        $this->info("   Topic   : {$topic}");
+        $this->info("   Client  : {$clientId}");
+        $this->info("   TLS Ver.: " . ($verifyTls ? 'Enabled' : 'Bypassed (Local Dev)'));
+        $this->info("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+        $this->info("");
+
+        // Setup settings
+        $connectionSettings = (new ConnectionSettings())
+            ->setUsername($username)
+            ->setPassword($password)
+            ->setUseTls(true)
+            ->setTlsVerifyPeer($verifyTls)
+            ->setTlsVerifyPeerName($verifyTls)
+            ->setTlsSelfSignedAllowed(true)
+            ->setKeepAliveInterval(60)
+            ->setConnectTimeout(10);
+
+        $this->info("📡 Memulai listener MQTT. Tekan Ctrl+C untuk berhenti.");
+        $this->info("");
+
+        while (true) {
+            try {
+                $mqtt = new MqttClient($host, $port, $clientId);
+
+                $this->info("⏳ Menghubungkan ke HiveMQ...");
+                $mqtt->connect($connectionSettings, true);
+                $this->info("✅ Terhubung ke HiveMQ!");
+
+                Log::info("MQTT Subscriber terhubung ke {$host}:{$port}");
+
+                // Subscribe ke topic
+                $mqtt->subscribe($topic, function (string $topic, string $message) {
+                    $this->processMessage($topic, $message);
+                }, 1);
+
+                $this->info("📡 Mendengarkan pesan di topic: {$topic}");
+                $this->info("");
+
+                // Loop terus mendengarkan pesan
+                $mqtt->loop(true);
+
+                // Disconnect jika keluar loop secara normal
+                $mqtt->disconnect();
+                break;
+
+            } catch (\Exception $e) {
+                $this->error("⚠️ Koneksi terputus atau gagal: " . $e->getMessage());
+                Log::error("MQTT connection error, reconnecting in 5s: " . $e->getMessage());
+                $this->warn("⏳ Menghubungkan kembali dalam 5 detik...");
+                $this->info("");
+                sleep(5);
+            }
+        }
+
+        return self::SUCCESS;
+    }
+
+    /**
+     * Proses pesan yang diterima dari MQTT broker.
+     *
+     * Format JSON yang diharapkan dari ESP32/Arduino:
+     * {
+     *     "raw_banana_weight": 1.50,
+     *     "ripe_banana_weight": 0.80,
+     *     "raw_orange_weight": 2.00,
+     *     "ripe_orange_weight": 1.20
+     * }
+     */
+    protected function processMessage(string $topic, string $message): void
+    {
+        $timestamp = now()->format('H:i:s');
+        $this->line("[{$timestamp}] 📨 Pesan diterima dari topic: {$topic}");
+
+        try {
+            $data = json_decode($message, true);
+
+            if (json_last_error() !== JSON_ERROR_NONE) {
+                $this->warn("   ⚠️  Format JSON tidak valid: {$message}");
+                Log::warning("MQTT: Pesan JSON tidak valid", ['raw' => $message]);
+                return;
+            }
+
+            $this->line("   📦 Data: " . json_encode($data));
+
+            // Validasi field yang diperlukan
+            $required = ['raw_banana_weight', 'ripe_banana_weight', 'raw_orange_weight', 'ripe_orange_weight'];
+            foreach ($required as $field) {
+                if (!isset($data[$field]) || !is_numeric($data[$field])) {
+                    $this->warn("   ⚠️  Field '{$field}' tidak valid atau tidak ada.");
+                    Log::warning("MQTT: Field {$field} missing/invalid", $data);
+                    return;
+                }
+            }
+
+            // Cek apakah ada sesi sortir yang aktif
+            $session = SortingSession::active()->first();
+            if (!$session) {
+                $this->warn("   ⏸️  Tidak ada sesi sortir aktif. Data diabaikan.");
+                $this->warn("      Tekan 'Mulai Sortir' di dashboard terlebih dahulu.");
+                Log::info("MQTT: Data diterima tapi tidak ada sesi aktif, diabaikan.");
+                return;
+            }
+
+            // 1. Abaikan data jika semua berat adalah 0 (tidak ada buah di timbangan)
+            $hasWeight = (float) $data['raw_banana_weight'] > 0 ||
+                          (float) $data['ripe_banana_weight'] > 0 ||
+                          (float) $data['raw_orange_weight'] > 0 ||
+                          (float) $data['ripe_orange_weight'] > 0;
+
+            if (!$hasWeight) {
+                $this->line("   ℹ️  Data kosong (semua berat 0), dilewati.");
+                return;
+            }
+
+            // 2. Cegah duplikasi data untuk buah yang sama dalam rentang waktu singkat (< 3 detik)
+            $lastRecord = SortingHistory::where('session_id', (string) $session->_id)
+                ->latest('classification_date')
+                ->first();
+
+            if ($lastRecord) {
+                $timeDiff = now()->diffInSeconds($lastRecord->classification_date);
+                if ($timeDiff < 3) {
+                    $isDuplicate = abs((float)$lastRecord->raw_banana_weight - (float)$data['raw_banana_weight']) < 0.1 &&
+                                   abs((float)$lastRecord->ripe_banana_weight - (float)$data['ripe_banana_weight']) < 0.1 &&
+                                   abs((float)$lastRecord->raw_orange_weight - (float)$data['raw_orange_weight']) < 0.1 &&
+                                   abs((float)$lastRecord->ripe_orange_weight - (float)$data['ripe_orange_weight']) < 0.1;
+
+                    if ($isDuplicate) {
+                        $this->line("   ℹ️  Data duplikat untuk buah yang sama dalam waktu < 3 detik, dilewati.");
+                        return;
+                    }
+                }
+            }
+
+            // Simpan ke MongoDB
+            $record = SortingHistory::create([
+                'session_id'          => (string) $session->_id,
+                'classification_date' => now(),
+                'raw_banana_weight'   => (float) $data['raw_banana_weight'],
+                'ripe_banana_weight'  => (float) $data['ripe_banana_weight'],
+                'raw_orange_weight'   => (float) $data['raw_orange_weight'],
+                'ripe_orange_weight'  => (float) $data['ripe_orange_weight'],
+            ]);
+
+            $this->info("   ✅ Tersimpan ke MongoDB (ID: {$record->_id})");
+            $this->info("      🍌 Pisang: mentah={$data['raw_banana_weight']}gram, matang={$data['ripe_banana_weight']}gram");
+            $this->info("      🍊 Jeruk:  mentah={$data['raw_orange_weight']}gram, matang={$data['ripe_orange_weight']}gram");
+            $this->info("      📂 Sesi: {$session->_id}");
+            $this->info("");
+
+            Log::info("MQTT: Data tersimpan", [
+                'record_id'  => (string) $record->_id,
+                'session_id' => (string) $session->_id,
+                'data'       => $data,
+            ]);
+
+        } catch (\Exception $e) {
+            $this->error("   ❌ Gagal menyimpan data: " . $e->getMessage());
+            Log::error("MQTT: Gagal simpan data", [
+                'error'   => $e->getMessage(),
+                'message' => $message,
+            ]);
+        }
+    }
+}

app/Http/Controllers/Api/FruitImageController.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\FruitImage;
+use App\Models\SortingSession;
+use Illuminate\Http\Request;
+
+class FruitImageController extends Controller
+{
+    /**
+     * Terima foto JPEG dari ESP32-CAM dan simpan ke MongoDB.
+     * POST /api/upload-foto
+     *
+     * Field multipart/form-data:
+     *   - label : string (nama buah, contoh: "pisang matang")
+     *   - image : file JPEG
+     */
+    public function upload(Request $request)
+    {
+        $request->validate([
+            'label' => 'required|string|max:100',
+            'image' => 'required|file|mimes:jpeg,jpg,png|max:2048', // maks 2 MB, termasuk PNG untuk testing
+        ]);
+
+        try {
+            // Ambil sesi aktif jika ada, boleh null
+            $activeSession = SortingSession::active()->first();
+            $sessionId = $activeSession ? (string) $activeSession->_id : null;
+
+            // Konversi file JPEG ke Base64
+            $file = $request->file('image');
+            $imageBase64 = base64_encode(file_get_contents($file->getRealPath()));
+            $imageSize   = $file->getSize(); // ukuran byte asli
+
+            $record = FruitImage::create([
+                'session_id'   => $sessionId,
+                'label'        => $request->input('label'),
+                'image_base64' => $imageBase64,
+                'image_size'   => $imageSize,
+                'captured_at'  => now(),
+            ]);
+
+            return response()->json([
+                'success'    => true,
+                'message'    => 'Foto berhasil disimpan.',
+                'id'         => (string) $record->_id,
+                'label'      => $record->label,
+                'image_size' => $record->image_size,
+            ], 201);
+
+        } catch (\Exception $e) {
+            \Log::error('Upload foto gagal: ' . $e->getMessage());
+
+            return response()->json([
+                'success' => false,
+                'message' => 'Gagal menyimpan foto: ' . $e->getMessage(),
+            ], 500);
+        }
+    }
+}

app/Http/Controllers/Api/IoTController.php

@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\SortingHistory;
+use Illuminate\Http\Request;
+
+class IoTController extends Controller
+{
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'raw_banana_weight' => 'required|numeric',
+            'ripe_banana_weight' => 'required|numeric',
+            'raw_orange_weight' => 'required|numeric',
+            'ripe_orange_weight' => 'required|numeric',
+        ]);
+
+        $activeSession = \App\Models\SortingSession::active()->first();
+        $sessionId = $activeSession ? (string) $activeSession->_id : null;
+
+        // 1. Abaikan data jika semua berat adalah 0 (timbangan kosong)
+        $hasWeight = (float) $validated['raw_banana_weight'] > 0 ||
+                      (float) $validated['ripe_banana_weight'] > 0 ||
+                      (float) $validated['raw_orange_weight'] > 0 ||
+                      (float) $validated['ripe_orange_weight'] > 0;
+
+        if (!$hasWeight) {
+            return response()->json([
+                'message' => 'Data skipped (all weights 0)',
+                'data' => null
+            ], 200);
+        }
+
+        // 2. Cegah duplikasi jika ada sesi aktif
+        if ($sessionId) {
+            $lastRecord = SortingHistory::where('session_id', $sessionId)
+                ->latest('classification_date')
+                ->first();
+
+            if ($lastRecord) {
+                $timeDiff = now()->diffInSeconds($lastRecord->classification_date);
+                if ($timeDiff < 3) {
+                    $isDuplicate = abs((float)$lastRecord->raw_banana_weight - (float)$validated['raw_banana_weight']) < 0.1 &&
+                                   abs((float)$lastRecord->ripe_banana_weight - (float)$validated['ripe_banana_weight']) < 0.1 &&
+                                   abs((float)$lastRecord->raw_orange_weight - (float)$validated['raw_orange_weight']) < 0.1 &&
+                                   abs((float)$lastRecord->ripe_orange_weight - (float)$validated['ripe_orange_weight']) < 0.1;
+
+                    if ($isDuplicate) {
+                        return response()->json([
+                            'message' => 'Data skipped (duplicate)',
+                            'data' => null
+                        ], 200);
+                    }
+                }
+            }
+            $validated['session_id'] = $sessionId;
+        }
+
+        $validated['classification_date'] = now();
+
+        $history = SortingHistory::create($validated);
+
+        return response()->json([
+            'message' => 'Data saved successfully',
+            'data' => $history
+        ], 201);
+    }
+}

app/Http/Controllers/Controller.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace App\Http\Controllers;
+
+abstract class Controller
+{
+    //
+}

app/Http/Controllers/DashboardController.php

@@ -0,0 +1,427 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\SortingHistory;
+use App\Models\SortingSession;
+use App\Models\FruitImage;
+use App\Services\TelegramService;
+use Illuminate\Http\Request;
+use Carbon\Carbon;
+
+class DashboardController extends Controller
+{
+    public function index()
+    {
+        return view("dashboard");
+    }
+
+    public function history()
+    {
+        return view("history");
+    }
+
+    public function gallery()
+    {
+        return view("gallery");
+    }
+
+    public function latestData(Request $request)
+    {
+        $activeSession = SortingSession::active()->first();
+
+        $query = SortingHistory::latest("classification_date");
+
+        $this->applyFilters(
+            $query,
+            $request,
+            "classification_date",
+            $activeSession,
+        );
+
+        $latest = (clone $query)->first();
+        $history = (clone $query)->limit(200)->get();
+
+        // Hitung total kalkulasi dari query yang terfilter
+        $calcQuery = clone $query;
+        $totals = [
+            "total_raw_banana_weight" => (float) $calcQuery->sum("raw_banana_weight"),
+            "total_ripe_banana_weight" => (float) $calcQuery->sum("ripe_banana_weight"),
+            "total_raw_orange_weight" => (float) $calcQuery->sum("raw_orange_weight"),
+            "total_ripe_orange_weight" => (float) $calcQuery->sum("ripe_orange_weight"),
+            "total_records" => (int) $calcQuery->count(),
+        ];
+
+        // Daftar sesi yang sudah selesai untuk dropdown di frontend
+        $sessions = SortingSession::where("status", "completed")
+            ->latest("ended_at")
+            ->limit(20)
+            ->get()
+            ->map(function ($s) {
+                return [
+                    "id" => (string) $s->_id,
+                    "started_at" => $s->started_at,
+                    "ended_at" => $s->ended_at,
+                    "total_records" => $s->total_records,
+                ];
+            });
+
+        return response()->json([
+            "latest" => $latest,
+            "history" => $history,
+            "session" => $activeSession
+                ? [
+                    "id" => (string) $activeSession->_id,
+                    "status" => $activeSession->status,
+                    "started_at" => $activeSession->started_at,
+                ]
+                : null,
+            "sessions" => $sessions,
+            "totals" => $totals,
+        ]);
+    }
+
+    /**
+     * Mulai sesi sortir baru
+     * POST /api/session/start
+     */
+    public function startSession()
+    {
+        // Cek apakah sudah ada sesi aktif
+        $existing = SortingSession::active()->first();
+        if ($existing) {
+            return response()->json(
+                [
+                    "success" => false,
+                    "message" => "Sudah ada sesi sortir yang aktif.",
+                    "session" => $existing,
+                ],
+                409,
+            );
+        }
+
+        $session = SortingSession::create([
+            "status" => "active",
+            "started_at" => now(),
+            "ended_at" => null,
+            "total_raw_banana_weight" => 0,
+            "total_ripe_banana_weight" => 0,
+            "total_raw_orange_weight" => 0,
+            "total_ripe_orange_weight" => 0,
+            "total_records" => 0,
+        ]);
+
+        return response()->json([
+            "success" => true,
+            "message" => "Sesi sortir dimulai.",
+            "session" => [
+                "id" => (string) $session->_id,
+                "status" => $session->status,
+                "started_at" => $session->started_at,
+            ],
+        ]);
+    }
+
+    /**
+     * Stop sesi sortir, kalkulasi hasil, kirim Telegram
+     * POST /api/session/stop
+     */
+    public function stopSession()
+    {
+        $session = SortingSession::active()->first();
+        if (!$session) {
+            return response()->json(
+                [
+                    "success" => false,
+                    "message" => "Tidak ada sesi sortir yang aktif.",
+                ],
+                404,
+            );
+        }
+
+        // Kalkulasi total dari semua data yang masuk selama sesi ini
+        $sessionId = (string) $session->_id;
+        $records = SortingHistory::where("session_id", $sessionId)->get();
+
+        $totals = [
+            "total_raw_banana_weight" => $records->sum("raw_banana_weight"),
+            "total_ripe_banana_weight" => $records->sum("ripe_banana_weight"),
+            "total_raw_orange_weight" => $records->sum("raw_orange_weight"),
+            "total_ripe_orange_weight" => $records->sum("ripe_orange_weight"),
+            "total_records" => $records->count(),
+        ];
+
+        // Update sesi dengan hasil kalkulasi
+        $session->update(
+            array_merge($totals, [
+                "status" => "completed",
+                "ended_at" => now(),
+            ]),
+        );
+
+        // Refresh model setelah update
+        $session->refresh();
+
+        // Kirim hasil ke Telegram
+        try {
+            $telegramService = new TelegramService();
+            $telegramService->sendSessionResult($session);
+        } catch (\Exception $e) {
+            \Log::warning("Telegram alert gagal: " . $e->getMessage());
+        }
+
+        return response()->json([
+            "success" => true,
+            "message" => "Sesi sortir selesai. Hasil telah dikalkulasi.",
+            "session" => $session,
+            "totals" => $totals,
+        ]);
+    }
+
+    /**
+     * Endpoint untuk menerima data dari IoT device
+     * POST /api/store-data
+     * Data hanya diterima jika ada sesi aktif
+     */
+    public function storeData(Request $request)
+    {
+        // Cek apakah ada sesi aktif
+        $session = SortingSession::active()->first();
+        if (!$session) {
+            return response()->json(
+                [
+                    "success" => false,
+                    "message" =>
+                        "Tidak ada sesi sortir yang aktif. Tekan Start terlebih dahulu.",
+                ],
+                403,
+            );
+        }
+
+        $validated = $request->validate([
+            "raw_banana_weight" => "required|numeric|min:0",
+            "ripe_banana_weight" => "required|numeric|min:0",
+            "raw_orange_weight" => "required|numeric|min:0",
+            "ripe_orange_weight" => "required|numeric|min:0",
+        ]);
+
+        // 1. Abaikan data jika semua berat adalah 0 (tidak ada buah di timbangan)
+        $hasWeight =
+            (float) $validated["raw_banana_weight"] > 0 ||
+            (float) $validated["ripe_banana_weight"] > 0 ||
+            (float) $validated["raw_orange_weight"] > 0 ||
+            (float) $validated["ripe_orange_weight"] > 0;
+
+        if (!$hasWeight) {
+            return response()->json(
+                [
+                    "success" => true,
+                    "message" =>
+                        "Data dilewati karena semua berat bernilai 0 (timbangan kosong).",
+                    "data" => null,
+                ],
+                200,
+            );
+        }
+
+        // 2. Cegah duplikasi data buah yang sama dalam waktu < 3 detik
+        $lastRecord = SortingHistory::where(
+            "session_id",
+            (string) $session->_id,
+        )
+            ->latest("classification_date")
+            ->first();
+
+        if ($lastRecord) {
+            $timeDiff = now()->diffInSeconds($lastRecord->classification_date);
+            if ($timeDiff < 3) {
+                $isDuplicate =
+                    abs(
+                        (float) $lastRecord->raw_banana_weight -
+                            (float) $validated["raw_banana_weight"],
+                    ) < 0.1 &&
+                    abs(
+                        (float) $lastRecord->ripe_banana_weight -
+                            (float) $validated["ripe_banana_weight"],
+                    ) < 0.1 &&
+                    abs(
+                        (float) $lastRecord->raw_orange_weight -
+                            (float) $validated["raw_orange_weight"],
+                    ) < 0.1 &&
+                    abs(
+                        (float) $lastRecord->ripe_orange_weight -
+                            (float) $validated["ripe_orange_weight"],
+                    ) < 0.1;
+
+                if ($isDuplicate) {
+                    return response()->json(
+                        [
+                            "success" => true,
+                            "message" =>
+                                "Data dilewati karena dideteksi sebagai duplikat dari buah yang sama.",
+                            "data" => null,
+                        ],
+                        200,
+                    );
+                }
+            }
+        }
+
+        $validated["session_id"] = (string) $session->_id;
+        $validated["classification_date"] = now();
+
+        $record = SortingHistory::create($validated);
+
+        return response()->json(
+            [
+                "success" => true,
+                "data" => $record,
+            ],
+            201,
+        );
+    }
+
+    /**
+     * Ambil daftar foto buah terbaru
+     * GET /api/foto
+     */
+    public function latestFoto(Request $request)
+    {
+        $activeSession = SortingSession::active()->first();
+
+        $query = FruitImage::latest("captured_at");
+
+        // Filter by label jika ada
+        if ($request->has("label") && $request->label) {
+            $query->where("label", $request->label);
+        }
+
+        $this->applyFilters($query, $request, "captured_at", $activeSession);
+
+        $fotos = $query
+            ->limit(200)
+            ->get()
+            ->map(function ($item) {
+                return [
+                    "id" => (string) $item->_id,
+                    "label" => $item->label,
+                    "image_base64" => $item->image_base64,
+                    "image_size" => $item->image_size,
+                    "captured_at" => $item->captured_at,
+                ];
+            });
+
+        return response()->json(["fotos" => $fotos]);
+    }
+
+    /**
+     * Apply shared filter logic to a query builder.
+     *
+     * @param  \Illuminate\Database\Eloquent\Builder  $query
+     * @param  \Illuminate\Http\Request  $request
+     * @param  string  $dateColumn  The date column to filter on (e.g. 'classification_date' or 'captured_at')
+     * @param  \App\Models\SortingSession|null  $activeSession
+     */
+    private function applyFilters(
+        $query,
+        Request $request,
+        string $dateColumn,
+        $activeSession = null,
+    ): void {
+        $filter = $request->input("filter");
+
+        switch ($filter) {
+            case "session":
+                $sessionId = $request->input("session_id");
+                if ($sessionId) {
+                    $query->where("session_id", $sessionId);
+                } else {
+                    $this->applyDefaultSessionFilter($query, $activeSession);
+                }
+                break;
+
+            case "today":
+                $query
+                    ->where($dateColumn, ">=", Carbon::today()->startOfDay())
+                    ->where($dateColumn, "<=", Carbon::today()->endOfDay());
+                break;
+
+            case "week":
+                $query->where(
+                    $dateColumn,
+                    ">=",
+                    Carbon::now()->subDays(7)->startOfDay(),
+                );
+                break;
+
+            case "month":
+                $query->where(
+                    $dateColumn,
+                    ">=",
+                    Carbon::now()->subDays(30)->startOfDay(),
+                );
+                break;
+
+            case "custom":
+                if ($request->has("date_from") && $request->date_from) {
+                    $query->where(
+                        $dateColumn,
+                        ">=",
+                        Carbon::parse($request->date_from)->startOfDay(),
+                    );
+                }
+                if ($request->has("date_to") && $request->date_to) {
+                    $query->where(
+                        $dateColumn,
+                        "<=",
+                        Carbon::parse($request->date_to)->endOfDay(),
+                    );
+                }
+                break;
+
+            default:
+                // Backward compatibility: no filter param uses active/latest session
+                $this->applyDefaultSessionFilter($query, $activeSession);
+                break;
+        }
+    }
+
+    /**
+     * Apply the default session-based filter (active session or latest completed).
+     */
+    private function applyDefaultSessionFilter($query, $activeSession): void
+    {
+        if ($activeSession) {
+            $query->where("session_id", (string) $activeSession->_id);
+        } else {
+            $latestCompleted = SortingSession::where("status", "completed")
+                ->latest("ended_at")
+                ->first();
+            if ($latestCompleted) {
+                $query->where("session_id", (string) $latestCompleted->_id);
+            } else {
+                $query->where("session_id", "non-existent-session-id");
+            }
+        }
+    }
+
+    /**
+     * Cek status sesi saat ini
+     * GET /api/session/status
+     */
+    public function sessionStatus()
+    {
+        $session = SortingSession::active()->first();
+
+        return response()->json([
+            "active" => $session ? true : false,
+            "session" => $session
+                ? [
+                    "id" => (string) $session->_id,
+                    "status" => $session->status,
+                    "started_at" => $session->started_at,
+                ]
+                : null,
+        ]);
+    }
+}

app/Models/FruitImage.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Models;
+
+use MongoDB\Laravel\Eloquent\Model;
+
+class FruitImage extends Model
+{
+    protected $connection = 'mongodb';
+    protected $collection = 'fruit_images';
+
+    protected $fillable = [
+        'session_id',
+        'label',
+        'image_base64',
+        'image_size',
+        'captured_at',
+    ];
+
+    protected $casts = [
+        'captured_at' => 'datetime',
+    ];
+}

app/Models/SortingHistory.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Models;
+
+use MongoDB\Laravel\Eloquent\Model;
+
+class SortingHistory extends Model
+{
+    protected $connection = 'mongodb';
+    protected $collection = 'sorting_histories';
+
+    protected $fillable = [
+        'session_id',
+        'classification_date',
+        'raw_banana_weight',
+        'ripe_banana_weight',
+        'raw_orange_weight',
+        'ripe_orange_weight'
+    ];
+
+    protected $casts = [
+        'classification_date' => 'datetime',
+    ];
+}

app/Models/SortingSession.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Models;
+
+use MongoDB\Laravel\Eloquent\Model;
+
+class SortingSession extends Model
+{
+    protected $connection = 'mongodb';
+    protected $collection = 'sorting_sessions';
+
+    protected $fillable = [
+        'status',        // 'active' or 'completed'
+        'started_at',
+        'ended_at',
+        'total_raw_banana_weight',
+        'total_ripe_banana_weight',
+        'total_raw_orange_weight',
+        'total_ripe_orange_weight',
+        'total_records',
+    ];
+
+    protected $casts = [
+        'started_at' => 'datetime',
+        'ended_at' => 'datetime',
+    ];
+
+    /**
+     * Get the sorting history records for this session
+     */
+    public function histories()
+    {
+        return $this->hasMany(SortingHistory::class, 'session_id');
+    }
+
+    /**
+     * Get the fruit images captured during this session
+     */
+    public function images()
+    {
+        return $this->hasMany(FruitImage::class, 'session_id');
+    }
+
+    /**
+     * Scope for active sessions
+     */
+    public function scopeActive($query)
+    {
+        return $query->where('status', 'active');
+    }
+}

app/Models/User.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Models;
+
+// use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Database\Factories\UserFactory;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use MongoDB\Laravel\Auth\User as Authenticatable;
+use Illuminate\Notifications\Notifiable;
+
+class User extends Authenticatable
+{
+    /** @use HasFactory<UserFactory> */
+    use HasFactory, Notifiable;
+
+    protected $connection = 'mongodb';
+    protected $collection = 'users';
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var list<string>
+     */
+    protected $fillable = [
+        'name',
+        'email',
+        'password',
+    ];
+
+    /**
+     * The attributes that should be hidden for serialization.
+     *
+     * @var list<string>
+     */
+    protected $hidden = [
+        'password',
+        'remember_token',
+    ];
+
+    /**
+     * Get the attributes that should be cast.
+     *
+     * @return array<string, string>
+     */
+    protected function casts(): array
+    {
+        return [
+            'email_verified_at' => 'datetime',
+            'password' => 'hashed',
+        ];
+    }
+}

app/Providers/AppServiceProvider.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\ServiceProvider;
+
+class AppServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     */
+    public function register(): void
+    {
+        //
+    }
+
+    /**
+     * Bootstrap any application services.
+     */
+    public function boot(): void
+    {
+        //
+    }
+}

app/Services/TelegramService.php

@@ -0,0 +1,110 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\SortingHistory;
+use App\Models\SortingSession;
+use Carbon\Carbon;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
+class TelegramService
+{
+    protected string $botToken;
+    protected string $chatId;
+
+    public function __construct()
+    {
+        $this->botToken = config('services.telegram.bot_token', env('TELEGRAM_BOT_TOKEN', ''));
+        $this->chatId = config('services.telegram.chat_id', env('TELEGRAM_CHAT_ID', ''));
+    }
+
+    /**
+     * Kirim pesan ke Telegram Bot
+     */
+    public function sendMessage(string $text): bool
+    {
+        if (empty($this->botToken) || empty($this->chatId)) {
+            Log::warning('Telegram bot token atau chat ID belum dikonfigurasi.');
+            return false;
+        }
+
+        $url = "https://api.telegram.org/bot{$this->botToken}/sendMessage";
+
+        try {
+            $response = Http::timeout(15)
+                ->retry(3, 1000)
+                ->post($url, [
+                    'chat_id' => $this->chatId,
+                    'text' => $text,
+                    'parse_mode' => 'HTML',
+                    'disable_web_page_preview' => true,
+                ]);
+
+            if ($response->successful()) {
+                Log::info('Telegram alert berhasil dikirim.');
+                return true;
+            }
+
+            Log::error('Telegram API error: ' . $response->body());
+            return false;
+        } catch (\Exception $e) {
+            Log::error('Telegram send failed: ' . $e->getMessage());
+            return false;
+        }
+    }
+
+    /**
+     * Kirim hasil kalkulasi sesi sortir yang sudah selesai
+     */
+    public function sendSessionResult(SortingSession $session): bool
+    {
+        $message = $this->formatSessionMessage($session);
+        return $this->sendMessage($message);
+    }
+
+    /**
+     * Format pesan hasil sesi sortir
+     */
+    protected function formatSessionMessage(SortingSession $session): string
+    {
+        $startedAt = Carbon::parse($session->started_at)->timezone(config('app.timezone', 'Asia/Jakarta'))->format('d/m/Y H:i:s');
+        $endedAt = Carbon::parse($session->ended_at)->timezone(config('app.timezone', 'Asia/Jakarta'))->format('d/m/Y H:i:s');
+
+        // Hitung durasi sesi
+        $duration = Carbon::parse($session->started_at)->diff(Carbon::parse($session->ended_at));
+        $durationStr = '';
+        if ($duration->h > 0) $durationStr .= "{$duration->h} jam ";
+        if ($duration->i > 0) $durationStr .= "{$duration->i} menit ";
+        $durationStr .= "{$duration->s} detik";
+
+        $totalWeight = ($session->total_raw_banana_weight ?? 0)
+                     + ($session->total_ripe_banana_weight ?? 0)
+                     + ($session->total_raw_orange_weight ?? 0)
+                     + ($session->total_ripe_orange_weight ?? 0);
+
+        $message  = "✅ <b>SORTIR SELESAI!</b>\n";
+        $message .= "━━━━━━━━━━━━━━━━━━━━━\n\n";
+
+        $message .= "📅 <b>Waktu Mulai:</b> {$startedAt}\n";
+        $message .= "🏁 <b>Waktu Selesai:</b> {$endedAt}\n";
+        $message .= "⏱ <b>Durasi:</b> {$durationStr}\n";
+        $message .= "📊 <b>Total Data Masuk:</b> {$session->total_records} record\n\n";
+
+        $message .= "━━━━━━━━━━━━━━━━━━━━━\n";
+        $message .= "📋 <b>HASIL KALKULASI</b>\n";
+        $message .= "━━━━━━━━━━━━━━━━━━━━━\n\n";
+
+        $message .= "🍌 <b>Pisang Mentah:</b> " . number_format($session->total_raw_banana_weight ?? 0, 2) . " gram\n";
+        $message .= "🍌 <b>Pisang Matang:</b> " . number_format($session->total_ripe_banana_weight ?? 0, 2) . " gram\n";
+        $message .= "🍊 <b>Jeruk Mentah:</b> " . number_format($session->total_raw_orange_weight ?? 0, 2) . " gram\n";
+        $message .= "🍊 <b>Jeruk Matang:</b> " . number_format($session->total_ripe_orange_weight ?? 0, 2) . " gram\n\n";
+
+        $message .= "━━━━━━━━━━━━━━━━━━━━━\n";
+        $message .= "⚖️ <b>Total Berat:</b> " . number_format($totalWeight, 2) . " gram\n";
+
+        $message .= "\n📊 Dashboard: " . config('app.url', 'http://localhost:8000');
+
+        return $message;
+    }
+}

artisan

@@ -0,0 +1,18 @@
+#!/usr/bin/env php
+<?php
+
+use Illuminate\Foundation\Application;
+use Symfony\Component\Console\Input\ArgvInput;
+
+define('LARAVEL_START', microtime(true));
+
+// Register the Composer autoloader...
+require __DIR__.'/vendor/autoload.php';
+
+// Bootstrap Laravel and handle the command...
+/** @var Application $app */
+$app = require_once __DIR__.'/bootstrap/app.php';
+
+$status = $app->handleCommand(new ArgvInput);
+
+exit($status);

bootstrap/app.php

@@ -0,0 +1,19 @@
+<?php
+
+use Illuminate\Foundation\Application;
+use Illuminate\Foundation\Configuration\Exceptions;
+use Illuminate\Foundation\Configuration\Middleware;
+
+return Application::configure(basePath: dirname(__DIR__))
+    ->withRouting(
+        web: __DIR__.'/../routes/web.php',
+        api: __DIR__.'/../routes/api.php',
+        commands: __DIR__.'/../routes/console.php',
+        health: '/up',
+    )
+    ->withMiddleware(function (Middleware $middleware): void {
+        //
+    })
+    ->withExceptions(function (Exceptions $exceptions): void {
+        //
+    })->create();

bootstrap/cache/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

bootstrap/providers.php

@@ -0,0 +1,7 @@
+<?php
+
+use App\Providers\AppServiceProvider;
+
+return [
+    AppServiceProvider::class,
+];

composer.json

@@ -0,0 +1,88 @@
+{
+    "$schema": "https://getcomposer.org/schema.json",
+    "name": "laravel/laravel",
+    "type": "project",
+    "description": "The skeleton application for the Laravel framework.",
+    "keywords": ["laravel", "framework"],
+    "license": "MIT",
+    "require": {
+        "php": "^8.2",
+        "laravel/framework": "^12.0",
+        "laravel/tinker": "^2.10.1",
+        "mongodb/laravel-mongodb": "^5.7",
+        "php-mqtt/client": "^2.3"
+    },
+    "require-dev": {
+        "fakerphp/faker": "^1.23",
+        "laravel/pail": "^1.2.2",
+        "laravel/pint": "^1.24",
+        "laravel/sail": "^1.41",
+        "mockery/mockery": "^1.6",
+        "nunomaduro/collision": "^8.6",
+        "phpunit/phpunit": "^11.5.50"
+    },
+    "autoload": {
+        "psr-4": {
+            "App\\": "app/",
+            "Database\\Factories\\": "database/factories/",
+            "Database\\Seeders\\": "database/seeders/"
+        }
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "Tests\\": "tests/"
+        }
+    },
+    "scripts": {
+        "setup": [
+            "composer install",
+            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"",
+            "@php artisan key:generate",
+            "@php artisan migrate --force",
+            "npm install",
+            "npm run build"
+        ],
+        "dev": [
+            "Composer\\Config::disableProcessTimeout",
+            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
+        ],
+        "test": [
+            "@php artisan config:clear --ansi",
+            "@php artisan test"
+        ],
+        "post-autoload-dump": [
+            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
+            "@php artisan package:discover --ansi"
+        ],
+        "post-update-cmd": [
+            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
+        ],
+        "post-root-package-install": [
+            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
+        ],
+        "post-create-project-cmd": [
+            "@php artisan key:generate --ansi",
+            "@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"",
+            "@php artisan migrate --graceful --ansi"
+        ],
+        "pre-package-uninstall": [
+            "Illuminate\\Foundation\\ComposerScripts::prePackageUninstall"
+        ]
+    },
+    "extra": {
+        "laravel": {
+            "dont-discover": []
+        }
+    },
+    "config": {
+        "optimize-autoloader": true,
+        "preferred-install": "dist",
+        "sort-packages": true,
+        "allow-plugins": {
+            "pestphp/pest-plugin": true,
+            "php-http/discovery": true
+        }
+    },
+    "minimum-stability": "stable",
+    "prefer-stable": true
+}

config/app.php

@@ -0,0 +1,126 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Name
+    |--------------------------------------------------------------------------
+    |
+    | This value is the name of your application, which will be used when the
+    | framework needs to place the application's name in a notification or
+    | other UI elements where an application name needs to be displayed.
+    |
+    */
+
+    'name' => env('APP_NAME', 'Laravel'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Environment
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the "environment" your application is currently
+    | running in. This may determine how you prefer to configure various
+    | services the application utilizes. Set this in your ".env" file.
+    |
+    */
+
+    'env' => env('APP_ENV', 'production'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Debug Mode
+    |--------------------------------------------------------------------------
+    |
+    | When your application is in debug mode, detailed error messages with
+    | stack traces will be shown on every error that occurs within your
+    | application. If disabled, a simple generic error page is shown.
+    |
+    */
+
+    'debug' => (bool) env('APP_DEBUG', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application URL
+    |--------------------------------------------------------------------------
+    |
+    | This URL is used by the console to properly generate URLs when using
+    | the Artisan command line tool. You should set this to the root of
+    | the application so that it's available within Artisan commands.
+    |
+    */
+
+    'url' => env('APP_URL', 'http://localhost'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Timezone
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default timezone for your application, which
+    | will be used by the PHP date and date-time functions. The timezone
+    | is set to "UTC" by default as it is suitable for most use cases.
+    |
+    */
+
+    'timezone' => env('APP_TIMEZONE', 'Asia/Jakarta'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Locale Configuration
+    |--------------------------------------------------------------------------
+    |
+    | The application locale determines the default locale that will be used
+    | by Laravel's translation / localization methods. This option can be
+    | set to any locale for which you plan to have translation strings.
+    |
+    */
+
+    'locale' => env('APP_LOCALE', 'en'),
+
+    'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'),
+
+    'faker_locale' => env('APP_FAKER_LOCALE', 'en_US'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Encryption Key
+    |--------------------------------------------------------------------------
+    |
+    | This key is utilized by Laravel's encryption services and should be set
+    | to a random, 32 character string to ensure that all encrypted values
+    | are secure. You should do this prior to deploying the application.
+    |
+    */
+
+    'cipher' => 'AES-256-CBC',
+
+    'key' => env('APP_KEY'),
+
+    'previous_keys' => [
+        ...array_filter(
+            explode(',', (string) env('APP_PREVIOUS_KEYS', ''))
+        ),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Maintenance Mode Driver
+    |--------------------------------------------------------------------------
+    |
+    | These configuration options determine the driver used to determine and
+    | manage Laravel's "maintenance mode" status. The "cache" driver will
+    | allow maintenance mode to be controlled across multiple machines.
+    |
+    | Supported drivers: "file", "cache"
+    |
+    */
+
+    'maintenance' => [
+        'driver' => env('APP_MAINTENANCE_DRIVER', 'file'),
+        'store' => env('APP_MAINTENANCE_STORE', 'database'),
+    ],
+
+];

config/auth.php

@@ -0,0 +1,117 @@
+<?php
+
+use App\Models\User;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Defaults
+    |--------------------------------------------------------------------------
+    |
+    | This option defines the default authentication "guard" and password
+    | reset "broker" for your application. You may change these values
+    | as required, but they're a perfect start for most applications.
+    |
+    */
+
+    'defaults' => [
+        'guard' => env('AUTH_GUARD', 'web'),
+        'passwords' => env('AUTH_PASSWORD_BROKER', 'users'),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Guards
+    |--------------------------------------------------------------------------
+    |
+    | Next, you may define every authentication guard for your application.
+    | Of course, a great default configuration has been defined for you
+    | which utilizes session storage plus the Eloquent user provider.
+    |
+    | All authentication guards have a user provider, which defines how the
+    | users are actually retrieved out of your database or other storage
+    | system used by the application. Typically, Eloquent is utilized.
+    |
+    | Supported: "session"
+    |
+    */
+
+    'guards' => [
+        'web' => [
+            'driver' => 'session',
+            'provider' => 'users',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | User Providers
+    |--------------------------------------------------------------------------
+    |
+    | All authentication guards have a user provider, which defines how the
+    | users are actually retrieved out of your database or other storage
+    | system used by the application. Typically, Eloquent is utilized.
+    |
+    | If you have multiple user tables or models you may configure multiple
+    | providers to represent the model / table. These providers may then
+    | be assigned to any extra authentication guards you have defined.
+    |
+    | Supported: "database", "eloquent"
+    |
+    */
+
+    'providers' => [
+        'users' => [
+            'driver' => 'eloquent',
+            'model' => env('AUTH_MODEL', User::class),
+        ],
+
+        // 'users' => [
+        //     'driver' => 'database',
+        //     'table' => 'users',
+        // ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Resetting Passwords
+    |--------------------------------------------------------------------------
+    |
+    | These configuration options specify the behavior of Laravel's password
+    | reset functionality, including the table utilized for token storage
+    | and the user provider that is invoked to actually retrieve users.
+    |
+    | The expiry time is the number of minutes that each reset token will be
+    | considered valid. This security feature keeps tokens short-lived so
+    | they have less time to be guessed. You may change this as needed.
+    |
+    | The throttle setting is the number of seconds a user must wait before
+    | generating more password reset tokens. This prevents the user from
+    | quickly generating a very large amount of password reset tokens.
+    |
+    */
+
+    'passwords' => [
+        'users' => [
+            'provider' => 'users',
+            'table' => env('AUTH_PASSWORD_RESET_TOKEN_TABLE', 'password_reset_tokens'),
+            'expire' => 60,
+            'throttle' => 60,
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Confirmation Timeout
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define the number of seconds before a password confirmation
+    | window expires and users are asked to re-enter their password via the
+    | confirmation screen. By default, the timeout lasts for three hours.
+    |
+    */
+
+    'password_timeout' => env('AUTH_PASSWORD_TIMEOUT', 10800),
+
+];

config/cache.php

@@ -0,0 +1,117 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default cache store that will be used by the
+    | framework. This connection is utilized if another isn't explicitly
+    | specified when running a cache operation inside the application.
+    |
+    */
+
+    'default' => env('CACHE_STORE', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Stores
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define all of the cache "stores" for your application as
+    | well as their drivers. You may even define multiple stores for the
+    | same cache driver to group types of items stored in your caches.
+    |
+    | Supported drivers: "array", "database", "file", "memcached",
+    |                    "redis", "dynamodb", "octane",
+    |                    "failover", "null"
+    |
+    */
+
+    'stores' => [
+
+        'array' => [
+            'driver' => 'array',
+            'serialize' => false,
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'connection' => env('DB_CACHE_CONNECTION'),
+            'table' => env('DB_CACHE_TABLE', 'cache'),
+            'lock_connection' => env('DB_CACHE_LOCK_CONNECTION'),
+            'lock_table' => env('DB_CACHE_LOCK_TABLE'),
+        ],
+
+        'file' => [
+            'driver' => 'file',
+            'path' => storage_path('framework/cache/data'),
+            'lock_path' => storage_path('framework/cache/data'),
+        ],
+
+        'memcached' => [
+            'driver' => 'memcached',
+            'persistent_id' => env('MEMCACHED_PERSISTENT_ID'),
+            'sasl' => [
+                env('MEMCACHED_USERNAME'),
+                env('MEMCACHED_PASSWORD'),
+            ],
+            'options' => [
+                // Memcached::OPT_CONNECT_TIMEOUT => 2000,
+            ],
+            'servers' => [
+                [
+                    'host' => env('MEMCACHED_HOST', '127.0.0.1'),
+                    'port' => env('MEMCACHED_PORT', 11211),
+                    'weight' => 100,
+                ],
+            ],
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => env('REDIS_CACHE_CONNECTION', 'cache'),
+            'lock_connection' => env('REDIS_CACHE_LOCK_CONNECTION', 'default'),
+        ],
+
+        'dynamodb' => [
+            'driver' => 'dynamodb',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
+            'endpoint' => env('DYNAMODB_ENDPOINT'),
+        ],
+
+        'octane' => [
+            'driver' => 'octane',
+        ],
+
+        'failover' => [
+            'driver' => 'failover',
+            'stores' => [
+                'database',
+                'array',
+            ],
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Key Prefix
+    |--------------------------------------------------------------------------
+    |
+    | When utilizing the APC, database, memcached, Redis, and DynamoDB cache
+    | stores, there might be other applications using the same cache. For
+    | that reason, you may prefix every cache key to avoid collisions.
+    |
+    */
+
+    'prefix' => env('CACHE_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-cache-'),
+
+];

config/database.php

@@ -0,0 +1,196 @@
+<?php
+
+use Illuminate\Support\Str;
+use Pdo\Mysql;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Database Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which of the database connections below you wish
+    | to use as your default connection for database operations. This is
+    | the connection which will be utilized unless another connection
+    | is explicitly specified when you execute a query / statement.
+    |
+    */
+
+    'default' => env('DB_CONNECTION', 'mongodb'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Database Connections
+    |--------------------------------------------------------------------------
+    |
+    | Below are all of the database connections defined for your application.
+    | An example configuration is provided for each database system which
+    | is supported by Laravel. You're free to add / remove connections.
+    |
+    */
+
+    'connections' => [
+
+        'sqlite' => [
+            'driver' => 'sqlite',
+            'url' => env('DB_URL'),
+            'database' => env('DB_SQLITE_DATABASE', database_path('database.sqlite')),
+            'prefix' => '',
+            'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
+            'busy_timeout' => null,
+            'journal_mode' => null,
+            'synchronous' => null,
+            'transaction_mode' => 'DEFERRED',
+        ],
+
+        'mongodb' => [
+            'driver' => 'mongodb',
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', 27017),
+            'database' => env('DB_DATABASE', 'fruit_dashboard'),
+            'username' => env('DB_USERNAME', ''),
+            'password' => env('DB_PASSWORD', ''),
+            'options' => [
+                'database' => env('DB_AUTHENTICATION_DATABASE', 'admin'),
+            ],
+        ],
+
+        'mysql' => [
+            'driver' => 'mysql',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => env('DB_CHARSET', 'utf8mb4'),
+            'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                (PHP_VERSION_ID >= 80500 ? Mysql::ATTR_SSL_CA : PDO::MYSQL_ATTR_SSL_CA) => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'mariadb' => [
+            'driver' => 'mariadb',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => env('DB_CHARSET', 'utf8mb4'),
+            'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                (PHP_VERSION_ID >= 80500 ? Mysql::ATTR_SSL_CA : PDO::MYSQL_ATTR_SSL_CA) => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'pgsql' => [
+            'driver' => 'pgsql',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '5432'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => env('DB_CHARSET', 'utf8'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'search_path' => 'public',
+            'sslmode' => env('DB_SSLMODE', 'prefer'),
+        ],
+
+        'sqlsrv' => [
+            'driver' => 'sqlsrv',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', 'localhost'),
+            'port' => env('DB_PORT', '1433'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => env('DB_CHARSET', 'utf8'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            // 'encrypt' => env('DB_ENCRYPT', 'yes'),
+            // 'trust_server_certificate' => env('DB_TRUST_SERVER_CERTIFICATE', 'false'),
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Migration Repository Table
+    |--------------------------------------------------------------------------
+    |
+    | This table keeps track of all the migrations that have already run for
+    | your application. Using this information, we can determine which of
+    | the migrations on disk haven't actually been run on the database.
+    |
+    */
+
+    'migrations' => [
+        'table' => 'migrations',
+        'update_date_on_publish' => true,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Redis Databases
+    |--------------------------------------------------------------------------
+    |
+    | Redis is an open source, fast, and advanced key-value store that also
+    | provides a richer body of commands than a typical key-value system
+    | such as Memcached. You may define your connection settings here.
+    |
+    */
+
+    'redis' => [
+
+        'client' => env('REDIS_CLIENT', 'phpredis'),
+
+        'options' => [
+            'cluster' => env('REDIS_CLUSTER', 'redis'),
+            'prefix' => env('REDIS_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-database-'),
+            'persistent' => env('REDIS_PERSISTENT', false),
+        ],
+
+        'default' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'username' => env('REDIS_USERNAME'),
+            'password' => env('REDIS_PASSWORD'),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_DB', '0'),
+            'max_retries' => env('REDIS_MAX_RETRIES', 3),
+            'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
+            'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
+            'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
+        ],
+
+        'cache' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'username' => env('REDIS_USERNAME'),
+            'password' => env('REDIS_PASSWORD'),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_CACHE_DB', '1'),
+            'max_retries' => env('REDIS_MAX_RETRIES', 3),
+            'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
+            'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
+            'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
+        ],
+
+    ],
+
+];

config/filesystems.php

@@ -0,0 +1,80 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Filesystem Disk
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default filesystem disk that should be used
+    | by the framework. The "local" disk, as well as a variety of cloud
+    | based disks are available to your application for file storage.
+    |
+    */
+
+    'default' => env('FILESYSTEM_DISK', 'local'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Filesystem Disks
+    |--------------------------------------------------------------------------
+    |
+    | Below you may configure as many filesystem disks as necessary, and you
+    | may even configure multiple disks for the same driver. Examples for
+    | most supported storage drivers are configured here for reference.
+    |
+    | Supported drivers: "local", "ftp", "sftp", "s3"
+    |
+    */
+
+    'disks' => [
+
+        'local' => [
+            'driver' => 'local',
+            'root' => storage_path('app/private'),
+            'serve' => true,
+            'throw' => false,
+            'report' => false,
+        ],
+
+        'public' => [
+            'driver' => 'local',
+            'root' => storage_path('app/public'),
+            'url' => rtrim(env('APP_URL', 'http://localhost'), '/').'/storage',
+            'visibility' => 'public',
+            'throw' => false,
+            'report' => false,
+        ],
+
+        's3' => [
+            'driver' => 's3',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION'),
+            'bucket' => env('AWS_BUCKET'),
+            'url' => env('AWS_URL'),
+            'endpoint' => env('AWS_ENDPOINT'),
+            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
+            'throw' => false,
+            'report' => false,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Symbolic Links
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the symbolic links that will be created when the
+    | `storage:link` Artisan command is executed. The array keys should be
+    | the locations of the links and the values should be their targets.
+    |
+    */
+
+    'links' => [
+        public_path('storage') => storage_path('app/public'),
+    ],
+
+];

config/logging.php

@@ -0,0 +1,132 @@
+<?php
+
+use Monolog\Handler\NullHandler;
+use Monolog\Handler\StreamHandler;
+use Monolog\Handler\SyslogUdpHandler;
+use Monolog\Processor\PsrLogMessageProcessor;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option defines the default log channel that is utilized to write
+    | messages to your logs. The value provided here should match one of
+    | the channels present in the list of "channels" configured below.
+    |
+    */
+
+    'default' => env('LOG_CHANNEL', 'stack'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Deprecations Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the log channel that should be used to log warnings
+    | regarding deprecated PHP and library features. This allows you to get
+    | your application ready for upcoming major versions of dependencies.
+    |
+    */
+
+    'deprecations' => [
+        'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'),
+        'trace' => env('LOG_DEPRECATIONS_TRACE', false),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Log Channels
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the log channels for your application. Laravel
+    | utilizes the Monolog PHP logging library, which includes a variety
+    | of powerful log handlers and formatters that you're free to use.
+    |
+    | Available drivers: "single", "daily", "slack", "syslog",
+    |                    "errorlog", "monolog", "custom", "stack"
+    |
+    */
+
+    'channels' => [
+
+        'stack' => [
+            'driver' => 'stack',
+            'channels' => explode(',', (string) env('LOG_STACK', 'single')),
+            'ignore_exceptions' => false,
+        ],
+
+        'single' => [
+            'driver' => 'single',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => env('LOG_LEVEL', 'debug'),
+            'replace_placeholders' => true,
+        ],
+
+        'daily' => [
+            'driver' => 'daily',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => env('LOG_LEVEL', 'debug'),
+            'days' => env('LOG_DAILY_DAYS', 14),
+            'replace_placeholders' => true,
+        ],
+
+        'slack' => [
+            'driver' => 'slack',
+            'url' => env('LOG_SLACK_WEBHOOK_URL'),
+            'username' => env('LOG_SLACK_USERNAME', env('APP_NAME', 'Laravel')),
+            'emoji' => env('LOG_SLACK_EMOJI', ':boom:'),
+            'level' => env('LOG_LEVEL', 'critical'),
+            'replace_placeholders' => true,
+        ],
+
+        'papertrail' => [
+            'driver' => 'monolog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'handler' => env('LOG_PAPERTRAIL_HANDLER', SyslogUdpHandler::class),
+            'handler_with' => [
+                'host' => env('PAPERTRAIL_URL'),
+                'port' => env('PAPERTRAIL_PORT'),
+                'connectionString' => 'tls://'.env('PAPERTRAIL_URL').':'.env('PAPERTRAIL_PORT'),
+            ],
+            'processors' => [PsrLogMessageProcessor::class],
+        ],
+
+        'stderr' => [
+            'driver' => 'monolog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'handler' => StreamHandler::class,
+            'handler_with' => [
+                'stream' => 'php://stderr',
+            ],
+            'formatter' => env('LOG_STDERR_FORMATTER'),
+            'processors' => [PsrLogMessageProcessor::class],
+        ],
+
+        'syslog' => [
+            'driver' => 'syslog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'facility' => env('LOG_SYSLOG_FACILITY', LOG_USER),
+            'replace_placeholders' => true,
+        ],
+
+        'errorlog' => [
+            'driver' => 'errorlog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'replace_placeholders' => true,
+        ],
+
+        'null' => [
+            'driver' => 'monolog',
+            'handler' => NullHandler::class,
+        ],
+
+        'emergency' => [
+            'path' => storage_path('logs/laravel.log'),
+        ],
+
+    ],
+
+];

config/mail.php

@@ -0,0 +1,118 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Mailer
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default mailer that is used to send all email
+    | messages unless another mailer is explicitly specified when sending
+    | the message. All additional mailers can be configured within the
+    | "mailers" array. Examples of each type of mailer are provided.
+    |
+    */
+
+    'default' => env('MAIL_MAILER', 'log'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Mailer Configurations
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure all of the mailers used by your application plus
+    | their respective settings. Several examples have been configured for
+    | you and you are free to add your own as your application requires.
+    |
+    | Laravel supports a variety of mail "transport" drivers that can be used
+    | when delivering an email. You may specify which one you're using for
+    | your mailers below. You may also add additional mailers if needed.
+    |
+    | Supported: "smtp", "sendmail", "mailgun", "ses", "ses-v2",
+    |            "postmark", "resend", "log", "array",
+    |            "failover", "roundrobin"
+    |
+    */
+
+    'mailers' => [
+
+        'smtp' => [
+            'transport' => 'smtp',
+            'scheme' => env('MAIL_SCHEME'),
+            'url' => env('MAIL_URL'),
+            'host' => env('MAIL_HOST', '127.0.0.1'),
+            'port' => env('MAIL_PORT', 2525),
+            'username' => env('MAIL_USERNAME'),
+            'password' => env('MAIL_PASSWORD'),
+            'timeout' => null,
+            'local_domain' => env('MAIL_EHLO_DOMAIN', parse_url((string) env('APP_URL', 'http://localhost'), PHP_URL_HOST)),
+        ],
+
+        'ses' => [
+            'transport' => 'ses',
+        ],
+
+        'postmark' => [
+            'transport' => 'postmark',
+            // 'message_stream_id' => env('POSTMARK_MESSAGE_STREAM_ID'),
+            // 'client' => [
+            //     'timeout' => 5,
+            // ],
+        ],
+
+        'resend' => [
+            'transport' => 'resend',
+        ],
+
+        'sendmail' => [
+            'transport' => 'sendmail',
+            'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -bs -i'),
+        ],
+
+        'log' => [
+            'transport' => 'log',
+            'channel' => env('MAIL_LOG_CHANNEL'),
+        ],
+
+        'array' => [
+            'transport' => 'array',
+        ],
+
+        'failover' => [
+            'transport' => 'failover',
+            'mailers' => [
+                'smtp',
+                'log',
+            ],
+            'retry_after' => 60,
+        ],
+
+        'roundrobin' => [
+            'transport' => 'roundrobin',
+            'mailers' => [
+                'ses',
+                'postmark',
+            ],
+            'retry_after' => 60,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global "From" Address
+    |--------------------------------------------------------------------------
+    |
+    | You may wish for all emails sent by your application to be sent from
+    | the same address. Here you may specify a name and address that is
+    | used globally for all emails that are sent by your application.
+    |
+    */
+
+    'from' => [
+        'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
+        'name' => env('MAIL_FROM_NAME', env('APP_NAME', 'Laravel')),
+    ],
+
+];

config/queue.php

@@ -0,0 +1,129 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Queue Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Laravel's queue supports a variety of backends via a single, unified
+    | API, giving you convenient access to each backend using identical
+    | syntax for each. The default queue connection is defined below.
+    |
+    */
+
+    'default' => env('QUEUE_CONNECTION', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Queue Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the connection options for every queue backend
+    | used by your application. An example configuration is provided for
+    | each backend supported by Laravel. You're also free to add more.
+    |
+    | Drivers: "sync", "database", "beanstalkd", "sqs", "redis",
+    |          "deferred", "background", "failover", "null"
+    |
+    */
+
+    'connections' => [
+
+        'sync' => [
+            'driver' => 'sync',
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'connection' => env('DB_QUEUE_CONNECTION'),
+            'table' => env('DB_QUEUE_TABLE', 'jobs'),
+            'queue' => env('DB_QUEUE', 'default'),
+            'retry_after' => (int) env('DB_QUEUE_RETRY_AFTER', 90),
+            'after_commit' => false,
+        ],
+
+        'beanstalkd' => [
+            'driver' => 'beanstalkd',
+            'host' => env('BEANSTALKD_QUEUE_HOST', 'localhost'),
+            'queue' => env('BEANSTALKD_QUEUE', 'default'),
+            'retry_after' => (int) env('BEANSTALKD_QUEUE_RETRY_AFTER', 90),
+            'block_for' => 0,
+            'after_commit' => false,
+        ],
+
+        'sqs' => [
+            'driver' => 'sqs',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
+            'queue' => env('SQS_QUEUE', 'default'),
+            'suffix' => env('SQS_SUFFIX'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'after_commit' => false,
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => env('REDIS_QUEUE_CONNECTION', 'default'),
+            'queue' => env('REDIS_QUEUE', 'default'),
+            'retry_after' => (int) env('REDIS_QUEUE_RETRY_AFTER', 90),
+            'block_for' => null,
+            'after_commit' => false,
+        ],
+
+        'deferred' => [
+            'driver' => 'deferred',
+        ],
+
+        'background' => [
+            'driver' => 'background',
+        ],
+
+        'failover' => [
+            'driver' => 'failover',
+            'connections' => [
+                'database',
+                'deferred',
+            ],
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Job Batching
+    |--------------------------------------------------------------------------
+    |
+    | The following options configure the database and table that store job
+    | batching information. These options can be updated to any database
+    | connection and table which has been defined by your application.
+    |
+    */
+
+    'batching' => [
+        'database' => env('DB_CONNECTION', 'sqlite'),
+        'table' => 'job_batches',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Failed Queue Jobs
+    |--------------------------------------------------------------------------
+    |
+    | These options configure the behavior of failed queue job logging so you
+    | can control how and where failed jobs are stored. Laravel ships with
+    | support for storing failed jobs in a simple file or in a database.
+    |
+    | Supported drivers: "database-uuids", "dynamodb", "file", "null"
+    |
+    */
+
+    'failed' => [
+        'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'),
+        'database' => env('DB_CONNECTION', 'sqlite'),
+        'table' => 'failed_jobs',
+    ],
+
+];

config/services.php

@@ -0,0 +1,52 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Third Party Services
+    |--------------------------------------------------------------------------
+    |
+    | This file is for storing the credentials for third party services such
+    | as Mailgun, Postmark, AWS and more. This file provides the de facto
+    | location for this type of information, allowing packages to have
+    | a conventional file to locate the various service credentials.
+    |
+    */
+
+    'postmark' => [
+        'key' => env('POSTMARK_API_KEY'),
+    ],
+
+    'resend' => [
+        'key' => env('RESEND_API_KEY'),
+    ],
+
+    'ses' => [
+        'key' => env('AWS_ACCESS_KEY_ID'),
+        'secret' => env('AWS_SECRET_ACCESS_KEY'),
+        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+    ],
+
+    'slack' => [
+        'notifications' => [
+            'bot_user_oauth_token' => env('SLACK_BOT_USER_OAUTH_TOKEN'),
+            'channel' => env('SLACK_BOT_USER_DEFAULT_CHANNEL'),
+        ],
+    ],
+
+    'telegram' => [
+        'bot_token' => env('TELEGRAM_BOT_TOKEN', ''),
+        'chat_id' => env('TELEGRAM_CHAT_ID', ''),
+    ],
+
+    'mqtt' => [
+        'host'      => env('MQTT_HOST', ''),
+        'port'      => env('MQTT_PORT', 8883),
+        'username'  => env('MQTT_USERNAME', ''),
+        'password'  => env('MQTT_PASSWORD', ''),
+        'topic'     => env('MQTT_TOPIC', 'fruit/sorting/data'),
+        'client_id' => env('MQTT_CLIENT_ID', 'laravel-subscriber'),
+    ],
+
+];

config/session.php

@@ -0,0 +1,217 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Session Driver
+    |--------------------------------------------------------------------------
+    |
+    | This option determines the default session driver that is utilized for
+    | incoming requests. Laravel supports a variety of storage options to
+    | persist session data. Database storage is a great default choice.
+    |
+    | Supported: "file", "cookie", "database", "memcached",
+    |            "redis", "dynamodb", "array"
+    |
+    */
+
+    'driver' => env('SESSION_DRIVER', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Lifetime
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the number of minutes that you wish the session
+    | to be allowed to remain idle before it expires. If you want them
+    | to expire immediately when the browser is closed then you may
+    | indicate that via the expire_on_close configuration option.
+    |
+    */
+
+    'lifetime' => (int) env('SESSION_LIFETIME', 120),
+
+    'expire_on_close' => env('SESSION_EXPIRE_ON_CLOSE', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Encryption
+    |--------------------------------------------------------------------------
+    |
+    | This option allows you to easily specify that all of your session data
+    | should be encrypted before it's stored. All encryption is performed
+    | automatically by Laravel and you may use the session like normal.
+    |
+    */
+
+    'encrypt' => env('SESSION_ENCRYPT', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session File Location
+    |--------------------------------------------------------------------------
+    |
+    | When utilizing the "file" session driver, the session files are placed
+    | on disk. The default storage location is defined here; however, you
+    | are free to provide another location where they should be stored.
+    |
+    */
+
+    'files' => storage_path('framework/sessions'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Connection
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" or "redis" session drivers, you may specify a
+    | connection that should be used to manage these sessions. This should
+    | correspond to a connection in your database configuration options.
+    |
+    */
+
+    'connection' => env('SESSION_CONNECTION'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Table
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" session driver, you may specify the table to
+    | be used to store sessions. Of course, a sensible default is defined
+    | for you; however, you're welcome to change this to another table.
+    |
+    */
+
+    'table' => env('SESSION_TABLE', 'sessions'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | When using one of the framework's cache driven session backends, you may
+    | define the cache store which should be used to store the session data
+    | between requests. This must match one of your defined cache stores.
+    |
+    | Affects: "dynamodb", "memcached", "redis"
+    |
+    */
+
+    'store' => env('SESSION_STORE'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Sweeping Lottery
+    |--------------------------------------------------------------------------
+    |
+    | Some session drivers must manually sweep their storage location to get
+    | rid of old sessions from storage. Here are the chances that it will
+    | happen on a given request. By default, the odds are 2 out of 100.
+    |
+    */
+
+    'lottery' => [2, 100],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may change the name of the session cookie that is created by
+    | the framework. Typically, you should not need to change this value
+    | since doing so does not grant a meaningful security improvement.
+    |
+    */
+
+    'cookie' => env(
+        'SESSION_COOKIE',
+        Str::slug((string) env('APP_NAME', 'laravel')).'-session'
+    ),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Path
+    |--------------------------------------------------------------------------
+    |
+    | The session cookie path determines the path for which the cookie will
+    | be regarded as available. Typically, this will be the root path of
+    | your application, but you're free to change this when necessary.
+    |
+    */
+
+    'path' => env('SESSION_PATH', '/'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Domain
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the domain and subdomains the session cookie is
+    | available to. By default, the cookie will be available to the root
+    | domain without subdomains. Typically, this shouldn't be changed.
+    |
+    */
+
+    'domain' => env('SESSION_DOMAIN'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTPS Only Cookies
+    |--------------------------------------------------------------------------
+    |
+    | By setting this option to true, session cookies will only be sent back
+    | to the server if the browser has a HTTPS connection. This will keep
+    | the cookie from being sent to you when it can't be done securely.
+    |
+    */
+
+    'secure' => env('SESSION_SECURE_COOKIE'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTP Access Only
+    |--------------------------------------------------------------------------
+    |
+    | Setting this value to true will prevent JavaScript from accessing the
+    | value of the cookie and the cookie will only be accessible through
+    | the HTTP protocol. It's unlikely you should disable this option.
+    |
+    */
+
+    'http_only' => env('SESSION_HTTP_ONLY', true),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Same-Site Cookies
+    |--------------------------------------------------------------------------
+    |
+    | This option determines how your cookies behave when cross-site requests
+    | take place, and can be used to mitigate CSRF attacks. By default, we
+    | will set this value to "lax" to permit secure cross-site requests.
+    |
+    | See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value
+    |
+    | Supported: "lax", "strict", "none", null
+    |
+    */
+
+    'same_site' => env('SESSION_SAME_SITE', 'lax'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Partitioned Cookies
+    |--------------------------------------------------------------------------
+    |
+    | Setting this value to true will tie the cookie to the top-level site for
+    | a cross-site context. Partitioned cookies are accepted by the browser
+    | when flagged "secure" and the Same-Site attribute is set to "none".
+    |
+    */
+
+    'partitioned' => env('SESSION_PARTITIONED_COOKIE', false),
+
+];

database/.gitignore

@@ -0,0 +1 @@
+*.sqlite*

database/factories/UserFactory.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\User;
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Str;
+
+/**
+ * @extends Factory<User>
+ */
+class UserFactory extends Factory
+{
+    /**
+     * The current password being used by the factory.
+     */
+    protected static ?string $password;
+
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            'name' => fake()->name(),
+            'email' => fake()->unique()->safeEmail(),
+            'email_verified_at' => now(),
+            'password' => static::$password ??= Hash::make('password'),
+            'remember_token' => Str::random(10),
+        ];
+    }
+
+    /**
+     * Indicate that the model's email address should be unverified.
+     */
+    public function unverified(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'email_verified_at' => null,
+        ]);
+    }
+}

database/migrations/0001_01_01_000000_create_users_table.php

@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use MongoDB\Laravel\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    protected $connection = 'mongodb';
+
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::connection('mongodb')->create('users', function (Blueprint $collection) {
+            $collection->unique('email');
+        });
+
+        Schema::connection('mongodb')->create('password_reset_tokens', function (Blueprint $collection) {
+            $collection->index('email');
+        });
+
+        Schema::connection('mongodb')->create('sessions', function (Blueprint $collection) {
+            $collection->index('user_id');
+            $collection->index('last_activity');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::connection('mongodb')->dropIfExists('users');
+        Schema::connection('mongodb')->dropIfExists('password_reset_tokens');
+        Schema::connection('mongodb')->dropIfExists('sessions');
+    }
+};

database/migrations/2026_05_02_000000_create_sorting_histories_table.php

@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Support\Facades\Schema;
+use MongoDB\Laravel\Schema\Blueprint;
+
+return new class extends Migration
+{
+    protected $connection = 'mongodb';
+
+    public function up(): void
+    {
+        Schema::connection('mongodb')->create('sorting_histories', function (Blueprint $collection) {
+            $collection->index('classification_date');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::connection('mongodb')->dropIfExists('sorting_histories');
+    }
+};

database/seeders/DatabaseSeeder.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\User;
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class DatabaseSeeder extends Seeder
+{
+    use WithoutModelEvents;
+
+    /**
+     * Seed the application's database.
+     */
+    public function run(): void
+    {
+        // User::factory(10)->create();
+
+        User::factory()->create([
+            'name' => 'Test User',
+            'email' => 'test@example.com',
+        ]);
+    }
+}

index.html.tmp

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Dashboard Monitoring Berat Buah">
+    <title>Monitoring Berat Buah</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="dark-dashboard">
+    <!-- Navbar Top -->
+    <nav class="topbar">
+        <div class="topbar-left">
+            <div class="logo-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 19.93C7.05 19.43 4 16.05 4 12C4 7.95 7.05 4.57 11 4.07V19.93ZM13 4.07C16.95 4.57 20 7.95 20 12C20 16.05 16.95 19.43 13 19.93V4.07Z"/>
+                </svg>
+            </div>
+            <div class="topbar-brand">Monitoring Berat Buah</div>
+            
+            <div class="topbar-links">
+                <a href="#" class="active"><span class="link-icon">📊</span> Dashboard</a>
+            </div>
+        </div>
+        <div class="topbar-right">
+            <span class="version">v1.0</span>
+        </div>
+    </nav>
+
+    <div class="dashboard-container">
+        <!-- Top Row Cards -->
+        <div class="cards-grid">
+            <div class="stat-card green-card">
+                <div class="card-body">
+                    <div class="card-head">
+                        <span class="card-title">Berat Pisang Mentah</span>
+                    </div>
+                    <div class="card-content">
+                        <span class="emoji-icon green-emoji">🍌</span>
+                        <div class="card-value-group">
+                            <span class="card-val" id="val_pisang_mentah">0.00</span>
+                            <span class="card-unit">kg</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-footer">Belum Matang</div>
+            </div>
+
+            <div class="stat-card green-card">
+                <div class="card-body">
+                    <div class="card-head">
+                        <span class="card-title">Berat Jeruk Mentah</span>
+                    </div>
+                    <div class="card-content">
+                        <span class="emoji-icon green-emoji">🍊</span>
+                        <div class="card-value-group">
+                            <span class="card-val" id="val_jeruk_mentah">0.00</span>
+                            <span class="card-unit">kg</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-footer">Belum Matang</div>
+            </div>
+
+            <!-- Bottom Row Cards -->
+            <div class="stat-card yellow-card solid-card">
+                <div class="card-body-centered">
+                    <div class="card-content-inline">
+                        <span class="emoji-icon">🍌</span>
+                        <div class="card-text-group">
+                            <span class="card-title">Berat Pisang Matang</span>
+                            <div class="card-value-group">
+                                <span class="card-val" id="val_pisang_matang">0.00</span>
+                                <span class="card-unit">kg</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="stat-card orange-card solid-card">
+                <div class="card-body-centered">
+                    <div class="card-content-inline">
+                        <span class="emoji-icon">🍊</span>
+                        <div class="card-text-group">
+                            <span class="card-title">Berat Jeruk Matang</span>
+                            <div class="card-value-group">
+                                <span class="card-val" id="val_jeruk_matang">0.00</span>
+                                <span class="card-unit">kg</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- History Table Section -->
+        <div class="table-container">
+            <div class="table-header-panel">
+                <div class="table-title">
+                    <span class="calendar-icon">🗓️</span> Riwayat Sortirasi
+                </div>
+                <div class="table-actions">
+                    <span style="font-weight: bold; cursor: pointer; color: #8C99AA;" id="clearDataBtn" title="Hapus Data">•••</span>
+                </div>
+            </div>
+            <div class="table-responsive">
+                <table id="historyTable">
+                    <thead>
+                        <tr>
+                            <th>Tanggal Klasifikasi</th>
+                            <th>Berat Pisang Mentah (kg)</th>
+                            <th>Berat Pisang Matang (kg)</th>
+                            <th>Berat Jeruk Mentah (kg)</th>
+                            <th>Berat Jeruk Matang (kg)</th>
+                        </tr>
+                    </thead>
+                    <tbody id="historyBody">
+                        <!-- JS generated rows -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+</html>

package.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "https://www.schemastore.org/package.json",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "vite build",
+        "dev": "vite"
+    },
+    "devDependencies": {
+        "@tailwindcss/vite": "^4.0.0",
+        "axios": "^1.11.0",
+        "concurrently": "^9.0.1",
+        "laravel-vite-plugin": "^2.0.0",
+        "tailwindcss": "^4.0.0",
+        "vite": "^7.0.7"
+    }
+}

phpunit.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         colors="true"
+>
+    <testsuites>
+        <testsuite name="Unit">
+            <directory>tests/Unit</directory>
+        </testsuite>
+        <testsuite name="Feature">
+            <directory>tests/Feature</directory>
+        </testsuite>
+    </testsuites>
+    <source>
+        <include>
+            <directory>app</directory>
+        </include>
+    </source>
+    <php>
+        <env name="APP_ENV" value="testing"/>
+        <env name="APP_MAINTENANCE_DRIVER" value="file"/>
+        <env name="BCRYPT_ROUNDS" value="4"/>
+        <env name="BROADCAST_CONNECTION" value="null"/>
+        <env name="CACHE_STORE" value="array"/>
+        <env name="DB_CONNECTION" value="sqlite"/>
+        <env name="DB_DATABASE" value=":memory:"/>
+        <env name="DB_URL" value=""/>
+        <env name="MAIL_MAILER" value="array"/>
+        <env name="QUEUE_CONNECTION" value="sync"/>
+        <env name="SESSION_DRIVER" value="array"/>
+        <env name="PULSE_ENABLED" value="false"/>
+        <env name="TELESCOPE_ENABLED" value="false"/>
+        <env name="NIGHTWATCH_ENABLED" value="false"/>
+    </php>
+</phpunit>

public/.htaccess

@@ -0,0 +1,25 @@
+<IfModule mod_rewrite.c>
+    <IfModule mod_negotiation.c>
+        Options -MultiViews -Indexes
+    </IfModule>
+
+    RewriteEngine On
+
+    # Handle Authorization Header
+    RewriteCond %{HTTP:Authorization} .
+    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
+
+    # Handle X-XSRF-Token Header
+    RewriteCond %{HTTP:x-xsrf-token} .
+    RewriteRule .* - [E=HTTP_X_XSRF_TOKEN:%{HTTP:X-XSRF-Token}]
+
+    # Redirect Trailing Slashes If Not A Folder...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_URI} (.+)/$
+    RewriteRule ^ %1 [L,R=301]
+
+    # Send Requests To Front Controller...
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^ index.php [L]
+</IfModule>

public/css/style.css

@@ -0,0 +1,935 @@
+/* Modern Tailwind-like Dark Theme */
+:root {
+    --bg-base: #0f172a; /* slate-900 */
+    --bg-sidebar: #1e293b; /* slate-800 */
+    --bg-card: #1e293b; /* slate-800 */
+    --bg-hover: #334155; /* slate-700 */
+
+    --border-color: #334155; /* slate-700 */
+
+    --text-main: #f8fafc; /* slate-50 */
+    --text-muted: #94a3b8; /* slate-400 */
+
+    --primary: #3b82f6; /* blue-500 */
+    --primary-hover: #2563eb; /* blue-600 */
+
+    --success: #10b981; /* emerald-500 */
+    --warning: #f59e0b; /* amber-500 */
+    --danger: #ef4444; /* red-500 */
+
+    --radius-lg: 16px;
+    --radius-md: 10px;
+    --shadow-md:
+        0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: "Outfit", sans-serif;
+    background: var(--bg-base);
+    color: var(--text-main);
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* Layout */
+.app-layout {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 260px;
+    background: var(--bg-sidebar);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.3s ease;
+    z-index: 100;
+}
+.sidebar-brand {
+    height: 70px;
+    display: flex;
+    align-items: center;
+    padding: 0 1.5rem;
+    gap: 0.75rem;
+    border-bottom: 1px solid var(--border-color);
+}
+.brand-icon {
+    width: 36px;
+    height: 36px;
+    background: linear-gradient(135deg, var(--primary), #8b5cf6);
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.1rem;
+    color: #fff;
+    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
+}
+.brand-text {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 0.5px;
+}
+.brand-text span {
+    color: var(--primary);
+}
+.close-sidebar {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1.2rem;
+    cursor: pointer;
+    margin-left: auto;
+}
+
+.sidebar-menu {
+    padding: 1.5rem 1rem;
+    flex: 1;
+}
+.menu-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+    padding-left: 0.5rem;
+    letter-spacing: 1px;
+}
+.menu-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.8rem 1rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    border-radius: var(--radius-md);
+    transition: all 0.2s;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+}
+.menu-item i {
+    font-size: 1.1rem;
+    width: 20px;
+    text-align: center;
+}
+.menu-item:hover {
+    background: var(--bg-hover);
+    color: var(--text-main);
+}
+.menu-item.active {
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--primary);
+}
+
+.sidebar-footer {
+    padding: 1.5rem;
+    border-top: 1px solid var(--border-color);
+}
+.version-badge {
+    background: var(--bg-hover);
+    color: var(--text-muted);
+    padding: 0.4rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    text-align: center;
+    font-weight: 600;
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Top Header */
+.topheader {
+    height: 70px;
+    background: rgba(15, 23, 42, 0.9);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(255,255,255,0.03);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 2.5rem;
+}
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+.menu-toggle {
+    display: none;
+    background: var(--bg-hover);
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+}
+.page-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #fff;
+}
+
+.session-control {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.05);
+    padding: 0.4rem 0.4rem 0.4rem 1.2rem;
+    border-radius: 50px;
+}
+.session-status {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+}
+.indicator-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--text-muted);
+}
+.indicator-dot.active {
+    background: var(--success);
+    box-shadow: 0 0 10px var(--success);
+    animation: pulse 2s infinite;
+}
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+    }
+}
+.status-text {
+    display: flex;
+    flex-direction: column;
+}
+.indicator-text {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+}
+.indicator-text.active {
+    color: var(--success);
+}
+.session-timer {
+    font-size: 0.9rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.btn-sorting {
+    background: var(--success);
+    color: #fff;
+    border: none;
+    padding: 0.6rem 1.2rem;
+    border-radius: 30px;
+    font-family: "Outfit";
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s;
+}
+.btn-sorting:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+.btn-sorting.btn-stop {
+    background: var(--danger);
+}
+.btn-sorting.btn-stop:hover:not(:disabled) {
+    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+.btn-sorting:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* Body Content */
+.content-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+/* Cards Grid */
+.cards-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.5rem;
+}
+.stat-card {
+    background: linear-gradient(145deg, rgba(30, 41, 59, 1), rgba(15, 23, 42, 1));
+    border: 1px solid rgba(255,255,255,0.05);
+    border-radius: var(--radius-lg);
+    padding: 1.8rem 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1.2rem;
+    transition: transform 0.3s;
+    box-shadow: var(--shadow-md);
+}
+.stat-card:hover {
+    transform: translateY(-3px);
+}
+.card-icon {
+    width: 54px;
+    height: 54px;
+    /* border-radius: 14px; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5rem;
+}
+.card-icon img {
+    width: 48px;
+    height: 48px;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+.card-icon.raw {
+    /* removed background */
+    color: var(--success);
+    
+}
+.card-icon.ripe {
+    /* removed background */
+    color: var(--warning);
+    
+}
+.card-info {
+    flex: 1;
+}
+.card-label {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    font-weight: 500;
+    margin-bottom: 0.2rem;
+}
+.card-value {
+    font-size: 2.2rem;
+    font-weight: 700;
+    color: #fff;
+}
+.card-value small {
+    font-size: 1rem;
+    color: var(--text-muted);
+    font-weight: 500;
+}
+.text-warning {
+    color: var(--warning) !important;
+}
+
+/* Sections */
+.section-container {
+    background: var(--bg-sidebar);
+    border: 1px solid rgba(255,255,255,0.04);
+    border-radius: var(--radius-lg);
+    overflow: visible;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+}
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem 1.8rem;
+    border-bottom: 1px solid rgba(255,255,255,0.04);
+    background: transparent;
+}
+.section-title {
+    font-size: 1.2rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    color: #fff;
+    letter-spacing: 0.5px;
+}
+.section-title i {
+    color: var(--primary);
+}
+.section-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+}
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+/* Filter Bar */
+.filter-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    flex-wrap: wrap;
+}
+.filter-tabs {
+    display: flex;
+    background: var(--bg-base);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 3px;
+}
+.filter-tab {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    font-family: "Outfit";
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.filter-tab:hover {
+    color: #fff;
+}
+.filter-tab.active {
+    background: var(--bg-hover);
+    color: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.filter-extra {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.date-input {
+    background: var(--bg-base);
+    border: 1px solid var(--border-color);
+    color: #fff;
+    font-family: "Outfit";
+    font-size: 0.8rem;
+    padding: 0.45rem 0.8rem;
+    border-radius: 8px;
+    outline: none;
+}
+.date-input:focus {
+    border-color: var(--primary);
+}
+.date-input::-webkit-calendar-picker-indicator {
+    filter: invert(0.8);
+    cursor: pointer;
+}
+.filter-session-select {
+    max-width: 200px;
+}
+.select-label {
+    width: 140px;
+}
+.custom-date-range {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+.custom-date-range span {
+    color: var(--text-muted);
+}
+
+.btn-primary {
+    background: var(--primary);
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-family: "Outfit";
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.btn-primary:hover {
+    background: var(--primary-hover);
+}
+.btn-sm {
+    padding: 0.45rem 0.7rem;
+}
+.btn-icon {
+    background: var(--bg-base);
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s;
+}
+.btn-icon:hover {
+    background: var(--bg-hover);
+    color: var(--primary);
+}
+
+/* Table */
+.table-wrapper {
+    overflow-x: auto;
+    width: 100%;
+    padding-bottom: 1rem;
+}
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+}
+.data-table th {
+    padding: 1.2rem 1.8rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    border-bottom: 1px solid rgba(255,255,255,0.04);
+    white-space: nowrap;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.data-table td {
+    padding: 1.2rem 1.8rem;
+    font-size: 0.95rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+    color: #f8fafc;
+}
+.data-table tr:last-child td {
+    border-bottom: none;
+}
+.data-table tbody tr:hover {
+    background: rgba(255, 255, 255, 0.015);
+}
+.empty-state {
+    text-align: center;
+    padding: 3rem !important;
+    color: var(--text-muted);
+    font-style: italic;
+}
+
+/* Foto Grid */
+.foto-grid {
+    padding: 1.5rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1.2rem;
+}
+.foto-empty {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-muted);
+    font-style: italic;
+}
+.foto-card {
+    background: var(--bg-base);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    overflow: hidden;
+    cursor: pointer;
+    transition:
+        transform 0.2s,
+        border-color 0.2s;
+}
+.foto-card:hover {
+    transform: translateY(-4px);
+    border-color: var(--primary);
+}
+.foto-card img {
+    width: 100%;
+    height: 160px;
+    object-fit: cover;
+    border-bottom: 1px solid var(--border-color);
+}
+.foto-card-info {
+    padding: 0.8rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+.foto-card-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.2rem 0.6rem;
+    border-radius: 4px;
+    display: inline-block;
+    width: fit-content;
+    text-transform: uppercase;
+}
+.foto-card-label.matang {
+    background: rgba(245, 158, 11, 0.15);
+    color: var(--warning);
+}
+.foto-card-label.mentah {
+    background: rgba(16, 185, 129, 0.15);
+    color: var(--success);
+}
+.foto-card-time {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+/* Modals */
+.modal-overlay,
+.foto-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(15, 23, 42, 0.8);
+    backdrop-filter: blur(4px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s;
+}
+.modal-overlay.show,
+.foto-modal-overlay.show {
+    opacity: 1;
+    visibility: visible;
+}
+.modal-dialog {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    max-width: 400px;
+    width: 90%;
+    text-align: center;
+    transform: scale(0.95);
+    transition: transform 0.3s;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+.modal-overlay.show .modal-dialog {
+    transform: scale(1);
+}
+.modal-icon-wrap {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto 1.2rem;
+    font-size: 2rem;
+}
+.modal-icon-wrap.warning {
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--danger);
+}
+.modal-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+.modal-desc {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    line-height: 1.5;
+    margin-bottom: 1.5rem;
+}
+.modal-actions {
+    display: flex;
+    gap: 1rem;
+}
+.modal-actions button {
+    flex: 1;
+    padding: 0.6rem;
+    border: none;
+    border-radius: 8px;
+    font-family: "Outfit";
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.btn-secondary {
+    background: var(--bg-hover);
+    color: #fff;
+}
+.btn-secondary:hover {
+    background: #475569;
+}
+.btn-danger {
+    background: var(--danger);
+    color: #fff;
+}
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+.foto-modal-box {
+    position: relative;
+    max-width: 800px;
+    width: 90%;
+    background: var(--bg-card);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    transform: translateY(20px);
+    transition: transform 0.3s;
+}
+.foto-modal-overlay.show .foto-modal-box {
+    transform: translateY(0);
+}
+.foto-modal-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    border: none;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    font-size: 1.2rem;
+    cursor: pointer;
+    z-index: 10;
+    transition: background 0.2s;
+}
+.foto-modal-close:hover {
+    background: rgba(239, 68, 68, 0.8);
+}
+.foto-modal-box img {
+    width: 100%;
+    height: auto;
+    display: block;
+    max-height: 70vh;
+    object-fit: contain;
+    background: #000;
+}
+.foto-modal-info {
+    padding: 1rem 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--bg-card);
+}
+.foto-badge {
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #fff;
+}
+.foto-time {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+/* Toasts */
+.toast-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1050;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.toast {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 1rem;
+    width: 320px;
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+    animation: slideIn 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+.toast-out {
+    animation: slideOut 0.3s ease forwards;
+}
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+@keyframes slideOut {
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+.toast-icon {
+    font-size: 1.5rem;
+}
+.toast-success .toast-icon {
+    color: var(--success);
+}
+.toast-error .toast-icon {
+    color: var(--danger);
+}
+.toast-info .toast-icon {
+    color: var(--primary);
+}
+.toast-body {
+    flex: 1;
+}
+.toast-title {
+    font-weight: 600;
+    margin-bottom: 0.2rem;
+    font-size: 0.95rem;
+}
+.toast-message {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    line-height: 1.4;
+}
+.toast-close {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+}
+.toast-close:hover {
+    color: #fff;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+    .cards-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        position: fixed;
+        transform: translateX(-100%);
+        height: 100%;
+        box-shadow: 10px 0 25px rgba(0, 0, 0, 0.5);
+    }
+    .sidebar.active {
+        transform: translateX(0);
+    }
+    .close-sidebar {
+        display: block;
+    }
+    .menu-toggle {
+        display: block;
+    }
+    .topheader {
+        padding: 0 1.2rem;
+    }
+    .page-title {
+        display: none;
+    }
+    .content-body {
+        padding: 1.2rem;
+    }
+    .cards-grid {
+        grid-template-columns: 1fr;
+    }
+    .session-control {
+        padding: 0.3rem 0.3rem 0.3rem 1rem;
+        gap: 1rem;
+    }
+    .btn-sorting {
+        padding: 0.5rem 1rem;
+        font-size: 0.9rem;
+    }
+    .filter-bar {
+        width: 100%;
+    }
+    .section-actions {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .filter-tabs {
+        flex-wrap: wrap;
+    }
+}
+
+
+/* Fix Flex Shrink Issues */
+.cards-grid, .section-container { flex-shrink: 0; }
+
+/* Summary Section */
+.summary-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 1rem;
+    padding: 1.5rem;
+}
+.summary-item {
+    background: var(--bg-base);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: center;
+    text-align: center;
+}
+.summary-label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    font-weight: 600;
+    text-transform: uppercase;
+}
+.summary-value {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #fff;
+}
+.summary-value small {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    font-weight: 500;
+}
+.summary-item.highlight {
+    border-color: var(--primary);
+    background: rgba(59, 130, 246, 0.05);
+}
+.summary-item.highlight-alt {
+    border-color: var(--success);
+    background: rgba(16, 185, 129, 0.05);
+}
+
+@media (max-width: 1024px) {
+    .summary-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+@media (max-width: 640px) {
+    .summary-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}

public/images/raw_banana.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFE8B6" d="M28 2c2.684-1.342 5 4 3 13-1.106 4.977-5 9-9 12s-11-1-7-5 8-7 10-13c1.304-3.912 1-6 3-7z"/><path fill="#FFD983" d="M31 8c0 3-1 9-4 13s-7 5-4 1 5-7 6-11 2-7 2-3z"/><path fill="#48A546" d="M22 20c-.296.592 1.167-3.833-3-6-1.984-1.032-10 1-4 1 3 0 4 2 2 4-.291.292-.489.603-.622.912-.417.346-.873.709-1.378 1.088-2.263 1.697-5.84 4.227-10 7-3 2-4 3-4 4 0 3 9 3 14 1s10-7 10-7l4-4c-3-4-7-2-7-2z"/><path fill="#FFE8B6" d="M22 20s1.792-4.729-3-7c-4.042-1.916-8-1-11 1s-2 4-3 5 1 2 3 0 8.316-4.895 11-4c3 1 2 2.999 3 5z"/><path fill="#A6D388" d="M26 35h-4c-2 0-3 1-4 1s-2-2 0-2 4 0 5-1 5 2 3 2z"/><circle fill="#3E721D" cx="18" cy="35" r="1"/><path fill="#48A546" d="M32.208 28S28 35 26 35h-4c-2 0 0-1 1-2s5 0 5-6c0-3 4.208 1 4.208 1z"/><path fill="#FFE8B6" d="M26 19c3 0 8 3 7 9s-5 7-7 7h-2c-2 0-1-1 0-2s4 0 4-6c0-3-4-7-6-7 0 0 2-1 4-1z"/><path fill="#FFD983" d="M17 21c3 0 5 1 3 3-1.581 1.581-6 5-10 6s-8 1-5-1 9.764-8 12-8z"/><path fill="#C1694F" d="M2 31c1 0 1 0 1 .667C3 32.333 3 33 2 33s-1-1.333-1-1.333S1 31 2 31z"/></svg>

public/images/raw_orange.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <circle cx="50" cy="50" r="45" fill="#48A546" />
+  <circle cx="50" cy="50" r="40" fill="#FFF3E0" />
+  <path d="M50 50 L 50 15 A 35 35 0 0 1 74.7 25.2 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 74.7 25.2 A 35 35 0 0 1 85 50 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 85 50 A 35 35 0 0 1 74.7 74.7 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 74.7 74.7 A 35 35 0 0 1 50 85 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 50 85 A 35 35 0 0 1 25.2 74.7 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 25.2 74.7 A 35 35 0 0 1 15 50 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 15 50 A 35 35 0 0 1 25.2 25.2 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 25.2 25.2 A 35 35 0 0 1 50 15 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <circle cx="50" cy="50" r="4" fill="#FFF3E0" />
+</svg>

public/images/ripe_banana.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFE8B6" d="M28 2c2.684-1.342 5 4 3 13-1.106 4.977-5 9-9 12s-11-1-7-5 8-7 10-13c1.304-3.912 1-6 3-7z"/><path fill="#FFD983" d="M31 8c0 3-1 9-4 13s-7 5-4 1 5-7 6-11 2-7 2-3z"/><path fill="#FFCC4D" d="M22 20c-.296.592 1.167-3.833-3-6-1.984-1.032-10 1-4 1 3 0 4 2 2 4-.291.292-.489.603-.622.912-.417.346-.873.709-1.378 1.088-2.263 1.697-5.84 4.227-10 7-3 2-4 3-4 4 0 3 9 3 14 1s10-7 10-7l4-4c-3-4-7-2-7-2z"/><path fill="#FFE8B6" d="M22 20s1.792-4.729-3-7c-4.042-1.916-8-1-11 1s-2 4-3 5 1 2 3 0 8.316-4.895 11-4c3 1 2 2.999 3 5z"/><path fill="#A6D388" d="M26 35h-4c-2 0-3 1-4 1s-2-2 0-2 4 0 5-1 5 2 3 2z"/><circle fill="#3E721D" cx="18" cy="35" r="1"/><path fill="#FFCC4D" d="M32.208 28S28 35 26 35h-4c-2 0 0-1 1-2s5 0 5-6c0-3 4.208 1 4.208 1z"/><path fill="#FFE8B6" d="M26 19c3 0 8 3 7 9s-5 7-7 7h-2c-2 0-1-1 0-2s4 0 4-6c0-3-4-7-6-7 0 0 2-1 4-1z"/><path fill="#FFD983" d="M17 21c3 0 5 1 3 3-1.581 1.581-6 5-10 6s-8 1-5-1 9.764-8 12-8z"/><path fill="#C1694F" d="M2 31c1 0 1 0 1 .667C3 32.333 3 33 2 33s-1-1.333-1-1.333S1 31 2 31z"/></svg>

public/images/ripe_orange.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <circle cx="50" cy="50" r="45" fill="#F39C12" />
+  <circle cx="50" cy="50" r="40" fill="#FFF3E0" />
+  <path d="M50 50 L 50 15 A 35 35 0 0 1 74.7 25.2 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 74.7 25.2 A 35 35 0 0 1 85 50 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 85 50 A 35 35 0 0 1 74.7 74.7 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 74.7 74.7 A 35 35 0 0 1 50 85 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 50 85 A 35 35 0 0 1 25.2 74.7 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 25.2 74.7 A 35 35 0 0 1 15 50 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 15 50 A 35 35 0 0 1 25.2 25.2 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <path d="M50 50 L 25.2 25.2 A 35 35 0 0 1 50 15 Z" fill="#FFA726" stroke="#FFF3E0" stroke-width="2"/>
+  <circle cx="50" cy="50" r="4" fill="#FFF3E0" />
+</svg>

public/images/twemoji_banana.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFE8B6" d="M28 2c2.684-1.342 5 4 3 13-1.106 4.977-5 9-9 12s-11-1-7-5 8-7 10-13c1.304-3.912 1-6 3-7z"/><path fill="#FFD983" d="M31 8c0 3-1 9-4 13s-7 5-4 1 5-7 6-11 2-7 2-3z"/><path fill="#FFCC4D" d="M22 20c-.296.592 1.167-3.833-3-6-1.984-1.032-10 1-4 1 3 0 4 2 2 4-.291.292-.489.603-.622.912-.417.346-.873.709-1.378 1.088-2.263 1.697-5.84 4.227-10 7-3 2-4 3-4 4 0 3 9 3 14 1s10-7 10-7l4-4c-3-4-7-2-7-2z"/><path fill="#FFE8B6" d="M22 20s1.792-4.729-3-7c-4.042-1.916-8-1-11 1s-2 4-3 5 1 2 3 0 8.316-4.895 11-4c3 1 2 2.999 3 5z"/><path fill="#A6D388" d="M26 35h-4c-2 0-3 1-4 1s-2-2 0-2 4 0 5-1 5 2 3 2z"/><circle fill="#3E721D" cx="18" cy="35" r="1"/><path fill="#FFCC4D" d="M32.208 28S28 35 26 35h-4c-2 0 0-1 1-2s5 0 5-6c0-3 4.208 1 4.208 1z"/><path fill="#FFE8B6" d="M26 19c3 0 8 3 7 9s-5 7-7 7h-2c-2 0-1-1 0-2s4 0 4-6c0-3-4-7-6-7 0 0 2-1 4-1z"/><path fill="#FFD983" d="M17 21c3 0 5 1 3 3-1.581 1.581-6 5-10 6s-8 1-5-1 9.764-8 12-8z"/><path fill="#C1694F" d="M2 31c1 0 1 0 1 .667C3 32.333 3 33 2 33s-1-1.333-1-1.333S1 31 2 31z"/></svg>

public/images/twemoji_orange.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#F4900C" d="M3 19.5C3 10.388 10.387 3 19.499 3c9.113 0 16.5 7.387 16.5 16.5S28.612 36 19.499 36C10.387 36 3 28.613 3 19.5z"/><path fill="#662113" d="M11.414 7.585c-.267-.267-.797-.197-1.355.12-3.3-2.732-8.653-3.652-8.895-3.692-.546-.089-1.059.277-1.15.821-.091.544.276 1.06.821 1.151.053.009 4.934.854 7.821 3.16-.275.525-.324 1.015-.07 1.268.39.391 1.34.074 2.121-.707.781-.78 1.097-1.73.707-2.121z"/><path fill="#5C913B" d="M21 1s-3.106 4.318-7.021 5.273C11 7 7.041 7.07 6.646 6.15c-.394-.919 1.572-3.937 4.969-5.393C15.012-.698 21 1 21 1z"/></svg>

public/index.php

@@ -0,0 +1,20 @@
+<?php
+
+use Illuminate\Foundation\Application;
+use Illuminate\Http\Request;
+
+define('LARAVEL_START', microtime(true));
+
+// Determine if the application is in maintenance mode...
+if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
+    require $maintenance;
+}
+
+// Register the Composer autoloader...
+require __DIR__.'/../vendor/autoload.php';
+
+// Bootstrap Laravel and handle the request...
+/** @var Application $app */
+$app = require_once __DIR__.'/../bootstrap/app.php';
+
+$app->handleRequest(Request::capture());

public/js/dashboard.js

@@ -0,0 +1,477 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const $ = (id) => document.getElementById(id);
+    const isDash = !!$("val_raw_banana");
+    const isHist = !!$("historyTableBody");
+    const isFoto = !!$("fotoGrid");
+
+    let last = null,
+        active = false,
+        timer = null,
+        startAt = null;
+    let hf = { mode: "session", sessionId: "", dateFrom: "", dateTo: "" };
+    let ff = { mode: "session", sessionId: "", dateFrom: "", dateTo: "" };
+
+    const csrf = document.querySelector('meta[name="csrf-token"]')?.content;
+
+    const e = {
+        rb: $("val_raw_banana"),
+        rpb: $("val_ripe_banana"),
+        ro: $("val_raw_orange"),
+        rpo: $("val_ripe_orange"),
+        tbody: $("historyTableBody"),
+        btn: $("btnSorting"),
+        ico: $("btnSortIcon"),
+        lbl: $("btnSortLabel"),
+        dot: $("indicatorDot"),
+        txt: $("indicatorText"),
+        clock: $("sessionTimer"),
+        refresh: $("btnRefresh"),
+    };
+
+    const fs = $("filterSessionId"),
+        fr = $("customDateRange"),
+        fd = $("filterDateFrom"),
+        ft = $("filterDateTo"),
+        fa = $("btnApplyFilter");
+    const ffs = $("filterFotoSessionId"),
+        ffr = $("customFotoDateRange"),
+        ffd = $("filterFotoDateFrom"),
+        fft = $("filterFotoDateTo"),
+        ffa = $("btnApplyFotoFilter"),
+        fl = $("filterFotoLabel"),
+        rf = $("btnRefreshFoto");
+    const grid = $("fotoGrid"),
+        modal = $("fotoModal"),
+        mimg = $("fotoModalImg"),
+        mlbl = $("fotoModalLabel"),
+        mtime = $("fotoModalTime"),
+        mclose = $("fotoModalClose");
+    const cm = $("confirmModal"),
+        mc = $("modalBtnConfirm"),
+        mx = $("modalBtnCancel"),
+        toast = $("toastContainer");
+
+    function ui(a, s = null) {
+        if (!e.btn) return;
+        active = a;
+        e.btn.disabled = false;
+        if (a) {
+            e.btn.className = "btn-sorting btn-stop";
+            e.ico.innerHTML = '<i class="fas fa-stop"></i>';
+            e.lbl.textContent = "Stop Sortir";
+            e.dot.className = "indicator-dot active";
+            e.txt.className = "indicator-text active";
+            e.txt.textContent = "Sortir Berjalan";
+            if (s) {
+                startAt = new Date(s);
+                runTimer();
+            }
+        } else {
+            e.btn.className = "btn-sorting btn-start";
+            e.ico.innerHTML = '<i class="fas fa-play"></i>';
+            e.lbl.textContent = "Mulai Sortir";
+            e.dot.className = "indicator-dot idle";
+            e.txt.className = "indicator-text";
+            e.txt.textContent = "Siap";
+            e.clock.textContent = "";
+            startAt = null;
+            clearInterval(timer);
+        }
+    }
+
+    function runTimer() {
+        clearInterval(timer);
+        timer = setInterval(() => {
+            if (!startAt || !e.clock) return;
+            let d = Math.floor((new Date() - startAt) / 1000),
+                h = String(Math.floor(d / 3600)).padStart(2, "0"),
+                m = String(Math.floor((d % 3600) / 60)).padStart(2, "0"),
+                s = String(d % 60).padStart(2, "0");
+            e.clock.textContent = "⏱ " + h + ":" + m + ":" + s;
+        }, 1000);
+    }
+
+    async function status() {
+        try {
+            let r = await fetch("/api/session/status"),
+                d = await r.json();
+            ui(d.active, d.session?.started_at);
+        } catch {
+            ui(false);
+        }
+    }
+
+    function note(t, m, type = "info") {
+        if (!toast) return;
+        let n = document.createElement("div");
+        n.className = "toast toast-" + type;
+        n.innerHTML =
+            '<div class="toast-icon"><i class="fas fa-info-circle"></i></div><div class="toast-body"><div class="toast-title">' +
+            t +
+            '</div><div class="toast-message">' +
+            m +
+            '</div></div><button class="toast-close"><i class="fas fa-times"></i></button>';
+        n.querySelector("button").onclick = () => n.remove();
+        toast.appendChild(n);
+        setTimeout(() => n.remove(), 4000);
+    }
+
+    function ask() {
+        return new Promise((ok) => {
+            if (!cm) return ok(true);
+            cm.classList.add("show");
+            mc.onclick = () => {
+                cm.classList.remove("show");
+                ok(true);
+            };
+            mx.onclick = () => {
+                cm.classList.remove("show");
+                ok(false);
+            };
+        });
+    }
+
+    async function start() {
+        if (!e.btn) return;
+        e.btn.disabled = true;
+        try {
+            let r = await fetch("/api/session/start", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "X-CSRF-TOKEN": csrf,
+                    },
+                }),
+                d = await r.json();
+            d.success
+                ? (ui(true, d.session.started_at),
+                  load(),
+                  note("Sortir Dimulai", "Sesi dimulai", "success"))
+                : (note("Gagal", d.message || "Gagal", "error"), ui(false));
+        } catch {
+            note("Error", "Server gagal", "error");
+            ui(false);
+        }
+    }
+
+    async function stop() {
+        if (!(await ask())) return;
+        if (!e.btn) return;
+        e.btn.disabled = true;
+        try {
+            let r = await fetch("/api/session/stop", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "X-CSRF-TOKEN": csrf,
+                    },
+                }),
+                d = await r.json();
+            d.success
+                ? (ui(false),
+                  load(),
+                  note("Sortir Selesai", "Data dikalkulasi", "success"))
+                : (note("Gagal", d.message || "Gagal", "error"), status());
+        } catch {
+            note("Error", "Server gagal", "error");
+            status();
+        }
+    }
+
+    if (e.btn) e.btn.onclick = () => (active ? stop() : start());
+
+    function tabs(q, state, sel, custom, cb) {
+        document.querySelectorAll(q).forEach(
+            (b) =>
+                (b.onclick = () => {
+                    document
+                        .querySelectorAll(q)
+                        .forEach((x) => x.classList.remove("active"));
+                    b.classList.add("active");
+                    state.mode = b.dataset.filter;
+                    if (sel)
+                        sel.style.display =
+                            state.mode === "session" ? "" : "none";
+                    if (custom)
+                        custom.style.display =
+                            state.mode === "custom" ? "flex" : "none";
+                    cb();
+                }),
+        );
+    }
+
+    if (isHist || isDash) {
+        tabs(
+            "#tabSession,#tabToday,#tabWeek,#tabMonth,#tabCustom",
+            hf,
+            fs,
+            fr,
+            load,
+        );
+        if (fs) {
+            fs.style.display = "";
+            fs.onchange = () => {
+                hf.sessionId = fs.value;
+                load();
+            };
+        }
+        if (fa) {
+            fa.onclick = () => {
+                hf.dateFrom = fd.value;
+                hf.dateTo = ft.value;
+                load();
+            };
+        }
+    }
+
+    if (isFoto || isDash) {
+        tabs(
+            "#tabFotoSession,#tabFotoToday,#tabFotoWeek,#tabFotoMonth,#tabFotoCustom",
+            ff,
+            ffs,
+            ffr,
+            loadFoto,
+        );
+        if (ffs) {
+            ffs.style.display = "";
+            ffs.onchange = () => {
+                ff.sessionId = ffs.value;
+                loadFoto();
+            };
+        }
+        if (ffa) {
+            ffa.onclick = () => {
+                ff.dateFrom = ffd.value;
+                ff.dateTo = fft.value;
+                loadFoto();
+            };
+        }
+    }
+
+    function qs(st) {
+        let p = new URLSearchParams({ filter: st.mode });
+        if (st.mode === "session" && st.sessionId)
+            p.set("session_id", st.sessionId);
+        if (st.mode === "custom") {
+            if (st.dateFrom) p.set("date_from", st.dateFrom);
+            if (st.dateTo) p.set("date_to", st.dateTo);
+        }
+        return p;
+    }
+
+    function fillSessions(s = []) {
+        [fs, ffs].forEach((sel) => {
+            if (!sel) return;
+            let v = sel.value;
+            sel.innerHTML = '<option value="">Sesi Aktif / Terakhir</option>';
+            s.forEach((x) => {
+                let o = document.createElement("option");
+                o.value = x.id;
+                o.textContent =
+                    new Date(x.started_at).toLocaleString("id-ID") +
+                    " (" +
+                    (x.total_records || 0) +
+                    " buah)";
+                sel.appendChild(o);
+            });
+            sel.value = v;
+        });
+    }
+
+    async function load() {
+        try {
+            let r = await fetch("/api/latest-data?" + qs(hf)),
+                d = await r.json();
+            if (d.sessions) fillSessions(d.sessions);
+            draw(d);
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
+    function anim(o, a, b) {
+        if (!o) return;
+        let st = null;
+        requestAnimationFrame(function f(t) {
+            if (!st) st = t;
+            let p = Math.min((t - st) / 800, 1);
+            o.textContent = (a + (b - a) * p).toFixed(2);
+            if (p < 1) requestAnimationFrame(f);
+        });
+    }
+
+    function draw(d) {
+        // Update Ringkasan Kalkulasi Sesi secara dinamis
+        if (d.totals) {
+            const getVal = (v) => (v !== undefined && v !== null) ? Number(v).toFixed(2) : "0.00";
+            const getCount = (v) => (v !== undefined && v !== null) ? Number(v) : "0";
+            
+            const sumRawBanana = $("sum_raw_banana");
+            const sumRipeBanana = $("sum_ripe_banana");
+            const sumRawOrange = $("sum_raw_orange");
+            const sumRipeOrange = $("sum_ripe_orange");
+            const sumTotalRecords = $("sum_total_records");
+            const sumGrandTotal = $("sum_grand_total");
+
+            if (sumRawBanana) sumRawBanana.textContent = getVal(d.totals.total_raw_banana_weight);
+            if (sumRipeBanana) sumRipeBanana.textContent = getVal(d.totals.total_ripe_banana_weight);
+            if (sumRawOrange) sumRawOrange.textContent = getVal(d.totals.total_raw_orange_weight);
+            if (sumRipeOrange) sumRipeOrange.textContent = getVal(d.totals.total_ripe_orange_weight);
+            if (sumTotalRecords) sumTotalRecords.textContent = getCount(d.totals.total_records);
+            
+            if (sumGrandTotal) {
+                const grandTotal = Number(d.totals.total_raw_banana_weight || 0) +
+                                   Number(d.totals.total_ripe_banana_weight || 0) +
+                                   Number(d.totals.total_raw_orange_weight || 0) +
+                                   Number(d.totals.total_ripe_orange_weight || 0);
+                sumGrandTotal.textContent = grandTotal.toFixed(2);
+            }
+        }
+
+        if (!d.latest) {
+            if (isHist || isDash)
+                e.tbody.innerHTML =
+                    '<tr><td colspan="5" class="empty-state">Belum ada riwayat klasifikasi.</td></tr>';
+            if (isDash)
+                [e.rb, e.rpb, e.ro, e.rpo].forEach(
+                    (x) => (x.textContent = "0.00"),
+                );
+            return;
+        }
+        let id = d.latest.id || d.latest._id;
+        if (id !== last) {
+            last = id;
+            if (isDash) {
+                anim(
+                    e.rb,
+                    +e.rb.textContent || 0,
+                    +d.latest.raw_banana_weight || 0,
+                );
+                anim(
+                    e.rpb,
+                    +e.rpb.textContent || 0,
+                    +d.latest.ripe_banana_weight || 0,
+                );
+                anim(
+                    e.ro,
+                    +e.ro.textContent || 0,
+                    +d.latest.raw_orange_weight || 0,
+                );
+                anim(
+                    e.rpo,
+                    +e.rpo.textContent || 0,
+                    +d.latest.ripe_orange_weight || 0,
+                );
+                setTimeout(
+                    () =>
+                        [e.rb, e.rpb, e.ro, e.rpo].forEach((x) =>
+                            anim(x, +x.textContent || 0, 0),
+                        ),
+                    4000,
+                );
+            }
+        }
+        if (isHist || isDash) {
+            e.tbody.innerHTML = "";
+            (d.history || []).forEach((i) => {
+                let tr = document.createElement("tr");
+                tr.innerHTML =
+                    "<td>" +
+                    new Date(i.classification_date).toLocaleString("id-ID") +
+                    "</td><td>" +
+                    i.raw_banana_weight +
+                    "</td><td>" +
+                    i.ripe_banana_weight +
+                    "</td><td>" +
+                    i.raw_orange_weight +
+                    "</td><td>" +
+                    i.ripe_orange_weight +
+                    "</td>";
+                e.tbody.appendChild(tr);
+            });
+            if (!(d.history || []).length)
+                e.tbody.innerHTML =
+                    '<tr><td colspan="5" class="empty-state">Belum ada riwayat klasifikasi.</td></tr>';
+        }
+    }
+
+    async function loadFoto() {
+        if (!grid) return;
+        try {
+            let p = qs(ff);
+            if (fl && fl.value) p.set("label", fl.value);
+            let r = await fetch("/api/foto?" + p),
+                d = await r.json();
+            if (!d.fotos?.length) {
+                grid.innerHTML =
+                    '<div class="foto-empty">Belum ada foto tersimpan.</div>';
+                return;
+            }
+            grid.innerHTML = d.fotos
+                .map(
+                    (f) =>
+                        '<div class="foto-card" data-b="' +
+                        f.image_base64 +
+                        '" data-l="' +
+                        f.label +
+                        '" data-t="' +
+                        f.captured_at +
+                        '"><img src="data:image/jpeg;base64,' +
+                        f.image_base64 +
+                        '"><div class="foto-card-info"><span class="foto-card-label ' +
+                        (f.label.includes("matang") ? "matang" : "mentah") +
+                        '">' +
+                        f.label +
+                        '</span><span class="foto-card-time">' +
+                        new Date(f.captured_at).toLocaleString("id-ID") +
+                        "</span></div></div>",
+                )
+                .join("");
+
+            if (modal) {
+                grid.querySelectorAll(".foto-card").forEach(
+                    (c) =>
+                        (c.onclick = () => {
+                            if (mimg)
+                                mimg.src =
+                                    "data:image/jpeg;base64," + c.dataset.b;
+                            if (mlbl) mlbl.textContent = c.dataset.l;
+                            if (mtime)
+                                mtime.textContent = new Date(
+                                    c.dataset.t,
+                                ).toLocaleString("id-ID");
+                            modal.classList.add("show");
+                        }),
+                );
+            }
+        } catch {
+            grid.innerHTML = '<div class="foto-empty">Gagal memuat foto.</div>';
+        }
+    }
+
+    if (e.refresh) e.refresh.onclick = load;
+    if (rf) rf.onclick = loadFoto;
+    if (fl) fl.onchange = loadFoto;
+
+    if (mclose) mclose.onclick = () => modal.classList.remove("show");
+    if (modal)
+        modal.onclick = (x) => {
+            if (x.target === modal) modal.classList.remove("show");
+        };
+
+    status();
+
+    if (isDash || isHist) {
+        (async function p() {
+            await load();
+            setTimeout(p, 1000);
+        })();
+    }
+
+    if (isDash || isFoto) {
+        (async function pf() {
+            await loadFoto();
+            setTimeout(pf, 5000);
+        })();
+    }
+});

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

resources/css/app.css

@@ -0,0 +1,11 @@
+@import 'tailwindcss';
+
+@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+@source '../../storage/framework/views/*.php';
+@source '../**/*.blade.php';
+@source '../**/*.js';
+
+@theme {
+    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol', 'Noto Color Emoji';
+}

resources/js/app.js

@@ -0,0 +1 @@
+import './bootstrap';

resources/js/bootstrap.js

@@ -0,0 +1,4 @@
+import axios from 'axios';
+window.axios = axios;
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

resources/views/dashboard.blade.php

@@ -0,0 +1,164 @@
+@extends('layouts.app')
+@section('content')
+
+
+                <!-- Cards Section -->
+                <div class="cards-grid">
+                    <!-- Raw Banana -->
+                    <div class="stat-card">
+                        <div class="card-icon raw"><img src="{{ asset('images/raw_banana.svg') }}" alt="Pisang Mentah" onerror="this.src=''; this.parentElement.innerHTML='<i class=\'fas fa-lemon\'></i>';"/></div>
+                        <div class="card-info">
+                            <p class="card-label">Pisang Mentah</p>
+                            <h3 class="card-value"><span id="val_raw_banana">0.00</span> <small>g</small></h3>
+                        </div>
+                    </div>
+                    <!-- Raw Orange -->
+                    <div class="stat-card">
+                        <div class="card-icon raw"><img src="{{ asset('images/raw_orange.svg') }}" alt="Jeruk Mentah" onerror="this.src=''; this.parentElement.innerHTML='<i class=\'fas fa-apple-alt\'></i>';"/></div>
+                        <div class="card-info">
+                            <p class="card-label">Jeruk Mentah</p>
+                            <h3 class="card-value"><span id="val_raw_orange">0.00</span> <small>g</small></h3>
+                        </div>
+                    </div>
+                    <!-- Ripe Banana -->
+                    <div class="stat-card ripe-card">
+                        <div class="card-icon ripe"><img src="{{ asset('images/ripe_banana.svg') }}" alt="Pisang Matang" onerror="this.src=''; this.parentElement.innerHTML='<i class=\'fas fa-lemon\'></i>';"/></div>
+                        <div class="card-info">
+                            <p class="card-label text-warning">Pisang Matang</p>
+                            <h3 class="card-value text-warning"><span id="val_ripe_banana">0.00</span> <small>g</small></h3>
+                        </div>
+                    </div>
+                    <!-- Ripe Orange -->
+                    <div class="stat-card ripe-card">
+                        <div class="card-icon ripe"><img src="{{ asset('images/ripe_orange.svg') }}" alt="Jeruk Matang" onerror="this.src=''; this.parentElement.innerHTML='<i class=\'fas fa-apple-alt\'></i>';"/></div>
+                        <div class="card-info">
+                            <p class="card-label text-warning">Jeruk Matang</p>
+                            <h3 class="card-value text-warning"><span id="val_ripe_orange">0.00</span> <small>g</small></h3>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Calculation Summary Section -->
+                <div class="section-container" id="summarySection">
+                    <div class="section-header">
+                        <div class="section-title">
+                            <i class="fas fa-calculator"></i> Ringkasan Kalkulasi Sesi
+                        </div>
+                    </div>
+                    <div class="summary-grid">
+                        <div class="summary-item">
+                            <span class="summary-label">🍌 Pisang Mentah</span>
+                            <span class="summary-value"><span id="sum_raw_banana">0.00</span> <small>g</small></span>
+                        </div>
+                        <div class="summary-item">
+                            <span class="summary-label">🍌 Pisang Matang</span>
+                            <span class="summary-value"><span id="sum_ripe_banana">0.00</span> <small>g</small></span>
+                        </div>
+                        <div class="summary-item">
+                            <span class="summary-label">🍊 Jeruk Mentah</span>
+                            <span class="summary-value"><span id="sum_raw_orange">0.00</span> <small>g</small></span>
+                        </div>
+                        <div class="summary-item">
+                            <span class="summary-label">🍊 Jeruk Matang</span>
+                            <span class="summary-value"><span id="sum_ripe_orange">0.00</span> <small>g</small></span>
+                        </div>
+                        <div class="summary-item highlight">
+                            <span class="summary-label">📊 Total Data Masuk</span>
+                            <span class="summary-value"><span id="sum_total_records">0</span> <small>record</small></span>
+                        </div>
+                        <div class="summary-item highlight-alt">
+                            <span class="summary-label">⚖️ Total Berat</span>
+                            <span class="summary-value"><span id="sum_grand_total">0.00</span> <small>g</small></span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- History Section -->
+                <div class="section-container" id="historySection">
+                    <div class="section-header">
+                        <div class="section-title">
+                            <i class="fas fa-clipboard-list"></i> Riwayat Sortirasi
+                        </div>
+                        <div class="section-actions">
+                            <div class="filter-bar">
+                                <div class="filter-tabs">
+                                    <button class="filter-tab active" data-filter="session" id="tabSession">Sesi</button>
+                                    <button class="filter-tab" data-filter="today" id="tabToday">Hari ini</button>
+                                    <button class="filter-tab" data-filter="week" id="tabWeek">Minggu</button>
+                                    <button class="filter-tab" data-filter="month" id="tabMonth">Bulan</button>
+                                    <button class="filter-tab" data-filter="custom" id="tabCustom">Custom</button>
+                                </div>
+                                <div class="filter-extra">
+                                    <select id="filterSessionId" class="date-input filter-session-select" style="display:none;"></select>
+                                    <div id="customDateRange" class="custom-date-range" style="display:none;">
+                                        <input type="date" id="filterDateFrom" class="date-input" />
+                                        <span>-</span>
+                                        <input type="date" id="filterDateTo" class="date-input" />
+                                        <button id="btnApplyFilter" class="btn-primary btn-sm"><i class="fas fa-check"></i></button>
+                                    </div>
+                                </div>
+                            </div>
+                            <button class="btn-icon" id="btnRefresh" title="Refresh"><i class="fas fa-sync-alt"></i></button>
+                        </div>
+                    </div>
+                    <div class="table-wrapper">
+                        <table class="data-table">
+                            <thead>
+                                <tr>
+                                    <th>Tanggal & Waktu</th>
+                                    <th>P. Mentah</th>
+                                    <th>P. Matang</th>
+                                    <th>J. Mentah</th>
+                                    <th>J. Matang</th>
+                                </tr>
+                            </thead>
+                            <tbody id="historyTableBody">
+                                <tr><td colspan="5" class="empty-state">Belum ada data.</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                
+<!-- Foto Section -->
+                <div class="section-container" id="fotoSection">
+                    <div class="section-header">
+                        <div class="section-title">
+                            <i class="fas fa-camera"></i> Foto Deteksi Buah
+                        </div>
+                        <div class="section-actions flex-wrap">
+                            <div class="filter-bar">
+                                <div class="filter-tabs">
+                                    <button class="filter-tab active" data-filter="session" id="tabFotoSession">Sesi</button>
+                                    <button class="filter-tab" data-filter="today" id="tabFotoToday">Hari ini</button>
+                                    <button class="filter-tab" data-filter="week" id="tabFotoWeek">Minggu</button>
+                                    <button class="filter-tab" data-filter="month" id="tabFotoMonth">Bulan</button>
+                                    <button class="filter-tab" data-filter="custom" id="tabFotoCustom">Custom</button>
+                                </div>
+                                <div class="filter-extra">
+                                    <select id="filterFotoSessionId" class="date-input filter-session-select" style="display:none;"></select>
+                                    <div id="customFotoDateRange" class="custom-date-range" style="display:none;">
+                                        <input type="date" id="filterFotoDateFrom" class="date-input" />
+                                        <span>-</span>
+                                        <input type="date" id="filterFotoDateTo" class="date-input" />
+                                        <button id="btnApplyFotoFilter" class="btn-primary btn-sm"><i class="fas fa-check"></i></button>
+                                    </div>
+                                </div>
+                            </div>
+                            <select id="filterFotoLabel" class="date-input select-label">
+                                <option value="">Semua Buah</option>
+                                <option value="pisang matang">Pisang Matang</option>
+                                <option value="pisang mentah">Pisang Mentah</option>
+                                <option value="jeruk matang">Jeruk Matang</option>
+                                <option value="jeruk mentah">Jeruk Mentah</option>
+                            </select>
+                            <button class="btn-icon" id="btnRefreshFoto" title="Refresh"><i class="fas fa-sync-alt"></i></button>
+                        </div>
+                    </div>
+                    <div class="foto-grid" id="fotoGrid">
+                        <div class="foto-empty">Belum ada foto tersimpan.</div>
+                    </div>
+                </div>
+
+            
+@endsection

resources/views/gallery.blade.php

@@ -0,0 +1,43 @@
+@extends('layouts.app')
+@section('content')
+<!-- Foto Section -->
+                <div class="section-container" id="fotoSection">
+                    <div class="section-header">
+                        <div class="section-title">
+                            <i class="fas fa-camera"></i> Foto Deteksi Buah
+                        </div>
+                        <div class="section-actions flex-wrap">
+                            <div class="filter-bar">
+                                <div class="filter-tabs">
+                                    <button class="filter-tab active" data-filter="session" id="tabFotoSession">Sesi</button>
+                                    <button class="filter-tab" data-filter="today" id="tabFotoToday">Hari ini</button>
+                                    <button class="filter-tab" data-filter="week" id="tabFotoWeek">Minggu</button>
+                                    <button class="filter-tab" data-filter="month" id="tabFotoMonth">Bulan</button>
+                                    <button class="filter-tab" data-filter="custom" id="tabFotoCustom">Custom</button>
+                                </div>
+                                <div class="filter-extra">
+                                    <select id="filterFotoSessionId" class="date-input filter-session-select" style="display:none;"></select>
+                                    <div id="customFotoDateRange" class="custom-date-range" style="display:none;">
+                                        <input type="date" id="filterFotoDateFrom" class="date-input" />
+                                        <span>-</span>
+                                        <input type="date" id="filterFotoDateTo" class="date-input" />
+                                        <button id="btnApplyFotoFilter" class="btn-primary btn-sm"><i class="fas fa-check"></i></button>
+                                    </div>
+                                </div>
+                            </div>
+                            <select id="filterFotoLabel" class="date-input select-label">
+                                <option value="">Semua Buah</option>
+                                <option value="pisang matang">Pisang Matang</option>
+                                <option value="pisang mentah">Pisang Mentah</option>
+                                <option value="jeruk matang">Jeruk Matang</option>
+                                <option value="jeruk mentah">Jeruk Mentah</option>
+                            </select>
+                            <button class="btn-icon" id="btnRefreshFoto" title="Refresh"><i class="fas fa-sync-alt"></i></button>
+                        </div>
+                    </div>
+                    <div class="foto-grid" id="fotoGrid">
+                        <div class="foto-empty">Belum ada foto tersimpan.</div>
+                    </div>
+                </div>
+
+            @endsection

resources/views/history.blade.php

@@ -0,0 +1,85 @@
+@extends('layouts.app')
+@section('content')
+
+                <!-- Calculation Summary Section -->
+                <div class="section-container" id="summarySection">
+                    <div class="section-header">
+                        <div class="section-title">
+                            <i class="fas fa-calculator"></i> Ringkasan Kalkulasi Sesi
+                        </div>
+                    </div>
+                    <div class="summary-grid">
+                        <div class="summary-item">
+                            <span class="summary-label">🍌 Pisang Mentah</span>
+                            <span class="summary-value"><span id="sum_raw_banana">0.00</span> <small>g</small></span>
+                        </div>
+                        <div class="summary-item">
+                            <span class="summary-label">🍌 Pisang Matang</span>
+                            <span class="summary-value"><span id="sum_ripe_banana">0.00</span> <small>g</small></span>
+                        </div>
+                        <div class="summary-item">
+                            <span class="summary-label">🍊 Jeruk Mentah</span>
+                            <span class="summary-value"><span id="sum_raw_orange">0.00</span> <small>g</small></span>
+                        </div>
+                        <div class="summary-item">
+                            <span class="summary-label">🍊 Jeruk Matang</span>
+                            <span class="summary-value"><span id="sum_ripe_orange">0.00</span> <small>g</small></span>
+                        </div>
+                        <div class="summary-item highlight">
+                            <span class="summary-label">📊 Total Data Masuk</span>
+                            <span class="summary-value"><span id="sum_total_records">0</span> <small>record</small></span>
+                        </div>
+                        <div class="summary-item highlight-alt">
+                            <span class="summary-label">⚖️ Total Berat</span>
+                            <span class="summary-value"><span id="sum_grand_total">0.00</span> <small>g</small></span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- History Section -->
+                <div class="section-container" id="historySection">
+                    <div class="section-header">
+                        <div class="section-title">
+                            <i class="fas fa-clipboard-list"></i> Riwayat Sortirasi
+                        </div>
+                        <div class="section-actions">
+                            <div class="filter-bar">
+                                <div class="filter-tabs">
+                                    <button class="filter-tab active" data-filter="session" id="tabSession">Sesi</button>
+                                    <button class="filter-tab" data-filter="today" id="tabToday">Hari ini</button>
+                                    <button class="filter-tab" data-filter="week" id="tabWeek">Minggu</button>
+                                    <button class="filter-tab" data-filter="month" id="tabMonth">Bulan</button>
+                                    <button class="filter-tab" data-filter="custom" id="tabCustom">Custom</button>
+                                </div>
+                                <div class="filter-extra">
+                                    <select id="filterSessionId" class="date-input filter-session-select" style="display:none;"></select>
+                                    <div id="customDateRange" class="custom-date-range" style="display:none;">
+                                        <input type="date" id="filterDateFrom" class="date-input" />
+                                        <span>-</span>
+                                        <input type="date" id="filterDateTo" class="date-input" />
+                                        <button id="btnApplyFilter" class="btn-primary btn-sm"><i class="fas fa-check"></i></button>
+                                    </div>
+                                </div>
+                            </div>
+                            <button class="btn-icon" id="btnRefresh" title="Refresh"><i class="fas fa-sync-alt"></i></button>
+                        </div>
+                    </div>
+                    <div class="table-wrapper">
+                        <table class="data-table">
+                            <thead>
+                                <tr>
+                                    <th>Tanggal & Waktu</th>
+                                    <th>P. Mentah</th>
+                                    <th>P. Matang</th>
+                                    <th>J. Mentah</th>
+                                    <th>J. Matang</th>
+                                </tr>
+                            </thead>
+                            <tbody id="historyTableBody">
+                                <tr><td colspan="5" class="empty-state">Belum ada data.</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                @endsection

resources/views/layouts/app.blade.php

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>FruitSort AI Dashboard</title>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
+</head>
+<body>
+    <div class="app-layout">
+        <!-- Sidebar -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-brand">
+                <div class="brand-icon"><i class="fas fa-leaf"></i></div>
+                <div class="brand-text">FruitSort <span>AI</span></div>
+                <button class="close-sidebar" id="closeSidebar"><i class="fas fa-times"></i></button>
+            </div>
+
+            <div class="sidebar-menu">
+                <div class="menu-label">MENU UTAMA</div>
+                <a href="/" class="menu-item {{ request()->is('/') ? 'active' : '' }}">
+                    <i class="fas fa-border-all"></i>
+                    <span>Dashboard</span>
+                </a>
+                <a href="/history" class="menu-item {{ request()->is('history') ? 'active' : '' }}">
+                    <i class="fas fa-list-ul"></i>
+                    <span>Riwayat Sortir</span>
+                </a>
+                <a href="/gallery" class="menu-item {{ request()->is('gallery') ? 'active' : '' }}">
+                    <i class="fas fa-images"></i>
+                    <span>Galeri Foto</span>
+                </a>
+            </div>
+
+            <div class="sidebar-footer">
+                
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Header -->
+            <header class="topheader">
+                <div class="header-left">
+                    <button class="menu-toggle" id="menuToggle"><i class="fas fa-bars"></i></button>
+                    <h2 class="page-title">Monitoring Real-time</h2>
+                </div>
+                <div class="header-right">
+                    <!-- Session Control -->
+                    <div class="session-control">
+                        <div class="session-status">
+                            <span class="indicator-dot" id="indicatorDot"></span>
+                            <div class="status-text">
+                                <span class="indicator-text" id="indicatorText">Menunggu...</span>
+                                <span class="session-timer" id="sessionTimer"></span>
+                            </div>
+                        </div>
+                        <button class="btn-sorting" id="btnSorting" disabled>
+                            <span id="btnSortIcon" style="font-size: 1.1rem; display: flex; align-items: center;"><i class="fas fa-play"></i></span>
+                            <span class="btn-label" id="btnSortLabel">Memuat...</span>
+                        </button>
+                    </div>
+                </div>
+            </header>
+
+            <!-- Scrollable Body -->
+            <div class="content-body">
+                @yield("content")
+</div>
+        </main>
+    </div>
+
+    <!-- Modals & Toasts -->
+    <div class="foto-modal-overlay" id="fotoModal">
+        <div class="foto-modal-box">
+            <button class="foto-modal-close" id="fotoModalClose"><i class="fas fa-times"></i></button>
+            <img id="fotoModalImg" src="" alt="Foto Buah" />
+            <div class="foto-modal-info">
+                <span class="foto-badge" id="fotoModalLabel"></span>
+                <span class="foto-time" id="fotoModalTime"></span>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal-overlay" id="confirmModal">
+        <div class="modal-dialog">
+            <div class="modal-icon-wrap warning"><i class="fas fa-stop-circle"></i></div>
+            <h3 class="modal-title">Hentikan Sortir?</h3>
+            <p class="modal-desc">Data yang sudah terkumpul akan dikalkulasi dan hasilnya dikirim ke Telegram.</p>
+            <div class="modal-actions">
+                <button class="btn-secondary" id="modalBtnCancel">Batal</button>
+                <button class="btn-danger" id="modalBtnConfirm">Ya, Hentikan</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="toast-container" id="toastContainer"></div>
+
+    <script src="{{ asset('js/dashboard.js') }}"></script>
+    <script>
+        // Sidebar Toggle Script
+        document.getElementById('menuToggle').addEventListener('click', () => {
+            document.getElementById('sidebar').classList.toggle('active');
+        });
+        document.getElementById('closeSidebar').addEventListener('click', () => {
+            document.getElementById('sidebar').classList.remove('active');
+        });
+        document.querySelectorAll('.sidebar-menu a').forEach(link => {
+            link.addEventListener('click', function() {
+                document.querySelectorAll('.sidebar-menu a').forEach(l => l.classList.remove('active'));
+                this.classList.add('active');
+                if(window.innerWidth <= 768) document.getElementById('sidebar').classList.remove('active');
+            });
+        });
+    </script>
+</body>
+</html>

routes/api.php

@@ -0,0 +1,8 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\Api\IoTController;
+use App\Http\Controllers\Api\FruitImageController;
+
+Route::post('/sensor-data', [IoTController::class, 'store']);
+Route::post('/upload-foto', [FruitImageController::class, 'upload']);

routes/console.php

@@ -0,0 +1,8 @@
+<?php
+
+use Illuminate\Foundation\Inspiring;
+use Illuminate\Support\Facades\Artisan;
+
+Artisan::command('inspire', function () {
+    $this->comment(Inspiring::quote());
+})->purpose('Display an inspiring quote');

routes/web.php

@@ -0,0 +1,19 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\DashboardController;
+
+Route::get('/', [DashboardController::class, 'index']);
+Route::get('/history', [DashboardController::class, 'history']);
+Route::get('/gallery', [DashboardController::class, 'gallery']);
+
+Route::get('/api/latest-data', [DashboardController::class, 'latestData']);
+
+Route::post('/api/store-data', [DashboardController::class, 'storeData']);
+
+Route::get('/api/foto', [DashboardController::class, 'latestFoto']);
+
+// Session management
+Route::post('/api/session/start', [DashboardController::class, 'startSession']);
+Route::post('/api/session/stop', [DashboardController::class, 'stopSession']);
+Route::get('/api/session/status', [DashboardController::class, 'sessionStatus']);

run.bat

@@ -0,0 +1,23 @@
+@echo off
+
+cd /d "%~dp0"
+
+echo Memulai Laravel server dan MQTT subscriber...
+
+echo.
+
+
+
+start "Laravel Server" cmd /k "php artisan serve --host=0.0.0.0 --port=8000"
+
+start "MQTT Subscriber" cmd /k "php artisan mqtt:subscribe"
+
+
+
+echo Semua proses sudah dijalankan.
+
+echo Dashboard: http://192.168.137.1:8000
+
+echo.
+
+pause

storage/app/.gitignore

@@ -0,0 +1,4 @@
+*
+!private/
+!public/
+!.gitignore

storage/app/private/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

storage/app/public/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

storage/framework/.gitignore

@@ -0,0 +1,9 @@
+compiled.php
+config.php
+down
+events.scanned.php
+maintenance.php
+routes.php
+routes.scanned.php
+schedule-*
+services.json

storage/framework/cache/.gitignore

@@ -0,0 +1,3 @@
+*
+!data/
+!.gitignore

storage/framework/cache/data/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

storage/framework/sessions/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

storage/framework/testing/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

storage/framework/views/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

storage/logs/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

style.css.tmp

@@ -0,0 +1,428 @@
+/* style.css */
+:root {
+    --bg-dark: #1b1e2b;           /* Main background */
+    --topbar-bg: #151822;         /* Topbar background */
+    --card-green: #48a546;        /* Pisang Mentah & Jeruk mentah */
+    --card-green-dark: #3f903e;   /* Tomat Mentah */
+    --card-yellow: #f1c40f;       /* Pisang Matang */
+    --card-orange: #f39c12;       /* Jeruk Matang */
+    --card-red: #c0392b;          /* Tomat Matang */
+    
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --border-color: #2e3346;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', sans-serif;
+}
+
+body.dark-dashboard {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    min-height: 100vh;
+}
+
+/* TOPBAR */
+.topbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--topbar-bg);
+    padding: 0 1.5rem;
+    height: 60px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.topbar-left {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.logo-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+}
+
+.topbar-brand {
+    font-size: 1.25rem;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    color: #fff;
+    margin-right: 2rem;
+}
+
+.topbar-links {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.topbar-links a {
+    text-decoration: none;
+    color: var(--text-muted);
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.2s ease;
+}
+
+.topbar-links a:hover {
+    color: #fff;
+    background: rgba(255,255,255,0.05);
+}
+
+.topbar-links a.active {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.1);
+    border-bottom: 2px solid #3498db;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.topbar-links a.link-btn {
+    background-color: #3498db;
+    color: white;
+    border-radius: 4px;
+}
+.topbar-links a.link-btn:hover {
+    background-color: #2980b9;
+}
+
+.version {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+/* MAIN DASHBOARD */
+.dashboard-container {
+    max-width: 1280px;
+    margin: 2rem auto;
+    padding: 0 1rem;
+}
+
+.cards-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto auto;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.stat-card {
+    border-radius: 4px;
+    overflow: hidden;
+    color: white;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+/* Card Body types */
+.green-card {
+    background-color: var(--card-green);
+    /* texture noise can be added with pseudo element or background image later if needed */
+}
+.green-card-dark {
+    background-color: var(--card-green-dark);
+}
+
+.card-head {
+    text-align: center;
+    padding: 1rem 1rem 0;
+}
+.card-title {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: rgba(255,255,255,0.95);
+    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+
+.card-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 0.5rem 1rem 1.25rem;
+}
+
+.emoji-icon {
+    font-size: 3.5rem;
+    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+}
+
+.green-emoji {
+    /* Konversi emoji ke hijau secara akurat: hilangkan warna asli, beri warna sepia/kuning, ubah rona ke hijau, lalu tingkatkan saturasi */
+    filter: grayscale(100%) sepia(100%) hue-rotate(75deg) saturate(500%) brightness(0.9) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+}
+
+.card-value-group {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+}
+
+.card-val {
+    font-size: 2.8rem;
+    font-weight: 700;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+
+.card-unit {
+    font-size: 1.2rem;
+    font-weight: 600;
+    opacity: 0.9;
+}
+
+.card-footer {
+    background: rgba(0,0,0,0.15);
+    text-align: center;
+    padding: 0.5rem;
+    font-size: 0.95rem;
+    font-weight: 500;
+    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
+}
+.lighter-footer {
+    background: rgba(0,0,0,0.08); /* Tomat mentah footer is slightly lighter logically, or can use same */
+}
+
+/* Bottom Row (Solid Cards) */
+.yellow-card { background-color: var(--card-yellow); color: #fff;}
+.orange-card { background-color: var(--card-orange); color: #fff;}
+.red-card { background-color: var(--card-red); color: #fff;}
+
+.solid-card {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 140px;
+    padding: 1.5rem;
+}
+
+.card-body-centered {
+    width: 100%;
+}
+
+.card-content-inline {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.card-text-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.solid-card .card-val {
+    font-size: 3.2rem;
+}
+.solid-card .emoji-icon {
+    font-size: 4rem;
+}
+
+/* TABLE SECTION */
+.table-container {
+    background-color: #1c2233; /* Slightly lighter than bg */
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.table-header-panel {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    background-color: rgba(0,0,0,0.2);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.table-title {
+    font-size: 1.1rem;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.table-responsive {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th, td {
+    padding: 0.8rem 1.5rem;
+    text-align: center;
+    border-bottom: 1px solid rgba(255,255,255,0.03);
+    font-size: 0.95rem;
+}
+
+th {
+    text-align: center;
+    font-weight: 500;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+tr:hover td {
+    background-color: rgba(255,255,255,0.02);
+}
+
+td:first-child, th:first-child {
+    text-align: left;
+}
+
+/* History Text Colors */
+.text-yellow { color: #f1c40f; font-weight: 500; }
+.text-gray { color: #cbd5e1; font-weight: 500; }
+.text-orange { color: #f39c12; font-weight: 500; }
+.text-red { color: #e74c3c; font-weight: 500; }
+
+/* MODAL STYLES */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    background-color: #1e2436;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 600px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    border: 1px solid #333a4f;
+    overflow: hidden;
+    animation: zoomIn 0.3s ease;
+}
+
+@keyframes zoomIn {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+.modal-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid #333a4f;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(0,0,0,0.1);
+}
+
+.modal-header h2 {
+    font-size: 1.4rem;
+    font-weight: 600;
+}
+
+.close {
+    font-size: 1.8rem;
+    color: #8c99aa;
+    cursor: pointer;
+    line-height: 1;
+}
+
+.close:hover { color: #fff; }
+
+.modal-body {
+    padding: 1.5rem;
+}
+
+.modal-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form-group label {
+    font-size: 0.95rem;
+    color: var(--text-muted);
+}
+
+.form-group input {
+    width: 100%;
+    padding: 0.75rem;
+    border-radius: 6px;
+    border: 1px solid #333a4f;
+    background: #151822;
+    color: #fff;
+    font-size: 1.05rem;
+    outline: none;
+    transition: all 0.2s;
+}
+
+.form-group input:focus {
+    border-color: #3498db;
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+}
+
+.modal-footer {
+    padding: 1.5rem;
+    border-top: 1px solid #333a4f;
+    text-align: right;
+    background: rgba(0,0,0,0.1);
+}
+
+.btn-save {
+    background-color: #27ae60;
+    color: white;
+    border: none;
+    padding: 0.8rem 1.5rem;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 1.05rem;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.btn-save:hover {
+    background-color: #2ecc71;
+}
+
+/* RESPONSIVE */
+@media (max-width: 900px) {
+    .cards-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 600px) {
+    .cards-grid {
+        grid-template-columns: 1fr;
+    }
+    .modal-grid {
+        grid-template-columns: 1fr;
+    }
+    .topbar-brand {
+        display: none; /* hide text on very small screens */
+    }
+}

tests/Feature/ExampleTest.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace Tests\Feature;
+
+// use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class ExampleTest extends TestCase
+{
+    /**
+     * A basic test example.
+     */
+    public function test_the_application_returns_a_successful_response(): void
+    {
+        $response = $this->get('/');
+
+        $response->assertStatus(200);
+    }
+}

tests/TestCase.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace Tests;
+
+use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
+
+abstract class TestCase extends BaseTestCase
+{
+    //
+}

tests/Unit/ExampleTest.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace Tests\Unit;
+
+use PHPUnit\Framework\TestCase;
+
+class ExampleTest extends TestCase
+{
+    /**
+     * A basic test example.
+     */
+    public function test_that_true_is_true(): void
+    {
+        $this->assertTrue(true);
+    }
+}

vite.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: ['resources/css/app.css', 'resources/js/app.js'],
+            refresh: true,
+        }),
+        tailwindcss(),
+    ],
+    server: {
+        watch: {
+            ignored: ['**/storage/framework/views/**'],
+        },
+    },
+});