Final synced deploy v2 - Fix session and timeouts

.dockerignore

@@ -0,0 +1,17 @@
+.git
+.gitignore
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.db
+.env
+.venv
+venv
+.vscode
+.idea
+.qodo
+scratch
+*.log
+Dockerfile
+.dockerignore

.env

@@ -0,0 +1,4 @@
+FLASK_SECRET_KEY=change-me-in-production-super-secret-key-12345
+BACKEND_API_URL=https://ain-el-aql-backend-production.up.railway.app
+ESP_GATE_URL=http://192.168.1.100/open
+PLATE_COOLDOWN_SECONDS=3

.gitattributes

@@ -0,0 +1,4 @@
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,8 @@
+__pycache__/
+*.pyc
+.env
+static/uploads/*
+!static/uploads/.gitkeep
+venv/
+.vscode/
+.DS_Store

Apis DOCS/Endpoints.md

@@ -0,0 +1,103 @@
+# Ain El Aql - Endpoints Reference
+
+This document catalogs all the REST API endpoints available in the backend. Use this as a reference guide when integrating or building frontend clients (Websites, Flutter Apps, dashboards, etc.).
+
+---
+
+## 🏠 Public & Utility
+| Method | Endpoint | Description |
+|---|---|---|
+| `GET` | `/` | Base API sanity check |
+| `GET` | `/health` | Application health status |
+| `GET` | `/supabase/health` | Supabase connectivity health check |
+
+---
+
+## 🔐 Authentication (`/auth`)
+*Most of these rely on Supabase Auth. They handle user sessions, passwords, and OTP logic.*
+
+| Method | Endpoint | Description |
+|---|---|---|
+| `POST` | `/auth/register` | Register a new user |
+| `POST` | `/auth/login` | Login to receive a JWT session token |
+| `POST` | `/auth/forgot-password` | Request a password reset link |
+| `POST` | `/auth/reset-password/resolve-token` | Validate the token from the reset email |
+| `POST` | `/auth/reset-password` | Update password |
+| `GET` | `/auth/reset-password-page` | Web UI for resetting password |
+| `GET` | `/auth/reset-password-bridge` | Mobile deep-link bridge for password reset |
+| `POST` | `/auth/otp/request` | Request an OTP code via Email/Phone |
+| `POST` | `/auth/otp/verify` | Verify the requested OTP code |
+
+---
+
+## 👤 Profile & Vehicles
+*Requires `Authorization: Bearer <token>`.*
+
+| Method | Endpoint | Description |
+|---|---|---|
+| `PUT` | `/profile/update` | Update authenticated user's profile info |
+| `POST` | `/vehicles/add` | Add a new vehicle to user's profile |
+| `GET` | `/vehicles/my` | List authenticated user's vehicles |
+| `PUT` | `/vehicles/{vehicle_id}` | Edit an existing vehicle |
+| `DELETE` | `/vehicles/{vehicle_id}` | Delete/Unlink a vehicle |
+| `POST` | `/vehicles/verify` | Request admin verification for a vehicle |
+
+---
+
+## 🔔 Notifications
+*Requires `Authorization: Bearer <token>`.*
+
+| Method | Endpoint | Description |
+|---|---|---|
+| `POST` | `/notifications/fcm-token` | Register an FCM (Firebase) token for push notifications |
+| `GET` | `/notifications/my` | Get user's personal notification feed |
+
+---
+
+## 🤖 AI Models & Inference Core
+*The core AI pipeline execution paths.*
+
+| Method | Endpoint | Description |
+|---|---|---|
+| `GET` | `/models` | List available AI models |
+| `GET` | `/developer/models` | Diagnostic data for loaded models |
+| `POST` | `/predict` | **Main Pipeline:** Upload image, run OCR, update parking session, return gate decision. |
+| `POST` | `/model/infer` | Remote model execution endpoint (Hugging Face integration) |
+| `POST` | `/developer/predict` | Developer debugging for predictions |
+
+---
+
+## 🅿️ Parking, Events, and History
+*Requires `Authorization: Bearer <token>`.*
+**Role-aware endpoints:** Regular users only see data for their own vehicles. `admin` and `security` roles see all data globally across the entire garage.
+
+| Method | Endpoint | Description |
+|---|---|---|
+| `GET` | `/parking/locations` | Get garage capacities, pricing rules, and occupancy snapshot |
+| `GET` | `/parking/occupancy` | Get pure occupancy statistics |
+| `GET` | `/events/entered-cars` | Feed of cars that entered the garage |
+| `GET` | `/events/leaving-cars-within-5-minutes` | Feed of cars currently in their exit grace period |
+| `GET` | `/events/left-cars` | Feed of cars that have exited the garage completely |
+| `GET` | `/events/inside-cars` | Live feed of cars currently physically inside the garage |
+| `GET` | `/parking/history` | Historical log of all parking sessions |
+
+---
+
+## 💳 Payments & Gate Control
+
+| Method | Endpoint | Description |
+|---|---|---|
+| `POST` | `/payments/paymob/create` | Initialize a Paymob iframe checkout URL |
+| `POST` | `/payments/paymob/webhook` | Webhook listener for Paymob status updates |
+| `POST` | `/gate/decision` | Evaluate if the physical gate should open based on payment status |
+
+---
+
+## 🛡️ Administrative & Security (Strict RBAC)
+*Requires `Authorization: Bearer <token>` with either `admin` or `security` role.*
+
+| Method | Endpoint | Description |
+|---|---|---|
+| `GET` | `/events/new-cars` | Real-time polling feed of cars pulling up to cameras (Security Dashboard) |
+| `POST` | `/payments/manual/cash-confirm` | Security action to bypass payment and manually mark session as paid via cash |
+| `POST` | `/admin/maintenance/weekly-refresh` | Internal backend maintenance and cleanup task |

Apis DOCS/FLUTTER_INTEGRATION_GUIDE.md

@@ -0,0 +1,162 @@
+# Flutter Integration Guide
+
+## Goal
+
+Connect Flutter app to Ain El Aql backend to produce a complete parking product:
+
+1. camera-based ANPR detection
+2. parking session and payment lifecycle
+3. occupancy and location-aware pricing dashboards
+
+## Responsibility Split
+
+### Backend + AI team (already implemented)
+
+1. AI inference pipeline
+2. Session/event persistence in Supabase
+3. Dynamic pricing and capacity logic
+4. Gate decision logic
+5. Payment endpoints (Paymob + manual cash)
+6. Role-aware history/feed APIs
+
+### Flutter team
+
+1. Backend auth screens and token management
+2. API client layer and request retries
+3. UI for user/admin/security experiences
+4. Detection screens and result rendering
+5. Payment/gate operation UI flow
+6. Dashboard and reporting screens
+
+## Integration Steps
+
+1. Configure API base URL in Flutter.
+2. Register/Login through backend auth endpoints and keep access token.
+3. Send token as `Authorization: Bearer ...` to protected endpoints.
+4. Use `POST /predict` for main camera action.
+5. Use `/parking/locations` and `/parking/occupancy` for location cards and dashboard.
+6. Use feeds/history endpoints for timeline and operational views.
+
+## Current Cloud Base URL
+
+- `https://pant0x-ealpr-ocr.hf.space`
+
+Sanity checks:
+
+1. `GET /`
+2. `GET /health`
+3. `GET /supabase/health`
+
+Current deployment mode is `SUPABASE_ENFORCE_AUTH=false` to unblock integration.
+Before production launch, switch to `true` and ensure token headers are sent on protected calls.
+
+## Recommended Flutter Screens
+
+1. Auth (login/register/reset)
+2. Home/scan screen
+3. Detection result screen
+4. Inside/entered/left monitoring screens
+5. Parking history screen
+6. Location pricing + occupancy screen
+7. Payment and gate validation screen
+8. Admin/security operations panel
+
+## Request/Response Mapping
+
+### `POST /auth/register`
+
+Flutter sends:
+
+1. `first_name` (recommended)
+2. `last_name` (recommended)
+3. `username` (required)
+4. `phone` (required)
+5. `password` (required)
+6. `email` (optional)
+7. `nid` (optional)
+8. optional vehicle payload:
+   - `plate_letters_ar`, `plate_numbers_ar`
+   - `plate_letters_en`, `plate_numbers_en`
+   - `car_model`, `car_color`
+
+Flutter reads:
+
+1. `user.role` and `user.is_staff`
+2. `session.access_token`
+3. `vehicle` (if provided during registration)
+
+### `POST /auth/login`
+
+Flutter sends:
+
+1. `identifier` (username OR phone OR email OR nid)
+2. `password`
+
+Flutter reads:
+
+1. `user.role` and `user.is_staff`
+2. `session.access_token`
+3. `session.refresh_token`
+
+### `POST /predict`
+
+Flutter sends:
+
+1. image file
+2. event_type (`entry`/`exit`/`ocr_scan`)
+3. parking_location (named value like `OPERA`)
+
+Flutter reads:
+
+1. `plate_info` / `plate`
+2. `pricing`
+3. `payment_status`
+4. `gate_decision`
+5. `user_page.split_image_base64`
+6. `admin_page.annotated_image_base64`
+
+### Occupancy dashboards
+
+Use:
+
+1. `GET /parking/locations`
+2. `GET /parking/occupancy`
+
+Render:
+
+1. `garage.display` (X/total)
+2. each location pricing mode/rates
+3. each location occupancy display and left capacity
+
+## Role-based UI Recommendations
+
+1. `user`
+   - own history/feeds
+   - pricing and availability
+2. `admin`
+   - all-user operations, analytics, payment controls
+3. `security`
+   - gate operations and live occupancy monitoring
+
+Role source is backend `user.role` from the `profiles` table.
+
+## End-to-End Product Pipeline
+
+1. Driver arrives and selects location in app.
+2. Camera scan sends image to `/predict` with `event_type=entry`.
+3. Backend detects plate, creates/updates session, calculates pricing context.
+4. Driver views status and fee preview.
+5. On exit, app sends `/predict` with `event_type=exit`.
+6. Backend validates payment state and returns gate decision.
+7. Staff can use payment endpoints when required.
+8. Dashboards reflect occupancy in near-real-time from open sessions.
+
+## Launch Checklist
+
+1. Cloud host `/`, `/health`, and `/supabase/health` pass.
+2. Supabase tables/buckets configured and secure.
+3. Auth enforced in production (`SUPABASE_ENFORCE_AUTH=true`).
+4. Pricing/capacity env values loaded in deployment.
+5. Flutter role routing and token flow tested.
+6. Entry/exit/manual payment QA completed.
+7. Security key rotation completed for exposed secrets.

Apis DOCS/FULL_API_DOCUMENTATION.md

@@ -0,0 +1,107 @@
+# Ain El Aql - Full System Architecture & API Documentation
+
+This document serves as the ultimate reference for the Ain El Aql backend, covering everything from the database model to all endpoints, and specifically detailing the **Role-Based Access Control (RBAC)** that governs the User, Admin, and Security roles.
+
+---
+
+## 1. Role-Based Access Control (RBAC)
+
+The backend uses a single set of APIs whose behavior changes dynamically based on the authenticated user's role.
+
+### Roles
+1. **`user`**: Regular customers. They can only see their own registered vehicles, notifications, and parking history.
+2. **`admin` & `security` (Staff)**: Privileged roles that unlock **God View**. When a staff member calls an endpoint like `/events/entered-cars`, they bypass the user filter and see **all cars** in the entire facility. They also gain access to manual override endpoints like `/payments/manual/cash-confirm`.
+3. **`barrier`**: A synthetic machine role intended for the camera/gate systems. They authenticate using a static `BARRIER_API_TOKEN` to run OCR scans and query gate decisions without needing a user account.
+4. **`developer`**: Has access to backend debugging endpoints.
+
+---
+
+## 2. Database Model (Supabase)
+
+The relational data is stored in PostgreSQL via Supabase.
+
+### Core Tables
+*   **`profiles`**: Links to `auth.users.id`. Stores user identity (`first_name`, `email`, `phone_number`, `national_id`), as well as their `role` (e.g., user, admin).
+*   **`vehicles`**: Links to `profiles.id` (`owner_id`). Stores the registration data (Arabic/English plates, car make, color, verification status).
+*   **`parking_sessions`**: Tracks the lifecycle of a car parking. Links to `vehicles.id`. A session starts on `entry` and closes on `exit`.
+*   **`car_events`**: The immutable ledger of everything that happens. Every entry, exit, or OCR scan creates a row here.
+*   **`payment_transactions`**: The ledger for payments, linking Paymob callbacks or Manual Cash confirmations to a parking session.
+*   **`notification_device_tokens` & `notification_events`**: Handles FCM (Firebase) push notifications.
+
+### Storage Buckets
+*   `car-raw-images`: Stores the full uncropped images from the CCTV cameras.
+*   `car-processed-images`: Stores cropped plates and annotated UI images.
+
+---
+
+## 3. Comprehensive API Endpoints Catalog
+
+### 🏠 Public & Utility
+*   `GET /` - Base API check.
+*   `GET /health` - API health check.
+*   `GET /supabase/health` - Checks database connectivity.
+
+### 🔐 Authentication (`/auth`)
+*   `POST /auth/register` - Creates a new user in Supabase Auth.
+*   `POST /auth/login` - Returns a JWT. If the user is staff, `"is_staff": true` is injected into the response.
+*   `POST /auth/otp/request` - Requests an OTP (Email/Phone).
+*   `POST /auth/otp/verify` - Verifies an OTP.
+*   `POST /auth/forgot-password` - Triggers the Supabase password reset email.
+*   `POST /auth/reset-password/resolve-token` - Validates the reset token.
+*   `POST /auth/reset-password` - Sets the new password.
+*   `GET /auth/reset-password-page` - Web UI fallback for password resets.
+*   `GET /auth/reset-password-bridge` - Mobile deep link bridge.
+
+### 👤 Profile & Vehicles (`/profile`, `/vehicles`)
+*   `PUT /profile/update` - Modifies `profiles` table data.
+*   `POST /vehicles/add` - Registers a new vehicle to the user.
+*   `GET /vehicles/my` - Lists the authenticated user's vehicles.
+*   `PUT /vehicles/{vehicle_id}` - Edits a vehicle's details.
+*   `DELETE /vehicles/{vehicle_id}` - Unlinks a vehicle.
+*   `POST /vehicles/verify` - Submits a vehicle for administrative verification.
+
+### 🔔 Notifications (`/notifications`)
+*   `POST /notifications/fcm-token` - Registers a mobile device token.
+*   `GET /notifications/my` - Retrieves the user's unread/read notifications.
+
+### 🤖 AI Models & Inference Core
+*   `GET /models` - Lists available YOLO models.
+*   `GET /developer/models` - Internal diagnostic for models.
+*   `POST /predict` - **The core pipeline endpoint.** Receives an image, runs YOLO car detection -> YOLO plate detection -> OCR. Records the event in Supabase and returns the gate decision and pricing.
+*   `POST /model/infer` - Executed by the Hugging Face space when running in remote inference mode.
+*   `POST /developer/predict` - Testing endpoint for developers.
+
+### 🅿️ Parking, Events, and History
+*(Note: All endpoints below return "Own Data" for Users, and "Global Data" for Admin/Security)*
+*   `GET /parking/locations` - Returns garage capacities, pricing rules, and current overall occupancy.
+*   `GET /parking/occupancy` - Returns pure occupancy counts.
+*   `GET /events/entered-cars` - Feed of cars that have successfully entered.
+*   `GET /events/leaving-cars-within-5-minutes` - Feed of cars currently in their exit grace period.
+*   `GET /events/left-cars` - Feed of closed sessions.
+*   `GET /events/inside-cars` - Live view of all cars physically inside the garage right now.
+*   `GET /parking/history` - The permanent ledger of all past parking sessions.
+
+### 💳 Payments & Gate Control
+*   `POST /payments/paymob/create` - Generates a Paymob iframe URL for credit card checkout.
+*   `POST /payments/paymob/webhook` - Secure listener for Paymob status updates.
+*   `POST /gate/decision` - Calculates if a specific car is allowed to exit right now based on its payment status.
+
+### 🛡️ Exclusive Admin / Security Endpoints
+*(Restricted entirely to the `admin` and `security` roles)*
+*   `GET /events/new-cars` - Real-time polling feed of cars directly at the camera right now.
+*   `POST /payments/manual/cash-confirm` - Allows a guard to confirm they received cash, bypassing the credit card flow and opening the gate.
+*   `POST /admin/maintenance/weekly-refresh` - System cleanup script.
+
+---
+
+## 4. End-to-End Flow Example: The `/predict` Pipeline
+
+When a camera sends an image to `POST /predict`:
+1. **Auth:** Checked against `BARRIER_API_TOKEN` or a user JWT.
+2. **AI Inference:** The image is passed through 3 AI models (Car -> Plate -> OCR).
+3. **Matching Logic:** The detected plate string is normalized and searched in the `vehicles` table (matching both Arabic and English variants).
+4. **Session Logic:** 
+   * If `event_type=entry`, a new `parking_sessions` row is created.
+   * If `event_type=exit`, the pricing engine calculates the fee.
+5. **Persistence:** Images are uploaded to Supabase Storage, and the `car_events` ledger is updated.
+6. **Response:** Flutter receives a massive JSON containing the plate text, pricing breakdown, and `gate_decision.allowed = true/false`.

Dockerfile

@@ -0,0 +1,30 @@
+# Use Python 3.11 slim image
+FROM python:3.11-slim
+
+# Install system dependencies
+# libglib2.0-0 is often needed for some image processing libraries
+RUN apt-get update && apt-get install -y \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create a non-root user (UID 1000 is required by Hugging Face)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+# Copy and install dependencies
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir --user -r requirements.txt
+
+# Copy the application code
+COPY --chown=user . .
+
+# Hugging Face Spaces expects the app to listen on port 7860
+EXPOSE 7860
+
+# Run the application with gunicorn
+# Using 1 worker and 8 threads for a balance of performance and resource usage
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "1", "--threads", "8", "--timeout", "0", "app:app"]

Procfile

@@ -0,0 +1 @@
+web: gunicorn app:app

README.md

@@ -0,0 +1,63 @@
+---
+title: EALPR FLASK
+emoji: 🚗
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# Ain El Aql - Security & Admin Webpage
+
+
+This is the Security and Administration dashboard for the **Ain El Aql** Parking Management System. It provides real-time license plate recognition (LPR), garage occupancy tracking, and manual gate control.
+
+## 🚀 Deployment (Render)
+
+This application is designed to be deployed on **Render**.
+
+### 1. Requirements
+*   A Render account.
+*   The code pushed to a GitHub repository.
+
+### 2. Environment Variables
+Add the following variables in the Render "Environment" tab:
+*   `FLASK_SECRET_KEY`: A secret key for session security.
+*   `BACKEND_API_URL`: `https://ain-el-aql-backend-production.up.railway.app`
+*   `CAMERA_SOURCE`: The URL of your IP camera stream (e.g., `http://.../video`) or `0` for local testing if running locally.
+
+### 3. Build & Start Commands
+*   **Build Command**: `pip install -r requirements.txt`
+*   **Start Command**: `gunicorn "app:create_app()"`
+
+---
+
+## 🛠️ Technology Stack
+*   **Frontend**: HTML5, CSS3 (Vanilla), JavaScript.
+*   **Backend**: Flask (Python).
+*   **OCR Engine**: YOLOv8 models hosted on **Hugging Face** via the Railway backend.
+*   **Database**: Supabase (via the Railway backend).
+
+---
+
+## 🚗 Features
+*   **Real-time Monitoring**: Live camera feed with periodic remote OCR polling.
+*   **Manual Override**: Open the gate manually from the dashboard.
+*   **History Ledger**: View complete records of all vehicles that entered or left the facility.
+*   **Garage Management**: Track currently inside vehicles and parking occupancy.
+
+---
+
+## 🔒 Security
+*   Role-based access control (Security vs Admin).
+*   Encrypted session tokens.
+*   CORS configured for cross-origin API calls.
+
+---
+
+## 📝 Usage
+1.  **Login** with your security or admin credentials.
+2.  **Start Camera** to begin monitoring the entrance/exit.
+3.  **Scan & Process** an image to register a vehicle event (entry/exit).
+4.  **Confirm Payments** in the Admin/Garage view for manual cash transactions.

app.py

@@ -0,0 +1,43 @@
+"""
+Ain El Aql — Security & Admin Dashboard
+Flask application factory.
+"""
+
+from flask import Flask
+from werkzeug.middleware.proxy_fix import ProxyFix
+from config import Config
+
+
+def create_app():
+    app = Flask(__name__)
+    app.config.from_object(Config)
+
+    # Trust proxy headers (required for Hugging Face)
+    app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1, x_prefix=1)
+
+    # Required for Hugging Face Spaces iframes
+    app.config.update(
+        SESSION_COOKIE_SAMESITE='None',
+        SESSION_COOKIE_SECURE=True,
+    )
+
+    # ── Register blueprints ──────────────────────────────────
+    from routes.auth_routes import auth_bp
+    from routes.admin_routes import admin_bp
+    from routes.security_routes import security_bp
+    from routes.camera_routes import camera_bp
+
+    app.register_blueprint(auth_bp)
+    app.register_blueprint(admin_bp)
+    app.register_blueprint(security_bp)
+    app.register_blueprint(camera_bp)
+
+    return app
+
+
+app = create_app()
+
+
+if __name__ == "__main__":
+    application = create_app()
+    application.run(debug=True, host="0.0.0.0", port=5000)

config.py

@@ -0,0 +1,17 @@
+import os
+from dotenv import load_dotenv
+
+load_dotenv(override=True)
+
+
+class Config:
+    SECRET_KEY = os.getenv("FLASK_SECRET_KEY", "fallback-dev-key")
+    BACKEND_API_URL = os.getenv("BACKEND_API_URL", "https://ain-el-aql-backend-production.up.railway.app")
+    ESP_GATE_URL = os.getenv("ESP_GATE_URL", "http://192.168.1.100/open")
+    PLATE_COOLDOWN_SECONDS = int(os.getenv("PLATE_COOLDOWN_SECONDS", "3"))
+    CAMERA_SOURCE = os.getenv("CAMERA_SOURCE", "0")
+    # If CAMERA_SOURCE is numeric string, convert to int
+    try:
+        CAMERA_SOURCE = int(CAMERA_SOURCE)
+    except ValueError:
+        pass

esp32/gate_controller.ino

@@ -0,0 +1,175 @@
+/*
+ * Ain El Aql — ESP32 Gate Controller
+ * 
+ * Two operation modes:
+ *   1. WiFi Mode: Polls the cloud backend every 1 second for gate commands.
+ *      Works from anywhere in the world (real hardware + Wokwi simulation).
+ *   2. USB Serial Mode: Receives '1' from the browser's Web Serial API.
+ *      Works when ESP32 is plugged into the security PC via USB.
+ *
+ * Both modes work simultaneously — whichever signal arrives first opens the gate.
+ */
+
+#include <ESP32Servo.h>
+#include <WiFi.h>
+#include <HTTPClient.h>
+#include <ArduinoJson.h>
+
+// ── Configuration ─────────────────────────────────────────
+// Change these to match your setup:
+const char* WIFI_SSID     = "YOUR_WIFI_SSID";
+const char* WIFI_PASSWORD = "YOUR_WIFI_PASSWORD";
+
+// Your backend URL (Railway deployment)
+const char* BACKEND_URL   = "https://ain-el-aql-backend-production.up.railway.app";
+const char* GATE_LOCATION = "OPERA";
+
+// ── Hardware ──────────────────────────────────────────────
+Servo gateServo;
+const int servoPin = 18;       // GPIO 18 on ESP32
+const int LED_PIN  = 2;        // Built-in LED for status
+
+// ── State ─────────────────────────────────────────────────
+bool gateIsOpen = false;
+unsigned long lastPollTime = 0;
+const unsigned long POLL_INTERVAL_MS = 1000;  // Poll every 1 second
+
+void setup() {
+  Serial.begin(115200);
+  Serial.println("\n╔══════════════════════════════════════╗");
+  Serial.println("║   Ain El Aql — Gate Controller v2   ║");
+  Serial.println("╚══════════════════════════════════════╝");
+  
+  // Setup servo
+  ESP32PWM::allocateTimer(0);
+  gateServo.setPeriodHertz(50);
+  gateServo.attach(servoPin, 500, 2400);
+  gateServo.write(0);  // Start closed
+  
+  // Setup LED
+  pinMode(LED_PIN, OUTPUT);
+  digitalWrite(LED_PIN, LOW);
+  
+  // Connect to WiFi
+  Serial.print("[WiFi] Connecting to ");
+  Serial.print(WIFI_SSID);
+  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
+  
+  int attempts = 0;
+  while (WiFi.status() != WL_CONNECTED && attempts < 30) {
+    delay(500);
+    Serial.print(".");
+    attempts++;
+  }
+  
+  if (WiFi.status() == WL_CONNECTED) {
+    Serial.println(" ✅ Connected!");
+    Serial.print("[WiFi] IP: ");
+    Serial.println(WiFi.localIP());
+    digitalWrite(LED_PIN, HIGH);  // LED on = WiFi connected
+  } else {
+    Serial.println(" ❌ WiFi failed. USB Serial mode only.");
+  }
+  
+  Serial.println("[READY] Listening for commands (WiFi + USB Serial)");
+  Serial.println("[USB]   Send '1' via Serial to open gate");
+}
+
+void openGate(int durationSeconds) {
+  if (gateIsOpen) return;  // Prevent double-open
+  
+  gateIsOpen = true;
+  Serial.println("🟢 GATE OPENING...");
+  gateServo.write(90);
+  
+  // Blink LED while gate is open
+  for (int i = 0; i < durationSeconds * 2; i++) {
+    digitalWrite(LED_PIN, (i % 2 == 0) ? HIGH : LOW);
+    delay(500);
+    
+    // Check for early close via serial
+    if (Serial.available() > 0) {
+      char cmd = Serial.read();
+      if (cmd == '0') {
+        Serial.println("⚡ Manual close command received");
+        break;
+      }
+    }
+  }
+  
+  Serial.println("🔴 GATE CLOSING...");
+  gateServo.write(0);
+  digitalWrite(LED_PIN, WiFi.status() == WL_CONNECTED ? HIGH : LOW);
+  gateIsOpen = false;
+}
+
+HTTPClient http;
+bool httpInitialized = false;
+
+void pollBackend() {
+  if (WiFi.status() != WL_CONNECTED) return;
+  if (gateIsOpen) return;
+  
+  if (!httpInitialized) {
+    http.setReuse(true);
+    httpInitialized = true;
+  }
+  
+  String url = String(BACKEND_URL) + "/gate/poll?location=" + GATE_LOCATION;
+  
+  http.begin(url);
+  http.setTimeout(2000);
+  int httpCode = http.GET();
+  
+  if (httpCode == 200) {
+    String response = http.getString();
+    
+    // Parse JSON
+    StaticJsonDocument<512> doc;
+    DeserializationError error = deserializeJson(doc, response);
+    
+    if (!error) {
+      const char* status = doc["status"];
+      
+      if (strcmp(status, "command") == 0) {
+        const char* action = doc["command"]["action"];
+        int duration = doc["command"]["duration_seconds"] | 10;
+        const char* plate = doc["command"]["plate"] | "Unknown";
+        
+        Serial.print("📡 Cloud command: ");
+        Serial.print(action);
+        Serial.println("s");
+        
+        if (strcmp(action, "open") == 0) {
+          openGate(duration);
+        }
+      }
+    }
+  } else if (httpCode < 0) {
+    // If error (e.g. timeout), end and re-init next time
+    http.end();
+    httpInitialized = false;
+  }
+  // If 200 OK, we DO NOT call http.end() so the TLS socket stays alive!
+}
+
+void loop() {
+  // ── Mode 1: USB Serial Commands ───────────────────────
+  if (Serial.available() > 0) {
+    char cmd = Serial.read();
+    if (cmd == '1') {
+      Serial.println("🔌 USB command received!");
+      openGate(10);
+    }
+  }
+  
+  // ── Mode 2: WiFi Cloud Polling ────────────────────────
+  unsigned long now = millis();
+  if (now - lastPollTime >= POLL_INTERVAL_MS) {
+    lastPollTime = now;
+    pollBackend();
+  }
+  
+  // Small delay to prevent busy-waiting
+  delay(10);
+}

models/__init__.py

@@ -0,0 +1 @@
+# Models package

models/car_plate_best.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:43a6f0f8e08e140a9c2958ae95aec5b2206a18e18343e74f328d1ae56fd06efa
+size 40522154

models/model_ocr.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4bbff2d2eccb0b249cb783ad17fbdf1da9914813ad9738d3eb5555798e614acd
+size 52068370

requirements.txt

@@ -0,0 +1,5 @@
+flask==3.1.1
+requests==2.32.3
+python-dotenv==1.1.0
+opencv-python-headless==4.11.0.86
+gunicorn==23.0.0

routes/__init__.py

@@ -0,0 +1 @@
+# Routes package

routes/admin_routes.py

@@ -0,0 +1,160 @@
+"""
+admin_routes.py
+Admin dashboard — full management panel.
+"""
+
+from flask import (
+    Blueprint, render_template, request, session,
+    redirect, url_for, flash, jsonify
+)
+from services.api_service import (
+    get_inside_cars, get_entered_cars, get_left_cars, get_leaving_soon,
+    get_parking_history, get_parking_locations, get_parking_occupancy,
+    get_all_users,
+    get_my_vehicles, update_profile, add_vehicle, edit_vehicle,
+    delete_vehicle, weekly_refresh, confirm_cash_payment
+)
+
+admin_bp = Blueprint("admin", __name__, url_prefix="/admin")
+
+
+def _require_admin():
+    if "token" not in session or session.get("role") != "admin":
+        return redirect(url_for("auth.login_page"))
+    return None
+
+
+@admin_bp.before_request
+def before():
+    result = _require_admin()
+    if result:
+        return result
+
+
+@admin_bp.route("/")
+def dashboard():
+    token = session["token"]
+    occupancy = get_parking_occupancy(token)
+    locations = get_parking_locations(token)
+    inside = get_inside_cars(token)
+    return render_template(
+        "admin/dashboard.html",
+        user=session.get("user", {}),
+        occupancy=occupancy,
+        locations=locations,
+        inside_cars=inside,
+    )
+
+
+@admin_bp.route("/vehicles")
+def vehicles():
+    token = session["token"]
+    return render_template("admin/vehicles.html", user=session.get("user", {}))
+
+
+@admin_bp.route("/history")
+def history():
+    token = session["token"]
+    hist = get_parking_history(token)
+    return render_template("admin/history.html", user=session.get("user", {}), history=hist)
+
+
+@admin_bp.route("/garage")
+def garage():
+    token = session["token"]
+    locations = get_parking_locations(token)
+    occupancy = get_parking_occupancy(token)
+    inside = get_inside_cars(token)
+    entered = get_entered_cars(token)
+    left = get_left_cars(token)
+    leaving = get_leaving_soon(token)
+    return render_template(
+        "admin/garage.html",
+        user=session.get("user", {}),
+        locations=locations,
+        occupancy=occupancy,
+        inside_cars=inside,
+        entered_cars=entered,
+        left_cars=left,
+        leaving_cars=leaving,
+    )
+
+
+@admin_bp.route("/users")
+def users():
+    return render_template("admin/users.html", user=session.get("user", {}))
+
+
+@admin_bp.route("/api/users")
+def api_users():
+    return jsonify(get_all_users(session["token"]))
+
+
+# ── AJAX API endpoints ──────────────────────────────────────
+@admin_bp.route("/api/occupancy")
+def api_occupancy():
+    return jsonify(get_parking_occupancy(session["token"]))
+
+
+@admin_bp.route("/api/locations")
+def api_locations():
+    return jsonify(get_parking_locations(session["token"]))
+
+
+@admin_bp.route("/api/inside-cars")
+def api_inside_cars():
+    return jsonify(get_inside_cars(session["token"]))
+
+
+@admin_bp.route("/api/entered-cars")
+def api_entered_cars():
+    return jsonify(get_entered_cars(session["token"]))
+
+
+@admin_bp.route("/api/left-cars")
+def api_left_cars():
+    return jsonify(get_left_cars(session["token"]))
+
+
+@admin_bp.route("/api/leaving-soon")
+def api_leaving_soon():
+    return jsonify(get_leaving_soon(session["token"]))
+
+
+@admin_bp.route("/api/history")
+def api_history():
+    return jsonify(get_parking_history(session["token"]))
+
+
+@admin_bp.route("/api/vehicles/add", methods=["POST"])
+def api_add_vehicle():
+    data = request.get_json() or {}
+    return jsonify(add_vehicle(session["token"], data))
+
+
+@admin_bp.route("/api/vehicles/<vehicle_id>", methods=["PUT"])
+def api_edit_vehicle(vehicle_id):
+    data = request.get_json() or {}
+    return jsonify(edit_vehicle(session["token"], vehicle_id, data))
+
+
+@admin_bp.route("/api/vehicles/<vehicle_id>", methods=["DELETE"])
+def api_delete_vehicle(vehicle_id):
+    return jsonify(delete_vehicle(session["token"], vehicle_id))
+
+
+@admin_bp.route("/api/profile/update", methods=["PUT"])
+def api_update_profile():
+    data = request.get_json() or {}
+    return jsonify(update_profile(session["token"], data))
+
+
+@admin_bp.route("/api/cash-confirm", methods=["POST"])
+def api_cash_confirm():
+    data = request.get_json() or {}
+    return jsonify(confirm_cash_payment(session["token"], data))
+
+
+@admin_bp.route("/api/maintenance", methods=["POST"])
+def api_maintenance():
+    return jsonify(weekly_refresh(session["token"]))

routes/auth_routes.py

@@ -0,0 +1,105 @@
+"""
+auth_routes.py
+Login / Register / Logout — redirects based on role.
+"""
+
+from flask import (
+    Blueprint, render_template, request, redirect,
+    url_for, session, flash
+)
+from services.api_service import login, register
+
+auth_bp = Blueprint("auth", __name__)
+
+
+@auth_bp.route("/")
+def index():
+    if "token" in session:
+        role = session.get("role", "user")
+        if role == "admin":
+            return redirect(url_for("admin.dashboard"))
+        elif role == "security":
+            return redirect(url_for("security.dashboard"))
+    return redirect(url_for("auth.login_page"))
+
+
+@auth_bp.route("/login", methods=["GET", "POST"])
+def login_page():
+    if request.method == "POST":
+        identifier = request.form.get("identifier", "").strip()
+        password = request.form.get("password", "").strip()
+        if not identifier or not password:
+            flash("Please fill in all fields.", "error")
+            return render_template("auth/login.html")
+
+        result = login(identifier, password)
+
+        if "error" in result:
+            flash(f"Login failed: {result['error']}", "error")
+            return render_template("auth/login.html")
+
+        # Extract token and role from response (handle different backend structures)
+        sess_data = result.get("session", {})
+        user_data = result.get("user", result) # Fallback to root for user data
+        
+        token = sess_data.get("access_token") or result.get("access_token")
+        role = user_data.get("role") or result.get("role", "user")
+        is_staff = user_data.get("is_staff", result.get("is_staff", False))
+
+        if not token:
+            flash("Login failed: no token received from backend.", "error")
+            return render_template("auth/login.html")
+
+        # Only allow admin / security roles
+        if role not in ("admin", "security"):
+            flash("Access denied. This dashboard is for staff only.", "error")
+            return render_template("auth/login.html")
+
+        # Store session
+        session["token"] = token
+        session["refresh_token"] = sess_data.get("refresh_token", "")
+        session["role"] = role
+        session["is_staff"] = is_staff
+        session["user"] = user_data
+
+        if role == "admin":
+            return redirect(url_for("admin.dashboard"))
+        else:
+            return redirect(url_for("security.dashboard"))
+
+    return render_template("auth/login.html")
+
+
+@auth_bp.route("/register", methods=["GET", "POST"])
+def register_page():
+    if request.method == "POST":
+        payload = {
+            "first_name": request.form.get("first_name", "").strip(),
+            "last_name": request.form.get("last_name", "").strip(),
+            "username": request.form.get("username", "").strip(),
+            "phone": request.form.get("phone", "").strip(),
+            "password": request.form.get("password", "").strip(),
+            "email": request.form.get("email", "").strip(),
+            "nid": request.form.get("nid", "").strip(),
+            "role": request.form.get("role", "security").strip(),
+        }
+        if not payload["username"] or not payload["phone"] or not payload["password"] or not payload["email"]:
+            flash("Username, phone, email, and password are required.", "error")
+            return render_template("auth/register.html")
+
+        result = register(payload)
+        if "error" in result:
+            flash(f"Registration failed: {result['error']}", "error")
+            return render_template("auth/register.html")
+
+        flash("Registration successful! Please log in.", "success")
+        return redirect(url_for("auth.login_page"))
+
+    return render_template("auth/register.html")
+
+
+@auth_bp.route("/logout")
+def logout():
+    session.clear()
+    flash("Logged out.", "info")
+    return redirect(url_for("auth.login_page"))

routes/camera_routes.py

@@ -0,0 +1,67 @@
+"""
+camera_routes.py
+Camera start/stop and MJPEG video feed.
+"""
+
+from flask import Blueprint, Response, jsonify, session, redirect, url_for
+from services.camera_service import camera
+
+camera_bp = Blueprint("camera", __name__, url_prefix="/camera")
+
+
+@camera_bp.route("/start", methods=["POST"])
+def start():
+    if "token" not in session:
+        return jsonify({"error": "Not authenticated"}), 401
+    try:
+        from flask import current_app
+        source = current_app.config.get("CAMERA_SOURCE", 0)
+        camera.start(source=source)
+        return jsonify({"status": "started"})
+    except RuntimeError as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@camera_bp.route("/stop", methods=["POST"])
+def stop():
+    if "token" not in session:
+        return jsonify({"error": "Not authenticated"}), 401
+    camera.stop()
+    return jsonify({"status": "stopped"})
+
+
+@camera_bp.route("/status")
+def status():
+    return jsonify({"running": camera.is_running})
+
+
+@camera_bp.route("/video_feed")
+def video_feed():
+    if not camera.is_running:
+        return "Camera not running", 503
+    return Response(
+        camera.generate_mjpeg(),
+        mimetype="multipart/x-mixed-replace; boundary=frame",
+    )
+
+
+@camera_bp.route("/capture")
+def capture():
+    """Return a single JPEG frame."""
+    if "token" not in session:
+        return jsonify({"error": "Not authenticated"}), 401
+    frame = camera.get_frame()
+    if frame is None:
+        return "No frame available", 503
+    return Response(frame, mimetype="image/jpeg")
+
+@camera_bp.route("/latest_ocr")
+def latest_ocr():
+    """Return the latest OCR results from the live stream."""
+    if not camera.is_running:
+        return jsonify({"plate_key": None})
+    return jsonify({
+        "plate_key": getattr(camera, "latest_plate_key", None),
+        "ar_letters": getattr(camera, "latest_ar_letters", None),
+        "ar_numbers": getattr(camera, "latest_ar_numbers", None),
+    })

routes/security_routes.py

@@ -0,0 +1,159 @@
+"""
+security_routes.py
+Security guard dashboard — OCR scanning, gate control, live monitoring.
+"""
+
+import base64
+from flask import (
+    Blueprint, render_template, request, session,
+    redirect, url_for, flash, jsonify
+)
+from services.api_service import (
+    predict, is_on_cooldown, get_inside_cars,
+    get_new_cars, trigger_gate_open, confirm_cash_payment,
+    get_parking_occupancy, get_gate_decision
+)
+
+security_bp = Blueprint("security", __name__, url_prefix="/security")
+
+
+def _require_security():
+    if "token" not in session or session.get("role") not in ("security", "admin"):
+        return redirect(url_for("auth.login_page"))
+    return None
+
+
+@security_bp.before_request
+def before():
+    result = _require_security()
+    if result:
+        return result
+
+
+@security_bp.route("/", methods=["GET", "POST"])
+def dashboard():
+    token = session["token"]
+    
+    # --- OCR Scanner Logic ---
+    result = None
+    if request.method == "POST":
+        event_type = request.form.get("event_type", "entry")
+        location = request.form.get("parking_location", "OPERA")
+
+        image_data = None
+        filename = "capture.jpg"
+
+        if "image" in request.files and request.files["image"].filename:
+            f = request.files["image"]
+            image_data = f.read()
+            filename = f.filename
+        elif request.form.get("camera_frame"):
+            b64 = request.form["camera_frame"]
+            if "," in b64:
+                b64 = b64.split(",", 1)[1]
+            image_data = base64.b64decode(b64)
+            filename = "camera_capture.jpg"
+
+        if not image_data:
+            flash("No image provided.", "error")
+        else:
+            # Send to backend to register event (Real Backend)
+            result = predict(image_data, filename, event_type, location, token)
+
+            # Backend plate check (fallback)
+            plate_info = result.get("plate_info") or result.get("plate") or {}
+            if isinstance(plate_info, dict):
+                plate_key = plate_info.get("plate_key", "") or plate_info.get("plate_ar", "")
+            elif isinstance(plate_info, str):
+                plate_key = plate_info
+            else:
+                plate_key = ""
+                
+            if plate_key and is_on_cooldown(plate_key):
+                result["cooldown_warning"] = True
+
+            # Gate is now triggered exclusively by the frontend dashboard to avoid double-opens
+            pass
+
+    # --- Dashboard Logic ---
+    occupancy = get_parking_occupancy(token)
+    inside = get_inside_cars(token)
+    
+    # If AJAX request from the scanner, return JSON
+    if request.headers.get("X-Requested-With") == "XMLHttpRequest":
+        return jsonify(result)
+
+    return render_template(
+        "security/dashboard.html",
+        user=session.get("user", {}),
+        occupancy=occupancy,
+        inside_cars=inside,
+        result=result
+    )
+
+
+@security_bp.route("/api/new-cars")
+def api_new_cars():
+    """AJAX endpoint for live polling."""
+    token = session.get("token")
+    return jsonify(get_new_cars(token))
+
+
+@security_bp.route("/api/inside-cars")
+def api_inside_cars():
+    token = session.get("token")
+    return jsonify(get_inside_cars(token))
+
+
+@security_bp.route("/api/occupancy")
+def api_occupancy():
+    token = session.get("token")
+    return jsonify(get_parking_occupancy(token))
+
+
+@security_bp.route("/api/cash-confirm", methods=["POST"])
+def api_cash_confirm():
+    """Security confirms cash payment and triggers exit closure."""
+    token = session.get("token")
+    data = request.get_json() or {}
+    
+    # 1. Confirm the cash payment in the backend
+    result = confirm_cash_payment(token, data)
+    
+    # 2. Trigger an explicit gate decision (exit) to archive the session
+    # This prevents the need for a second scan to mark the car as "left"
+    plate_key = data.get("plate_key") or data.get("plate_arabic")
+    location = data.get("parking_location") or "OPERA"
+    
+    if plate_key and not result.get("error"):
+        # We fire and forget or just log the decision to ensure backend archives the session
+        get_gate_decision(token, {
+            "plate_key": plate_key,
+            "event_type": "exit",
+            "parking_location": location
+        })
+    
+    return jsonify(result)
+
+
+@security_bp.route("/api/gate-open", methods=["POST"])
+def api_gate_open():
+    """Manual gate open trigger."""
+    return jsonify(trigger_gate_open())
+
+
+@security_bp.route("/api/live-ocr", methods=["POST"])
+def api_live_ocr():
+    """Lightweight OCR endpoint for live browser frames."""
+    data = request.get_json() or {}
+    b64 = data.get("image")
+    if not b64:
+        return jsonify({"error": "No image"}), 400
+    
+    if "," in b64:
+        b64 = b64.split(",", 1)[1]
+    image_data = base64.b64decode(b64)
+    
+    # Call backend but with ocr_scan event type
+    result = predict(image_data, "live_frame.jpg", event_type="ocr_scan", token=session.get("token"))
+    return jsonify(result)

scratch/test_railway.py

@@ -0,0 +1,9 @@
+import requests
+
+url = "https://railway.com/project/6030af2c-06da-4c86-9ef7-aa68fedee8cd/service/68f17b61-afdb-42e7-a374-1049dd196786?environmentId=be637a41-505e-4f28-b149-93e6af05d4d0/auth/login"
+r = requests.post(url, json={"identifier": "EzzeldeenQutbS", "password": "password"}, headers={"Accept": "application/json"})
+print(r.status_code)
+try:
+    print(r.json())
+except:
+    print(r.text[:200])

services/__init__.py

@@ -0,0 +1 @@
+# Services package

services/api_service.py

@@ -0,0 +1,415 @@
+"""
+api_service.py
+Thin wrapper around the Railway backend API.
+All HTTP calls to the remote backend go through here.
+"""
+
+import requests
+import time
+from flask import current_app
+
+# ── Cooldown tracking ────────────────────────────────────────
+_plate_last_seen: dict[str, float] = {}
+
+
+import os
+
+def _base_url() -> str:
+    try:
+        from flask import current_app
+        return current_app.config["BACKEND_API_URL"].rstrip("/")
+    except:
+        return os.getenv("BACKEND_API_URL", "https://ain-el-aql-backend-production.up.railway.app").rstrip("/")
+
+
+def _headers(token: str | None = None) -> dict:
+    h = {"Accept": "application/json"}
+    if token:
+        h["Authorization"] = f"Bearer {token}"
+    return h
+
+
+def normalize_arabic_plate(text: str) -> str:
+    """Converts Hindi digits to Western digits and handles formatting."""
+    if not text: return ""
+    hindi_to_western = {
+        '٠': '0', '١': '1', '٢': '2', '٣': '3', '٤': '4',
+        '٥': '5', '٦': '6', '٧': '7', '٨': '8', '٩': '9'
+    }
+    
+    # Convert digits
+    res = ""
+    for char in text:
+        res += hindi_to_western.get(char, char)
+        
+    if '|' in res:
+        parts = res.split('|')
+        letters = parts[0].strip()
+        numbers = parts[1].strip().replace(" ", "")
+        # Reverse numbers for correct LTR display in the browser
+        return f"{letters} | {numbers[::-1]}"
+    
+    return res
+
+
+def extract_match_key(text: str) -> str:
+    """
+    Extracts alphanumeric characters and sorts them (Letters then Numbers)
+    to ensure 'SQR 777' and '777 SQR' generate the same key 'SQR777'.
+    """
+    if not text: return ""
+    text = text.replace(" ", "").replace("|", "").replace("-", "")
+    
+    import re
+    letters = "".join(re.findall(r'[a-zA-Z\u0600-\u06FF]+', text))
+    numbers = "".join(re.findall(r'[0-9]+', text))
+    
+    # Egyptian system usually prefers Letters then Numbers
+    return f"{letters}{numbers}"
+
+
+# ── Health ───────────────────────────────────────────────────
+def check_health() -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/health", timeout=5)
+        return r.json()
+    except Exception as e:
+        return {"status": "error", "detail": str(e)}
+
+
+def check_supabase_health() -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/supabase/health", timeout=5)
+        return r.json()
+    except Exception as e:
+        return {"status": "error", "detail": str(e)}
+
+
+# ── Auth ─────────────────────────────────────────────────────
+def login(identifier: str, password: str) -> dict:
+    """POST /auth/login  →  returns user + session."""
+    try:
+        r = requests.post(
+            f"{_base_url()}/auth/login",
+            json={"identifier": identifier, "password": password},
+            headers=_headers(),
+            timeout=30,
+        )
+        
+        if r.status_code != 200:
+            try:
+                error_msg = r.json().get("detail", r.json().get("error", "Unknown error"))
+            except:
+                error_msg = f"Error {r.status_code}: {r.text[:100]}"
+            return {"error": error_msg}
+            
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def register(payload: dict) -> dict:
+    """POST /auth/register"""
+    try:
+        r = requests.post(
+            f"{_base_url()}/auth/register",
+            json=payload,
+            headers=_headers(),
+            timeout=10,
+        )
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ── Predict / OCR ────────────────────────────────────────────
+def predict(image_bytes: bytes, filename: str, event_type: str = "entry",
+            location: str = "OPERA", token: str | None = None) -> dict:
+    """
+    POST /process-image (Railway)  →  send image for OCR.
+    Then optionally call /gate/decision to get registration/gate status.
+    """
+    try:
+        # 1. Get OCR from the Main Engine
+        # Backend expects 'image' field for the file, and 'camera_source'
+        files = {"image": (filename, image_bytes, "image/jpeg")}
+        data = {
+            "camera_source": location,
+            "parking_location": location,
+            "event_type": event_type
+        }
+        
+        ocr_resp = requests.post(
+            f"{_base_url()}/predict",
+            files=files,
+            data=data,
+            headers=_headers(token) if token else _headers(),
+            timeout=30,
+        )
+        
+        if ocr_resp.status_code != 200:
+            return {"error": f"Backend OCR failed: {ocr_resp.text[:100]}"}
+            
+        resp = ocr_resp.json()
+        
+        # 2. Map OCR results (Robust mapping)
+        det = resp.get("detection") or resp
+        urls = resp.get("urls") or resp.get("images") or {}
+        
+        # Try different possible plate field names including new backend format
+        plate_info_dict = resp.get("plate_info", {})
+        plate_text = det.get("plate_text") or det.get("plate_ar") or det.get("plate") or plate_info_dict.get("arabic") or ""
+        en_text = det.get("en_text") or det.get("plate_en") or plate_info_dict.get("english") or ""
+        
+        if plate_text or en_text:
+            normalized_ar = normalize_arabic_plate(plate_text)
+            match_key = extract_match_key(en_text) or extract_match_key(normalized_ar)
+            
+            # Use the registration info directly if the backend already provided it
+            # Different backends might use 'app_registration' or top-level 'matched'
+            reg_info = resp.get("app_registration") or resp.get("registration") or {}
+            is_registered = False
+            if isinstance(reg_info, dict):
+                is_registered = reg_info.get("is_registered", resp.get("matched", False))
+            elif isinstance(reg_info, bool):
+                is_registered = reg_info
+
+            resp["matched"] = is_registered
+            resp["plate_text_ar"] = normalized_ar
+            resp["plate_info"] = {
+                "plate_ar": normalized_ar,
+                "plate_en": en_text,
+                "plate_key": match_key,
+                "confidence": det.get("confidence", det.get("score", 0))
+            }
+            
+            # Map Images
+            admin_page_data = resp.get("admin_page", {})
+            if "admin_page" not in resp:
+                resp["admin_page"] = {}
+                
+            # If backend returns base64, create a data URL
+            if admin_page_data.get("annotated_image_base64"):
+                b64 = admin_page_data["annotated_image_base64"]
+                # Sometimes it might already have the prefix
+                if b64.startswith("data:"):
+                    resp["admin_page"]["processed_image_url"] = b64
+                else:
+                    resp["admin_page"]["processed_image_url"] = f"data:image/jpeg;base64,{b64}"
+            else:
+                resp["admin_page"]["processed_image_url"] = urls.get("processed") or urls.get("annotated") or ""
+                
+            resp["admin_page"]["raw_image_url"] = urls.get("raw") or urls.get("original") or ""
+
+            # 3. Call Gate Decision (Business Logic)
+            if "gate_decision" not in resp:
+                try:
+                    decision_payload = {
+                        "plate_key": resp["plate_info"]["plate_key"],
+                        "event_type": event_type,
+                        "parking_location": location
+                    }
+                    dr = requests.post(
+                        f"{_base_url()}/gate/decision",
+                        json=decision_payload,
+                        headers=_headers(token) if token else _headers(),
+                        timeout=10
+                    )
+                    if dr.status_code == 200:
+                        decision_data = dr.json()
+                        resp.update(decision_data)
+                except Exception as e:
+                    resp["backend_warning"] = f"Gate decision failed: {str(e)}"
+                
+        return resp
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def is_on_cooldown(plate_key: str) -> bool:
+    """Returns True if plate was scanned within PLATE_COOLDOWN_SECONDS."""
+    cooldown = current_app.config["PLATE_COOLDOWN_SECONDS"]
+    now = time.time()
+    if plate_key in _plate_last_seen:
+        if now - _plate_last_seen[plate_key] < cooldown:
+            return True
+    _plate_last_seen[plate_key] = now
+    return False
+
+
+# ── Parking / Events  (staff endpoints) ─────────────────────
+def get_entered_cars(token: str) -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/events/entered-cars",
+                         headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def get_inside_cars(token: str) -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/events/inside-cars",
+                         headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def get_left_cars(token: str) -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/events/left-cars",
+                         headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def get_leaving_soon(token: str) -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/events/leaving-cars-within-5-minutes",
+                         headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def get_new_cars(token: str) -> dict:
+    """GET /events/new-cars  — staff-only real-time polling feed."""
+    try:
+        r = requests.get(f"{_base_url()}/events/new-cars",
+                         headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def get_parking_history(token: str) -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/parking/history",
+                         headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def get_all_users(token: str) -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/users",
+                         headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def get_parking_locations(token: str) -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/parking/locations",
+                         headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def get_parking_occupancy(token: str) -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/parking/occupancy",
+                         headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ── Vehicles ─────────────────────────────────────────────────
+def get_my_vehicles(token: str) -> dict:
+    try:
+        r = requests.get(f"{_base_url()}/vehicles/my",
+                         headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def add_vehicle(token: str, payload: dict) -> dict:
+    try:
+        r = requests.post(f"{_base_url()}/vehicles/add",
+                          json=payload, headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def edit_vehicle(token: str, vehicle_id: str, payload: dict) -> dict:
+    try:
+        r = requests.put(f"{_base_url()}/vehicles/{vehicle_id}",
+                         json=payload, headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def delete_vehicle(token: str, vehicle_id: str) -> dict:
+    try:
+        r = requests.delete(f"{_base_url()}/vehicles/{vehicle_id}",
+                            headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ── Profile ──────────────────────────────────────────────────
+def update_profile(token: str, payload: dict) -> dict:
+    try:
+        r = requests.put(f"{_base_url()}/profile/update",
+                         json=payload, headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ── Payments ─────────────────────────────────────────────────
+def confirm_cash_payment(token: str, payload: dict) -> dict:
+    """POST /payments/manual/cash-confirm  — staff-only."""
+    try:
+        r = requests.post(f"{_base_url()}/payments/manual/cash-confirm",
+                          json=payload, headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+def get_gate_decision(token: str, payload: dict) -> dict:
+    try:
+        r = requests.post(f"{_base_url()}/gate/decision",
+                          json=payload, headers=_headers(token), timeout=30)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ── Gate hardware (ESP) ──────────────────────────────────────
+def trigger_gate_open(plate: str = "", location: str = "OPERA") -> dict:
+    """Queue a gate-open command on the cloud backend for ESP32 devices to poll."""
+    try:
+        r = requests.post(
+            f"{_base_url()}/gate/trigger",
+            json={
+                "parking_location": location,
+                "duration_seconds": 10,
+                "plate": plate,
+            },
+            timeout=5,
+        )
+        return {"status": "sent", "backend_response": r.json()}
+    except Exception as e:
+        return {"status": "error", "detail": str(e)}
+
+
+# ── Admin maintenance ────────────────────────────────────────
+def weekly_refresh(token: str) -> dict:
+    try:
+        r = requests.post(f"{_base_url()}/admin/maintenance/weekly-refresh",
+                          headers=_headers(token), timeout=15)
+        return r.json()
+    except Exception as e:
+        return {"error": str(e)}

services/camera_service.py

@@ -0,0 +1,73 @@
+"""
+camera_service.py
+Manages OpenCV camera capture. Start/Stop on demand (not continuous).
+"""
+
+import cv2
+import threading
+import time
+
+
+
+class CameraService:
+    def __init__(self):
+        self._cap = None
+        self._running = False
+        self._lock = threading.Lock()
+        self._frame = None
+
+    @property
+    def is_running(self) -> bool:
+        return self._running
+
+    def start(self, source: int = 0):
+        with self._lock:
+            if self._running:
+                return
+            self._cap = cv2.VideoCapture(source)
+            if not self._cap.isOpened():
+                raise RuntimeError("Cannot open camera")
+            self._running = True
+            threading.Thread(target=self._capture_loop, daemon=True).start()
+
+    def stop(self):
+        with self._lock:
+            self._running = False
+            if self._cap:
+                self._cap.release()
+                self._cap = None
+            self._frame = None
+
+    def _capture_loop(self):
+        while self._running:
+            if self._cap and self._cap.isOpened():
+                ok, frame = self._cap.read()
+                if ok:
+                    self._frame = frame
+            time.sleep(0.033)  # ~30 fps
+
+    def get_frame(self):
+        """Return the latest frame as JPEG bytes, or None."""
+        if self._frame is None:
+            return None
+        ok, buf = cv2.imencode(".jpg", self._frame)
+        return buf.tobytes() if ok else None
+
+    def get_frame_raw(self):
+        """Return raw numpy frame for processing."""
+        return self._frame.copy() if self._frame is not None else None
+
+    def generate_mjpeg(self):
+        """Generator for MJPEG streaming."""
+        while self._running:
+            jpeg = self.get_frame()
+            if jpeg:
+                yield (
+                    b"--frame\r\n"
+                    b"Content-Type: image/jpeg\r\n\r\n" + jpeg + b"\r\n"
+                )
+            time.sleep(0.066)  # ~15 fps for streaming
+
+
+# Singleton
+camera = CameraService()

services/ocr_service.py

@@ -0,0 +1,2 @@
+# Local OCR service disabled.
+# All processing is handled by the remote Railway backend.

services/supabase_client.py

@@ -0,0 +1,10 @@
+import os
+from supabase import create_client, Client
+from config import Config
+
+def get_supabase() -> Client:
+    url: str = os.environ.get("SUPABASE_URL", "https://mymdiyxzrdtfdrgpgqow.supabase.co")
+    key: str = os.environ.get("SUPABASE_KEY", "your-supabase-key")
+    return create_client(url, key)
+
+db = get_supabase()

static/css/style.css

@@ -0,0 +1,418 @@
+/* ═══════════════════════════════════════════════════════════
+   Ain El Aql — Dark CCTV-Style Dashboard
+   ═══════════════════════════════════════════════════════════ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+/* ── CSS Variables ─────────────────────────────────────────── */
+:root {
+  --bg-primary: #0a0e17;
+  --bg-secondary: #111827;
+  --bg-card: #1a2236;
+  --bg-card-hover: #1f2a42;
+  --bg-input: #0d1321;
+  --border-color: #2a3654;
+  --border-glow: #3b82f6;
+  --text-primary: #e2e8f0;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --accent-blue: #3b82f6;
+  --accent-cyan: #06b6d4;
+  --accent-green: #10b981;
+  --accent-red: #ef4444;
+  --accent-amber: #f59e0b;
+  --accent-purple: #8b5cf6;
+  --gradient-blue: linear-gradient(135deg, #3b82f6, #06b6d4);
+  --gradient-green: linear-gradient(135deg, #10b981, #34d399);
+  --gradient-red: linear-gradient(135deg, #ef4444, #f87171);
+  --gradient-purple: linear-gradient(135deg, #8b5cf6, #a78bfa);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
+  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
+  --shadow-lg: 0 10px 30px rgba(0,0,0,.6);
+  --shadow-glow-blue: 0 0 20px rgba(59,130,246,.15);
+  --shadow-glow-green: 0 0 20px rgba(16,185,129,.15);
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --transition: all .25s cubic-bezier(.4,0,.2,1);
+}
+
+/* ── Reset & Base ──────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 15px; scroll-behavior: smooth; }
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--accent-cyan); text-decoration: none; transition: var(--transition); }
+a:hover { color: var(--accent-blue); }
+
+/* ── Scrollbar ─────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg-primary); }
+::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }
+
+/* ── Layout ────────────────────────────────────────────────── */
+.app-layout { display: flex; min-height: 100vh; }
+.sidebar {
+  width: 260px; background: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  display: flex; flex-direction: column;
+  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
+  transition: var(--transition);
+}
+.sidebar-header {
+  padding: 1.5rem; border-bottom: 1px solid var(--border-color);
+  display: flex; align-items: center; gap: .75rem;
+}
+.sidebar-logo {
+  width: 40px; height: 40px; border-radius: var(--radius-sm);
+  background: var(--gradient-blue); display: grid; place-items: center;
+  font-weight: 800; font-size: 1.1rem; color: #fff;
+}
+.sidebar-title { font-weight: 700; font-size: 1rem; }
+.sidebar-subtitle { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
+.sidebar-nav { flex: 1; padding: 1rem .75rem; display: flex; flex-direction: column; gap: 4px; }
+.nav-link {
+  display: flex; align-items: center; gap: .75rem;
+  padding: .7rem 1rem; border-radius: var(--radius-sm);
+  color: var(--text-secondary); font-size: .875rem; font-weight: 500;
+  transition: var(--transition); cursor: pointer; border: none; background: none; width: 100%; text-align: left;
+}
+.nav-link:hover { background: var(--bg-card); color: var(--text-primary); }
+.nav-link.active { background: rgba(59,130,246,.12); color: var(--accent-blue); border-left: 3px solid var(--accent-blue); }
+.nav-link .icon { width: 20px; text-align: center; font-size: 1rem; }
+.sidebar-footer { padding: 1rem; border-top: 1px solid var(--border-color); }
+.user-badge {
+  display: flex; align-items: center; gap: .75rem;
+  padding: .5rem .75rem; border-radius: var(--radius-sm);
+  background: var(--bg-card);
+}
+.user-avatar {
+  width: 36px; height: 36px; border-radius: 50%;
+  background: var(--gradient-purple); display: grid; place-items: center;
+  font-weight: 700; font-size: .8rem; color: #fff;
+}
+.user-name { font-size: .8rem; font-weight: 600; }
+.user-role { font-size: .65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
+.main-content { flex: 1; margin-left: 260px; padding: 2rem; }
+.page-header { margin-bottom: 2rem; }
+.page-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
+.page-subtitle { color: var(--text-muted); font-size: .875rem; margin-top: .25rem; }
+
+/* ── Cards ─────────────────────────────────────────────────── */
+.card {
+  background: var(--bg-card); border: 1px solid var(--border-color);
+  border-radius: var(--radius-md); padding: 1.5rem;
+  transition: var(--transition);
+}
+.card:hover { border-color: rgba(59,130,246,.3); box-shadow: var(--shadow-glow-blue); }
+.card-header {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border-color);
+}
+.card-title { font-size: 1rem; font-weight: 700; }
+.card-badge {
+  padding: .2rem .6rem; border-radius: 50px; font-size: .65rem;
+  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
+}
+.badge-live { background: rgba(239,68,68,.15); color: var(--accent-red); animation: pulse-badge 2s infinite; }
+.badge-ok { background: rgba(16,185,129,.15); color: var(--accent-green); }
+.badge-warn { background: rgba(245,158,11,.15); color: var(--accent-amber); }
+@keyframes pulse-badge { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
+
+/* ── Stat Cards ────────────────────────────────────────────── */
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
+.stat-card {
+  background: var(--bg-card); border: 1px solid var(--border-color);
+  border-radius: var(--radius-md); padding: 1.25rem 1.5rem;
+  position: relative; overflow: hidden; transition: var(--transition);
+}
+.stat-card::before {
+  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+}
+.stat-card.blue::before { background: var(--gradient-blue); }
+.stat-card.green::before { background: var(--gradient-green); }
+.stat-card.red::before { background: var(--gradient-red); }
+.stat-card.purple::before { background: var(--gradient-purple); }
+.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
+.stat-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
+.stat-value { font-size: 2rem; font-weight: 800; margin: .25rem 0; font-family: 'JetBrains Mono', monospace; }
+.stat-value.blue { color: var(--accent-blue); }
+.stat-value.green { color: var(--accent-green); }
+.stat-value.red { color: var(--accent-red); }
+.stat-value.purple { color: var(--accent-purple); }
+.stat-detail { font-size: .75rem; color: var(--text-secondary); }
+
+/* ── Tables ────────────────────────────────────────────────── */
+.table-wrapper { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-color); }
+table { width: 100%; border-collapse: collapse; }
+thead { background: rgba(59,130,246,.06); }
+th {
+  padding: .75rem 1rem; text-align: left; font-size: .7rem;
+  text-transform: uppercase; letter-spacing: .06em;
+  color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-color);
+}
+td {
+  padding: .75rem 1rem; font-size: .85rem; border-bottom: 1px solid rgba(42,54,84,.5);
+  color: var(--text-secondary);
+}
+tr:hover td { background: rgba(59,130,246,.04); color: var(--text-primary); }
+.mono { font-family: 'JetBrains Mono', monospace; font-size: .8rem; }
+
+/* ── Buttons ───────────────────────────────────────────────── */
+.btn {
+  display: inline-flex; align-items: center; gap: .5rem;
+  padding: .6rem 1.25rem; border-radius: var(--radius-sm);
+  font-size: .85rem; font-weight: 600; cursor: pointer;
+  border: 1px solid transparent; transition: var(--transition);
+  font-family: 'Inter', sans-serif;
+}
+.btn-primary { background: var(--gradient-blue); color: #fff; }
+.btn-primary:hover { box-shadow: 0 4px 20px rgba(59,130,246,.35); transform: translateY(-1px); }
+.btn-success { background: var(--gradient-green); color: #fff; }
+.btn-success:hover { box-shadow: 0 4px 20px rgba(16,185,129,.35); transform: translateY(-1px); }
+.btn-danger { background: var(--gradient-red); color: #fff; }
+.btn-danger:hover { box-shadow: 0 4px 20px rgba(239,68,68,.35); transform: translateY(-1px); }
+.btn-outline {
+  background: transparent; border-color: var(--border-color); color: var(--text-secondary);
+}
+.btn-outline:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(59,130,246,.06); }
+.btn-sm { padding: .4rem .8rem; font-size: .75rem; }
+.btn-icon { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: var(--radius-sm); }
+
+/* ── Forms ──────────────────────────────────────────────────── */
+.form-group { margin-bottom: 1.25rem; }
+.form-label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .4rem; }
+.form-input, .form-select {
+  width: 100%; padding: .7rem 1rem; background: var(--bg-input);
+  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
+  color: var(--text-primary); font-size: .875rem; font-family: 'Inter', sans-serif;
+  transition: var(--transition);
+}
+.form-input:focus, .form-select:focus {
+  outline: none; border-color: var(--accent-blue);
+  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
+}
+.form-input::placeholder { color: var(--text-muted); }
+
+/* ── Alerts ────────────────────────────────────────────────── */
+.alert {
+  padding: .85rem 1.25rem; border-radius: var(--radius-sm);
+  font-size: .85rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
+  border: 1px solid;
+}
+.alert-error { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); color: #fca5a5; }
+.alert-success { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: #6ee7b7; }
+.alert-info { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: #93c5fd; }
+.alert-warning { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); color: #fcd34d; }
+
+/* ── CCTV Camera Feed ──────────────────────────────────────── */
+.camera-feed {
+  position: relative; background: #000; border-radius: var(--radius-md);
+  overflow: hidden; border: 2px solid var(--border-color);
+  aspect-ratio: 16/9;
+}
+.camera-feed img, .camera-feed video {
+  width: 100%; height: 100%; object-fit: cover;
+}
+.camera-overlay {
+  position: absolute; top: 0; left: 0; right: 0;
+  padding: .5rem .75rem;
+  background: linear-gradient(180deg, rgba(0,0,0,.7), transparent);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.camera-overlay .rec {
+  display: flex; align-items: center; gap: .4rem;
+  font-size: .7rem; font-weight: 700; color: var(--accent-red);
+  text-transform: uppercase; letter-spacing: .08em;
+}
+.camera-overlay .rec::before {
+  content: ''; width: 8px; height: 8px; background: var(--accent-red);
+  border-radius: 50%; animation: pulse-badge 1.5s infinite;
+}
+.camera-overlay .timestamp {
+  font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: rgba(255,255,255,.7);
+}
+.camera-controls {
+  display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap;
+}
+.camera-placeholder {
+  display: flex; flex-direction: column; align-items: center;
+  justify-content: center; height: 100%; color: var(--text-muted);
+  font-size: .85rem; gap: .5rem;
+}
+.camera-placeholder .icon { font-size: 3rem; opacity: .3; }
+
+/* ── OCR Result Panel ──────────────────────────────────────── */
+.ocr-result {
+  border: 1px solid var(--border-color); border-radius: var(--radius-md);
+  overflow: hidden; background: var(--bg-card);
+}
+.ocr-result-header {
+  padding: 1rem 1.5rem; display: flex; justify-content: space-between;
+  align-items: center; border-bottom: 1px solid var(--border-color);
+}
+.ocr-plate {
+  font-family: 'JetBrains Mono', monospace; font-size: 1.75rem;
+  font-weight: 800; letter-spacing: .05em;
+}
+.ocr-result-body { padding: 1.25rem 1.5rem; }
+.ocr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.ocr-field-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
+.ocr-field-value { font-size: .9rem; font-weight: 600; }
+.ocr-image { border-radius: var(--radius-sm); max-width: 100%; margin-top: 1rem; border: 1px solid var(--border-color); }
+
+/* ── Status indicators ─────────────────────────────────────── */
+.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; }
+.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
+.status-registered { color: var(--accent-green); }
+.status-registered::before { background: var(--accent-green); box-shadow: 0 0 8px rgba(16,185,129,.5); }
+.status-unregistered { color: var(--accent-red); }
+.status-unregistered::before { background: var(--accent-red); box-shadow: 0 0 8px rgba(239,68,68,.5); }
+.status-active { color: var(--accent-cyan); }
+.status-active::before { background: var(--accent-cyan); box-shadow: 0 0 8px rgba(6,182,212,.5); }
+
+/* ── Gate Status ───────────────────────────────────────────── */
+.gate-status {
+  display: flex; align-items: center; gap: 1rem;
+  padding: 1rem 1.5rem; border-radius: var(--radius-md);
+  font-weight: 700; font-size: 1rem;
+}
+.gate-open { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: var(--accent-green); }
+.gate-closed { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: var(--accent-red); }
+.gate-icon { font-size: 1.5rem; }
+
+/* ── Auth Pages ────────────────────────────────────────────── */
+.auth-wrapper {
+  min-height: 100vh; display: grid; place-items: center;
+  background: var(--bg-primary);
+  background-image: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,.08) 0%, transparent 50%),
+                    radial-gradient(ellipse at 80% 20%, rgba(139,92,246,.06) 0%, transparent 50%);
+}
+.auth-card {
+  width: 100%; max-width: 420px; padding: 2.5rem;
+  background: var(--bg-card); border: 1px solid var(--border-color);
+  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
+}
+.auth-logo { text-align: center; margin-bottom: 2rem; }
+.auth-logo-icon {
+  width: 64px; height: 64px; margin: 0 auto .75rem;
+  background: var(--gradient-blue); border-radius: var(--radius-md);
+  display: grid; place-items: center; font-size: 1.75rem; color: #fff; font-weight: 800;
+}
+.auth-logo h1 { font-size: 1.5rem; font-weight: 800; }
+.auth-logo p { font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }
+.auth-footer { text-align: center; margin-top: 1.5rem; font-size: .8rem; color: var(--text-muted); }
+
+/* ── Grid layouts ──────────────────────────────────────────── */
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
+.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
+
+/* ── Modal ──────────────────────────────────────────────────── */
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,.65);
+  backdrop-filter: blur(4px); display: none; place-items: center; z-index: 1000;
+}
+.modal-overlay.active { display: grid; }
+.modal {
+  background: var(--bg-card); border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg); padding: 2rem; width: 90%; max-width: 500px;
+  box-shadow: var(--shadow-lg);
+}
+.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
+.modal-title { font-size: 1.1rem; font-weight: 700; }
+.modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.25rem; cursor: pointer; }
+.modal-close:hover { color: var(--text-primary); }
+.modal-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; }
+
+/* ── Loading ───────────────────────────────────────────────── */
+.spinner {
+  width: 32px; height: 32px; border: 3px solid var(--border-color);
+  border-top-color: var(--accent-blue); border-radius: 50%;
+  animation: spin .8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.loading-overlay {
+  position: absolute; inset: 0; background: rgba(10,14,23,.8);
+  display: none; place-items: center; z-index: 10; border-radius: var(--radius-md);
+}
+.loading-overlay.active { display: grid; }
+
+/* ── Animations ────────────────────────────────────────────── */
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+.fade-in { animation: fadeIn .4s ease-out; }
+@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
+
+/* ── Responsive ────────────────────────────────────────────── */
+@media (max-width: 1024px) {
+  .sidebar { width: 220px; }
+  .main-content { margin-left: 220px; }
+  .grid-3 { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 768px) {
+  .sidebar { display: none; }
+  .main-content { margin-left: 0; padding: 1rem; }
+  .grid-2, .grid-3, .content-grid { grid-template-columns: 1fr; }
+  .stats-grid { grid-template-columns: 1fr 1fr; }
+  .ocr-grid { grid-template-columns: 1fr; }
+}
+
+/* ── Utility ───────────────────────────────────────────────── */
+.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
+.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; }
+.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; }
+.hidden { display: none !important; }
+.w-full { width: 100%; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ── Premium UI Overhaul (Uber-Professional) ────────────────── */
+.glass-card {
+  background: rgba(26, 34, 54, 0.75);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 1.5rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.pulse-badge {
+  display: flex; align-items: center; gap: 8px;
+  background: rgba(239, 68, 68, 0.12); color: #f87171;
+  padding: 6px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 1px;
+}
+.pulse-dot {
+  width: 8px; height: 8px; background: #ef4444; border-radius: 50%;
+  animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes pulse-ring {
+  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
+  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+}
+#gateOverlay {
+  position: fixed; inset: 0; background: rgba(10, 14, 23, 0.96);
+  z-index: 10000; display: none; flex-direction: column;
+  align-items: center; justify-content: center; backdrop-filter: blur(20px);
+}
+.gate-timer-circle {
+  width: 220px; height: 220px; border: 10px solid #10b981;
+  border-radius: 50%; display: grid; place-items: center;
+  font-size: 6.5rem; font-weight: 900; color: #10b981;
+  box-shadow: 0 0 60px rgba(16, 185, 129, 0.3); margin-bottom: 2rem;
+}
+.status-pill { padding: 4px 12px; border-radius: 6px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
+.status-pill.guest { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
+.status-pill.reg { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
+.duration-timer { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #3b82f6; background: rgba(59, 130, 246, 0.1); padding: 2px 6px; border-radius: 4px; }
+.plate-display { font-family: 'JetBrains Mono', monospace; font-size: 2.5rem; font-weight: 800; letter-spacing: 2px; color: white; }

templates/admin/dashboard.html

@@ -0,0 +1,181 @@
+{% extends "base.html" %}
+{% block title %}Admin Dashboard — Ain El Aql{% endblock %}
+{% block body %}
+<div class="app-layout">
+  {% with role='admin', active='dashboard' %}
+  {% include "partials/sidebar.html" %}
+  {% endwith %}
+
+  <main class="main-content">
+    <div class="page-header fade-in flex-between">
+      <div>
+        <h1 class="page-title">Admin Dashboard</h1>
+        <p class="page-subtitle">Parking facility management & analytics</p>
+      </div>
+      <div class="pulse-badge">
+        <div class="pulse-dot"></div>
+        System Live
+      </div>
+    </div>
+
+    <div class="stats-grid fade-in" id="statsGrid">
+      <div class="stat-card blue">
+        <div class="stat-label">Total Capacity</div>
+        <div class="stat-value blue" id="statCapacity">—</div>
+      </div>
+      <div class="stat-card green">
+        <div class="stat-label">Currently Inside</div>
+        <div class="stat-value green" id="statInside">—</div>
+      </div>
+      <div class="stat-card purple">
+        <div class="stat-label">Available Spots</div>
+        <div class="stat-value purple" id="statAvailable">—</div>
+      </div>
+      <div class="stat-card red">
+        <div class="stat-label">Occupancy Rate</div>
+        <div class="stat-value red" id="statOccRate">—</div>
+      </div>
+    </div>
+
+    <div class="content-grid" style="grid-template-columns: 1fr;">
+      <!-- Inside Cars -->
+      <div class="card fade-in">
+        <div class="card-header">
+          <span class="card-title">🚗 Vehicles Inside</span>
+          <span class="card-badge badge-live">LIVE</span>
+        </div>
+        <div class="table-wrapper" style="max-height:500px;overflow-y:auto;">
+          <table>
+            <thead>
+              <tr>
+                <th>Plate</th>
+                <th>Registration</th>
+                <th>Entry</th>
+                <th>Duration</th>
+                <th>Est. Fee</th>
+                <th>Status</th>
+                <th>Payment</th>
+              </tr>
+            </thead>
+            <tbody id="insideBody">
+              <tr><td colspan="7" class="text-center" style="padding:2rem;color:var(--text-muted);">Loading live data...</td></tr></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Quick Admin Actions -->
+    <div class="card fade-in">
+      <div class="card-header">
+        <span class="card-title">⚡ Administration</span>
+      </div>
+      <div style="display:flex;gap:.75rem;flex-wrap:wrap;">
+        <a href="{{ url_for('admin.garage') }}" class="btn btn-outline" style="background:var(--accent-blue);color:white;border:none;">
+          <span class="icon">🏗️</span> Garage Status
+        </a>
+        <a href="{{ url_for('admin.users') }}" class="btn btn-outline">
+          <span class="icon">👥</span> Manage Users
+        </a>
+        <a href="{{ url_for('admin.vehicles') }}" class="btn btn-outline">
+          <span class="icon">🚗</span> Manage Vehicles
+        </a>
+        <a href="{{ url_for('admin.history') }}" class="btn btn-outline">
+          <span class="icon">📋</span> Parking History
+        </a>
+        <button class="btn btn-danger" onclick="runMaintenance()"><span>🧹</span> Refresh Storage (Photos)</button>
+      </div>
+    </div>
+  </main>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function updateStats(occ) {
+  if (!occ) return;
+  const g = occ.garage || occ;
+  const cap = g.total_capacity || g.capacity || 0;
+  const inside = g.inside || g.occupied || g.current_count || 0;
+  document.getElementById('statCapacity').textContent = cap || '—';
+  document.getElementById('statInside').textContent = inside;
+  document.getElementById('statAvailable').textContent = cap ? cap - inside : '—';
+  document.getElementById('statOccRate').textContent = cap ? Math.round((inside/cap)*100) + '%' : '—';
+}
+
+function formatDuration(mins) {
+  if (mins == null) return '—';
+  const h = Math.floor(mins / 60);
+  const m = Math.floor(mins % 60);
+  return h > 0 ? `${h}h ${m}m` : `${m}m`;
+}
+
+function renderInside(data) {
+  const body = document.getElementById('insideBody');
+  // Backend returns { items: [...] } where each item has { session, vehicle, pricing, payment_status }
+  let items = Array.isArray(data) ? data : (data.items || data.data || data.cars || []);
+  if (!items.length) { body.innerHTML = '<tr><td colspan="6" class="text-center" style="padding:2rem;color:var(--text-muted);">No vehicles inside</td></tr>'; return; }
+  body.innerHTML = items.map(item => {
+    const s = item.session || item;
+    const v = item.vehicle || {};
+    const p = item.pricing || {};
+    const ps = item.payment_status || {};
+    
+    const plate = s.plate_arabic || s.plate_english || s.plate_key || v.plate_letters_ar || '—';
+    const entry = s.check_in_at ? new Date(s.check_in_at).toLocaleString() : (s.entry_time ? new Date(s.entry_time).toLocaleString() : '—');
+    const duration = formatDuration(p.duration_minutes);
+    const fee = p.total_fee_egp != null ? p.total_fee_egp + ' EGP' : '—';
+    const status = s.status || 'entered';
+    const statusClass = status === 'paid' ? 'status-registered' : 'status-active';
+    const statusLabel = status === 'paid' ? '✅ Paid' : status === 'entered' ? '🔵 Inside' : status;
+    
+    // Payment method badge
+    const notes = (s.notes || '').toLowerCase();
+    const hasCashIntent = notes.includes('intent_cash') || notes.includes('cash');
+    const isGuest = !v.id && !v.plate_letters_ar;
+    
+    let registration = isGuest 
+        ? '<span style="color:var(--accent-red);font-size:0.8rem;font-weight:bold;">Unregistered</span>' 
+        : '<span style="color:var(--accent-green);font-size:0.8rem;font-weight:bold;">Registered</span>';
+    
+    let isCash = isGuest || hasCashIntent;
+    let isPaidVisa = s.payment_confirmed_at != null && !isCash;
+    
+    let payBadge = '—';
+    if (isPaidVisa) payBadge = '<span style="color:var(--accent-blue);">💳 Visa</span>';
+    else if (isCash) payBadge = '<span style="color:var(--accent-green);">💵 Cash</span>';
+    
+    return `<tr>
+      <td class="mono">${plate}</td>
+      <td>${registration}</td>
+      <td>${entry}</td>
+      <td>${duration}</td><td>${fee}</td>
+      <td><span class="status ${statusClass}">${statusLabel}</span></td>
+      <td>${payBadge}</td>
+    </tr>`;
+  }).join('');
+}
+
+
+
+async function refreshData() {
+  try {
+    const [oR, iR] = await Promise.all([
+      fetch('/admin/api/occupancy'), fetch('/admin/api/inside-cars')
+    ]);
+    updateStats(await oR.json()); renderInside(await iR.json());
+  } catch(e) { console.error(e); }
+}
+
+async function runMaintenance() {
+  if (!confirm('Clear database photo storage? (Profiles and tables will not be affected)')) return;
+  try {
+    const r = await fetch('/admin/api/maintenance', {method:'POST'});
+    const d = await r.json();
+    alert(d.message || d.error || 'Done');
+  } catch(e) { alert('Error: ' + e); }
+}
+
+refreshData();
+setInterval(refreshData, 2000); // 2 seconds for high-tier real-time feel
+</script>
+{% endblock %}

templates/admin/garage.html

@@ -0,0 +1,189 @@
+{% extends "base.html" %}
+{% block title %}Garage Status — Ain El Aql{% endblock %}
+{% block body %}
+<div class="app-layout">
+  {% with role='admin', active='garage' %}
+  {% include "partials/sidebar.html" %}
+  {% endwith %}
+
+  <main class="main-content">
+    <div class="page-header fade-in flex-between">
+      <div>
+        <h1 class="page-title">Garage Status</h1>
+        <p class="page-subtitle">Live view of all parking operations</p>
+      </div>
+      <button class="btn btn-outline" onclick="refreshAll()"><span>🔄</span> Refresh</button>
+    </div>
+
+    <div class="stats-grid fade-in">
+      <div class="stat-card green">
+        <div class="stat-label">Entered Today</div>
+        <div class="stat-value green" id="sEntered">—</div>
+      </div>
+      <div class="stat-card blue">
+        <div class="stat-label">Currently Inside</div>
+        <div class="stat-value blue" id="sInside">—</div>
+      </div>
+      <div class="stat-card purple">
+        <div class="stat-label">Left Today</div>
+        <div class="stat-value purple" id="sLeft">—</div>
+      </div>
+      <div class="stat-card red">
+        <div class="stat-label">Leaving Soon</div>
+        <div class="stat-value red" id="sLeaving">—</div>
+      </div>
+    </div>
+
+    <!-- Tabs -->
+    <div class="card fade-in">
+      <div style="display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid var(--border-color);padding-bottom:.75rem;">
+        <button class="btn btn-sm btn-primary" onclick="showTab('inside')" id="tabInside">Inside</button>
+        <button class="btn btn-sm btn-outline" onclick="showTab('entered')" id="tabEntered">Entered</button>
+        <button class="btn btn-sm btn-outline" onclick="showTab('left')" id="tabLeft">Left</button>
+        <button class="btn btn-sm btn-outline" onclick="showTab('leaving')" id="tabLeaving">Leaving Soon</button>
+      </div>
+      <div class="table-wrapper" style="max-height:500px;overflow-y:auto;">
+        <table>
+          <thead>
+            <tr>
+              <th>Plate</th>
+              <th>Registration</th>
+              <th>Entry Time</th>
+              <th>Exit Time</th>
+              <th>Duration</th>
+              <th>Fee</th>
+              <th>Status</th>
+              <th>Payment</th>
+            </tr>
+          </thead>
+          <tbody id="tableBody">
+            <tr><td colspan="8" class="text-center" style="padding:2rem;color:var(--text-muted);">Loading data...</td></tr></tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+let cacheData = { inside:[], entered:[], left:[], leaving:[] };
+let currentTab = 'inside';
+
+function showTab(tab) {
+  currentTab = tab;
+  ['inside','entered','left','leaving'].forEach(t => {
+    document.getElementById('tab'+t.charAt(0).toUpperCase()+t.slice(1)).className = t===tab ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-outline';
+  });
+  renderTable(cacheData[tab]);
+}
+
+function extractItems(data) {
+  if (!data) return [];
+  if (Array.isArray(data)) return data;
+  return data.items || data.history || data.data || data.cars || data.sessions || [];
+}
+
+function normalizePlate(p) {
+  if (!p) return '';
+  const map = {'٠':'0','١':'1','٢':'2','٣':'3','٤':'4','٥':'5','٦':'6','٧':'7','٨':'8','٩':'9'};
+  return String(p).replace(/[٠-٩]/g, d => map[d]).replace(/[\s\-\|]/g, '').trim();
+}
+
+function formatDuration(mins) {
+  if (mins == null) return '—';
+  const h = Math.floor(mins / 60);
+  const m = Math.floor(mins % 60);
+  return h > 0 ? `${h}h ${m}m` : `${m}m`;
+}
+
+function renderTable(items) {
+  const body = document.getElementById('tableBody');
+  if (!items || !items.length) {
+    body.innerHTML = '<tr><td colspan="8" class="text-center" style="padding:2rem;color:var(--text-muted);">No records</td></tr>';
+    return;
+  }
+  body.innerHTML = items.map(item => {
+    const s = item.session || item;
+    const v = item.vehicle || {};
+    const p = item.pricing || {};
+    const ps = item.payment_status || {};
+    
+    const plate = s.plate_arabic || s.plate_english || s.plate_key || 
+                  ((v.plate_letters_ar||'') + (v.plate_numbers_ar||'')) || '—';
+    const entry = s.check_in_at ? new Date(s.check_in_at).toLocaleString() : '—';
+    const exit = s.check_out_at ? new Date(s.check_out_at).toLocaleString() : '—';
+    const duration = formatDuration(p.duration_minutes);
+    const fee = p.total_fee_egp != null ? p.total_fee_egp + ' EGP' : '—';
+    
+    const status = s.status || (s.check_out_at ? 'exited' : 'entered');
+    let stLabel, stClass;
+    if (status === 'exited' || s.check_out_at) { stLabel = 'Left'; stClass = 'status-unregistered'; }
+    else if (status === 'paid') { stLabel = 'Paid'; stClass = 'status-registered'; }
+    else { stLabel = 'Inside'; stClass = 'status-active'; }
+    
+    // Payment badge
+    const notes = (s.notes || '').toLowerCase();
+    const hasCashIntent = notes.includes('intent_cash') || notes.includes('cash');
+    const isGuest = !v.id && !v.plate_letters_ar;
+    
+    let registration = isGuest 
+        ? '<span style="color:var(--accent-red);font-size:0.8rem;font-weight:bold;">Unregistered</span>' 
+        : '<span style="color:var(--accent-green);font-size:0.8rem;font-weight:bold;">Registered</span>';
+    
+    let isCash = isGuest || hasCashIntent;
+    let isPaidVisa = s.payment_confirmed_at != null && !isCash;
+    
+    let payBadge = '—';
+    if (isPaidVisa) payBadge = '<span style="color:var(--accent-blue);">💳 Visa</span>';
+    else if (isCash) payBadge = '<span style="color:var(--accent-green);">💵 Cash</span>';
+
+    return `<tr>
+      <td class="mono">${plate}</td>
+      <td>${registration}</td>
+      <td>${entry}</td><td>${exit}</td>
+      <td>${duration}</td><td>${fee}</td>
+      <td><span class="status ${stClass}">${stLabel}</span></td>
+      <td>${payBadge}</td>
+    </tr>`;
+  }).join('');
+}
+
+async function refreshAll() {
+  try {
+    const [iR, eR, lR, lvR] = await Promise.all([
+      fetch('/admin/api/inside-cars'), fetch('/admin/api/entered-cars'),
+      fetch('/admin/api/left-cars'), fetch('/admin/api/leaving-soon')
+    ]);
+    const rawInside = extractItems(await iR.json());
+    const rawEntered = extractItems(await eR.json());
+    const rawLeft = extractItems(await lR.json());
+    const rawLeaving = extractItems(await lvR.json());
+
+    const leftPlates = new Set(rawLeft.map(item => {
+      const s = item.session || item;
+      return normalizePlate(s.plate_arabic || s.plate_english || s.plate_key);
+    }).filter(Boolean));
+
+    cacheData.inside = rawInside.filter(item => {
+      const s = item.session || item;
+      const plate = normalizePlate(s.plate_arabic || s.plate_english || s.plate_key);
+      return !leftPlates.has(plate);
+    });
+
+    cacheData.entered = rawEntered;
+    cacheData.left = rawLeft;
+    cacheData.leaving = rawLeaving;
+
+    document.getElementById('sInside').textContent = cacheData.inside.length;
+    document.getElementById('sEntered').textContent = cacheData.entered.length;
+    document.getElementById('sLeft').textContent = cacheData.left.length;
+    document.getElementById('sLeaving').textContent = cacheData.leaving.length;
+    renderTable(cacheData[currentTab]);
+  } catch(e) { console.error(e); }
+}
+
+refreshAll();
+setInterval(refreshAll, 2000); // 2 seconds for high-tier real-time feel
+</script>
+{% endblock %}

templates/admin/history.html

@@ -0,0 +1,117 @@
+{% extends "base.html" %}
+{% block title %}Parking History — Ain El Aql{% endblock %}
+{% block body %}
+<div class="app-layout">
+  {% with role='admin', active='history' %}
+  {% include "partials/sidebar.html" %}
+  {% endwith %}
+
+  <main class="main-content">
+    <div class="page-header fade-in flex-between">
+      <div>
+        <h1 class="page-title">Parking History</h1>
+        <p class="page-subtitle">Complete ledger of all parking sessions</p>
+      </div>
+      <button class="btn btn-outline" onclick="loadHistory()"><span>🔄</span> Refresh</button>
+    </div>
+
+    <div class="card fade-in">
+      <div class="table-wrapper" style="max-height:600px;overflow-y:auto;">
+        <table>
+          <thead>
+            <tr>
+              <th>Plate</th>
+              <th>Owner / User</th>
+              <th>Entry Time</th>
+              <th>Exit Time</th>
+              <th>Duration</th>
+              <th>Fee</th>
+              <th>Payment</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody id="histBody">
+            <tr><td colspan="8" class="text-center" style="padding:2rem;color:var(--text-muted);">Loading history...</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  function formatDuration(mins) {
+    if (mins == null) return '—';
+    const h = Math.floor(mins / 60);
+    const m = Math.floor(mins % 60);
+    return h > 0 ? `${h}h ${m}m` : `${m}m`;
+  }
+
+async function loadHistory() {
+  try {
+    const r = await fetch('/admin/api/history');
+    const data = await r.json();
+    // Backend returns { history: [...] } where each item has { session, vehicle, pricing, payment_status, events }
+    let items = Array.isArray(data) ? data : (data.history || data.items || data.data || data.sessions || []);
+    const body = document.getElementById('histBody');
+    if (!items.length) {
+      body.innerHTML = '<tr><td colspan="9" class="text-center" style="padding:2rem;color:var(--text-muted);">No history records</td></tr>';
+      return;
+    }
+    body.innerHTML = items.map(item => {
+      const s = item.session || item;
+      const v = item.vehicle || {};
+      const p = item.pricing || {};
+      const ps = item.payment_status || {};
+      
+      const plate = s.plate_arabic || s.plate_english || s.plate_key ||
+                    ((v.plate_letters_ar||'') + (v.plate_numbers_ar||'')) || '—';
+                    
+      // Attempt to extract username
+      let ownerName = '—';
+      if (v.owner) {
+          ownerName = v.owner.username || v.owner.full_name || v.owner.first_name || '—';
+      } else if (v.owner_id) {
+          ownerName = 'Registered';
+      }
+      
+      const isGuest = !v.id && !v.plate_letters_ar;
+      if (isGuest) {
+          ownerName = '<span class="status status-unregistered" style="font-size:0.7rem;padding:2px 6px;">Unregistered</span>';
+      }
+      
+      const entry = s.check_in_at ? new Date(s.check_in_at).toLocaleString() : '—';
+      const exit = s.check_out_at ? new Date(s.check_out_at).toLocaleString() : '—';
+      const duration = formatDuration(p.duration_minutes);
+      const fee = p.total_fee_egp != null ? p.total_fee_egp + ' EGP' : '—';
+      
+      // Payment status
+      const notes = (s.notes || '').toLowerCase();
+      let payBadge = '⏳ Pending';
+      if (s.payment_confirmed_at) payBadge = '💳 Visa Paid';
+      else if (s.status === 'paid' || ps.is_paid) payBadge = '✅ Paid';
+      else if (notes.includes('intent_cash') || notes.includes('cash_confirmed')) payBadge = '💵 Cash';
+      
+      // Status
+      const status = s.status || (s.check_out_at ? 'exited' : 'entered');
+      let stLabel, stClass;
+      if (status === 'exited' || s.check_out_at) { stLabel = 'Completed'; stClass = 'status-registered'; }
+      else if (status === 'paid') { stLabel = 'Paid (Inside)'; stClass = 'status-registered'; }
+      else { stLabel = 'Active'; stClass = 'status-active'; }
+      
+      return `<tr>
+        <td class="mono">${plate}</td>
+        <td>${ownerName}</td>
+        <td>${entry}</td><td>${exit}</td>
+        <td>${duration}</td><td>${fee}</td><td>${payBadge}</td>
+        <td><span class="status ${stClass}">${stLabel}</span></td>
+      </tr>`;
+    }).join('');
+  } catch(e) { console.error(e); }
+}
+
+loadHistory();
+</script>
+{% endblock %}

templates/admin/users.html

@@ -0,0 +1,76 @@
+{% extends "base.html" %}
+{% block title %}User Management — Ain El Aql{% endblock %}
+
+{% block body %}
+<div class="app-layout">
+  {% with role='admin', active='users' %}
+  {% include "partials/sidebar.html" %}
+  {% endwith %}
+
+  <main class="main-content">
+    <div class="page-header fade-in">
+      <h1 class="page-title">User Management</h1>
+      <p class="page-subtitle">View and manage all registered users.</p>
+    </div>
+
+    <div class="card fade-in">
+      <div class="card-header">
+        <span class="card-title">👥 All Users</span>
+        <button class="btn btn-outline" onclick="loadUsers()">🔄 Refresh</button>
+      </div>
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Username</th>
+              <th>Role</th>
+              <th>Phone</th>
+              <th>Email</th>
+            </tr>
+          </thead>
+          <tbody id="usersBody">
+            <tr><td colspan="5" class="text-center" style="padding:2rem;color:var(--text-muted);">Loading users...</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+async function loadUsers() {
+  const body = document.getElementById('usersBody');
+  try {
+    const res = await fetch('/admin/api/users');
+    const data = await res.json();
+    const users = Array.isArray(data) ? data : (data.users || data.data || []);
+    
+    if (!users.length) {
+      body.innerHTML = '<tr><td colspan="5" class="text-center" style="padding:2rem;color:var(--text-muted);">No users found.</td></tr>';
+      return;
+    }
+    
+    body.innerHTML = users.map(u => {
+      const name = u.full_name || (u.first_name + ' ' + (u.last_name || '')) || '—';
+      const role = u.role || 'user';
+      const roleClass = role === 'admin' ? 'status-registered' : (role === 'security' ? 'status-active' : 'status-unregistered');
+      return `<tr>
+        <td style="font-weight:bold;color:white;">${name}</td>
+        <td class="mono">${u.username || '—'}</td>
+        <td><span class="status ${roleClass}">${role.toUpperCase()}</span></td>
+        <td>${u.phone_number || '—'}</td>
+        <td>${u.email || '—'}</td>
+      </tr>`;
+    }).join('');
+  } catch (err) {
+    console.error(err);
+    body.innerHTML = '<tr><td colspan="5" class="text-center" style="padding:2rem;color:var(--error);">Failed to load users.</td></tr>';
+  }
+}
+
+loadUsers();
+</script>
+{% endblock %}

templates/admin/vehicles.html

@@ -0,0 +1,175 @@
+{% extends "base.html" %}
+{% block title %}Vehicles — Ain El Aql{% endblock %}
+{% block body %}
+<div class="app-layout">
+  {% with role='admin', active='vehicles' %}
+  {% include "partials/sidebar.html" %}
+  {% endwith %}
+
+  <main class="main-content">
+    <div class="page-header fade-in flex-between">
+      <div>
+        <h1 class="page-title">Vehicle Management</h1>
+        <p class="page-subtitle">All vehicles currently in the system</p>
+      </div>
+      <button class="btn btn-outline" onclick="loadVehicles()"><span>🔄</span> Refresh</button>
+    </div>
+
+    <div class="stats-grid fade-in">
+      <div class="stat-card blue">
+        <div class="stat-label">Total Vehicles</div>
+        <div class="stat-value blue" id="statTotal">—</div>
+      </div>
+      <div class="stat-card green">
+        <div class="stat-label">Currently Inside</div>
+        <div class="stat-value green" id="statActive">—</div>
+      </div>
+      <div class="stat-card purple">
+        <div class="stat-label">Registered</div>
+        <div class="stat-value purple" id="statRegistered">—</div>
+      </div>
+      <div class="stat-card red">
+        <div class="stat-label">Unregistered</div>
+        <div class="stat-value red" id="statUnregistered">—</div>
+      </div>
+    </div>
+
+    <div class="card fade-in">
+      <div class="table-wrapper" style="max-height:500px;overflow-y:auto;">
+        <table>
+          <thead>
+            <tr>
+              <th>Plate (AR)</th>
+              <th>Owner / User</th>
+              <th>Status</th>
+              <th>Duration</th>
+              <th>Fee</th>
+              <th>Payment</th>
+            </tr>
+          </thead>
+          <tbody id="vehBody">
+            <tr><td colspan="6" class="text-center" style="padding:2rem;color:var(--text-muted);">Loading...</td></tr></tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+async function loadVehicles() {
+  try {
+    // Use inside-cars feed + history to show all known vehicles
+    const [insideR, histR] = await Promise.all([
+      fetch('/admin/api/inside-cars'),
+      fetch('/admin/api/history')
+    ]);
+    
+    const insideData = await insideR.json();
+    const histData = await histR.json();
+    
+    const insideItems = insideData.items || insideData.data || [];
+    const histItems = histData.history || histData.items || histData.data || [];
+    
+    // Deduplicate by session id
+    const seen = new Set();
+    const allItems = [];
+    
+    // Inside cars first (active)
+    for (const item of insideItems) {
+      const s = item.session || item;
+      const sid = s.id || '';
+      if (sid && !seen.has(sid)) { seen.add(sid); allItems.push({...item, _isInside: true}); }
+    }
+    
+    // Then history (completed)
+    for (const item of histItems) {
+      const s = item.session || item;
+      const sid = s.id || '';
+      if (sid && !seen.has(sid)) { seen.add(sid); allItems.push({...item, _isInside: false}); }
+    }
+    
+    // Update stats
+    // Update stats
+    const unregistered = allItems.filter(i => {
+      const v = i.vehicle || {};
+      return !v.id && !v.plate_letters_ar;
+    }).length;
+    const registered = allItems.length - unregistered;
+    const insideCount = allItems.filter(i => i._isInside).length;
+    
+    document.getElementById('statTotal').textContent = allItems.length;
+    document.getElementById('statActive').textContent = insideCount;
+    document.getElementById('statRegistered').textContent = registered;
+    document.getElementById('statUnregistered').textContent = unregistered;
+    
+    renderVehicles(allItems);
+  } catch(e) { console.error(e); }
+}
+
+function formatDuration(mins) {
+  if (mins == null) return '—';
+  const h = Math.floor(mins / 60);
+  const m = Math.floor(mins % 60);
+  return h > 0 ? `${h}h ${m}m` : `${m}m`;
+}
+
+function renderVehicles(items) {
+  const body = document.getElementById('vehBody');
+  if (!items || !items.length) {
+    body.innerHTML = '<tr><td colspan="6" class="text-center" style="padding:2rem;color:var(--text-muted);">No vehicles found</td></tr>';
+    return;
+  }
+  body.innerHTML = items.map(item => {
+    const s = item.session || item;
+    const v = item.vehicle || {};
+    const p = item.pricing || {};
+    
+    const plateAr = s.plate_arabic || ((v.plate_letters_ar||'') + ' ' + (v.plate_numbers_ar||'')).trim() || '—';
+    
+    // Attempt to extract username from backend's profile if available (depends on API return shape)
+    // Sometimes backend attaches `owner` to the vehicle object
+    let ownerName = '—';
+    if (v.owner) {
+        ownerName = v.owner.username || v.owner.full_name || v.owner.first_name || '—';
+    } else if (v.owner_id) {
+        ownerName = 'Registered';
+    }
+    
+    const isGuest = !v.id && !v.plate_letters_ar;
+    if (isGuest) {
+        ownerName = '<span class="status status-unregistered" style="font-size:0.7rem;padding:2px 6px;">Unregistered</span>';
+    }
+    
+    const isInside = item._isInside;
+    const status = isInside ? 'Inside' : 'Left';
+    const stClass = isInside ? 'status-active' : 'status-unregistered';
+    
+    const duration = formatDuration(p.duration_minutes);
+    const fee = p.total_fee_egp != null ? p.total_fee_egp + ' EGP' : '—';
+    
+    // Payment badge
+    const notes = (s.notes || '').toLowerCase();
+    const hasCashIntent = notes.includes('intent_cash') || notes.includes('cash');
+    let isCash = isGuest || hasCashIntent;
+    let isPaidVisa = s.payment_confirmed_at != null && !isCash;
+    
+    let payBadge = '—';
+    if (isPaidVisa) payBadge = '<span style="color:var(--accent-blue);">💳 Visa</span>';
+    else if (isCash) payBadge = '<span style="color:var(--accent-green);">💵 Cash</span>';
+    else if (isInside) payBadge = '⏳ Pending';
+    
+    return `<tr>
+      <td class="mono">${plateAr}</td>
+      <td>${ownerName}</td>
+      <td><span class="status ${stClass}">${status}</span></td>
+      <td>${duration}</td><td>${fee}</td>
+      <td>${payBadge}</td>
+    </tr>`;
+  }).join('');
+}
+
+loadVehicles();
+</script>
+{% endblock %}

templates/auth/login.html

@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+{% block title %}Login — Ain El Aql{% endblock %}
+{% block body %}
+<div class="auth-wrapper">
+  <div class="auth-card fade-in">
+    <div class="auth-logo">
+      <div class="auth-logo-icon">
+        <img src="{{ url_for('static', filename='assets/cctv_logo.png') }}" alt="Logo" style="width:100%; height:100%; object-fit:contain;">
+      </div>
+      <h1>Ain El Aql</h1>
+      <p>EALPR Security Dashboard</p>
+    </div>
+
+    {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+    {% for cat, msg in messages %}
+    <div class="alert alert-{{ cat }}">{{ msg }}</div>
+    {% endfor %}
+    {% endif %}
+    {% endwith %}
+
+    <form method="POST" action="{{ url_for('auth.login_page') }}" id="loginForm">
+      <div class="form-group">
+        <label class="form-label" for="identifier">Username / Email / Phone</label>
+        <input type="text" class="form-input" id="identifier" name="identifier"
+               placeholder="Enter your identifier" required autocomplete="username">
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="password">Password</label>
+        <input type="password" class="form-input" id="password" name="password"
+               placeholder="Enter your password" required autocomplete="current-password">
+      </div>
+      <button type="submit" class="btn btn-primary w-full" id="loginBtn">
+        <span>🔐</span> Sign In
+      </button>
+    </form>
+
+    <div class="auth-footer">
+      Want to work with Ain El Aql? <a href="{{ url_for('auth.register_page') }}">Join Us</a>
+    </div>
+  </div>
+</div>
+{% endblock %}

templates/auth/register.html

@@ -0,0 +1,70 @@
+{% extends "base.html" %}
+{% block title %}Register — Ain El Aql{% endblock %}
+{% block body %}
+<div class="auth-wrapper">
+  <div class="auth-card fade-in">
+    <div class="auth-logo">
+      <div class="auth-logo-icon">
+        <img src="{{ url_for('static', filename='assets/cctv_logo.png') }}" alt="Logo" style="width:100%; height:100%; object-fit:contain;">
+      </div>
+      <h1>Create Account</h1>
+      <p>Join the Ain El Aql platform</p>
+    </div>
+
+    {% with messages = get_flashed_messages(with_categories=true) %}
+    {% if messages %}
+    {% for cat, msg in messages %}
+    <div class="alert alert-{{ cat }}">{{ msg }}</div>
+    {% endfor %}
+    {% endif %}
+    {% endwith %}
+
+    <form method="POST" action="{{ url_for('auth.register_page') }}">
+      <div class="grid-2">
+        <div class="form-group">
+          <label class="form-label" for="first_name">First Name</label>
+          <input type="text" class="form-input" id="first_name" name="first_name" placeholder="First name">
+        </div>
+        <div class="form-group">
+          <label class="form-label" for="last_name">Last Name</label>
+          <input type="text" class="form-input" id="last_name" name="last_name" placeholder="Last name">
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="username">Username *</label>
+        <input type="text" class="form-input" id="username" name="username" placeholder="Choose a username" required>
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="phone">Phone *</label>
+        <input type="tel" class="form-input" id="phone" name="phone" placeholder="+20 xxx xxx xxxx" required>
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="reg_email">Email *</label>
+        <input type="email" class="form-input" id="reg_email" name="email" placeholder="email@example.com" required>
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="reg_password">Password *</label>
+        <input type="password" class="form-input" id="reg_password" name="password" placeholder="Min 6 characters" required>
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="nid">National ID (NID) *</label>
+        <input type="text" class="form-input" id="nid" name="nid" placeholder="14-digit National ID" required>
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="role">Select Role *</label>
+        <select class="form-select" id="role" name="role" required>
+          <option value="security">Security Guard</option>
+          <option value="admin">Administrator</option>
+        </select>
+      </div>
+      <button type="submit" class="btn btn-primary w-full">
+        <span>✨</span> Create Account
+      </button>
+    </form>
+
+    <div class="auth-footer">
+      Already have an account? <a href="{{ url_for('auth.login_page') }}">Sign In</a>
+    </div>
+  </div>
+</div>
+{% endblock %}

templates/base.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Ain El Aql — EALPR Parking Security & Admin Dashboard">
+  <title>{% block title %}Ain El Aql{% endblock %}</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+  <link rel="icon" href="{{ url_for('static', filename='assets/cctv_logo.png') }}">
+  {% block head %}{% endblock %}
+</head>
+<body>
+  {% block body %}{% endblock %}
+  {% block scripts %}{% endblock %}
+</body>
+</html>

templates/partials/sidebar.html

@@ -0,0 +1,50 @@
+<!-- Sidebar partial — included in dashboard layouts -->
+<aside class="sidebar">
+  <div class="sidebar-header">
+    <div class="sidebar-logo">
+      <img src="{{ url_for('static', filename='assets/cctv_logo.png') }}" alt="Logo" style="width:100%; height:100%; object-fit:contain;">
+    </div>
+    <div>
+      <div class="sidebar-title">Ain El Aql</div>
+      <div class="sidebar-subtitle">{{ role|upper }} Panel</div>
+    </div>
+  </div>
+
+  <nav class="sidebar-nav">
+    {% if role == 'security' %}
+    <a href="{{ url_for('security.dashboard') }}" class="nav-link {% if active == 'dashboard' %}active{% endif %}">
+      <span class="icon">📊</span> Dashboard
+    </a>
+
+    {% elif role == 'admin' %}
+    <a href="{{ url_for('admin.dashboard') }}" class="nav-link {% if active == 'dashboard' %}active{% endif %}">
+      <span class="icon">📊</span> Dashboard
+    </a>
+    <a href="{{ url_for('admin.garage') }}" class="nav-link {% if active == 'garage' %}active{% endif %}">
+      <span class="icon">🏗️</span> Garage Status
+    </a>
+    <a href="{{ url_for('admin.users') }}" class="nav-link {% if active == 'users' %}active{% endif %}">
+      <span class="icon">👥</span> Users
+    </a>
+    <a href="{{ url_for('admin.vehicles') }}" class="nav-link {% if active == 'vehicles' %}active{% endif %}">
+      <span class="icon">🚗</span> Vehicles
+    </a>
+    <a href="{{ url_for('admin.history') }}" class="nav-link {% if active == 'history' %}active{% endif %}">
+      <span class="icon">📋</span> History
+    </a>
+    {% endif %}
+  </nav>
+
+  <div class="sidebar-footer">
+    <div class="user-badge">
+      <div class="user-avatar">{{ (user.first_name or user.username or '?')[0]|upper }}</div>
+      <div>
+        <div class="user-name">{{ user.first_name or user.username or 'Staff' }}</div>
+        <div class="user-role">{{ role }}</div>
+      </div>
+    </div>
+    <a href="{{ url_for('auth.logout') }}" class="nav-link mt-2" style="color:var(--accent-red);">
+      <span class="icon">🚪</span> Sign Out
+    </a>
+  </div>
+</aside>