diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..921d2a4
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,24 @@
+POSTGRES_DB=cymelle
+POSTGRES_USER=cymelle
+POSTGRES_PASSWORD=cymelle
+POSTGRES_PORT=5432
+
+API_PORT=8080
+WEB_PORT=3000
+VITE_API_BASE_URL=http://localhost:8080/api
+APP_CORS_ALLOWED_ORIGINS=http://localhost:3000
+SEED_DATA=true
+
+LOW_STOCK_THRESHOLD=10
+
+FARE_BASE_FARE=100.00
+FARE_PER_KM_RATE=50.00
+FARE_MINIMUM_FARE=150.00
+FARE_DEFAULT_SURGE_MULTIPLIER=1.0
+FARE_CURRENCY=KES
+
+PAYSTACK_SECRET_KEY=
+PAYSTACK_PUBLIC_KEY=
+PAYSTACK_CALLBACK_URL=http://localhost:3000/payments/paystack/callback
+PAYSTACK_WEBHOOK_SECRET=
+PAYSTACK_API_BASE_URL=https://api.paystack.co
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index d690f0f..b6e414a 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md
new file mode 100644
index 0000000..3960601
--- /dev/null
+++ b/DEPLOYMENT.md
@@ -0,0 +1,55 @@
+# Render deployment
+
+This repository is configured for two Docker-backed Render web services:
+
+- `cymelle-api`: Spring Boot API
+- `cymelle-web`: TanStack/Nitro frontend
+
+No PostgreSQL container or Render database is created. Use your Neon database connection string.
+
+## Render setup
+
+1. Create a new Blueprint on Render using `render.yaml`.
+2. When Render asks for `DATABASE_URL`, paste your Neon pooled PostgreSQL connection string.
+   - A Neon URL like `postgresql://user:password@host/db?sslmode=require` is accepted.
+   - A Neon JDBC URL like `jdbc:postgresql://host/db?user=...&password=...&sslmode=require` is also accepted.
+3. Deploy both services.
+4. If Render assigns different service URLs than the defaults in `render.yaml`, update:
+   - `cymelle-api` -> `APP_CORS_ALLOWED_ORIGINS` to the frontend URL.
+   - `cymelle-web` -> `VITE_API_BASE_URL` to the API URL plus `/api`.
+5. Configure Paystack on `cymelle-api`:
+   - `PAYSTACK_SECRET_KEY`: your Paystack secret key.
+   - `PAYSTACK_PUBLIC_KEY`: your Paystack public key, kept for operational visibility.
+   - `PAYSTACK_CALLBACK_URL`: frontend callback URL, for example `https://cymelle-web.onrender.com/payments/paystack/callback`.
+   - `PAYSTACK_WEBHOOK_SECRET`: optional override for webhook HMAC verification; when omitted, the secret key is used.
+
+## Local Docker builds
+
+Build the API:
+
+```sh
+docker build -t cymelle-api ./orders-backend
+```
+
+Run the API with Neon:
+
+```sh
+docker run --rm -p 8080:8080 \
+  -e DATABASE_URL='postgresql://user:password@host/db?sslmode=require' \
+  -e APP_CORS_ALLOWED_ORIGINS='http://localhost:3000' \
+  cymelle-api
+```
+
+Build the frontend:
+
+```sh
+docker build -t cymelle-web \
+  --build-arg VITE_API_BASE_URL=http://localhost:8080/api \
+  ./orders-frontend
+```
+
+Run the frontend:
+
+```sh
+docker run --rm -p 3000:3000 cymelle-web
+```
diff --git a/README.md b/README.md
index 89931ee..d97a87f 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,37 @@
-# readme
+# Cymelle
+
+## Local Docker Compose
+
+Run the full local development stack with Postgres 18, Spring Boot API, and TanStack/Vite web app:
+
+```sh
+cp .env.example .env
+docker compose up
+```
+
+Services:
+
+- Web: `http://localhost:3000`
+- API: `http://localhost:8080/api`
+- Swagger UI: `http://localhost:8080/swagger-ui.html`
+- Postgres: `localhost:5432`, database/user/password `cymelle`
+
+Paystack checkout requires test keys in `.env`:
+
+```sh
+PAYSTACK_SECRET_KEY=sk_test_...
+PAYSTACK_PUBLIC_KEY=pk_test_...
+PAYSTACK_CALLBACK_URL=http://localhost:3000/payments/paystack/callback
+```
+
+Useful commands:
+
+```sh
+docker compose logs -f api
+docker compose logs -f web
+docker compose restart api
+docker compose down
+docker compose down -v
+```
+
+The web service runs Vite from mounted source, so frontend edits reload without rebuilding. Restart `api` after backend code changes. Use `docker compose down -v` only when you want to delete the local Postgres and dependency cache volumes.
diff --git a/compose.yml b/compose.yml
new file mode 100644
index 0000000..4145764
--- /dev/null
+++ b/compose.yml
@@ -0,0 +1,74 @@
+name: cymelle
+
+services:
+  db:
+    image: postgres:18-alpine
+    environment:
+      POSTGRES_DB: ${POSTGRES_DB:-cymelle}
+      POSTGRES_USER: ${POSTGRES_USER:-cymelle}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-cymelle}
+    ports:
+      - "${POSTGRES_PORT:-5432}:5432"
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    healthcheck:
+      test:
+        [
+          "CMD-SHELL",
+          "pg_isready -U ${POSTGRES_USER:-cymelle} -d ${POSTGRES_DB:-cymelle}",
+        ]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+  api:
+    image: eclipse-temurin:17-jdk-jammy
+    working_dir: /workspace
+    command: ./gradlew --no-daemon bootRun
+    environment:
+      PORT: 8080
+      SPRING_DATASOURCE_URL: jdbc:postgresql://db:5432/${POSTGRES_DB:-cymelle}
+      SPRING_DATASOURCE_USERNAME: ${POSTGRES_USER:-cymelle}
+      SPRING_DATASOURCE_PASSWORD: ${POSTGRES_PASSWORD:-cymelle}
+      APP_CORS_ALLOWED_ORIGINS: ${APP_CORS_ALLOWED_ORIGINS:-http://localhost:3000}
+      SEED_DATA: ${SEED_DATA:-true}
+      LOW_STOCK_THRESHOLD: ${LOW_STOCK_THRESHOLD:-10}
+      FARE_BASE_FARE: ${FARE_BASE_FARE:-100.00}
+      FARE_PER_KM_RATE: ${FARE_PER_KM_RATE:-50.00}
+      FARE_MINIMUM_FARE: ${FARE_MINIMUM_FARE:-150.00}
+      FARE_DEFAULT_SURGE_MULTIPLIER: ${FARE_DEFAULT_SURGE_MULTIPLIER:-1.0}
+      FARE_CURRENCY: ${FARE_CURRENCY:-KES}
+      PAYSTACK_SECRET_KEY: ${PAYSTACK_SECRET_KEY:-}
+      PAYSTACK_PUBLIC_KEY: ${PAYSTACK_PUBLIC_KEY:-}
+      PAYSTACK_CALLBACK_URL: ${PAYSTACK_CALLBACK_URL:-http://localhost:3000/payments/paystack/callback}
+      PAYSTACK_WEBHOOK_SECRET: ${PAYSTACK_WEBHOOK_SECRET:-}
+      PAYSTACK_API_BASE_URL: ${PAYSTACK_API_BASE_URL:-https://api.paystack.co}
+    ports:
+      - "${API_PORT:-8080}:8080"
+    volumes:
+      - ./orders-backend:/workspace
+      - gradle-cache:/root/.gradle
+    depends_on:
+      db:
+        condition: service_healthy
+
+  web:
+    image: node:24-bookworm-slim
+    working_dir: /app
+    command: sh -c "corepack enable && pnpm install --frozen-lockfile && pnpm dev --host 0.0.0.0"
+    environment:
+      HOST: 0.0.0.0
+      PORT: 3000
+      VITE_API_BASE_URL: ${VITE_API_BASE_URL:-http://localhost:8080/api}
+    ports:
+      - "${WEB_PORT:-3000}:3000"
+    volumes:
+      - ./orders-frontend:/app
+      - frontend-node-modules:/app/node_modules
+    depends_on:
+      - api
+
+volumes:
+  postgres-data:
+  gradle-cache:
+  frontend-node-modules:
diff --git a/orders-backend/.env.example b/orders-backend/.env.example
index f92c178..852f522 100644
--- a/orders-backend/.env.example
+++ b/orders-backend/.env.example
@@ -10,4 +10,10 @@ FARE_MINIMUM_FARE=150.00
 FARE_DEFAULT_SURGE_MULTIPLIER=1.0
 FARE_CURRENCY=KES
 
-SEED_DATA=true
\ No newline at end of file
+PAYSTACK_SECRET_KEY=
+PAYSTACK_PUBLIC_KEY=
+PAYSTACK_CALLBACK_URL=http://localhost:3000/payments/paystack/callback
+PAYSTACK_WEBHOOK_SECRET=
+PAYSTACK_API_BASE_URL=https://api.paystack.co
+
+SEED_DATA=true
diff --git a/orders-backend/src/main/java/com/andwati/orders/OrdersBackendApplication.java b/orders-backend/src/main/java/com/andwati/orders/OrdersBackendApplication.java
index 47a67e0..d45276e 100644
--- a/orders-backend/src/main/java/com/andwati/orders/OrdersBackendApplication.java
+++ b/orders-backend/src/main/java/com/andwati/orders/OrdersBackendApplication.java
@@ -2,6 +2,7 @@ package com.andwati.orders;
 
 import com.andwati.orders.config.FareProperties;
 import com.andwati.orders.config.InventoryProperties;
+import com.andwati.orders.config.PaystackProperties;
 import io.github.cdimascio.dotenv.Dotenv;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
@@ -10,7 +11,8 @@ import org.springframework.boot.context.properties.EnableConfigurationProperties
 @SpringBootApplication
 @EnableConfigurationProperties({
         FareProperties.class,
-        InventoryProperties.class
+        InventoryProperties.class,
+        PaystackProperties.class
 })
 public class OrdersBackendApplication {
 
diff --git a/orders-backend/src/main/java/com/andwati/orders/config/PaystackProperties.java b/orders-backend/src/main/java/com/andwati/orders/config/PaystackProperties.java
new file mode 100644
index 0000000..9524042
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/config/PaystackProperties.java
@@ -0,0 +1,32 @@
+package com.andwati.orders.config;
+
+import org.springframework.boot.context.properties.ConfigurationProperties;
+
+@ConfigurationProperties(prefix = "paystack")
+public record PaystackProperties(
+        String secretKey,
+        String publicKey,
+        String callbackUrl,
+        String webhookSecret,
+        String apiBaseUrl
+) {
+    public String resolvedApiBaseUrl() {
+        return hasText(apiBaseUrl) ? apiBaseUrl : "https://api.paystack.co";
+    }
+
+    public String resolvedWebhookSecret() {
+        return hasText(webhookSecret) ? webhookSecret : secretKey;
+    }
+
+    public boolean hasSecretKey() {
+        return hasText(secretKey);
+    }
+
+    public boolean hasCallbackUrl() {
+        return hasText(callbackUrl);
+    }
+
+    private boolean hasText(String value) {
+        return value != null && !value.isBlank();
+    }
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/config/SecurityConfig.java b/orders-backend/src/main/java/com/andwati/orders/config/SecurityConfig.java
index bfcda59..d475dfb 100644
--- a/orders-backend/src/main/java/com/andwati/orders/config/SecurityConfig.java
+++ b/orders-backend/src/main/java/com/andwati/orders/config/SecurityConfig.java
@@ -14,6 +14,7 @@ import org.springframework.security.config.annotation.web.configurers.AbstractHt
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
 import org.springframework.security.web.csrf.CookieCsrfTokenRepository;
 import org.springframework.security.web.csrf.CsrfTokenRequestAttributeHandler;
 
@@ -31,6 +32,7 @@ public class SecurityConfig {
                 .csrf(csrf -> csrf
                         .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
                         .csrfTokenRequestHandler(csrfRequestHandler)
+                        .ignoringRequestMatchers(new AntPathRequestMatcher("/api/payments/paystack/webhook", "POST"))
                 )
                 .formLogin(AbstractHttpConfigurer::disable)
                 .httpBasic(AbstractHttpConfigurer::disable)
@@ -40,6 +42,8 @@ public class SecurityConfig {
                         .requestMatchers(HttpMethod.POST, "/api/auth/login", "/api/auth/register").permitAll()
                         .requestMatchers("/api-docs/**", "/swagger-ui.html", "/swagger-ui/**").permitAll()
                         .requestMatchers(HttpMethod.GET, "/api/products/**").permitAll()
+                        .requestMatchers(HttpMethod.POST, "/api/checkout/quote").permitAll()
+                        .requestMatchers(HttpMethod.POST, "/api/payments/paystack/webhook").permitAll()
                         .requestMatchers(HttpMethod.POST, "/api/products/**").hasRole("ADMIN")
                         .requestMatchers(HttpMethod.PUT, "/api/products/**").hasRole("ADMIN")
                         .requestMatchers(HttpMethod.PATCH, "/api/products/**").hasRole("ADMIN")
diff --git a/orders-backend/src/main/java/com/andwati/orders/controller/CheckoutController.java b/orders-backend/src/main/java/com/andwati/orders/controller/CheckoutController.java
new file mode 100644
index 0000000..f9798a5
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/controller/CheckoutController.java
@@ -0,0 +1,30 @@
+package com.andwati.orders.controller;
+
+import com.andwati.orders.dto.request.CheckoutQuoteRequest;
+import com.andwati.orders.dto.response.CheckoutQuoteResponse;
+import com.andwati.orders.services.PaymentService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.validation.Valid;
+import org.springframework.web.bind.annotation.*;
+
+@Tag(name = "Checkout", description = "Quote ecommerce checkout totals")
+@RestController
+@RequestMapping("/api/checkout")
+public class CheckoutController {
+
+    private final PaymentService paymentService;
+
+    public CheckoutController(PaymentService paymentService) {
+        this.paymentService = paymentService;
+    }
+
+    @Operation(
+            summary = "Quote checkout totals",
+            description = "Calculates product subtotal, optional delivery ride fare, and grand total from current backend data."
+    )
+    @PostMapping("/quote")
+    public CheckoutQuoteResponse quote(@Valid @RequestBody CheckoutQuoteRequest request) {
+        return paymentService.quote(request);
+    }
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/controller/PaystackPaymentController.java b/orders-backend/src/main/java/com/andwati/orders/controller/PaystackPaymentController.java
new file mode 100644
index 0000000..d544f75
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/controller/PaystackPaymentController.java
@@ -0,0 +1,51 @@
+package com.andwati.orders.controller;
+
+import com.andwati.orders.dto.request.PaystackInitializeRequest;
+import com.andwati.orders.dto.response.PaystackInitializeResponse;
+import com.andwati.orders.dto.response.PaystackVerifyResponse;
+import com.andwati.orders.services.PaymentService;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import jakarta.validation.Valid;
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.*;
+
+@Tag(name = "Paystack Payments", description = "Initialize and verify Paystack checkout payments")
+@RestController
+@RequestMapping("/api/payments/paystack")
+public class PaystackPaymentController {
+
+    private final PaymentService paymentService;
+
+    public PaystackPaymentController(PaymentService paymentService) {
+        this.paymentService = paymentService;
+    }
+
+    @Operation(
+            summary = "Initialize Paystack checkout",
+            description = "Creates pending order, optional ride, payment record, and returns a Paystack authorization URL."
+    )
+    @PostMapping("/initialize")
+    public PaystackInitializeResponse initialize(@Valid @RequestBody PaystackInitializeRequest request) {
+        return paymentService.initialize(request);
+    }
+
+    @Operation(
+            summary = "Verify Paystack payment",
+            description = "Verifies the Paystack transaction and marks the payment paid only when reference, amount, and currency match."
+    )
+    @PostMapping("/verify/{reference}")
+    public PaystackVerifyResponse verify(@PathVariable String reference) {
+        return paymentService.verify(reference);
+    }
+
+    @Operation(summary = "Receive Paystack webhook events")
+    @PostMapping("/webhook")
+    @ResponseStatus(HttpStatus.NO_CONTENT)
+    public void webhook(
+            @RequestBody String body,
+            @RequestHeader(name = "x-paystack-signature", required = false) String signature
+    ) {
+        paymentService.handleWebhook(body, signature);
+    }
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/dto/request/CheckoutQuoteRequest.java b/orders-backend/src/main/java/com/andwati/orders/dto/request/CheckoutQuoteRequest.java
new file mode 100644
index 0000000..6b8980e
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/dto/request/CheckoutQuoteRequest.java
@@ -0,0 +1,16 @@
+package com.andwati.orders.dto.request;
+
+import jakarta.validation.Valid;
+import jakarta.validation.constraints.Size;
+
+import java.util.List;
+
+public record CheckoutQuoteRequest(
+        @Valid
+        @Size(min = 1, message = "items must contain at least one item")
+        List<CreateOrderItemRequest> items,
+
+        @Valid
+        CreateOrderRideRequest deliveryRide
+) {
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/dto/request/PaystackInitializeRequest.java b/orders-backend/src/main/java/com/andwati/orders/dto/request/PaystackInitializeRequest.java
new file mode 100644
index 0000000..bdec36c
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/dto/request/PaystackInitializeRequest.java
@@ -0,0 +1,19 @@
+package com.andwati.orders.dto.request;
+
+import jakarta.validation.Valid;
+import jakarta.validation.constraints.Size;
+
+import java.util.List;
+
+public record PaystackInitializeRequest(
+        @Valid
+        @Size(min = 1, message = "items must contain at least one item")
+        List<CreateOrderItemRequest> items,
+
+        @Valid
+        CreateOrderRideRequest deliveryRide
+) {
+    public CreateOrderRequest toCreateOrderRequest() {
+        return new CreateOrderRequest(items, deliveryRide);
+    }
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/dto/response/CheckoutQuoteResponse.java b/orders-backend/src/main/java/com/andwati/orders/dto/response/CheckoutQuoteResponse.java
new file mode 100644
index 0000000..439a686
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/dto/response/CheckoutQuoteResponse.java
@@ -0,0 +1,13 @@
+package com.andwati.orders.dto.response;
+
+import java.math.BigDecimal;
+import java.time.Instant;
+
+public record CheckoutQuoteResponse(
+        BigDecimal productSubtotal,
+        BigDecimal rideFare,
+        BigDecimal grandTotal,
+        String currency,
+        Instant expiresAt
+) {
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/dto/response/PaystackInitializeResponse.java b/orders-backend/src/main/java/com/andwati/orders/dto/response/PaystackInitializeResponse.java
new file mode 100644
index 0000000..b571d35
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/dto/response/PaystackInitializeResponse.java
@@ -0,0 +1,18 @@
+package com.andwati.orders.dto.response;
+
+import com.andwati.orders.model.PaymentStatus;
+
+import java.math.BigDecimal;
+import java.util.UUID;
+
+public record PaystackInitializeResponse(
+        String authorizationUrl,
+        String accessCode,
+        String reference,
+        UUID orderId,
+        UUID rideId,
+        BigDecimal amount,
+        String currency,
+        PaymentStatus status
+) {
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/dto/response/PaystackVerifyResponse.java b/orders-backend/src/main/java/com/andwati/orders/dto/response/PaystackVerifyResponse.java
new file mode 100644
index 0000000..d1ddebc
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/dto/response/PaystackVerifyResponse.java
@@ -0,0 +1,17 @@
+package com.andwati.orders.dto.response;
+
+import com.andwati.orders.model.PaymentStatus;
+
+import java.math.BigDecimal;
+import java.util.UUID;
+
+public record PaystackVerifyResponse(
+        String reference,
+        PaymentStatus status,
+        UUID orderId,
+        UUID rideId,
+        BigDecimal amount,
+        String currency,
+        String message
+) {
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/model/Payment.java b/orders-backend/src/main/java/com/andwati/orders/model/Payment.java
new file mode 100644
index 0000000..d746f05
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/model/Payment.java
@@ -0,0 +1,250 @@
+package com.andwati.orders.model;
+
+import jakarta.persistence.*;
+
+import java.math.BigDecimal;
+import java.time.Instant;
+import java.util.UUID;
+
+@Entity
+@Table(
+        name = "payments",
+        uniqueConstraints = {
+                @UniqueConstraint(name = "uk_payments_reference", columnNames = "reference")
+        }
+)
+public class Payment {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.UUID)
+    private UUID id;
+
+    @OneToOne(fetch = FetchType.LAZY, optional = false)
+    @JoinColumn(name = "order_id", nullable = false)
+    private Order order;
+
+    @OneToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "ride_id")
+    private Ride ride;
+
+    @Column(nullable = false, length = 80)
+    private String reference;
+
+    @Column(nullable = false, precision = 12, scale = 2)
+    private BigDecimal productSubtotal;
+
+    @Column(nullable = false, precision = 12, scale = 2)
+    private BigDecimal rideFare;
+
+    @Column(nullable = false, precision = 12, scale = 2)
+    private BigDecimal amountMajor;
+
+    @Column(nullable = false)
+    private long amountSubunits;
+
+    @Column(nullable = false, length = 3)
+    private String currency;
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false, length = 30)
+    private PaymentStatus status = PaymentStatus.PENDING;
+
+    @Column(length = 512)
+    private String authorizationUrl;
+
+    @Column(length = 120)
+    private String accessCode;
+
+    @Lob
+    private String rawVerificationPayload;
+
+    @Column(nullable = false)
+    private Instant createdAt;
+
+    private Instant paidAt;
+
+    private Instant updatedAt;
+
+    @PrePersist
+    public void prePersist() {
+        Instant now = Instant.now();
+        if (createdAt == null) {
+            createdAt = now;
+        }
+        if (updatedAt == null) {
+            updatedAt = now;
+        }
+        if (status == null) {
+            status = PaymentStatus.PENDING;
+        }
+    }
+
+    @PreUpdate
+    public void preUpdate() {
+        updatedAt = Instant.now();
+    }
+
+    public void markPaid(String rawPayload) {
+        if (status == PaymentStatus.PAID) {
+            this.rawVerificationPayload = rawPayload;
+            return;
+        }
+
+        this.status = PaymentStatus.PAID;
+        this.paidAt = Instant.now();
+        this.rawVerificationPayload = rawPayload;
+    }
+
+    public void markFailed(PaymentStatus status, String rawPayload) {
+        if (this.status == PaymentStatus.PAID) {
+            return;
+        }
+
+        this.status = status;
+        this.rawVerificationPayload = rawPayload;
+    }
+
+    public UUID getId() {
+        return id;
+    }
+
+    public Payment setId(UUID id) {
+        this.id = id;
+        return this;
+    }
+
+    public Order getOrder() {
+        return order;
+    }
+
+    public Payment setOrder(Order order) {
+        this.order = order;
+        return this;
+    }
+
+    public Ride getRide() {
+        return ride;
+    }
+
+    public Payment setRide(Ride ride) {
+        this.ride = ride;
+        return this;
+    }
+
+    public String getReference() {
+        return reference;
+    }
+
+    public Payment setReference(String reference) {
+        this.reference = reference;
+        return this;
+    }
+
+    public BigDecimal getProductSubtotal() {
+        return productSubtotal;
+    }
+
+    public Payment setProductSubtotal(BigDecimal productSubtotal) {
+        this.productSubtotal = productSubtotal;
+        return this;
+    }
+
+    public BigDecimal getRideFare() {
+        return rideFare;
+    }
+
+    public Payment setRideFare(BigDecimal rideFare) {
+        this.rideFare = rideFare;
+        return this;
+    }
+
+    public BigDecimal getAmountMajor() {
+        return amountMajor;
+    }
+
+    public Payment setAmountMajor(BigDecimal amountMajor) {
+        this.amountMajor = amountMajor;
+        return this;
+    }
+
+    public long getAmountSubunits() {
+        return amountSubunits;
+    }
+
+    public Payment setAmountSubunits(long amountSubunits) {
+        this.amountSubunits = amountSubunits;
+        return this;
+    }
+
+    public String getCurrency() {
+        return currency;
+    }
+
+    public Payment setCurrency(String currency) {
+        this.currency = currency;
+        return this;
+    }
+
+    public PaymentStatus getStatus() {
+        return status;
+    }
+
+    public Payment setStatus(PaymentStatus status) {
+        this.status = status;
+        return this;
+    }
+
+    public String getAuthorizationUrl() {
+        return authorizationUrl;
+    }
+
+    public Payment setAuthorizationUrl(String authorizationUrl) {
+        this.authorizationUrl = authorizationUrl;
+        return this;
+    }
+
+    public String getAccessCode() {
+        return accessCode;
+    }
+
+    public Payment setAccessCode(String accessCode) {
+        this.accessCode = accessCode;
+        return this;
+    }
+
+    public String getRawVerificationPayload() {
+        return rawVerificationPayload;
+    }
+
+    public Payment setRawVerificationPayload(String rawVerificationPayload) {
+        this.rawVerificationPayload = rawVerificationPayload;
+        return this;
+    }
+
+    public Instant getCreatedAt() {
+        return createdAt;
+    }
+
+    public Payment setCreatedAt(Instant createdAt) {
+        this.createdAt = createdAt;
+        return this;
+    }
+
+    public Instant getPaidAt() {
+        return paidAt;
+    }
+
+    public Payment setPaidAt(Instant paidAt) {
+        this.paidAt = paidAt;
+        return this;
+    }
+
+    public Instant getUpdatedAt() {
+        return updatedAt;
+    }
+
+    public Payment setUpdatedAt(Instant updatedAt) {
+        this.updatedAt = updatedAt;
+        return this;
+    }
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/model/PaymentStatus.java b/orders-backend/src/main/java/com/andwati/orders/model/PaymentStatus.java
new file mode 100644
index 0000000..e5fafc0
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/model/PaymentStatus.java
@@ -0,0 +1,9 @@
+package com.andwati.orders.model;
+
+public enum PaymentStatus {
+    PENDING,
+    PAID,
+    FAILED,
+    ABANDONED,
+    REFUNDED
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/repository/PaymentRepository.java b/orders-backend/src/main/java/com/andwati/orders/repository/PaymentRepository.java
new file mode 100644
index 0000000..e857607
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/repository/PaymentRepository.java
@@ -0,0 +1,14 @@
+package com.andwati.orders.repository;
+
+import com.andwati.orders.model.Payment;
+import org.springframework.data.jpa.repository.EntityGraph;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.Optional;
+import java.util.UUID;
+
+public interface PaymentRepository extends JpaRepository<Payment, UUID> {
+
+    @EntityGraph(attributePaths = {"order", "order.customer", "ride"})
+    Optional<Payment> findByReference(String reference);
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/services/OrderService.java b/orders-backend/src/main/java/com/andwati/orders/services/OrderService.java
index 198a6d9..4e4f300 100644
--- a/orders-backend/src/main/java/com/andwati/orders/services/OrderService.java
+++ b/orders-backend/src/main/java/com/andwati/orders/services/OrderService.java
@@ -57,6 +57,18 @@ public class OrderService {
     @Transactional
     public OrderResponse placeOrder(CreateOrderRequest request) {
         AppUser customer = appUserService.getCurrentUser();
+
+        PendingOrderResult result = createPendingOrder(customer, request, null, null);
+        return orderMapper.toResponse(result.order());
+    }
+
+    @Transactional
+    public PendingOrderResult createPendingOrder(
+            AppUser customer,
+            CreateOrderRequest request,
+            java.math.BigDecimal rideFare,
+            String rideCurrency
+    ) {
         if (customer.getRole() != Role.CUSTOMER) {
             throw new IllegalArgumentException("Only customers can place orders");
         }
@@ -103,6 +115,7 @@ public class OrderService {
         order.recalculateTotal();
 
         Order savedOrder = orderRepository.save(order);
+        Ride savedRide = null;
 
         if (request.deliveryRide() != null) {
             Ride ride = new Ride()
@@ -111,12 +124,14 @@ public class OrderService {
                     .setPickupLocation(request.deliveryRide().pickupLocation().trim())
                     .setDropoffLocation(request.deliveryRide().dropoffLocation().trim())
                     .setDistanceKm(request.deliveryRide().distanceKm())
+                    .setFareAmount(rideFare)
+                    .setCurrency(rideCurrency == null ? "KES" : rideCurrency)
                     .setStatus(RideStatus.REQUESTED);
 
-            rideRepository.save(ride);
+            savedRide = rideRepository.save(ride);
         }
 
-        return orderMapper.toResponse(savedOrder);
+        return new PendingOrderResult(savedOrder, savedRide);
     }
 
     @Transactional
diff --git a/orders-backend/src/main/java/com/andwati/orders/services/PaymentService.java b/orders-backend/src/main/java/com/andwati/orders/services/PaymentService.java
new file mode 100644
index 0000000..d0aca61
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/services/PaymentService.java
@@ -0,0 +1,412 @@
+package com.andwati.orders.services;
+
+import com.andwati.orders.config.PaystackProperties;
+import com.andwati.orders.dto.request.CheckoutQuoteRequest;
+import com.andwati.orders.dto.request.CreateOrderRequest;
+import com.andwati.orders.dto.request.PaystackInitializeRequest;
+import com.andwati.orders.dto.response.CheckoutQuoteResponse;
+import com.andwati.orders.dto.response.FareCalculationResponse;
+import com.andwati.orders.dto.response.PaystackInitializeResponse;
+import com.andwati.orders.dto.response.PaystackVerifyResponse;
+import com.andwati.orders.exception.InsufficientStockException;
+import com.andwati.orders.exception.InventoryNotFoundException;
+import com.andwati.orders.exception.ProductNotFoundException;
+import com.andwati.orders.model.*;
+import com.andwati.orders.repository.InventoryItemRepository;
+import com.andwati.orders.repository.PaymentRepository;
+import com.andwati.orders.repository.ProductRepository;
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import javax.crypto.Mac;
+import javax.crypto.spec.SecretKeySpec;
+import java.math.BigDecimal;
+import java.math.RoundingMode;
+import java.nio.charset.StandardCharsets;
+import java.time.Instant;
+import java.util.HexFormat;
+import java.util.LinkedHashMap;
+import java.util.Map;
+import java.util.UUID;
+import java.util.function.Function;
+import java.util.stream.Collectors;
+
+@Service
+public class PaymentService {
+
+    private static final String DEFAULT_CURRENCY = "KES";
+    private static final int QUOTE_TTL_MINUTES = 15;
+
+    private final ProductRepository productRepository;
+    private final InventoryItemRepository inventoryItemRepository;
+    private final PaymentRepository paymentRepository;
+    private final FareCalculationService fareCalculationService;
+    private final OrderService orderService;
+    private final AppUserService appUserService;
+    private final PaystackClient paystackClient;
+    private final PaystackProperties paystackProperties;
+    private final ObjectMapper objectMapper;
+
+    public PaymentService(
+            ProductRepository productRepository,
+            InventoryItemRepository inventoryItemRepository,
+            PaymentRepository paymentRepository,
+            FareCalculationService fareCalculationService,
+            OrderService orderService,
+            AppUserService appUserService,
+            PaystackClient paystackClient,
+            PaystackProperties paystackProperties,
+            ObjectMapper objectMapper
+    ) {
+        this.productRepository = productRepository;
+        this.inventoryItemRepository = inventoryItemRepository;
+        this.paymentRepository = paymentRepository;
+        this.fareCalculationService = fareCalculationService;
+        this.orderService = orderService;
+        this.appUserService = appUserService;
+        this.paystackClient = paystackClient;
+        this.paystackProperties = paystackProperties;
+        this.objectMapper = objectMapper;
+    }
+
+    @Transactional(readOnly = true)
+    public CheckoutQuoteResponse quote(CheckoutQuoteRequest request) {
+        CheckoutQuote quote = calculateQuote(request.items(), request.deliveryRide());
+        return toQuoteResponse(quote);
+    }
+
+    @Transactional
+    public PaystackInitializeResponse initialize(PaystackInitializeRequest request) {
+        AppUser customer = appUserService.getCurrentUser();
+        if (customer.getRole() != Role.CUSTOMER) {
+            throw new IllegalArgumentException("Only customers can checkout");
+        }
+
+        CheckoutQuote quote = calculateQuote(request.items(), request.deliveryRide());
+        PendingOrderResult pendingOrder = orderService.createPendingOrder(
+                customer,
+                request.toCreateOrderRequest(),
+                quote.rideFare(),
+                quote.currency()
+        );
+
+        String reference = generateReference();
+        Payment payment = new Payment()
+                .setOrder(pendingOrder.order())
+                .setRide(pendingOrder.ride())
+                .setReference(reference)
+                .setProductSubtotal(quote.productSubtotal())
+                .setRideFare(quote.rideFare())
+                .setAmountMajor(quote.grandTotal())
+                .setAmountSubunits(toSubunits(quote.grandTotal()))
+                .setCurrency(quote.currency())
+                .setStatus(PaymentStatus.PENDING);
+
+        paymentRepository.save(payment);
+
+        JsonNode paystackData = paystackClient.initializeTransaction(
+                customer.getUsername(),
+                payment.getAmountSubunits(),
+                payment.getCurrency(),
+                payment.getReference(),
+                buildMetadata(customer, payment)
+        );
+
+        payment
+                .setAuthorizationUrl(paystackData.path("authorization_url").asText())
+                .setAccessCode(paystackData.path("access_code").asText());
+
+        return toInitializeResponse(payment);
+    }
+
+    @Transactional
+    public PaystackVerifyResponse verify(String reference) {
+        Payment payment = getPayment(reference);
+        assertCanAccess(payment);
+
+        return verifyPayment(payment);
+    }
+
+    @Transactional
+    public void handleWebhook(String body, String signature) {
+        verifyWebhookSignature(body, signature);
+
+        JsonNode event;
+        try {
+            event = objectMapper.readTree(body);
+        } catch (JsonProcessingException exception) {
+            throw new IllegalArgumentException("Webhook payload is not valid JSON");
+        }
+
+        if (!"charge.success".equals(event.path("event").asText())) {
+            return;
+        }
+
+        String reference = event.path("data").path("reference").asText(null);
+        if (reference == null || reference.isBlank()) {
+            return;
+        }
+
+        paymentRepository.findByReference(reference).ifPresent(this::verifyPayment);
+    }
+
+    private PaystackVerifyResponse verifyPayment(Payment payment) {
+        JsonNode verification = paystackClient.verifyTransaction(payment.getReference());
+        JsonNode data = verification.path("data");
+        String rawPayload = toJson(verification);
+
+        boolean success = "success".equals(data.path("status").asText());
+        boolean matchesReference = payment.getReference().equals(data.path("reference").asText());
+        boolean matchesAmount = payment.getAmountSubunits() == data.path("amount").asLong();
+        boolean matchesCurrency = payment.getCurrency().equalsIgnoreCase(data.path("currency").asText());
+
+        if (success && matchesReference && matchesAmount && matchesCurrency) {
+            payment.markPaid(rawPayload);
+            return toVerifyResponse(payment, "Payment verified");
+        }
+
+        PaymentStatus nextStatus = mapPaystackStatus(data.path("status").asText());
+        payment.markFailed(nextStatus, rawPayload);
+
+        if (!success) {
+            return toVerifyResponse(payment, data.path("gateway_response").asText("Payment was not successful"));
+        }
+
+        throw new IllegalArgumentException("Paystack verification did not match the stored payment");
+    }
+
+    private CheckoutQuote calculateQuote(
+            java.util.List<com.andwati.orders.dto.request.CreateOrderItemRequest> items,
+            com.andwati.orders.dto.request.CreateOrderRideRequest deliveryRide
+    ) {
+        if (items == null || items.isEmpty()) {
+            throw new IllegalArgumentException("items must contain at least one item");
+        }
+
+        Map<UUID, Integer> requestedQuantities = items.stream()
+                .collect(Collectors.toMap(
+                        com.andwati.orders.dto.request.CreateOrderItemRequest::productId,
+                        com.andwati.orders.dto.request.CreateOrderItemRequest::quantity,
+                        Integer::sum,
+                        LinkedHashMap::new
+                ));
+
+        Map<UUID, Product> productsById = productRepository.findByIdIn(requestedQuantities.keySet())
+                .stream()
+                .collect(Collectors.toMap(Product::getId, Function.identity()));
+
+        for (UUID productId : requestedQuantities.keySet()) {
+            Product product = productsById.get(productId);
+            if (product == null) {
+                throw new ProductNotFoundException(productId);
+            }
+            if (!product.isActive()) {
+                throw new IllegalArgumentException("Product " + product.getName() + " is not active");
+            }
+        }
+
+        Map<UUID, InventoryItem> inventoryByProductId = inventoryItemRepository
+                .findByProduct_IdIn(requestedQuantities.keySet())
+                .stream()
+                .collect(Collectors.toMap(
+                        inventory -> inventory.getProduct().getId(),
+                        Function.identity()
+                ));
+
+        BigDecimal productSubtotal = BigDecimal.ZERO;
+        String currency = null;
+
+        for (Map.Entry<UUID, Integer> entry : requestedQuantities.entrySet()) {
+            UUID productId = entry.getKey();
+            int quantity = entry.getValue();
+            if (quantity < 1) {
+                throw new IllegalArgumentException("quantity must be at least 1");
+            }
+
+            Product product = productsById.get(productId);
+            InventoryItem inventory = inventoryByProductId.get(productId);
+            if (inventory == null) {
+                throw new InventoryNotFoundException(productId);
+            }
+            if (!inventory.hasEnoughStock(quantity)) {
+                throw new InsufficientStockException(
+                        productId,
+                        product.getName(),
+                        quantity,
+                        inventory.getAvailableQuantity()
+                );
+            }
+
+            if (currency == null) {
+                currency = product.getCurrency();
+            } else if (!currency.equals(product.getCurrency())) {
+                throw new IllegalArgumentException("Cart items must use one currency");
+            }
+
+            productSubtotal = productSubtotal.add(product.getPrice().multiply(BigDecimal.valueOf(quantity)));
+        }
+
+        BigDecimal rideFare = BigDecimal.ZERO.setScale(2, RoundingMode.HALF_UP);
+        if (deliveryRide != null) {
+            FareCalculationResponse fare = fareCalculationService.calculateFare(deliveryRide.distanceKm(), null);
+            if (currency != null && !currency.equals(fare.currency())) {
+                throw new IllegalArgumentException("Ride fare currency must match cart currency");
+            }
+            currency = fare.currency();
+            rideFare = fare.calculatedFare();
+        }
+
+        String resolvedCurrency = currency == null ? DEFAULT_CURRENCY : currency;
+        BigDecimal normalizedSubtotal = productSubtotal.setScale(2, RoundingMode.HALF_UP);
+        BigDecimal normalizedRideFare = rideFare.setScale(2, RoundingMode.HALF_UP);
+
+        return new CheckoutQuote(
+                normalizedSubtotal,
+                normalizedRideFare,
+                normalizedSubtotal.add(normalizedRideFare).setScale(2, RoundingMode.HALF_UP),
+                resolvedCurrency
+        );
+    }
+
+    private CheckoutQuoteResponse toQuoteResponse(CheckoutQuote quote) {
+        return new CheckoutQuoteResponse(
+                quote.productSubtotal(),
+                quote.rideFare(),
+                quote.grandTotal(),
+                quote.currency(),
+                Instant.now().plusSeconds(QUOTE_TTL_MINUTES * 60L)
+        );
+    }
+
+    private PaystackInitializeResponse toInitializeResponse(Payment payment) {
+        return new PaystackInitializeResponse(
+                payment.getAuthorizationUrl(),
+                payment.getAccessCode(),
+                payment.getReference(),
+                payment.getOrder().getId(),
+                payment.getRide() == null ? null : payment.getRide().getId(),
+                payment.getAmountMajor(),
+                payment.getCurrency(),
+                payment.getStatus()
+        );
+    }
+
+    private PaystackVerifyResponse toVerifyResponse(Payment payment, String message) {
+        return new PaystackVerifyResponse(
+                payment.getReference(),
+                payment.getStatus(),
+                payment.getOrder().getId(),
+                payment.getRide() == null ? null : payment.getRide().getId(),
+                payment.getAmountMajor(),
+                payment.getCurrency(),
+                message
+        );
+    }
+
+    private Map<String, Object> buildMetadata(AppUser customer, Payment payment) {
+        Map<String, Object> metadata = new LinkedHashMap<>();
+        metadata.put("orderId", payment.getOrder().getId().toString());
+        metadata.put("rideId", payment.getRide() == null ? null : payment.getRide().getId().toString());
+        metadata.put("userId", customer.getId().toString());
+        metadata.put("productSubtotal", payment.getProductSubtotal());
+        metadata.put("rideFare", payment.getRideFare());
+        metadata.put("grandTotal", payment.getAmountMajor());
+        metadata.put("currency", payment.getCurrency());
+        return metadata;
+    }
+
+    private long toSubunits(BigDecimal amount) {
+        return amount.setScale(2, RoundingMode.HALF_UP)
+                .movePointRight(2)
+                .longValueExact();
+    }
+
+    private String generateReference() {
+        return "CYM-" + UUID.randomUUID();
+    }
+
+    private Payment getPayment(String reference) {
+        return paymentRepository.findByReference(reference)
+                .orElseThrow(() -> new IllegalArgumentException("Payment reference was not found"));
+    }
+
+    private void assertCanAccess(Payment payment) {
+        AppUser currentUser = appUserService.getCurrentUser();
+        if (currentUser.getRole() == Role.ADMIN) {
+            return;
+        }
+
+        AppUser customer = payment.getOrder().getCustomer();
+        if (currentUser.getRole() == Role.CUSTOMER
+                && customer != null
+                && currentUser.getId().equals(customer.getId())) {
+            return;
+        }
+
+        throw new IllegalArgumentException("You cannot access this payment");
+    }
+
+    private PaymentStatus mapPaystackStatus(String status) {
+        return switch (status) {
+            case "abandoned" -> PaymentStatus.ABANDONED;
+            case "reversed" -> PaymentStatus.REFUNDED;
+            default -> PaymentStatus.FAILED;
+        };
+    }
+
+    private void verifyWebhookSignature(String body, String signature) {
+        String secret = paystackProperties.resolvedWebhookSecret();
+        if (secret == null || secret.isBlank()) {
+            throw new IllegalStateException("PAYSTACK_WEBHOOK_SECRET or PAYSTACK_SECRET_KEY is not configured");
+        }
+        if (signature == null || signature.isBlank()) {
+            throw new IllegalArgumentException("Paystack signature is required");
+        }
+
+        try {
+            Mac mac = Mac.getInstance("HmacSHA512");
+            mac.init(new SecretKeySpec(secret.getBytes(StandardCharsets.UTF_8), "HmacSHA512"));
+            String expected = HexFormat.of().formatHex(mac.doFinal(body.getBytes(StandardCharsets.UTF_8)));
+            if (!constantTimeEquals(expected, signature)) {
+                throw new IllegalArgumentException("Invalid Paystack signature");
+            }
+        } catch (IllegalArgumentException exception) {
+            throw exception;
+        } catch (Exception exception) {
+            throw new IllegalStateException("Could not verify Paystack signature", exception);
+        }
+    }
+
+    private boolean constantTimeEquals(String expected, String actual) {
+        byte[] expectedBytes = expected.getBytes(StandardCharsets.UTF_8);
+        byte[] actualBytes = actual.getBytes(StandardCharsets.UTF_8);
+        if (expectedBytes.length != actualBytes.length) {
+            return false;
+        }
+
+        int result = 0;
+        for (int index = 0; index < expectedBytes.length; index++) {
+            result |= expectedBytes[index] ^ actualBytes[index];
+        }
+        return result == 0;
+    }
+
+    private String toJson(JsonNode node) {
+        try {
+            return objectMapper.writeValueAsString(node);
+        } catch (JsonProcessingException exception) {
+            throw new IllegalStateException("Could not serialize Paystack verification payload", exception);
+        }
+    }
+
+    private record CheckoutQuote(
+            BigDecimal productSubtotal,
+            BigDecimal rideFare,
+            BigDecimal grandTotal,
+            String currency
+    ) {
+    }
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/services/PaystackClient.java b/orders-backend/src/main/java/com/andwati/orders/services/PaystackClient.java
new file mode 100644
index 0000000..f41ad39
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/services/PaystackClient.java
@@ -0,0 +1,80 @@
+package com.andwati.orders.services;
+
+import com.andwati.orders.config.PaystackProperties;
+import com.fasterxml.jackson.databind.JsonNode;
+import org.springframework.stereotype.Component;
+import org.springframework.web.client.RestClient;
+
+import java.util.LinkedHashMap;
+import java.util.Map;
+
+@Component
+public class PaystackClient {
+
+    private final PaystackProperties paystackProperties;
+    private final RestClient restClient;
+
+    public PaystackClient(PaystackProperties paystackProperties, RestClient.Builder restClientBuilder) {
+        this.paystackProperties = paystackProperties;
+        this.restClient = restClientBuilder
+                .baseUrl(paystackProperties.resolvedApiBaseUrl())
+                .build();
+    }
+
+    public JsonNode initializeTransaction(
+            String email,
+            long amountSubunits,
+            String currency,
+            String reference,
+            Map<String, Object> metadata
+    ) {
+        assertConfigured();
+
+        Map<String, Object> body = new LinkedHashMap<>();
+        body.put("email", email);
+        body.put("amount", String.valueOf(amountSubunits));
+        body.put("currency", currency);
+        body.put("reference", reference);
+        body.put("metadata", metadata);
+
+        if (paystackProperties.hasCallbackUrl()) {
+            body.put("callback_url", paystackProperties.callbackUrl());
+        }
+
+        JsonNode response = restClient.post()
+                .uri("/transaction/initialize")
+                .headers(headers -> headers.setBearerAuth(paystackProperties.secretKey()))
+                .body(body)
+                .retrieve()
+                .body(JsonNode.class);
+
+        assertSuccessful(response, "Paystack transaction initialization failed");
+        return response.path("data");
+    }
+
+    public JsonNode verifyTransaction(String reference) {
+        assertConfigured();
+
+        JsonNode response = restClient.get()
+                .uri("/transaction/verify/{reference}", reference)
+                .headers(headers -> headers.setBearerAuth(paystackProperties.secretKey()))
+                .retrieve()
+                .body(JsonNode.class);
+
+        assertSuccessful(response, "Paystack transaction verification failed");
+        return response;
+    }
+
+    private void assertConfigured() {
+        if (!paystackProperties.hasSecretKey()) {
+            throw new IllegalStateException("PAYSTACK_SECRET_KEY is not configured");
+        }
+    }
+
+    private void assertSuccessful(JsonNode response, String fallbackMessage) {
+        if (response == null || !response.path("status").asBoolean(false)) {
+            String message = response == null ? fallbackMessage : response.path("message").asText(fallbackMessage);
+            throw new IllegalStateException(message);
+        }
+    }
+}
diff --git a/orders-backend/src/main/java/com/andwati/orders/services/PendingOrderResult.java b/orders-backend/src/main/java/com/andwati/orders/services/PendingOrderResult.java
new file mode 100644
index 0000000..5e68101
--- /dev/null
+++ b/orders-backend/src/main/java/com/andwati/orders/services/PendingOrderResult.java
@@ -0,0 +1,7 @@
+package com.andwati.orders.services;
+
+import com.andwati.orders.model.Order;
+import com.andwati.orders.model.Ride;
+
+public record PendingOrderResult(Order order, Ride ride) {
+}
diff --git a/orders-backend/src/main/resources/application.properties b/orders-backend/src/main/resources/application.properties
index 46c9a07..8b09274 100644
--- a/orders-backend/src/main/resources/application.properties
+++ b/orders-backend/src/main/resources/application.properties
@@ -20,6 +20,12 @@ fare.minimum-fare=${FARE_MINIMUM_FARE:150.00}
 fare.default-surge-multiplier=${FARE_DEFAULT_SURGE_MULTIPLIER:1.0}
 fare.currency=${FARE_CURRENCY:KES}
 
+paystack.secret-key=${PAYSTACK_SECRET_KEY:}
+paystack.public-key=${PAYSTACK_PUBLIC_KEY:}
+paystack.callback-url=${PAYSTACK_CALLBACK_URL:}
+paystack.webhook-secret=${PAYSTACK_WEBHOOK_SECRET:}
+paystack.api-base-url=${PAYSTACK_API_BASE_URL:https://api.paystack.co}
+
 app.seed-data=${SEED_DATA:true}
 app.cors.allowed-origins=${APP_CORS_ALLOWED_ORIGINS:http://localhost:3000}
 springdoc.api-docs.path=/api-docs
diff --git a/orders-frontend/.vscode/settings.json b/orders-frontend/.vscode/settings.json
index 70dd163..b001961 100644
--- a/orders-frontend/.vscode/settings.json
+++ b/orders-frontend/.vscode/settings.json
@@ -1,35 +1,35 @@
 {
-  "files.watcherExclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "search.exclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "files.readonlyInclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[css]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "editor.codeActionsOnSave": {
-    "source.organizeImports.biome": "explicit"
-  }
+	"files.watcherExclude": {
+		"**/routeTree.gen.ts": true
+	},
+	"search.exclude": {
+		"**/routeTree.gen.ts": true
+	},
+	"files.readonlyInclude": {
+		"**/routeTree.gen.ts": true
+	},
+	"[javascript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[javascriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[json]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[jsonc]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[css]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"editor.codeActionsOnSave": {
+		"source.organizeImports.biome": "explicit"
+	}
 }
diff --git a/orders-frontend/Dockerfile b/orders-frontend/Dockerfile
index 8d75c39..3cfd741 100644
--- a/orders-frontend/Dockerfile
+++ b/orders-frontend/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:22-bookworm-slim AS build
+FROM node:24-bookworm-slim AS build
 
 WORKDIR /app
 
@@ -14,7 +14,7 @@ ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
 
 RUN pnpm build
 
-FROM node:22-bookworm-slim
+FROM node:24-bookworm-slim
 
 WORKDIR /app
 
diff --git a/orders-frontend/biome.json b/orders-frontend/biome.json
index 64b4d31..033c04c 100644
--- a/orders-frontend/biome.json
+++ b/orders-frontend/biome.json
@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.4.5/schema.json",
 	"vcs": {
 		"enabled": false,
 		"clientKind": "git",
@@ -33,4 +33,3 @@
 		}
 	}
 }
-
diff --git a/orders-frontend/src/api/auth.ts b/orders-frontend/src/api/auth.ts
index ab3d492..8867e6d 100644
--- a/orders-frontend/src/api/auth.ts
+++ b/orders-frontend/src/api/auth.ts
@@ -1,25 +1,25 @@
-import {apiRequest, clearRequestSecurity} from "#/api/client";
-import type {AuthUser, LoginRequest, RegisterRequest} from "#/types/auth";
+import { apiRequest, clearRequestSecurity } from "#/api/client";
+import type { AuthUser, LoginRequest, RegisterRequest } from "#/types/auth";
 
 export function getCurrentUser(signal?: AbortSignal) {
-    return apiRequest<AuthUser>("/auth/me", {signal});
+	return apiRequest<AuthUser>("/auth/me", { signal });
 }
 
 export function login(request: LoginRequest) {
-    return apiRequest<AuthUser>("/auth/login", {
-        method: "POST",
-        body: request,
-    });
+	return apiRequest<AuthUser>("/auth/login", {
+		method: "POST",
+		body: request,
+	});
 }
 
 export function register(request: RegisterRequest) {
-    return apiRequest<AuthUser>("/auth/register", {
-        method: "POST",
-        body: request,
-    });
+	return apiRequest<AuthUser>("/auth/register", {
+		method: "POST",
+		body: request,
+	});
 }
 
 export async function logout() {
-    await apiRequest<void>("/auth/logout", {method: "POST"});
-    clearRequestSecurity();
+	await apiRequest<void>("/auth/logout", { method: "POST" });
+	clearRequestSecurity();
 }
diff --git a/orders-frontend/src/api/client.ts b/orders-frontend/src/api/client.ts
index 4a115bd..27df54b 100644
--- a/orders-frontend/src/api/client.ts
+++ b/orders-frontend/src/api/client.ts
@@ -1,110 +1,112 @@
-import type {ApiErrorResponse} from "#/types/api";
+import type { ApiErrorResponse } from "#/types/api";
 
 const API_BASE_URL =
-    import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8080/api";
+	import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8080/api";
 
 let csrfToken: string | null = null;
 let csrfHeaderName = "X-XSRF-TOKEN";
 
 export class ApiError extends Error {
-    status: number;
-    code: string;
-    details: unknown;
+	status: number;
+	code: string;
+	details: unknown;
 
-    constructor(status: number, error: ApiErrorResponse) {
-        super(error.message || "Request failed");
-        this.name = "ApiError";
-        this.status = status;
-        this.code = error.error;
-        this.details = error.details;
-    }
+	constructor(status: number, error: ApiErrorResponse) {
+		super(error.message || "Request failed");
+		this.name = "ApiError";
+		this.status = status;
+		this.code = error.error;
+		this.details = error.details;
+	}
 }
 
 type RequestOptions = {
-    method?: "GET" | "POST" | "DELETE" | "PUT" | "PATCH";
-    body?: unknown;
-    signal?: AbortSignal;
+	method?: "GET" | "POST" | "DELETE" | "PUT" | "PATCH";
+	body?: unknown;
+	signal?: AbortSignal;
 };
 
 type CsrfResponse = {
-    headerName: string;
-    parameterName: string;
-    token: string;
+	headerName: string;
+	parameterName: string;
+	token: string;
 };
 
 async function loadCsrfToken() {
-    const response = await fetch(`${API_BASE_URL}/auth/csrf`, {
-        credentials: "include",
-    });
+	const response = await fetch(`${API_BASE_URL}/auth/csrf`, {
+		credentials: "include",
+	});
 
-    if (!response.ok) {
-        throw new Error("Could not initialize request security");
-    }
+	if (!response.ok) {
+		throw new Error("Could not initialize request security");
+	}
 
-    const data = (await response.json()) as CsrfResponse;
-    csrfToken = data.token;
-    csrfHeaderName = data.headerName;
+	const data = (await response.json()) as CsrfResponse;
+	csrfToken = data.token;
+	csrfHeaderName = data.headerName;
 }
 
 function isMutating(method: string) {
-    return method !== "GET";
+	return method !== "GET";
 }
 
 export async function apiRequest<T>(
-    path: string,
-    options: RequestOptions = {},
+	path: string,
+	options: RequestOptions = {},
 ): Promise<T> {
-    const method = options.method ?? "GET";
+	const method = options.method ?? "GET";
 
-    if (isMutating(method) && !csrfToken) {
-        await loadCsrfToken();
-    }
+	if (isMutating(method) && !csrfToken) {
+		await loadCsrfToken();
+	}
 
-    const response = await fetch(`${API_BASE_URL}${path}`, {
-        method,
-        credentials: "include",
-        headers: {
-            "Content-Type": "application/json",
-            ...(isMutating(method) && csrfToken ? {[csrfHeaderName]: csrfToken} : {}),
-        },
-        body: options.body ? JSON.stringify(options.body) : undefined,
-        signal: options.signal,
-    });
+	const response = await fetch(`${API_BASE_URL}${path}`, {
+		method,
+		credentials: "include",
+		headers: {
+			"Content-Type": "application/json",
+			...(isMutating(method) && csrfToken
+				? { [csrfHeaderName]: csrfToken }
+				: {}),
+		},
+		body: options.body ? JSON.stringify(options.body) : undefined,
+		signal: options.signal,
+	});
 
-    if (!response.ok) {
-        let errorBody: ApiErrorResponse;
+	if (!response.ok) {
+		let errorBody: ApiErrorResponse;
 
-        try {
-            errorBody = await response.json();
-        } catch {
-            errorBody = {
-                error: "REQUEST_FAILED",
-                message: `Request failed with status ${response.status}`,
-                details: null,
-                timestamp: new Date().toISOString(),
-                path,
-            };
-        }
+		try {
+			errorBody = await response.json();
+		} catch {
+			errorBody = {
+				error: "REQUEST_FAILED",
+				message: `Request failed with status ${response.status}`,
+				details: null,
+				timestamp: new Date().toISOString(),
+				path,
+			};
+		}
 
-        throw new ApiError(response.status, errorBody);
-    }
+		throw new ApiError(response.status, errorBody);
+	}
 
-    if (response.status === 204) {
-        return undefined as T;
-    }
+	if (response.status === 204) {
+		return undefined as T;
+	}
 
-    const text = await response.text();
-    if (!text) {
-        return undefined as T;
-    }
+	const text = await response.text();
+	if (!text) {
+		return undefined as T;
+	}
 
-    return JSON.parse(text) as T;
+	return JSON.parse(text) as T;
 }
 
 export function clearRequestSecurity() {
-    csrfToken = null;
+	csrfToken = null;
 }
 
 export async function initializeRequestSecurity() {
-    await loadCsrfToken();
+	await loadCsrfToken();
 }
diff --git a/orders-frontend/src/api/fare.ts b/orders-frontend/src/api/fare.ts
index e6b9992..ca08731 100644
--- a/orders-frontend/src/api/fare.ts
+++ b/orders-frontend/src/api/fare.ts
@@ -1,20 +1,20 @@
-import {apiRequest} from "#/api/client";
-import type {FareCalculationResponse} from "#/types/fare";
+import { apiRequest } from "#/api/client";
+import type { FareCalculationResponse } from "#/types/fare";
 
 export function calculateFare(
-    distanceKm: number,
-    surgeMultiplier?: number,
-    signal?: AbortSignal,
+	distanceKm: number,
+	surgeMultiplier?: number,
+	signal?: AbortSignal,
 ) {
-    const params = new URLSearchParams();
-    params.set("distanceKm", String(distanceKm));
+	const params = new URLSearchParams();
+	params.set("distanceKm", String(distanceKm));
 
-    if (surgeMultiplier !== undefined) {
-        params.set("surgeMultiplier", String(surgeMultiplier));
-    }
+	if (surgeMultiplier !== undefined) {
+		params.set("surgeMultiplier", String(surgeMultiplier));
+	}
 
-    return apiRequest<FareCalculationResponse>(
-        `/fare/calculate?${params.toString()}`,
-        {signal},
-    );
-}
\ No newline at end of file
+	return apiRequest<FareCalculationResponse>(
+		`/fare/calculate?${params.toString()}`,
+		{ signal },
+	);
+}
diff --git a/orders-frontend/src/api/inventory.ts b/orders-frontend/src/api/inventory.ts
index a5d06e9..d0dc4b1 100644
--- a/orders-frontend/src/api/inventory.ts
+++ b/orders-frontend/src/api/inventory.ts
@@ -1,24 +1,24 @@
-import {apiRequest} from "#/api/client";
-import type {InventoryResponse, LowStockInventoryResponse,} from "#/types/inventory";
+import { apiRequest } from "#/api/client";
+import type {
+	InventoryResponse,
+	LowStockInventoryResponse,
+} from "#/types/inventory";
 
 export function getInventory(signal?: AbortSignal) {
-    return apiRequest<InventoryResponse>("/inventory", {signal});
+	return apiRequest<InventoryResponse>("/inventory", { signal });
 }
 
-export function getLowStockInventory(
-    threshold?: number,
-    signal?: AbortSignal,
-) {
-    const params = new URLSearchParams();
+export function getLowStockInventory(threshold?: number, signal?: AbortSignal) {
+	const params = new URLSearchParams();
 
-    if (threshold !== undefined) {
-        params.set("threshold", String(threshold));
-    }
+	if (threshold !== undefined) {
+		params.set("threshold", String(threshold));
+	}
 
-    const query = params.toString();
+	const query = params.toString();
 
-    return apiRequest<LowStockInventoryResponse>(
-        `/inventory/low-stock${query ? `?${query}` : ""}`,
-        {signal},
-    );
-}
\ No newline at end of file
+	return apiRequest<LowStockInventoryResponse>(
+		`/inventory/low-stock${query ? `?${query}` : ""}`,
+		{ signal },
+	);
+}
diff --git a/orders-frontend/src/api/orders.ts b/orders-frontend/src/api/orders.ts
index cd9a893..2af40e3 100644
--- a/orders-frontend/src/api/orders.ts
+++ b/orders-frontend/src/api/orders.ts
@@ -1,62 +1,65 @@
-import {apiRequest} from "#/api/client";
-import type {PageResponse} from "#/types/api";
+import { apiRequest } from "#/api/client";
+import type { PageResponse } from "#/types/api";
 import type {
-    CancelOrderResponse,
-    CreateOrderRequest,
-    Order,
-    OrderFilters,
-    OrderStatus,
-    OrderSummary,
+	CancelOrderResponse,
+	CreateOrderRequest,
+	Order,
+	OrderFilters,
+	OrderStatus,
+	OrderSummary,
 } from "#/types/order";
 
 export function getOrders(
-    filters: OrderFilters,
-    page = 0,
-    size = 20,
-    signal?: AbortSignal,
+	filters: OrderFilters,
+	page = 0,
+	size = 20,
+	signal?: AbortSignal,
 ) {
-    const params = new URLSearchParams();
+	const params = new URLSearchParams();
 
-    if (filters.status) {
-        params.set("status", filters.status);
-    }
+	if (filters.status) {
+		params.set("status", filters.status);
+	}
 
-    if (filters.from) {
-        params.set("from", filters.from);
-    }
+	if (filters.from) {
+		params.set("from", filters.from);
+	}
 
-    if (filters.to) {
-        params.set("to", filters.to);
-    }
+	if (filters.to) {
+		params.set("to", filters.to);
+	}
 
-    params.set("page", String(page));
-    params.set("size", String(size));
+	params.set("page", String(page));
+	params.set("size", String(size));
 
-    return apiRequest<PageResponse<OrderSummary>>(`/orders?${params.toString()}`, {
-        signal,
-    });
+	return apiRequest<PageResponse<OrderSummary>>(
+		`/orders?${params.toString()}`,
+		{
+			signal,
+		},
+	);
 }
 
 export function getOrder(id: string, signal?: AbortSignal) {
-    return apiRequest<Order>(`/orders/${id}`, {signal});
+	return apiRequest<Order>(`/orders/${id}`, { signal });
 }
 
 export function createOrder(request: CreateOrderRequest) {
-    return apiRequest<Order>("/orders", {
-        method: "POST",
-        body: request,
-    });
+	return apiRequest<Order>("/orders", {
+		method: "POST",
+		body: request,
+	});
 }
 
 export function cancelOrder(id: string) {
-    return apiRequest<CancelOrderResponse>(`/orders/${id}`, {
-        method: "DELETE",
-    });
+	return apiRequest<CancelOrderResponse>(`/orders/${id}`, {
+		method: "DELETE",
+	});
 }
 
 export function updateOrderStatus(id: string, status: OrderStatus) {
-    return apiRequest<Order>(`/orders/${id}/status`, {
-        method: "PATCH",
-        body: {status},
-    });
+	return apiRequest<Order>(`/orders/${id}/status`, {
+		method: "PATCH",
+		body: { status },
+	});
 }
diff --git a/orders-frontend/src/api/payments.ts b/orders-frontend/src/api/payments.ts
new file mode 100644
index 0000000..b97b284
--- /dev/null
+++ b/orders-frontend/src/api/payments.ts
@@ -0,0 +1,38 @@
+import { apiRequest } from "#/api/client";
+import type {
+	CheckoutQuote,
+	CheckoutQuoteRequest,
+	PaystackInitializeRequest,
+	PaystackInitializeResponse,
+	PaystackVerifyResponse,
+} from "#/types/payment";
+
+export function getCheckoutQuote(
+	request: CheckoutQuoteRequest,
+	signal?: AbortSignal,
+) {
+	return apiRequest<CheckoutQuote>("/checkout/quote", {
+		method: "POST",
+		body: request,
+		signal,
+	});
+}
+
+export function initializePaystackPayment(request: PaystackInitializeRequest) {
+	return apiRequest<PaystackInitializeResponse>(
+		"/payments/paystack/initialize",
+		{
+			method: "POST",
+			body: request,
+		},
+	);
+}
+
+export function verifyPaystackPayment(reference: string) {
+	return apiRequest<PaystackVerifyResponse>(
+		`/payments/paystack/verify/${encodeURIComponent(reference)}`,
+		{
+			method: "POST",
+		},
+	);
+}
diff --git a/orders-frontend/src/api/products.ts b/orders-frontend/src/api/products.ts
index fb56245..9e81c69 100644
--- a/orders-frontend/src/api/products.ts
+++ b/orders-frontend/src/api/products.ts
@@ -1,28 +1,28 @@
-import {apiRequest} from "#/api/client";
-import type {Product, ProductRequest} from "#/types/product";
+import { apiRequest } from "#/api/client";
+import type { Product, ProductRequest } from "#/types/product";
 
 export function getProducts(signal?: AbortSignal) {
-    return apiRequest<Product[]>("/products", {signal});
+	return apiRequest<Product[]>("/products", { signal });
 }
 
 export function getProduct(id: string, signal?: AbortSignal) {
-    return apiRequest<Product>(`/products/${id}`, {signal});
+	return apiRequest<Product>(`/products/${id}`, { signal });
 }
 
 export function createProduct(request: ProductRequest) {
-    return apiRequest<Product>("/products", {
-        method: "POST",
-        body: request,
-    });
+	return apiRequest<Product>("/products", {
+		method: "POST",
+		body: request,
+	});
 }
 
 export function updateProduct(id: string, request: ProductRequest) {
-    return apiRequest<Product>(`/products/${id}`, {
-        method: "PUT",
-        body: request,
-    });
+	return apiRequest<Product>(`/products/${id}`, {
+		method: "PUT",
+		body: request,
+	});
 }
 
 export function deactivateProduct(id: string) {
-    return apiRequest<Product>(`/products/${id}`, {method: "DELETE"});
+	return apiRequest<Product>(`/products/${id}`, { method: "DELETE" });
 }
diff --git a/orders-frontend/src/api/rides.ts b/orders-frontend/src/api/rides.ts
index 5975d42..d306052 100644
--- a/orders-frontend/src/api/rides.ts
+++ b/orders-frontend/src/api/rides.ts
@@ -1,32 +1,32 @@
-import {apiRequest} from "#/api/client";
-import type {CreateRideRequest, Ride, RideStatus} from "#/types/ride";
+import { apiRequest } from "#/api/client";
+import type { CreateRideRequest, Ride, RideStatus } from "#/types/ride";
 
 export function getRides(signal?: AbortSignal) {
-    return apiRequest<Ride[]>("/rides", {signal});
+	return apiRequest<Ride[]>("/rides", { signal });
 }
 
 export function requestRide(request: CreateRideRequest) {
-    return apiRequest<Ride>("/rides", {
-        method: "POST",
-        body: request,
-    });
+	return apiRequest<Ride>("/rides", {
+		method: "POST",
+		body: request,
+	});
 }
 
 export function acceptRide(id: string) {
-    return apiRequest<Ride>(`/rides/${id}/accept`, {method: "POST"});
+	return apiRequest<Ride>(`/rides/${id}/accept`, { method: "POST" });
 }
 
 export function completeRide(id: string) {
-    return apiRequest<Ride>(`/rides/${id}/complete`, {method: "POST"});
+	return apiRequest<Ride>(`/rides/${id}/complete`, { method: "POST" });
 }
 
 export function cancelRide(id: string) {
-    return apiRequest<Ride>(`/rides/${id}`, {method: "DELETE"});
+	return apiRequest<Ride>(`/rides/${id}`, { method: "DELETE" });
 }
 
 export function updateRideStatus(id: string, status: RideStatus) {
-    return apiRequest<Ride>(`/rides/${id}/status`, {
-        method: "PATCH",
-        body: {status},
-    });
+	return apiRequest<Ride>(`/rides/${id}/status`, {
+		method: "PATCH",
+		body: { status },
+	});
 }
diff --git a/orders-frontend/src/api/users.ts b/orders-frontend/src/api/users.ts
index f08bce1..9c956c0 100644
--- a/orders-frontend/src/api/users.ts
+++ b/orders-frontend/src/api/users.ts
@@ -1,32 +1,32 @@
-import {apiRequest} from "#/api/client";
-import type {AdminUserRequest, UserSummary} from "#/types/user";
+import { apiRequest } from "#/api/client";
+import type { AdminUserRequest, UserSummary } from "#/types/user";
 
 export function getUsers(signal?: AbortSignal) {
-    return apiRequest<UserSummary[]>("/users", {signal});
+	return apiRequest<UserSummary[]>("/users", { signal });
 }
 
 export function getCustomers(signal?: AbortSignal) {
-    return apiRequest<UserSummary[]>("/users/customers", {signal});
+	return apiRequest<UserSummary[]>("/users/customers", { signal });
 }
 
 export function getDrivers(signal?: AbortSignal) {
-    return apiRequest<UserSummary[]>("/users/drivers", {signal});
+	return apiRequest<UserSummary[]>("/users/drivers", { signal });
 }
 
 export function createUser(request: AdminUserRequest) {
-    return apiRequest<UserSummary>("/users", {
-        method: "POST",
-        body: request,
-    });
+	return apiRequest<UserSummary>("/users", {
+		method: "POST",
+		body: request,
+	});
 }
 
 export function updateUser(id: string, request: AdminUserRequest) {
-    return apiRequest<UserSummary>(`/users/${id}`, {
-        method: "PUT",
-        body: request,
-    });
+	return apiRequest<UserSummary>(`/users/${id}`, {
+		method: "PUT",
+		body: request,
+	});
 }
 
 export function disableUser(id: string) {
-    return apiRequest<UserSummary>(`/users/${id}`, {method: "DELETE"});
+	return apiRequest<UserSummary>(`/users/${id}`, { method: "DELETE" });
 }
diff --git a/orders-frontend/src/components/app-sidebar.tsx b/orders-frontend/src/components/app-sidebar.tsx
index aa1baf1..e56593c 100644
--- a/orders-frontend/src/components/app-sidebar.tsx
+++ b/orders-frontend/src/components/app-sidebar.tsx
@@ -1,199 +1,202 @@
-"use client"
+"use client";
 
-import * as React from "react"
 import {
-  Boxes,
-  Car,
-  GalleryVerticalEnd,
-  LayoutDashboard,
-  ReceiptText,
-  ShoppingCart,
-  Store,
-  Truck,
-  Users,
-} from "lucide-react"
+	Boxes,
+	Car,
+	GalleryVerticalEnd,
+	LayoutDashboard,
+	ReceiptText,
+	ShoppingCart,
+	Store,
+	Truck,
+	Users,
+} from "lucide-react";
+import type * as React from "react";
 
-import { NavMain } from "#/components/nav-main.tsx"
-import { NavUser } from "#/components/nav-user.tsx"
-import { TeamSwitcher } from "#/components/team-switcher.tsx"
+import { NavMain } from "#/components/nav-main.tsx";
+import { NavUser } from "#/components/nav-user.tsx";
+import { TeamSwitcher } from "#/components/team-switcher.tsx";
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarRail,
-} from "#/components/ui/sidebar.tsx"
-import type { AuthUser, Role } from "#/types/auth.ts"
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarHeader,
+	SidebarRail,
+} from "#/components/ui/sidebar.tsx";
+import type { AuthUser, Role } from "#/types/auth.ts";
 
 const roleLabels: Record<Role, string> = {
-  ADMIN: "Admin workspace",
-  CUSTOMER: "Customer store",
-  DRIVER: "Driver workspace",
-}
+	ADMIN: "Admin workspace",
+	CUSTOMER: "Customer store",
+	DRIVER: "Driver workspace",
+};
 
-const navMainByRole: Record<Role, React.ComponentProps<typeof NavMain>["items"]> = {
-  ADMIN: [
-    {
-      title: "Overview",
-      url: "/admin",
-      icon: LayoutDashboard,
-      isActive: true,
-      items: [
-        { title: "Operations", url: "/admin" },
-        { title: "Inventory health", url: "/admin/inventory" },
-      ],
-    },
-    {
-      title: "Products",
-      url: "/admin/products",
-      icon: Boxes,
-      items: [
-        { title: "Product catalog", url: "/admin/products" },
-        { title: "Create product", url: "/admin/products/new" },
-      ],
-    },
-    {
-      title: "Orders",
-      url: "/admin/orders",
-      icon: ReceiptText,
-      items: [
-        { title: "Pending orders", url: "/admin/orders/pending" },
-        { title: "Shipment status", url: "/admin/orders" },
-      ],
-    },
-    {
-      title: "Rides",
-      url: "/admin/rides",
-      icon: Car,
-      items: [
-        { title: "Ride requests", url: "/admin/rides/requested" },
-        { title: "Driver assignments", url: "/admin/rides/accepted" },
-      ],
-    },
-    {
-      title: "Users",
-      url: "/admin/users",
-      icon: Users,
-      items: [
-        { title: "All users", url: "/admin/users" },
-        { title: "Customers", url: "/admin/customers" },
-        { title: "Drivers", url: "/admin/drivers" },
-      ],
-    },
-  ],
-  CUSTOMER: [
-    {
-      title: "Overview",
-      url: "/",
-      icon: LayoutDashboard,
-      isActive: true,
-      items: [
-        { title: "Dashboard", url: "/" },
-        { title: "Order history", url: "/orders" },
-      ],
-    },
-    {
-      title: "Storefront",
-      url: "/products",
-      icon: Store,
-      items: [
-        { title: "Product listing", url: "/products" },
-        { title: "Featured inventory", url: "/products/featured" },
-      ],
-    },
-    {
-      title: "Cart",
-      url: "/cart",
-      icon: ShoppingCart,
-      items: [
-        { title: "Review cart", url: "/cart" },
-        { title: "Checkout", url: "/cart" },
-      ],
-    },
-    {
-      title: "Orders",
-      url: "/orders",
-      icon: ReceiptText,
-      items: [
-        { title: "Order history", url: "/orders" },
-        { title: "Delivery status", url: "/orders/status" },
-      ],
-    },
-    {
-      title: "Rides",
-      url: "/rides",
-      icon: Car,
-      items: [
-        { title: "Request a ride", url: "/rides/new" },
-        { title: "Ride history", url: "/rides" },
-      ],
-    },
-  ],
-  DRIVER: [
-    {
-      title: "Overview",
-      url: "/",
-      icon: LayoutDashboard,
-      isActive: true,
-      items: [
-        { title: "Dashboard", url: "/" },
-        { title: "Completed rides", url: "/driver/rides/completed" },
-      ],
-    },
-    {
-      title: "Ride board",
-      url: "/driver/rides",
-      icon: Car,
-      items: [
-        { title: "Requested rides", url: "/driver/rides/requested" },
-        { title: "Accepted rides", url: "/driver/rides/accepted" },
-      ],
-    },
-    {
-      title: "Routes",
-      url: "/driver/rides/accepted",
-      icon: Truck,
-      items: [
-        { title: "Active route", url: "/driver/rides/accepted" },
-        { title: "Completed rides", url: "/driver/rides/completed" },
-      ],
-    },
-  ],
-}
+const navMainByRole: Record<
+	Role,
+	React.ComponentProps<typeof NavMain>["items"]
+> = {
+	ADMIN: [
+		{
+			title: "Overview",
+			url: "/admin",
+			icon: LayoutDashboard,
+			isActive: true,
+			items: [
+				{ title: "Operations", url: "/admin" },
+				{ title: "Inventory health", url: "/admin/inventory" },
+			],
+		},
+		{
+			title: "Products",
+			url: "/admin/products",
+			icon: Boxes,
+			items: [
+				{ title: "Product catalog", url: "/admin/products" },
+				{ title: "Create product", url: "/admin/products/new" },
+			],
+		},
+		{
+			title: "Orders",
+			url: "/admin/orders",
+			icon: ReceiptText,
+			items: [
+				{ title: "Pending orders", url: "/admin/orders/pending" },
+				{ title: "Shipment status", url: "/admin/orders" },
+			],
+		},
+		{
+			title: "Rides",
+			url: "/admin/rides",
+			icon: Car,
+			items: [
+				{ title: "Ride requests", url: "/admin/rides/requested" },
+				{ title: "Driver assignments", url: "/admin/rides/accepted" },
+			],
+		},
+		{
+			title: "Users",
+			url: "/admin/users",
+			icon: Users,
+			items: [
+				{ title: "All users", url: "/admin/users" },
+				{ title: "Customers", url: "/admin/customers" },
+				{ title: "Drivers", url: "/admin/drivers" },
+			],
+		},
+	],
+	CUSTOMER: [
+		{
+			title: "Overview",
+			url: "/",
+			icon: LayoutDashboard,
+			isActive: true,
+			items: [
+				{ title: "Dashboard", url: "/" },
+				{ title: "Order history", url: "/orders" },
+			],
+		},
+		{
+			title: "Storefront",
+			url: "/products",
+			icon: Store,
+			items: [
+				{ title: "Product listing", url: "/products" },
+				{ title: "Featured inventory", url: "/products/featured" },
+			],
+		},
+		{
+			title: "Cart",
+			url: "/cart",
+			icon: ShoppingCart,
+			items: [
+				{ title: "Review cart", url: "/cart" },
+				{ title: "Checkout", url: "/cart" },
+			],
+		},
+		{
+			title: "Orders",
+			url: "/orders",
+			icon: ReceiptText,
+			items: [
+				{ title: "Order history", url: "/orders" },
+				{ title: "Delivery status", url: "/orders/status" },
+			],
+		},
+		{
+			title: "Rides",
+			url: "/rides",
+			icon: Car,
+			items: [
+				{ title: "Request a ride", url: "/rides/new" },
+				{ title: "Ride history", url: "/rides" },
+			],
+		},
+	],
+	DRIVER: [
+		{
+			title: "Overview",
+			url: "/",
+			icon: LayoutDashboard,
+			isActive: true,
+			items: [
+				{ title: "Dashboard", url: "/" },
+				{ title: "Completed rides", url: "/driver/rides/completed" },
+			],
+		},
+		{
+			title: "Ride board",
+			url: "/driver/rides",
+			icon: Car,
+			items: [
+				{ title: "Requested rides", url: "/driver/rides/requested" },
+				{ title: "Accepted rides", url: "/driver/rides/accepted" },
+			],
+		},
+		{
+			title: "Routes",
+			url: "/driver/rides/accepted",
+			icon: Truck,
+			items: [
+				{ title: "Active route", url: "/driver/rides/accepted" },
+				{ title: "Completed rides", url: "/driver/rides/completed" },
+			],
+		},
+	],
+};
 
 type AppSidebarProps = React.ComponentProps<typeof Sidebar> & {
-  user: AuthUser
-  onLogout?: () => void
-}
+	user: AuthUser;
+	onLogout?: () => void;
+};
 
 export function AppSidebar({ user, onLogout, ...props }: AppSidebarProps) {
-  return (
-    <Sidebar collapsible="icon" {...props}>
-      <SidebarHeader>
-        <TeamSwitcher
-          teams={[
-            {
-              name: "Cymelle",
-              logo: GalleryVerticalEnd,
-              plan: roleLabels[user.role],
-            },
-          ]}
-        />
-      </SidebarHeader>
-      <SidebarContent>
-        <NavMain items={navMainByRole[user.role]} />
-      </SidebarContent>
-      <SidebarFooter>
-        <NavUser
-          user={{
-            name: user.displayName,
-            email: user.username,
-            avatar: "",
-          }}
-          onLogout={onLogout}
-        />
-      </SidebarFooter>
-      <SidebarRail />
-    </Sidebar>
-  )
+	return (
+		<Sidebar collapsible="icon" {...props}>
+			<SidebarHeader>
+				<TeamSwitcher
+					teams={[
+						{
+							name: "Cymelle",
+							logo: GalleryVerticalEnd,
+							plan: roleLabels[user.role],
+						},
+					]}
+				/>
+			</SidebarHeader>
+			<SidebarContent>
+				<NavMain items={navMainByRole[user.role]} />
+			</SidebarContent>
+			<SidebarFooter>
+				<NavUser
+					user={{
+						name: user.displayName,
+						email: user.username,
+						avatar: "",
+					}}
+					onLogout={onLogout}
+				/>
+			</SidebarFooter>
+			<SidebarRail />
+		</Sidebar>
+	);
 }
diff --git a/orders-frontend/src/components/app/AppShell.tsx b/orders-frontend/src/components/app/AppShell.tsx
index 814677a..4b483f3 100644
--- a/orders-frontend/src/components/app/AppShell.tsx
+++ b/orders-frontend/src/components/app/AppShell.tsx
@@ -1,81 +1,94 @@
-import {AppSidebar} from "#/components/app-sidebar";
-import {SiteHeader} from "#/components/site-header";
-import {StoreHome} from "#/components/store/StoreHome";
-import {Card, CardContent, CardHeader} from "#/components/ui/card";
-import {Skeleton} from "#/components/ui/skeleton";
-import {SidebarInset, SidebarProvider} from "#/components/ui/sidebar";
-import {useAuth} from "#/hooks/useAuth";
-import type {Role} from "#/types/auth";
-import type {CSSProperties, ReactNode} from "react";
+import type { CSSProperties, ReactNode } from "react";
+import { AppSidebar } from "#/components/app-sidebar";
+import { SiteHeader } from "#/components/site-header";
+import { StoreHome } from "#/components/store/StoreHome";
+import { Card, CardContent, CardHeader } from "#/components/ui/card";
+import { SidebarInset, SidebarProvider } from "#/components/ui/sidebar";
+import { Skeleton } from "#/components/ui/skeleton";
+import { useAuth } from "#/hooks/useAuth";
+import type { Role } from "#/types/auth";
 
 type AppShellProps = {
-    title: string;
-    allowedRoles?: Role[];
-    showCart?: boolean;
-    children: ReactNode;
+	title: string;
+	allowedRoles?: Role[];
+	showCart?: boolean;
+	children: ReactNode;
 };
 
-export function AppShell({title, allowedRoles, showCart = false, children}: AppShellProps) {
-    const {user, isLoading, logout} = useAuth();
+export function AppShell({
+	title,
+	allowedRoles,
+	showCart = false,
+	children,
+}: AppShellProps) {
+	const { user, isLoading, logout } = useAuth();
 
-    if (isLoading && !user) {
-        return <WorkspaceSkeleton/>;
-    }
+	if (isLoading && !user) {
+		return <WorkspaceSkeleton />;
+	}
 
-    if (!user) {
-        return <StoreHome/>;
-    }
+	if (!user) {
+		return <StoreHome />;
+	}
 
-    const allowed = !allowedRoles || allowedRoles.includes(user.role);
+	const allowed = !allowedRoles || allowedRoles.includes(user.role);
 
-    return (
-        <SidebarProvider
-            style={{
-                "--sidebar-width": "18rem",
-                "--header-height": "3.5rem",
-            } as CSSProperties}
-        >
-            <AppSidebar user={user} onLogout={logout} variant="inset"/>
-            <SidebarInset>
-                <SiteHeader title={title} onLogout={logout} showCart={showCart || user.role === "CUSTOMER"}/>
-                <main className="@container/main flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">
-                    {allowed ? children : <AccessDenied/>}
-                </main>
-            </SidebarInset>
-        </SidebarProvider>
-    );
+	return (
+		<SidebarProvider
+			style={
+				{
+					"--sidebar-width": "18rem",
+					"--header-height": "3.5rem",
+				} as CSSProperties
+			}
+		>
+			<AppSidebar user={user} onLogout={logout} variant="inset" />
+			<SidebarInset>
+				<SiteHeader
+					title={title}
+					onLogout={logout}
+					showCart={showCart || user.role === "CUSTOMER"}
+				/>
+				<main className="@container/main flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">
+					{allowed ? children : <AccessDenied />}
+				</main>
+			</SidebarInset>
+		</SidebarProvider>
+	);
 }
 
 function WorkspaceSkeleton() {
-    return (
-        <main className="min-h-screen bg-background p-4 md:p-6">
-            <div className="mx-auto max-w-6xl space-y-4">
-                <div className="flex items-center justify-between">
-                    <Skeleton className="h-8 w-48"/>
-                    <Skeleton className="h-9 w-32"/>
-                </div>
-                <div className="grid gap-4 md:grid-cols-3">
-                    <Skeleton className="h-28"/>
-                    <Skeleton className="h-28"/>
-                    <Skeleton className="h-28"/>
-                </div>
-                <Skeleton className="h-80"/>
-            </div>
-        </main>
-    );
+	return (
+		<main className="min-h-screen bg-background p-4 md:p-6">
+			<div className="mx-auto max-w-6xl space-y-4">
+				<div className="flex items-center justify-between">
+					<Skeleton className="h-8 w-48" />
+					<Skeleton className="h-9 w-32" />
+				</div>
+				<div className="grid gap-4 md:grid-cols-3">
+					<Skeleton className="h-28" />
+					<Skeleton className="h-28" />
+					<Skeleton className="h-28" />
+				</div>
+				<Skeleton className="h-80" />
+			</div>
+		</main>
+	);
 }
 
 function AccessDenied() {
-    return (
-        <Card>
-            <CardHeader>
-                <h2 className="text-lg font-semibold">This page is not available for your role</h2>
-            </CardHeader>
-            <CardContent>
-                <p className="text-sm text-muted-foreground">
-                    Switch to the correct account type to view this workspace.
-                </p>
-            </CardContent>
-        </Card>
-    );
+	return (
+		<Card>
+			<CardHeader>
+				<h2 className="text-lg font-semibold">
+					This page is not available for your role
+				</h2>
+			</CardHeader>
+			<CardContent>
+				<p className="text-sm text-muted-foreground">
+					Switch to the correct account type to view this workspace.
+				</p>
+			</CardContent>
+		</Card>
+	);
 }
diff --git a/orders-frontend/src/components/app/WorkspacePages.tsx b/orders-frontend/src/components/app/WorkspacePages.tsx
index 319c3c4..e2f44ef 100644
--- a/orders-frontend/src/components/app/WorkspacePages.tsx
+++ b/orders-frontend/src/components/app/WorkspacePages.tsx
@@ -1,1595 +1,2214 @@
-import {AppShell} from "#/components/app/AppShell";
-import {ProductGrid} from "#/components/store/ProductGrid";
-import {StoreHome} from "#/components/store/StoreHome";
-import {ErrorState} from "#/components/ui/ErrorState";
-import {LoadingState} from "#/components/ui/LoadingState";
-import {Button} from "#/components/ui/button";
-import {Card, CardContent, CardHeader, CardTitle} from "#/components/ui/card";
-import {ChartContainer, ChartTooltip, ChartTooltipContent} from "#/components/ui/chart";
-import {Input} from "#/components/ui/input";
-import {Label} from "#/components/ui/label";
-import {StatusBadge, statusColorClass} from "#/components/ui/status-badge";
+import { Link } from "@tanstack/react-router";
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
+	Boxes,
+	Car,
+	ClipboardList,
+	PackagePlus,
+	Search,
+	Users,
+} from "lucide-react";
+import { type FormEvent, type ReactNode, useMemo, useState } from "react";
+import {
+	Area,
+	AreaChart,
+	Bar,
+	BarChart,
+	CartesianGrid,
+	Cell,
+	Pie,
+	PieChart,
+	XAxis,
+	YAxis,
+} from "recharts";
+import { toast } from "sonner";
+import { AppShell } from "#/components/app/AppShell";
+import { ProductGrid } from "#/components/store/ProductGrid";
+import { StoreHome } from "#/components/store/StoreHome";
+import { Button } from "#/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "#/components/ui/card";
+import {
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from "#/components/ui/chart";
+import { ErrorState } from "#/components/ui/ErrorState";
+import { Input } from "#/components/ui/input";
+import { LoadingState } from "#/components/ui/LoadingState";
+import { Label } from "#/components/ui/label";
+import { StatusBadge, statusColorClass } from "#/components/ui/status-badge";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "#/components/ui/table";
-import {formatCurrency} from "#/hooks/formatCurrency";
-import {formatDate} from "#/hooks/formatDate";
-import {useAuth} from "#/hooks/useAuth";
-import {useCart} from "#/hooks/useCart";
-import {useInventory, useLowStockInventory} from "#/hooks/useInventory";
-import {useOrders, useUpdateOrderStatus} from "#/hooks/useOrders";
+import { formatCurrency } from "#/hooks/formatCurrency";
+import { formatDate } from "#/hooks/formatDate";
+import { useAuth } from "#/hooks/useAuth";
+import { useCart } from "#/hooks/useCart";
+import { useInventory, useLowStockInventory } from "#/hooks/useInventory";
+import { useOrders, useUpdateOrderStatus } from "#/hooks/useOrders";
 import {
-    useCreateProduct,
-    useDeactivateProduct,
-    useProducts,
-    useUpdateProduct,
+	useCreateProduct,
+	useDeactivateProduct,
+	useProducts,
+	useUpdateProduct,
 } from "#/hooks/useProducts";
 import {
-    useAcceptRide,
-    useCancelRide,
-    useCompleteRide,
-    useRequestRide,
-    useRides,
-    useUpdateRideStatus,
+	useAcceptRide,
+	useCancelRide,
+	useCompleteRide,
+	useRequestRide,
+	useRides,
+	useUpdateRideStatus,
 } from "#/hooks/useRides";
 import {
-    useCreateUser,
-    useDisableUser,
-    useUpdateUser,
-    useUsers,
+	useCreateUser,
+	useDisableUser,
+	useUpdateUser,
+	useUsers,
 } from "#/hooks/useUsers";
-import type {Role} from "#/types/auth";
-import type {InventoryItem} from "#/types/inventory";
-import type {OrderStatus, OrderSummary} from "#/types/order";
-import type {Product, ProductRequest} from "#/types/product";
-import type {Ride, RideStatus} from "#/types/ride";
-import type {AdminUserRequest, UserSummary} from "#/types/user";
-import {Link} from "@tanstack/react-router";
-import {Boxes, Car, ClipboardList, PackagePlus, Search, Users} from "lucide-react";
-import {useMemo, useState, type FormEvent, type ReactNode} from "react";
-import {Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis} from "recharts";
-import {toast} from "sonner";
+import type { Role } from "#/types/auth";
+import type { InventoryItem } from "#/types/inventory";
+import type { OrderStatus, OrderSummary } from "#/types/order";
+import type { Product, ProductRequest } from "#/types/product";
+import type { Ride, RideStatus } from "#/types/ride";
+import type { AdminUserRequest, UserSummary } from "#/types/user";
 
 const emptyProductForm: ProductRequest = {
-    name: "",
-    sku: "",
-    price: 0,
-    currency: "KES",
-    active: true,
-    availableQuantity: 0,
-    reorderLevel: 5,
+	name: "",
+	sku: "",
+	price: 0,
+	currency: "KES",
+	active: true,
+	availableQuantity: 0,
+	reorderLevel: 5,
 };
 
 const emptyUserForm: AdminUserRequest = {
-    username: "",
-    displayName: "",
-    password: "",
-    role: "CUSTOMER",
-    enabled: true,
+	username: "",
+	displayName: "",
+	password: "",
+	role: "CUSTOMER",
+	enabled: true,
 };
 
-export function ProductListingPage({featured = false}: {featured?: boolean}) {
-    const {user} = useAuth();
+export function ProductListingPage({
+	featured = false,
+}: {
+	featured?: boolean;
+}) {
+	const { user } = useAuth();
 
-    if (!user) {
-        return <StoreHome/>;
-    }
+	if (!user) {
+		return <StoreHome />;
+	}
 
-    return (
-        <AppShell title={featured ? "Featured products" : "Products"} showCart>
-            <ProductsContent featured={featured}/>
-        </AppShell>
-    );
+	return (
+		<AppShell title={featured ? "Featured products" : "Products"} showCart>
+			<ProductsContent featured={featured} />
+		</AppShell>
+	);
 }
 
-function ProductsContent({featured}: {featured: boolean}) {
-    const productsQuery = useProducts();
-    const cart = useCart();
-    const [searchQuery, setSearchQuery] = useState("");
-    const products = useMemo(() => {
-        const items = productsQuery.data ?? [];
-        const visible = featured
-            ? items
-            .filter((product) => product.active && product.availableQuantity > 0)
-            .sort((a, b) => b.availableQuantity - a.availableQuantity)
-            .slice(0, 6)
-            : items;
-        return visible.filter((product) => matchesText(searchQuery, product.name, product.sku, product.currency));
-    }, [featured, productsQuery.data, searchQuery]);
+function ProductsContent({ featured }: { featured: boolean }) {
+	const productsQuery = useProducts();
+	const cart = useCart();
+	const [searchQuery, setSearchQuery] = useState("");
+	const products = useMemo(() => {
+		const items = productsQuery.data ?? [];
+		const visible = featured
+			? items
+					.filter((product) => product.active && product.availableQuantity > 0)
+					.sort((a, b) => b.availableQuantity - a.availableQuantity)
+					.slice(0, 6)
+			: items;
+		return visible.filter((product) =>
+			matchesText(searchQuery, product.name, product.sku, product.currency),
+		);
+	}, [featured, productsQuery.data, searchQuery]);
 
-    if (productsQuery.isError) {
-        return <ErrorState message={errorMessage(productsQuery.error)} onRetry={() => productsQuery.refetch()}/>;
-    }
+	if (productsQuery.isError) {
+		return (
+			<ErrorState
+				message={errorMessage(productsQuery.error)}
+				onRetry={() => productsQuery.refetch()}
+			/>
+		);
+	}
 
-    return (
-        <PageStack
-            eyebrow="Store"
-            title={featured ? "Featured inventory" : "Product listing"}
-            description="Browse active products, choose quantities, and add items to your cart."
-        >
-            <SearchField
-                value={searchQuery}
-                onChange={setSearchQuery}
-                placeholder="Search products by name, SKU, or currency"
-            />
-            <ProductGrid products={products} isLoading={productsQuery.isLoading} onAddToCart={cart.addItem}/>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow="Store"
+			title={featured ? "Featured inventory" : "Product listing"}
+			description="Browse active products, choose quantities, and add items to your cart."
+		>
+			<SearchField
+				value={searchQuery}
+				onChange={setSearchQuery}
+				placeholder="Search products by name, SKU, or currency"
+			/>
+			<ProductGrid
+				products={products}
+				isLoading={productsQuery.isLoading}
+				onAddToCart={cart.addItem}
+			/>
+		</PageStack>
+	);
 }
 
 export function AdminOverviewPage() {
-    return (
-        <AppShell title="Admin overview" allowedRoles={["ADMIN"]}>
-            <AdminOverviewContent/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="Admin overview" allowedRoles={["ADMIN"]}>
+			<AdminOverviewContent />
+		</AppShell>
+	);
 }
 
 function AdminOverviewContent() {
-    const productsQuery = useProducts();
-    const inventoryQuery = useInventory();
-    const ordersQuery = useOrders({status: "", from: "", to: ""}, 0, 100);
-    const ridesQuery = useRides();
+	const productsQuery = useProducts();
+	const inventoryQuery = useInventory();
+	const ordersQuery = useOrders({ status: "", from: "", to: "" }, 0, 100);
+	const ridesQuery = useRides();
 
-    const products = productsQuery.data ?? [];
-    const inventory = inventoryQuery.data?.items ?? [];
-    const orders = ordersQuery.data?.items ?? [];
-    const rides = ridesQuery.data ?? [];
-    const revenueTrend = useMemo(() => dailyOrderRevenue(orders), [orders]);
-    const orderStatusData = useMemo(() => statusCounts(orders, ["PENDING", "SHIPPED", "DELIVERED", "CANCELLED"]), [orders]);
-    const rideStatusData = useMemo(() => statusCounts(rides, ["REQUESTED", "ACCEPTED", "COMPLETED", "CANCELLED"]), [rides]);
-    const inventoryDepth = useMemo(() => inventory.slice(0, 8).map((item) => ({
-        name: compactLabel(item.productName),
-        available: item.availableQuantity,
-        reorder: item.reorderLevel,
-    })), [inventory]);
-    const revenue = orders
-        .filter((order) => order.status !== "CANCELLED")
-        .reduce((total, order) => total + order.totalAmount, 0);
+	const products = productsQuery.data ?? [];
+	const inventory = inventoryQuery.data?.items ?? [];
+	const orders = ordersQuery.data?.items ?? [];
+	const rides = ridesQuery.data ?? [];
+	const revenueTrend = useMemo(() => dailyOrderRevenue(orders), [orders]);
+	const orderStatusData = useMemo(
+		() =>
+			statusCounts(orders, ["PENDING", "SHIPPED", "DELIVERED", "CANCELLED"]),
+		[orders],
+	);
+	const rideStatusData = useMemo(
+		() =>
+			statusCounts(rides, ["REQUESTED", "ACCEPTED", "COMPLETED", "CANCELLED"]),
+		[rides],
+	);
+	const inventoryDepth = useMemo(
+		() =>
+			inventory.slice(0, 8).map((item) => ({
+				name: compactLabel(item.productName),
+				available: item.availableQuantity,
+				reorder: item.reorderLevel,
+			})),
+		[inventory],
+	);
+	const revenue = orders
+		.filter((order) => order.status !== "CANCELLED")
+		.reduce((total, order) => total + order.totalAmount, 0);
 
-    return (
-        <PageStack eyebrow="Operations" title="Overview" description="Current store, fulfillment, and ride activity.">
-            <div className="grid gap-4 md:grid-cols-4">
-                <MetricCard title="Products" value={String(products.length)} detail="Catalog items"/>
-                <MetricCard
-                    title="Low stock"
-                    value={String(inventory.filter((item) => item.status !== "IN_STOCK").length)}
-                    detail="Inventory alerts"
-                />
-                <MetricCard
-                    title="Pending orders"
-                    value={String(orders.filter((order) => order.status === "PENDING").length)}
-                    detail="Awaiting fulfillment"
-                />
-                <MetricCard
-                    title="Revenue"
-                    value={formatCurrency(revenue, "KES")}
-                    detail="Non-cancelled orders"
-                />
-            </div>
-            <div className="grid gap-4 xl:grid-cols-[minmax(0,1.4fr)_minmax(320px,0.8fr)]">
-                <Panel title="Revenue trend" icon={<ClipboardList/>}>
-                    <RevenueAreaChart data={revenueTrend}/>
-                </Panel>
-                <Panel title="Order mix" icon={<ClipboardList/>}>
-                    <StatusPieChart data={orderStatusData}/>
-                </Panel>
-            </div>
-            <div className="grid gap-4 lg:grid-cols-2">
-                <Panel title="Ride pipeline" icon={<Car/>}>
-                    <StatusBarChart data={rideStatusData}/>
-                </Panel>
-                <Panel title="Inventory depth" icon={<Boxes/>}>
-                    <InventoryBarChart data={inventoryDepth}/>
-                </Panel>
-            </div>
-            <div className="grid gap-4 lg:grid-cols-2">
-                <Panel title="Pending orders" icon={<ClipboardList/>}>
-                    <OrderTable orders={orders.filter((order) => order.status === "PENDING")}/>
-                </Panel>
-                <Panel title="Ride requests" icon={<Car/>}>
-                    <RideTable rides={rides.filter((ride) => ride.status === "REQUESTED")}/>
-                </Panel>
-            </div>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow="Operations"
+			title="Overview"
+			description="Current store, fulfillment, and ride activity."
+		>
+			<div className="grid gap-4 md:grid-cols-4">
+				<MetricCard
+					title="Products"
+					value={String(products.length)}
+					detail="Catalog items"
+				/>
+				<MetricCard
+					title="Low stock"
+					value={String(
+						inventory.filter((item) => item.status !== "IN_STOCK").length,
+					)}
+					detail="Inventory alerts"
+				/>
+				<MetricCard
+					title="Pending orders"
+					value={String(
+						orders.filter((order) => order.status === "PENDING").length,
+					)}
+					detail="Awaiting fulfillment"
+				/>
+				<MetricCard
+					title="Revenue"
+					value={formatCurrency(revenue, "KES")}
+					detail="Non-cancelled orders"
+				/>
+			</div>
+			<div className="grid gap-4 xl:grid-cols-[minmax(0,1.4fr)_minmax(320px,0.8fr)]">
+				<Panel title="Revenue trend" icon={<ClipboardList />}>
+					<RevenueAreaChart data={revenueTrend} />
+				</Panel>
+				<Panel title="Order mix" icon={<ClipboardList />}>
+					<StatusPieChart data={orderStatusData} />
+				</Panel>
+			</div>
+			<div className="grid gap-4 lg:grid-cols-2">
+				<Panel title="Ride pipeline" icon={<Car />}>
+					<StatusBarChart data={rideStatusData} />
+				</Panel>
+				<Panel title="Inventory depth" icon={<Boxes />}>
+					<InventoryBarChart data={inventoryDepth} />
+				</Panel>
+			</div>
+			<div className="grid gap-4 lg:grid-cols-2">
+				<Panel title="Pending orders" icon={<ClipboardList />}>
+					<OrderTable
+						orders={orders.filter((order) => order.status === "PENDING")}
+					/>
+				</Panel>
+				<Panel title="Ride requests" icon={<Car />}>
+					<RideTable
+						rides={rides.filter((ride) => ride.status === "REQUESTED")}
+					/>
+				</Panel>
+			</div>
+		</PageStack>
+	);
 }
 
 export function CustomerOverviewPage() {
-    return (
-        <AppShell title="Customer overview" allowedRoles={["CUSTOMER"]} showCart>
-            <CustomerOverviewContent/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="Customer overview" allowedRoles={["CUSTOMER"]} showCart>
+			<CustomerOverviewContent />
+		</AppShell>
+	);
 }
 
 function CustomerOverviewContent() {
-    const productsQuery = useProducts();
-    const ordersQuery = useOrders({status: "", from: "", to: ""}, 0, 100);
-    const ridesQuery = useRides();
-    const cart = useCart();
-    const products = productsQuery.data ?? [];
-    const orders = ordersQuery.data?.items ?? [];
-    const rides = ridesQuery.data ?? [];
-    const spendTrend = useMemo(() => dailyOrderRevenue(orders), [orders]);
-    const orderStatusData = useMemo(() => statusCounts(orders, ["PENDING", "SHIPPED", "DELIVERED", "CANCELLED"]), [orders]);
-    const rideStatusData = useMemo(() => statusCounts(rides, ["REQUESTED", "ACCEPTED", "COMPLETED", "CANCELLED"]), [rides]);
-    const spend = orders
-        .filter((order) => order.status !== "CANCELLED")
-        .reduce((total, order) => total + order.totalAmount, 0);
+	const productsQuery = useProducts();
+	const ordersQuery = useOrders({ status: "", from: "", to: "" }, 0, 100);
+	const ridesQuery = useRides();
+	const cart = useCart();
+	const products = productsQuery.data ?? [];
+	const orders = ordersQuery.data?.items ?? [];
+	const rides = ridesQuery.data ?? [];
+	const spendTrend = useMemo(() => dailyOrderRevenue(orders), [orders]);
+	const orderStatusData = useMemo(
+		() =>
+			statusCounts(orders, ["PENDING", "SHIPPED", "DELIVERED", "CANCELLED"]),
+		[orders],
+	);
+	const rideStatusData = useMemo(
+		() =>
+			statusCounts(rides, ["REQUESTED", "ACCEPTED", "COMPLETED", "CANCELLED"]),
+		[rides],
+	);
+	const spend = orders
+		.filter((order) => order.status !== "CANCELLED")
+		.reduce((total, order) => total + order.totalAmount, 0);
 
-    return (
-        <PageStack eyebrow="Customer" title="Dashboard" description="Your cart, orders, delivery rides, and recent buying activity.">
-            <div className="grid gap-4 md:grid-cols-4">
-                <MetricCard title="Cart items" value={String(cart.itemCount)} detail={formatCurrency(cart.totalAmount, cart.currency)}/>
-                <MetricCard title="Total spend" value={formatCurrency(spend, "KES")} detail="Completed and active orders"/>
-                <MetricCard title="Active orders" value={String(orders.filter((order) => order.status === "PENDING" || order.status === "SHIPPED").length)} detail="Awaiting delivery"/>
-                <MetricCard title="Available products" value={String(products.filter((product) => product.active && product.availableQuantity > 0).length)} detail="Ready to add to cart"/>
-            </div>
-            <div className="grid gap-4 xl:grid-cols-[minmax(0,1.4fr)_minmax(320px,0.8fr)]">
-                <Panel title="Spend trend" icon={<ClipboardList/>}>
-                    <RevenueAreaChart data={spendTrend}/>
-                </Panel>
-                <Panel title="Order status" icon={<ClipboardList/>}>
-                    <StatusPieChart data={orderStatusData}/>
-                </Panel>
-            </div>
-            <div className="grid gap-4 lg:grid-cols-2">
-                <Panel title="Ride status" icon={<Car/>}>
-                    <StatusBarChart data={rideStatusData}/>
-                </Panel>
-                <Panel title="Recent orders" icon={<ClipboardList/>}>
-                    <OrderTable orders={orders.slice(0, 6)} loading={ordersQuery.isLoading}/>
-                </Panel>
-            </div>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow="Customer"
+			title="Dashboard"
+			description="Your cart, orders, delivery rides, and recent buying activity."
+		>
+			<div className="grid gap-4 md:grid-cols-4">
+				<MetricCard
+					title="Cart items"
+					value={String(cart.itemCount)}
+					detail={formatCurrency(cart.totalAmount, cart.currency)}
+				/>
+				<MetricCard
+					title="Total spend"
+					value={formatCurrency(spend, "KES")}
+					detail="Completed and active orders"
+				/>
+				<MetricCard
+					title="Active orders"
+					value={String(
+						orders.filter(
+							(order) =>
+								order.status === "PENDING" || order.status === "SHIPPED",
+						).length,
+					)}
+					detail="Awaiting delivery"
+				/>
+				<MetricCard
+					title="Available products"
+					value={String(
+						products.filter(
+							(product) => product.active && product.availableQuantity > 0,
+						).length,
+					)}
+					detail="Ready to add to cart"
+				/>
+			</div>
+			<div className="grid gap-4 xl:grid-cols-[minmax(0,1.4fr)_minmax(320px,0.8fr)]">
+				<Panel title="Spend trend" icon={<ClipboardList />}>
+					<RevenueAreaChart data={spendTrend} />
+				</Panel>
+				<Panel title="Order status" icon={<ClipboardList />}>
+					<StatusPieChart data={orderStatusData} />
+				</Panel>
+			</div>
+			<div className="grid gap-4 lg:grid-cols-2">
+				<Panel title="Ride status" icon={<Car />}>
+					<StatusBarChart data={rideStatusData} />
+				</Panel>
+				<Panel title="Recent orders" icon={<ClipboardList />}>
+					<OrderTable
+						orders={orders.slice(0, 6)}
+						loading={ordersQuery.isLoading}
+					/>
+				</Panel>
+			</div>
+		</PageStack>
+	);
 }
 
 export function DriverOverviewPage() {
-    return (
-        <AppShell title="Driver overview" allowedRoles={["DRIVER"]}>
-            <DriverOverviewContent/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="Driver overview" allowedRoles={["DRIVER"]}>
+			<DriverOverviewContent />
+		</AppShell>
+	);
 }
 
 function DriverOverviewContent() {
-    const ridesQuery = useRides();
-    const rides = ridesQuery.data ?? [];
-    const statusData = useMemo(() => statusCounts(rides, ["REQUESTED", "ACCEPTED", "COMPLETED", "CANCELLED"]), [rides]);
-    const completedTrend = useMemo(() => dailyRideCounts(rides), [rides]);
-    const fareTrend = useMemo(() => dailyRideFares(rides), [rides]);
-    const assignedRides = rides.filter((ride) => ride.driverId && ride.status !== "CANCELLED");
-    const totalFare = assignedRides.reduce((total, ride) => total + (ride.fareAmount ?? 0), 0);
+	const ridesQuery = useRides();
+	const rides = ridesQuery.data ?? [];
+	const statusData = useMemo(
+		() =>
+			statusCounts(rides, ["REQUESTED", "ACCEPTED", "COMPLETED", "CANCELLED"]),
+		[rides],
+	);
+	const completedTrend = useMemo(() => dailyRideCounts(rides), [rides]);
+	const fareTrend = useMemo(() => dailyRideFares(rides), [rides]);
+	const assignedRides = rides.filter(
+		(ride) => ride.driverId && ride.status !== "CANCELLED",
+	);
+	const totalFare = assignedRides.reduce(
+		(total, ride) => total + (ride.fareAmount ?? 0),
+		0,
+	);
 
-    return (
-        <PageStack eyebrow="Driver" title="Dashboard" description="Available requests, active routes, completed rides, and fare activity.">
-            <div className="grid gap-4 md:grid-cols-4">
-                <MetricCard title="Available" value={String(rides.filter((ride) => ride.status === "REQUESTED").length)} detail="Open ride requests"/>
-                <MetricCard title="Active" value={String(rides.filter((ride) => ride.status === "ACCEPTED").length)} detail="Assigned routes"/>
-                <MetricCard title="Completed" value={String(rides.filter((ride) => ride.status === "COMPLETED").length)} detail="Finished deliveries"/>
-                <MetricCard title="Fare volume" value={formatCurrency(totalFare, "KES")} detail="Assigned rides"/>
-            </div>
-            <div className="grid gap-4 xl:grid-cols-[minmax(0,1.3fr)_minmax(320px,0.9fr)]">
-                <Panel title="Completed rides" icon={<Car/>}>
-                    <RideActivityChart data={completedTrend}/>
-                </Panel>
-                <Panel title="Ride status" icon={<Car/>}>
-                    <StatusBarChart data={statusData}/>
-                </Panel>
-            </div>
-            <div className="grid gap-4 lg:grid-cols-2">
-                <Panel title="Fare trend" icon={<Car/>}>
-                    <FareAreaChart data={fareTrend}/>
-                </Panel>
-                <Panel title="Active routes" icon={<Car/>}>
-                    <RideTable rides={rides.filter((ride) => ride.status === "REQUESTED" || ride.status === "ACCEPTED").slice(0, 8)} loading={ridesQuery.isLoading}/>
-                </Panel>
-            </div>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow="Driver"
+			title="Dashboard"
+			description="Available requests, active routes, completed rides, and fare activity."
+		>
+			<div className="grid gap-4 md:grid-cols-4">
+				<MetricCard
+					title="Available"
+					value={String(
+						rides.filter((ride) => ride.status === "REQUESTED").length,
+					)}
+					detail="Open ride requests"
+				/>
+				<MetricCard
+					title="Active"
+					value={String(
+						rides.filter((ride) => ride.status === "ACCEPTED").length,
+					)}
+					detail="Assigned routes"
+				/>
+				<MetricCard
+					title="Completed"
+					value={String(
+						rides.filter((ride) => ride.status === "COMPLETED").length,
+					)}
+					detail="Finished deliveries"
+				/>
+				<MetricCard
+					title="Fare volume"
+					value={formatCurrency(totalFare, "KES")}
+					detail="Assigned rides"
+				/>
+			</div>
+			<div className="grid gap-4 xl:grid-cols-[minmax(0,1.3fr)_minmax(320px,0.9fr)]">
+				<Panel title="Completed rides" icon={<Car />}>
+					<RideActivityChart data={completedTrend} />
+				</Panel>
+				<Panel title="Ride status" icon={<Car />}>
+					<StatusBarChart data={statusData} />
+				</Panel>
+			</div>
+			<div className="grid gap-4 lg:grid-cols-2">
+				<Panel title="Fare trend" icon={<Car />}>
+					<FareAreaChart data={fareTrend} />
+				</Panel>
+				<Panel title="Active routes" icon={<Car />}>
+					<RideTable
+						rides={rides
+							.filter(
+								(ride) =>
+									ride.status === "REQUESTED" || ride.status === "ACCEPTED",
+							)
+							.slice(0, 8)}
+						loading={ridesQuery.isLoading}
+					/>
+				</Panel>
+			</div>
+		</PageStack>
+	);
 }
 
 export function AdminInventoryPage() {
-    return (
-        <AppShell title="Inventory" allowedRoles={["ADMIN"]}>
-            <AdminInventoryContent/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="Inventory" allowedRoles={["ADMIN"]}>
+			<AdminInventoryContent />
+		</AppShell>
+	);
 }
 
 function AdminInventoryContent() {
-    const inventoryQuery = useInventory();
-    const lowStockQuery = useLowStockInventory();
-    const [searchQuery, setSearchQuery] = useState("");
-    const inventory = inventoryQuery.data?.items ?? [];
-    const filteredInventory = useMemo(() => inventory.filter((item) =>
-        matchesText(searchQuery, item.productName, item.sku, item.status)
-    ), [inventory, searchQuery]);
+	const inventoryQuery = useInventory();
+	const lowStockQuery = useLowStockInventory();
+	const [searchQuery, setSearchQuery] = useState("");
+	const inventory = inventoryQuery.data?.items ?? [];
+	const filteredInventory = useMemo(
+		() =>
+			inventory.filter((item) =>
+				matchesText(searchQuery, item.productName, item.sku, item.status),
+			),
+		[inventory, searchQuery],
+	);
 
-    return (
-        <PageStack eyebrow="Admin" title="Inventory health" description="Track available stock and reorder pressure.">
-            <div className="grid gap-4 md:grid-cols-3">
-                <MetricCard title="Items" value={String(inventory.length)} detail="Tracked SKUs"/>
-                <MetricCard title="Low stock" value={String(lowStockQuery.data?.items.length ?? 0)} detail="Need attention"/>
-                <MetricCard
-                    title="Out of stock"
-                    value={String(inventory.filter((item) => item.status === "OUT_OF_STOCK").length)}
-                    detail="Cannot be sold"
-                />
-            </div>
-            <Panel title="Inventory" icon={<Boxes/>}>
-                <div className="space-y-4">
-                    <SearchField
-                        value={searchQuery}
-                        onChange={setSearchQuery}
-                        placeholder="Search inventory by product, SKU, or status"
-                    />
-                    <InventoryTable items={filteredInventory} loading={inventoryQuery.isLoading}/>
-                </div>
-            </Panel>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow="Admin"
+			title="Inventory health"
+			description="Track available stock and reorder pressure."
+		>
+			<div className="grid gap-4 md:grid-cols-3">
+				<MetricCard
+					title="Items"
+					value={String(inventory.length)}
+					detail="Tracked SKUs"
+				/>
+				<MetricCard
+					title="Low stock"
+					value={String(lowStockQuery.data?.items.length ?? 0)}
+					detail="Need attention"
+				/>
+				<MetricCard
+					title="Out of stock"
+					value={String(
+						inventory.filter((item) => item.status === "OUT_OF_STOCK").length,
+					)}
+					detail="Cannot be sold"
+				/>
+			</div>
+			<Panel title="Inventory" icon={<Boxes />}>
+				<div className="space-y-4">
+					<SearchField
+						value={searchQuery}
+						onChange={setSearchQuery}
+						placeholder="Search inventory by product, SKU, or status"
+					/>
+					<InventoryTable
+						items={filteredInventory}
+						loading={inventoryQuery.isLoading}
+					/>
+				</div>
+			</Panel>
+		</PageStack>
+	);
 }
 
 export function AdminProductsPage() {
-    return (
-        <AppShell title="Products" allowedRoles={["ADMIN"]}>
-            <AdminProductsContent/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="Products" allowedRoles={["ADMIN"]}>
+			<AdminProductsContent />
+		</AppShell>
+	);
 }
 
 function AdminProductsContent() {
-    const productsQuery = useProducts();
-    const createProduct = useCreateProduct();
-    const updateProduct = useUpdateProduct();
-    const deactivateProduct = useDeactivateProduct();
-    const [editing, setEditing] = useState<Product | null>(null);
-    const [form, setForm] = useState<ProductRequest>(emptyProductForm);
-    const [searchQuery, setSearchQuery] = useState("");
-    const products = productsQuery.data ?? [];
-    const filteredProducts = useMemo(() => products.filter((product) =>
-        matchesText(searchQuery, product.name, product.sku, product.currency, product.active ? "active" : "inactive")
-    ), [products, searchQuery]);
+	const productsQuery = useProducts();
+	const createProduct = useCreateProduct();
+	const updateProduct = useUpdateProduct();
+	const deactivateProduct = useDeactivateProduct();
+	const [editing, setEditing] = useState<Product | null>(null);
+	const [form, setForm] = useState<ProductRequest>(emptyProductForm);
+	const [searchQuery, setSearchQuery] = useState("");
+	const products = productsQuery.data ?? [];
+	const filteredProducts = useMemo(
+		() =>
+			products.filter((product) =>
+				matchesText(
+					searchQuery,
+					product.name,
+					product.sku,
+					product.currency,
+					product.active ? "active" : "inactive",
+				),
+			),
+		[products, searchQuery],
+	);
 
-    async function submitProduct(event: FormEvent<HTMLFormElement>) {
-        event.preventDefault();
-        try {
-            if (editing) {
-                await updateProduct.mutateAsync({id: editing.id, request: form});
-                toast.success("Product updated");
-            } else {
-                await createProduct.mutateAsync(form);
-                toast.success("Product created");
-            }
-            setEditing(null);
-            setForm(emptyProductForm);
-        } catch (error) {
-            toastError(error, editing ? "Could not update product" : "Could not create product");
-        }
-    }
+	async function submitProduct(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		try {
+			if (editing) {
+				await updateProduct.mutateAsync({ id: editing.id, request: form });
+				toast.success("Product updated");
+			} else {
+				await createProduct.mutateAsync(form);
+				toast.success("Product created");
+			}
+			setEditing(null);
+			setForm(emptyProductForm);
+		} catch (error) {
+			toastError(
+				error,
+				editing ? "Could not update product" : "Could not create product",
+			);
+		}
+	}
 
-    function startEdit(product: Product) {
-        setEditing(product);
-        setForm({
-            name: product.name,
-            sku: product.sku,
-            price: product.price,
-            currency: product.currency,
-            active: product.active,
-            availableQuantity: product.availableQuantity,
-            reorderLevel: product.reorderLevel,
-        });
-    }
+	function startEdit(product: Product) {
+		setEditing(product);
+		setForm({
+			name: product.name,
+			sku: product.sku,
+			price: product.price,
+			currency: product.currency,
+			active: product.active,
+			availableQuantity: product.availableQuantity,
+			reorderLevel: product.reorderLevel,
+		});
+	}
 
-    return (
-        <PageStack eyebrow="Admin" title="Product catalog" description="Create products, update pricing, and manage availability.">
-            <Panel title={editing ? "Edit product" : "Add product"} icon={<PackagePlus/>}>
-                <ProductForm
-                    form={form}
-                    setForm={setForm}
-                    onSubmit={submitProduct}
-                    pending={createProduct.isPending || updateProduct.isPending}
-                    submitLabel={editing ? "Update product" : "Create product"}
-                />
-            </Panel>
-            <Panel title="Products" icon={<Boxes/>}>
-                <div className="space-y-4">
-                    <SearchField
-                        value={searchQuery}
-                        onChange={setSearchQuery}
-                        placeholder="Search products by name, SKU, currency, or status"
-                    />
-                    <ProductAdminTable
-                        products={filteredProducts}
-                        loading={productsQuery.isLoading}
-                        onEdit={startEdit}
-                        onDeactivate={(id) =>
-                            deactivateProduct.mutate(id, {
-                                onSuccess: () => toast.warning("Product deactivated"),
-                                onError: (error) => toastError(error, "Could not deactivate product"),
-                            })
-                        }
-                    />
-                </div>
-            </Panel>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow="Admin"
+			title="Product catalog"
+			description="Create products, update pricing, and manage availability."
+		>
+			<Panel
+				title={editing ? "Edit product" : "Add product"}
+				icon={<PackagePlus />}
+			>
+				<ProductForm
+					form={form}
+					setForm={setForm}
+					onSubmit={submitProduct}
+					pending={createProduct.isPending || updateProduct.isPending}
+					submitLabel={editing ? "Update product" : "Create product"}
+				/>
+			</Panel>
+			<Panel title="Products" icon={<Boxes />}>
+				<div className="space-y-4">
+					<SearchField
+						value={searchQuery}
+						onChange={setSearchQuery}
+						placeholder="Search products by name, SKU, currency, or status"
+					/>
+					<ProductAdminTable
+						products={filteredProducts}
+						loading={productsQuery.isLoading}
+						onEdit={startEdit}
+						onDeactivate={(id) =>
+							deactivateProduct.mutate(id, {
+								onSuccess: () => toast.warning("Product deactivated"),
+								onError: (error) =>
+									toastError(error, "Could not deactivate product"),
+							})
+						}
+					/>
+				</div>
+			</Panel>
+		</PageStack>
+	);
 }
 
 export function AdminProductCreatePage() {
-    return (
-        <AppShell title="Create product" allowedRoles={["ADMIN"]}>
-            <AdminProductCreateContent/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="Create product" allowedRoles={["ADMIN"]}>
+			<AdminProductCreateContent />
+		</AppShell>
+	);
 }
 
 function AdminProductCreateContent() {
-    const createProduct = useCreateProduct();
-    const [form, setForm] = useState<ProductRequest>(emptyProductForm);
+	const createProduct = useCreateProduct();
+	const [form, setForm] = useState<ProductRequest>(emptyProductForm);
 
-    async function submitProduct(event: FormEvent<HTMLFormElement>) {
-        event.preventDefault();
-        try {
-            await createProduct.mutateAsync(form);
-            setForm(emptyProductForm);
-            toast.success("Product created");
-        } catch (error) {
-            toastError(error, "Could not create product");
-        }
-    }
+	async function submitProduct(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		try {
+			await createProduct.mutateAsync(form);
+			setForm(emptyProductForm);
+			toast.success("Product created");
+		} catch (error) {
+			toastError(error, "Could not create product");
+		}
+	}
 
-    return (
-        <PageStack eyebrow="Admin" title="Create product" description="Add a new sellable product and starting stock.">
-            <Panel title="New product" icon={<PackagePlus/>}>
-                <ProductForm
-                    form={form}
-                    setForm={setForm}
-                    onSubmit={submitProduct}
-                    pending={createProduct.isPending}
-                    submitLabel="Create product"
-                />
-            </Panel>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow="Admin"
+			title="Create product"
+			description="Add a new sellable product and starting stock."
+		>
+			<Panel title="New product" icon={<PackagePlus />}>
+				<ProductForm
+					form={form}
+					setForm={setForm}
+					onSubmit={submitProduct}
+					pending={createProduct.isPending}
+					submitLabel="Create product"
+				/>
+			</Panel>
+		</PageStack>
+	);
 }
 
-export function AdminOrdersPage({status}: {status?: OrderStatus}) {
-    return (
-        <AppShell title={status === "PENDING" ? "Pending orders" : "Orders"} allowedRoles={["ADMIN"]}>
-            <OrdersContent admin status={status}/>
-        </AppShell>
-    );
+export function AdminOrdersPage({ status }: { status?: OrderStatus }) {
+	return (
+		<AppShell
+			title={status === "PENDING" ? "Pending orders" : "Orders"}
+			allowedRoles={["ADMIN"]}
+		>
+			<OrdersContent admin status={status} />
+		</AppShell>
+	);
 }
 
-export function CustomerOrdersPage({status}: {status?: OrderStatus}) {
-    return (
-        <AppShell title={status ? "Delivery status" : "My orders"} allowedRoles={["CUSTOMER"]} showCart>
-            <OrdersContent status={status}/>
-        </AppShell>
-    );
+export function CustomerOrdersPage({ status }: { status?: OrderStatus }) {
+	return (
+		<AppShell
+			title={status ? "Delivery status" : "My orders"}
+			allowedRoles={["CUSTOMER"]}
+			showCart
+		>
+			<OrdersContent status={status} />
+		</AppShell>
+	);
 }
 
-function OrdersContent({admin = false, status}: {admin?: boolean; status?: OrderStatus}) {
-    const ordersQuery = useOrders({status: status ?? "", from: "", to: ""});
-    const updateOrderStatus = useUpdateOrderStatus();
-    const [searchQuery, setSearchQuery] = useState("");
-    const orders = ordersQuery.data?.items ?? [];
-    const filteredOrders = useMemo(() => orders.filter((order) =>
-        matchesText(searchQuery, order.id, order.customerName, order.status, order.currency)
-    ), [orders, searchQuery]);
+function OrdersContent({
+	admin = false,
+	status,
+}: {
+	admin?: boolean;
+	status?: OrderStatus;
+}) {
+	const ordersQuery = useOrders({ status: status ?? "", from: "", to: "" });
+	const updateOrderStatus = useUpdateOrderStatus();
+	const [searchQuery, setSearchQuery] = useState("");
+	const orders = ordersQuery.data?.items ?? [];
+	const filteredOrders = useMemo(
+		() =>
+			orders.filter((order) =>
+				matchesText(
+					searchQuery,
+					order.id,
+					order.customerName,
+					order.status,
+					order.currency,
+				),
+			),
+		[orders, searchQuery],
+	);
 
-    return (
-        <PageStack
-            eyebrow={admin ? "Admin" : "Customer"}
-            title={status === "PENDING" ? "Pending orders" : status ? `${status.toLowerCase()} orders` : admin ? "All orders" : "Order history"}
-            description={admin ? "Review and update fulfillment status." : "Track your purchase history and delivery progress."}
-        >
-            <Panel title="Orders" icon={<ClipboardList/>}>
-                <div className="space-y-4">
-                    <SearchField
-                        value={searchQuery}
-                        onChange={setSearchQuery}
-                        placeholder="Search orders by ID, customer, status, or currency"
-                    />
-                    <OrderTable
-                        orders={filteredOrders}
-                        loading={ordersQuery.isLoading}
-                        action={
-                            admin
-                                ? (order) => (
-                                    <StatusSelect<OrderStatus>
-                                        value={order.status}
-                                        options={["PENDING", "SHIPPED", "DELIVERED", "CANCELLED"]}
-                                        onChange={(nextStatus) =>
-                                            updateOrderStatus.mutate(
-                                                {id: order.id, status: nextStatus},
-                                                {
-                                                    onSuccess: () => orderStatusToast(nextStatus),
-                                                    onError: (error) => toastError(error, "Could not update order"),
-                                                },
-                                            )
-                                        }
-                                    />
-                                )
-                                : undefined
-                        }
-                    />
-                </div>
-            </Panel>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow={admin ? "Admin" : "Customer"}
+			title={
+				status === "PENDING"
+					? "Pending orders"
+					: status
+						? `${status.toLowerCase()} orders`
+						: admin
+							? "All orders"
+							: "Order history"
+			}
+			description={
+				admin
+					? "Review and update fulfillment status."
+					: "Track your purchase history and delivery progress."
+			}
+		>
+			<Panel title="Orders" icon={<ClipboardList />}>
+				<div className="space-y-4">
+					<SearchField
+						value={searchQuery}
+						onChange={setSearchQuery}
+						placeholder="Search orders by ID, customer, status, or currency"
+					/>
+					<OrderTable
+						orders={filteredOrders}
+						loading={ordersQuery.isLoading}
+						action={
+							admin
+								? (order) => (
+										<StatusSelect<OrderStatus>
+											value={order.status}
+											options={["PENDING", "SHIPPED", "DELIVERED", "CANCELLED"]}
+											onChange={(nextStatus) =>
+												updateOrderStatus.mutate(
+													{ id: order.id, status: nextStatus },
+													{
+														onSuccess: () => orderStatusToast(nextStatus),
+														onError: (error) =>
+															toastError(error, "Could not update order"),
+													},
+												)
+											}
+										/>
+									)
+								: undefined
+						}
+					/>
+				</div>
+			</Panel>
+		</PageStack>
+	);
 }
 
-export function AdminRidesPage({status}: {status?: RideStatus}) {
-    return (
-        <AppShell title={status === "REQUESTED" ? "Ride requests" : status === "ACCEPTED" ? "Driver assignments" : "Rides"} allowedRoles={["ADMIN"]}>
-            <RidesContent admin status={status}/>
-        </AppShell>
-    );
+export function AdminRidesPage({ status }: { status?: RideStatus }) {
+	return (
+		<AppShell
+			title={
+				status === "REQUESTED"
+					? "Ride requests"
+					: status === "ACCEPTED"
+						? "Driver assignments"
+						: "Rides"
+			}
+			allowedRoles={["ADMIN"]}
+		>
+			<RidesContent admin status={status} />
+		</AppShell>
+	);
 }
 
 export function CustomerRidesPage() {
-    return (
-        <AppShell title="My rides" allowedRoles={["CUSTOMER"]} showCart>
-            <RidesContent/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="My rides" allowedRoles={["CUSTOMER"]} showCart>
+			<RidesContent />
+		</AppShell>
+	);
 }
 
 export function CustomerRideRequestPage() {
-    return (
-        <AppShell title="Request ride" allowedRoles={["CUSTOMER"]} showCart>
-            <RideRequestContent/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="Request ride" allowedRoles={["CUSTOMER"]} showCart>
+			<RideRequestContent />
+		</AppShell>
+	);
 }
 
-export function DriverRidesPage({status}: {status?: RideStatus}) {
-    return (
-        <AppShell
-            title={
-                status === "REQUESTED"
-                    ? "Available rides"
-                    : status === "ACCEPTED"
-                      ? "Active route"
-                      : status === "COMPLETED"
-                        ? "Completed rides"
-                        : "Driver rides"
-            }
-            allowedRoles={["DRIVER"]}
-        >
-            <RidesContent driver status={status}/>
-        </AppShell>
-    );
+export function DriverRidesPage({ status }: { status?: RideStatus }) {
+	return (
+		<AppShell
+			title={
+				status === "REQUESTED"
+					? "Available rides"
+					: status === "ACCEPTED"
+						? "Active route"
+						: status === "COMPLETED"
+							? "Completed rides"
+							: "Driver rides"
+			}
+			allowedRoles={["DRIVER"]}
+		>
+			<RidesContent driver status={status} />
+		</AppShell>
+	);
 }
 
 function RideRequestContent() {
-    const requestRide = useRequestRide();
-    const ordersQuery = useOrders({status: "", from: "", to: ""});
-    const [form, setForm] = useState({orderId: "", pickupLocation: "", dropoffLocation: "", distanceKm: "5"});
+	const requestRide = useRequestRide();
+	const ordersQuery = useOrders({ status: "", from: "", to: "" });
+	const [form, setForm] = useState({
+		orderId: "",
+		pickupLocation: "",
+		dropoffLocation: "",
+		distanceKm: "5",
+	});
 
-    async function submitRide(event: FormEvent<HTMLFormElement>) {
-        event.preventDefault();
-        if (!form.orderId) {
-            toast.error("Select an order first");
-            return;
-        }
-        try {
-            await requestRide.mutateAsync({
-                orderId: form.orderId,
-                pickupLocation: form.pickupLocation,
-                dropoffLocation: form.dropoffLocation,
-                distanceKm: Number(form.distanceKm),
-            });
-            setForm({orderId: "", pickupLocation: "", dropoffLocation: "", distanceKm: "5"});
-            toast.success("Ride requested", {description: "Drivers can now accept this delivery."});
-        } catch (error) {
-            toastError(error, "Could not request ride");
-        }
-    }
+	async function submitRide(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		if (!form.orderId) {
+			toast.error("Select an order first");
+			return;
+		}
+		try {
+			await requestRide.mutateAsync({
+				orderId: form.orderId,
+				pickupLocation: form.pickupLocation,
+				dropoffLocation: form.dropoffLocation,
+				distanceKm: Number(form.distanceKm),
+			});
+			setForm({
+				orderId: "",
+				pickupLocation: "",
+				dropoffLocation: "",
+				distanceKm: "5",
+			});
+			toast.success("Ride requested", {
+				description: "Drivers can now accept this delivery.",
+			});
+		} catch (error) {
+			toastError(error, "Could not request ride");
+		}
+	}
 
-    return (
-        <PageStack eyebrow="Customer" title="Request a ride" description="Create a delivery ride for an order you placed.">
-            <Panel title="Ride details" icon={<Car/>}>
-                <RideRequestForm
-                    form={form}
-                    setForm={setForm}
-                    orders={ordersQuery.data?.items ?? []}
-                    onSubmit={submitRide}
-                    pending={requestRide.isPending}
-                />
-            </Panel>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow="Customer"
+			title="Request a ride"
+			description="Create a delivery ride for an order you placed."
+		>
+			<Panel title="Ride details" icon={<Car />}>
+				<RideRequestForm
+					form={form}
+					setForm={setForm}
+					orders={ordersQuery.data?.items ?? []}
+					onSubmit={submitRide}
+					pending={requestRide.isPending}
+				/>
+			</Panel>
+		</PageStack>
+	);
 }
 
-function RidesContent({admin = false, driver = false, status}: {admin?: boolean; driver?: boolean; status?: RideStatus}) {
-    const ridesQuery = useRides();
-    const updateRideStatus = useUpdateRideStatus();
-    const acceptRide = useAcceptRide();
-    const completeRide = useCompleteRide();
-    const cancelRide = useCancelRide();
-    const [searchQuery, setSearchQuery] = useState("");
-    const rides = (ridesQuery.data ?? []).filter((ride) => !status || ride.status === status);
-    const filteredRides = useMemo(() => rides.filter((ride) =>
-        matchesText(
-            searchQuery,
-            ride.id,
-            ride.orderId ?? "",
-            ride.customerName,
-            ride.driverName ?? "",
-            ride.pickupLocation,
-            ride.dropoffLocation,
-            ride.status,
-        )
-    ), [rides, searchQuery]);
+function RidesContent({
+	admin = false,
+	driver = false,
+	status,
+}: {
+	admin?: boolean;
+	driver?: boolean;
+	status?: RideStatus;
+}) {
+	const ridesQuery = useRides();
+	const updateRideStatus = useUpdateRideStatus();
+	const acceptRide = useAcceptRide();
+	const completeRide = useCompleteRide();
+	const cancelRide = useCancelRide();
+	const [searchQuery, setSearchQuery] = useState("");
+	const rides = (ridesQuery.data ?? []).filter(
+		(ride) => !status || ride.status === status,
+	);
+	const filteredRides = useMemo(
+		() =>
+			rides.filter((ride) =>
+				matchesText(
+					searchQuery,
+					ride.id,
+					ride.orderId ?? "",
+					ride.customerName,
+					ride.driverName ?? "",
+					ride.pickupLocation,
+					ride.dropoffLocation,
+					ride.status,
+				),
+			),
+		[rides, searchQuery],
+	);
 
-    return (
-        <PageStack
-            eyebrow={admin ? "Admin" : driver ? "Driver" : "Customer"}
-            title={status ? `${status.toLowerCase()} rides` : driver ? "Ride board" : "Ride history"}
-            description={
-                admin
-                    ? "Monitor ride lifecycle and intervene when needed."
-                    : driver
-                      ? "Accept requested rides and complete assigned trips."
-                      : "Review your ride requests and current status."
-            }
-        >
-            <Panel title="Rides" icon={<Car/>}>
-                <div className="space-y-4">
-                    <SearchField
-                        value={searchQuery}
-                        onChange={setSearchQuery}
-                        placeholder="Search rides by ID, order, route, person, or status"
-                    />
-                    <RideTable
-                        rides={filteredRides}
-                        loading={ridesQuery.isLoading}
-                        action={(ride) => {
-                            if (admin) {
-                                return (
-                                    <StatusSelect<RideStatus>
-                                        value={ride.status}
-                                        options={["REQUESTED", "ACCEPTED", "COMPLETED", "CANCELLED"]}
-                                        onChange={(nextStatus) =>
-                                            updateRideStatus.mutate(
-                                                {id: ride.id, status: nextStatus},
-                                                {
-                                                    onSuccess: () => rideStatusToast(nextStatus),
-                                                    onError: (error) => toastError(error, "Could not update ride"),
-                                                },
-                                            )
-                                        }
-                                    />
-                                );
-                            }
-                            if (driver && ride.status === "REQUESTED") {
-                                return (
-                                    <Button
-                                        type="button"
-                                        size="sm"
-                                        onClick={() =>
-                                            acceptRide.mutate(ride.id, {
-                                                onSuccess: () => toast.info("Ride accepted", {description: "It is now assigned to you."}),
-                                                onError: (error) => toastError(error, "Could not accept ride"),
-                                            })
-                                        }
-                                    >
-                                        Accept
-                                    </Button>
-                                );
-                            }
-                            if (driver && ride.status === "ACCEPTED") {
-                                return (
-                                    <Button
-                                        type="button"
-                                        size="sm"
-                                        onClick={() =>
-                                            completeRide.mutate(ride.id, {
-                                                onSuccess: () => toast.success("Ride completed", {description: "The attached order was marked delivered."}),
-                                                onError: (error) => toastError(error, "Could not complete ride"),
-                                            })
-                                        }
-                                    >
-                                        Complete
-                                    </Button>
-                                );
-                            }
-                            if (!driver && !admin && ride.status === "REQUESTED") {
-                                return (
-                                    <Button
-                                        type="button"
-                                        variant="outline"
-                                        size="sm"
-                                        onClick={() =>
-                                            cancelRide.mutate(ride.id, {
-                                                onSuccess: () => toast.warning("Ride cancelled"),
-                                                onError: (error) => toastError(error, "Could not cancel ride"),
-                                            })
-                                        }
-                                    >
-                                        Cancel
-                                    </Button>
-                                );
-                            }
-                            return null;
-                        }}
-                    />
-                </div>
-            </Panel>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow={admin ? "Admin" : driver ? "Driver" : "Customer"}
+			title={
+				status
+					? `${status.toLowerCase()} rides`
+					: driver
+						? "Ride board"
+						: "Ride history"
+			}
+			description={
+				admin
+					? "Monitor ride lifecycle and intervene when needed."
+					: driver
+						? "Accept requested rides and complete assigned trips."
+						: "Review your ride requests and current status."
+			}
+		>
+			<Panel title="Rides" icon={<Car />}>
+				<div className="space-y-4">
+					<SearchField
+						value={searchQuery}
+						onChange={setSearchQuery}
+						placeholder="Search rides by ID, order, route, person, or status"
+					/>
+					<RideTable
+						rides={filteredRides}
+						loading={ridesQuery.isLoading}
+						action={(ride) => {
+							if (admin) {
+								return (
+									<StatusSelect<RideStatus>
+										value={ride.status}
+										options={[
+											"REQUESTED",
+											"ACCEPTED",
+											"COMPLETED",
+											"CANCELLED",
+										]}
+										onChange={(nextStatus) =>
+											updateRideStatus.mutate(
+												{ id: ride.id, status: nextStatus },
+												{
+													onSuccess: () => rideStatusToast(nextStatus),
+													onError: (error) =>
+														toastError(error, "Could not update ride"),
+												},
+											)
+										}
+									/>
+								);
+							}
+							if (driver && ride.status === "REQUESTED") {
+								return (
+									<Button
+										type="button"
+										size="sm"
+										onClick={() =>
+											acceptRide.mutate(ride.id, {
+												onSuccess: () =>
+													toast.info("Ride accepted", {
+														description: "It is now assigned to you.",
+													}),
+												onError: (error) =>
+													toastError(error, "Could not accept ride"),
+											})
+										}
+									>
+										Accept
+									</Button>
+								);
+							}
+							if (driver && ride.status === "ACCEPTED") {
+								return (
+									<Button
+										type="button"
+										size="sm"
+										onClick={() =>
+											completeRide.mutate(ride.id, {
+												onSuccess: () =>
+													toast.success("Ride completed", {
+														description:
+															"The attached order was marked delivered.",
+													}),
+												onError: (error) =>
+													toastError(error, "Could not complete ride"),
+											})
+										}
+									>
+										Complete
+									</Button>
+								);
+							}
+							if (!driver && !admin && ride.status === "REQUESTED") {
+								return (
+									<Button
+										type="button"
+										variant="outline"
+										size="sm"
+										onClick={() =>
+											cancelRide.mutate(ride.id, {
+												onSuccess: () => toast.warning("Ride cancelled"),
+												onError: (error) =>
+													toastError(error, "Could not cancel ride"),
+											})
+										}
+									>
+										Cancel
+									</Button>
+								);
+							}
+							return null;
+						}}
+					/>
+				</div>
+			</Panel>
+		</PageStack>
+	);
 }
 
 export function AdminCustomersPage() {
-    return (
-        <AppShell title="Customers" allowedRoles={["ADMIN"]}>
-            <AdminUsersContent roleFilter="CUSTOMER" title="Customers"/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="Customers" allowedRoles={["ADMIN"]}>
+			<AdminUsersContent roleFilter="CUSTOMER" title="Customers" />
+		</AppShell>
+	);
 }
 
 export function AdminDriversPage() {
-    return (
-        <AppShell title="Drivers" allowedRoles={["ADMIN"]}>
-            <AdminUsersContent roleFilter="DRIVER" title="Drivers"/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="Drivers" allowedRoles={["ADMIN"]}>
+			<AdminUsersContent roleFilter="DRIVER" title="Drivers" />
+		</AppShell>
+	);
 }
 
 export function AdminUsersPage() {
-    return (
-        <AppShell title="Users" allowedRoles={["ADMIN"]}>
-            <AdminUsersContent title="Users"/>
-        </AppShell>
-    );
+	return (
+		<AppShell title="Users" allowedRoles={["ADMIN"]}>
+			<AdminUsersContent title="Users" />
+		</AppShell>
+	);
 }
 
-function AdminUsersContent({roleFilter, title}: {roleFilter?: Role; title: string}) {
-    const usersQuery = useUsers();
-    const createUser = useCreateUser();
-    const updateUser = useUpdateUser();
-    const disableUser = useDisableUser();
-    const [editing, setEditing] = useState<UserSummary | null>(null);
-    const [form, setForm] = useState<AdminUserRequest>({
-        ...emptyUserForm,
-        role: roleFilter ?? "CUSTOMER",
-    });
-    const [searchQuery, setSearchQuery] = useState("");
-    const users = (usersQuery.data ?? []).filter((user) => !roleFilter || user.role === roleFilter);
-    const filteredUsers = useMemo(() => users.filter((user) =>
-        matchesText(searchQuery, user.displayName, user.username, user.role, user.enabled ? "enabled" : "disabled")
-    ), [users, searchQuery]);
+function AdminUsersContent({
+	roleFilter,
+	title,
+}: {
+	roleFilter?: Role;
+	title: string;
+}) {
+	const usersQuery = useUsers();
+	const createUser = useCreateUser();
+	const updateUser = useUpdateUser();
+	const disableUser = useDisableUser();
+	const [editing, setEditing] = useState<UserSummary | null>(null);
+	const [form, setForm] = useState<AdminUserRequest>({
+		...emptyUserForm,
+		role: roleFilter ?? "CUSTOMER",
+	});
+	const [searchQuery, setSearchQuery] = useState("");
+	const users = (usersQuery.data ?? []).filter(
+		(user) => !roleFilter || user.role === roleFilter,
+	);
+	const filteredUsers = useMemo(
+		() =>
+			users.filter((user) =>
+				matchesText(
+					searchQuery,
+					user.displayName,
+					user.username,
+					user.role,
+					user.enabled ? "enabled" : "disabled",
+				),
+			),
+		[users, searchQuery],
+	);
 
-    function startEdit(user: UserSummary) {
-        setEditing(user);
-        setForm({
-            username: user.username,
-            displayName: user.displayName,
-            password: "",
-            role: user.role,
-            enabled: user.enabled,
-        });
-    }
+	function startEdit(user: UserSummary) {
+		setEditing(user);
+		setForm({
+			username: user.username,
+			displayName: user.displayName,
+			password: "",
+			role: user.role,
+			enabled: user.enabled,
+		});
+	}
 
-    async function submitUser(event: FormEvent<HTMLFormElement>) {
-        event.preventDefault();
-        const request = {...form, role: roleFilter ?? form.role};
-        try {
-            if (editing) {
-                await updateUser.mutateAsync({id: editing.id, request});
-                toast.success("User updated");
-            } else {
-                await createUser.mutateAsync(request);
-                toast.success("User created");
-            }
-            setEditing(null);
-            setForm({...emptyUserForm, role: roleFilter ?? "CUSTOMER"});
-        } catch (error) {
-            toastError(error, editing ? "Could not update user" : "Could not create user");
-        }
-    }
+	async function submitUser(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		const request = { ...form, role: roleFilter ?? form.role };
+		try {
+			if (editing) {
+				await updateUser.mutateAsync({ id: editing.id, request });
+				toast.success("User updated");
+			} else {
+				await createUser.mutateAsync(request);
+				toast.success("User created");
+			}
+			setEditing(null);
+			setForm({ ...emptyUserForm, role: roleFilter ?? "CUSTOMER" });
+		} catch (error) {
+			toastError(
+				error,
+				editing ? "Could not update user" : "Could not create user",
+			);
+		}
+	}
 
-    return (
-        <PageStack eyebrow="Admin" title={title} description="Create, update, and disable platform accounts.">
-            <Panel title={editing ? "Edit user" : "Create user"} icon={<Users/>}>
-                <UserForm
-                    form={form}
-                    setForm={setForm}
-                    roleLocked={roleFilter}
-                    pending={createUser.isPending || updateUser.isPending}
-                    onSubmit={submitUser}
-                    submitLabel={editing ? "Update user" : "Create user"}
-                />
-            </Panel>
-            <Panel title={`${title} list`} icon={<Users/>}>
-                <div className="space-y-4">
-                    <SearchField
-                        value={searchQuery}
-                        onChange={setSearchQuery}
-                        placeholder="Search users by name, username, role, or status"
-                    />
-                    <UserTable
-                        users={filteredUsers}
-                        loading={usersQuery.isLoading}
-                        onEdit={startEdit}
-                        onDisable={(id) =>
-                            disableUser.mutate(id, {
-                                onSuccess: () => toast.warning("User disabled"),
-                                onError: (error) => toastError(error, "Could not disable user"),
-                            })
-                        }
-                    />
-                </div>
-            </Panel>
-        </PageStack>
-    );
+	return (
+		<PageStack
+			eyebrow="Admin"
+			title={title}
+			description="Create, update, and disable platform accounts."
+		>
+			<Panel title={editing ? "Edit user" : "Create user"} icon={<Users />}>
+				<UserForm
+					form={form}
+					setForm={setForm}
+					roleLocked={roleFilter}
+					pending={createUser.isPending || updateUser.isPending}
+					onSubmit={submitUser}
+					submitLabel={editing ? "Update user" : "Create user"}
+				/>
+			</Panel>
+			<Panel title={`${title} list`} icon={<Users />}>
+				<div className="space-y-4">
+					<SearchField
+						value={searchQuery}
+						onChange={setSearchQuery}
+						placeholder="Search users by name, username, role, or status"
+					/>
+					<UserTable
+						users={filteredUsers}
+						loading={usersQuery.isLoading}
+						onEdit={startEdit}
+						onDisable={(id) =>
+							disableUser.mutate(id, {
+								onSuccess: () => toast.warning("User disabled"),
+								onError: (error) => toastError(error, "Could not disable user"),
+							})
+						}
+					/>
+				</div>
+			</Panel>
+		</PageStack>
+	);
 }
 
 function PageStack({
-    eyebrow,
-    title,
-    description,
-    children,
+	eyebrow,
+	title,
+	description,
+	children,
 }: {
-    eyebrow: string;
-    title: string;
-    description: string;
-    children: ReactNode;
+	eyebrow: string;
+	title: string;
+	description: string;
+	children: ReactNode;
 }) {
-    return (
-        <div className="space-y-5">
-            <div>
-                <p className="text-sm font-medium uppercase text-muted-foreground">{eyebrow}</p>
-                <h1 className="mt-2 text-3xl font-semibold tracking-normal">{title}</h1>
-                <p className="mt-2 max-w-2xl text-sm text-muted-foreground">{description}</p>
-            </div>
-            {children}
-        </div>
-    );
+	return (
+		<div className="space-y-5">
+			<div>
+				<p className="text-sm font-medium uppercase text-muted-foreground">
+					{eyebrow}
+				</p>
+				<h1 className="mt-2 text-3xl font-semibold tracking-normal">{title}</h1>
+				<p className="mt-2 max-w-2xl text-sm text-muted-foreground">
+					{description}
+				</p>
+			</div>
+			{children}
+		</div>
+	);
 }
 
-function MetricCard({title, value, detail}: {title: string; value: string; detail: string}) {
-    return (
-        <Card>
-            <CardContent className="p-5">
-                <p className="text-sm text-muted-foreground">{title}</p>
-                <p className="mt-2 text-3xl font-semibold">{value}</p>
-                <p className="mt-1 text-sm text-muted-foreground">{detail}</p>
-            </CardContent>
-        </Card>
-    );
+function MetricCard({
+	title,
+	value,
+	detail,
+}: {
+	title: string;
+	value: string;
+	detail: string;
+}) {
+	return (
+		<Card>
+			<CardContent className="p-5">
+				<p className="text-sm text-muted-foreground">{title}</p>
+				<p className="mt-2 text-3xl font-semibold">{value}</p>
+				<p className="mt-1 text-sm text-muted-foreground">{detail}</p>
+			</CardContent>
+		</Card>
+	);
 }
 
-function Panel({title, icon, children}: {title: string; icon: ReactNode; children: ReactNode}) {
-    return (
-        <Card>
-            <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                    <span className="text-muted-foreground [&_svg]:size-5">{icon}</span>
-                    {title}
-                </CardTitle>
-            </CardHeader>
-            <CardContent>{children}</CardContent>
-        </Card>
-    );
+function Panel({
+	title,
+	icon,
+	children,
+}: {
+	title: string;
+	icon: ReactNode;
+	children: ReactNode;
+}) {
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="flex items-center gap-2">
+					<span className="text-muted-foreground [&_svg]:size-5">{icon}</span>
+					{title}
+				</CardTitle>
+			</CardHeader>
+			<CardContent>{children}</CardContent>
+		</Card>
+	);
 }
 
 function SearchField({
-    value,
-    onChange,
-    placeholder,
+	value,
+	onChange,
+	placeholder,
 }: {
-    value: string;
-    onChange: (value: string) => void;
-    placeholder: string;
+	value: string;
+	onChange: (value: string) => void;
+	placeholder: string;
 }) {
-    return (
-        <div className="relative max-w-xl">
-            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"/>
-            <Input
-                value={value}
-                onChange={(event) => onChange(event.target.value)}
-                placeholder={placeholder}
-                className="pl-9"
-                aria-label={placeholder}
-            />
-        </div>
-    );
+	return (
+		<div className="relative max-w-xl">
+			<Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+			<Input
+				value={value}
+				onChange={(event) => onChange(event.target.value)}
+				placeholder={placeholder}
+				className="pl-9"
+				aria-label={placeholder}
+			/>
+		</div>
+	);
 }
 
-function RevenueAreaChart({data}: {data: {label: string; revenue: number}[]}) {
-    return (
-        <ChartContainer
-            config={{revenue: {label: "Revenue", color: "var(--chart-1)"}}}
-            className="h-[260px] w-full"
-        >
-            <AreaChart data={data} margin={{left: 8, right: 8}}>
-                <CartesianGrid vertical={false}/>
-                <XAxis dataKey="label" tickLine={false} axisLine={false} tickMargin={8}/>
-                <YAxis tickLine={false} axisLine={false} tickMargin={8} tickFormatter={(value) => formatShortNumber(value)}/>
-                <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line"/>}/>
-                <Area
-                    dataKey="revenue"
-                    type="monotone"
-                    fill="var(--color-revenue)"
-                    fillOpacity={0.22}
-                    stroke="var(--color-revenue)"
-                    strokeWidth={2}
-                />
-            </AreaChart>
-        </ChartContainer>
-    );
+function RevenueAreaChart({
+	data,
+}: {
+	data: { label: string; revenue: number }[];
+}) {
+	return (
+		<ChartContainer
+			config={{ revenue: { label: "Revenue", color: "var(--chart-1)" } }}
+			className="h-[260px] w-full"
+		>
+			<AreaChart data={data} margin={{ left: 8, right: 8 }}>
+				<CartesianGrid vertical={false} />
+				<XAxis
+					dataKey="label"
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+				/>
+				<YAxis
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+					tickFormatter={(value) => formatShortNumber(value)}
+				/>
+				<ChartTooltip
+					cursor={false}
+					content={<ChartTooltipContent indicator="line" />}
+				/>
+				<Area
+					dataKey="revenue"
+					type="monotone"
+					fill="var(--color-revenue)"
+					fillOpacity={0.22}
+					stroke="var(--color-revenue)"
+					strokeWidth={2}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	);
 }
 
-function FareAreaChart({data}: {data: {label: string; fare: number}[]}) {
-    return (
-        <ChartContainer
-            config={{fare: {label: "Fare", color: "var(--chart-2)"}}}
-            className="h-[260px] w-full"
-        >
-            <AreaChart data={data} margin={{left: 8, right: 8}}>
-                <CartesianGrid vertical={false}/>
-                <XAxis dataKey="label" tickLine={false} axisLine={false} tickMargin={8}/>
-                <YAxis tickLine={false} axisLine={false} tickMargin={8} tickFormatter={(value) => formatShortNumber(value)}/>
-                <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line"/>}/>
-                <Area
-                    dataKey="fare"
-                    type="monotone"
-                    fill="var(--color-fare)"
-                    fillOpacity={0.2}
-                    stroke="var(--color-fare)"
-                    strokeWidth={2}
-                />
-            </AreaChart>
-        </ChartContainer>
-    );
+function FareAreaChart({ data }: { data: { label: string; fare: number }[] }) {
+	return (
+		<ChartContainer
+			config={{ fare: { label: "Fare", color: "var(--chart-2)" } }}
+			className="h-[260px] w-full"
+		>
+			<AreaChart data={data} margin={{ left: 8, right: 8 }}>
+				<CartesianGrid vertical={false} />
+				<XAxis
+					dataKey="label"
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+				/>
+				<YAxis
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+					tickFormatter={(value) => formatShortNumber(value)}
+				/>
+				<ChartTooltip
+					cursor={false}
+					content={<ChartTooltipContent indicator="line" />}
+				/>
+				<Area
+					dataKey="fare"
+					type="monotone"
+					fill="var(--color-fare)"
+					fillOpacity={0.2}
+					stroke="var(--color-fare)"
+					strokeWidth={2}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	);
 }
 
-function RideActivityChart({data}: {data: {label: string; completed: number}[]}) {
-    return (
-        <ChartContainer
-            config={{completed: {label: "Completed", color: "var(--chart-3)"}}}
-            className="h-[260px] w-full"
-        >
-            <BarChart data={data}>
-                <CartesianGrid vertical={false}/>
-                <XAxis dataKey="label" tickLine={false} axisLine={false} tickMargin={8}/>
-                <YAxis allowDecimals={false} tickLine={false} axisLine={false} tickMargin={8}/>
-                <ChartTooltip cursor={false} content={<ChartTooltipContent/>}/>
-                <Bar dataKey="completed" fill="var(--color-completed)" radius={[6, 6, 0, 0]}/>
-            </BarChart>
-        </ChartContainer>
-    );
+function RideActivityChart({
+	data,
+}: {
+	data: { label: string; completed: number }[];
+}) {
+	return (
+		<ChartContainer
+			config={{ completed: { label: "Completed", color: "var(--chart-3)" } }}
+			className="h-[260px] w-full"
+		>
+			<BarChart data={data}>
+				<CartesianGrid vertical={false} />
+				<XAxis
+					dataKey="label"
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+				/>
+				<YAxis
+					allowDecimals={false}
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+				/>
+				<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+				<Bar
+					dataKey="completed"
+					fill="var(--color-completed)"
+					radius={[6, 6, 0, 0]}
+				/>
+			</BarChart>
+		</ChartContainer>
+	);
 }
 
-function StatusBarChart({data}: {data: {status: string; count: number}[]}) {
-    return (
-        <ChartContainer
-            config={{count: {label: "Count", color: "var(--chart-2)"}}}
-            className="h-[260px] w-full"
-        >
-            <BarChart data={data} layout="vertical" margin={{left: 16, right: 8}}>
-                <CartesianGrid horizontal={false}/>
-                <XAxis type="number" allowDecimals={false} hide/>
-                <YAxis
-                    dataKey="status"
-                    type="category"
-                    tickLine={false}
-                    axisLine={false}
-                    tickMargin={8}
-                    width={86}
-                />
-                <ChartTooltip cursor={false} content={<ChartTooltipContent/>}/>
-                <Bar dataKey="count" radius={[0, 6, 6, 0]}>
-                    {data.map((item) => (
-                        <Cell key={item.status} fill={chartColorForStatus(item.status)}/>
-                    ))}
-                </Bar>
-            </BarChart>
-        </ChartContainer>
-    );
+function StatusBarChart({
+	data,
+}: {
+	data: { status: string; count: number }[];
+}) {
+	return (
+		<ChartContainer
+			config={{ count: { label: "Count", color: "var(--chart-2)" } }}
+			className="h-[260px] w-full"
+		>
+			<BarChart data={data} layout="vertical" margin={{ left: 16, right: 8 }}>
+				<CartesianGrid horizontal={false} />
+				<XAxis type="number" allowDecimals={false} hide />
+				<YAxis
+					dataKey="status"
+					type="category"
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+					width={86}
+				/>
+				<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+				<Bar dataKey="count" radius={[0, 6, 6, 0]}>
+					{data.map((item) => (
+						<Cell key={item.status} fill={chartColorForStatus(item.status)} />
+					))}
+				</Bar>
+			</BarChart>
+		</ChartContainer>
+	);
 }
 
-function StatusPieChart({data}: {data: {status: string; count: number}[]}) {
-    return (
-        <ChartContainer
-            config={{count: {label: "Count", color: "var(--chart-1)"}}}
-            className="h-[260px] w-full"
-        >
-            <PieChart>
-                <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel/>}/>
-                <Pie data={data} dataKey="count" nameKey="status" innerRadius={52} outerRadius={88} paddingAngle={2}>
-                    {data.map((item) => (
-                        <Cell key={item.status} fill={chartColorForStatus(item.status)}/>
-                    ))}
-                </Pie>
-            </PieChart>
-        </ChartContainer>
-    );
+function StatusPieChart({
+	data,
+}: {
+	data: { status: string; count: number }[];
+}) {
+	return (
+		<ChartContainer
+			config={{ count: { label: "Count", color: "var(--chart-1)" } }}
+			className="h-[260px] w-full"
+		>
+			<PieChart>
+				<ChartTooltip
+					cursor={false}
+					content={<ChartTooltipContent hideLabel />}
+				/>
+				<Pie
+					data={data}
+					dataKey="count"
+					nameKey="status"
+					innerRadius={52}
+					outerRadius={88}
+					paddingAngle={2}
+				>
+					{data.map((item) => (
+						<Cell key={item.status} fill={chartColorForStatus(item.status)} />
+					))}
+				</Pie>
+			</PieChart>
+		</ChartContainer>
+	);
 }
 
-function InventoryBarChart({data}: {data: {name: string; available: number; reorder: number}[]}) {
-    return (
-        <ChartContainer
-            config={{
-                available: {label: "Available", color: "var(--chart-2)"},
-                reorder: {label: "Reorder", color: "var(--chart-5)"},
-            }}
-            className="h-[260px] w-full"
-        >
-            <BarChart data={data}>
-                <CartesianGrid vertical={false}/>
-                <XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={8}/>
-                <YAxis allowDecimals={false} tickLine={false} axisLine={false} tickMargin={8}/>
-                <ChartTooltip cursor={false} content={<ChartTooltipContent/>}/>
-                <Bar dataKey="available" fill="var(--color-available)" radius={[6, 6, 0, 0]}/>
-                <Bar dataKey="reorder" fill="var(--color-reorder)" radius={[6, 6, 0, 0]}/>
-            </BarChart>
-        </ChartContainer>
-    );
+function InventoryBarChart({
+	data,
+}: {
+	data: { name: string; available: number; reorder: number }[];
+}) {
+	return (
+		<ChartContainer
+			config={{
+				available: { label: "Available", color: "var(--chart-2)" },
+				reorder: { label: "Reorder", color: "var(--chart-5)" },
+			}}
+			className="h-[260px] w-full"
+		>
+			<BarChart data={data}>
+				<CartesianGrid vertical={false} />
+				<XAxis
+					dataKey="name"
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+				/>
+				<YAxis
+					allowDecimals={false}
+					tickLine={false}
+					axisLine={false}
+					tickMargin={8}
+				/>
+				<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+				<Bar
+					dataKey="available"
+					fill="var(--color-available)"
+					radius={[6, 6, 0, 0]}
+				/>
+				<Bar
+					dataKey="reorder"
+					fill="var(--color-reorder)"
+					radius={[6, 6, 0, 0]}
+				/>
+			</BarChart>
+		</ChartContainer>
+	);
 }
 
 function ProductForm({
-    form,
-    setForm,
-    onSubmit,
-    pending,
-    submitLabel,
+	form,
+	setForm,
+	onSubmit,
+	pending,
+	submitLabel,
 }: {
-    form: ProductRequest;
-    setForm: (form: ProductRequest) => void;
-    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-    pending: boolean;
-    submitLabel: string;
+	form: ProductRequest;
+	setForm: (form: ProductRequest) => void;
+	onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+	pending: boolean;
+	submitLabel: string;
 }) {
-    return (
-        <form onSubmit={onSubmit} className="grid gap-4 md:grid-cols-4">
-            <Field label="Name" value={form.name} onChange={(value) => setForm({...form, name: value})}/>
-            <Field label="SKU" value={form.sku} onChange={(value) => setForm({...form, sku: value})}/>
-            <NumberField label="Price" value={form.price} onChange={(value) => setForm({...form, price: value})}/>
-            <Field label="Currency" value={form.currency} onChange={(value) => setForm({...form, currency: value})}/>
-            <NumberField label="Available" value={form.availableQuantity} onChange={(value) => setForm({...form, availableQuantity: value})}/>
-            <NumberField label="Reorder level" value={form.reorderLevel} onChange={(value) => setForm({...form, reorderLevel: value})}/>
-            <label className="flex items-end gap-2 pb-2 text-sm">
-                <input
-                    type="checkbox"
-                    checked={form.active}
-                    onChange={(event) => setForm({...form, active: event.target.checked})}
-                />
-                Active
-            </label>
-            <div className="flex items-end">
-                <Button type="submit" disabled={pending} className="w-full">
-                    {pending ? "Saving..." : submitLabel}
-                </Button>
-            </div>
-        </form>
-    );
+	return (
+		<form onSubmit={onSubmit} className="grid gap-4 md:grid-cols-4">
+			<Field
+				label="Name"
+				value={form.name}
+				onChange={(value) => setForm({ ...form, name: value })}
+			/>
+			<Field
+				label="SKU"
+				value={form.sku}
+				onChange={(value) => setForm({ ...form, sku: value })}
+			/>
+			<NumberField
+				label="Price"
+				value={form.price}
+				onChange={(value) => setForm({ ...form, price: value })}
+			/>
+			<Field
+				label="Currency"
+				value={form.currency}
+				onChange={(value) => setForm({ ...form, currency: value })}
+			/>
+			<NumberField
+				label="Available"
+				value={form.availableQuantity}
+				onChange={(value) => setForm({ ...form, availableQuantity: value })}
+			/>
+			<NumberField
+				label="Reorder level"
+				value={form.reorderLevel}
+				onChange={(value) => setForm({ ...form, reorderLevel: value })}
+			/>
+			<label className="flex items-end gap-2 pb-2 text-sm">
+				<input
+					type="checkbox"
+					checked={form.active}
+					onChange={(event) =>
+						setForm({ ...form, active: event.target.checked })
+					}
+				/>
+				Active
+			</label>
+			<div className="flex items-end">
+				<Button type="submit" disabled={pending} className="w-full">
+					{pending ? "Saving..." : submitLabel}
+				</Button>
+			</div>
+		</form>
+	);
 }
 
 function ProductAdminTable({
-    products,
-    loading,
-    onEdit,
-    onDeactivate,
+	products,
+	loading,
+	onEdit,
+	onDeactivate,
 }: {
-    products: Product[];
-    loading: boolean;
-    onEdit: (product: Product) => void;
-    onDeactivate: (id: string) => void;
+	products: Product[];
+	loading: boolean;
+	onEdit: (product: Product) => void;
+	onDeactivate: (id: string) => void;
 }) {
-    if (loading) {
-        return <LoadingState title="Loading products"/>;
-    }
+	if (loading) {
+		return <LoadingState title="Loading products" />;
+	}
 
-    return (
-        <Table>
-            <TableHeader>
-            <TableRow>
-                <TableHead>Product</TableHead>
-                <TableHead>Price</TableHead>
-                <TableHead>Stock</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Action</TableHead>
-            </TableRow>
-            </TableHeader>
-            <TableBody>
-            {products.map((product) => (
-                <TableRow key={product.id}>
-                    <TableCell>
-                        <Button asChild variant="link" className="h-auto p-0 font-medium">
-                            <Link to="/products/$productId" params={{productId: product.id}}>{product.name}</Link>
-                        </Button>
-                        <p className="text-xs text-muted-foreground">{product.sku}</p>
-                    </TableCell>
-                    <TableCell>{formatCurrency(product.price, product.currency)}</TableCell>
-                    <TableCell>{product.availableQuantity}</TableCell>
-                    <TableCell><StatusBadge status={product.active ? "ACTIVE" : "INACTIVE"} label={product.active ? "Active" : "Inactive"}/></TableCell>
-                    <TableCell>
-                        <div className="flex gap-2">
-                            <Button type="button" variant="outline" size="sm" onClick={() => onEdit(product)}>Edit</Button>
-                            <Button type="button" variant="destructive" size="sm" onClick={() => onDeactivate(product.id)}>Deactivate</Button>
-                        </div>
-                    </TableCell>
-                </TableRow>
-            ))}
-            </TableBody>
-        </Table>
-    );
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Product</TableHead>
+					<TableHead>Price</TableHead>
+					<TableHead>Stock</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Action</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{products.map((product) => (
+					<TableRow key={product.id}>
+						<TableCell>
+							<Button asChild variant="link" className="h-auto p-0 font-medium">
+								<Link
+									to="/products/$productId"
+									params={{ productId: product.id }}
+								>
+									{product.name}
+								</Link>
+							</Button>
+							<p className="text-xs text-muted-foreground">{product.sku}</p>
+						</TableCell>
+						<TableCell>
+							{formatCurrency(product.price, product.currency)}
+						</TableCell>
+						<TableCell>{product.availableQuantity}</TableCell>
+						<TableCell>
+							<StatusBadge
+								status={product.active ? "ACTIVE" : "INACTIVE"}
+								label={product.active ? "Active" : "Inactive"}
+							/>
+						</TableCell>
+						<TableCell>
+							<div className="flex gap-2">
+								<Button
+									type="button"
+									variant="outline"
+									size="sm"
+									onClick={() => onEdit(product)}
+								>
+									Edit
+								</Button>
+								<Button
+									type="button"
+									variant="destructive"
+									size="sm"
+									onClick={() => onDeactivate(product.id)}
+								>
+									Deactivate
+								</Button>
+							</div>
+						</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
 }
 
-function InventoryTable({items, loading}: {items: InventoryItem[]; loading: boolean}) {
-    if (loading) {
-        return <LoadingState title="Loading inventory"/>;
-    }
+function InventoryTable({
+	items,
+	loading,
+}: {
+	items: InventoryItem[];
+	loading: boolean;
+}) {
+	if (loading) {
+		return <LoadingState title="Loading inventory" />;
+	}
 
-    return (
-        <Table>
-            <TableHeader>
-            <TableRow>
-                <TableHead>Product</TableHead>
-                <TableHead>Available</TableHead>
-                <TableHead>Reserved</TableHead>
-                <TableHead>Reorder</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Updated</TableHead>
-            </TableRow>
-            </TableHeader>
-            <TableBody>
-            {items.map((item) => (
-                <TableRow key={item.productId}>
-                    <TableCell>
-                        <p className="font-medium">{item.productName}</p>
-                        <p className="text-xs text-muted-foreground">{item.sku}</p>
-                    </TableCell>
-                    <TableCell>{item.availableQuantity}</TableCell>
-                    <TableCell>{item.reservedQuantity}</TableCell>
-                    <TableCell>{item.reorderLevel}</TableCell>
-                    <TableCell><StatusBadge status={item.status}/></TableCell>
-                    <TableCell>{formatDate(item.updatedAt)}</TableCell>
-                </TableRow>
-            ))}
-            </TableBody>
-        </Table>
-    );
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Product</TableHead>
+					<TableHead>Available</TableHead>
+					<TableHead>Reserved</TableHead>
+					<TableHead>Reorder</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Updated</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{items.map((item) => (
+					<TableRow key={item.productId}>
+						<TableCell>
+							<p className="font-medium">{item.productName}</p>
+							<p className="text-xs text-muted-foreground">{item.sku}</p>
+						</TableCell>
+						<TableCell>{item.availableQuantity}</TableCell>
+						<TableCell>{item.reservedQuantity}</TableCell>
+						<TableCell>{item.reorderLevel}</TableCell>
+						<TableCell>
+							<StatusBadge status={item.status} />
+						</TableCell>
+						<TableCell>{formatDate(item.updatedAt)}</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
 }
 
 function OrderTable({
-    orders,
-    loading = false,
-    action,
+	orders,
+	loading = false,
+	action,
 }: {
-    orders: OrderSummary[];
-    loading?: boolean;
-    action?: (order: OrderSummary) => ReactNode;
+	orders: OrderSummary[];
+	loading?: boolean;
+	action?: (order: OrderSummary) => ReactNode;
 }) {
-    if (loading) {
-        return <LoadingState title="Loading orders"/>;
-    }
+	if (loading) {
+		return <LoadingState title="Loading orders" />;
+	}
 
-    if (orders.length === 0) {
-        return <EmptyPanel message="No orders found."/>;
-    }
+	if (orders.length === 0) {
+		return <EmptyPanel message="No orders found." />;
+	}
 
-    return (
-        <Table>
-            <TableHeader>
-            <TableRow>
-                <TableHead>Order</TableHead>
-                <TableHead>Customer</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Items</TableHead>
-                <TableHead>Total</TableHead>
-                <TableHead>Created</TableHead>
-                {action ? <TableHead>Action</TableHead> : null}
-            </TableRow>
-            </TableHeader>
-            <TableBody>
-            {orders.map((order) => (
-                <TableRow key={order.id}>
-                    <TableCell className="font-mono text-xs">{order.id.slice(0, 8)}</TableCell>
-                    <TableCell>{order.customerName}</TableCell>
-                    <TableCell><StatusBadge status={order.status}/></TableCell>
-                    <TableCell>{order.itemCount}</TableCell>
-                    <TableCell>{formatCurrency(order.totalAmount, order.currency)}</TableCell>
-                    <TableCell>{formatDate(order.createdAt)}</TableCell>
-                    {action ? <TableCell>{action(order)}</TableCell> : null}
-                </TableRow>
-            ))}
-            </TableBody>
-        </Table>
-    );
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Order</TableHead>
+					<TableHead>Customer</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Items</TableHead>
+					<TableHead>Total</TableHead>
+					<TableHead>Created</TableHead>
+					{action ? <TableHead>Action</TableHead> : null}
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{orders.map((order) => (
+					<TableRow key={order.id}>
+						<TableCell className="font-mono text-xs">
+							{order.id.slice(0, 8)}
+						</TableCell>
+						<TableCell>{order.customerName}</TableCell>
+						<TableCell>
+							<StatusBadge status={order.status} />
+						</TableCell>
+						<TableCell>{order.itemCount}</TableCell>
+						<TableCell>
+							{formatCurrency(order.totalAmount, order.currency)}
+						</TableCell>
+						<TableCell>{formatDate(order.createdAt)}</TableCell>
+						{action ? <TableCell>{action(order)}</TableCell> : null}
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
 }
 
 function RideRequestForm({
-    form,
-    setForm,
-    orders,
-    onSubmit,
-    pending,
+	form,
+	setForm,
+	orders,
+	onSubmit,
+	pending,
 }: {
-    form: {orderId: string; pickupLocation: string; dropoffLocation: string; distanceKm: string};
-    setForm: (form: {orderId: string; pickupLocation: string; dropoffLocation: string; distanceKm: string}) => void;
-    orders: OrderSummary[];
-    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-    pending: boolean;
+	form: {
+		orderId: string;
+		pickupLocation: string;
+		dropoffLocation: string;
+		distanceKm: string;
+	};
+	setForm: (form: {
+		orderId: string;
+		pickupLocation: string;
+		dropoffLocation: string;
+		distanceKm: string;
+	}) => void;
+	orders: OrderSummary[];
+	onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+	pending: boolean;
 }) {
-    return (
-        <form onSubmit={onSubmit} className="grid gap-4 md:grid-cols-5">
-            <div className="space-y-2">
-                <Label htmlFor="ride-order">Order</Label>
-                <select
-                    id="ride-order"
-                    value={form.orderId}
-                    onChange={(event) => setForm({...form, orderId: event.target.value})}
-                    className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
-                    required
-                >
-                    <option value="">Select order</option>
-                    {orders.map((order) => (
-                        <option key={order.id} value={order.id}>
-                            {order.id.slice(0, 8)} - {formatCurrency(order.totalAmount, order.currency)}
-                        </option>
-                    ))}
-                </select>
-            </div>
-            <Field label="Pickup" value={form.pickupLocation} onChange={(value) => setForm({...form, pickupLocation: value})}/>
-            <Field label="Dropoff" value={form.dropoffLocation} onChange={(value) => setForm({...form, dropoffLocation: value})}/>
-            <Field label="Distance KM" type="number" value={form.distanceKm} onChange={(value) => setForm({...form, distanceKm: value})}/>
-            <div className="flex items-end">
-                <Button type="submit" disabled={pending} className="w-full">
-                    {pending ? "Requesting..." : "Request ride"}
-                </Button>
-            </div>
-        </form>
-    );
+	return (
+		<form onSubmit={onSubmit} className="grid gap-4 md:grid-cols-5">
+			<div className="space-y-2">
+				<Label htmlFor="ride-order">Order</Label>
+				<select
+					id="ride-order"
+					value={form.orderId}
+					onChange={(event) =>
+						setForm({ ...form, orderId: event.target.value })
+					}
+					className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
+					required
+				>
+					<option value="">Select order</option>
+					{orders.map((order) => (
+						<option key={order.id} value={order.id}>
+							{order.id.slice(0, 8)} -{" "}
+							{formatCurrency(order.totalAmount, order.currency)}
+						</option>
+					))}
+				</select>
+			</div>
+			<Field
+				label="Pickup"
+				value={form.pickupLocation}
+				onChange={(value) => setForm({ ...form, pickupLocation: value })}
+			/>
+			<Field
+				label="Dropoff"
+				value={form.dropoffLocation}
+				onChange={(value) => setForm({ ...form, dropoffLocation: value })}
+			/>
+			<Field
+				label="Distance KM"
+				type="number"
+				value={form.distanceKm}
+				onChange={(value) => setForm({ ...form, distanceKm: value })}
+			/>
+			<div className="flex items-end">
+				<Button type="submit" disabled={pending} className="w-full">
+					{pending ? "Requesting..." : "Request ride"}
+				</Button>
+			</div>
+		</form>
+	);
 }
 
 function RideTable({
-    rides,
-    loading = false,
-    action,
+	rides,
+	loading = false,
+	action,
 }: {
-    rides: Ride[];
-    loading?: boolean;
-    action?: (ride: Ride) => ReactNode;
+	rides: Ride[];
+	loading?: boolean;
+	action?: (ride: Ride) => ReactNode;
 }) {
-    if (loading) {
-        return <LoadingState title="Loading rides"/>;
-    }
+	if (loading) {
+		return <LoadingState title="Loading rides" />;
+	}
 
-    if (rides.length === 0) {
-        return <EmptyPanel message="No rides found."/>;
-    }
+	if (rides.length === 0) {
+		return <EmptyPanel message="No rides found." />;
+	}
 
-    return (
-        <Table>
-            <TableHeader>
-            <TableRow>
-                <TableHead>Ride</TableHead>
-                <TableHead>Route</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Driver</TableHead>
-                <TableHead>Fare</TableHead>
-                <TableHead>Requested</TableHead>
-                {action ? <TableHead>Action</TableHead> : null}
-            </TableRow>
-            </TableHeader>
-            <TableBody>
-            {rides.map((ride) => (
-                <TableRow key={ride.id}>
-                    <TableCell className="font-mono text-xs">{ride.id.slice(0, 8)}</TableCell>
-                    <TableCell>{ride.pickupLocation} to {ride.dropoffLocation}</TableCell>
-                    <TableCell><StatusBadge status={ride.status}/></TableCell>
-                    <TableCell>{ride.driverName ?? "-"}</TableCell>
-                    <TableCell>{ride.fareAmount ? formatCurrency(ride.fareAmount, ride.currency) : "-"}</TableCell>
-                    <TableCell>{formatDate(ride.requestedAt)}</TableCell>
-                    {action ? <TableCell>{action(ride)}</TableCell> : null}
-                </TableRow>
-            ))}
-            </TableBody>
-        </Table>
-    );
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Ride</TableHead>
+					<TableHead>Route</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Driver</TableHead>
+					<TableHead>Fare</TableHead>
+					<TableHead>Requested</TableHead>
+					{action ? <TableHead>Action</TableHead> : null}
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{rides.map((ride) => (
+					<TableRow key={ride.id}>
+						<TableCell className="font-mono text-xs">
+							{ride.id.slice(0, 8)}
+						</TableCell>
+						<TableCell>
+							{ride.pickupLocation} to {ride.dropoffLocation}
+						</TableCell>
+						<TableCell>
+							<StatusBadge status={ride.status} />
+						</TableCell>
+						<TableCell>{ride.driverName ?? "-"}</TableCell>
+						<TableCell>
+							{ride.fareAmount
+								? formatCurrency(ride.fareAmount, ride.currency)
+								: "-"}
+						</TableCell>
+						<TableCell>{formatDate(ride.requestedAt)}</TableCell>
+						{action ? <TableCell>{action(ride)}</TableCell> : null}
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
 }
 
 function UserForm({
-    form,
-    setForm,
-    roleLocked,
-    pending,
-    onSubmit,
-    submitLabel,
+	form,
+	setForm,
+	roleLocked,
+	pending,
+	onSubmit,
+	submitLabel,
 }: {
-    form: AdminUserRequest;
-    setForm: (form: AdminUserRequest) => void;
-    roleLocked?: Role;
-    pending: boolean;
-    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-    submitLabel: string;
+	form: AdminUserRequest;
+	setForm: (form: AdminUserRequest) => void;
+	roleLocked?: Role;
+	pending: boolean;
+	onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+	submitLabel: string;
 }) {
-    return (
-        <form onSubmit={onSubmit} className="grid gap-4 md:grid-cols-5">
-            <Field label="Username" value={form.username} onChange={(value) => setForm({...form, username: value})}/>
-            <Field label="Display name" value={form.displayName} onChange={(value) => setForm({...form, displayName: value})}/>
-            <Field label="Password" type="password" value={form.password ?? ""} onChange={(value) => setForm({...form, password: value})}/>
-            <div className="space-y-2">
-                <Label htmlFor="user-role">Role</Label>
-                <select
-                    id="user-role"
-                    value={roleLocked ?? form.role}
-                    disabled={Boolean(roleLocked)}
-                    onChange={(event) => setForm({...form, role: event.target.value as Role})}
-                    className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
-                >
-                    {(["ADMIN", "CUSTOMER", "DRIVER"] as Role[]).map((role) => (
-                        <option key={role} value={role}>{role}</option>
-                    ))}
-                </select>
-            </div>
-            <label className="flex items-end gap-2 pb-2 text-sm">
-                <input
-                    type="checkbox"
-                    checked={form.enabled}
-                    onChange={(event) => setForm({...form, enabled: event.target.checked})}
-                />
-                Enabled
-            </label>
-            <div className="md:col-span-5">
-                <Button type="submit" disabled={pending}>{pending ? "Saving..." : submitLabel}</Button>
-            </div>
-        </form>
-    );
+	return (
+		<form onSubmit={onSubmit} className="grid gap-4 md:grid-cols-5">
+			<Field
+				label="Username"
+				value={form.username}
+				onChange={(value) => setForm({ ...form, username: value })}
+			/>
+			<Field
+				label="Display name"
+				value={form.displayName}
+				onChange={(value) => setForm({ ...form, displayName: value })}
+			/>
+			<Field
+				label="Password"
+				type="password"
+				value={form.password ?? ""}
+				onChange={(value) => setForm({ ...form, password: value })}
+			/>
+			<div className="space-y-2">
+				<Label htmlFor="user-role">Role</Label>
+				<select
+					id="user-role"
+					value={roleLocked ?? form.role}
+					disabled={Boolean(roleLocked)}
+					onChange={(event) =>
+						setForm({ ...form, role: event.target.value as Role })
+					}
+					className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
+				>
+					{(["ADMIN", "CUSTOMER", "DRIVER"] as Role[]).map((role) => (
+						<option key={role} value={role}>
+							{role}
+						</option>
+					))}
+				</select>
+			</div>
+			<label className="flex items-end gap-2 pb-2 text-sm">
+				<input
+					type="checkbox"
+					checked={form.enabled}
+					onChange={(event) =>
+						setForm({ ...form, enabled: event.target.checked })
+					}
+				/>
+				Enabled
+			</label>
+			<div className="md:col-span-5">
+				<Button type="submit" disabled={pending}>
+					{pending ? "Saving..." : submitLabel}
+				</Button>
+			</div>
+		</form>
+	);
 }
 
 function UserTable({
-    users,
-    loading,
-    onEdit,
-    onDisable,
+	users,
+	loading,
+	onEdit,
+	onDisable,
 }: {
-    users: UserSummary[];
-    loading: boolean;
-    onEdit: (user: UserSummary) => void;
-    onDisable: (id: string) => void;
+	users: UserSummary[];
+	loading: boolean;
+	onEdit: (user: UserSummary) => void;
+	onDisable: (id: string) => void;
 }) {
-    if (loading) {
-        return <LoadingState title="Loading users"/>;
-    }
+	if (loading) {
+		return <LoadingState title="Loading users" />;
+	}
 
-    if (users.length === 0) {
-        return <EmptyPanel message="No users found."/>;
-    }
+	if (users.length === 0) {
+		return <EmptyPanel message="No users found." />;
+	}
 
-    return (
-        <Table>
-            <TableHeader>
-            <TableRow>
-                <TableHead>Name</TableHead>
-                <TableHead>Username</TableHead>
-                <TableHead>Role</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Created</TableHead>
-                <TableHead>Action</TableHead>
-            </TableRow>
-            </TableHeader>
-            <TableBody>
-            {users.map((user) => (
-                <TableRow key={user.id}>
-                    <TableCell>{user.displayName}</TableCell>
-                    <TableCell>{user.username}</TableCell>
-                    <TableCell><StatusBadge status={user.role}/></TableCell>
-                    <TableCell><StatusBadge status={user.enabled ? "ENABLED" : "DISABLED"} label={user.enabled ? "Enabled" : "Disabled"}/></TableCell>
-                    <TableCell>{formatDate(user.createdAt)}</TableCell>
-                    <TableCell>
-                        <div className="flex gap-2">
-                            <Button type="button" size="sm" variant="outline" onClick={() => onEdit(user)}>Edit</Button>
-                            <Button type="button" size="sm" variant="destructive" disabled={!user.enabled} onClick={() => onDisable(user.id)}>
-                                Disable
-                            </Button>
-                        </div>
-                    </TableCell>
-                </TableRow>
-            ))}
-            </TableBody>
-        </Table>
-    );
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Name</TableHead>
+					<TableHead>Username</TableHead>
+					<TableHead>Role</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Created</TableHead>
+					<TableHead>Action</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{users.map((user) => (
+					<TableRow key={user.id}>
+						<TableCell>{user.displayName}</TableCell>
+						<TableCell>{user.username}</TableCell>
+						<TableCell>
+							<StatusBadge status={user.role} />
+						</TableCell>
+						<TableCell>
+							<StatusBadge
+								status={user.enabled ? "ENABLED" : "DISABLED"}
+								label={user.enabled ? "Enabled" : "Disabled"}
+							/>
+						</TableCell>
+						<TableCell>{formatDate(user.createdAt)}</TableCell>
+						<TableCell>
+							<div className="flex gap-2">
+								<Button
+									type="button"
+									size="sm"
+									variant="outline"
+									onClick={() => onEdit(user)}
+								>
+									Edit
+								</Button>
+								<Button
+									type="button"
+									size="sm"
+									variant="destructive"
+									disabled={!user.enabled}
+									onClick={() => onDisable(user.id)}
+								>
+									Disable
+								</Button>
+							</div>
+						</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
 }
 
 function StatusSelect<T extends string>({
-    value,
-    options,
-    onChange,
+	value,
+	options,
+	onChange,
 }: {
-    value: T;
-    options: T[];
-    onChange: (value: T) => void;
+	value: T;
+	options: T[];
+	onChange: (value: T) => void;
 }) {
-    return (
-        <select
-            value={value}
-            onChange={(event) => onChange(event.target.value as T)}
-            className={`h-8 rounded-md border px-2 text-xs font-medium ${statusColorClass(value)}`}
-        >
-            {options.map((option) => (
-                <option key={option} value={option}>{option}</option>
-            ))}
-        </select>
-    );
+	return (
+		<select
+			value={value}
+			onChange={(event) => onChange(event.target.value as T)}
+			className={`h-8 rounded-md border px-2 text-xs font-medium ${statusColorClass(value)}`}
+		>
+			{options.map((option) => (
+				<option key={option} value={option}>
+					{option}
+				</option>
+			))}
+		</select>
+	);
 }
 
 function Field({
-    label,
-    value,
-    onChange,
-    type = "text",
+	label,
+	value,
+	onChange,
+	type = "text",
 }: {
-    label: string;
-    value: string;
-    onChange: (value: string) => void;
-    type?: string;
+	label: string;
+	value: string;
+	onChange: (value: string) => void;
+	type?: string;
 }) {
-    const id = label.toLowerCase().replace(/\s+/g, "-");
+	const id = label.toLowerCase().replace(/\s+/g, "-");
 
-    return (
-        <div className="space-y-2">
-            <Label htmlFor={id}>{label}</Label>
-            <Input
-                id={id}
-                type={type}
-                value={value}
-                onChange={(event) => onChange(event.target.value)}
-                required
-            />
-        </div>
-    );
+	return (
+		<div className="space-y-2">
+			<Label htmlFor={id}>{label}</Label>
+			<Input
+				id={id}
+				type={type}
+				value={value}
+				onChange={(event) => onChange(event.target.value)}
+				required
+			/>
+		</div>
+	);
 }
 
-function NumberField({label, value, onChange}: {label: string; value: number; onChange: (value: number) => void}) {
-    return <Field label={label} type="number" value={String(value)} onChange={(value) => onChange(Number(value))}/>;
+function NumberField({
+	label,
+	value,
+	onChange,
+}: {
+	label: string;
+	value: number;
+	onChange: (value: number) => void;
+}) {
+	return (
+		<Field
+			label={label}
+			type="number"
+			value={String(value)}
+			onChange={(value) => onChange(Number(value))}
+		/>
+	);
 }
 
-function EmptyPanel({message}: {message: string}) {
-    return (
-        <div className="rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">
-            {message}
-        </div>
-    );
+function EmptyPanel({ message }: { message: string }) {
+	return (
+		<div className="rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">
+			{message}
+		</div>
+	);
 }
 
 function dailyOrderRevenue(orders: OrderSummary[]) {
-    const days = lastDays(7);
-    return days.map((day) => ({
-        label: day.label,
-        revenue: orders
-            .filter((order) => order.status !== "CANCELLED" && dateKey(order.createdAt) === day.key)
-            .reduce((total, order) => total + order.totalAmount, 0),
-    }));
+	const days = lastDays(7);
+	return days.map((day) => ({
+		label: day.label,
+		revenue: orders
+			.filter(
+				(order) =>
+					order.status !== "CANCELLED" && dateKey(order.createdAt) === day.key,
+			)
+			.reduce((total, order) => total + order.totalAmount, 0),
+	}));
 }
 
 function dailyRideCounts(rides: Ride[]) {
-    const days = lastDays(7);
-    return days.map((day) => ({
-        label: day.label,
-        completed: rides.filter((ride) => ride.status === "COMPLETED" && ride.completedAt && dateKey(ride.completedAt) === day.key).length,
-    }));
+	const days = lastDays(7);
+	return days.map((day) => ({
+		label: day.label,
+		completed: rides.filter(
+			(ride) =>
+				ride.status === "COMPLETED" &&
+				ride.completedAt &&
+				dateKey(ride.completedAt) === day.key,
+		).length,
+	}));
 }
 
 function dailyRideFares(rides: Ride[]) {
-    const days = lastDays(7);
-    return days.map((day) => ({
-        label: day.label,
-        fare: rides
-            .filter((ride) => ride.fareAmount && ride.acceptedAt && dateKey(ride.acceptedAt) === day.key)
-            .reduce((total, ride) => total + (ride.fareAmount ?? 0), 0),
-    }));
+	const days = lastDays(7);
+	return days.map((day) => ({
+		label: day.label,
+		fare: rides
+			.filter(
+				(ride) =>
+					ride.fareAmount &&
+					ride.acceptedAt &&
+					dateKey(ride.acceptedAt) === day.key,
+			)
+			.reduce((total, ride) => total + (ride.fareAmount ?? 0), 0),
+	}));
 }
 
-function statusCounts<T extends {status: string}>(items: T[], statuses: string[]) {
-    return statuses.map((status) => ({
-        status,
-        count: items.filter((item) => item.status === status).length,
-    }));
+function statusCounts<T extends { status: string }>(
+	items: T[],
+	statuses: string[],
+) {
+	return statuses.map((status) => ({
+		status,
+		count: items.filter((item) => item.status === status).length,
+	}));
 }
 
 function lastDays(count: number) {
-    const formatter = new Intl.DateTimeFormat(undefined, {month: "short", day: "numeric"});
-    return Array.from({length: count}, (_, index) => {
-        const date = new Date();
-        date.setHours(0, 0, 0, 0);
-        date.setDate(date.getDate() - (count - index - 1));
-        return {
-            key: date.toISOString().slice(0, 10),
-            label: formatter.format(date),
-        };
-    });
+	const formatter = new Intl.DateTimeFormat(undefined, {
+		month: "short",
+		day: "numeric",
+	});
+	return Array.from({ length: count }, (_, index) => {
+		const date = new Date();
+		date.setHours(0, 0, 0, 0);
+		date.setDate(date.getDate() - (count - index - 1));
+		return {
+			key: date.toISOString().slice(0, 10),
+			label: formatter.format(date),
+		};
+	});
 }
 
 function dateKey(value: string) {
-    return new Date(value).toISOString().slice(0, 10);
+	return new Date(value).toISOString().slice(0, 10);
 }
 
 function compactLabel(value: string) {
-    const words = value.split(/\s+/);
-    if (words.length === 1) {
-        return value.slice(0, 10);
-    }
-    return words.map((word) => word[0]).join("").slice(0, 6).toUpperCase();
+	const words = value.split(/\s+/);
+	if (words.length === 1) {
+		return value.slice(0, 10);
+	}
+	return words
+		.map((word) => word[0])
+		.join("")
+		.slice(0, 6)
+		.toUpperCase();
 }
 
 function formatShortNumber(value: number) {
-    return new Intl.NumberFormat(undefined, {notation: "compact", maximumFractionDigits: 1}).format(value);
+	return new Intl.NumberFormat(undefined, {
+		notation: "compact",
+		maximumFractionDigits: 1,
+	}).format(value);
 }
 
 function chartColorForStatus(status: string) {
-    switch (status) {
-        case "DELIVERED":
-        case "COMPLETED":
-            return "var(--chart-2)";
-        case "PENDING":
-        case "REQUESTED":
-            return "var(--chart-4)";
-        case "SHIPPED":
-        case "ACCEPTED":
-            return "var(--chart-1)";
-        case "CANCELLED":
-            return "var(--chart-5)";
-        default:
-            return "var(--chart-3)";
-    }
+	switch (status) {
+		case "DELIVERED":
+		case "COMPLETED":
+			return "var(--chart-2)";
+		case "PENDING":
+		case "REQUESTED":
+			return "var(--chart-4)";
+		case "SHIPPED":
+		case "ACCEPTED":
+			return "var(--chart-1)";
+		case "CANCELLED":
+			return "var(--chart-5)";
+		default:
+			return "var(--chart-3)";
+	}
 }
 
-function matchesText(query: string, ...values: Array<string | number | null | undefined>) {
-    const normalizedQuery = query.trim().toLowerCase();
-    if (!normalizedQuery) {
-        return true;
-    }
+function matchesText(
+	query: string,
+	...values: Array<string | number | null | undefined>
+) {
+	const normalizedQuery = query.trim().toLowerCase();
+	if (!normalizedQuery) {
+		return true;
+	}
 
-    return values.some((value) => String(value ?? "").toLowerCase().includes(normalizedQuery));
+	return values.some((value) =>
+		String(value ?? "")
+			.toLowerCase()
+			.includes(normalizedQuery),
+	);
 }
 
 function errorMessage(error: unknown) {
-    return error instanceof Error ? error.message : "Request failed";
+	return error instanceof Error ? error.message : "Request failed";
 }
 
 function toastError(error: unknown, fallback: string) {
-    toast.error(fallback, {description: errorMessage(error)});
+	toast.error(fallback, { description: errorMessage(error) });
 }
 
 function orderStatusToast(status: OrderStatus) {
-    if (status === "CANCELLED") {
-        toast.warning("Order cancelled");
-        return;
-    }
+	if (status === "CANCELLED") {
+		toast.warning("Order cancelled");
+		return;
+	}
 
-    if (status === "DELIVERED") {
-        toast.success("Order delivered");
-        return;
-    }
+	if (status === "DELIVERED") {
+		toast.success("Order delivered");
+		return;
+	}
 
-    toast.info("Order updated", {description: `Status changed to ${status}.`});
+	toast.info("Order updated", { description: `Status changed to ${status}.` });
 }
 
 function rideStatusToast(status: RideStatus) {
-    if (status === "CANCELLED") {
-        toast.warning("Ride cancelled");
-        return;
-    }
+	if (status === "CANCELLED") {
+		toast.warning("Ride cancelled");
+		return;
+	}
 
-    if (status === "COMPLETED") {
-        toast.success("Ride completed", {description: "The attached order was marked delivered."});
-        return;
-    }
+	if (status === "COMPLETED") {
+		toast.success("Ride completed", {
+			description: "The attached order was marked delivered.",
+		});
+		return;
+	}
 
-    toast.info("Ride updated", {description: `Status changed to ${status}.`});
+	toast.info("Ride updated", { description: `Status changed to ${status}.` });
 }
diff --git a/orders-frontend/src/components/chart-area-interactive.tsx b/orders-frontend/src/components/chart-area-interactive.tsx
index 0314ae6..9d7c420 100644
--- a/orders-frontend/src/components/chart-area-interactive.tsx
+++ b/orders-frontend/src/components/chart-area-interactive.tsx
@@ -1,291 +1,287 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+import * as React from "react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import {
+	Card,
+	CardAction,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "#/components/ui/card.tsx";
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from "#/components/ui/chart.tsx";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "#/components/ui/select.tsx";
+import { ToggleGroup, ToggleGroupItem } from "#/components/ui/toggle-group.tsx";
+import { useIsMobile } from "#/hooks/use-mobile.ts";
 
-import { useIsMobile } from "#/hooks/use-mobile.ts"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "#/components/ui/card.tsx"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "#/components/ui/chart.tsx"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "#/components/ui/select.tsx"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "#/components/ui/toggle-group.tsx"
-
-export const description = "An interactive area chart"
+export const description = "An interactive area chart";
 
 const chartData = [
-  { date: "2024-04-01", desktop: 222, mobile: 150 },
-  { date: "2024-04-02", desktop: 97, mobile: 180 },
-  { date: "2024-04-03", desktop: 167, mobile: 120 },
-  { date: "2024-04-04", desktop: 242, mobile: 260 },
-  { date: "2024-04-05", desktop: 373, mobile: 290 },
-  { date: "2024-04-06", desktop: 301, mobile: 340 },
-  { date: "2024-04-07", desktop: 245, mobile: 180 },
-  { date: "2024-04-08", desktop: 409, mobile: 320 },
-  { date: "2024-04-09", desktop: 59, mobile: 110 },
-  { date: "2024-04-10", desktop: 261, mobile: 190 },
-  { date: "2024-04-11", desktop: 327, mobile: 350 },
-  { date: "2024-04-12", desktop: 292, mobile: 210 },
-  { date: "2024-04-13", desktop: 342, mobile: 380 },
-  { date: "2024-04-14", desktop: 137, mobile: 220 },
-  { date: "2024-04-15", desktop: 120, mobile: 170 },
-  { date: "2024-04-16", desktop: 138, mobile: 190 },
-  { date: "2024-04-17", desktop: 446, mobile: 360 },
-  { date: "2024-04-18", desktop: 364, mobile: 410 },
-  { date: "2024-04-19", desktop: 243, mobile: 180 },
-  { date: "2024-04-20", desktop: 89, mobile: 150 },
-  { date: "2024-04-21", desktop: 137, mobile: 200 },
-  { date: "2024-04-22", desktop: 224, mobile: 170 },
-  { date: "2024-04-23", desktop: 138, mobile: 230 },
-  { date: "2024-04-24", desktop: 387, mobile: 290 },
-  { date: "2024-04-25", desktop: 215, mobile: 250 },
-  { date: "2024-04-26", desktop: 75, mobile: 130 },
-  { date: "2024-04-27", desktop: 383, mobile: 420 },
-  { date: "2024-04-28", desktop: 122, mobile: 180 },
-  { date: "2024-04-29", desktop: 315, mobile: 240 },
-  { date: "2024-04-30", desktop: 454, mobile: 380 },
-  { date: "2024-05-01", desktop: 165, mobile: 220 },
-  { date: "2024-05-02", desktop: 293, mobile: 310 },
-  { date: "2024-05-03", desktop: 247, mobile: 190 },
-  { date: "2024-05-04", desktop: 385, mobile: 420 },
-  { date: "2024-05-05", desktop: 481, mobile: 390 },
-  { date: "2024-05-06", desktop: 498, mobile: 520 },
-  { date: "2024-05-07", desktop: 388, mobile: 300 },
-  { date: "2024-05-08", desktop: 149, mobile: 210 },
-  { date: "2024-05-09", desktop: 227, mobile: 180 },
-  { date: "2024-05-10", desktop: 293, mobile: 330 },
-  { date: "2024-05-11", desktop: 335, mobile: 270 },
-  { date: "2024-05-12", desktop: 197, mobile: 240 },
-  { date: "2024-05-13", desktop: 197, mobile: 160 },
-  { date: "2024-05-14", desktop: 448, mobile: 490 },
-  { date: "2024-05-15", desktop: 473, mobile: 380 },
-  { date: "2024-05-16", desktop: 338, mobile: 400 },
-  { date: "2024-05-17", desktop: 499, mobile: 420 },
-  { date: "2024-05-18", desktop: 315, mobile: 350 },
-  { date: "2024-05-19", desktop: 235, mobile: 180 },
-  { date: "2024-05-20", desktop: 177, mobile: 230 },
-  { date: "2024-05-21", desktop: 82, mobile: 140 },
-  { date: "2024-05-22", desktop: 81, mobile: 120 },
-  { date: "2024-05-23", desktop: 252, mobile: 290 },
-  { date: "2024-05-24", desktop: 294, mobile: 220 },
-  { date: "2024-05-25", desktop: 201, mobile: 250 },
-  { date: "2024-05-26", desktop: 213, mobile: 170 },
-  { date: "2024-05-27", desktop: 420, mobile: 460 },
-  { date: "2024-05-28", desktop: 233, mobile: 190 },
-  { date: "2024-05-29", desktop: 78, mobile: 130 },
-  { date: "2024-05-30", desktop: 340, mobile: 280 },
-  { date: "2024-05-31", desktop: 178, mobile: 230 },
-  { date: "2024-06-01", desktop: 178, mobile: 200 },
-  { date: "2024-06-02", desktop: 470, mobile: 410 },
-  { date: "2024-06-03", desktop: 103, mobile: 160 },
-  { date: "2024-06-04", desktop: 439, mobile: 380 },
-  { date: "2024-06-05", desktop: 88, mobile: 140 },
-  { date: "2024-06-06", desktop: 294, mobile: 250 },
-  { date: "2024-06-07", desktop: 323, mobile: 370 },
-  { date: "2024-06-08", desktop: 385, mobile: 320 },
-  { date: "2024-06-09", desktop: 438, mobile: 480 },
-  { date: "2024-06-10", desktop: 155, mobile: 200 },
-  { date: "2024-06-11", desktop: 92, mobile: 150 },
-  { date: "2024-06-12", desktop: 492, mobile: 420 },
-  { date: "2024-06-13", desktop: 81, mobile: 130 },
-  { date: "2024-06-14", desktop: 426, mobile: 380 },
-  { date: "2024-06-15", desktop: 307, mobile: 350 },
-  { date: "2024-06-16", desktop: 371, mobile: 310 },
-  { date: "2024-06-17", desktop: 475, mobile: 520 },
-  { date: "2024-06-18", desktop: 107, mobile: 170 },
-  { date: "2024-06-19", desktop: 341, mobile: 290 },
-  { date: "2024-06-20", desktop: 408, mobile: 450 },
-  { date: "2024-06-21", desktop: 169, mobile: 210 },
-  { date: "2024-06-22", desktop: 317, mobile: 270 },
-  { date: "2024-06-23", desktop: 480, mobile: 530 },
-  { date: "2024-06-24", desktop: 132, mobile: 180 },
-  { date: "2024-06-25", desktop: 141, mobile: 190 },
-  { date: "2024-06-26", desktop: 434, mobile: 380 },
-  { date: "2024-06-27", desktop: 448, mobile: 490 },
-  { date: "2024-06-28", desktop: 149, mobile: 200 },
-  { date: "2024-06-29", desktop: 103, mobile: 160 },
-  { date: "2024-06-30", desktop: 446, mobile: 400 },
-]
+	{ date: "2024-04-01", desktop: 222, mobile: 150 },
+	{ date: "2024-04-02", desktop: 97, mobile: 180 },
+	{ date: "2024-04-03", desktop: 167, mobile: 120 },
+	{ date: "2024-04-04", desktop: 242, mobile: 260 },
+	{ date: "2024-04-05", desktop: 373, mobile: 290 },
+	{ date: "2024-04-06", desktop: 301, mobile: 340 },
+	{ date: "2024-04-07", desktop: 245, mobile: 180 },
+	{ date: "2024-04-08", desktop: 409, mobile: 320 },
+	{ date: "2024-04-09", desktop: 59, mobile: 110 },
+	{ date: "2024-04-10", desktop: 261, mobile: 190 },
+	{ date: "2024-04-11", desktop: 327, mobile: 350 },
+	{ date: "2024-04-12", desktop: 292, mobile: 210 },
+	{ date: "2024-04-13", desktop: 342, mobile: 380 },
+	{ date: "2024-04-14", desktop: 137, mobile: 220 },
+	{ date: "2024-04-15", desktop: 120, mobile: 170 },
+	{ date: "2024-04-16", desktop: 138, mobile: 190 },
+	{ date: "2024-04-17", desktop: 446, mobile: 360 },
+	{ date: "2024-04-18", desktop: 364, mobile: 410 },
+	{ date: "2024-04-19", desktop: 243, mobile: 180 },
+	{ date: "2024-04-20", desktop: 89, mobile: 150 },
+	{ date: "2024-04-21", desktop: 137, mobile: 200 },
+	{ date: "2024-04-22", desktop: 224, mobile: 170 },
+	{ date: "2024-04-23", desktop: 138, mobile: 230 },
+	{ date: "2024-04-24", desktop: 387, mobile: 290 },
+	{ date: "2024-04-25", desktop: 215, mobile: 250 },
+	{ date: "2024-04-26", desktop: 75, mobile: 130 },
+	{ date: "2024-04-27", desktop: 383, mobile: 420 },
+	{ date: "2024-04-28", desktop: 122, mobile: 180 },
+	{ date: "2024-04-29", desktop: 315, mobile: 240 },
+	{ date: "2024-04-30", desktop: 454, mobile: 380 },
+	{ date: "2024-05-01", desktop: 165, mobile: 220 },
+	{ date: "2024-05-02", desktop: 293, mobile: 310 },
+	{ date: "2024-05-03", desktop: 247, mobile: 190 },
+	{ date: "2024-05-04", desktop: 385, mobile: 420 },
+	{ date: "2024-05-05", desktop: 481, mobile: 390 },
+	{ date: "2024-05-06", desktop: 498, mobile: 520 },
+	{ date: "2024-05-07", desktop: 388, mobile: 300 },
+	{ date: "2024-05-08", desktop: 149, mobile: 210 },
+	{ date: "2024-05-09", desktop: 227, mobile: 180 },
+	{ date: "2024-05-10", desktop: 293, mobile: 330 },
+	{ date: "2024-05-11", desktop: 335, mobile: 270 },
+	{ date: "2024-05-12", desktop: 197, mobile: 240 },
+	{ date: "2024-05-13", desktop: 197, mobile: 160 },
+	{ date: "2024-05-14", desktop: 448, mobile: 490 },
+	{ date: "2024-05-15", desktop: 473, mobile: 380 },
+	{ date: "2024-05-16", desktop: 338, mobile: 400 },
+	{ date: "2024-05-17", desktop: 499, mobile: 420 },
+	{ date: "2024-05-18", desktop: 315, mobile: 350 },
+	{ date: "2024-05-19", desktop: 235, mobile: 180 },
+	{ date: "2024-05-20", desktop: 177, mobile: 230 },
+	{ date: "2024-05-21", desktop: 82, mobile: 140 },
+	{ date: "2024-05-22", desktop: 81, mobile: 120 },
+	{ date: "2024-05-23", desktop: 252, mobile: 290 },
+	{ date: "2024-05-24", desktop: 294, mobile: 220 },
+	{ date: "2024-05-25", desktop: 201, mobile: 250 },
+	{ date: "2024-05-26", desktop: 213, mobile: 170 },
+	{ date: "2024-05-27", desktop: 420, mobile: 460 },
+	{ date: "2024-05-28", desktop: 233, mobile: 190 },
+	{ date: "2024-05-29", desktop: 78, mobile: 130 },
+	{ date: "2024-05-30", desktop: 340, mobile: 280 },
+	{ date: "2024-05-31", desktop: 178, mobile: 230 },
+	{ date: "2024-06-01", desktop: 178, mobile: 200 },
+	{ date: "2024-06-02", desktop: 470, mobile: 410 },
+	{ date: "2024-06-03", desktop: 103, mobile: 160 },
+	{ date: "2024-06-04", desktop: 439, mobile: 380 },
+	{ date: "2024-06-05", desktop: 88, mobile: 140 },
+	{ date: "2024-06-06", desktop: 294, mobile: 250 },
+	{ date: "2024-06-07", desktop: 323, mobile: 370 },
+	{ date: "2024-06-08", desktop: 385, mobile: 320 },
+	{ date: "2024-06-09", desktop: 438, mobile: 480 },
+	{ date: "2024-06-10", desktop: 155, mobile: 200 },
+	{ date: "2024-06-11", desktop: 92, mobile: 150 },
+	{ date: "2024-06-12", desktop: 492, mobile: 420 },
+	{ date: "2024-06-13", desktop: 81, mobile: 130 },
+	{ date: "2024-06-14", desktop: 426, mobile: 380 },
+	{ date: "2024-06-15", desktop: 307, mobile: 350 },
+	{ date: "2024-06-16", desktop: 371, mobile: 310 },
+	{ date: "2024-06-17", desktop: 475, mobile: 520 },
+	{ date: "2024-06-18", desktop: 107, mobile: 170 },
+	{ date: "2024-06-19", desktop: 341, mobile: 290 },
+	{ date: "2024-06-20", desktop: 408, mobile: 450 },
+	{ date: "2024-06-21", desktop: 169, mobile: 210 },
+	{ date: "2024-06-22", desktop: 317, mobile: 270 },
+	{ date: "2024-06-23", desktop: 480, mobile: 530 },
+	{ date: "2024-06-24", desktop: 132, mobile: 180 },
+	{ date: "2024-06-25", desktop: 141, mobile: 190 },
+	{ date: "2024-06-26", desktop: 434, mobile: 380 },
+	{ date: "2024-06-27", desktop: 448, mobile: 490 },
+	{ date: "2024-06-28", desktop: 149, mobile: 200 },
+	{ date: "2024-06-29", desktop: 103, mobile: 160 },
+	{ date: "2024-06-30", desktop: 446, mobile: 400 },
+];
 
 const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  desktop: {
-    label: "Desktop",
-    color: "var(--primary)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--primary)",
-  },
-} satisfies ChartConfig
+	visitors: {
+		label: "Visitors",
+	},
+	desktop: {
+		label: "Desktop",
+		color: "var(--primary)",
+	},
+	mobile: {
+		label: "Mobile",
+		color: "var(--primary)",
+	},
+} satisfies ChartConfig;
 
 export function ChartAreaInteractive() {
-  const isMobile = useIsMobile()
-  const [timeRange, setTimeRange] = React.useState("90d")
+	const isMobile = useIsMobile();
+	const [timeRange, setTimeRange] = React.useState("90d");
 
-  React.useEffect(() => {
-    if (isMobile) {
-      setTimeRange("7d")
-    }
-  }, [isMobile])
+	React.useEffect(() => {
+		if (isMobile) {
+			setTimeRange("7d");
+		}
+	}, [isMobile]);
 
-  const filteredData = chartData.filter((item) => {
-    const date = new Date(item.date)
-    const referenceDate = new Date("2024-06-30")
-    let daysToSubtract = 90
-    if (timeRange === "30d") {
-      daysToSubtract = 30
-    } else if (timeRange === "7d") {
-      daysToSubtract = 7
-    }
-    const startDate = new Date(referenceDate)
-    startDate.setDate(startDate.getDate() - daysToSubtract)
-    return date >= startDate
-  })
+	const filteredData = chartData.filter((item) => {
+		const date = new Date(item.date);
+		const referenceDate = new Date("2024-06-30");
+		let daysToSubtract = 90;
+		if (timeRange === "30d") {
+			daysToSubtract = 30;
+		} else if (timeRange === "7d") {
+			daysToSubtract = 7;
+		}
+		const startDate = new Date(referenceDate);
+		startDate.setDate(startDate.getDate() - daysToSubtract);
+		return date >= startDate;
+	});
 
-  return (
-    <Card className="@container/card">
-      <CardHeader>
-        <CardTitle>Total Visitors</CardTitle>
-        <CardDescription>
-          <span className="hidden @[540px]/card:block">
-            Total for the last 3 months
-          </span>
-          <span className="@[540px]/card:hidden">Last 3 months</span>
-        </CardDescription>
-        <CardAction>
-          <ToggleGroup
-            type="single"
-            value={timeRange}
-            onValueChange={setTimeRange}
-            variant="outline"
-            className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
-          >
-            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
-            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
-            <ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
-          </ToggleGroup>
-          <Select value={timeRange} onValueChange={setTimeRange}>
-            <SelectTrigger
-              className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
-              size="sm"
-              aria-label="Select a value"
-            >
-              <SelectValue placeholder="Last 3 months" />
-            </SelectTrigger>
-            <SelectContent className="rounded-xl">
-              <SelectItem value="90d" className="rounded-lg">
-                Last 3 months
-              </SelectItem>
-              <SelectItem value="30d" className="rounded-lg">
-                Last 30 days
-              </SelectItem>
-              <SelectItem value="7d" className="rounded-lg">
-                Last 7 days
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </CardAction>
-      </CardHeader>
-      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
-        <ChartContainer
-          config={chartConfig}
-          className="aspect-auto h-[250px] w-full"
-        >
-          <AreaChart data={filteredData}>
-            <defs>
-              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={1.0}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-            </defs>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              minTickGap={32}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return date.toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                })
-              }}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={
-                <ChartTooltipContent
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }}
-                  indicator="dot"
-                />
-              }
-            />
-            <Area
-              dataKey="mobile"
-              type="natural"
-              fill="url(#fillMobile)"
-              stroke="var(--color-mobile)"
-              stackId="a"
-            />
-            <Area
-              dataKey="desktop"
-              type="natural"
-              fill="url(#fillDesktop)"
-              stroke="var(--color-desktop)"
-              stackId="a"
-            />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
+	return (
+		<Card className="@container/card">
+			<CardHeader>
+				<CardTitle>Total Visitors</CardTitle>
+				<CardDescription>
+					<span className="hidden @[540px]/card:block">
+						Total for the last 3 months
+					</span>
+					<span className="@[540px]/card:hidden">Last 3 months</span>
+				</CardDescription>
+				<CardAction>
+					<ToggleGroup
+						type="single"
+						value={timeRange}
+						onValueChange={setTimeRange}
+						variant="outline"
+						className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
+					>
+						<ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
+						<ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
+						<ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
+					</ToggleGroup>
+					<Select value={timeRange} onValueChange={setTimeRange}>
+						<SelectTrigger
+							className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
+							size="sm"
+							aria-label="Select a value"
+						>
+							<SelectValue placeholder="Last 3 months" />
+						</SelectTrigger>
+						<SelectContent className="rounded-xl">
+							<SelectItem value="90d" className="rounded-lg">
+								Last 3 months
+							</SelectItem>
+							<SelectItem value="30d" className="rounded-lg">
+								Last 30 days
+							</SelectItem>
+							<SelectItem value="7d" className="rounded-lg">
+								Last 7 days
+							</SelectItem>
+						</SelectContent>
+					</Select>
+				</CardAction>
+			</CardHeader>
+			<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+				<ChartContainer
+					config={chartConfig}
+					className="aspect-auto h-[250px] w-full"
+				>
+					<AreaChart data={filteredData}>
+						<defs>
+							<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="var(--color-desktop)"
+									stopOpacity={1.0}
+								/>
+								<stop
+									offset="95%"
+									stopColor="var(--color-desktop)"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+							<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="var(--color-mobile)"
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="95%"
+									stopColor="var(--color-mobile)"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+						</defs>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="date"
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							minTickGap={32}
+							tickFormatter={(value) => {
+								const date = new Date(value);
+								return date.toLocaleDateString("en-US", {
+									month: "short",
+									day: "numeric",
+								});
+							}}
+						/>
+						<ChartTooltip
+							cursor={false}
+							content={
+								<ChartTooltipContent
+									labelFormatter={(value) => {
+										return new Date(value).toLocaleDateString("en-US", {
+											month: "short",
+											day: "numeric",
+										});
+									}}
+									indicator="dot"
+								/>
+							}
+						/>
+						<Area
+							dataKey="mobile"
+							type="natural"
+							fill="url(#fillMobile)"
+							stroke="var(--color-mobile)"
+							stackId="a"
+						/>
+						<Area
+							dataKey="desktop"
+							type="natural"
+							fill="url(#fillDesktop)"
+							stroke="var(--color-desktop)"
+							stackId="a"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
 }
diff --git a/orders-frontend/src/components/dashboard/Dashboard.tsx b/orders-frontend/src/components/dashboard/Dashboard.tsx
index a1e0096..fb8b7e8 100644
--- a/orders-frontend/src/components/dashboard/Dashboard.tsx
+++ b/orders-frontend/src/components/dashboard/Dashboard.tsx
@@ -1,608 +1,811 @@
-import {ProductGrid} from "#/components/store/ProductGrid";
-import {QuantityStepper} from "#/components/store/QuantityStepper";
-import {StoreHome} from "#/components/store/StoreHome";
-import {AppSidebar} from "#/components/app-sidebar";
-import {SiteHeader} from "#/components/site-header";
-import {ErrorState} from "#/components/ui/ErrorState";
-import {LoadingState} from "#/components/ui/LoadingState";
-import {Badge} from "#/components/ui/badge";
-import {Button} from "#/components/ui/button";
-import {Card, CardContent, CardHeader, CardTitle} from "#/components/ui/card";
-import {Input} from "#/components/ui/input";
-import {Label} from "#/components/ui/label";
-import {Separator} from "#/components/ui/separator";
-import {SidebarInset, SidebarProvider} from "#/components/ui/sidebar";
+import { Link } from "@tanstack/react-router";
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
+	Boxes,
+	Car,
+	ClipboardList,
+	PackagePlus,
+	ShoppingCart,
+} from "lucide-react";
+import {
+	type CSSProperties,
+	type FormEvent,
+	type ReactNode,
+	useState,
+} from "react";
+import { toast } from "sonner";
+import { AppSidebar } from "#/components/app-sidebar";
+import { SiteHeader } from "#/components/site-header";
+import { ProductGrid } from "#/components/store/ProductGrid";
+import { QuantityStepper } from "#/components/store/QuantityStepper";
+import { StoreHome } from "#/components/store/StoreHome";
+import { Badge } from "#/components/ui/badge";
+import { Button } from "#/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "#/components/ui/card";
+import { ErrorState } from "#/components/ui/ErrorState";
+import { Input } from "#/components/ui/input";
+import { LoadingState } from "#/components/ui/LoadingState";
+import { Label } from "#/components/ui/label";
+import { Separator } from "#/components/ui/separator";
+import { SidebarInset, SidebarProvider } from "#/components/ui/sidebar";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "#/components/ui/table";
-import {formatCurrency} from "#/hooks/formatCurrency";
-import {formatDate} from "#/hooks/formatDate";
-import {useAuth} from "#/hooks/useAuth";
-import {useCart} from "#/hooks/useCart";
-import {useOrders, useUpdateOrderStatus} from "#/hooks/useOrders";
+import { formatCurrency } from "#/hooks/formatCurrency";
+import { formatDate } from "#/hooks/formatDate";
+import { useAuth } from "#/hooks/useAuth";
+import { useCart } from "#/hooks/useCart";
+import { useOrders, useUpdateOrderStatus } from "#/hooks/useOrders";
 import {
-    useCreateProduct,
-    useDeactivateProduct,
-    useProducts,
-    useUpdateProduct,
+	useCreateProduct,
+	useDeactivateProduct,
+	useProducts,
+	useUpdateProduct,
 } from "#/hooks/useProducts";
 import {
-    useAcceptRide,
-    useCancelRide,
-    useCompleteRide,
-    useRequestRide,
-    useRides,
-    useUpdateRideStatus,
+	useAcceptRide,
+	useCancelRide,
+	useCompleteRide,
+	useRequestRide,
+	useRides,
+	useUpdateRideStatus,
 } from "#/hooks/useRides";
-import type {OrderStatus} from "#/types/order";
-import type {Product, ProductRequest} from "#/types/product";
-import type {Ride, RideStatus} from "#/types/ride";
-import {Link} from "@tanstack/react-router";
-import {Boxes, Car, ClipboardList, PackagePlus, ShoppingCart} from "lucide-react";
-import {useState, type CSSProperties, type FormEvent, type ReactNode} from "react";
-import {toast} from "sonner";
+import type { OrderStatus } from "#/types/order";
+import type { Product, ProductRequest } from "#/types/product";
+import type { Ride, RideStatus } from "#/types/ride";
 
 const emptyProductForm: ProductRequest = {
-    name: "",
-    sku: "",
-    price: 0,
-    currency: "KES",
-    active: true,
-    availableQuantity: 0,
-    reorderLevel: 5,
+	name: "",
+	sku: "",
+	price: 0,
+	currency: "KES",
+	active: true,
+	availableQuantity: 0,
+	reorderLevel: 5,
+};
+
+type RideFormState = {
+	orderId: string;
+	pickupLocation: string;
+	dropoffLocation: string;
+	distanceKm: string;
+};
+
+const emptyRideForm: RideFormState = {
+	orderId: "",
+	pickupLocation: "",
+	dropoffLocation: "",
+	distanceKm: "5",
 };
 
 export function Dashboard() {
-    const {user, logout} = useAuth();
+	const { user, logout } = useAuth();
 
-    if (!user) {
-        return <StoreHome/>;
-    }
+	if (!user) {
+		return <StoreHome />;
+	}
 
-    return (
-        <SidebarProvider
-            style={{
-                "--sidebar-width": "18rem",
-                "--header-height": "3.5rem",
-            } as CSSProperties}
-        >
-            <AppSidebar user={user} onLogout={logout} variant="inset"/>
-            <SidebarInset>
-                <SiteHeader
-                    title={dashboardTitle(user.role)}
-                    onLogout={logout}
-                    showCart={user.role === "CUSTOMER"}
-                />
-                <main className="@container/main flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">
-                    {user.role === "CUSTOMER" ? <CustomerDashboard/> : null}
-                    {user.role === "ADMIN" ? <AdminDashboard/> : null}
-                    {user.role === "DRIVER" ? <DriverDashboard/> : null}
-                </main>
-            </SidebarInset>
-        </SidebarProvider>
-    );
+	return (
+		<SidebarProvider
+			style={
+				{
+					"--sidebar-width": "18rem",
+					"--header-height": "3.5rem",
+				} as CSSProperties
+			}
+		>
+			<AppSidebar user={user} onLogout={logout} variant="inset" />
+			<SidebarInset>
+				<SiteHeader
+					title={dashboardTitle(user.role)}
+					onLogout={logout}
+					showCart={user.role === "CUSTOMER"}
+				/>
+				<main className="@container/main flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">
+					{user.role === "CUSTOMER" ? <CustomerDashboard /> : null}
+					{user.role === "ADMIN" ? <AdminDashboard /> : null}
+					{user.role === "DRIVER" ? <DriverDashboard /> : null}
+				</main>
+			</SidebarInset>
+		</SidebarProvider>
+	);
 }
 
 function dashboardTitle(role: "ADMIN" | "CUSTOMER" | "DRIVER") {
-    if (role === "ADMIN") {
-        return "Admin dashboard";
-    }
-    if (role === "DRIVER") {
-        return "Driver dashboard";
-    }
-    return "Customer dashboard";
+	if (role === "ADMIN") {
+		return "Admin dashboard";
+	}
+	if (role === "DRIVER") {
+		return "Driver dashboard";
+	}
+	return "Customer dashboard";
 }
 
 function CustomerDashboard() {
-    const productsQuery = useProducts();
-    const ordersQuery = useOrders({status: "", from: "", to: ""});
-    const ridesQuery = useRides();
-    const requestRide = useRequestRide();
-    const cancelRide = useCancelRide();
-    const cart = useCart();
-    const [rideForm, setRideForm] = useState({pickupLocation: "", dropoffLocation: "", distanceKm: "5"});
+	const productsQuery = useProducts();
+	const ordersQuery = useOrders({ status: "", from: "", to: "" });
+	const ridesQuery = useRides();
+	const requestRide = useRequestRide();
+	const cancelRide = useCancelRide();
+	const cart = useCart();
+	const [rideForm, setRideForm] = useState<RideFormState>(emptyRideForm);
 
-    async function submitRide(event: FormEvent<HTMLFormElement>) {
-        event.preventDefault();
-        await requestRide.mutateAsync({
-            pickupLocation: rideForm.pickupLocation,
-            dropoffLocation: rideForm.dropoffLocation,
-            distanceKm: Number(rideForm.distanceKm),
-        });
-        toast.success("Ride requested");
-        setRideForm({pickupLocation: "", dropoffLocation: "", distanceKm: "5"});
-    }
+	async function submitRide(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		if (!rideForm.orderId) {
+			toast.error("Choose an order before requesting a ride");
+			return;
+		}
 
-    if (productsQuery.isError) {
-        return <ErrorState message={errorMessage(productsQuery.error)} onRetry={() => productsQuery.refetch()}/>;
-    }
+		await requestRide.mutateAsync({
+			orderId: rideForm.orderId,
+			pickupLocation: rideForm.pickupLocation,
+			dropoffLocation: rideForm.dropoffLocation,
+			distanceKm: Number(rideForm.distanceKm),
+		});
+		toast.success("Ride requested");
+		setRideForm(emptyRideForm);
+	}
 
-    return (
-        <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
-            <section className="space-y-5">
-                <Panel title="Products" icon={<Boxes/>}>
-                    <ProductGrid
-                        products={productsQuery.data ?? []}
-                        isLoading={productsQuery.isLoading}
-                        onAddToCart={cart.addItem}
-                    />
-                </Panel>
+	if (productsQuery.isError) {
+		return (
+			<ErrorState
+				message={errorMessage(productsQuery.error)}
+				onRetry={() => productsQuery.refetch()}
+			/>
+		);
+	}
 
-                <Panel title="My orders" icon={<ClipboardList/>}>
-                    <OrderTable
-                        orders={ordersQuery.data?.items ?? []}
-                        action={(order) => <OrderStatusBadge status={order.status}/>}
-                    />
-                </Panel>
+	return (
+		<div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
+			<section className="space-y-5">
+				<Panel title="Products" icon={<Boxes />}>
+					<ProductGrid
+						products={productsQuery.data ?? []}
+						isLoading={productsQuery.isLoading}
+						onAddToCart={cart.addItem}
+					/>
+				</Panel>
 
-                <Panel title="My rides" icon={<Car/>}>
-                    <RideRequestForm
-                        form={rideForm}
-                        setForm={setRideForm}
-                        onSubmit={submitRide}
-                        pending={requestRide.isPending}
-                    />
-                    <RideTable
-                        rides={ridesQuery.data ?? []}
-                        action={(ride) =>
-                            ride.status === "REQUESTED" ? (
-                                <Button
-                                    type="button"
-                                    variant="outline"
-                                    size="sm"
-                                    onClick={() => cancelRide.mutate(ride.id, {onSuccess: () => toast.success("Ride cancelled")})}
-                                >
-                                    Cancel
-                                </Button>
-                            ) : null
-                        }
-                    />
-                </Panel>
-            </section>
+				<Panel title="My orders" icon={<ClipboardList />}>
+					<OrderTable
+						orders={ordersQuery.data?.items ?? []}
+						action={(order) => <OrderStatusBadge status={order.status} />}
+					/>
+				</Panel>
 
-            <aside className="space-y-5">
-                <Panel title="Cart" icon={<ShoppingCart/>}>
-                    {cart.items.length === 0 ? (
-                        <p className="text-sm text-muted-foreground">Your cart is empty.</p>
-                    ) : (
-                        <div className="space-y-4">
-                            {cart.items.map((item) => (
-                                <div key={item.product.id} className="space-y-3 rounded-lg border border-border p-3">
-                                    <div className="flex items-start justify-between gap-3">
-                                        <div>
-                                            <p className="font-medium">{item.product.name}</p>
-                                            <p className="text-sm text-muted-foreground">
-                                                {formatCurrency(item.product.price, item.product.currency)} each
-                                            </p>
-                                        </div>
-                                        <p className="font-semibold">
-                                            {formatCurrency(item.product.price * item.quantity, item.product.currency)}
-                                        </p>
-                                    </div>
-                                    <QuantityStepper
-                                        value={item.quantity}
-                                        min={0}
-                                        max={item.product.availableQuantity}
-                                        onChange={(quantity) => cart.updateQuantity(item.product.id, quantity)}
-                                    />
-                                </div>
-                            ))}
-                            <Separator/>
-                            <div className="flex justify-between font-semibold">
-                                <span>Total</span>
-                                <span>{formatCurrency(cart.totalAmount, cart.currency)}</span>
-                            </div>
-                            <Button asChild className="w-full">
-                                <Link to="/cart">View cart</Link>
-                            </Button>
-                        </div>
-                    )}
-                </Panel>
-            </aside>
-        </div>
-    );
+				<Panel title="My rides" icon={<Car />}>
+					<RideRequestForm
+						form={rideForm}
+						setForm={setRideForm}
+						orders={ordersQuery.data?.items ?? []}
+						onSubmit={submitRide}
+						pending={requestRide.isPending}
+					/>
+					<RideTable
+						rides={ridesQuery.data ?? []}
+						action={(ride) =>
+							ride.status === "REQUESTED" ? (
+								<Button
+									type="button"
+									variant="outline"
+									size="sm"
+									onClick={() =>
+										cancelRide.mutate(ride.id, {
+											onSuccess: () => toast.success("Ride cancelled"),
+										})
+									}
+								>
+									Cancel
+								</Button>
+							) : null
+						}
+					/>
+				</Panel>
+			</section>
+
+			<aside className="space-y-5">
+				<Panel title="Cart" icon={<ShoppingCart />}>
+					{cart.items.length === 0 ? (
+						<p className="text-sm text-muted-foreground">Your cart is empty.</p>
+					) : (
+						<div className="space-y-4">
+							{cart.items.map((item) => (
+								<div
+									key={item.product.id}
+									className="space-y-3 rounded-lg border border-border p-3"
+								>
+									<div className="flex items-start justify-between gap-3">
+										<div>
+											<p className="font-medium">{item.product.name}</p>
+											<p className="text-sm text-muted-foreground">
+												{formatCurrency(
+													item.product.price,
+													item.product.currency,
+												)}{" "}
+												each
+											</p>
+										</div>
+										<p className="font-semibold">
+											{formatCurrency(
+												item.product.price * item.quantity,
+												item.product.currency,
+											)}
+										</p>
+									</div>
+									<QuantityStepper
+										value={item.quantity}
+										min={0}
+										max={item.product.availableQuantity}
+										onChange={(quantity) =>
+											cart.updateQuantity(item.product.id, quantity)
+										}
+									/>
+								</div>
+							))}
+							<Separator />
+							<div className="flex justify-between font-semibold">
+								<span>Total</span>
+								<span>{formatCurrency(cart.totalAmount, cart.currency)}</span>
+							</div>
+							<Button asChild className="w-full">
+								<Link to="/cart">View cart</Link>
+							</Button>
+						</div>
+					)}
+				</Panel>
+			</aside>
+		</div>
+	);
 }
 
 function AdminDashboard() {
-    const productsQuery = useProducts();
-    const ordersQuery = useOrders({status: "", from: "", to: ""});
-    const ridesQuery = useRides();
-    const createProduct = useCreateProduct();
-    const updateProduct = useUpdateProduct();
-    const deactivateProduct = useDeactivateProduct();
-    const updateOrderStatus = useUpdateOrderStatus();
-    const updateRideStatus = useUpdateRideStatus();
-    const [editing, setEditing] = useState<Product | null>(null);
-    const [form, setForm] = useState<ProductRequest>(emptyProductForm);
+	const productsQuery = useProducts();
+	const ordersQuery = useOrders({ status: "", from: "", to: "" });
+	const ridesQuery = useRides();
+	const createProduct = useCreateProduct();
+	const updateProduct = useUpdateProduct();
+	const deactivateProduct = useDeactivateProduct();
+	const updateOrderStatus = useUpdateOrderStatus();
+	const updateRideStatus = useUpdateRideStatus();
+	const [editing, setEditing] = useState<Product | null>(null);
+	const [form, setForm] = useState<ProductRequest>(emptyProductForm);
 
-    function startEdit(product: Product) {
-        setEditing(product);
-        setForm({
-            name: product.name,
-            sku: product.sku,
-            price: product.price,
-            currency: product.currency,
-            active: product.active,
-            availableQuantity: product.availableQuantity,
-            reorderLevel: product.reorderLevel,
-        });
-    }
+	function startEdit(product: Product) {
+		setEditing(product);
+		setForm({
+			name: product.name,
+			sku: product.sku,
+			price: product.price,
+			currency: product.currency,
+			active: product.active,
+			availableQuantity: product.availableQuantity,
+			reorderLevel: product.reorderLevel,
+		});
+	}
 
-    async function submitProduct(event: FormEvent<HTMLFormElement>) {
-        event.preventDefault();
-        if (editing) {
-            await updateProduct.mutateAsync({id: editing.id, request: form});
-            toast.success("Product updated");
-        } else {
-            await createProduct.mutateAsync(form);
-            toast.success("Product created");
-        }
-        setEditing(null);
-        setForm(emptyProductForm);
-    }
+	async function submitProduct(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		if (editing) {
+			await updateProduct.mutateAsync({ id: editing.id, request: form });
+			toast.success("Product updated");
+		} else {
+			await createProduct.mutateAsync(form);
+			toast.success("Product created");
+		}
+		setEditing(null);
+		setForm(emptyProductForm);
+	}
 
-    return (
-        <div className="space-y-5">
-            <Panel title={editing ? "Edit product" : "Add product"} icon={<PackagePlus/>}>
-                <ProductForm
-                    form={form}
-                    setForm={setForm}
-                    onSubmit={submitProduct}
-                    pending={createProduct.isPending || updateProduct.isPending}
-                />
-            </Panel>
+	return (
+		<div className="space-y-5">
+			<Panel
+				title={editing ? "Edit product" : "Add product"}
+				icon={<PackagePlus />}
+			>
+				<ProductForm
+					form={form}
+					setForm={setForm}
+					onSubmit={submitProduct}
+					pending={createProduct.isPending || updateProduct.isPending}
+				/>
+			</Panel>
 
-            <Panel title="Products" icon={<Boxes/>}>
-                <ProductAdminTable
-                    products={productsQuery.data ?? []}
-                    onEdit={startEdit}
-                    onDeactivate={(id) =>
-                        deactivateProduct.mutate(id, {onSuccess: () => toast.success("Product deactivated")})
-                    }
-                />
-            </Panel>
+			<Panel title="Products" icon={<Boxes />}>
+				<ProductAdminTable
+					products={productsQuery.data ?? []}
+					onEdit={startEdit}
+					onDeactivate={(id) =>
+						deactivateProduct.mutate(id, {
+							onSuccess: () => toast.success("Product deactivated"),
+						})
+					}
+				/>
+			</Panel>
 
-            <Panel title="Orders" icon={<ClipboardList/>}>
-                <OrderTable
-                    orders={ordersQuery.data?.items ?? []}
-                    action={(order) => (
-                        <StatusSelect<OrderStatus>
-                            value={order.status}
-                            options={["PENDING", "SHIPPED", "DELIVERED", "CANCELLED"]}
-                            onChange={(status) =>
-                                updateOrderStatus.mutate({id: order.id, status}, {onSuccess: () => toast.success("Order updated")})
-                            }
-                        />
-                    )}
-                />
-            </Panel>
+			<Panel title="Orders" icon={<ClipboardList />}>
+				<OrderTable
+					orders={ordersQuery.data?.items ?? []}
+					action={(order) => (
+						<StatusSelect<OrderStatus>
+							value={order.status}
+							options={["PENDING", "SHIPPED", "DELIVERED", "CANCELLED"]}
+							onChange={(status) =>
+								updateOrderStatus.mutate(
+									{ id: order.id, status },
+									{ onSuccess: () => toast.success("Order updated") },
+								)
+							}
+						/>
+					)}
+				/>
+			</Panel>
 
-            <Panel title="Rides" icon={<Car/>}>
-                <RideTable
-                    rides={ridesQuery.data ?? []}
-                    action={(ride) => (
-                        <StatusSelect<RideStatus>
-                            value={ride.status}
-                            options={["REQUESTED", "ACCEPTED", "COMPLETED", "CANCELLED"]}
-                            onChange={(status) =>
-                                updateRideStatus.mutate({id: ride.id, status}, {onSuccess: () => toast.success("Ride updated")})
-                            }
-                        />
-                    )}
-                />
-            </Panel>
-        </div>
-    );
+			<Panel title="Rides" icon={<Car />}>
+				<RideTable
+					rides={ridesQuery.data ?? []}
+					action={(ride) => (
+						<StatusSelect<RideStatus>
+							value={ride.status}
+							options={["REQUESTED", "ACCEPTED", "COMPLETED", "CANCELLED"]}
+							onChange={(status) =>
+								updateRideStatus.mutate(
+									{ id: ride.id, status },
+									{ onSuccess: () => toast.success("Ride updated") },
+								)
+							}
+						/>
+					)}
+				/>
+			</Panel>
+		</div>
+	);
 }
 
 function DriverDashboard() {
-    const ridesQuery = useRides();
-    const acceptRide = useAcceptRide();
-    const completeRide = useCompleteRide();
+	const ridesQuery = useRides();
+	const acceptRide = useAcceptRide();
+	const completeRide = useCompleteRide();
 
-    return (
-        <Panel title="Driver rides" icon={<Car/>}>
-            {ridesQuery.isLoading ? <LoadingState title="Loading rides"/> : null}
-            <RideTable
-                rides={ridesQuery.data ?? []}
-                action={(ride) => {
-                    if (ride.status === "REQUESTED") {
-                        return (
-                            <Button
-                                type="button"
-                                size="sm"
-                                onClick={() => acceptRide.mutate(ride.id, {onSuccess: () => toast.success("Ride accepted")})}
-                            >
-                                Accept
-                            </Button>
-                        );
-                    }
-                    if (ride.status === "ACCEPTED") {
-                        return (
-                            <Button
-                                type="button"
-                                size="sm"
-                                onClick={() => completeRide.mutate(ride.id, {onSuccess: () => toast.success("Ride completed")})}
-                            >
-                                Complete
-                            </Button>
-                        );
-                    }
-                    return null;
-                }}
-            />
-        </Panel>
-    );
+	return (
+		<Panel title="Driver rides" icon={<Car />}>
+			{ridesQuery.isLoading ? <LoadingState title="Loading rides" /> : null}
+			<RideTable
+				rides={ridesQuery.data ?? []}
+				action={(ride) => {
+					if (ride.status === "REQUESTED") {
+						return (
+							<Button
+								type="button"
+								size="sm"
+								onClick={() =>
+									acceptRide.mutate(ride.id, {
+										onSuccess: () => toast.success("Ride accepted"),
+									})
+								}
+							>
+								Accept
+							</Button>
+						);
+					}
+					if (ride.status === "ACCEPTED") {
+						return (
+							<Button
+								type="button"
+								size="sm"
+								onClick={() =>
+									completeRide.mutate(ride.id, {
+										onSuccess: () => toast.success("Ride completed"),
+									})
+								}
+							>
+								Complete
+							</Button>
+						);
+					}
+					return null;
+				}}
+			/>
+		</Panel>
+	);
 }
 
-function Panel({title, icon, children}: {title: string; icon: ReactNode; children: ReactNode}) {
-    return (
-        <Card>
-            <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                    <span className="text-muted-foreground [&_svg]:size-5">{icon}</span>
-                    {title}
-                </CardTitle>
-            </CardHeader>
-            <CardContent>{children}</CardContent>
-        </Card>
-    );
+function Panel({
+	title,
+	icon,
+	children,
+}: {
+	title: string;
+	icon: ReactNode;
+	children: ReactNode;
+}) {
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="flex items-center gap-2">
+					<span className="text-muted-foreground [&_svg]:size-5">{icon}</span>
+					{title}
+				</CardTitle>
+			</CardHeader>
+			<CardContent>{children}</CardContent>
+		</Card>
+	);
 }
 
 function ProductForm({
-    form,
-    setForm,
-    onSubmit,
-    pending,
+	form,
+	setForm,
+	onSubmit,
+	pending,
 }: {
-    form: ProductRequest;
-    setForm: (form: ProductRequest) => void;
-    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-    pending: boolean;
+	form: ProductRequest;
+	setForm: (form: ProductRequest) => void;
+	onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+	pending: boolean;
 }) {
-    return (
-        <form onSubmit={onSubmit} className="grid gap-4 md:grid-cols-4">
-            <Field label="Name" value={form.name} onChange={(value) => setForm({...form, name: value})}/>
-            <Field label="SKU" value={form.sku} onChange={(value) => setForm({...form, sku: value})}/>
-            <NumberField label="Price" value={form.price} onChange={(value) => setForm({...form, price: value})}/>
-            <Field label="Currency" value={form.currency} onChange={(value) => setForm({...form, currency: value})}/>
-            <NumberField label="Available" value={form.availableQuantity} onChange={(value) => setForm({...form, availableQuantity: value})}/>
-            <NumberField label="Reorder level" value={form.reorderLevel} onChange={(value) => setForm({...form, reorderLevel: value})}/>
-            <label className="flex items-end gap-2 pb-2 text-sm">
-                <input
-                    type="checkbox"
-                    checked={form.active}
-                    onChange={(event) => setForm({...form, active: event.target.checked})}
-                />
-                Active
-            </label>
-            <div className="flex items-end">
-                <Button type="submit" disabled={pending} className="w-full">
-                    {pending ? "Saving..." : "Save product"}
-                </Button>
-            </div>
-        </form>
-    );
+	return (
+		<form onSubmit={onSubmit} className="grid gap-4 md:grid-cols-4">
+			<Field
+				label="Name"
+				value={form.name}
+				onChange={(value) => setForm({ ...form, name: value })}
+			/>
+			<Field
+				label="SKU"
+				value={form.sku}
+				onChange={(value) => setForm({ ...form, sku: value })}
+			/>
+			<NumberField
+				label="Price"
+				value={form.price}
+				onChange={(value) => setForm({ ...form, price: value })}
+			/>
+			<Field
+				label="Currency"
+				value={form.currency}
+				onChange={(value) => setForm({ ...form, currency: value })}
+			/>
+			<NumberField
+				label="Available"
+				value={form.availableQuantity}
+				onChange={(value) => setForm({ ...form, availableQuantity: value })}
+			/>
+			<NumberField
+				label="Reorder level"
+				value={form.reorderLevel}
+				onChange={(value) => setForm({ ...form, reorderLevel: value })}
+			/>
+			<label className="flex items-end gap-2 pb-2 text-sm">
+				<input
+					type="checkbox"
+					checked={form.active}
+					onChange={(event) =>
+						setForm({ ...form, active: event.target.checked })
+					}
+				/>
+				Active
+			</label>
+			<div className="flex items-end">
+				<Button type="submit" disabled={pending} className="w-full">
+					{pending ? "Saving..." : "Save product"}
+				</Button>
+			</div>
+		</form>
+	);
 }
 
 function ProductAdminTable({
-    products,
-    onEdit,
-    onDeactivate,
+	products,
+	onEdit,
+	onDeactivate,
 }: {
-    products: Product[];
-    onEdit: (product: Product) => void;
-    onDeactivate: (id: string) => void;
+	products: Product[];
+	onEdit: (product: Product) => void;
+	onDeactivate: (id: string) => void;
 }) {
-    return (
-        <Table>
-            <TableHeader>
-            <TableRow>
-                <TableHead>Product</TableHead>
-                <TableHead>Price</TableHead>
-                <TableHead>Stock</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Action</TableHead>
-            </TableRow>
-            </TableHeader>
-            <TableBody>
-            {products.map((product) => (
-                <TableRow key={product.id}>
-                    <TableCell>
-                        <p className="font-medium">{product.name}</p>
-                        <p className="text-xs text-muted-foreground">{product.sku}</p>
-                    </TableCell>
-                    <TableCell>{formatCurrency(product.price, product.currency)}</TableCell>
-                    <TableCell>{product.availableQuantity}</TableCell>
-                    <TableCell><Badge variant={product.active ? "secondary" : "outline"}>{product.active ? "Active" : "Inactive"}</Badge></TableCell>
-                    <TableCell>
-                        <div className="flex gap-2">
-                            <Button type="button" variant="outline" size="sm" onClick={() => onEdit(product)}>Edit</Button>
-                            <Button type="button" variant="destructive" size="sm" onClick={() => onDeactivate(product.id)}>Deactivate</Button>
-                        </div>
-                    </TableCell>
-                </TableRow>
-            ))}
-            </TableBody>
-        </Table>
-    );
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Product</TableHead>
+					<TableHead>Price</TableHead>
+					<TableHead>Stock</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Action</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{products.map((product) => (
+					<TableRow key={product.id}>
+						<TableCell>
+							<p className="font-medium">{product.name}</p>
+							<p className="text-xs text-muted-foreground">{product.sku}</p>
+						</TableCell>
+						<TableCell>
+							{formatCurrency(product.price, product.currency)}
+						</TableCell>
+						<TableCell>{product.availableQuantity}</TableCell>
+						<TableCell>
+							<Badge variant={product.active ? "secondary" : "outline"}>
+								{product.active ? "Active" : "Inactive"}
+							</Badge>
+						</TableCell>
+						<TableCell>
+							<div className="flex gap-2">
+								<Button
+									type="button"
+									variant="outline"
+									size="sm"
+									onClick={() => onEdit(product)}
+								>
+									Edit
+								</Button>
+								<Button
+									type="button"
+									variant="destructive"
+									size="sm"
+									onClick={() => onDeactivate(product.id)}
+								>
+									Deactivate
+								</Button>
+							</div>
+						</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
 }
 
 type OrderRow = {
-    id: string;
-    customerName: string;
-    status: OrderStatus;
-    itemCount: number;
-    totalAmount: number;
-    currency: string;
-    createdAt: string;
+	id: string;
+	customerName: string;
+	status: OrderStatus;
+	itemCount: number;
+	totalAmount: number;
+	currency: string;
+	createdAt: string;
 };
 
 function OrderTable({
-    orders,
-    action,
+	orders,
+	action,
 }: {
-    orders: OrderRow[];
-    action: (order: Pick<OrderRow, "id" | "status">) => ReactNode;
+	orders: OrderRow[];
+	action: (order: Pick<OrderRow, "id" | "status">) => ReactNode;
 }) {
-    return (
-        <Table>
-            <TableHeader>
-            <TableRow>
-                <TableHead>Order</TableHead>
-                <TableHead>Customer</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Items</TableHead>
-                <TableHead>Total</TableHead>
-                <TableHead>Created</TableHead>
-                <TableHead>Action</TableHead>
-            </TableRow>
-            </TableHeader>
-            <TableBody>
-            {orders.map((order) => (
-                <TableRow key={order.id}>
-                    <TableCell className="font-mono text-xs">{order.id.slice(0, 8)}</TableCell>
-                    <TableCell>{order.customerName}</TableCell>
-                    <TableCell><OrderStatusBadge status={order.status}/></TableCell>
-                    <TableCell>{order.itemCount}</TableCell>
-                    <TableCell>{formatCurrency(order.totalAmount, order.currency)}</TableCell>
-                    <TableCell>{formatDate(order.createdAt)}</TableCell>
-                    <TableCell>{action(order)}</TableCell>
-                </TableRow>
-            ))}
-            </TableBody>
-        </Table>
-    );
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Order</TableHead>
+					<TableHead>Customer</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Items</TableHead>
+					<TableHead>Total</TableHead>
+					<TableHead>Created</TableHead>
+					<TableHead>Action</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{orders.map((order) => (
+					<TableRow key={order.id}>
+						<TableCell className="font-mono text-xs">
+							{order.id.slice(0, 8)}
+						</TableCell>
+						<TableCell>{order.customerName}</TableCell>
+						<TableCell>
+							<OrderStatusBadge status={order.status} />
+						</TableCell>
+						<TableCell>{order.itemCount}</TableCell>
+						<TableCell>
+							{formatCurrency(order.totalAmount, order.currency)}
+						</TableCell>
+						<TableCell>{formatDate(order.createdAt)}</TableCell>
+						<TableCell>{action(order)}</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
 }
 
 function RideRequestForm({
-    form,
-    setForm,
-    onSubmit,
-    pending,
+	form,
+	setForm,
+	orders,
+	onSubmit,
+	pending,
 }: {
-    form: {pickupLocation: string; dropoffLocation: string; distanceKm: string};
-    setForm: (form: {pickupLocation: string; dropoffLocation: string; distanceKm: string}) => void;
-    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-    pending: boolean;
+	form: RideFormState;
+	setForm: (form: RideFormState) => void;
+	orders: OrderRow[];
+	onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+	pending: boolean;
 }) {
-    return (
-        <form onSubmit={onSubmit} className="mb-4 grid gap-4 md:grid-cols-4">
-            <Field label="Pickup" value={form.pickupLocation} onChange={(value) => setForm({...form, pickupLocation: value})}/>
-            <Field label="Dropoff" value={form.dropoffLocation} onChange={(value) => setForm({...form, dropoffLocation: value})}/>
-            <Field label="Distance KM" type="number" value={form.distanceKm} onChange={(value) => setForm({...form, distanceKm: value})}/>
-            <div className="flex items-end">
-                <Button type="submit" disabled={pending} className="w-full">
-                    {pending ? "Requesting..." : "Request ride"}
-                </Button>
-            </div>
-        </form>
-    );
+	return (
+		<form onSubmit={onSubmit} className="mb-4 grid gap-4 md:grid-cols-5">
+			<div className="space-y-2">
+				<Label htmlFor="ride-order">Order</Label>
+				<select
+					id="ride-order"
+					value={form.orderId}
+					onChange={(event) =>
+						setForm({ ...form, orderId: event.target.value })
+					}
+					className="flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					required
+				>
+					<option value="">Select order</option>
+					{orders.map((order) => (
+						<option key={order.id} value={order.id}>
+							{order.id.slice(0, 8)} - {order.status}
+						</option>
+					))}
+				</select>
+			</div>
+			<Field
+				label="Pickup"
+				value={form.pickupLocation}
+				onChange={(value) => setForm({ ...form, pickupLocation: value })}
+			/>
+			<Field
+				label="Dropoff"
+				value={form.dropoffLocation}
+				onChange={(value) => setForm({ ...form, dropoffLocation: value })}
+			/>
+			<Field
+				label="Distance KM"
+				type="number"
+				value={form.distanceKm}
+				onChange={(value) => setForm({ ...form, distanceKm: value })}
+			/>
+			<div className="flex items-end">
+				<Button type="submit" disabled={pending} className="w-full">
+					{pending ? "Requesting..." : "Request ride"}
+				</Button>
+			</div>
+		</form>
+	);
 }
 
 function RideTable({
-    rides,
-    action,
+	rides,
+	action,
 }: {
-    rides: Ride[];
-    action: (ride: Ride) => ReactNode;
+	rides: Ride[];
+	action: (ride: Ride) => ReactNode;
 }) {
-    return (
-        <Table>
-            <TableHeader>
-            <TableRow>
-                <TableHead>Ride</TableHead>
-                <TableHead>Route</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Driver</TableHead>
-                <TableHead>Fare</TableHead>
-                <TableHead>Requested</TableHead>
-                <TableHead>Action</TableHead>
-            </TableRow>
-            </TableHeader>
-            <TableBody>
-            {rides.map((ride) => (
-                <TableRow key={ride.id}>
-                    <TableCell className="font-mono text-xs">{ride.id.slice(0, 8)}</TableCell>
-                    <TableCell>{ride.pickupLocation} to {ride.dropoffLocation}</TableCell>
-                    <TableCell><RideStatusBadge status={ride.status}/></TableCell>
-                    <TableCell>{ride.driverName ?? "-"}</TableCell>
-                    <TableCell>{ride.fareAmount ? formatCurrency(ride.fareAmount, ride.currency) : "-"}</TableCell>
-                    <TableCell>{formatDate(ride.requestedAt)}</TableCell>
-                    <TableCell>{action(ride)}</TableCell>
-                </TableRow>
-            ))}
-            </TableBody>
-        </Table>
-    );
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Ride</TableHead>
+					<TableHead>Route</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Driver</TableHead>
+					<TableHead>Fare</TableHead>
+					<TableHead>Requested</TableHead>
+					<TableHead>Action</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{rides.map((ride) => (
+					<TableRow key={ride.id}>
+						<TableCell className="font-mono text-xs">
+							{ride.id.slice(0, 8)}
+						</TableCell>
+						<TableCell>
+							{ride.pickupLocation} to {ride.dropoffLocation}
+						</TableCell>
+						<TableCell>
+							<RideStatusBadge status={ride.status} />
+						</TableCell>
+						<TableCell>{ride.driverName ?? "-"}</TableCell>
+						<TableCell>
+							{ride.fareAmount
+								? formatCurrency(ride.fareAmount, ride.currency)
+								: "-"}
+						</TableCell>
+						<TableCell>{formatDate(ride.requestedAt)}</TableCell>
+						<TableCell>{action(ride)}</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
 }
 
 function StatusSelect<T extends string>({
-    value,
-    options,
-    onChange,
+	value,
+	options,
+	onChange,
 }: {
-    value: T;
-    options: T[];
-    onChange: (value: T) => void;
+	value: T;
+	options: T[];
+	onChange: (value: T) => void;
 }) {
-    return (
-        <select
-            value={value}
-            onChange={(event) => onChange(event.target.value as T)}
-            className="h-8 rounded-md border border-input bg-background px-2 text-xs"
-        >
-            {options.map((option) => (
-                <option key={option} value={option}>{option}</option>
-            ))}
-        </select>
-    );
+	return (
+		<select
+			value={value}
+			onChange={(event) => onChange(event.target.value as T)}
+			className="h-8 rounded-md border border-input bg-background px-2 text-xs"
+		>
+			{options.map((option) => (
+				<option key={option} value={option}>
+					{option}
+				</option>
+			))}
+		</select>
+	);
 }
 
-function OrderStatusBadge({status}: {status: OrderStatus}) {
-    return <Badge variant={status === "CANCELLED" ? "outline" : "secondary"}>{status}</Badge>;
+function OrderStatusBadge({ status }: { status: OrderStatus }) {
+	return (
+		<Badge variant={status === "CANCELLED" ? "outline" : "secondary"}>
+			{status}
+		</Badge>
+	);
 }
 
-function RideStatusBadge({status}: {status: RideStatus}) {
-    return <Badge variant={status === "CANCELLED" ? "outline" : "secondary"}>{status}</Badge>;
+function RideStatusBadge({ status }: { status: RideStatus }) {
+	return (
+		<Badge variant={status === "CANCELLED" ? "outline" : "secondary"}>
+			{status}
+		</Badge>
+	);
 }
 
 function Field({
-    label,
-    value,
-    onChange,
-    type = "text",
+	label,
+	value,
+	onChange,
+	type = "text",
 }: {
-    label: string;
-    value: string;
-    onChange: (value: string) => void;
-    type?: string;
+	label: string;
+	value: string;
+	onChange: (value: string) => void;
+	type?: string;
 }) {
-    const id = label.toLowerCase().replace(/\s+/g, "-");
+	const id = label.toLowerCase().replace(/\s+/g, "-");
 
-    return (
-        <div className="space-y-2">
-            <Label htmlFor={id}>{label}</Label>
-            <Input
-                id={id}
-                type={type}
-                value={value}
-                onChange={(event) => onChange(event.target.value)}
-                required
-            />
-        </div>
-    );
+	return (
+		<div className="space-y-2">
+			<Label htmlFor={id}>{label}</Label>
+			<Input
+				id={id}
+				type={type}
+				value={value}
+				onChange={(event) => onChange(event.target.value)}
+				required
+			/>
+		</div>
+	);
 }
 
-function NumberField({label, value, onChange}: {label: string; value: number; onChange: (value: number) => void}) {
-    return <Field label={label} type="number" value={String(value)} onChange={(value) => onChange(Number(value))}/>;
+function NumberField({
+	label,
+	value,
+	onChange,
+}: {
+	label: string;
+	value: number;
+	onChange: (value: number) => void;
+}) {
+	return (
+		<Field
+			label={label}
+			type="number"
+			value={String(value)}
+			onChange={(value) => onChange(Number(value))}
+		/>
+	);
 }
 
 function errorMessage(error: unknown) {
-    return error instanceof Error ? error.message : "Request failed";
+	return error instanceof Error ? error.message : "Request failed";
 }
diff --git a/orders-frontend/src/components/data-table.tsx b/orders-frontend/src/components/data-table.tsx
index a1b224b..f2dae35 100644
--- a/orders-frontend/src/components/data-table.tsx
+++ b/orders-frontend/src/components/data-table.tsx
@@ -1,805 +1,804 @@
-import * as React from "react"
 import {
-  closestCenter,
-  DndContext,
-  KeyboardSensor,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-  type UniqueIdentifier,
-} from "@dnd-kit/core"
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+	closestCenter,
+	DndContext,
+	type DragEndEvent,
+	KeyboardSensor,
+	MouseSensor,
+	TouchSensor,
+	type UniqueIdentifier,
+	useSensor,
+	useSensors,
+} from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import {
-  arrayMove,
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable"
-import { CSS } from "@dnd-kit/utilities"
+	arrayMove,
+	SortableContext,
+	useSortable,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import {
-  IconChevronDown,
-  IconChevronLeft,
-  IconChevronRight,
-  IconChevronsLeft,
-  IconChevronsRight,
-  IconCircleCheckFilled,
-  IconDotsVertical,
-  IconGripVertical,
-  IconLayoutColumns,
-  IconLoader,
-  IconPlus,
-  IconTrendingUp,
-} from "@tabler/icons-react"
+	IconChevronDown,
+	IconChevronLeft,
+	IconChevronRight,
+	IconChevronsLeft,
+	IconChevronsRight,
+	IconCircleCheckFilled,
+	IconDotsVertical,
+	IconGripVertical,
+	IconLayoutColumns,
+	IconLoader,
+	IconPlus,
+	IconTrendingUp,
+} from "@tabler/icons-react";
 import {
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type ColumnDef,
-  type ColumnFiltersState,
-  type Row,
-  type SortingState,
-  type VisibilityState,
-} from "@tanstack/react-table"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-import { toast } from "sonner"
-import { z } from "zod"
-
-import { useIsMobile } from "#/hooks/use-mobile.ts"
-import { Badge } from "#/components/ui/badge.tsx"
-import { Button } from "#/components/ui/button.tsx"
+	type ColumnDef,
+	type ColumnFiltersState,
+	flexRender,
+	getCoreRowModel,
+	getFacetedRowModel,
+	getFacetedUniqueValues,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type Row,
+	type SortingState,
+	useReactTable,
+	type VisibilityState,
+} from "@tanstack/react-table";
+import * as React from "react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Badge } from "#/components/ui/badge.tsx";
+import { Button } from "#/components/ui/button.tsx";
 import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "#/components/ui/chart.tsx"
-import { Checkbox } from "#/components/ui/checkbox.tsx"
+	type ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from "#/components/ui/chart.tsx";
+import { Checkbox } from "#/components/ui/checkbox.tsx";
 import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "#/components/ui/drawer.tsx"
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+} from "#/components/ui/drawer.tsx";
 import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "#/components/ui/dropdown-menu.tsx"
-import { Input } from "#/components/ui/input.tsx"
-import { Label } from "#/components/ui/label.tsx"
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "#/components/ui/dropdown-menu.tsx";
+import { Input } from "#/components/ui/input.tsx";
+import { Label } from "#/components/ui/label.tsx";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "#/components/ui/select.tsx"
-import { Separator } from "#/components/ui/separator.tsx"
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "#/components/ui/select.tsx";
+import { Separator } from "#/components/ui/separator.tsx";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "#/components/ui/table.tsx"
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "#/components/ui/table.tsx";
 import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "#/components/ui/tabs.tsx"
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "#/components/ui/tabs.tsx";
+import { useIsMobile } from "#/hooks/use-mobile.ts";
 
 export const schema = z.object({
-  id: z.number(),
-  header: z.string(),
-  type: z.string(),
-  status: z.string(),
-  target: z.string(),
-  limit: z.string(),
-  reviewer: z.string(),
-})
+	id: z.number(),
+	header: z.string(),
+	type: z.string(),
+	status: z.string(),
+	target: z.string(),
+	limit: z.string(),
+	reviewer: z.string(),
+});
 
 // Create a separate component for the drag handle
 function DragHandle({ id }: { id: number }) {
-  const { attributes, listeners } = useSortable({
-    id,
-  })
+	const { attributes, listeners } = useSortable({
+		id,
+	});
 
-  return (
-    <Button
-      {...attributes}
-      {...listeners}
-      variant="ghost"
-      size="icon"
-      className="size-7 text-muted-foreground hover:bg-transparent"
-    >
-      <IconGripVertical className="size-3 text-muted-foreground" />
-      <span className="sr-only">Drag to reorder</span>
-    </Button>
-  )
+	return (
+		<Button
+			{...attributes}
+			{...listeners}
+			variant="ghost"
+			size="icon"
+			className="size-7 text-muted-foreground hover:bg-transparent"
+		>
+			<IconGripVertical className="size-3 text-muted-foreground" />
+			<span className="sr-only">Drag to reorder</span>
+		</Button>
+	);
 }
 
 const columns: ColumnDef<z.infer<typeof schema>>[] = [
-  {
-    id: "drag",
-    header: () => null,
-    cell: ({ row }) => <DragHandle id={row.original.id} />,
-  },
-  {
-    id: "select",
-    header: ({ table }) => (
-      <div className="flex items-center justify-center">
-        <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && "indeterminate")
-          }
-          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="Select all"
-        />
-      </div>
-    ),
-    cell: ({ row }) => (
-      <div className="flex items-center justify-center">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "header",
-    header: "Header",
-    cell: ({ row }) => {
-      return <TableCellViewer item={row.original} />
-    },
-    enableHiding: false,
-  },
-  {
-    accessorKey: "type",
-    header: "Section Type",
-    cell: ({ row }) => (
-      <div className="w-32">
-        <Badge variant="outline" className="px-1.5 text-muted-foreground">
-          {row.original.type}
-        </Badge>
-      </div>
-    ),
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => (
-      <Badge variant="outline" className="px-1.5 text-muted-foreground">
-        {row.original.status === "Done" ? (
-          <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
-        ) : (
-          <IconLoader />
-        )}
-        {row.original.status}
-      </Badge>
-    ),
-  },
-  {
-    accessorKey: "target",
-    header: () => <div className="w-full text-right">Target</div>,
-    cell: ({ row }) => (
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
-            loading: `Saving ${row.original.header}`,
-            success: "Done",
-            error: "Error",
-          })
-        }}
-      >
-        <Label htmlFor={`${row.original.id}-target`} className="sr-only">
-          Target
-        </Label>
-        <Input
-          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
-          defaultValue={row.original.target}
-          id={`${row.original.id}-target`}
-        />
-      </form>
-    ),
-  },
-  {
-    accessorKey: "limit",
-    header: () => <div className="w-full text-right">Limit</div>,
-    cell: ({ row }) => (
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
-            loading: `Saving ${row.original.header}`,
-            success: "Done",
-            error: "Error",
-          })
-        }}
-      >
-        <Label htmlFor={`${row.original.id}-limit`} className="sr-only">
-          Limit
-        </Label>
-        <Input
-          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
-          defaultValue={row.original.limit}
-          id={`${row.original.id}-limit`}
-        />
-      </form>
-    ),
-  },
-  {
-    accessorKey: "reviewer",
-    header: "Reviewer",
-    cell: ({ row }) => {
-      const isAssigned = row.original.reviewer !== "Assign reviewer"
+	{
+		id: "drag",
+		header: () => null,
+		cell: ({ row }) => <DragHandle id={row.original.id} />,
+	},
+	{
+		id: "select",
+		header: ({ table }) => (
+			<div className="flex items-center justify-center">
+				<Checkbox
+					checked={
+						table.getIsAllPageRowsSelected() ||
+						(table.getIsSomePageRowsSelected() && "indeterminate")
+					}
+					onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+					aria-label="Select all"
+				/>
+			</div>
+		),
+		cell: ({ row }) => (
+			<div className="flex items-center justify-center">
+				<Checkbox
+					checked={row.getIsSelected()}
+					onCheckedChange={(value) => row.toggleSelected(!!value)}
+					aria-label="Select row"
+				/>
+			</div>
+		),
+		enableSorting: false,
+		enableHiding: false,
+	},
+	{
+		accessorKey: "header",
+		header: "Header",
+		cell: ({ row }) => {
+			return <TableCellViewer item={row.original} />;
+		},
+		enableHiding: false,
+	},
+	{
+		accessorKey: "type",
+		header: "Section Type",
+		cell: ({ row }) => (
+			<div className="w-32">
+				<Badge variant="outline" className="px-1.5 text-muted-foreground">
+					{row.original.type}
+				</Badge>
+			</div>
+		),
+	},
+	{
+		accessorKey: "status",
+		header: "Status",
+		cell: ({ row }) => (
+			<Badge variant="outline" className="px-1.5 text-muted-foreground">
+				{row.original.status === "Done" ? (
+					<IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
+				) : (
+					<IconLoader />
+				)}
+				{row.original.status}
+			</Badge>
+		),
+	},
+	{
+		accessorKey: "target",
+		header: () => <div className="w-full text-right">Target</div>,
+		cell: ({ row }) => (
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+						loading: `Saving ${row.original.header}`,
+						success: "Done",
+						error: "Error",
+					});
+				}}
+			>
+				<Label htmlFor={`${row.original.id}-target`} className="sr-only">
+					Target
+				</Label>
+				<Input
+					className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
+					defaultValue={row.original.target}
+					id={`${row.original.id}-target`}
+				/>
+			</form>
+		),
+	},
+	{
+		accessorKey: "limit",
+		header: () => <div className="w-full text-right">Limit</div>,
+		cell: ({ row }) => (
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
+						loading: `Saving ${row.original.header}`,
+						success: "Done",
+						error: "Error",
+					});
+				}}
+			>
+				<Label htmlFor={`${row.original.id}-limit`} className="sr-only">
+					Limit
+				</Label>
+				<Input
+					className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
+					defaultValue={row.original.limit}
+					id={`${row.original.id}-limit`}
+				/>
+			</form>
+		),
+	},
+	{
+		accessorKey: "reviewer",
+		header: "Reviewer",
+		cell: ({ row }) => {
+			const isAssigned = row.original.reviewer !== "Assign reviewer";
 
-      if (isAssigned) {
-        return row.original.reviewer
-      }
+			if (isAssigned) {
+				return row.original.reviewer;
+			}
 
-      return (
-        <>
-          <Label htmlFor={`${row.original.id}-reviewer`} className="sr-only">
-            Reviewer
-          </Label>
-          <Select>
-            <SelectTrigger
-              className="w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate"
-              size="sm"
-              id={`${row.original.id}-reviewer`}
-            >
-              <SelectValue placeholder="Assign reviewer" />
-            </SelectTrigger>
-            <SelectContent align="end">
-              <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
-              <SelectItem value="Jamik Tashpulatov">
-                Jamik Tashpulatov
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </>
-      )
-    },
-  },
-  {
-    id: "actions",
-    cell: () => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
-            size="icon"
-          >
-            <IconDotsVertical />
-            <span className="sr-only">Open menu</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-32">
-          <DropdownMenuItem>Edit</DropdownMenuItem>
-          <DropdownMenuItem>Make a copy</DropdownMenuItem>
-          <DropdownMenuItem>Favorite</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
-  },
-]
+			return (
+				<>
+					<Label htmlFor={`${row.original.id}-reviewer`} className="sr-only">
+						Reviewer
+					</Label>
+					<Select>
+						<SelectTrigger
+							className="w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate"
+							size="sm"
+							id={`${row.original.id}-reviewer`}
+						>
+							<SelectValue placeholder="Assign reviewer" />
+						</SelectTrigger>
+						<SelectContent align="end">
+							<SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+							<SelectItem value="Jamik Tashpulatov">
+								Jamik Tashpulatov
+							</SelectItem>
+						</SelectContent>
+					</Select>
+				</>
+			);
+		},
+	},
+	{
+		id: "actions",
+		cell: () => (
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button
+						variant="ghost"
+						className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
+						size="icon"
+					>
+						<IconDotsVertical />
+						<span className="sr-only">Open menu</span>
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="end" className="w-32">
+					<DropdownMenuItem>Edit</DropdownMenuItem>
+					<DropdownMenuItem>Make a copy</DropdownMenuItem>
+					<DropdownMenuItem>Favorite</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		),
+	},
+];
 
 function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
-  const { transform, transition, setNodeRef, isDragging } = useSortable({
-    id: row.original.id,
-  })
+	const { transform, transition, setNodeRef, isDragging } = useSortable({
+		id: row.original.id,
+	});
 
-  return (
-    <TableRow
-      data-state={row.getIsSelected() && "selected"}
-      data-dragging={isDragging}
-      ref={setNodeRef}
-      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
-      style={{
-        transform: CSS.Transform.toString(transform),
-        transition: transition,
-      }}
-    >
-      {row.getVisibleCells().map((cell) => (
-        <TableCell key={cell.id}>
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </TableCell>
-      ))}
-    </TableRow>
-  )
+	return (
+		<TableRow
+			data-state={row.getIsSelected() && "selected"}
+			data-dragging={isDragging}
+			ref={setNodeRef}
+			className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
+			style={{
+				transform: CSS.Transform.toString(transform),
+				transition: transition,
+			}}
+		>
+			{row.getVisibleCells().map((cell) => (
+				<TableCell key={cell.id}>
+					{flexRender(cell.column.columnDef.cell, cell.getContext())}
+				</TableCell>
+			))}
+		</TableRow>
+	);
 }
 
 export function DataTable({
-  data: initialData,
+	data: initialData,
 }: {
-  data: z.infer<typeof schema>[]
+	data: z.infer<typeof schema>[];
 }) {
-  const [data, setData] = React.useState(() => initialData)
-  const [rowSelection, setRowSelection] = React.useState({})
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [pagination, setPagination] = React.useState({
-    pageIndex: 0,
-    pageSize: 10,
-  })
-  const sortableId = React.useId()
-  const sensors = useSensors(
-    useSensor(MouseSensor, {}),
-    useSensor(TouchSensor, {}),
-    useSensor(KeyboardSensor, {})
-  )
+	const [data, setData] = React.useState(() => initialData);
+	const [rowSelection, setRowSelection] = React.useState({});
+	const [columnVisibility, setColumnVisibility] =
+		React.useState<VisibilityState>({});
+	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+		[],
+	);
+	const [sorting, setSorting] = React.useState<SortingState>([]);
+	const [pagination, setPagination] = React.useState({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+	const sortableId = React.useId();
+	const sensors = useSensors(
+		useSensor(MouseSensor, {}),
+		useSensor(TouchSensor, {}),
+		useSensor(KeyboardSensor, {}),
+	);
 
-  const dataIds = React.useMemo<UniqueIdentifier[]>(
-    () => data?.map(({ id }) => id) || [],
-    [data]
-  )
+	const dataIds = React.useMemo<UniqueIdentifier[]>(
+		() => data?.map(({ id }) => id) || [],
+		[data],
+	);
 
-  const table = useReactTable({
-    data,
-    columns,
-    state: {
-      sorting,
-      columnVisibility,
-      rowSelection,
-      columnFilters,
-      pagination,
-    },
-    getRowId: (row) => row.id.toString(),
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-  })
+	const table = useReactTable({
+		data,
+		columns,
+		state: {
+			sorting,
+			columnVisibility,
+			rowSelection,
+			columnFilters,
+			pagination,
+		},
+		getRowId: (row) => row.id.toString(),
+		enableRowSelection: true,
+		onRowSelectionChange: setRowSelection,
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		onColumnVisibilityChange: setColumnVisibility,
+		onPaginationChange: setPagination,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFacetedRowModel: getFacetedRowModel(),
+		getFacetedUniqueValues: getFacetedUniqueValues(),
+	});
 
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event
-    if (active && over && active.id !== over.id) {
-      setData((data) => {
-        const oldIndex = dataIds.indexOf(active.id)
-        const newIndex = dataIds.indexOf(over.id)
-        return arrayMove(data, oldIndex, newIndex)
-      })
-    }
-  }
+	function handleDragEnd(event: DragEndEvent) {
+		const { active, over } = event;
+		if (active && over && active.id !== over.id) {
+			setData((data) => {
+				const oldIndex = dataIds.indexOf(active.id);
+				const newIndex = dataIds.indexOf(over.id);
+				return arrayMove(data, oldIndex, newIndex);
+			});
+		}
+	}
 
-  return (
-    <Tabs
-      defaultValue="outline"
-      className="w-full flex-col justify-start gap-6"
-    >
-      <div className="flex items-center justify-between px-4 lg:px-6">
-        <Label htmlFor="view-selector" className="sr-only">
-          View
-        </Label>
-        <Select defaultValue="outline">
-          <SelectTrigger
-            className="flex w-fit @4xl/main:hidden"
-            size="sm"
-            id="view-selector"
-          >
-            <SelectValue placeholder="Select a view" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="outline">Outline</SelectItem>
-            <SelectItem value="past-performance">Past Performance</SelectItem>
-            <SelectItem value="key-personnel">Key Personnel</SelectItem>
-            <SelectItem value="focus-documents">Focus Documents</SelectItem>
-          </SelectContent>
-        </Select>
-        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
-          <TabsTrigger value="outline">Outline</TabsTrigger>
-          <TabsTrigger value="past-performance">
-            Past Performance <Badge variant="secondary">3</Badge>
-          </TabsTrigger>
-          <TabsTrigger value="key-personnel">
-            Key Personnel <Badge variant="secondary">2</Badge>
-          </TabsTrigger>
-          <TabsTrigger value="focus-documents">Focus Documents</TabsTrigger>
-        </TabsList>
-        <div className="flex items-center gap-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="sm">
-                <IconLayoutColumns />
-                <span className="hidden lg:inline">Customize Columns</span>
-                <span className="lg:hidden">Columns</span>
-                <IconChevronDown />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-              {table
-                .getAllColumns()
-                .filter(
-                  (column) =>
-                    typeof column.accessorFn !== "undefined" &&
-                    column.getCanHide()
-                )
-                .map((column) => {
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) =>
-                        column.toggleVisibility(!!value)
-                      }
-                    >
-                      {column.id}
-                    </DropdownMenuCheckboxItem>
-                  )
-                })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Button variant="outline" size="sm">
-            <IconPlus />
-            <span className="hidden lg:inline">Add Section</span>
-          </Button>
-        </div>
-      </div>
-      <TabsContent
-        value="outline"
-        className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
-      >
-        <div className="overflow-hidden rounded-lg border">
-          <DndContext
-            collisionDetection={closestCenter}
-            modifiers={[restrictToVerticalAxis]}
-            onDragEnd={handleDragEnd}
-            sensors={sensors}
-            id={sortableId}
-          >
-            <Table>
-              <TableHeader className="sticky top-0 z-10 bg-muted">
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <TableHead key={header.id} colSpan={header.colSpan}>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      )
-                    })}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody className="**:data-[slot=table-cell]:first:w-8">
-                {table.getRowModel().rows?.length ? (
-                  <SortableContext
-                    items={dataIds}
-                    strategy={verticalListSortingStrategy}
-                  >
-                    {table.getRowModel().rows.map((row) => (
-                      <DraggableRow key={row.id} row={row} />
-                    ))}
-                  </SortableContext>
-                ) : (
-                  <TableRow>
-                    <TableCell
-                      colSpan={columns.length}
-                      className="h-24 text-center"
-                    >
-                      No results.
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </DndContext>
-        </div>
-        <div className="flex items-center justify-between px-4">
-          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
-            {table.getFilteredSelectedRowModel().rows.length} of{" "}
-            {table.getFilteredRowModel().rows.length} row(s) selected.
-          </div>
-          <div className="flex w-full items-center gap-8 lg:w-fit">
-            <div className="hidden items-center gap-2 lg:flex">
-              <Label htmlFor="rows-per-page" className="text-sm font-medium">
-                Rows per page
-              </Label>
-              <Select
-                value={`${table.getState().pagination.pageSize}`}
-                onValueChange={(value) => {
-                  table.setPageSize(Number(value))
-                }}
-              >
-                <SelectTrigger size="sm" className="w-20" id="rows-per-page">
-                  <SelectValue
-                    placeholder={table.getState().pagination.pageSize}
-                  />
-                </SelectTrigger>
-                <SelectContent side="top">
-                  {[10, 20, 30, 40, 50].map((pageSize) => (
-                    <SelectItem key={pageSize} value={`${pageSize}`}>
-                      {pageSize}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex w-fit items-center justify-center text-sm font-medium">
-              Page {table.getState().pagination.pageIndex + 1} of{" "}
-              {table.getPageCount()}
-            </div>
-            <div className="ml-auto flex items-center gap-2 lg:ml-0">
-              <Button
-                variant="outline"
-                className="hidden h-8 w-8 p-0 lg:flex"
-                onClick={() => table.setPageIndex(0)}
-                disabled={!table.getCanPreviousPage()}
-              >
-                <span className="sr-only">Go to first page</span>
-                <IconChevronsLeft />
-              </Button>
-              <Button
-                variant="outline"
-                className="size-8"
-                size="icon"
-                onClick={() => table.previousPage()}
-                disabled={!table.getCanPreviousPage()}
-              >
-                <span className="sr-only">Go to previous page</span>
-                <IconChevronLeft />
-              </Button>
-              <Button
-                variant="outline"
-                className="size-8"
-                size="icon"
-                onClick={() => table.nextPage()}
-                disabled={!table.getCanNextPage()}
-              >
-                <span className="sr-only">Go to next page</span>
-                <IconChevronRight />
-              </Button>
-              <Button
-                variant="outline"
-                className="hidden size-8 lg:flex"
-                size="icon"
-                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-                disabled={!table.getCanNextPage()}
-              >
-                <span className="sr-only">Go to last page</span>
-                <IconChevronsRight />
-              </Button>
-            </div>
-          </div>
-        </div>
-      </TabsContent>
-      <TabsContent
-        value="past-performance"
-        className="flex flex-col px-4 lg:px-6"
-      >
-        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
-      </TabsContent>
-      <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
-        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
-      </TabsContent>
-      <TabsContent
-        value="focus-documents"
-        className="flex flex-col px-4 lg:px-6"
-      >
-        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
-      </TabsContent>
-    </Tabs>
-  )
+	return (
+		<Tabs
+			defaultValue="outline"
+			className="w-full flex-col justify-start gap-6"
+		>
+			<div className="flex items-center justify-between px-4 lg:px-6">
+				<Label htmlFor="view-selector" className="sr-only">
+					View
+				</Label>
+				<Select defaultValue="outline">
+					<SelectTrigger
+						className="flex w-fit @4xl/main:hidden"
+						size="sm"
+						id="view-selector"
+					>
+						<SelectValue placeholder="Select a view" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="outline">Outline</SelectItem>
+						<SelectItem value="past-performance">Past Performance</SelectItem>
+						<SelectItem value="key-personnel">Key Personnel</SelectItem>
+						<SelectItem value="focus-documents">Focus Documents</SelectItem>
+					</SelectContent>
+				</Select>
+				<TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
+					<TabsTrigger value="outline">Outline</TabsTrigger>
+					<TabsTrigger value="past-performance">
+						Past Performance <Badge variant="secondary">3</Badge>
+					</TabsTrigger>
+					<TabsTrigger value="key-personnel">
+						Key Personnel <Badge variant="secondary">2</Badge>
+					</TabsTrigger>
+					<TabsTrigger value="focus-documents">Focus Documents</TabsTrigger>
+				</TabsList>
+				<div className="flex items-center gap-2">
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="outline" size="sm">
+								<IconLayoutColumns />
+								<span className="hidden lg:inline">Customize Columns</span>
+								<span className="lg:hidden">Columns</span>
+								<IconChevronDown />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end" className="w-56">
+							{table
+								.getAllColumns()
+								.filter(
+									(column) =>
+										typeof column.accessorFn !== "undefined" &&
+										column.getCanHide(),
+								)
+								.map((column) => {
+									return (
+										<DropdownMenuCheckboxItem
+											key={column.id}
+											className="capitalize"
+											checked={column.getIsVisible()}
+											onCheckedChange={(value) =>
+												column.toggleVisibility(!!value)
+											}
+										>
+											{column.id}
+										</DropdownMenuCheckboxItem>
+									);
+								})}
+						</DropdownMenuContent>
+					</DropdownMenu>
+					<Button variant="outline" size="sm">
+						<IconPlus />
+						<span className="hidden lg:inline">Add Section</span>
+					</Button>
+				</div>
+			</div>
+			<TabsContent
+				value="outline"
+				className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
+			>
+				<div className="overflow-hidden rounded-lg border">
+					<DndContext
+						collisionDetection={closestCenter}
+						modifiers={[restrictToVerticalAxis]}
+						onDragEnd={handleDragEnd}
+						sensors={sensors}
+						id={sortableId}
+					>
+						<Table>
+							<TableHeader className="sticky top-0 z-10 bg-muted">
+								{table.getHeaderGroups().map((headerGroup) => (
+									<TableRow key={headerGroup.id}>
+										{headerGroup.headers.map((header) => {
+											return (
+												<TableHead key={header.id} colSpan={header.colSpan}>
+													{header.isPlaceholder
+														? null
+														: flexRender(
+																header.column.columnDef.header,
+																header.getContext(),
+															)}
+												</TableHead>
+											);
+										})}
+									</TableRow>
+								))}
+							</TableHeader>
+							<TableBody className="**:data-[slot=table-cell]:first:w-8">
+								{table.getRowModel().rows?.length ? (
+									<SortableContext
+										items={dataIds}
+										strategy={verticalListSortingStrategy}
+									>
+										{table.getRowModel().rows.map((row) => (
+											<DraggableRow key={row.id} row={row} />
+										))}
+									</SortableContext>
+								) : (
+									<TableRow>
+										<TableCell
+											colSpan={columns.length}
+											className="h-24 text-center"
+										>
+											No results.
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
+					</DndContext>
+				</div>
+				<div className="flex items-center justify-between px-4">
+					<div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
+						{table.getFilteredSelectedRowModel().rows.length} of{" "}
+						{table.getFilteredRowModel().rows.length} row(s) selected.
+					</div>
+					<div className="flex w-full items-center gap-8 lg:w-fit">
+						<div className="hidden items-center gap-2 lg:flex">
+							<Label htmlFor="rows-per-page" className="text-sm font-medium">
+								Rows per page
+							</Label>
+							<Select
+								value={`${table.getState().pagination.pageSize}`}
+								onValueChange={(value) => {
+									table.setPageSize(Number(value));
+								}}
+							>
+								<SelectTrigger size="sm" className="w-20" id="rows-per-page">
+									<SelectValue
+										placeholder={table.getState().pagination.pageSize}
+									/>
+								</SelectTrigger>
+								<SelectContent side="top">
+									{[10, 20, 30, 40, 50].map((pageSize) => (
+										<SelectItem key={pageSize} value={`${pageSize}`}>
+											{pageSize}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+						<div className="flex w-fit items-center justify-center text-sm font-medium">
+							Page {table.getState().pagination.pageIndex + 1} of{" "}
+							{table.getPageCount()}
+						</div>
+						<div className="ml-auto flex items-center gap-2 lg:ml-0">
+							<Button
+								variant="outline"
+								className="hidden h-8 w-8 p-0 lg:flex"
+								onClick={() => table.setPageIndex(0)}
+								disabled={!table.getCanPreviousPage()}
+							>
+								<span className="sr-only">Go to first page</span>
+								<IconChevronsLeft />
+							</Button>
+							<Button
+								variant="outline"
+								className="size-8"
+								size="icon"
+								onClick={() => table.previousPage()}
+								disabled={!table.getCanPreviousPage()}
+							>
+								<span className="sr-only">Go to previous page</span>
+								<IconChevronLeft />
+							</Button>
+							<Button
+								variant="outline"
+								className="size-8"
+								size="icon"
+								onClick={() => table.nextPage()}
+								disabled={!table.getCanNextPage()}
+							>
+								<span className="sr-only">Go to next page</span>
+								<IconChevronRight />
+							</Button>
+							<Button
+								variant="outline"
+								className="hidden size-8 lg:flex"
+								size="icon"
+								onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+								disabled={!table.getCanNextPage()}
+							>
+								<span className="sr-only">Go to last page</span>
+								<IconChevronsRight />
+							</Button>
+						</div>
+					</div>
+				</div>
+			</TabsContent>
+			<TabsContent
+				value="past-performance"
+				className="flex flex-col px-4 lg:px-6"
+			>
+				<div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+			</TabsContent>
+			<TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
+				<div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+			</TabsContent>
+			<TabsContent
+				value="focus-documents"
+				className="flex flex-col px-4 lg:px-6"
+			>
+				<div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
+			</TabsContent>
+		</Tabs>
+	);
 }
 
 const chartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
+	{ month: "January", desktop: 186, mobile: 80 },
+	{ month: "February", desktop: 305, mobile: 200 },
+	{ month: "March", desktop: 237, mobile: 120 },
+	{ month: "April", desktop: 73, mobile: 190 },
+	{ month: "May", desktop: 209, mobile: 130 },
+	{ month: "June", desktop: 214, mobile: 140 },
+];
 
 const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--primary)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--primary)",
-  },
-} satisfies ChartConfig
+	desktop: {
+		label: "Desktop",
+		color: "var(--primary)",
+	},
+	mobile: {
+		label: "Mobile",
+		color: "var(--primary)",
+	},
+} satisfies ChartConfig;
 
 function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
-  const isMobile = useIsMobile()
+	const isMobile = useIsMobile();
 
-  return (
-    <Drawer direction={isMobile ? "bottom" : "right"}>
-      <DrawerTrigger asChild>
-        <Button variant="link" className="w-fit px-0 text-left text-foreground">
-          {item.header}
-        </Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader className="gap-1">
-          <DrawerTitle>{item.header}</DrawerTitle>
-          <DrawerDescription>
-            Showing total visitors for the last 6 months
-          </DrawerDescription>
-        </DrawerHeader>
-        <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
-          {!isMobile && (
-            <>
-              <ChartContainer config={chartConfig}>
-                <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                    left: 0,
-                    right: 10,
-                  }}
-                >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                    dataKey="month"
-                    tickLine={false}
-                    axisLine={false}
-                    tickMargin={8}
-                    tickFormatter={(value) => value.slice(0, 3)}
-                    hide
-                  />
-                  <ChartTooltip
-                    cursor={false}
-                    content={<ChartTooltipContent indicator="dot" />}
-                  />
-                  <Area
-                    dataKey="mobile"
-                    type="natural"
-                    fill="var(--color-mobile)"
-                    fillOpacity={0.6}
-                    stroke="var(--color-mobile)"
-                    stackId="a"
-                  />
-                  <Area
-                    dataKey="desktop"
-                    type="natural"
-                    fill="var(--color-desktop)"
-                    fillOpacity={0.4}
-                    stroke="var(--color-desktop)"
-                    stackId="a"
-                  />
-                </AreaChart>
-              </ChartContainer>
-              <Separator />
-              <div className="grid gap-2">
-                <div className="flex gap-2 leading-none font-medium">
-                  Trending up by 5.2% this month{" "}
-                  <IconTrendingUp className="size-4" />
-                </div>
-                <div className="text-muted-foreground">
-                  Showing total visitors for the last 6 months. This is just
-                  some random text to test the layout. It spans multiple lines
-                  and should wrap around.
-                </div>
-              </div>
-              <Separator />
-            </>
-          )}
-          <form className="flex flex-col gap-4">
-            <div className="flex flex-col gap-3">
-              <Label htmlFor="header">Header</Label>
-              <Input id="header" defaultValue={item.header} />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="type">Type</Label>
-                <Select defaultValue={item.type}>
-                  <SelectTrigger id="type" className="w-full">
-                    <SelectValue placeholder="Select a type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Table of Contents">
-                      Table of Contents
-                    </SelectItem>
-                    <SelectItem value="Executive Summary">
-                      Executive Summary
-                    </SelectItem>
-                    <SelectItem value="Technical Approach">
-                      Technical Approach
-                    </SelectItem>
-                    <SelectItem value="Design">Design</SelectItem>
-                    <SelectItem value="Capabilities">Capabilities</SelectItem>
-                    <SelectItem value="Focus Documents">
-                      Focus Documents
-                    </SelectItem>
-                    <SelectItem value="Narrative">Narrative</SelectItem>
-                    <SelectItem value="Cover Page">Cover Page</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="status">Status</Label>
-                <Select defaultValue={item.status}>
-                  <SelectTrigger id="status" className="w-full">
-                    <SelectValue placeholder="Select a status" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Done">Done</SelectItem>
-                    <SelectItem value="In Progress">In Progress</SelectItem>
-                    <SelectItem value="Not Started">Not Started</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="target">Target</Label>
-                <Input id="target" defaultValue={item.target} />
-              </div>
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="limit">Limit</Label>
-                <Input id="limit" defaultValue={item.limit} />
-              </div>
-            </div>
-            <div className="flex flex-col gap-3">
-              <Label htmlFor="reviewer">Reviewer</Label>
-              <Select defaultValue={item.reviewer}>
-                <SelectTrigger id="reviewer" className="w-full">
-                  <SelectValue placeholder="Select a reviewer" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
-                  <SelectItem value="Jamik Tashpulatov">
-                    Jamik Tashpulatov
-                  </SelectItem>
-                  <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </form>
-        </div>
-        <DrawerFooter>
-          <Button>Submit</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Done</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  )
+	return (
+		<Drawer direction={isMobile ? "bottom" : "right"}>
+			<DrawerTrigger asChild>
+				<Button variant="link" className="w-fit px-0 text-left text-foreground">
+					{item.header}
+				</Button>
+			</DrawerTrigger>
+			<DrawerContent>
+				<DrawerHeader className="gap-1">
+					<DrawerTitle>{item.header}</DrawerTitle>
+					<DrawerDescription>
+						Showing total visitors for the last 6 months
+					</DrawerDescription>
+				</DrawerHeader>
+				<div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
+					{!isMobile && (
+						<>
+							<ChartContainer config={chartConfig}>
+								<AreaChart
+									accessibilityLayer
+									data={chartData}
+									margin={{
+										left: 0,
+										right: 10,
+									}}
+								>
+									<CartesianGrid vertical={false} />
+									<XAxis
+										dataKey="month"
+										tickLine={false}
+										axisLine={false}
+										tickMargin={8}
+										tickFormatter={(value) => value.slice(0, 3)}
+										hide
+									/>
+									<ChartTooltip
+										cursor={false}
+										content={<ChartTooltipContent indicator="dot" />}
+									/>
+									<Area
+										dataKey="mobile"
+										type="natural"
+										fill="var(--color-mobile)"
+										fillOpacity={0.6}
+										stroke="var(--color-mobile)"
+										stackId="a"
+									/>
+									<Area
+										dataKey="desktop"
+										type="natural"
+										fill="var(--color-desktop)"
+										fillOpacity={0.4}
+										stroke="var(--color-desktop)"
+										stackId="a"
+									/>
+								</AreaChart>
+							</ChartContainer>
+							<Separator />
+							<div className="grid gap-2">
+								<div className="flex gap-2 leading-none font-medium">
+									Trending up by 5.2% this month{" "}
+									<IconTrendingUp className="size-4" />
+								</div>
+								<div className="text-muted-foreground">
+									Showing total visitors for the last 6 months. This is just
+									some random text to test the layout. It spans multiple lines
+									and should wrap around.
+								</div>
+							</div>
+							<Separator />
+						</>
+					)}
+					<form className="flex flex-col gap-4">
+						<div className="flex flex-col gap-3">
+							<Label htmlFor="header">Header</Label>
+							<Input id="header" defaultValue={item.header} />
+						</div>
+						<div className="grid grid-cols-2 gap-4">
+							<div className="flex flex-col gap-3">
+								<Label htmlFor="type">Type</Label>
+								<Select defaultValue={item.type}>
+									<SelectTrigger id="type" className="w-full">
+										<SelectValue placeholder="Select a type" />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectItem value="Table of Contents">
+											Table of Contents
+										</SelectItem>
+										<SelectItem value="Executive Summary">
+											Executive Summary
+										</SelectItem>
+										<SelectItem value="Technical Approach">
+											Technical Approach
+										</SelectItem>
+										<SelectItem value="Design">Design</SelectItem>
+										<SelectItem value="Capabilities">Capabilities</SelectItem>
+										<SelectItem value="Focus Documents">
+											Focus Documents
+										</SelectItem>
+										<SelectItem value="Narrative">Narrative</SelectItem>
+										<SelectItem value="Cover Page">Cover Page</SelectItem>
+									</SelectContent>
+								</Select>
+							</div>
+							<div className="flex flex-col gap-3">
+								<Label htmlFor="status">Status</Label>
+								<Select defaultValue={item.status}>
+									<SelectTrigger id="status" className="w-full">
+										<SelectValue placeholder="Select a status" />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectItem value="Done">Done</SelectItem>
+										<SelectItem value="In Progress">In Progress</SelectItem>
+										<SelectItem value="Not Started">Not Started</SelectItem>
+									</SelectContent>
+								</Select>
+							</div>
+						</div>
+						<div className="grid grid-cols-2 gap-4">
+							<div className="flex flex-col gap-3">
+								<Label htmlFor="target">Target</Label>
+								<Input id="target" defaultValue={item.target} />
+							</div>
+							<div className="flex flex-col gap-3">
+								<Label htmlFor="limit">Limit</Label>
+								<Input id="limit" defaultValue={item.limit} />
+							</div>
+						</div>
+						<div className="flex flex-col gap-3">
+							<Label htmlFor="reviewer">Reviewer</Label>
+							<Select defaultValue={item.reviewer}>
+								<SelectTrigger id="reviewer" className="w-full">
+									<SelectValue placeholder="Select a reviewer" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+									<SelectItem value="Jamik Tashpulatov">
+										Jamik Tashpulatov
+									</SelectItem>
+									<SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
+					</form>
+				</div>
+				<DrawerFooter>
+					<Button>Submit</Button>
+					<DrawerClose asChild>
+						<Button variant="outline">Done</Button>
+					</DrawerClose>
+				</DrawerFooter>
+			</DrawerContent>
+		</Drawer>
+	);
 }
diff --git a/orders-frontend/src/components/login-form.tsx b/orders-frontend/src/components/login-form.tsx
index 880cdcc..653bf12 100644
--- a/orders-frontend/src/components/login-form.tsx
+++ b/orders-frontend/src/components/login-form.tsx
@@ -1,100 +1,100 @@
-import { cn } from "#/lib/utils.ts"
-import { Button } from "#/components/ui/button.tsx"
+import { Button } from "#/components/ui/button.tsx";
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "#/components/ui/card.tsx"
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "#/components/ui/card.tsx";
 import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-} from "#/components/ui/field.tsx"
-import { Input } from "#/components/ui/input.tsx"
+	Field,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+} from "#/components/ui/field.tsx";
+import { Input } from "#/components/ui/input.tsx";
+import { cn } from "#/lib/utils.ts";
 
-type LoginFormProps = React.ComponentProps<"div"> & {
-  username: string
-  password: string
-  error?: string | null
-  pending?: boolean
-  onUsernameChange: (value: string) => void
-  onPasswordChange: (value: string) => void
-  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
-  onSignupClick: () => void
-}
+type LoginFormProps = Omit<React.ComponentProps<"div">, "onSubmit"> & {
+	username: string;
+	password: string;
+	error?: string | null;
+	pending?: boolean;
+	onUsernameChange: (value: string) => void;
+	onPasswordChange: (value: string) => void;
+	onSubmit: (event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+	onSignupClick: () => void;
+};
 
 export function LoginForm({
-  className,
-  username,
-  password,
-  error,
-  pending = false,
-  onUsernameChange,
-  onPasswordChange,
-  onSubmit,
-  onSignupClick,
-  ...props
+	className,
+	username,
+	password,
+	error,
+	pending = false,
+	onUsernameChange,
+	onPasswordChange,
+	onSubmit,
+	onSignupClick,
+	...props
 }: LoginFormProps) {
-  return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
-        <CardHeader>
-          <CardTitle>Sign in to Cymelle</CardTitle>
-          <CardDescription>
-            Use your username and password to continue.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={onSubmit}>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="login-username">Username</FieldLabel>
-                <Input
-                  id="login-username"
-                  type="text"
-                  autoComplete="username"
-                  value={username}
-                  onChange={(event) => onUsernameChange(event.target.value)}
-                  required
-                />
-              </Field>
-              <Field>
-                <div className="flex items-center">
-                  <FieldLabel htmlFor="login-password">Password</FieldLabel>
-                </div>
-                <Input
-                  id="login-password"
-                  type="password"
-                  autoComplete="current-password"
-                  value={password}
-                  onChange={(event) => onPasswordChange(event.target.value)}
-                  required
-                />
-              </Field>
-              {error ? <FieldError>{error}</FieldError> : null}
-              <Field>
-                <Button type="submit" disabled={pending}>
-                  {pending ? "Signing in..." : "Sign in"}
-                </Button>
-                <FieldDescription className="text-center">
-                  Don&apos;t have an account?{" "}
-                  <button
-                    type="button"
-                    className="underline underline-offset-4 hover:text-primary"
-                    onClick={onSignupClick}
-                  >
-                    Sign up
-                  </button>
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  )
+	return (
+		<div className={cn("flex flex-col gap-6", className)} {...props}>
+			<Card>
+				<CardHeader>
+					<CardTitle>Sign in to Cymelle</CardTitle>
+					<CardDescription>
+						Use your username and password to continue.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<form onSubmit={onSubmit}>
+						<FieldGroup>
+							<Field>
+								<FieldLabel htmlFor="login-username">Username</FieldLabel>
+								<Input
+									id="login-username"
+									type="text"
+									autoComplete="username"
+									value={username}
+									onChange={(event) => onUsernameChange(event.target.value)}
+									required
+								/>
+							</Field>
+							<Field>
+								<div className="flex items-center">
+									<FieldLabel htmlFor="login-password">Password</FieldLabel>
+								</div>
+								<Input
+									id="login-password"
+									type="password"
+									autoComplete="current-password"
+									value={password}
+									onChange={(event) => onPasswordChange(event.target.value)}
+									required
+								/>
+							</Field>
+							{error ? <FieldError>{error}</FieldError> : null}
+							<Field>
+								<Button type="submit" disabled={pending}>
+									{pending ? "Signing in..." : "Sign in"}
+								</Button>
+								<FieldDescription className="text-center">
+									Don&apos;t have an account?{" "}
+									<button
+										type="button"
+										className="underline underline-offset-4 hover:text-primary"
+										onClick={onSignupClick}
+									>
+										Sign up
+									</button>
+								</FieldDescription>
+							</Field>
+						</FieldGroup>
+					</form>
+				</CardContent>
+			</Card>
+		</div>
+	);
 }
diff --git a/orders-frontend/src/components/nav-documents.tsx b/orders-frontend/src/components/nav-documents.tsx
index 77a7d76..a4fd82e 100644
--- a/orders-frontend/src/components/nav-documents.tsx
+++ b/orders-frontend/src/components/nav-documents.tsx
@@ -1,92 +1,92 @@
-"use client"
+"use client";
 
 import {
-  IconDots,
-  IconFolder,
-  IconShare3,
-  IconTrash,
-  type Icon,
-} from "@tabler/icons-react"
+	type Icon,
+	IconDots,
+	IconFolder,
+	IconShare3,
+	IconTrash,
+} from "@tabler/icons-react";
 
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "#/components/ui/dropdown-menu.tsx"
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "#/components/ui/dropdown-menu.tsx";
 import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "#/components/ui/sidebar.tsx"
+	SidebarGroup,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "#/components/ui/sidebar.tsx";
 
 export function NavDocuments({
-  items,
+	items,
 }: {
-  items: {
-    name: string
-    url: string
-    icon: Icon
-  }[]
+	items: {
+		name: string;
+		url: string;
+		icon: Icon;
+	}[];
 }) {
-  const { isMobile } = useSidebar()
+	const { isMobile } = useSidebar();
 
-  return (
-    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-      <SidebarGroupLabel>Documents</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <SidebarMenuItem key={item.name}>
-            <SidebarMenuButton asChild>
-              <a href={item.url}>
-                <item.icon />
-                <span>{item.name}</span>
-              </a>
-            </SidebarMenuButton>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <SidebarMenuAction
-                  showOnHover
-                  className="rounded-sm data-[state=open]:bg-accent"
-                >
-                  <IconDots />
-                  <span className="sr-only">More</span>
-                </SidebarMenuAction>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                className="w-24 rounded-lg"
-                side={isMobile ? "bottom" : "right"}
-                align={isMobile ? "end" : "start"}
-              >
-                <DropdownMenuItem>
-                  <IconFolder />
-                  <span>Open</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <IconShare3 />
-                  <span>Share</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem variant="destructive">
-                  <IconTrash />
-                  <span>Delete</span>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        ))}
-        <SidebarMenuItem>
-          <SidebarMenuButton className="text-sidebar-foreground/70">
-            <IconDots className="text-sidebar-foreground/70" />
-            <span>More</span>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarGroup>
-  )
+	return (
+		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
+			<SidebarGroupLabel>Documents</SidebarGroupLabel>
+			<SidebarMenu>
+				{items.map((item) => (
+					<SidebarMenuItem key={item.name}>
+						<SidebarMenuButton asChild>
+							<a href={item.url}>
+								<item.icon />
+								<span>{item.name}</span>
+							</a>
+						</SidebarMenuButton>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<SidebarMenuAction
+									showOnHover
+									className="rounded-sm data-[state=open]:bg-accent"
+								>
+									<IconDots />
+									<span className="sr-only">More</span>
+								</SidebarMenuAction>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								className="w-24 rounded-lg"
+								side={isMobile ? "bottom" : "right"}
+								align={isMobile ? "end" : "start"}
+							>
+								<DropdownMenuItem>
+									<IconFolder />
+									<span>Open</span>
+								</DropdownMenuItem>
+								<DropdownMenuItem>
+									<IconShare3 />
+									<span>Share</span>
+								</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem variant="destructive">
+									<IconTrash />
+									<span>Delete</span>
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</SidebarMenuItem>
+				))}
+				<SidebarMenuItem>
+					<SidebarMenuButton className="text-sidebar-foreground/70">
+						<IconDots className="text-sidebar-foreground/70" />
+						<span>More</span>
+					</SidebarMenuButton>
+				</SidebarMenuItem>
+			</SidebarMenu>
+		</SidebarGroup>
+	);
 }
diff --git a/orders-frontend/src/components/nav-main.tsx b/orders-frontend/src/components/nav-main.tsx
index e83915a..20dc7df 100644
--- a/orders-frontend/src/components/nav-main.tsx
+++ b/orders-frontend/src/components/nav-main.tsx
@@ -1,164 +1,170 @@
-import { ChevronRight, type LucideIcon } from "lucide-react"
-import { Link, useLocation } from "@tanstack/react-router"
-import { useEffect, useRef, useState } from "react"
+import { Link, useLocation } from "@tanstack/react-router";
+import { ChevronRight, type LucideIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "#/components/ui/collapsible.tsx"
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "#/components/ui/collapsible.tsx";
 import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-} from "#/components/ui/sidebar.tsx"
+	SidebarGroup,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+} from "#/components/ui/sidebar.tsx";
 
-const openSectionsStorageKey = "cymelle.sidebar.open-sections"
+const openSectionsStorageKey = "cymelle.sidebar.open-sections";
 
 export function NavMain({
-  items,
+	items,
 }: {
-  items: {
-    title: string
-    url: string
-    icon?: LucideIcon
-    isActive?: boolean
-    items?: {
-      title: string
-      url: string
-    }[]
-  }[]
+	items: {
+		title: string;
+		url: string;
+		icon?: LucideIcon;
+		isActive?: boolean;
+		items?: {
+			title: string;
+			url: string;
+		}[];
+	}[];
 }) {
-  const location = useLocation()
-  const previousPath = useRef<string | null>(null)
-  const [openSections, setOpenSections] = useState<Set<string>>(() => {
-    const itemTitles = new Set(items.map((item) => item.title))
-    const storedSections = readOpenSections().filter((title) => itemTitles.has(title))
+	const location = useLocation();
+	const previousPath = useRef<string | null>(null);
+	const [openSections, setOpenSections] = useState<Set<string>>(() => {
+		const itemTitles = new Set(items.map((item) => item.title));
+		const storedSections = readOpenSections().filter((title) =>
+			itemTitles.has(title),
+		);
 
-    if (storedSections.length > 0) {
-      return new Set(storedSections)
-    }
+		if (storedSections.length > 0) {
+			return new Set(storedSections);
+		}
 
-    return new Set(
-      items
-        .filter((item) => isItemActive(item, location.pathname))
-        .map((item) => item.title)
-    )
-  })
+		return new Set(
+			items
+				.filter((item) => isItemActive(item, location.pathname))
+				.map((item) => item.title),
+		);
+	});
 
-  useEffect(() => {
-    writeOpenSections([...openSections])
-  }, [openSections])
+	useEffect(() => {
+		writeOpenSections([...openSections]);
+	}, [openSections]);
 
-  useEffect(() => {
-    if (previousPath.current === location.pathname) {
-      return
-    }
+	useEffect(() => {
+		if (previousPath.current === location.pathname) {
+			return;
+		}
 
-    previousPath.current = location.pathname
-    setOpenSections((current) => {
-      const next = new Set(current)
-      items
-        .filter((item) => isItemActive(item, location.pathname))
-        .forEach((item) => next.add(item.title))
-      return next
-    })
-  }, [items, location.pathname])
+		previousPath.current = location.pathname;
+		setOpenSections((current) => {
+			const next = new Set(current);
+			items
+				.filter((item) => isItemActive(item, location.pathname))
+				.forEach((item) => {
+					next.add(item.title);
+				});
+			return next;
+		});
+	}, [items, location.pathname]);
 
-  return (
-    <SidebarGroup>
-      <SidebarGroupLabel>Commerce</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <Collapsible
-            key={item.title}
-            asChild
-            open={openSections.has(item.title)}
-            onOpenChange={(open) => {
-              setOpenSections((current) => {
-                const next = new Set(current)
-                if (open) {
-                  next.add(item.title)
-                } else {
-                  next.delete(item.title)
-                }
-                return next
-              })
-            }}
-            className="group/collapsible"
-          >
-            <SidebarMenuItem>
-              <CollapsibleTrigger asChild>
-                <SidebarMenuButton tooltip={item.title}>
-                  {item.icon && <item.icon />}
-                  <span>{item.title}</span>
-                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                </SidebarMenuButton>
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <SidebarMenuSub>
-                  {item.items?.map((subItem) => (
-                    <SidebarMenuSubItem key={subItem.title}>
-                      <SidebarMenuSubButton asChild>
-                        <Link to={subItem.url}>
-                          <span>{subItem.title}</span>
-                        </Link>
-                      </SidebarMenuSubButton>
-                    </SidebarMenuSubItem>
-                  ))}
-                </SidebarMenuSub>
-              </CollapsibleContent>
-            </SidebarMenuItem>
-          </Collapsible>
-        ))}
-      </SidebarMenu>
-    </SidebarGroup>
-  )
+	return (
+		<SidebarGroup>
+			<SidebarGroupLabel>Commerce</SidebarGroupLabel>
+			<SidebarMenu>
+				{items.map((item) => (
+					<Collapsible
+						key={item.title}
+						asChild
+						open={openSections.has(item.title)}
+						onOpenChange={(open) => {
+							setOpenSections((current) => {
+								const next = new Set(current);
+								if (open) {
+									next.add(item.title);
+								} else {
+									next.delete(item.title);
+								}
+								return next;
+							});
+						}}
+						className="group/collapsible"
+					>
+						<SidebarMenuItem>
+							<CollapsibleTrigger asChild>
+								<SidebarMenuButton tooltip={item.title}>
+									{item.icon && <item.icon />}
+									<span>{item.title}</span>
+									<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+								</SidebarMenuButton>
+							</CollapsibleTrigger>
+							<CollapsibleContent>
+								<SidebarMenuSub>
+									{item.items?.map((subItem) => (
+										<SidebarMenuSubItem key={subItem.title}>
+											<SidebarMenuSubButton asChild>
+												<Link to={subItem.url}>
+													<span>{subItem.title}</span>
+												</Link>
+											</SidebarMenuSubButton>
+										</SidebarMenuSubItem>
+									))}
+								</SidebarMenuSub>
+							</CollapsibleContent>
+						</SidebarMenuItem>
+					</Collapsible>
+				))}
+			</SidebarMenu>
+		</SidebarGroup>
+	);
 }
 
 function readOpenSections() {
-  if (typeof window === "undefined") {
-    return []
-  }
+	if (typeof window === "undefined") {
+		return [];
+	}
 
-  const raw = window.localStorage.getItem(openSectionsStorageKey)
-  if (!raw) {
-    return []
-  }
+	const raw = window.localStorage.getItem(openSectionsStorageKey);
+	if (!raw) {
+		return [];
+	}
 
-  try {
-    const value = JSON.parse(raw)
-    return Array.isArray(value) ? value.filter((item) => typeof item === "string") : []
-  } catch {
-    window.localStorage.removeItem(openSectionsStorageKey)
-    return []
-  }
+	try {
+		const value = JSON.parse(raw);
+		return Array.isArray(value)
+			? value.filter((item) => typeof item === "string")
+			: [];
+	} catch {
+		window.localStorage.removeItem(openSectionsStorageKey);
+		return [];
+	}
 }
 
 function writeOpenSections(sections: string[]) {
-  if (typeof window === "undefined") {
-    return
-  }
+	if (typeof window === "undefined") {
+		return;
+	}
 
-  window.localStorage.setItem(openSectionsStorageKey, JSON.stringify(sections))
+	window.localStorage.setItem(openSectionsStorageKey, JSON.stringify(sections));
 }
 
 function isItemActive(
-  item: {
-    url: string
-    isActive?: boolean
-    items?: { url: string }[]
-  },
-  pathname: string
+	item: {
+		url: string;
+		isActive?: boolean;
+		items?: { url: string }[];
+	},
+	pathname: string,
 ) {
-  if (item.items?.some((subItem) => pathname === subItem.url)) {
-    return true
-  }
+	if (item.items?.some((subItem) => pathname === subItem.url)) {
+		return true;
+	}
 
-  return pathname === item.url || (Boolean(item.isActive) && pathname === "/")
+	return pathname === item.url || (Boolean(item.isActive) && pathname === "/");
 }
diff --git a/orders-frontend/src/components/nav-projects.tsx b/orders-frontend/src/components/nav-projects.tsx
index 2cb051a..08f9b34 100644
--- a/orders-frontend/src/components/nav-projects.tsx
+++ b/orders-frontend/src/components/nav-projects.tsx
@@ -1,79 +1,75 @@
-"use client"
+"use client";
+
+import { Folder, type LucideIcon, MoreHorizontal } from "lucide-react";
 
 import {
-  Folder,
-  MoreHorizontal,
-  type LucideIcon,
-} from "lucide-react"
-
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "#/components/ui/dropdown-menu.tsx";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "#/components/ui/dropdown-menu.tsx"
-import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "#/components/ui/sidebar.tsx"
+	SidebarGroup,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "#/components/ui/sidebar.tsx";
 
 export function NavProjects({
-  projects,
+	projects,
 }: {
-  projects: {
-    name: string
-    url: string
-    icon: LucideIcon
-  }[]
+	projects: {
+		name: string;
+		url: string;
+		icon: LucideIcon;
+	}[];
 }) {
-  const { isMobile } = useSidebar()
+	const { isMobile } = useSidebar();
 
-  return (
-    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-      <SidebarGroupLabel>Shortcuts</SidebarGroupLabel>
-      <SidebarMenu>
-        {projects.map((item) => (
-          <SidebarMenuItem key={item.name}>
-            <SidebarMenuButton asChild>
-              <a href={item.url}>
-                <item.icon />
-                <span>{item.name}</span>
-              </a>
-            </SidebarMenuButton>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <SidebarMenuAction showOnHover>
-                  <MoreHorizontal />
-                  <span className="sr-only">More</span>
-                </SidebarMenuAction>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                className="w-48 rounded-lg"
-                side={isMobile ? "bottom" : "right"}
-                align={isMobile ? "end" : "start"}
-              >
-                <DropdownMenuItem asChild>
-                  <a href={item.url}>
-                  <Folder className="text-muted-foreground" />
-                  <span>Open</span>
-                  </a>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        ))}
-        <SidebarMenuItem>
-          <SidebarMenuButton className="text-sidebar-foreground/70">
-            <MoreHorizontal className="text-sidebar-foreground/70" />
-            <span>More</span>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarGroup>
-  )
+	return (
+		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
+			<SidebarGroupLabel>Shortcuts</SidebarGroupLabel>
+			<SidebarMenu>
+				{projects.map((item) => (
+					<SidebarMenuItem key={item.name}>
+						<SidebarMenuButton asChild>
+							<a href={item.url}>
+								<item.icon />
+								<span>{item.name}</span>
+							</a>
+						</SidebarMenuButton>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<SidebarMenuAction showOnHover>
+									<MoreHorizontal />
+									<span className="sr-only">More</span>
+								</SidebarMenuAction>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								className="w-48 rounded-lg"
+								side={isMobile ? "bottom" : "right"}
+								align={isMobile ? "end" : "start"}
+							>
+								<DropdownMenuItem asChild>
+									<a href={item.url}>
+										<Folder className="text-muted-foreground" />
+										<span>Open</span>
+									</a>
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</SidebarMenuItem>
+				))}
+				<SidebarMenuItem>
+					<SidebarMenuButton className="text-sidebar-foreground/70">
+						<MoreHorizontal className="text-sidebar-foreground/70" />
+						<span>More</span>
+					</SidebarMenuButton>
+				</SidebarMenuItem>
+			</SidebarMenu>
+		</SidebarGroup>
+	);
 }
diff --git a/orders-frontend/src/components/nav-secondary.tsx b/orders-frontend/src/components/nav-secondary.tsx
index 28dbe9a..e18d96c 100644
--- a/orders-frontend/src/components/nav-secondary.tsx
+++ b/orders-frontend/src/components/nav-secondary.tsx
@@ -1,42 +1,42 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { type Icon } from "@tabler/icons-react"
+import type { Icon } from "@tabler/icons-react";
+import type * as React from "react";
 
 import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "#/components/ui/sidebar.tsx"
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+} from "#/components/ui/sidebar.tsx";
 
 export function NavSecondary({
-  items,
-  ...props
+	items,
+	...props
 }: {
-  items: {
-    title: string
-    url: string
-    icon: Icon
-  }[]
+	items: {
+		title: string;
+		url: string;
+		icon: Icon;
+	}[];
 } & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-  return (
-    <SidebarGroup {...props}>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild>
-                <a href={item.url}>
-                  <item.icon />
-                  <span>{item.title}</span>
-                </a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  )
+	return (
+		<SidebarGroup {...props}>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					{items.map((item) => (
+						<SidebarMenuItem key={item.title}>
+							<SidebarMenuButton asChild>
+								<a href={item.url}>
+									<item.icon />
+									<span>{item.title}</span>
+								</a>
+							</SidebarMenuButton>
+						</SidebarMenuItem>
+					))}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
 }
diff --git a/orders-frontend/src/components/nav-user.tsx b/orders-frontend/src/components/nav-user.tsx
index 549cc8c..955ea5c 100644
--- a/orders-frontend/src/components/nav-user.tsx
+++ b/orders-frontend/src/components/nav-user.tsx
@@ -1,109 +1,109 @@
-import {
-  BadgeCheck,
-  ChevronsUpDown,
-  LogOut,
-} from "lucide-react"
+import { BadgeCheck, ChevronsUpDown, LogOut } from "lucide-react";
 
 import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "#/components/ui/avatar.tsx"
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "#/components/ui/avatar.tsx";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "#/components/ui/dropdown-menu.tsx"
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "#/components/ui/dropdown-menu.tsx";
 import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "#/components/ui/sidebar.tsx"
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "#/components/ui/sidebar.tsx";
 
 export function NavUser({
-  user,
-  onLogout,
+	user,
+	onLogout,
 }: {
-  user: {
-    name: string
-    email: string
-    avatar: string
-  }
-  onLogout?: () => void
+	user: {
+		name: string;
+		email: string;
+		avatar: string;
+	};
+	onLogout?: () => void;
 }) {
-  const { isMobile } = useSidebar()
-  const initials = user.name
-    .split(/\s+/)
-    .filter(Boolean)
-    .map((part) => part[0])
-    .join("")
-    .slice(0, 2)
-    .toUpperCase()
-    || "CY"
+	const { isMobile } = useSidebar();
+	const initials =
+		user.name
+			.split(/\s+/)
+			.filter(Boolean)
+			.map((part) => part[0])
+			.join("")
+			.slice(0, 2)
+			.toUpperCase() || "CY";
 
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-            >
-              <Avatar className="h-8 w-8 rounded-lg">
-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
-              </Avatar>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs">{user.email}</span>
-              </div>
-              <ChevronsUpDown className="ml-auto size-4" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            side={isMobile ? "bottom" : "right"}
-            align="end"
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarImage src={user.avatar} alt={user.name} />
-                  <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
-                </Avatar>
-                <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-medium">{user.name}</span>
-                  <span className="truncate text-xs">{user.email}</span>
-                </div>
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <BadgeCheck />
-                Account session
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault()
-                void onLogout?.()
-              }}
-            >
-              <LogOut />
-              Log out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  )
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton
+							size="lg"
+							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						>
+							<Avatar className="h-8 w-8 rounded-lg">
+								<AvatarImage src={user.avatar} alt={user.name} />
+								<AvatarFallback className="rounded-lg">
+									{initials}
+								</AvatarFallback>
+							</Avatar>
+							<div className="grid flex-1 text-left text-sm leading-tight">
+								<span className="truncate font-medium">{user.name}</span>
+								<span className="truncate text-xs">{user.email}</span>
+							</div>
+							<ChevronsUpDown className="ml-auto size-4" />
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+						side={isMobile ? "bottom" : "right"}
+						align="end"
+						sideOffset={4}
+					>
+						<DropdownMenuLabel className="p-0 font-normal">
+							<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+								<Avatar className="h-8 w-8 rounded-lg">
+									<AvatarImage src={user.avatar} alt={user.name} />
+									<AvatarFallback className="rounded-lg">
+										{initials}
+									</AvatarFallback>
+								</Avatar>
+								<div className="grid flex-1 text-left text-sm leading-tight">
+									<span className="truncate font-medium">{user.name}</span>
+									<span className="truncate text-xs">{user.email}</span>
+								</div>
+							</div>
+						</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							<DropdownMenuItem>
+								<BadgeCheck />
+								Account session
+							</DropdownMenuItem>
+						</DropdownMenuGroup>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem
+							onSelect={(event) => {
+								event.preventDefault();
+								void onLogout?.();
+							}}
+						>
+							<LogOut />
+							Log out
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
 }
diff --git a/orders-frontend/src/components/section-cards.tsx b/orders-frontend/src/components/section-cards.tsx
index 10d55bc..e1fba22 100644
--- a/orders-frontend/src/components/section-cards.tsx
+++ b/orders-frontend/src/components/section-cards.tsx
@@ -1,102 +1,102 @@
-import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react"
+import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
 
-import { Badge } from "#/components/ui/badge.tsx"
+import { Badge } from "#/components/ui/badge.tsx";
 import {
-  Card,
-  CardAction,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "#/components/ui/card.tsx"
+	Card,
+	CardAction,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "#/components/ui/card.tsx";
 
 export function SectionCards() {
-  return (
-    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Total Revenue</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            $1,250.00
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingUp />
-              +12.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Trending up this month <IconTrendingUp className="size-4" />
-          </div>
-          <div className="text-muted-foreground">
-            Visitors for the last 6 months
-          </div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>New Customers</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            1,234
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingDown />
-              -20%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Down 20% this period <IconTrendingDown className="size-4" />
-          </div>
-          <div className="text-muted-foreground">
-            Acquisition needs attention
-          </div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Active Accounts</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            45,678
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingUp />
-              +12.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Strong user retention <IconTrendingUp className="size-4" />
-          </div>
-          <div className="text-muted-foreground">Engagement exceed targets</div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Growth Rate</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            4.5%
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingUp />
-              +4.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Steady performance increase <IconTrendingUp className="size-4" />
-          </div>
-          <div className="text-muted-foreground">Meets growth projections</div>
-        </CardFooter>
-      </Card>
-    </div>
-  )
+	return (
+		<div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
+			<Card className="@container/card">
+				<CardHeader>
+					<CardDescription>Total Revenue</CardDescription>
+					<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+						$1,250.00
+					</CardTitle>
+					<CardAction>
+						<Badge variant="outline">
+							<IconTrendingUp />
+							+12.5%
+						</Badge>
+					</CardAction>
+				</CardHeader>
+				<CardFooter className="flex-col items-start gap-1.5 text-sm">
+					<div className="line-clamp-1 flex gap-2 font-medium">
+						Trending up this month <IconTrendingUp className="size-4" />
+					</div>
+					<div className="text-muted-foreground">
+						Visitors for the last 6 months
+					</div>
+				</CardFooter>
+			</Card>
+			<Card className="@container/card">
+				<CardHeader>
+					<CardDescription>New Customers</CardDescription>
+					<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+						1,234
+					</CardTitle>
+					<CardAction>
+						<Badge variant="outline">
+							<IconTrendingDown />
+							-20%
+						</Badge>
+					</CardAction>
+				</CardHeader>
+				<CardFooter className="flex-col items-start gap-1.5 text-sm">
+					<div className="line-clamp-1 flex gap-2 font-medium">
+						Down 20% this period <IconTrendingDown className="size-4" />
+					</div>
+					<div className="text-muted-foreground">
+						Acquisition needs attention
+					</div>
+				</CardFooter>
+			</Card>
+			<Card className="@container/card">
+				<CardHeader>
+					<CardDescription>Active Accounts</CardDescription>
+					<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+						45,678
+					</CardTitle>
+					<CardAction>
+						<Badge variant="outline">
+							<IconTrendingUp />
+							+12.5%
+						</Badge>
+					</CardAction>
+				</CardHeader>
+				<CardFooter className="flex-col items-start gap-1.5 text-sm">
+					<div className="line-clamp-1 flex gap-2 font-medium">
+						Strong user retention <IconTrendingUp className="size-4" />
+					</div>
+					<div className="text-muted-foreground">Engagement exceed targets</div>
+				</CardFooter>
+			</Card>
+			<Card className="@container/card">
+				<CardHeader>
+					<CardDescription>Growth Rate</CardDescription>
+					<CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
+						4.5%
+					</CardTitle>
+					<CardAction>
+						<Badge variant="outline">
+							<IconTrendingUp />
+							+4.5%
+						</Badge>
+					</CardAction>
+				</CardHeader>
+				<CardFooter className="flex-col items-start gap-1.5 text-sm">
+					<div className="line-clamp-1 flex gap-2 font-medium">
+						Steady performance increase <IconTrendingUp className="size-4" />
+					</div>
+					<div className="text-muted-foreground">Meets growth projections</div>
+				</CardFooter>
+			</Card>
+		</div>
+	);
 }
diff --git a/orders-frontend/src/components/signup-form.tsx b/orders-frontend/src/components/signup-form.tsx
index 3fade76..e45a3bc 100644
--- a/orders-frontend/src/components/signup-form.tsx
+++ b/orders-frontend/src/components/signup-form.tsx
@@ -1,135 +1,139 @@
-import { Button } from "#/components/ui/button.tsx"
+import { Button } from "#/components/ui/button.tsx";
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "#/components/ui/card.tsx"
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "#/components/ui/card.tsx";
 import {
-  Field,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-} from "#/components/ui/field.tsx"
-import { Input } from "#/components/ui/input.tsx"
+	Field,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+} from "#/components/ui/field.tsx";
+import { Input } from "#/components/ui/input.tsx";
 
-type SignupFormProps = React.ComponentProps<typeof Card> & {
-  displayName: string
-  username: string
-  password: string
-  confirmPassword: string
-  error?: string | null
-  pending?: boolean
-  onDisplayNameChange: (value: string) => void
-  onUsernameChange: (value: string) => void
-  onPasswordChange: (value: string) => void
-  onConfirmPasswordChange: (value: string) => void
-  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
-  onLoginClick: () => void
-}
+type SignupFormProps = Omit<React.ComponentProps<typeof Card>, "onSubmit"> & {
+	displayName: string;
+	username: string;
+	password: string;
+	confirmPassword: string;
+	error?: string | null;
+	pending?: boolean;
+	onDisplayNameChange: (value: string) => void;
+	onUsernameChange: (value: string) => void;
+	onPasswordChange: (value: string) => void;
+	onConfirmPasswordChange: (value: string) => void;
+	onSubmit: (event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+	onLoginClick: () => void;
+};
 
 export function SignupForm({
-  displayName,
-  username,
-  password,
-  confirmPassword,
-  error,
-  pending = false,
-  onDisplayNameChange,
-  onUsernameChange,
-  onPasswordChange,
-  onConfirmPasswordChange,
-  onSubmit,
-  onLoginClick,
-  ...props
+	displayName,
+	username,
+	password,
+	confirmPassword,
+	error,
+	pending = false,
+	onDisplayNameChange,
+	onUsernameChange,
+	onPasswordChange,
+	onConfirmPasswordChange,
+	onSubmit,
+	onLoginClick,
+	...props
 }: SignupFormProps) {
-  return (
-    <Card {...props}>
-      <CardHeader>
-        <CardTitle>Create an account</CardTitle>
-        <CardDescription>
-          Create a customer account to place orders and request rides.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form onSubmit={onSubmit}>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="signup-display-name">Display name</FieldLabel>
-              <Input
-                id="signup-display-name"
-                type="text"
-                autoComplete="name"
-                value={displayName}
-                onChange={(event) => onDisplayNameChange(event.target.value)}
-                required
-              />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="signup-username">Username</FieldLabel>
-              <Input
-                id="signup-username"
-                type="text"
-                autoComplete="username"
-                value={username}
-                onChange={(event) => onUsernameChange(event.target.value)}
-                required
-              />
-              <FieldDescription>
-                This is what you will use when signing in.
-              </FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="signup-password">Password</FieldLabel>
-              <Input
-                id="signup-password"
-                type="password"
-                autoComplete="new-password"
-                value={password}
-                onChange={(event) => onPasswordChange(event.target.value)}
-                required
-              />
-              <FieldDescription>
-                Must be at least 8 characters long.
-              </FieldDescription>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="signup-confirm-password">
-                Confirm Password
-              </FieldLabel>
-              <Input
-                id="signup-confirm-password"
-                type="password"
-                autoComplete="new-password"
-                value={confirmPassword}
-                onChange={(event) => onConfirmPasswordChange(event.target.value)}
-                required
-              />
-              <FieldDescription>Please confirm your password.</FieldDescription>
-            </Field>
-            {error ? <FieldError>{error}</FieldError> : null}
-            <FieldGroup>
-              <Field>
-                <Button type="submit" disabled={pending}>
-                  {pending ? "Creating account..." : "Create account"}
-                </Button>
-                <FieldDescription className="px-6 text-center">
-                  Already have an account?{" "}
-                  <button
-                    type="button"
-                    className="underline underline-offset-4 hover:text-primary"
-                    onClick={onLoginClick}
-                  >
-                    Sign in
-                  </button>
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
+	return (
+		<Card {...props}>
+			<CardHeader>
+				<CardTitle>Create an account</CardTitle>
+				<CardDescription>
+					Create a customer account to place orders and request rides.
+				</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<form onSubmit={onSubmit}>
+					<FieldGroup>
+						<Field>
+							<FieldLabel htmlFor="signup-display-name">
+								Display name
+							</FieldLabel>
+							<Input
+								id="signup-display-name"
+								type="text"
+								autoComplete="name"
+								value={displayName}
+								onChange={(event) => onDisplayNameChange(event.target.value)}
+								required
+							/>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor="signup-username">Username</FieldLabel>
+							<Input
+								id="signup-username"
+								type="text"
+								autoComplete="username"
+								value={username}
+								onChange={(event) => onUsernameChange(event.target.value)}
+								required
+							/>
+							<FieldDescription>
+								This is what you will use when signing in.
+							</FieldDescription>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor="signup-password">Password</FieldLabel>
+							<Input
+								id="signup-password"
+								type="password"
+								autoComplete="new-password"
+								value={password}
+								onChange={(event) => onPasswordChange(event.target.value)}
+								required
+							/>
+							<FieldDescription>
+								Must be at least 8 characters long.
+							</FieldDescription>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor="signup-confirm-password">
+								Confirm Password
+							</FieldLabel>
+							<Input
+								id="signup-confirm-password"
+								type="password"
+								autoComplete="new-password"
+								value={confirmPassword}
+								onChange={(event) =>
+									onConfirmPasswordChange(event.target.value)
+								}
+								required
+							/>
+							<FieldDescription>Please confirm your password.</FieldDescription>
+						</Field>
+						{error ? <FieldError>{error}</FieldError> : null}
+						<FieldGroup>
+							<Field>
+								<Button type="submit" disabled={pending}>
+									{pending ? "Creating account..." : "Create account"}
+								</Button>
+								<FieldDescription className="px-6 text-center">
+									Already have an account?{" "}
+									<button
+										type="button"
+										className="underline underline-offset-4 hover:text-primary"
+										onClick={onLoginClick}
+									>
+										Sign in
+									</button>
+								</FieldDescription>
+							</Field>
+						</FieldGroup>
+					</FieldGroup>
+				</form>
+			</CardContent>
+		</Card>
+	);
 }
diff --git a/orders-frontend/src/components/site-header.tsx b/orders-frontend/src/components/site-header.tsx
index e116ef2..8ea1a1d 100644
--- a/orders-frontend/src/components/site-header.tsx
+++ b/orders-frontend/src/components/site-header.tsx
@@ -1,42 +1,48 @@
-import { Link } from "@tanstack/react-router"
-import { ShoppingCart } from "lucide-react"
-
-import { Button } from "#/components/ui/button.tsx"
-import { Separator } from "#/components/ui/separator.tsx"
-import { SidebarTrigger } from "#/components/ui/sidebar.tsx"
-import { ThemeToggle } from "#/components/theme-toggle.tsx"
-import { useCart } from "#/hooks/useCart.tsx"
+import { Link } from "@tanstack/react-router";
+import { ShoppingCart } from "lucide-react";
+import { ThemeToggle } from "#/components/theme-toggle.tsx";
+import { Button } from "#/components/ui/button.tsx";
+import { Separator } from "#/components/ui/separator.tsx";
+import { SidebarTrigger } from "#/components/ui/sidebar.tsx";
+import { useCart } from "#/hooks/useCart.tsx";
 
 type SiteHeaderProps = {
-  title: string
-  onLogout: () => void
-  showCart?: boolean
-}
+	title: string;
+	onLogout: () => void;
+	showCart?: boolean;
+};
 
-export function SiteHeader({ title, onLogout, showCart = false }: SiteHeaderProps) {
-  const cart = useCart()
+export function SiteHeader({
+	title,
+	onLogout,
+	showCart = false,
+}: SiteHeaderProps) {
+	const cart = useCart();
 
-  return (
-    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
-      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-        <SidebarTrigger className="-ml-1" />
-        <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
-        <h1 className="text-base font-medium">{title}</h1>
-        <div className="ml-auto flex items-center gap-2">
-          <ThemeToggle />
-          {showCart ? (
-            <Button asChild variant="outline" size="sm">
-              <Link to="/cart">
-                <ShoppingCart />
-                Cart ({cart.itemCount})
-              </Link>
-            </Button>
-          ) : null}
-          <Button type="button" variant="outline" size="sm" onClick={onLogout}>
-            Sign out
-          </Button>
-        </div>
-      </div>
-    </header>
-  )
+	return (
+		<header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+			<div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+				<SidebarTrigger className="-ml-1" />
+				<Separator
+					orientation="vertical"
+					className="mx-2 data-[orientation=vertical]:h-4"
+				/>
+				<h1 className="text-base font-medium">{title}</h1>
+				<div className="ml-auto flex items-center gap-2">
+					<ThemeToggle />
+					{showCart ? (
+						<Button asChild variant="outline" size="sm">
+							<Link to="/cart">
+								<ShoppingCart />
+								Cart ({cart.itemCount})
+							</Link>
+						</Button>
+					) : null}
+					<Button type="button" variant="outline" size="sm" onClick={onLogout}>
+						Sign out
+					</Button>
+				</div>
+			</div>
+		</header>
+	);
 }
diff --git a/orders-frontend/src/components/store/AuthDialog.tsx b/orders-frontend/src/components/store/AuthDialog.tsx
index 3fcc35c..f02671b 100644
--- a/orders-frontend/src/components/store/AuthDialog.tsx
+++ b/orders-frontend/src/components/store/AuthDialog.tsx
@@ -1,128 +1,133 @@
-import { LoginForm } from "#/components/login-form.tsx"
-import { SignupForm } from "#/components/signup-form.tsx"
-import { Dialog, DialogContent } from "#/components/ui/dialog.tsx"
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
+import { LoginForm } from "#/components/login-form.tsx";
+import { SignupForm } from "#/components/signup-form.tsx";
+import { Dialog, DialogContent } from "#/components/ui/dialog.tsx";
 
 type AuthDialogProps = {
-  open: boolean
-  initialMode: "login" | "register"
-  onOpenChange: (open: boolean) => void
-  onLogin: (request: { username: string; password: string }) => Promise<unknown>
-  onRegister: (request: {
-    username: string
-    password: string
-    displayName: string
-  }) => Promise<unknown>
-}
+	open: boolean;
+	initialMode: "login" | "register";
+	onOpenChange: (open: boolean) => void;
+	onLogin: (request: {
+		username: string;
+		password: string;
+	}) => Promise<unknown>;
+	onRegister: (request: {
+		username: string;
+		password: string;
+		displayName: string;
+	}) => Promise<unknown>;
+};
 
 export function AuthDialog({
-  open,
-  initialMode,
-  onOpenChange,
-  onLogin,
-  onRegister,
+	open,
+	initialMode,
+	onOpenChange,
+	onLogin,
+	onRegister,
 }: AuthDialogProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md border-0 bg-transparent p-0 shadow-none">
-        <AuthForm
-          initialMode={initialMode}
-          onLogin={onLogin}
-          onRegister={onRegister}
-        />
-      </DialogContent>
-    </Dialog>
-  )
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="max-w-md border-0 bg-transparent p-0 shadow-none">
+				<AuthForm
+					initialMode={initialMode}
+					onLogin={onLogin}
+					onRegister={onRegister}
+				/>
+			</DialogContent>
+		</Dialog>
+	);
 }
 
 export function AuthForm({
-  initialMode,
-  onLogin,
-  onRegister,
+	initialMode,
+	onLogin,
+	onRegister,
 }: Omit<AuthDialogProps, "open" | "onOpenChange">) {
-  const [mode, setMode] = useState<"login" | "register">(initialMode)
-  const [username, setUsername] = useState("")
-  const [displayName, setDisplayName] = useState("")
-  const [password, setPassword] = useState("")
-  const [confirmPassword, setConfirmPassword] = useState("")
-  const [error, setError] = useState<string | null>(null)
-  const [pending, setPending] = useState(false)
+	const [mode, setMode] = useState<"login" | "register">(initialMode);
+	const [username, setUsername] = useState("");
+	const [displayName, setDisplayName] = useState("");
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [pending, setPending] = useState(false);
 
-  useEffect(() => {
-    setMode(initialMode)
-    setError(null)
-  }, [initialMode])
+	useEffect(() => {
+		setMode(initialMode);
+		setError(null);
+	}, [initialMode]);
 
-  async function handleLogin(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    setError(null)
-    setPending(true)
+	async function handleLogin(event: React.FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		setError(null);
+		setPending(true);
 
-    try {
-      await onLogin({ username, password })
-    } catch (caught) {
-      setError(caught instanceof Error ? caught.message : "Sign in failed")
-    } finally {
-      setPending(false)
-    }
-  }
+		try {
+			await onLogin({ username, password });
+		} catch (caught) {
+			setError(caught instanceof Error ? caught.message : "Sign in failed");
+		} finally {
+			setPending(false);
+		}
+	}
 
-  async function handleSignup(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    setError(null)
+	async function handleSignup(event: React.FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		setError(null);
 
-    if (password !== confirmPassword) {
-      setError("Passwords do not match")
-      return
-    }
+		if (password !== confirmPassword) {
+			setError("Passwords do not match");
+			return;
+		}
 
-    setPending(true)
+		setPending(true);
 
-    try {
-      await onRegister({ username, displayName, password })
-      await onLogin({ username, password })
-    } catch (caught) {
-      setError(caught instanceof Error ? caught.message : "Account creation failed")
-    } finally {
-      setPending(false)
-    }
-  }
+		try {
+			await onRegister({ username, displayName, password });
+			await onLogin({ username, password });
+		} catch (caught) {
+			setError(
+				caught instanceof Error ? caught.message : "Account creation failed",
+			);
+		} finally {
+			setPending(false);
+		}
+	}
 
-  if (mode === "register") {
-    return (
-      <SignupForm
-        displayName={displayName}
-        username={username}
-        password={password}
-        confirmPassword={confirmPassword}
-        error={error}
-        pending={pending}
-        onDisplayNameChange={setDisplayName}
-        onUsernameChange={setUsername}
-        onPasswordChange={setPassword}
-        onConfirmPasswordChange={setConfirmPassword}
-        onSubmit={handleSignup}
-        onLoginClick={() => {
-          setMode("login")
-          setError(null)
-        }}
-      />
-    )
-  }
+	if (mode === "register") {
+		return (
+			<SignupForm
+				displayName={displayName}
+				username={username}
+				password={password}
+				confirmPassword={confirmPassword}
+				error={error}
+				pending={pending}
+				onDisplayNameChange={setDisplayName}
+				onUsernameChange={setUsername}
+				onPasswordChange={setPassword}
+				onConfirmPasswordChange={setConfirmPassword}
+				onSubmit={handleSignup}
+				onLoginClick={() => {
+					setMode("login");
+					setError(null);
+				}}
+			/>
+		);
+	}
 
-  return (
-    <LoginForm
-      username={username}
-      password={password}
-      error={error}
-      pending={pending}
-      onUsernameChange={setUsername}
-      onPasswordChange={setPassword}
-      onSubmit={handleLogin}
-      onSignupClick={() => {
-        setMode("register")
-        setError(null)
-      }}
-    />
-  )
+	return (
+		<LoginForm
+			username={username}
+			password={password}
+			error={error}
+			pending={pending}
+			onUsernameChange={setUsername}
+			onPasswordChange={setPassword}
+			onSubmit={handleLogin}
+			onSignupClick={() => {
+				setMode("register");
+				setError(null);
+			}}
+		/>
+	);
 }
diff --git a/orders-frontend/src/components/store/ProductCard.tsx b/orders-frontend/src/components/store/ProductCard.tsx
index 7efc73a..78e0661 100644
--- a/orders-frontend/src/components/store/ProductCard.tsx
+++ b/orders-frontend/src/components/store/ProductCard.tsx
@@ -1,69 +1,82 @@
-import {QuantityStepper} from "#/components/store/QuantityStepper";
-import {Button} from "#/components/ui/button";
-import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "#/components/ui/card";
-import {StatusBadge} from "#/components/ui/status-badge";
-import {formatCurrency} from "#/hooks/formatCurrency";
-import type {Product} from "#/types/product";
-import {Link} from "@tanstack/react-router";
-import {ShoppingCart} from "lucide-react";
-import {useState} from "react";
-import {toast} from "sonner";
+import { Link } from "@tanstack/react-router";
+import { ShoppingCart } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { QuantityStepper } from "#/components/store/QuantityStepper";
+import { Button } from "#/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "#/components/ui/card";
+import { StatusBadge } from "#/components/ui/status-badge";
+import { formatCurrency } from "#/hooks/formatCurrency";
+import type { Product } from "#/types/product";
 
 type ProductCardProps = {
-    product: Product;
-    onAddToCart?: (product: Product, quantity: number) => void;
+	product: Product;
+	onAddToCart?: (product: Product, quantity: number) => void;
 };
 
-export function ProductCard({product, onAddToCart}: ProductCardProps) {
-    const [quantity, setQuantity] = useState(1);
-    const inStock = product.availableQuantity > 0;
+export function ProductCard({ product, onAddToCart }: ProductCardProps) {
+	const [quantity, setQuantity] = useState(1);
+	const inStock = product.availableQuantity > 0;
 
-    return (
-        <Card className="gap-4">
-            <CardHeader>
-                <div className="flex items-start justify-between gap-3">
-                    <div>
-                        <CardTitle>{product.name}</CardTitle>
-                        <p className="mt-1 text-xs text-muted-foreground">{product.sku}</p>
-                    </div>
-                    <StatusBadge status={inStock ? "IN_STOCK" : "OUT_OF_STOCK"} label={inStock ? "In stock" : "Out"}/>
-                </div>
-            </CardHeader>
-            <CardContent className="space-y-4">
-                <p className="text-2xl font-semibold">{formatCurrency(product.price, product.currency)}</p>
-                <p className="text-sm text-muted-foreground">{product.availableQuantity} available</p>
-                {onAddToCart ? (
-                    <div className="flex flex-wrap items-center justify-between gap-3">
-                        <QuantityStepper
-                            value={Math.min(quantity, Math.max(product.availableQuantity, 1))}
-                            min={1}
-                            max={Math.max(product.availableQuantity, 1)}
-                            disabled={!inStock}
-                            onChange={setQuantity}
-                        />
-                        <Button
-                            type="button"
-                            disabled={!inStock}
-                            onClick={() => {
-                                onAddToCart(product, quantity);
-                                toast.success("Added to cart", {
-                                    description: `${quantity} x ${product.name}`,
-                                });
-                            }}
-                        >
-                            <ShoppingCart/>
-                            Add
-                        </Button>
-                    </div>
-                ) : null}
-            </CardContent>
-            <CardFooter>
-                <Button asChild variant="outline" className="w-full">
-                    <Link to="/products/$productId" params={{productId: product.id}}>
-                        View details
-                    </Link>
-                </Button>
-            </CardFooter>
-        </Card>
-    );
+	return (
+		<Card className="gap-4">
+			<CardHeader>
+				<div className="flex items-start justify-between gap-3">
+					<div>
+						<CardTitle>{product.name}</CardTitle>
+						<p className="mt-1 text-xs text-muted-foreground">{product.sku}</p>
+					</div>
+					<StatusBadge
+						status={inStock ? "IN_STOCK" : "OUT_OF_STOCK"}
+						label={inStock ? "In stock" : "Out"}
+					/>
+				</div>
+			</CardHeader>
+			<CardContent className="space-y-4">
+				<p className="text-2xl font-semibold">
+					{formatCurrency(product.price, product.currency)}
+				</p>
+				<p className="text-sm text-muted-foreground">
+					{product.availableQuantity} available
+				</p>
+				{onAddToCart ? (
+					<div className="flex flex-wrap items-center justify-between gap-3">
+						<QuantityStepper
+							value={Math.min(quantity, Math.max(product.availableQuantity, 1))}
+							min={1}
+							max={Math.max(product.availableQuantity, 1)}
+							disabled={!inStock}
+							onChange={setQuantity}
+						/>
+						<Button
+							type="button"
+							disabled={!inStock}
+							onClick={() => {
+								onAddToCart(product, quantity);
+								toast.success("Added to cart", {
+									description: `${quantity} x ${product.name}`,
+								});
+							}}
+						>
+							<ShoppingCart />
+							Add
+						</Button>
+					</div>
+				) : null}
+			</CardContent>
+			<CardFooter>
+				<Button asChild variant="outline" className="w-full">
+					<Link to="/products/$productId" params={{ productId: product.id }}>
+						View details
+					</Link>
+				</Button>
+			</CardFooter>
+		</Card>
+	);
 }
diff --git a/orders-frontend/src/components/store/ProductGrid.tsx b/orders-frontend/src/components/store/ProductGrid.tsx
index 92166cb..ae3e421 100644
--- a/orders-frontend/src/components/store/ProductGrid.tsx
+++ b/orders-frontend/src/components/store/ProductGrid.tsx
@@ -1,31 +1,39 @@
-import {ProductCard} from "#/components/store/ProductCard";
-import {LoadingState} from "#/components/ui/LoadingState";
-import type {Product} from "#/types/product";
+import { ProductCard } from "#/components/store/ProductCard";
+import { LoadingState } from "#/components/ui/LoadingState";
+import type { Product } from "#/types/product";
 
 type ProductGridProps = {
-    products: Product[];
-    isLoading: boolean;
-    onAddToCart?: (product: Product, quantity: number) => void;
+	products: Product[];
+	isLoading: boolean;
+	onAddToCart?: (product: Product, quantity: number) => void;
 };
 
-export function ProductGrid({products, isLoading, onAddToCart}: ProductGridProps) {
-    if (isLoading) {
-        return <LoadingState title="Loading products"/>;
-    }
+export function ProductGrid({
+	products,
+	isLoading,
+	onAddToCart,
+}: ProductGridProps) {
+	if (isLoading) {
+		return <LoadingState title="Loading products" />;
+	}
 
-    if (products.length === 0) {
-        return (
-            <div className="rounded-lg border border-dashed border-border bg-card p-8 text-center text-sm text-muted-foreground">
-                No products available.
-            </div>
-        );
-    }
+	if (products.length === 0) {
+		return (
+			<div className="rounded-lg border border-dashed border-border bg-card p-8 text-center text-sm text-muted-foreground">
+				No products available.
+			</div>
+		);
+	}
 
-    return (
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-            {products.map((product) => (
-                <ProductCard key={product.id} product={product} onAddToCart={onAddToCart}/>
-            ))}
-        </div>
-    );
+	return (
+		<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+			{products.map((product) => (
+				<ProductCard
+					key={product.id}
+					product={product}
+					onAddToCart={onAddToCart}
+				/>
+			))}
+		</div>
+	);
 }
diff --git a/orders-frontend/src/components/store/QuantityStepper.tsx b/orders-frontend/src/components/store/QuantityStepper.tsx
index 1bc8c4d..ebc5dd9 100644
--- a/orders-frontend/src/components/store/QuantityStepper.tsx
+++ b/orders-frontend/src/components/store/QuantityStepper.tsx
@@ -1,61 +1,61 @@
-import {Button} from "#/components/ui/button";
-import {Input} from "#/components/ui/input";
+import { Button } from "#/components/ui/button";
+import { Input } from "#/components/ui/input";
 
 type QuantityStepperProps = {
-    value: number;
-    min?: number;
-    max: number;
-    disabled?: boolean;
-    onChange: (value: number) => void;
+	value: number;
+	min?: number;
+	max: number;
+	disabled?: boolean;
+	onChange: (value: number) => void;
 };
 
 export function QuantityStepper({
-    value,
-    min = 1,
-    max,
-    disabled = false,
-    onChange,
+	value,
+	min = 1,
+	max,
+	disabled = false,
+	onChange,
 }: QuantityStepperProps) {
-    const normalizedMax = Math.max(max, min);
+	const normalizedMax = Math.max(max, min);
 
-    function setQuantity(nextValue: number) {
-        if (Number.isNaN(nextValue)) {
-            onChange(min);
-            return;
-        }
+	function setQuantity(nextValue: number) {
+		if (Number.isNaN(nextValue)) {
+			onChange(min);
+			return;
+		}
 
-        onChange(Math.min(Math.max(nextValue, min), normalizedMax));
-    }
+		onChange(Math.min(Math.max(nextValue, min), normalizedMax));
+	}
 
-    return (
-        <div className="inline-grid grid-cols-[2.25rem_4rem_2.25rem] overflow-hidden rounded-md border border-input">
-            <Button
-                type="button"
-                variant="secondary"
-                disabled={disabled || value <= min}
-                onClick={() => setQuantity(value - 1)}
-                className="h-9 rounded-none border-0 shadow-none"
-            >
-                -
-            </Button>
-            <Input
-                type="number"
-                min={min}
-                max={normalizedMax}
-                value={value}
-                disabled={disabled}
-                onChange={(event) => setQuantity(Number(event.target.value))}
-                className="h-9 rounded-none border-y-0 px-2 text-center shadow-none"
-            />
-            <Button
-                type="button"
-                variant="secondary"
-                disabled={disabled || value >= normalizedMax}
-                onClick={() => setQuantity(value + 1)}
-                className="h-9 rounded-none border-0 shadow-none"
-            >
-                +
-            </Button>
-        </div>
-    );
+	return (
+		<div className="inline-grid grid-cols-[2.25rem_4rem_2.25rem] overflow-hidden rounded-md border border-input">
+			<Button
+				type="button"
+				variant="secondary"
+				disabled={disabled || value <= min}
+				onClick={() => setQuantity(value - 1)}
+				className="h-9 rounded-none border-0 shadow-none"
+			>
+				-
+			</Button>
+			<Input
+				type="number"
+				min={min}
+				max={normalizedMax}
+				value={value}
+				disabled={disabled}
+				onChange={(event) => setQuantity(Number(event.target.value))}
+				className="h-9 rounded-none border-y-0 px-2 text-center shadow-none"
+			/>
+			<Button
+				type="button"
+				variant="secondary"
+				disabled={disabled || value >= normalizedMax}
+				onClick={() => setQuantity(value + 1)}
+				className="h-9 rounded-none border-0 shadow-none"
+			>
+				+
+			</Button>
+		</div>
+	);
 }
diff --git a/orders-frontend/src/components/store/SiteHeader.tsx b/orders-frontend/src/components/store/SiteHeader.tsx
index ba4ed56..e519fee 100644
--- a/orders-frontend/src/components/store/SiteHeader.tsx
+++ b/orders-frontend/src/components/store/SiteHeader.tsx
@@ -1,54 +1,67 @@
-import {Button} from "#/components/ui/button";
-import {ThemeToggle} from "#/components/theme-toggle";
-import {useCart} from "#/hooks/useCart";
-import type {AuthUser} from "#/types/auth";
-import {Link} from "@tanstack/react-router";
-import {LogOut, ShoppingCart, User} from "lucide-react";
+import { Link } from "@tanstack/react-router";
+import { LogOut, ShoppingCart, User } from "lucide-react";
+import { ThemeToggle } from "#/components/theme-toggle";
+import { Button } from "#/components/ui/button";
+import { useCart } from "#/hooks/useCart";
+import type { AuthUser } from "#/types/auth";
 
 type SiteHeaderProps = {
-    user?: AuthUser | null;
-    onLogin?: () => void;
-    onRegister?: () => void;
-    onLogout?: () => void;
+	user?: AuthUser | null;
+	onLogin?: () => void;
+	onRegister?: () => void;
+	onLogout?: () => void;
 };
 
-export function SiteHeader({user, onLogin, onRegister, onLogout}: SiteHeaderProps) {
-    const cart = useCart();
+export function SiteHeader({
+	user,
+	onLogin,
+	onRegister,
+	onLogout,
+}: SiteHeaderProps) {
+	const cart = useCart();
 
-    return (
-        <header className="sticky top-0 z-30 border-b border-border bg-background/95 backdrop-blur">
-            <div className="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-4 md:flex-row md:items-center md:justify-between">
-                <div>
-                    <Link to="/" className="text-2xl font-bold text-foreground">Cymelle</Link>
-                    <p className="text-sm text-muted-foreground">Commerce, delivery, and rides</p>
-                </div>
-                <div className="flex flex-wrap items-center gap-2">
-                    <ThemeToggle/>
-                    <Button asChild variant="outline">
-                        <Link to="/cart">
-                            <ShoppingCart/>
-                            Cart ({cart.itemCount})
-                        </Link>
-                    </Button>
-                    {user ? (
-                        <>
-                            <div className="inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm">
-                                <User className="size-4"/>
-                                <span>{user.displayName}</span>
-                            </div>
-                            <Button type="button" variant="outline" onClick={onLogout}>
-                                <LogOut/>
-                                Sign out
-                            </Button>
-                        </>
-                    ) : (
-                        <>
-                            <Button type="button" onClick={onLogin}>Sign in</Button>
-                            <Button type="button" variant="outline" onClick={onRegister}>Create account</Button>
-                        </>
-                    )}
-                </div>
-            </div>
-        </header>
-    );
+	return (
+		<header className="sticky top-0 z-30 border-b border-border bg-background/95 backdrop-blur">
+			<div className="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-4 md:flex-row md:items-center md:justify-between">
+				<div>
+					<Link to="/" className="text-2xl font-bold text-foreground">
+						Cymelle
+					</Link>
+					<p className="text-sm text-muted-foreground">
+						Commerce, delivery, and rides
+					</p>
+				</div>
+				<div className="flex flex-wrap items-center gap-2">
+					<ThemeToggle />
+					<Button asChild variant="outline">
+						<Link to="/cart">
+							<ShoppingCart />
+							Cart ({cart.itemCount})
+						</Link>
+					</Button>
+					{user ? (
+						<>
+							<div className="inline-flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm">
+								<User className="size-4" />
+								<span>{user.displayName}</span>
+							</div>
+							<Button type="button" variant="outline" onClick={onLogout}>
+								<LogOut />
+								Sign out
+							</Button>
+						</>
+					) : (
+						<>
+							<Button type="button" onClick={onLogin}>
+								Sign in
+							</Button>
+							<Button type="button" variant="outline" onClick={onRegister}>
+								Create account
+							</Button>
+						</>
+					)}
+				</div>
+			</div>
+		</header>
+	);
 }
diff --git a/orders-frontend/src/components/store/StoreHome.tsx b/orders-frontend/src/components/store/StoreHome.tsx
index 3c30d07..4a47431 100644
--- a/orders-frontend/src/components/store/StoreHome.tsx
+++ b/orders-frontend/src/components/store/StoreHome.tsx
@@ -1,60 +1,68 @@
-import {AuthDialog} from "#/components/store/AuthDialog";
-import {ProductGrid} from "#/components/store/ProductGrid";
-import {SiteHeader} from "#/components/store/SiteHeader";
-import {useAuth} from "#/hooks/useAuth";
-import {useCart} from "#/hooks/useCart";
-import {useProducts} from "#/hooks/useProducts";
-import {navigateToRoleHome} from "#/lib/auth-navigation";
-import {useNavigate} from "@tanstack/react-router";
-import {useState} from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { AuthDialog } from "#/components/store/AuthDialog";
+import { ProductGrid } from "#/components/store/ProductGrid";
+import { SiteHeader } from "#/components/store/SiteHeader";
+import { useAuth } from "#/hooks/useAuth";
+import { useCart } from "#/hooks/useCart";
+import { useProducts } from "#/hooks/useProducts";
+import { navigateToRoleHome } from "#/lib/auth-navigation";
 
 export function StoreHome() {
-    const {user, login, register, logout} = useAuth();
-    const productsQuery = useProducts();
-    const cart = useCart();
-    const navigate = useNavigate();
-    const [authMode, setAuthMode] = useState<"login" | "register" | null>(null);
+	const { user, login, register, logout } = useAuth();
+	const productsQuery = useProducts();
+	const cart = useCart();
+	const navigate = useNavigate();
+	const [authMode, setAuthMode] = useState<"login" | "register" | null>(null);
 
-    async function handleLogin(request: {username: string; password: string}) {
-        const user = await login(request);
-        setAuthMode(null);
-        await navigateToRoleHome(navigate, user);
-        return user;
-    }
+	async function handleLogin(request: { username: string; password: string }) {
+		const user = await login(request);
+		setAuthMode(null);
+		await navigateToRoleHome(navigate, user);
+		return user;
+	}
 
-    async function handleRegister(request: {username: string; password: string; displayName: string}) {
-        const user = await register(request);
-        setAuthMode(null);
-        await navigateToRoleHome(navigate, user);
-        return user;
-    }
+	async function handleRegister(request: {
+		username: string;
+		password: string;
+		displayName: string;
+	}) {
+		const user = await register(request);
+		setAuthMode(null);
+		await navigateToRoleHome(navigate, user);
+		return user;
+	}
 
-    return (
-        <main className="min-h-screen bg-background">
-            <SiteHeader
-                user={user}
-                onLogin={() => setAuthMode("login")}
-                onRegister={() => setAuthMode("register")}
-                onLogout={logout}
-            />
-            <section className="mx-auto max-w-7xl px-4 py-8">
-                <div className="mb-6 max-w-2xl">
-                    <p className="text-sm font-medium uppercase text-muted-foreground">Store</p>
-                    <h1 className="mt-2 text-4xl font-bold tracking-normal text-foreground">Shop Cymelle products</h1>
-                </div>
-                <ProductGrid
-                    products={productsQuery.data ?? []}
-                    isLoading={productsQuery.isLoading}
-                    onAddToCart={cart.addItem}
-                />
-            </section>
-            <AuthDialog
-                open={authMode !== null}
-                initialMode={authMode ?? "login"}
-                onOpenChange={(open) => !open && setAuthMode(null)}
-                onLogin={handleLogin}
-                onRegister={handleRegister}
-            />
-        </main>
-    );
+	return (
+		<main className="min-h-screen bg-background">
+			<SiteHeader
+				user={user}
+				onLogin={() => setAuthMode("login")}
+				onRegister={() => setAuthMode("register")}
+				onLogout={logout}
+			/>
+			<section className="mx-auto max-w-7xl px-4 py-8">
+				<div className="mb-6 max-w-2xl">
+					<p className="text-sm font-medium uppercase text-muted-foreground">
+						Store
+					</p>
+					<h1 className="mt-2 text-4xl font-bold tracking-normal text-foreground">
+						Shop Cymelle products
+					</h1>
+				</div>
+				<ProductGrid
+					products={productsQuery.data ?? []}
+					isLoading={productsQuery.isLoading}
+					onAddToCart={cart.addItem}
+				/>
+			</section>
+			<AuthDialog
+				open={authMode !== null}
+				initialMode={authMode ?? "login"}
+				onOpenChange={(open) => !open && setAuthMode(null)}
+				onLogin={handleLogin}
+				onRegister={handleRegister}
+			/>
+		</main>
+	);
 }
diff --git a/orders-frontend/src/components/team-switcher.tsx b/orders-frontend/src/components/team-switcher.tsx
index 31f76cf..055bd19 100644
--- a/orders-frontend/src/components/team-switcher.tsx
+++ b/orders-frontend/src/components/team-switcher.tsx
@@ -1,81 +1,81 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ChevronsUpDown } from "lucide-react"
+import { ChevronsUpDown } from "lucide-react";
+import * as React from "react";
 
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "#/components/ui/dropdown-menu.tsx"
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "#/components/ui/dropdown-menu.tsx";
 import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "#/components/ui/sidebar.tsx"
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "#/components/ui/sidebar.tsx";
 
 export function TeamSwitcher({
-  teams,
+	teams,
 }: {
-  teams: {
-    name: string
-    logo: React.ElementType
-    plan: string
-  }[]
+	teams: {
+		name: string;
+		logo: React.ElementType;
+		plan: string;
+	}[];
 }) {
-  const { isMobile } = useSidebar()
-  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+	const { isMobile } = useSidebar();
+	const [activeTeam, setActiveTeam] = React.useState(teams[0]);
 
-  if (!activeTeam) {
-    return null
-  }
+	if (!activeTeam) {
+		return null;
+	}
 
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-            >
-              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                <activeTeam.logo className="size-4" />
-              </div>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{activeTeam.name}</span>
-                <span className="truncate text-xs">{activeTeam.plan}</span>
-              </div>
-              <ChevronsUpDown className="ml-auto" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            align="start"
-            side={isMobile ? "bottom" : "right"}
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="text-xs text-muted-foreground">
-              Workspace
-            </DropdownMenuLabel>
-            {teams.map((team, index) => (
-              <DropdownMenuItem
-                key={team.name}
-                onClick={() => setActiveTeam(team)}
-                className="gap-2 p-2"
-              >
-                <div className="flex size-6 items-center justify-center rounded-md border">
-                  <team.logo className="size-3.5 shrink-0" />
-                </div>
-                {team.name}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  )
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton
+							size="lg"
+							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						>
+							<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+								<activeTeam.logo className="size-4" />
+							</div>
+							<div className="grid flex-1 text-left text-sm leading-tight">
+								<span className="truncate font-medium">{activeTeam.name}</span>
+								<span className="truncate text-xs">{activeTeam.plan}</span>
+							</div>
+							<ChevronsUpDown className="ml-auto" />
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+						align="start"
+						side={isMobile ? "bottom" : "right"}
+						sideOffset={4}
+					>
+						<DropdownMenuLabel className="text-xs text-muted-foreground">
+							Workspace
+						</DropdownMenuLabel>
+						{teams.map((team) => (
+							<DropdownMenuItem
+								key={team.name}
+								onClick={() => setActiveTeam(team)}
+								className="gap-2 p-2"
+							>
+								<div className="flex size-6 items-center justify-center rounded-md border">
+									<team.logo className="size-3.5 shrink-0" />
+								</div>
+								{team.name}
+							</DropdownMenuItem>
+						))}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
 }
diff --git a/orders-frontend/src/components/theme-provider.tsx b/orders-frontend/src/components/theme-provider.tsx
index 83c483c..76876cc 100644
--- a/orders-frontend/src/components/theme-provider.tsx
+++ b/orders-frontend/src/components/theme-provider.tsx
@@ -1,14 +1,14 @@
-import {ThemeProvider as NextThemesProvider} from "next-themes";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
 
-export function ThemeProvider({children}: {children: React.ReactNode}) {
-    return (
-        <NextThemesProvider
-            attribute="class"
-            defaultTheme="system"
-            enableSystem
-            disableTransitionOnChange
-        >
-            {children}
-        </NextThemesProvider>
-    );
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+	return (
+		<NextThemesProvider
+			attribute="class"
+			defaultTheme="system"
+			enableSystem
+			disableTransitionOnChange
+		>
+			{children}
+		</NextThemesProvider>
+	);
 }
diff --git a/orders-frontend/src/components/theme-toggle.tsx b/orders-frontend/src/components/theme-toggle.tsx
index 81a1ffc..40fe5c6 100644
--- a/orders-frontend/src/components/theme-toggle.tsx
+++ b/orders-frontend/src/components/theme-toggle.tsx
@@ -1,38 +1,38 @@
-import {Button} from "#/components/ui/button";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "#/components/ui/button";
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
 } from "#/components/ui/dropdown-menu";
-import {Monitor, Moon, Sun} from "lucide-react";
-import {useTheme} from "next-themes";
 
 export function ThemeToggle() {
-    const {setTheme} = useTheme();
+	const { setTheme } = useTheme();
 
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon" aria-label="Toggle theme">
-                    <Sun className="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"/>
-                    <Moon className="absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"/>
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={() => setTheme("light")}>
-                    <Sun/>
-                    Light
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setTheme("dark")}>
-                    <Moon/>
-                    Dark
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setTheme("system")}>
-                    <Monitor/>
-                    System
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="outline" size="icon" aria-label="Toggle theme">
+					<Sun className="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+					<Moon className="absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={() => setTheme("light")}>
+					<Sun />
+					Light
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("dark")}>
+					<Moon />
+					Dark
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("system")}>
+					<Monitor />
+					System
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
 }
diff --git a/orders-frontend/src/components/ui/EmptyState.tsx b/orders-frontend/src/components/ui/EmptyState.tsx
index aa82fbc..25f0fe6 100644
--- a/orders-frontend/src/components/ui/EmptyState.tsx
+++ b/orders-frontend/src/components/ui/EmptyState.tsx
@@ -1,13 +1,13 @@
 type EmptyStateProps = {
-    title: string;
-    description: string;
+	title: string;
+	description: string;
 };
 
-export function EmptyState({title, description}: EmptyStateProps) {
-    return (
-        <div className="rounded-xl border border-dashed border-slate-300 bg-white p-8 text-center">
-            <h3 className="font-semibold text-slate-900">{title}</h3>
-            <p className="mt-1 text-sm text-slate-500">{description}</p>
-        </div>
-    );
-}
\ No newline at end of file
+export function EmptyState({ title, description }: EmptyStateProps) {
+	return (
+		<div className="rounded-xl border border-dashed border-slate-300 bg-white p-8 text-center">
+			<h3 className="font-semibold text-slate-900">{title}</h3>
+			<p className="mt-1 text-sm text-slate-500">{description}</p>
+		</div>
+	);
+}
diff --git a/orders-frontend/src/components/ui/ErrorState.tsx b/orders-frontend/src/components/ui/ErrorState.tsx
index f1bee34..78117e9 100644
--- a/orders-frontend/src/components/ui/ErrorState.tsx
+++ b/orders-frontend/src/components/ui/ErrorState.tsx
@@ -1,28 +1,28 @@
 type ErrorStateProps = {
-    title?: string;
-    message: string;
-    onRetry?: () => void;
+	title?: string;
+	message: string;
+	onRetry?: () => void;
 };
 
 export function ErrorState({
-                               title = "Something went wrong",
-                               message,
-                               onRetry,
-                           }: ErrorStateProps) {
-    return (
-        <div className="rounded-xl border border-red-200 bg-red-50 p-8 text-center">
-            <h3 className="font-semibold text-red-900">{title}</h3>
-            <p className="mt-1 text-sm text-red-700">{message}</p>
+	title = "Something went wrong",
+	message,
+	onRetry,
+}: ErrorStateProps) {
+	return (
+		<div className="rounded-xl border border-red-200 bg-red-50 p-8 text-center">
+			<h3 className="font-semibold text-red-900">{title}</h3>
+			<p className="mt-1 text-sm text-red-700">{message}</p>
 
-            {onRetry ? (
-                <button
-                    type="button"
-                    onClick={onRetry}
-                    className="mt-4 rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white hover:bg-red-800"
-                >
-                    Try again
-                </button>
-            ) : null}
-        </div>
-    );
-}
\ No newline at end of file
+			{onRetry ? (
+				<button
+					type="button"
+					onClick={onRetry}
+					className="mt-4 rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white hover:bg-red-800"
+				>
+					Try again
+				</button>
+			) : null}
+		</div>
+	);
+}
diff --git a/orders-frontend/src/components/ui/LoadingState.tsx b/orders-frontend/src/components/ui/LoadingState.tsx
index 9877647..b974a0a 100644
--- a/orders-frontend/src/components/ui/LoadingState.tsx
+++ b/orders-frontend/src/components/ui/LoadingState.tsx
@@ -1,21 +1,22 @@
 type LoadingStateProps = {
-    title?: string;
+	title?: string;
 };
 
-export function LoadingState({
-                                 title = "Loading",
-                             }: LoadingStateProps) {
-    return (
-        <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm" aria-label={title}>
-            <div className="space-y-3">
-                <div className="h-4 w-36 animate-pulse rounded-md bg-muted"/>
-                <div className="h-8 w-full animate-pulse rounded-md bg-muted"/>
-                <div className="grid gap-3 md:grid-cols-3">
-                    <div className="h-16 animate-pulse rounded-md bg-muted"/>
-                    <div className="h-16 animate-pulse rounded-md bg-muted"/>
-                    <div className="h-16 animate-pulse rounded-md bg-muted"/>
-                </div>
-            </div>
-        </div>
-    );
+export function LoadingState({ title = "Loading" }: LoadingStateProps) {
+	return (
+		<output
+			className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm"
+			aria-label={title}
+		>
+			<div className="space-y-3">
+				<div className="h-4 w-36 animate-pulse rounded-md bg-muted" />
+				<div className="h-8 w-full animate-pulse rounded-md bg-muted" />
+				<div className="grid gap-3 md:grid-cols-3">
+					<div className="h-16 animate-pulse rounded-md bg-muted" />
+					<div className="h-16 animate-pulse rounded-md bg-muted" />
+					<div className="h-16 animate-pulse rounded-md bg-muted" />
+				</div>
+			</div>
+		</output>
+	);
 }
diff --git a/orders-frontend/src/components/ui/avatar.tsx b/orders-frontend/src/components/ui/avatar.tsx
index 3a515d7..35edf48 100644
--- a/orders-frontend/src/components/ui/avatar.tsx
+++ b/orders-frontend/src/components/ui/avatar.tsx
@@ -1,109 +1,109 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Avatar as AvatarPrimitive } from "radix-ui"
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Avatar({
-  className,
-  size = "default",
-  ...props
+	className,
+	size = "default",
+	...props
 }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: "default" | "sm" | "lg"
+	size?: "default" | "sm" | "lg";
 }) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      data-size={size}
-      className={cn(
-        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<AvatarPrimitive.Root
+			data-slot="avatar"
+			data-size={size}
+			className={cn(
+				"group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function AvatarImage({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
+	return (
+		<AvatarPrimitive.Image
+			data-slot="avatar-image"
+			className={cn("aspect-square size-full", className)}
+			{...props}
+		/>
+	);
 }
 
 function AvatarFallback({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<AvatarPrimitive.Fallback
+			data-slot="avatar-fallback"
+			className={cn(
+				"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="avatar-badge"
-      className={cn(
-        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
-        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
-        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
-        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<span
+			data-slot="avatar-badge"
+			className={cn(
+				"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
+				"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+				"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+				"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group"
-      className={cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="avatar-group"
+			className={cn(
+				"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function AvatarGroupCount({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="avatar-group-count"
+			className={cn(
+				"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarBadge,
-  AvatarGroup,
-  AvatarGroupCount,
-}
+	Avatar,
+	AvatarImage,
+	AvatarFallback,
+	AvatarBadge,
+	AvatarGroup,
+	AvatarGroupCount,
+};
diff --git a/orders-frontend/src/components/ui/badge.tsx b/orders-frontend/src/components/ui/badge.tsx
index cd79adb..faf2b5b 100644
--- a/orders-frontend/src/components/ui/badge.tsx
+++ b/orders-frontend/src/components/ui/badge.tsx
@@ -1,48 +1,48 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-        outline:
-          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 [a&]:hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+	"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+				destructive:
+					"bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+				outline:
+					"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 [a&]:hover:underline",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
 
 function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
+	className,
+	variant = "default",
+	asChild = false,
+	...props
 }: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span"
+	VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot.Root : "span";
 
-  return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="badge"
+			data-variant={variant}
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	);
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/orders-frontend/src/components/ui/breadcrumb.tsx b/orders-frontend/src/components/ui/breadcrumb.tsx
index 18d5124..48626d2 100644
--- a/orders-frontend/src/components/ui/breadcrumb.tsx
+++ b/orders-frontend/src/components/ui/breadcrumb.tsx
@@ -1,109 +1,107 @@
-import * as React from "react"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-import { Slot } from "radix-ui"
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { Slot } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
 
 function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<ol
+			data-slot="breadcrumb-list"
+			className={cn(
+				"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-item"
-      className={cn("inline-flex items-center gap-1.5", className)}
-      {...props}
-    />
-  )
+	return (
+		<li
+			data-slot="breadcrumb-item"
+			className={cn("inline-flex items-center gap-1.5", className)}
+			{...props}
+		/>
+	);
 }
 
 function BreadcrumbLink({
-  asChild,
-  className,
-  ...props
+	asChild,
+	className,
+	...props
 }: React.ComponentProps<"a"> & {
-  asChild?: boolean
+	asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot.Root : "a"
+	const Comp = asChild ? Slot.Root : "a";
 
-  return (
-    <Comp
-      data-slot="breadcrumb-link"
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="breadcrumb-link"
+			className={cn("transition-colors hover:text-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
 function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn("font-normal text-foreground", className)}
-      {...props}
-    />
-  )
+	return (
+		<span
+			data-slot="breadcrumb-page"
+			aria-current="page"
+			className={cn("font-normal text-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
 function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
+	children,
+	className,
+	...props
 }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="breadcrumb-separator"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
-      {...props}
-    >
-      {children ?? <ChevronRight />}
-    </li>
-  )
+	return (
+		<li
+			data-slot="breadcrumb-separator"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("[&>svg]:size-3.5", className)}
+			{...props}
+		>
+			{children ?? <ChevronRight />}
+		</li>
+	);
 }
 
 function BreadcrumbEllipsis({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <MoreHorizontal className="size-4" />
-      <span className="sr-only">More</span>
-    </span>
-  )
+	return (
+		<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("flex size-9 items-center justify-center", className)}
+			{...props}
+		>
+			<MoreHorizontal className="size-4" />
+			<span className="sr-only">More</span>
+		</span>
+	);
 }
 
 export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+};
diff --git a/orders-frontend/src/components/ui/button.tsx b/orders-frontend/src/components/ui/button.tsx
index 189f9e6..d23d30f 100644
--- a/orders-frontend/src/components/ui/button.tsx
+++ b/orders-frontend/src/components/ui/button.tsx
@@ -1,64 +1,64 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+	"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost:
+					"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
 
 function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
+	className,
+	variant = "default",
+	size = "default",
+	asChild = false,
+	...props
 }: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : "button"
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot.Root : "button";
 
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/orders-frontend/src/components/ui/card.tsx b/orders-frontend/src/components/ui/card.tsx
index b66c622..09eb69f 100644
--- a/orders-frontend/src/components/ui/card.tsx
+++ b/orders-frontend/src/components/ui/card.tsx
@@ -1,92 +1,92 @@
-import * as React from "react"
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-title"
+			className={cn("leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-action"
+			className={cn(
+				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-content"
+			className={cn("px-6", className)}
+			{...props}
+		/>
+	);
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardAction,
+	CardDescription,
+	CardContent,
+};
diff --git a/orders-frontend/src/components/ui/chart.tsx b/orders-frontend/src/components/ui/chart.tsx
index b08da20..f395a4a 100644
--- a/orders-frontend/src/components/ui/chart.tsx
+++ b/orders-frontend/src/components/ui/chart.tsx
@@ -1,372 +1,370 @@
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-import type { TooltipValueType } from "recharts"
+import * as React from "react";
+import type { TooltipValueType } from "recharts";
+import * as RechartsPrimitive from "recharts";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;
 
-const INITIAL_DIMENSION = { width: 320, height: 200 } as const
-type TooltipNameType = number | string
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const;
+type TooltipNameType = number | string;
 
 export type ChartConfig = Record<
-  string,
-  {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
->
+	string,
+	{
+		label?: React.ReactNode;
+		icon?: React.ComponentType;
+	} & (
+		| { color?: string; theme?: never }
+		| { color?: never; theme: Record<keyof typeof THEMES, string> }
+	)
+>;
 
 type ChartContextProps = {
-  config: ChartConfig
-}
+	config: ChartConfig;
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+	const context = React.useContext(ChartContext);
 
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
+	if (!context) {
+		throw new Error("useChart must be used within a <ChartContainer />");
+	}
 
-  return context
+	return context;
 }
 
 function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  initialDimension = INITIAL_DIMENSION,
-  ...props
+	id,
+	className,
+	children,
+	config,
+	initialDimension = INITIAL_DIMENSION,
+	...props
 }: React.ComponentProps<"div"> & {
-  config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
-  initialDimension?: {
-    width: number
-    height: number
-  }
+	config: ChartConfig;
+	children: React.ComponentProps<
+		typeof RechartsPrimitive.ResponsiveContainer
+	>["children"];
+	initialDimension?: {
+		width: number;
+		height: number;
+	};
 }) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+	const uniqueId = React.useId();
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
 
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer
-          initialDimension={initialDimension}
-        >
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
+	return (
+		<ChartContext.Provider value={{ config }}>
+			<div
+				data-slot="chart"
+				data-chart={chartId}
+				className={cn(
+					"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+					className,
+				)}
+				{...props}
+			>
+				<ChartStyle id={chartId} config={config} />
+				<RechartsPrimitive.ResponsiveContainer
+					initialDimension={initialDimension}
+				>
+					{children}
+				</RechartsPrimitive.ResponsiveContainer>
+			</div>
+		</ChartContext.Provider>
+	);
 }
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme ?? config.color
-  )
+	const colorConfig = Object.entries(config).filter(
+		([, config]) => config.theme ?? config.color,
+	);
 
-  if (!colorConfig.length) {
-    return null
-  }
+	if (!colorConfig.length) {
+		return null;
+	}
 
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
+	const css = Object.entries(THEMES)
+		.map(
+			([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
+	.map(([key, itemConfig]) => {
+		const color =
+			itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+			itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	})
+	.join("\n")}
 }
+`,
+		)
+		.join("\n");
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+	return <style>{css}</style>;
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
+	active,
+	payload,
+	className,
+	indicator = "dot",
+	hideLabel = false,
+	hideIndicator = false,
+	label,
+	labelFormatter,
+	labelClassName,
+	formatter,
+	color,
+	nameKey,
+	labelKey,
 }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
-  } & Omit<
-    RechartsPrimitive.DefaultTooltipContentProps<
-      TooltipValueType,
-      TooltipNameType
-    >,
-    "accessibilityLayer"
-  >) {
-  const { config } = useChart()
+	React.ComponentProps<"div"> & {
+		hideLabel?: boolean;
+		hideIndicator?: boolean;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+	} & Omit<
+		RechartsPrimitive.DefaultTooltipContentProps<
+			TooltipValueType,
+			TooltipNameType
+		>,
+		"accessibilityLayer"
+	>) {
+	const { config } = useChart();
 
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null
-    }
+	const tooltipLabel = React.useMemo(() => {
+		if (hideLabel || !payload?.length) {
+			return null;
+		}
 
-    const [item] = payload
-    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
-    const value =
-      !labelKey && typeof label === "string"
-        ? (config[label]?.label ?? label)
-        : itemConfig?.label
+		const [item] = payload;
+		const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value =
+			!labelKey && typeof label === "string"
+				? (config[label]?.label ?? label)
+				: itemConfig?.label;
 
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
-    }
+		if (labelFormatter) {
+			return (
+				<div className={cn("font-medium", labelClassName)}>
+					{labelFormatter(value, payload)}
+				</div>
+			);
+		}
 
-    if (!value) {
-      return null
-    }
+		if (!value) {
+			return null;
+		}
 
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
+		return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey,
+	]);
 
-  if (!active || !payload?.length) {
-    return null
-  }
+	if (!active || !payload?.length) {
+		return null;
+	}
 
-  const nestLabel = payload.length === 1 && indicator !== "dot"
+	const nestLabel = payload.length === 1 && indicator !== "dot";
 
-  return (
-    <div
-      className={cn(
-        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload
-          .filter((item) => item.type !== "none")
-          .map((item, index) => {
-            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color ?? item.payload?.fill ?? item.color
+	return (
+		<div
+			className={cn(
+				"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+				className,
+			)}
+		>
+			{!nestLabel ? tooltipLabel : null}
+			<div className="grid gap-1.5">
+				{payload
+					.filter((item) => item.type !== "none")
+					.map((item, index) => {
+						const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+						const itemKey = `${key}-${String(item.value ?? item.color ?? "")}`;
+						const itemConfig = getPayloadConfigFromPayload(config, item, key);
+						const indicatorColor = color ?? item.payload?.fill ?? item.color;
 
-            return (
-              <div
-                key={index}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label ?? item.name}
-                        </span>
-                      </div>
-                      {item.value != null && (
-                        <span className="font-mono font-medium text-foreground tabular-nums">
-                          {typeof item.value === "number"
-                            ? item.value.toLocaleString()
-                            : String(item.value)}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-      </div>
-    </div>
-  )
+						return (
+							<div
+								key={itemKey}
+								className={cn(
+									"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+									indicator === "dot" && "items-center",
+								)}
+							>
+								{formatter && item?.value !== undefined && item.name ? (
+									formatter(item.value, item.name, item, index, item.payload)
+								) : (
+									<>
+										{itemConfig?.icon ? (
+											<itemConfig.icon />
+										) : (
+											!hideIndicator && (
+												<div
+													className={cn(
+														"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+														{
+															"h-2.5 w-2.5": indicator === "dot",
+															"w-1": indicator === "line",
+															"w-0 border-[1.5px] border-dashed bg-transparent":
+																indicator === "dashed",
+															"my-0.5": nestLabel && indicator === "dashed",
+														},
+													)}
+													style={
+														{
+															"--color-bg": indicatorColor,
+															"--color-border": indicatorColor,
+														} as React.CSSProperties
+													}
+												/>
+											)
+										)}
+										<div
+											className={cn(
+												"flex flex-1 justify-between leading-none",
+												nestLabel ? "items-end" : "items-center",
+											)}
+										>
+											<div className="grid gap-1.5">
+												{nestLabel ? tooltipLabel : null}
+												<span className="text-muted-foreground">
+													{itemConfig?.label ?? item.name}
+												</span>
+											</div>
+											{item.value != null && (
+												<span className="font-mono font-medium text-foreground tabular-nums">
+													{typeof item.value === "number"
+														? item.value.toLocaleString()
+														: String(item.value)}
+												</span>
+											)}
+										</div>
+									</>
+								)}
+							</div>
+						);
+					})}
+			</div>
+		</div>
+	);
 }
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
+	className,
+	hideIcon = false,
+	payload,
+	verticalAlign = "bottom",
+	nameKey,
 }: React.ComponentProps<"div"> & {
-  hideIcon?: boolean
-  nameKey?: string
+	hideIcon?: boolean;
+	nameKey?: string;
 } & RechartsPrimitive.DefaultLegendContentProps) {
-  const { config } = useChart()
+	const { config } = useChart();
 
-  if (!payload?.length) {
-    return null
-  }
+	if (!payload?.length) {
+		return null;
+	}
 
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== "none")
-        .map((item, index) => {
-          const key = `${nameKey ?? item.dataKey ?? "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+	return (
+		<div
+			className={cn(
+				"flex items-center justify-center gap-4",
+				verticalAlign === "top" ? "pb-3" : "pt-3",
+				className,
+			)}
+		>
+			{payload
+				.filter((item) => item.type !== "none")
+				.map((item) => {
+					const key = `${nameKey ?? item.dataKey ?? "value"}`;
+					const itemKey = `${key}-${String(item.value ?? item.color ?? "")}`;
+					const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
-          return (
-            <div
-              key={index}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-    </div>
-  )
+					return (
+						<div
+							key={itemKey}
+							className={cn(
+								"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+							)}
+						>
+							{itemConfig?.icon && !hideIcon ? (
+								<itemConfig.icon />
+							) : (
+								<div
+									className="h-2 w-2 shrink-0 rounded-[2px]"
+									style={{
+										backgroundColor: item.color,
+									}}
+								/>
+							)}
+							{itemConfig?.label}
+						</div>
+					);
+				})}
+		</div>
+	);
 }
 
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
+	config: ChartConfig,
+	payload: unknown,
+	key: string,
 ) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
+	if (typeof payload !== "object" || payload === null) {
+		return undefined;
+	}
 
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
+	const payloadPayload =
+		"payload" in payload &&
+		typeof payload.payload === "object" &&
+		payload.payload !== null
+			? payload.payload
+			: undefined;
 
-  let configLabelKey: string = key
+	let configLabelKey: string = key;
 
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
+	if (
+		key in payload &&
+		typeof payload[key as keyof typeof payload] === "string"
+	) {
+		configLabelKey = payload[key as keyof typeof payload] as string;
+	} else if (
+		payloadPayload &&
+		key in payloadPayload &&
+		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+	) {
+		configLabelKey = payloadPayload[
+			key as keyof typeof payloadPayload
+		] as string;
+	}
 
-  return configLabelKey in config ? config[configLabelKey] : config[key]
+	return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
 export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+	ChartLegend,
+	ChartLegendContent,
+	ChartStyle,
+};
diff --git a/orders-frontend/src/components/ui/checkbox.tsx b/orders-frontend/src/components/ui/checkbox.tsx
index 61fca4a..9954da3 100644
--- a/orders-frontend/src/components/ui/checkbox.tsx
+++ b/orders-frontend/src/components/ui/checkbox.tsx
@@ -1,30 +1,30 @@
-import * as React from "react"
-import { CheckIcon } from "lucide-react"
-import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import { CheckIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Checkbox({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
+	return (
+		<CheckboxPrimitive.Root
+			data-slot="checkbox"
+			className={cn(
+				"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+				className,
+			)}
+			{...props}
+		>
+			<CheckboxPrimitive.Indicator
+				data-slot="checkbox-indicator"
+				className="grid place-content-center text-current transition-none"
+			>
+				<CheckIcon className="size-3.5" />
+			</CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Root>
+	);
 }
 
-export { Checkbox }
+export { Checkbox };
diff --git a/orders-frontend/src/components/ui/collapsible.tsx b/orders-frontend/src/components/ui/collapsible.tsx
index 2f7a4e7..05b494e 100644
--- a/orders-frontend/src/components/ui/collapsible.tsx
+++ b/orders-frontend/src/components/ui/collapsible.tsx
@@ -1,33 +1,33 @@
-"use client"
+"use client";
 
-import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
 
 function Collapsible({
-  ...props
+	...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
 
 function CollapsibleTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
+	return (
+		<CollapsiblePrimitive.CollapsibleTrigger
+			data-slot="collapsible-trigger"
+			{...props}
+		/>
+	);
 }
 
 function CollapsibleContent({
-  ...props
+	...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
+	return (
+		<CollapsiblePrimitive.CollapsibleContent
+			data-slot="collapsible-content"
+			{...props}
+		/>
+	);
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/orders-frontend/src/components/ui/dialog.tsx b/orders-frontend/src/components/ui/dialog.tsx
index 873077b..cc82045 100644
--- a/orders-frontend/src/components/ui/dialog.tsx
+++ b/orders-frontend/src/components/ui/dialog.tsx
@@ -1,158 +1,157 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { XIcon } from "lucide-react"
-import { Dialog as DialogPrimitive } from "radix-ui"
-
-import { cn } from "#/lib/utils.ts"
-import { Button } from "#/components/ui/button.tsx"
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import type * as React from "react";
+import { Button } from "#/components/ui/button.tsx";
+import { cn } from "#/lib/utils.ts";
 
 function Dialog({
-  ...props
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
-  ...props
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
-  ...props
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
+	className,
+	children,
+	showCloseButton = true,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+	showCloseButton?: boolean;
 }) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
+	return (
+		<DialogPortal data-slot="dialog-portal">
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot="dialog-close"
+						className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+					>
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
 }
 
 function DialogFooter({
-  className,
-  showCloseButton = false,
-  children,
-  ...props
+	className,
+	showCloseButton = false,
+	children,
+	...props
 }: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
+	showCloseButton?: boolean;
 }) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close asChild>
-          <Button variant="outline">Close</Button>
-        </DialogPrimitive.Close>
-      )}
-    </div>
-  )
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{showCloseButton && (
+				<DialogPrimitive.Close asChild>
+					<Button variant="outline">Close</Button>
+				</DialogPrimitive.Close>
+			)}
+		</div>
+	);
 }
 
 function DialogTitle({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
 }
 
 function DialogDescription({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};
diff --git a/orders-frontend/src/components/ui/drawer.tsx b/orders-frontend/src/components/ui/drawer.tsx
index 57d4c93..10fd51e 100644
--- a/orders-frontend/src/components/ui/drawer.tsx
+++ b/orders-frontend/src/components/ui/drawer.tsx
@@ -1,133 +1,133 @@
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import type * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Drawer({
-  ...props
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+	return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }
 
 function DrawerTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 
 function DrawerPortal({
-  ...props
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+	return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }
 
 function DrawerClose({
-  ...props
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 
 function DrawerOverlay({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
-  return (
-    <DrawerPrimitive.Overlay
-      data-slot="drawer-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DrawerPrimitive.Overlay
+			data-slot="drawer-overlay"
+			className={cn(
+				"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DrawerContent({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
-  return (
-    <DrawerPortal data-slot="drawer-portal">
-      <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
-          className
-        )}
-        {...props}
-      >
-        <div className="mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPortal>
-  )
+	return (
+		<DrawerPortal data-slot="drawer-portal">
+			<DrawerOverlay />
+			<DrawerPrimitive.Content
+				data-slot="drawer-content"
+				className={cn(
+					"group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
+					"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+					"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+					"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+					"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+					className,
+				)}
+				{...props}
+			>
+				<div className="mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+				{children}
+			</DrawerPrimitive.Content>
+		</DrawerPortal>
+	);
 }
 
 function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-header"
-      className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="drawer-header"
+			className={cn(
+				"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="drawer-footer"
+			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+			{...props}
+		/>
+	);
 }
 
 function DrawerTitle({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
-  return (
-    <DrawerPrimitive.Title
-      data-slot="drawer-title"
-      className={cn("font-semibold text-foreground", className)}
-      {...props}
-    />
-  )
+	return (
+		<DrawerPrimitive.Title
+			data-slot="drawer-title"
+			className={cn("font-semibold text-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
 function DrawerDescription({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
-  return (
-    <DrawerPrimitive.Description
-      data-slot="drawer-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
+	return (
+		<DrawerPrimitive.Description
+			data-slot="drawer-description"
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}
+	Drawer,
+	DrawerPortal,
+	DrawerOverlay,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerContent,
+	DrawerHeader,
+	DrawerFooter,
+	DrawerTitle,
+	DrawerDescription,
+};
diff --git a/orders-frontend/src/components/ui/dropdown-menu.tsx b/orders-frontend/src/components/ui/dropdown-menu.tsx
index e982e4b..de089b8 100644
--- a/orders-frontend/src/components/ui/dropdown-menu.tsx
+++ b/orders-frontend/src/components/ui/dropdown-menu.tsx
@@ -1,255 +1,255 @@
-import * as React from "react"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function DropdownMenu({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	);
 }
 
 function DropdownMenuTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
+	className,
+	sideOffset = 4,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+					className,
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
 }
 
 function DropdownMenuGroup({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	);
 }
 
 function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
+	className,
+	inset,
+	variant = "default",
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+	inset?: boolean;
+	variant?: "default" | "destructive";
 }) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
+	className,
+	children,
+	checked,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	);
 }
 
 function DropdownMenuRadioGroup({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	);
 }
 
 function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
+	className,
+	inset,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+	inset?: boolean;
 }) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuSeparator({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("-mx-1 my-1 h-px bg-border", className)}
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuShortcut({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DropdownMenuSub({
-  ...props
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
+	className,
+	inset,
+	children,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+	inset?: boolean;
 }) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
 }
 
 function DropdownMenuSubContent({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}
+	DropdownMenu,
+	DropdownMenuPortal,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubTrigger,
+	DropdownMenuSubContent,
+};
diff --git a/orders-frontend/src/components/ui/field.tsx b/orders-frontend/src/components/ui/field.tsx
index 3abc306..8efd964 100644
--- a/orders-frontend/src/components/ui/field.tsx
+++ b/orders-frontend/src/components/ui/field.tsx
@@ -1,246 +1,244 @@
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "#/lib/utils.ts"
-import { Label } from "#/components/ui/label.tsx"
-import { Separator } from "#/components/ui/separator.tsx"
+import { cva, type VariantProps } from "class-variance-authority";
+import { useMemo } from "react";
+import { Label } from "#/components/ui/label.tsx";
+import { Separator } from "#/components/ui/separator.tsx";
+import { cn } from "#/lib/utils.ts";
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
-  return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<fieldset
+			data-slot="field-set"
+			className={cn(
+				"flex flex-col gap-6",
+				"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function FieldLegend({
-  className,
-  variant = "legend",
-  ...props
+	className,
+	variant = "legend",
+	...props
 }: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
-  return (
-    <legend
-      data-slot="field-legend"
-      data-variant={variant}
-      className={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<legend
+			data-slot="field-legend"
+			data-variant={variant}
+			className={cn(
+				"mb-3 font-medium",
+				"data-[variant=legend]:text-base",
+				"data-[variant=label]:text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-group"
-      className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="field-group"
+			className={cn(
+				"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 const fieldVariants = cva(
-  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
-  {
-    variants: {
-      orientation: {
-        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
-        horizontal: [
-          "flex-row items-center",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-        responsive: [
-          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  }
-)
+	"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+	{
+		variants: {
+			orientation: {
+				vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+				horizontal: [
+					"flex-row items-center",
+					"[&>[data-slot=field-label]]:flex-auto",
+					"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				],
+				responsive: [
+					"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+					"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+					"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				],
+			},
+		},
+		defaultVariants: {
+			orientation: "vertical",
+		},
+	},
+);
 
 function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="field"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
-      {...props}
-    />
-  )
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentProps<"fieldset"> & VariantProps<typeof fieldVariants>) {
+	return (
+		<fieldset
+			data-slot="field"
+			data-orientation={orientation}
+			className={cn(fieldVariants({ orientation }), className)}
+			{...props}
+		/>
+	);
 }
 
 function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-content"
-      className={cn(
-        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="field-content"
+			className={cn(
+				"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function FieldLabel({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      data-slot="field-label"
-      className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
-        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<Label
+			data-slot="field-label"
+			className={cn(
+				"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+				"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+				"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-label"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="field-label"
+			className={cn(
+				"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="field-description"
-      className={cn(
-        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
-        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
-        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<p
+			data-slot="field-description"
+			className={cn(
+				"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+				"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+				"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function FieldSeparator({
-  children,
-  className,
-  ...props
+	children,
+	className,
+	...props
 }: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
+	children?: React.ReactNode;
 }) {
-  return (
-    <div
-      data-slot="field-separator"
-      data-content={!!children}
-      className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
-      )}
-      {...props}
-    >
-      <Separator className="absolute inset-0 top-1/2" />
-      {children && (
-        <span
-          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
-          data-slot="field-separator-content"
-        >
-          {children}
-        </span>
-      )}
-    </div>
-  )
+	return (
+		<div
+			data-slot="field-separator"
+			data-content={!!children}
+			className={cn(
+				"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+				className,
+			)}
+			{...props}
+		>
+			<Separator className="absolute inset-0 top-1/2" />
+			{children && (
+				<span
+					className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+					data-slot="field-separator-content"
+				>
+					{children}
+				</span>
+			)}
+		</div>
+	);
 }
 
 function FieldError({
-  className,
-  children,
-  errors,
-  ...props
+	className,
+	children,
+	errors,
+	...props
 }: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
+	errors?: Array<{ message?: string } | undefined>;
 }) {
-  const content = useMemo(() => {
-    if (children) {
-      return children
-    }
+	const content = useMemo(() => {
+		if (children) {
+			return children;
+		}
 
-    if (!errors?.length) {
-      return null
-    }
+		if (!errors?.length) {
+			return null;
+		}
 
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
+		const uniqueErrors = [
+			...new Map(errors.map((error) => [error?.message, error])).values(),
+		];
 
-    if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
-    }
+		if (uniqueErrors?.length === 1) {
+			return uniqueErrors[0]?.message;
+		}
 
-    return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {uniqueErrors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
-        )}
-      </ul>
-    )
-  }, [children, errors])
+		return (
+			<ul className="ml-4 flex list-disc flex-col gap-1">
+				{uniqueErrors.map(
+					(error) =>
+						error?.message && <li key={error.message}>{error.message}</li>,
+				)}
+			</ul>
+		);
+	}, [children, errors]);
 
-  if (!content) {
-    return null
-  }
+	if (!content) {
+		return null;
+	}
 
-  return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn("text-sm font-normal text-destructive", className)}
-      {...props}
-    >
-      {content}
-    </div>
-  )
+	return (
+		<div
+			role="alert"
+			data-slot="field-error"
+			className={cn("text-sm font-normal text-destructive", className)}
+			{...props}
+		>
+			{content}
+		</div>
+	);
 }
 
 export {
-  Field,
-  FieldLabel,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldContent,
-  FieldTitle,
-}
+	Field,
+	FieldLabel,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+	FieldContent,
+	FieldTitle,
+};
diff --git a/orders-frontend/src/components/ui/input.tsx b/orders-frontend/src/components/ui/input.tsx
index 5d920b6..2bf18bb 100644
--- a/orders-frontend/src/components/ui/input.tsx
+++ b/orders-frontend/src/components/ui/input.tsx
@@ -1,21 +1,21 @@
-import * as React from "react"
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
-        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+				"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+				"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Input }
+export { Input };
diff --git a/orders-frontend/src/components/ui/label.tsx b/orders-frontend/src/components/ui/label.tsx
index 4af3326..8320cf4 100644
--- a/orders-frontend/src/components/ui/label.tsx
+++ b/orders-frontend/src/components/ui/label.tsx
@@ -1,22 +1,22 @@
-import * as React from "react"
-import { Label as LabelPrimitive } from "radix-ui"
+import { Label as LabelPrimitive } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Label({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Label }
+export { Label };
diff --git a/orders-frontend/src/components/ui/select.tsx b/orders-frontend/src/components/ui/select.tsx
index 3d88fc1..93064bc 100644
--- a/orders-frontend/src/components/ui/select.tsx
+++ b/orders-frontend/src/components/ui/select.tsx
@@ -1,188 +1,188 @@
-import * as React from "react"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-import { Select as SelectPrimitive } from "radix-ui"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Select({
-  ...props
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
 function SelectGroup({
-  ...props
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
 function SelectValue({
-  ...props
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
+	className,
+	size = "default",
+	children,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+	size?: "sm" | "default";
 }) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDownIcon className="size-4 opacity-50" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
 }
 
 function SelectContent({
-  className,
-  children,
-  position = "item-aligned",
-  align = "center",
-  ...props
+	className,
+	children,
+	position = "item-aligned",
+	align = "center",
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				data-slot="select-content"
+				className={cn(
+					"relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+					position === "popper" &&
+						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+					className,
+				)}
+				position={position}
+				align={align}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						"p-1",
+						position === "popper" &&
+							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
 }
 
 function SelectLabel({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  )
+	return (
+		<SelectPrimitive.Label
+			data-slot="select-label"
+			className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
 function SelectItem({
-  className,
-  children,
-  ...props
+	className,
+	children,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span
-        data-slot="select-item-indicator"
-        className="absolute right-2 flex size-3.5 items-center justify-center"
-      >
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className,
+			)}
+			{...props}
+		>
+			<span
+				data-slot="select-item-indicator"
+				className="absolute right-2 flex size-3.5 items-center justify-center"
+			>
+				<SelectPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
 }
 
 function SelectSeparator({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+			{...props}
+		/>
+	);
 }
 
 function SelectScrollUpButton({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
+	return (
+		<SelectPrimitive.ScrollUpButton
+			data-slot="select-scroll-up-button"
+			className={cn(
+				"flex cursor-default items-center justify-center py-1",
+				className,
+			)}
+			{...props}
+		>
+			<ChevronUpIcon className="size-4" />
+		</SelectPrimitive.ScrollUpButton>
+	);
 }
 
 function SelectScrollDownButton({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
+	return (
+		<SelectPrimitive.ScrollDownButton
+			data-slot="select-scroll-down-button"
+			className={cn(
+				"flex cursor-default items-center justify-center py-1",
+				className,
+			)}
+			{...props}
+		>
+			<ChevronDownIcon className="size-4" />
+		</SelectPrimitive.ScrollDownButton>
+	);
 }
 
 export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};
diff --git a/orders-frontend/src/components/ui/separator.tsx b/orders-frontend/src/components/ui/separator.tsx
index 10be96f..ece9bce 100644
--- a/orders-frontend/src/components/ui/separator.tsx
+++ b/orders-frontend/src/components/ui/separator.tsx
@@ -1,28 +1,28 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Separator as SeparatorPrimitive } from "radix-ui"
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
-export { Separator }
+export { Separator };
diff --git a/orders-frontend/src/components/ui/sheet.tsx b/orders-frontend/src/components/ui/sheet.tsx
index f3fcfa2..6152fd4 100644
--- a/orders-frontend/src/components/ui/sheet.tsx
+++ b/orders-frontend/src/components/ui/sheet.tsx
@@ -1,143 +1,143 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { XIcon } from "lucide-react"
-import { Dialog as SheetPrimitive } from "radix-ui"
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
 function SheetClose({
-  ...props
+	...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
 function SheetPortal({
-  ...props
+	...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<SheetPrimitive.Overlay
+			data-slot="sheet-overlay"
+			className={cn(
+				"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SheetContent({
-  className,
-  children,
-  side = "right",
-  showCloseButton = true,
-  ...props
+	className,
+	children,
+	side = "right",
+	showCloseButton = true,
+	...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
-  showCloseButton?: boolean
+	side?: "top" | "right" | "bottom" | "left";
+	showCloseButton?: boolean;
 }) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
-          side === "right" &&
-            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-          side === "left" &&
-            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-          side === "top" &&
-            "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          side === "bottom" &&
-            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
-          </SheetPrimitive.Close>
-        )}
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Content
+				data-slot="sheet-content"
+				className={cn(
+					"fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+					side === "right" &&
+						"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+					side === "left" &&
+						"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+					side === "top" &&
+						"inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+					side === "bottom" &&
+						"inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+						<XIcon className="size-4" />
+						<span className="sr-only">Close</span>
+					</SheetPrimitive.Close>
+				)}
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	);
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sheet-header"
+			className={cn("flex flex-col gap-1.5 p-4", className)}
+			{...props}
+		/>
+	);
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sheet-footer"
+			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+			{...props}
+		/>
+	);
 }
 
 function SheetTitle({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn("font-semibold text-foreground", className)}
-      {...props}
-    />
-  )
+	return (
+		<SheetPrimitive.Title
+			data-slot="sheet-title"
+			className={cn("font-semibold text-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
 function SheetDescription({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
+	return (
+		<SheetPrimitive.Description
+			data-slot="sheet-description"
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Sheet,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
+	Sheet,
+	SheetTrigger,
+	SheetClose,
+	SheetContent,
+	SheetHeader,
+	SheetFooter,
+	SheetTitle,
+	SheetDescription,
+};
diff --git a/orders-frontend/src/components/ui/sidebar.tsx b/orders-frontend/src/components/ui/sidebar.tsx
index ce1d5e7..58300f6 100644
--- a/orders-frontend/src/components/ui/sidebar.tsx
+++ b/orders-frontend/src/components/ui/sidebar.tsx
@@ -1,724 +1,748 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
-import { Slot } from "radix-ui"
-
-import { useIsMobile } from "#/hooks/use-mobile.ts"
-import { cn } from "#/lib/utils.ts"
-import { Button } from "#/components/ui/button.tsx"
-import { Input } from "#/components/ui/input.tsx"
-import { Separator } from "#/components/ui/separator.tsx"
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+import { Slot } from "radix-ui";
+import * as React from "react";
+import { Button } from "#/components/ui/button.tsx";
+import { Input } from "#/components/ui/input.tsx";
+import { Separator } from "#/components/ui/separator.tsx";
 import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "#/components/ui/sheet.tsx"
-import { Skeleton } from "#/components/ui/skeleton.tsx"
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+} from "#/components/ui/sheet.tsx";
+import { Skeleton } from "#/components/ui/skeleton.tsx";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "#/components/ui/tooltip.tsx"
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "#/components/ui/tooltip.tsx";
+import { useIsMobile } from "#/hooks/use-mobile.ts";
+import { cn } from "#/lib/utils.ts";
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
 
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
 
 function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
-  }
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
 
-  return context
+	return context;
 }
 
 function SidebarProvider({
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
+	defaultOpen = true,
+	open: openProp,
+	onOpenChange: setOpenProp,
+	className,
+	style,
+	children,
+	...props
 }: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
 }) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React.useState(false);
 
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value
-      if (setOpenProp) {
-        setOpenProp(openState)
-      } else {
-        _setOpen(openState)
-      }
+	// This is the internal state of the sidebar.
+	// We use openProp and setOpenProp for control from outside the component.
+	const [_open, _setOpen] = React.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const persistSidebarState = React.useCallback((openState: boolean) => {
+		const cookieStore =
+			"cookieStore" in window
+				? (
+						window as Window & {
+							cookieStore?: {
+								set(options: {
+									name: string;
+									value: string;
+									path: string;
+									expires: number;
+								}): Promise<void>;
+							};
+						}
+					).cookieStore
+				: undefined;
 
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-    },
-    [setOpenProp, open]
-  )
+		if (cookieStore) {
+			void cookieStore.set({
+				name: SIDEBAR_COOKIE_NAME,
+				value: String(openState),
+				path: "/",
+				expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,
+			});
+		}
+	}, []);
+	const setOpen = React.useCallback(
+		(value: boolean | ((value: boolean) => boolean)) => {
+			const openState = typeof value === "function" ? value(open) : value;
+			if (setOpenProp) {
+				setOpenProp(openState);
+			} else {
+				_setOpen(openState);
+			}
 
-  // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
+			persistSidebarState(openState);
+		},
+		[setOpenProp, open, persistSidebarState],
+	);
 
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault()
-        toggleSidebar()
-      }
-    }
+	// Helper to toggle the sidebar.
+	const toggleSidebar = React.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [isMobile, setOpen]);
 
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [toggleSidebar])
+	// Adds a keyboard shortcut to toggle the sidebar.
+	React.useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (
+				event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+				(event.metaKey || event.ctrlKey)
+			) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
 
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed"
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
 
-  const contextValue = React.useMemo<SidebarContextProps>(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	// This makes it easier to style the sidebar with Tailwind classes.
+	const state = open ? "expanded" : "collapsed";
 
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-slot="sidebar-wrapper"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn(
-            "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  )
+	const contextValue = React.useMemo<SidebarContextProps>(
+		() => ({
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar,
+		}),
+		[state, open, setOpen, isMobile, openMobile, toggleSidebar],
+	);
+
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			<TooltipProvider delayDuration={0}>
+				<div
+					data-slot="sidebar-wrapper"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH,
+							"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+							...style,
+						} as React.CSSProperties
+					}
+					className={cn(
+						"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+						className,
+					)}
+					{...props}
+				>
+					{children}
+				</div>
+			</TooltipProvider>
+		</SidebarContext.Provider>
+	);
 }
 
 function Sidebar({
-  side = "left",
-  variant = "sidebar",
-  collapsible = "offcanvas",
-  className,
-  children,
-  ...props
+	side = "left",
+	variant = "sidebar",
+	collapsible = "offcanvas",
+	className,
+	children,
+	...props
 }: React.ComponentProps<"div"> & {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
+	side?: "left" | "right";
+	variant?: "sidebar" | "floating" | "inset";
+	collapsible?: "offcanvas" | "icon" | "none";
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
-  if (collapsible === "none") {
-    return (
-      <div
-        data-slot="sidebar"
-        className={cn(
-          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
+	if (collapsible === "none") {
+		return (
+			<div
+				data-slot="sidebar"
+				className={cn(
+					"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	}
 
-  if (isMobile) {
-    return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
-          data-sidebar="sidebar"
-          data-slot="sidebar"
-          data-mobile="true"
-          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}
-        >
-          <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-          </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
-    )
-  }
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-slot="sidebar"
+					data-mobile="true"
+					className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as React.CSSProperties
+					}
+					side={side}
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
 
-  return (
-    <div
-      className="group peer hidden text-sidebar-foreground md:block"
-      data-state={state}
-      data-collapsible={state === "collapsed" ? collapsible : ""}
-      data-variant={variant}
-      data-side={side}
-      data-slot="sidebar"
-    >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot="sidebar-gap"
-        className={cn(
-          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-          "group-data-[collapsible=offcanvas]:w-0",
-          "group-data-[side=right]:rotate-180",
-          variant === "floating" || variant === "inset"
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-        )}
-      />
-      <div
-        data-slot="sidebar-container"
-        className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
-          variant === "floating" || variant === "inset"
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className
-        )}
-        {...props}
-      >
-        <div
-          data-sidebar="sidebar"
-          data-slot="sidebar-inner"
-          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  )
+	return (
+		<div
+			className="group peer hidden text-sidebar-foreground md:block"
+			data-state={state}
+			data-collapsible={state === "collapsed" ? collapsible : ""}
+			data-variant={variant}
+			data-side={side}
+			data-slot="sidebar"
+		>
+			{/* This is what handles the sidebar gap on desktop */}
+			<div
+				data-slot="sidebar-gap"
+				className={cn(
+					"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+					"group-data-[collapsible=offcanvas]:w-0",
+					"group-data-[side=right]:rotate-180",
+					variant === "floating" || variant === "inset"
+						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+				)}
+			/>
+			<div
+				data-slot="sidebar-container"
+				className={cn(
+					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+					side === "left"
+						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					// Adjust the padding for floating and inset variants.
+					variant === "floating" || variant === "inset"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					className,
+				)}
+				{...props}
+			>
+				<div
+					data-sidebar="sidebar"
+					data-slot="sidebar-inner"
+					className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+				>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
 }
 
 function SidebarTrigger({
-  className,
-  onClick,
-  ...props
+	className,
+	onClick,
+	...props
 }: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
+	const { toggleSidebar } = useSidebar();
 
-  return (
-    <Button
-      data-sidebar="trigger"
-      data-slot="sidebar-trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("size-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeftIcon />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
+	return (
+		<Button
+			data-sidebar="trigger"
+			data-slot="sidebar-trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("size-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<PanelLeftIcon />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
 }
 
 function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar()
+	const { toggleSidebar } = useSidebar();
 
-  return (
-    <button
-      data-sidebar="rail"
-      data-slot="sidebar-rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<button
+			data-sidebar="rail"
+			data-slot="sidebar-rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleSidebar}
+			title="Toggle Sidebar"
+			className={cn(
+				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
+				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
-  return (
-    <main
-      data-slot="sidebar-inset"
-      className={cn(
-        "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<main
+			data-slot="sidebar-inset"
+			className={cn(
+				"relative flex w-full flex-1 flex-col bg-background",
+				"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarInput({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof Input>) {
-  return (
-    <Input
-      data-slot="sidebar-input"
-      data-sidebar="input"
-      className={cn("h-8 w-full bg-background shadow-none", className)}
-      {...props}
-    />
-  )
+	return (
+		<Input
+			data-slot="sidebar-input"
+			data-sidebar="input"
+			className={cn("h-8 w-full bg-background shadow-none", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-header"
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sidebar-header"
+			data-sidebar="header"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-footer"
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sidebar-footer"
+			data-sidebar="footer"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarSeparator({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="sidebar-separator"
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  )
+	return (
+		<Separator
+			data-slot="sidebar-separator"
+			data-sidebar="separator"
+			className={cn("mx-2 w-auto bg-sidebar-border", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-content"
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sidebar-content"
+			data-sidebar="content"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group"
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sidebar-group"
+			data-sidebar="group"
+			className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
+	className,
+	asChild = false,
+	...props
 }: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "div"
+	const Comp = asChild ? Slot.Root : "div";
 
-  return (
-    <Comp
-      data-slot="sidebar-group-label"
-      data-sidebar="group-label"
-      className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="sidebar-group-label"
+			data-sidebar="group-label"
+			className={cn(
+				"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarGroupAction({
-  className,
-  asChild = false,
-  ...props
+	className,
+	asChild = false,
+	...props
 }: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "button"
+	const Comp = asChild ? Slot.Root : "button";
 
-  return (
-    <Comp
-      data-slot="sidebar-group-action"
-      data-sidebar="group-action"
-      className={cn(
-        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="sidebar-group-action"
+			data-sidebar="group-action"
+			className={cn(
+				"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarGroupContent({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group-content"
-      data-sidebar="group-content"
-      className={cn("w-full text-sm", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sidebar-group-content"
+			data-sidebar="group-content"
+			className={cn("w-full text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu"
-      data-sidebar="menu"
-      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-      {...props}
-    />
-  )
+	return (
+		<ul
+			data-slot="sidebar-menu"
+			data-sidebar="menu"
+			className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-item"
-      data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
-      {...props}
-    />
-  )
+	return (
+		<li
+			data-slot="sidebar-menu-item"
+			data-sidebar="menu-item"
+			className={cn("group/menu-item relative", className)}
+			{...props}
+		/>
+	);
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
 
 function SidebarMenuButton({
-  asChild = false,
-  isActive = false,
-  variant = "default",
-  size = "default",
-  tooltip,
-  className,
-  ...props
+	asChild = false,
+	isActive = false,
+	variant = "default",
+	size = "default",
+	tooltip,
+	className,
+	...props
 }: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+	asChild?: boolean;
+	isActive?: boolean;
+	tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot.Root : "button"
-  const { isMobile, state } = useSidebar()
+	const Comp = asChild ? Slot.Root : "button";
+	const { isMobile, state } = useSidebar();
 
-  const button = (
-    <Comp
-      data-slot="sidebar-menu-button"
-      data-sidebar="menu-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  )
+	const button = (
+		<Comp
+			data-slot="sidebar-menu-button"
+			data-sidebar="menu-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+			{...props}
+		/>
+	);
 
-  if (!tooltip) {
-    return button
-  }
+	if (!tooltip) {
+		return button;
+	}
 
-  if (typeof tooltip === "string") {
-    tooltip = {
-      children: tooltip,
-    }
-  }
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip,
+		};
+	}
 
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side="right"
-        align="center"
-        hidden={state !== "collapsed" || isMobile}
-        {...tooltip}
-      />
-    </Tooltip>
-  )
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent
+				side="right"
+				align="center"
+				hidden={state !== "collapsed" || isMobile}
+				{...tooltip}
+			/>
+		</Tooltip>
+	);
 }
 
 function SidebarMenuAction({
-  className,
-  asChild = false,
-  showOnHover = false,
-  ...props
+	className,
+	asChild = false,
+	showOnHover = false,
+	...props
 }: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  showOnHover?: boolean
+	asChild?: boolean;
+	showOnHover?: boolean;
 }) {
-  const Comp = asChild ? Slot.Root : "button"
+	const Comp = asChild ? Slot.Root : "button";
 
-  return (
-    <Comp
-      data-slot="sidebar-menu-action"
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="sidebar-menu-action"
+			data-sidebar="menu-action"
+			className={cn(
+				"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover &&
+					"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarMenuBadge({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-menu-badge"
-      data-sidebar="menu-badge"
-      className={cn(
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="sidebar-menu-badge"
+			data-sidebar="menu-badge"
+			className={cn(
+				"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none",
+				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarMenuSkeleton({
-  className,
-  showIcon = false,
-  ...props
+	className,
+	showIcon = false,
+	...props
 }: React.ComponentProps<"div"> & {
-  showIcon?: boolean
+	showIcon?: boolean;
 }) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+	// Random width between 50 to 90%.
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
 
-  return (
-    <div
-      data-slot="sidebar-menu-skeleton"
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  )
+	return (
+		<div
+			data-slot="sidebar-menu-skeleton"
+			data-sidebar="menu-skeleton"
+			className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+			{...props}
+		>
+			{showIcon && (
+				<Skeleton
+					className="size-4 rounded-md"
+					data-sidebar="menu-skeleton-icon"
+				/>
+			)}
+			<Skeleton
+				className="h-4 max-w-(--skeleton-width) flex-1"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width,
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
 }
 
 function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu-sub"
-      data-sidebar="menu-sub"
-      className={cn(
-        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<ul
+			data-slot="sidebar-menu-sub"
+			data-sidebar="menu-sub"
+			className={cn(
+				"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarMenuSubItem({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-sub-item"
-      data-sidebar="menu-sub-item"
-      className={cn("group/menu-sub-item relative", className)}
-      {...props}
-    />
-  )
+	return (
+		<li
+			data-slot="sidebar-menu-sub-item"
+			data-sidebar="menu-sub-item"
+			className={cn("group/menu-sub-item relative", className)}
+			{...props}
+		/>
+	);
 }
 
 function SidebarMenuSubButton({
-  asChild = false,
-  size = "md",
-  isActive = false,
-  className,
-  ...props
+	asChild = false,
+	size = "md",
+	isActive = false,
+	className,
+	...props
 }: React.ComponentProps<"a"> & {
-  asChild?: boolean
-  size?: "sm" | "md"
-  isActive?: boolean
+	asChild?: boolean;
+	size?: "sm" | "md";
+	isActive?: boolean;
 }) {
-  const Comp = asChild ? Slot.Root : "a"
+	const Comp = asChild ? Slot.Root : "a";
 
-  return (
-    <Comp
-      data-slot="sidebar-menu-sub-button"
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="sidebar-menu-sub-button"
+			data-sidebar="menu-sub-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(
+				"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				size === "sm" && "text-xs",
+				size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+};
diff --git a/orders-frontend/src/components/ui/skeleton.tsx b/orders-frontend/src/components/ui/skeleton.tsx
index b83c2dc..0392d94 100644
--- a/orders-frontend/src/components/ui/skeleton.tsx
+++ b/orders-frontend/src/components/ui/skeleton.tsx
@@ -1,13 +1,13 @@
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-accent", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="skeleton"
+			className={cn("animate-pulse rounded-md bg-accent", className)}
+			{...props}
+		/>
+	);
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/orders-frontend/src/components/ui/sonner.tsx b/orders-frontend/src/components/ui/sonner.tsx
index 9f46e06..8a62059 100644
--- a/orders-frontend/src/components/ui/sonner.tsx
+++ b/orders-frontend/src/components/ui/sonner.tsx
@@ -1,38 +1,38 @@
 import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react"
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
+	CircleCheckIcon,
+	InfoIcon,
+	Loader2Icon,
+	OctagonXIcon,
+	TriangleAlertIcon,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+	const { theme = "system" } = useTheme();
 
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  )
-}
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			icons={{
+				success: <CircleCheckIcon className="size-4" />,
+				info: <InfoIcon className="size-4" />,
+				warning: <TriangleAlertIcon className="size-4" />,
+				error: <OctagonXIcon className="size-4" />,
+				loading: <Loader2Icon className="size-4 animate-spin" />,
+			}}
+			style={
+				{
+					"--normal-bg": "var(--popover)",
+					"--normal-text": "var(--popover-foreground)",
+					"--normal-border": "var(--border)",
+					"--border-radius": "var(--radius)",
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	);
+};
 
-export { Toaster }
+export { Toaster };
diff --git a/orders-frontend/src/components/ui/status-badge.tsx b/orders-frontend/src/components/ui/status-badge.tsx
index 66de72c..f24525b 100644
--- a/orders-frontend/src/components/ui/status-badge.tsx
+++ b/orders-frontend/src/components/ui/status-badge.tsx
@@ -1,46 +1,49 @@
-import {Badge} from "#/components/ui/badge";
-import {cn} from "#/lib/utils";
+import { Badge } from "#/components/ui/badge";
+import { cn } from "#/lib/utils";
 
 type StatusBadgeProps = {
-    status: string;
-    label?: string;
+	status: string;
+	label?: string;
 };
 
-export function StatusBadge({status, label = status}: StatusBadgeProps) {
-    return (
-        <Badge variant="outline" className={cn("border font-semibold", statusColorClass(status))}>
-            {label}
-        </Badge>
-    );
+export function StatusBadge({ status, label = status }: StatusBadgeProps) {
+	return (
+		<Badge
+			variant="outline"
+			className={cn("border font-semibold", statusColorClass(status))}
+		>
+			{label}
+		</Badge>
+	);
 }
 
 export function statusColorClass(status: string) {
-    switch (status) {
-        case "ACTIVE":
-        case "ENABLED":
-        case "IN_STOCK":
-        case "DELIVERED":
-        case "COMPLETED":
-            return "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/60 dark:bg-emerald-950/50 dark:text-emerald-300";
-        case "PENDING":
-        case "REQUESTED":
-        case "LOW_STOCK":
-            return "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/50 dark:text-amber-300";
-        case "SHIPPED":
-        case "ACCEPTED":
-            return "border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900/60 dark:bg-sky-950/50 dark:text-sky-300";
-        case "ADMIN":
-            return "border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-900/60 dark:bg-violet-950/50 dark:text-violet-300";
-        case "CUSTOMER":
-            return "border-cyan-200 bg-cyan-50 text-cyan-700 dark:border-cyan-900/60 dark:bg-cyan-950/50 dark:text-cyan-300";
-        case "DRIVER":
-            return "border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-900/60 dark:bg-indigo-950/50 dark:text-indigo-300";
-        case "CANCELLED":
-        case "INACTIVE":
-        case "DISABLED":
-        case "OUT_OF_STOCK":
-            return "border-red-200 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/50 dark:text-red-300";
-        default:
-            return "border-border bg-muted text-muted-foreground";
-    }
+	switch (status) {
+		case "ACTIVE":
+		case "ENABLED":
+		case "IN_STOCK":
+		case "DELIVERED":
+		case "COMPLETED":
+			return "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/60 dark:bg-emerald-950/50 dark:text-emerald-300";
+		case "PENDING":
+		case "REQUESTED":
+		case "LOW_STOCK":
+			return "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/50 dark:text-amber-300";
+		case "SHIPPED":
+		case "ACCEPTED":
+			return "border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900/60 dark:bg-sky-950/50 dark:text-sky-300";
+		case "ADMIN":
+			return "border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-900/60 dark:bg-violet-950/50 dark:text-violet-300";
+		case "CUSTOMER":
+			return "border-cyan-200 bg-cyan-50 text-cyan-700 dark:border-cyan-900/60 dark:bg-cyan-950/50 dark:text-cyan-300";
+		case "DRIVER":
+			return "border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-900/60 dark:bg-indigo-950/50 dark:text-indigo-300";
+		case "CANCELLED":
+		case "INACTIVE":
+		case "DISABLED":
+		case "OUT_OF_STOCK":
+			return "border-red-200 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/50 dark:text-red-300";
+		default:
+			return "border-border bg-muted text-muted-foreground";
+	}
 }
diff --git a/orders-frontend/src/components/ui/table.tsx b/orders-frontend/src/components/ui/table.tsx
index 3a3a253..7a8dfbe 100644
--- a/orders-frontend/src/components/ui/table.tsx
+++ b/orders-frontend/src/components/ui/table.tsx
@@ -1,114 +1,114 @@
-import * as React from "react"
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
+	return (
+		<div
+			data-slot="table-container"
+			className="relative w-full overflow-x-auto"
+		>
+			<table
+				data-slot="table"
+				className={cn("w-full caption-bottom text-sm", className)}
+				{...props}
+			/>
+		</div>
+	);
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
+	return (
+		<thead
+			data-slot="table-header"
+			className={cn("[&_tr]:border-b", className)}
+			{...props}
+		/>
+	);
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
+	return (
+		<tbody
+			data-slot="table-body"
+			className={cn("[&_tr:last-child]:border-0", className)}
+			{...props}
+		/>
+	);
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn(
+				"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn(
+				"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function TableCaption({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("mt-4 text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
+	return (
+		<caption
+			data-slot="table-caption"
+			className={cn("mt-4 text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableHead,
+	TableRow,
+	TableCell,
+	TableCaption,
+};
diff --git a/orders-frontend/src/components/ui/tabs.tsx b/orders-frontend/src/components/ui/tabs.tsx
index 14f5d3e..3d3c174 100644
--- a/orders-frontend/src/components/ui/tabs.tsx
+++ b/orders-frontend/src/components/ui/tabs.tsx
@@ -1,91 +1,91 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Tabs as TabsPrimitive } from "radix-ui"
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
+	className,
+	orientation = "horizontal",
+	...props
 }: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      data-orientation={orientation}
-      orientation={orientation}
-      className={cn(
-        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			data-orientation={orientation}
+			orientation={orientation}
+			className={cn(
+				"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+	"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+	{
+		variants: {
+			variant: {
+				default: "bg-muted",
+				line: "gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
 
 function TabsList({
-  className,
-  variant = "default",
-  ...props
+	className,
+	variant = "default",
+	...props
 }: React.ComponentProps<typeof TabsPrimitive.List> &
-  VariantProps<typeof tabsListVariants>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
-      {...props}
-    />
-  )
+	VariantProps<typeof tabsListVariants>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
+			{...props}
+		/>
+	);
 }
 
 function TabsTrigger({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<TabsPrimitive.Trigger
+			data-slot="tabs-trigger"
+			className={cn(
+				"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+				"data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+				"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function TabsContent({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
-      {...props}
-    />
-  )
+	return (
+		<TabsPrimitive.Content
+			data-slot="tabs-content"
+			className={cn("flex-1 outline-none", className)}
+			{...props}
+		/>
+	);
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
diff --git a/orders-frontend/src/components/ui/toggle-group.tsx b/orders-frontend/src/components/ui/toggle-group.tsx
index 4dadb11..7cb749d 100644
--- a/orders-frontend/src/components/ui/toggle-group.tsx
+++ b/orders-frontend/src/components/ui/toggle-group.tsx
@@ -1,83 +1,82 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { type VariantProps } from "class-variance-authority"
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
-
-import { cn } from "#/lib/utils.ts"
-import { toggleVariants } from "#/components/ui/toggle.tsx"
+import type { VariantProps } from "class-variance-authority";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import * as React from "react";
+import { toggleVariants } from "#/components/ui/toggle.tsx";
+import { cn } from "#/lib/utils.ts";
 
 const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }
+	VariantProps<typeof toggleVariants> & {
+		spacing?: number;
+	}
 >({
-  size: "default",
-  variant: "default",
-  spacing: 0,
-})
+	size: "default",
+	variant: "default",
+	spacing: 0,
+});
 
 function ToggleGroup({
-  className,
-  variant,
-  size,
-  spacing = 0,
-  children,
-  ...props
+	className,
+	variant,
+	size,
+	spacing = 0,
+	children,
+	...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-  }) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
-      style={{ "--gap": spacing } as React.CSSProperties}
-      className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
-        className
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  )
+	VariantProps<typeof toggleVariants> & {
+		spacing?: number;
+	}) {
+	return (
+		<ToggleGroupPrimitive.Root
+			data-slot="toggle-group"
+			data-variant={variant}
+			data-size={size}
+			data-spacing={spacing}
+			style={{ "--gap": spacing } as React.CSSProperties}
+			className={cn(
+				"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+				className,
+			)}
+			{...props}
+		>
+			<ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+				{children}
+			</ToggleGroupContext.Provider>
+		</ToggleGroupPrimitive.Root>
+	);
 }
 
 function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
+	className,
+	children,
+	variant,
+	size,
+	...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
+	VariantProps<typeof toggleVariants>) {
+	const context = React.useContext(ToggleGroupContext);
 
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      data-spacing={context.spacing}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
-        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
+	return (
+		<ToggleGroupPrimitive.Item
+			data-slot="toggle-group-item"
+			data-variant={context.variant || variant}
+			data-size={context.size || size}
+			data-spacing={context.spacing}
+			className={cn(
+				toggleVariants({
+					variant: context.variant || variant,
+					size: context.size || size,
+				}),
+				"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+				"data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ToggleGroupPrimitive.Item>
+	);
 }
 
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };
diff --git a/orders-frontend/src/components/ui/toggle.tsx b/orders-frontend/src/components/ui/toggle.tsx
index 084d9c3..479abe0 100644
--- a/orders-frontend/src/components/ui/toggle.tsx
+++ b/orders-frontend/src/components/ui/toggle.tsx
@@ -1,47 +1,47 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Toggle as TogglePrimitive } from "radix-ui"
+import { cva, type VariantProps } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-9 min-w-9 px-2",
-        sm: "h-8 min-w-8 px-1.5",
-        lg: "h-10 min-w-10 px-2.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				default: "h-9 min-w-9 px-2",
+				sm: "h-8 min-w-8 px-1.5",
+				lg: "h-10 min-w-10 px-2.5",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
 
 function Toggle({
-  className,
-  variant,
-  size,
-  ...props
+	className,
+	variant,
+	size,
+	...props
 }: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
+	VariantProps<typeof toggleVariants>) {
+	return (
+		<TogglePrimitive.Root
+			data-slot="toggle"
+			className={cn(toggleVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
 }
 
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };
diff --git a/orders-frontend/src/components/ui/tooltip.tsx b/orders-frontend/src/components/ui/tooltip.tsx
index eb40ff3..4bdb512 100644
--- a/orders-frontend/src/components/ui/tooltip.tsx
+++ b/orders-frontend/src/components/ui/tooltip.tsx
@@ -1,55 +1,55 @@
-import * as React from "react"
-import { Tooltip as TooltipPrimitive } from "radix-ui"
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type * as React from "react";
 
-import { cn } from "#/lib/utils.ts"
+import { cn } from "#/lib/utils.ts";
 
 function TooltipProvider({
-  delayDuration = 0,
-  ...props
+	delayDuration = 0,
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	);
 }
 
 function Tooltip({
-  ...props
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
 }
 
 function TooltipTrigger({
-  ...props
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
+	className,
+	sideOffset = 0,
+	children,
+	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/orders-frontend/src/hooks/formatCurrency.ts b/orders-frontend/src/hooks/formatCurrency.ts
index 98065a4..76e2643 100644
--- a/orders-frontend/src/hooks/formatCurrency.ts
+++ b/orders-frontend/src/hooks/formatCurrency.ts
@@ -1,7 +1,7 @@
 export function formatCurrency(amount: number, currency = "KES") {
-    return new Intl.NumberFormat("en-KE", {
-        style: "currency",
-        currency,
-        maximumFractionDigits: 2,
-    }).format(amount);
-}
\ No newline at end of file
+	return new Intl.NumberFormat("en-KE", {
+		style: "currency",
+		currency,
+		maximumFractionDigits: 2,
+	}).format(amount);
+}
diff --git a/orders-frontend/src/hooks/formatDate.ts b/orders-frontend/src/hooks/formatDate.ts
index 531f112..a5e401e 100644
--- a/orders-frontend/src/hooks/formatDate.ts
+++ b/orders-frontend/src/hooks/formatDate.ts
@@ -1,10 +1,10 @@
 export function formatDate(value: string | null | undefined) {
-    if (!value) {
-        return "—";
-    }
+	if (!value) {
+		return "—";
+	}
 
-    return new Intl.DateTimeFormat("en-KE", {
-        dateStyle: "medium",
-        timeStyle: "short",
-    }).format(new Date(value));
-}
\ No newline at end of file
+	return new Intl.DateTimeFormat("en-KE", {
+		dateStyle: "medium",
+		timeStyle: "short",
+	}).format(new Date(value));
+}
diff --git a/orders-frontend/src/hooks/use-mobile.ts b/orders-frontend/src/hooks/use-mobile.ts
index 2b0fe1d..0a89231 100644
--- a/orders-frontend/src/hooks/use-mobile.ts
+++ b/orders-frontend/src/hooks/use-mobile.ts
@@ -1,19 +1,21 @@
-import * as React from "react"
+import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+		undefined,
+	);
 
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
 
-  return !!isMobile
+	return !!isMobile;
 }
diff --git a/orders-frontend/src/hooks/useAuth.tsx b/orders-frontend/src/hooks/useAuth.tsx
index 8c7e4d8..ce53f4c 100644
--- a/orders-frontend/src/hooks/useAuth.tsx
+++ b/orders-frontend/src/hooks/useAuth.tsx
@@ -1,111 +1,111 @@
-import {login, logout, register} from "#/api/auth";
-import type {AuthUser, LoginRequest, RegisterRequest} from "#/types/auth";
-import {useMutation, useQueryClient} from "@tanstack/react-query";
-import {createContext, useContext, useState} from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createContext, useContext, useState } from "react";
+import { login, logout, register } from "#/api/auth";
+import type { AuthUser, LoginRequest, RegisterRequest } from "#/types/auth";
 
 type AuthContextValue = {
-    user: AuthUser | null;
-    isLoading: boolean;
-    login: (request: LoginRequest) => Promise<AuthUser>;
-    register: (request: RegisterRequest) => Promise<AuthUser>;
-    logout: () => Promise<void>;
+	user: AuthUser | null;
+	isLoading: boolean;
+	login: (request: LoginRequest) => Promise<AuthUser>;
+	register: (request: RegisterRequest) => Promise<AuthUser>;
+	logout: () => Promise<void>;
 };
 
 const AuthContext = createContext<AuthContextValue | null>(null);
 const storedUserKey = "cymelle.auth.user";
 
 export const authQueryKeys = {
-    me: ["auth", "me"] as const,
+	me: ["auth", "me"] as const,
 };
 
-export function AuthProvider({children}: {children: React.ReactNode}) {
-    const queryClient = useQueryClient();
-    const [user, setUser] = useState<AuthUser | null>(() => readStoredUser());
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+	const queryClient = useQueryClient();
+	const [user, setUser] = useState<AuthUser | null>(() => readStoredUser());
 
-    const loginMutation = useMutation({
-        mutationFn: login,
-        onSuccess: (user) => {
-            queryClient.clear();
-            persistUser(user);
-            setUser(user);
-            queryClient.setQueryData(authQueryKeys.me, user);
-        },
-    });
+	const loginMutation = useMutation({
+		mutationFn: login,
+		onSuccess: (user) => {
+			queryClient.clear();
+			persistUser(user);
+			setUser(user);
+			queryClient.setQueryData(authQueryKeys.me, user);
+		},
+	});
 
-    const registerMutation = useMutation({
-        mutationFn: register,
-        onSuccess: (user) => {
-            queryClient.clear();
-            persistUser(user);
-            setUser(user);
-            queryClient.setQueryData(authQueryKeys.me, user);
-        },
-    });
+	const registerMutation = useMutation({
+		mutationFn: register,
+		onSuccess: (user) => {
+			queryClient.clear();
+			persistUser(user);
+			setUser(user);
+			queryClient.setQueryData(authQueryKeys.me, user);
+		},
+	});
 
-    const logoutMutation = useMutation({
-        mutationFn: logout,
-        onSettled: () => {
-            persistUser(null);
-            setUser(null);
-            queryClient.clear();
-        },
-    });
+	const logoutMutation = useMutation({
+		mutationFn: logout,
+		onSettled: () => {
+			persistUser(null);
+			setUser(null);
+			queryClient.clear();
+		},
+	});
 
-    async function logoutUser() {
-        persistUser(null);
-        setUser(null);
-        queryClient.clear();
-        await logoutMutation.mutateAsync().catch(() => undefined);
-    }
+	async function logoutUser() {
+		persistUser(null);
+		setUser(null);
+		queryClient.clear();
+		await logoutMutation.mutateAsync().catch(() => undefined);
+	}
 
-    const value: AuthContextValue = {
-        user,
-        isLoading: false,
-        login: loginMutation.mutateAsync,
-        register: registerMutation.mutateAsync,
-        logout: logoutUser,
-    };
+	const value: AuthContextValue = {
+		user,
+		isLoading: false,
+		login: loginMutation.mutateAsync,
+		register: registerMutation.mutateAsync,
+		logout: logoutUser,
+	};
 
-    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+	return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
 
 export function useAuth() {
-    const context = useContext(AuthContext);
+	const context = useContext(AuthContext);
 
-    if (!context) {
-        throw new Error("useAuth must be used within AuthProvider");
-    }
+	if (!context) {
+		throw new Error("useAuth must be used within AuthProvider");
+	}
 
-    return context;
+	return context;
 }
 
 function readStoredUser() {
-    if (typeof window === "undefined") {
-        return null;
-    }
+	if (typeof window === "undefined") {
+		return null;
+	}
 
-    const raw = window.localStorage.getItem(storedUserKey);
-    if (!raw) {
-        return null;
-    }
+	const raw = window.localStorage.getItem(storedUserKey);
+	if (!raw) {
+		return null;
+	}
 
-    try {
-        return JSON.parse(raw) as AuthUser;
-    } catch {
-        window.localStorage.removeItem(storedUserKey);
-        return null;
-    }
+	try {
+		return JSON.parse(raw) as AuthUser;
+	} catch {
+		window.localStorage.removeItem(storedUserKey);
+		return null;
+	}
 }
 
 function persistUser(user: AuthUser | null) {
-    if (typeof window === "undefined") {
-        return;
-    }
+	if (typeof window === "undefined") {
+		return;
+	}
 
-    if (!user) {
-        window.localStorage.removeItem(storedUserKey);
-        return;
-    }
+	if (!user) {
+		window.localStorage.removeItem(storedUserKey);
+		return;
+	}
 
-    window.localStorage.setItem(storedUserKey, JSON.stringify(user));
+	window.localStorage.setItem(storedUserKey, JSON.stringify(user));
 }
diff --git a/orders-frontend/src/hooks/useCart.tsx b/orders-frontend/src/hooks/useCart.tsx
index e49ba0e..3ac21ec 100644
--- a/orders-frontend/src/hooks/useCart.tsx
+++ b/orders-frontend/src/hooks/useCart.tsx
@@ -1,121 +1,140 @@
-import type {Product} from "#/types/product";
-import {createContext, useContext, useEffect, useMemo, useState} from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import type { Product } from "#/types/product";
 
 export type CartItem = {
-    product: Product;
-    quantity: number;
+	product: Product;
+	quantity: number;
 };
 
 type CartContextValue = {
-    items: CartItem[];
-    itemCount: number;
-    totalAmount: number;
-    currency: string;
-    addItem: (product: Product, quantity: number) => void;
-    updateQuantity: (productId: string, quantity: number) => void;
-    removeItem: (productId: string) => void;
-    clearCart: () => void;
+	items: CartItem[];
+	itemCount: number;
+	totalAmount: number;
+	currency: string;
+	addItem: (product: Product, quantity: number) => void;
+	updateQuantity: (productId: string, quantity: number) => void;
+	removeItem: (productId: string) => void;
+	clearCart: () => void;
 };
 
 const CartContext = createContext<CartContextValue | null>(null);
 const CART_STORAGE_KEY = "cymelle_cart";
 
-export function CartProvider({children}: {children: React.ReactNode}) {
-    const [items, setItems] = useState<CartItem[]>(() => {
-        if (typeof window === "undefined") {
-            return [];
-        }
+export function CartProvider({ children }: { children: React.ReactNode }) {
+	const [items, setItems] = useState<CartItem[]>(() => {
+		if (typeof window === "undefined") {
+			return [];
+		}
 
-        try {
-            return JSON.parse(window.localStorage.getItem(CART_STORAGE_KEY) ?? "[]") as CartItem[];
-        } catch {
-            return [];
-        }
-    });
+		try {
+			return JSON.parse(
+				window.localStorage.getItem(CART_STORAGE_KEY) ?? "[]",
+			) as CartItem[];
+		} catch {
+			return [];
+		}
+	});
 
-    const itemCount = useMemo(
-        () => items.reduce((total, item) => total + item.quantity, 0),
-        [items],
-    );
+	const itemCount = useMemo(
+		() => items.reduce((total, item) => total + item.quantity, 0),
+		[items],
+	);
 
-    const totalAmount = useMemo(
-        () => items.reduce((total, item) => total + item.product.price * item.quantity, 0),
-        [items],
-    );
+	const totalAmount = useMemo(
+		() =>
+			items.reduce(
+				(total, item) => total + item.product.price * item.quantity,
+				0,
+			),
+		[items],
+	);
 
-    const currency = items[0]?.product.currency ?? "KES";
+	const currency = items[0]?.product.currency ?? "KES";
 
-    useEffect(() => {
-        window.localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(items));
-    }, [items]);
+	useEffect(() => {
+		window.localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(items));
+	}, [items]);
 
-    function addItem(product: Product, quantity: number) {
-        const safeQuantity = Math.min(Math.max(quantity, 1), product.availableQuantity);
+	function addItem(product: Product, quantity: number) {
+		const safeQuantity = Math.min(
+			Math.max(quantity, 1),
+			product.availableQuantity,
+		);
 
-        setItems((currentItems) => {
-            const existing = currentItems.find((item) => item.product.id === product.id);
+		setItems((currentItems) => {
+			const existing = currentItems.find(
+				(item) => item.product.id === product.id,
+			);
 
-            if (existing) {
-                return currentItems.map((item) =>
-                    item.product.id === product.id
-                        ? {
-                            ...item,
-                            product,
-                            quantity: Math.min(item.quantity + safeQuantity, product.availableQuantity),
-                        }
-                        : item,
-                );
-            }
+			if (existing) {
+				return currentItems.map((item) =>
+					item.product.id === product.id
+						? {
+								...item,
+								product,
+								quantity: Math.min(
+									item.quantity + safeQuantity,
+									product.availableQuantity,
+								),
+							}
+						: item,
+				);
+			}
 
-            return [...currentItems, {product, quantity: safeQuantity}];
-        });
-    }
+			return [...currentItems, { product, quantity: safeQuantity }];
+		});
+	}
 
-    function updateQuantity(productId: string, quantity: number) {
-        setItems((currentItems) =>
-            currentItems.flatMap((item) => {
-                if (item.product.id !== productId) {
-                    return [item];
-                }
+	function updateQuantity(productId: string, quantity: number) {
+		setItems((currentItems) =>
+			currentItems.flatMap((item) => {
+				if (item.product.id !== productId) {
+					return [item];
+				}
 
-                const nextQuantity = Math.min(Math.max(quantity, 0), item.product.availableQuantity);
-                return nextQuantity === 0 ? [] : [{...item, quantity: nextQuantity}];
-            }),
-        );
-    }
+				const nextQuantity = Math.min(
+					Math.max(quantity, 0),
+					item.product.availableQuantity,
+				);
+				return nextQuantity === 0 ? [] : [{ ...item, quantity: nextQuantity }];
+			}),
+		);
+	}
 
-    function removeItem(productId: string) {
-        setItems((currentItems) => currentItems.filter((item) => item.product.id !== productId));
-    }
+	function removeItem(productId: string) {
+		setItems((currentItems) =>
+			currentItems.filter((item) => item.product.id !== productId),
+		);
+	}
 
-    function clearCart() {
-        setItems([]);
-    }
+	function clearCart() {
+		setItems([]);
+	}
 
-    return (
-        <CartContext.Provider
-            value={{
-                items,
-                itemCount,
-                totalAmount,
-                currency,
-                addItem,
-                updateQuantity,
-                removeItem,
-                clearCart,
-            }}
-        >
-            {children}
-        </CartContext.Provider>
-    );
+	return (
+		<CartContext.Provider
+			value={{
+				items,
+				itemCount,
+				totalAmount,
+				currency,
+				addItem,
+				updateQuantity,
+				removeItem,
+				clearCart,
+			}}
+		>
+			{children}
+		</CartContext.Provider>
+	);
 }
 
 export function useCart() {
-    const context = useContext(CartContext);
+	const context = useContext(CartContext);
 
-    if (!context) {
-        throw new Error("useCart must be used within CartProvider");
-    }
+	if (!context) {
+		throw new Error("useCart must be used within CartProvider");
+	}
 
-    return context;
+	return context;
 }
diff --git a/orders-frontend/src/hooks/useFareCalculation.ts b/orders-frontend/src/hooks/useFareCalculation.ts
index 4ef678e..78687a1 100644
--- a/orders-frontend/src/hooks/useFareCalculation.ts
+++ b/orders-frontend/src/hooks/useFareCalculation.ts
@@ -1,14 +1,14 @@
-import {calculateFare} from "#/api/fare";
-import {useMutation} from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
+import { calculateFare } from "#/api/fare";
 
 type FareCalculationInput = {
-    distanceKm: number;
-    surgeMultiplier?: number;
+	distanceKm: number;
+	surgeMultiplier?: number;
 };
 
 export function useFareCalculation() {
-    return useMutation({
-        mutationFn: ({distanceKm, surgeMultiplier}: FareCalculationInput) =>
-            calculateFare(distanceKm, surgeMultiplier),
-    });
-}
\ No newline at end of file
+	return useMutation({
+		mutationFn: ({ distanceKm, surgeMultiplier }: FareCalculationInput) =>
+			calculateFare(distanceKm, surgeMultiplier),
+	});
+}
diff --git a/orders-frontend/src/hooks/useInventory.ts b/orders-frontend/src/hooks/useInventory.ts
index 1972495..45255b8 100644
--- a/orders-frontend/src/hooks/useInventory.ts
+++ b/orders-frontend/src/hooks/useInventory.ts
@@ -1,23 +1,23 @@
-import {getInventory, getLowStockInventory} from "#/api/inventory";
-import {useQuery} from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+import { getInventory, getLowStockInventory } from "#/api/inventory";
 
 export const inventoryQueryKeys = {
-    all: ["inventory"] as const,
-    list: () => [...inventoryQueryKeys.all, "list"] as const,
-    lowStock: (threshold?: number) =>
-        [...inventoryQueryKeys.all, "low-stock", threshold ?? "default"] as const,
+	all: ["inventory"] as const,
+	list: () => [...inventoryQueryKeys.all, "list"] as const,
+	lowStock: (threshold?: number) =>
+		[...inventoryQueryKeys.all, "low-stock", threshold ?? "default"] as const,
 };
 
 export function useInventory() {
-    return useQuery({
-        queryKey: inventoryQueryKeys.list(),
-        queryFn: ({signal}) => getInventory(signal),
-    });
+	return useQuery({
+		queryKey: inventoryQueryKeys.list(),
+		queryFn: ({ signal }) => getInventory(signal),
+	});
 }
 
 export function useLowStockInventory(threshold?: number) {
-    return useQuery({
-        queryKey: inventoryQueryKeys.lowStock(threshold),
-        queryFn: ({signal}) => getLowStockInventory(threshold, signal),
-    });
-}
\ No newline at end of file
+	return useQuery({
+		queryKey: inventoryQueryKeys.lowStock(threshold),
+		queryFn: ({ signal }) => getLowStockInventory(threshold, signal),
+	});
+}
diff --git a/orders-frontend/src/hooks/useOrders.ts b/orders-frontend/src/hooks/useOrders.ts
index 9c06029..de06bc2 100644
--- a/orders-frontend/src/hooks/useOrders.ts
+++ b/orders-frontend/src/hooks/useOrders.ts
@@ -1,64 +1,75 @@
-import {cancelOrder, createOrder, getOrders, updateOrderStatus} from "#/api/orders";
-import {inventoryQueryKeys} from "#/hooks/useInventory";
-import {productQueryKeys} from "#/hooks/useProducts";
-import type {OrderFilters} from "#/types/order";
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	cancelOrder,
+	createOrder,
+	getOrders,
+	updateOrderStatus,
+} from "#/api/orders";
+import { inventoryQueryKeys } from "#/hooks/useInventory";
+import { productQueryKeys } from "#/hooks/useProducts";
+import type { OrderFilters } from "#/types/order";
 
 export const orderQueryKeys = {
-    all: ["orders"] as const,
-    list: (filters: OrderFilters, page = 0, size = 20) =>
-        [...orderQueryKeys.all, "list", filters, page, size] as const,
+	all: ["orders"] as const,
+	list: (filters: OrderFilters, page = 0, size = 20) =>
+		[...orderQueryKeys.all, "list", filters, page, size] as const,
 };
 
 export function useOrders(filters: OrderFilters, page = 0, size = 20) {
-    return useQuery({
-        queryKey: orderQueryKeys.list(filters, page, size),
-        queryFn: ({signal}) => getOrders(filters, page, size, signal),
-    });
+	return useQuery({
+		queryKey: orderQueryKeys.list(filters, page, size),
+		queryFn: ({ signal }) => getOrders(filters, page, size, signal),
+	});
 }
 
 export function useCancelOrder() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: cancelOrder,
-        onSuccess: async () => {
-            await Promise.all([
-                queryClient.invalidateQueries({
-                    queryKey: orderQueryKeys.all,
-                }),
-                queryClient.invalidateQueries({
-                    queryKey: inventoryQueryKeys.all,
-                }),
-                queryClient.invalidateQueries({
-                    queryKey: productQueryKeys.all,
-                }),
-            ]);
-        },
-    });
+	return useMutation({
+		mutationFn: cancelOrder,
+		onSuccess: async () => {
+			await Promise.all([
+				queryClient.invalidateQueries({
+					queryKey: orderQueryKeys.all,
+				}),
+				queryClient.invalidateQueries({
+					queryKey: inventoryQueryKeys.all,
+				}),
+				queryClient.invalidateQueries({
+					queryKey: productQueryKeys.all,
+				}),
+			]);
+		},
+	});
 }
 
 export function useCreateOrder() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: createOrder,
-        onSuccess: async () => {
-            await Promise.all([
-                queryClient.invalidateQueries({queryKey: orderQueryKeys.all}),
-                queryClient.invalidateQueries({queryKey: inventoryQueryKeys.all}),
-                queryClient.invalidateQueries({queryKey: productQueryKeys.all}),
-            ]);
-        },
-    });
+	return useMutation({
+		mutationFn: createOrder,
+		onSuccess: async () => {
+			await Promise.all([
+				queryClient.invalidateQueries({ queryKey: orderQueryKeys.all }),
+				queryClient.invalidateQueries({ queryKey: inventoryQueryKeys.all }),
+				queryClient.invalidateQueries({ queryKey: productQueryKeys.all }),
+			]);
+		},
+	});
 }
 
 export function useUpdateOrderStatus() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: ({id, status}: {id: string; status: import("#/types/order").OrderStatus}) =>
-            updateOrderStatus(id, status),
-        onSuccess: () => queryClient.invalidateQueries({queryKey: orderQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: ({
+			id,
+			status,
+		}: {
+			id: string;
+			status: import("#/types/order").OrderStatus;
+		}) => updateOrderStatus(id, status),
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: orderQueryKeys.all }),
+	});
 }
diff --git a/orders-frontend/src/hooks/usePayments.ts b/orders-frontend/src/hooks/usePayments.ts
new file mode 100644
index 0000000..b1cf538
--- /dev/null
+++ b/orders-frontend/src/hooks/usePayments.ts
@@ -0,0 +1,61 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	getCheckoutQuote,
+	initializePaystackPayment,
+	verifyPaystackPayment,
+} from "#/api/payments";
+import { inventoryQueryKeys } from "#/hooks/useInventory";
+import { orderQueryKeys } from "#/hooks/useOrders";
+import { productQueryKeys } from "#/hooks/useProducts";
+import type {
+	CheckoutQuoteRequest,
+	PaystackInitializeRequest,
+} from "#/types/payment";
+
+export const paymentQueryKeys = {
+	all: ["payments"] as const,
+	quote: (request: CheckoutQuoteRequest) =>
+		[...paymentQueryKeys.all, "quote", request] as const,
+};
+
+export function useCheckoutQuote(
+	request: CheckoutQuoteRequest,
+	enabled: boolean,
+) {
+	return useQuery({
+		queryKey: paymentQueryKeys.quote(request),
+		queryFn: ({ signal }) => getCheckoutQuote(request, signal),
+		enabled,
+	});
+}
+
+export function useInitializePaystackPayment() {
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationFn: (request: PaystackInitializeRequest) =>
+			initializePaystackPayment(request),
+		onSuccess: async () => {
+			await Promise.all([
+				queryClient.invalidateQueries({ queryKey: orderQueryKeys.all }),
+				queryClient.invalidateQueries({ queryKey: inventoryQueryKeys.all }),
+				queryClient.invalidateQueries({ queryKey: productQueryKeys.all }),
+			]);
+		},
+	});
+}
+
+export function useVerifyPaystackPayment() {
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationFn: verifyPaystackPayment,
+		onSuccess: async () => {
+			await Promise.all([
+				queryClient.invalidateQueries({ queryKey: orderQueryKeys.all }),
+				queryClient.invalidateQueries({ queryKey: inventoryQueryKeys.all }),
+				queryClient.invalidateQueries({ queryKey: productQueryKeys.all }),
+			]);
+		},
+	});
+}
diff --git a/orders-frontend/src/hooks/useProducts.ts b/orders-frontend/src/hooks/useProducts.ts
index 05581b7..d49d1bf 100644
--- a/orders-frontend/src/hooks/useProducts.ts
+++ b/orders-frontend/src/hooks/useProducts.ts
@@ -1,50 +1,59 @@
-import {createProduct, deactivateProduct, getProduct, getProducts, updateProduct} from "#/api/products";
-import type {ProductRequest} from "#/types/product";
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	createProduct,
+	deactivateProduct,
+	getProduct,
+	getProducts,
+	updateProduct,
+} from "#/api/products";
+import type { ProductRequest } from "#/types/product";
 
 export const productQueryKeys = {
-    all: ["products"] as const,
-    detail: (id: string) => [...productQueryKeys.all, "detail", id] as const,
+	all: ["products"] as const,
+	detail: (id: string) => [...productQueryKeys.all, "detail", id] as const,
 };
 
 export function useProducts() {
-    return useQuery({
-        queryKey: productQueryKeys.all,
-        queryFn: ({signal}) => getProducts(signal),
-    });
+	return useQuery({
+		queryKey: productQueryKeys.all,
+		queryFn: ({ signal }) => getProducts(signal),
+	});
 }
 
 export function useProduct(id: string) {
-    return useQuery({
-        queryKey: productQueryKeys.detail(id),
-        queryFn: ({signal}) => getProduct(id, signal),
-    });
+	return useQuery({
+		queryKey: productQueryKeys.detail(id),
+		queryFn: ({ signal }) => getProduct(id, signal),
+	});
 }
 
 export function useCreateProduct() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: createProduct,
-        onSuccess: () => queryClient.invalidateQueries({queryKey: productQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: createProduct,
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: productQueryKeys.all }),
+	});
 }
 
 export function useUpdateProduct() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: ({id, request}: {id: string; request: ProductRequest}) =>
-            updateProduct(id, request),
-        onSuccess: () => queryClient.invalidateQueries({queryKey: productQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: ({ id, request }: { id: string; request: ProductRequest }) =>
+			updateProduct(id, request),
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: productQueryKeys.all }),
+	});
 }
 
 export function useDeactivateProduct() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: deactivateProduct,
-        onSuccess: () => queryClient.invalidateQueries({queryKey: productQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: deactivateProduct,
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: productQueryKeys.all }),
+	});
 }
diff --git a/orders-frontend/src/hooks/useRides.ts b/orders-frontend/src/hooks/useRides.ts
index e9d48be..1bc8473 100644
--- a/orders-frontend/src/hooks/useRides.ts
+++ b/orders-frontend/src/hooks/useRides.ts
@@ -1,67 +1,72 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
-    acceptRide,
-    cancelRide,
-    completeRide,
-    getRides,
-    requestRide,
-    updateRideStatus,
+	acceptRide,
+	cancelRide,
+	completeRide,
+	getRides,
+	requestRide,
+	updateRideStatus,
 } from "#/api/rides";
-import type {CreateRideRequest, RideStatus} from "#/types/ride";
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
+import type { CreateRideRequest, RideStatus } from "#/types/ride";
 
 export const rideQueryKeys = {
-    all: ["rides"] as const,
+	all: ["rides"] as const,
 };
 
 export function useRides() {
-    return useQuery({
-        queryKey: rideQueryKeys.all,
-        queryFn: ({signal}) => getRides(signal),
-    });
+	return useQuery({
+		queryKey: rideQueryKeys.all,
+		queryFn: ({ signal }) => getRides(signal),
+	});
 }
 
 export function useRequestRide() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: (request: CreateRideRequest) => requestRide(request),
-        onSuccess: () => queryClient.invalidateQueries({queryKey: rideQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: (request: CreateRideRequest) => requestRide(request),
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: rideQueryKeys.all }),
+	});
 }
 
 export function useAcceptRide() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: acceptRide,
-        onSuccess: () => queryClient.invalidateQueries({queryKey: rideQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: acceptRide,
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: rideQueryKeys.all }),
+	});
 }
 
 export function useCompleteRide() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: completeRide,
-        onSuccess: () => queryClient.invalidateQueries({queryKey: rideQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: completeRide,
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: rideQueryKeys.all }),
+	});
 }
 
 export function useCancelRide() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: cancelRide,
-        onSuccess: () => queryClient.invalidateQueries({queryKey: rideQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: cancelRide,
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: rideQueryKeys.all }),
+	});
 }
 
 export function useUpdateRideStatus() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: ({id, status}: {id: string; status: RideStatus}) =>
-            updateRideStatus(id, status),
-        onSuccess: () => queryClient.invalidateQueries({queryKey: rideQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: ({ id, status }: { id: string; status: RideStatus }) =>
+			updateRideStatus(id, status),
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: rideQueryKeys.all }),
+	});
 }
diff --git a/orders-frontend/src/hooks/useUsers.ts b/orders-frontend/src/hooks/useUsers.ts
index 6cc52eb..4082e68 100644
--- a/orders-frontend/src/hooks/useUsers.ts
+++ b/orders-frontend/src/hooks/useUsers.ts
@@ -1,58 +1,69 @@
-import {createUser, disableUser, getCustomers, getDrivers, getUsers, updateUser} from "#/api/users";
-import type {AdminUserRequest} from "#/types/user";
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	createUser,
+	disableUser,
+	getCustomers,
+	getDrivers,
+	getUsers,
+	updateUser,
+} from "#/api/users";
+import type { AdminUserRequest } from "#/types/user";
 
 export const userQueryKeys = {
-    all: ["users"] as const,
-    list: () => [...userQueryKeys.all, "list"] as const,
-    customers: () => [...userQueryKeys.all, "customers"] as const,
-    drivers: () => [...userQueryKeys.all, "drivers"] as const,
+	all: ["users"] as const,
+	list: () => [...userQueryKeys.all, "list"] as const,
+	customers: () => [...userQueryKeys.all, "customers"] as const,
+	drivers: () => [...userQueryKeys.all, "drivers"] as const,
 };
 
 export function useUsers() {
-    return useQuery({
-        queryKey: userQueryKeys.list(),
-        queryFn: ({signal}) => getUsers(signal),
-    });
+	return useQuery({
+		queryKey: userQueryKeys.list(),
+		queryFn: ({ signal }) => getUsers(signal),
+	});
 }
 
 export function useCustomers() {
-    return useQuery({
-        queryKey: userQueryKeys.customers(),
-        queryFn: ({signal}) => getCustomers(signal),
-    });
+	return useQuery({
+		queryKey: userQueryKeys.customers(),
+		queryFn: ({ signal }) => getCustomers(signal),
+	});
 }
 
 export function useDrivers() {
-    return useQuery({
-        queryKey: userQueryKeys.drivers(),
-        queryFn: ({signal}) => getDrivers(signal),
-    });
+	return useQuery({
+		queryKey: userQueryKeys.drivers(),
+		queryFn: ({ signal }) => getDrivers(signal),
+	});
 }
 
 export function useCreateUser() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: createUser,
-        onSuccess: () => queryClient.invalidateQueries({queryKey: userQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: createUser,
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: userQueryKeys.all }),
+	});
 }
 
 export function useUpdateUser() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: ({id, request}: {id: string; request: AdminUserRequest}) => updateUser(id, request),
-        onSuccess: () => queryClient.invalidateQueries({queryKey: userQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: ({ id, request }: { id: string; request: AdminUserRequest }) =>
+			updateUser(id, request),
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: userQueryKeys.all }),
+	});
 }
 
 export function useDisableUser() {
-    const queryClient = useQueryClient();
+	const queryClient = useQueryClient();
 
-    return useMutation({
-        mutationFn: disableUser,
-        onSuccess: () => queryClient.invalidateQueries({queryKey: userQueryKeys.all}),
-    });
+	return useMutation({
+		mutationFn: disableUser,
+		onSuccess: () =>
+			queryClient.invalidateQueries({ queryKey: userQueryKeys.all }),
+	});
 }
diff --git a/orders-frontend/src/lib/auth-navigation.ts b/orders-frontend/src/lib/auth-navigation.ts
index 375db0b..dbdb884 100644
--- a/orders-frontend/src/lib/auth-navigation.ts
+++ b/orders-frontend/src/lib/auth-navigation.ts
@@ -1,10 +1,10 @@
-import type {AuthUser} from "#/types/auth";
-import type {NavigateFn} from "@tanstack/react-router";
+import type { NavigateFn } from "@tanstack/react-router";
+import type { AuthUser } from "#/types/auth";
 
 export function roleHomePath(_user: AuthUser) {
-    return "/";
+	return "/";
 }
 
 export async function navigateToRoleHome(navigate: NavigateFn, user: AuthUser) {
-    await navigate({to: roleHomePath(user), replace: true});
+	await navigate({ to: roleHomePath(user), replace: true });
 }
diff --git a/orders-frontend/src/lib/queryClient.ts b/orders-frontend/src/lib/queryClient.ts
index 2075c4a..94fe521 100644
--- a/orders-frontend/src/lib/queryClient.ts
+++ b/orders-frontend/src/lib/queryClient.ts
@@ -1,17 +1,17 @@
-import {QueryClient} from "@tanstack/react-query";
+import { QueryClient } from "@tanstack/react-query";
 
 export function createQueryClient() {
-    return new QueryClient({
-        defaultOptions: {
-            queries: {
-                staleTime: 15_000,
-                gcTime: 5 * 60_000,
-                retry: 1,
-                refetchOnWindowFocus: false,
-            },
-            mutations: {
-                retry: 0,
-            },
-        },
-    });
+	return new QueryClient({
+		defaultOptions: {
+			queries: {
+				staleTime: 15_000,
+				gcTime: 5 * 60_000,
+				retry: 1,
+				refetchOnWindowFocus: false,
+			},
+			mutations: {
+				retry: 0,
+			},
+		},
+	});
 }
diff --git a/orders-frontend/src/lib/utils.ts b/orders-frontend/src/lib/utils.ts
index abba253..d39aff9 100644
--- a/orders-frontend/src/lib/utils.ts
+++ b/orders-frontend/src/lib/utils.ts
@@ -1,7 +1,7 @@
-import type { ClassValue } from 'clsx'
-import { clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+	return twMerge(clsx(inputs));
 }
diff --git a/orders-frontend/src/routeTree.gen.ts b/orders-frontend/src/routeTree.gen.ts
index cf199a9..eeb1991 100644
--- a/orders-frontend/src/routeTree.gen.ts
+++ b/orders-frontend/src/routeTree.gen.ts
@@ -35,6 +35,7 @@ import { Route as DriverRidesIndexRouteImport } from './routes/driver.rides.inde
 import { Route as AdminRidesIndexRouteImport } from './routes/admin.rides.index'
 import { Route as AdminProductsIndexRouteImport } from './routes/admin.products.index'
 import { Route as AdminOrdersIndexRouteImport } from './routes/admin.orders.index'
+import { Route as PaymentsPaystackCallbackRouteImport } from './routes/payments.paystack.callback'
 import { Route as DriverRidesRequestedRouteImport } from './routes/driver.rides.requested'
 import { Route as DriverRidesCompletedRouteImport } from './routes/driver.rides.completed'
 import { Route as DriverRidesAcceptedRouteImport } from './routes/driver.rides.accepted'
@@ -173,6 +174,12 @@ const AdminOrdersIndexRoute = AdminOrdersIndexRouteImport.update({
   path: '/',
   getParentRoute: () => AdminOrdersRoute,
 } as any)
+const PaymentsPaystackCallbackRoute =
+  PaymentsPaystackCallbackRouteImport.update({
+    id: '/payments/paystack/callback',
+    path: '/payments/paystack/callback',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const DriverRidesRequestedRoute = DriverRidesRequestedRouteImport.update({
   id: '/requested',
   path: '/requested',
@@ -239,6 +246,7 @@ export interface FileRoutesByFullPath {
   '/driver/rides/accepted': typeof DriverRidesAcceptedRoute
   '/driver/rides/completed': typeof DriverRidesCompletedRoute
   '/driver/rides/requested': typeof DriverRidesRequestedRoute
+  '/payments/paystack/callback': typeof PaymentsPaystackCallbackRoute
   '/admin/orders/': typeof AdminOrdersIndexRoute
   '/admin/products/': typeof AdminProductsIndexRoute
   '/admin/rides/': typeof AdminRidesIndexRoute
@@ -266,6 +274,7 @@ export interface FileRoutesByTo {
   '/driver/rides/accepted': typeof DriverRidesAcceptedRoute
   '/driver/rides/completed': typeof DriverRidesCompletedRoute
   '/driver/rides/requested': typeof DriverRidesRequestedRoute
+  '/payments/paystack/callback': typeof PaymentsPaystackCallbackRoute
   '/admin/orders': typeof AdminOrdersIndexRoute
   '/admin/products': typeof AdminProductsIndexRoute
   '/admin/rides': typeof AdminRidesIndexRoute
@@ -302,6 +311,7 @@ export interface FileRoutesById {
   '/driver/rides/accepted': typeof DriverRidesAcceptedRoute
   '/driver/rides/completed': typeof DriverRidesCompletedRoute
   '/driver/rides/requested': typeof DriverRidesRequestedRoute
+  '/payments/paystack/callback': typeof PaymentsPaystackCallbackRoute
   '/admin/orders/': typeof AdminOrdersIndexRoute
   '/admin/products/': typeof AdminProductsIndexRoute
   '/admin/rides/': typeof AdminRidesIndexRoute
@@ -339,6 +349,7 @@ export interface FileRouteTypes {
     | '/driver/rides/accepted'
     | '/driver/rides/completed'
     | '/driver/rides/requested'
+    | '/payments/paystack/callback'
     | '/admin/orders/'
     | '/admin/products/'
     | '/admin/rides/'
@@ -366,6 +377,7 @@ export interface FileRouteTypes {
     | '/driver/rides/accepted'
     | '/driver/rides/completed'
     | '/driver/rides/requested'
+    | '/payments/paystack/callback'
     | '/admin/orders'
     | '/admin/products'
     | '/admin/rides'
@@ -401,6 +413,7 @@ export interface FileRouteTypes {
     | '/driver/rides/accepted'
     | '/driver/rides/completed'
     | '/driver/rides/requested'
+    | '/payments/paystack/callback'
     | '/admin/orders/'
     | '/admin/products/'
     | '/admin/rides/'
@@ -415,6 +428,7 @@ export interface RootRouteChildren {
   ProductsRoute: typeof ProductsRouteWithChildren
   RidesRoute: typeof RidesRouteWithChildren
   DriverRidesRoute: typeof DriverRidesRouteWithChildren
+  PaymentsPaystackCallbackRoute: typeof PaymentsPaystackCallbackRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -601,6 +615,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminOrdersIndexRouteImport
       parentRoute: typeof AdminOrdersRoute
     }
+    '/payments/paystack/callback': {
+      id: '/payments/paystack/callback'
+      path: '/payments/paystack/callback'
+      fullPath: '/payments/paystack/callback'
+      preLoaderRoute: typeof PaymentsPaystackCallbackRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/driver/rides/requested': {
       id: '/driver/rides/requested'
       path: '/requested'
@@ -788,6 +809,7 @@ const rootRouteChildren: RootRouteChildren = {
   ProductsRoute: ProductsRouteWithChildren,
   RidesRoute: RidesRouteWithChildren,
   DriverRidesRoute: DriverRidesRouteWithChildren,
+  PaymentsPaystackCallbackRoute: PaymentsPaystackCallbackRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/orders-frontend/src/router.tsx b/orders-frontend/src/router.tsx
index 1e49935..cbcf65f 100644
--- a/orders-frontend/src/router.tsx
+++ b/orders-frontend/src/router.tsx
@@ -1,14 +1,14 @@
-import {createRouter as createTanStackRouter} from "@tanstack/react-router";
-import {setupRouterSsrQueryIntegration} from "@tanstack/react-router-ssr-query";
-import {createQueryClient} from "#/lib/queryClient";
-import {routeTree} from "./routeTree.gen";
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
+import { createQueryClient } from "#/lib/queryClient";
+import { routeTree } from "./routeTree.gen";
 
 export function getRouter() {
 	const queryClient = createQueryClient();
 
 	const router = createTanStackRouter({
 		routeTree,
-		context: {queryClient},
+		context: { queryClient },
 		scrollRestoration: true,
 		defaultPreload: "intent",
 	});
diff --git a/orders-frontend/src/routes/__root.tsx b/orders-frontend/src/routes/__root.tsx
index 700fa88..214618d 100644
--- a/orders-frontend/src/routes/__root.tsx
+++ b/orders-frontend/src/routes/__root.tsx
@@ -1,13 +1,18 @@
-import type {QueryClient} from "@tanstack/react-query";
-import {ReactQueryDevtools} from "@tanstack/react-query-devtools";
-import {createRootRouteWithContext, HeadContent, Outlet, Scripts,} from "@tanstack/react-router";
-import {TanStackRouterDevtools} from "@tanstack/react-router-devtools";
+import type { QueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import {
+	createRootRouteWithContext,
+	HeadContent,
+	Outlet,
+	Scripts,
+} from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import { ThemeProvider } from "#/components/theme-provider";
+import { Toaster } from "#/components/ui/sonner";
+import { TooltipProvider } from "#/components/ui/tooltip";
+import { AuthProvider } from "#/hooks/useAuth";
+import { CartProvider } from "#/hooks/useCart";
 import appCss from "#/styles.css?url";
-import {AuthProvider} from "#/hooks/useAuth";
-import {CartProvider} from "#/hooks/useCart";
-import {Toaster} from "#/components/ui/sonner";
-import {TooltipProvider} from "#/components/ui/tooltip";
-import {ThemeProvider} from "#/components/theme-provider";
 
 export const Route = createRootRouteWithContext<{
 	queryClient: QueryClient;
@@ -38,24 +43,24 @@ export const Route = createRootRouteWithContext<{
 function RootComponent() {
 	return (
 		<html lang="en" suppressHydrationWarning>
-		<head>
-			<HeadContent/>
-		</head>
-		<body>
-		<ThemeProvider>
-		<TooltipProvider>
-		<AuthProvider>
-			<CartProvider>
-			<Outlet/>
-			</CartProvider>
-		</AuthProvider>
-		</TooltipProvider>
-		</ThemeProvider>
-		<Toaster richColors position="top-right"/>
-		<TanStackRouterDevtools position="bottom-right"/>
-		<ReactQueryDevtools initialIsOpen={false}/>
-		<Scripts/>
-		</body>
+			<head>
+				<HeadContent />
+			</head>
+			<body>
+				<ThemeProvider>
+					<TooltipProvider>
+						<AuthProvider>
+							<CartProvider>
+								<Outlet />
+							</CartProvider>
+						</AuthProvider>
+					</TooltipProvider>
+				</ThemeProvider>
+				<Toaster richColors position="top-right" />
+				<TanStackRouterDevtools position="bottom-right" />
+				<ReactQueryDevtools initialIsOpen={false} />
+				<Scripts />
+			</body>
 		</html>
 	);
 }
diff --git a/orders-frontend/src/routes/admin.customers.tsx b/orders-frontend/src/routes/admin.customers.tsx
index 4c1c2ca..7a2052f 100644
--- a/orders-frontend/src/routes/admin.customers.tsx
+++ b/orders-frontend/src/routes/admin.customers.tsx
@@ -1,6 +1,6 @@
-import {AdminCustomersPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminCustomersPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/customers")({
-    component: AdminCustomersPage,
+	component: AdminCustomersPage,
 });
diff --git a/orders-frontend/src/routes/admin.drivers.tsx b/orders-frontend/src/routes/admin.drivers.tsx
index dc1ceeb..38b073f 100644
--- a/orders-frontend/src/routes/admin.drivers.tsx
+++ b/orders-frontend/src/routes/admin.drivers.tsx
@@ -1,6 +1,6 @@
-import {AdminDriversPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminDriversPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/drivers")({
-    component: AdminDriversPage,
+	component: AdminDriversPage,
 });
diff --git a/orders-frontend/src/routes/admin.index.tsx b/orders-frontend/src/routes/admin.index.tsx
index 65ed3e1..626f3ed 100644
--- a/orders-frontend/src/routes/admin.index.tsx
+++ b/orders-frontend/src/routes/admin.index.tsx
@@ -1,6 +1,6 @@
-import {AdminOverviewPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminOverviewPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/")({
-    component: AdminOverviewPage,
+	component: AdminOverviewPage,
 });
diff --git a/orders-frontend/src/routes/admin.inventory.tsx b/orders-frontend/src/routes/admin.inventory.tsx
index 6d992fe..19eaa9c 100644
--- a/orders-frontend/src/routes/admin.inventory.tsx
+++ b/orders-frontend/src/routes/admin.inventory.tsx
@@ -1,6 +1,6 @@
-import {AdminInventoryPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminInventoryPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/inventory")({
-    component: AdminInventoryPage,
+	component: AdminInventoryPage,
 });
diff --git a/orders-frontend/src/routes/admin.orders.index.tsx b/orders-frontend/src/routes/admin.orders.index.tsx
index cca2c2b..cdcbc9d 100644
--- a/orders-frontend/src/routes/admin.orders.index.tsx
+++ b/orders-frontend/src/routes/admin.orders.index.tsx
@@ -1,6 +1,6 @@
-import {AdminOrdersPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminOrdersPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/orders/")({
-    component: AdminOrdersPage,
+	component: AdminOrdersPage,
 });
diff --git a/orders-frontend/src/routes/admin.orders.pending.tsx b/orders-frontend/src/routes/admin.orders.pending.tsx
index f04ae08..276fa39 100644
--- a/orders-frontend/src/routes/admin.orders.pending.tsx
+++ b/orders-frontend/src/routes/admin.orders.pending.tsx
@@ -1,6 +1,6 @@
-import {AdminOrdersPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminOrdersPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/orders/pending")({
-    component: () => <AdminOrdersPage status="PENDING"/>,
+	component: () => <AdminOrdersPage status="PENDING" />,
 });
diff --git a/orders-frontend/src/routes/admin.orders.tsx b/orders-frontend/src/routes/admin.orders.tsx
index f1dd00f..a6177a1 100644
--- a/orders-frontend/src/routes/admin.orders.tsx
+++ b/orders-frontend/src/routes/admin.orders.tsx
@@ -1,5 +1,5 @@
-import {Outlet, createFileRoute} from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/admin/orders")({
-    component: Outlet,
+	component: Outlet,
 });
diff --git a/orders-frontend/src/routes/admin.products.index.tsx b/orders-frontend/src/routes/admin.products.index.tsx
index f75da22..8bf3c34 100644
--- a/orders-frontend/src/routes/admin.products.index.tsx
+++ b/orders-frontend/src/routes/admin.products.index.tsx
@@ -1,6 +1,6 @@
-import {AdminProductsPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminProductsPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/products/")({
-    component: AdminProductsPage,
+	component: AdminProductsPage,
 });
diff --git a/orders-frontend/src/routes/admin.products.new.tsx b/orders-frontend/src/routes/admin.products.new.tsx
index c7f8181..6c5e8ca 100644
--- a/orders-frontend/src/routes/admin.products.new.tsx
+++ b/orders-frontend/src/routes/admin.products.new.tsx
@@ -1,6 +1,6 @@
-import {AdminProductCreatePage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminProductCreatePage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/products/new")({
-    component: AdminProductCreatePage,
+	component: AdminProductCreatePage,
 });
diff --git a/orders-frontend/src/routes/admin.products.tsx b/orders-frontend/src/routes/admin.products.tsx
index 5490b94..636cfaf 100644
--- a/orders-frontend/src/routes/admin.products.tsx
+++ b/orders-frontend/src/routes/admin.products.tsx
@@ -1,5 +1,5 @@
-import {Outlet, createFileRoute} from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/admin/products")({
-    component: Outlet,
+	component: Outlet,
 });
diff --git a/orders-frontend/src/routes/admin.rides.accepted.tsx b/orders-frontend/src/routes/admin.rides.accepted.tsx
index 9d83d13..d47abf7 100644
--- a/orders-frontend/src/routes/admin.rides.accepted.tsx
+++ b/orders-frontend/src/routes/admin.rides.accepted.tsx
@@ -1,6 +1,6 @@
-import {AdminRidesPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminRidesPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/rides/accepted")({
-    component: () => <AdminRidesPage status="ACCEPTED"/>,
+	component: () => <AdminRidesPage status="ACCEPTED" />,
 });
diff --git a/orders-frontend/src/routes/admin.rides.index.tsx b/orders-frontend/src/routes/admin.rides.index.tsx
index 569e33b..1045e95 100644
--- a/orders-frontend/src/routes/admin.rides.index.tsx
+++ b/orders-frontend/src/routes/admin.rides.index.tsx
@@ -1,6 +1,6 @@
-import {AdminRidesPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminRidesPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/rides/")({
-    component: AdminRidesPage,
+	component: AdminRidesPage,
 });
diff --git a/orders-frontend/src/routes/admin.rides.requested.tsx b/orders-frontend/src/routes/admin.rides.requested.tsx
index 7c03e4b..c876cbe 100644
--- a/orders-frontend/src/routes/admin.rides.requested.tsx
+++ b/orders-frontend/src/routes/admin.rides.requested.tsx
@@ -1,6 +1,6 @@
-import {AdminRidesPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminRidesPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/rides/requested")({
-    component: () => <AdminRidesPage status="REQUESTED"/>,
+	component: () => <AdminRidesPage status="REQUESTED" />,
 });
diff --git a/orders-frontend/src/routes/admin.rides.tsx b/orders-frontend/src/routes/admin.rides.tsx
index d8f909f..68e3497 100644
--- a/orders-frontend/src/routes/admin.rides.tsx
+++ b/orders-frontend/src/routes/admin.rides.tsx
@@ -1,5 +1,5 @@
-import {Outlet, createFileRoute} from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/admin/rides")({
-    component: Outlet,
+	component: Outlet,
 });
diff --git a/orders-frontend/src/routes/admin.tsx b/orders-frontend/src/routes/admin.tsx
index fae3124..3872dfc 100644
--- a/orders-frontend/src/routes/admin.tsx
+++ b/orders-frontend/src/routes/admin.tsx
@@ -1,5 +1,5 @@
-import {Outlet, createFileRoute} from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/admin")({
-    component: Outlet,
+	component: Outlet,
 });
diff --git a/orders-frontend/src/routes/admin.users.tsx b/orders-frontend/src/routes/admin.users.tsx
index b51eed2..3a20fed 100644
--- a/orders-frontend/src/routes/admin.users.tsx
+++ b/orders-frontend/src/routes/admin.users.tsx
@@ -1,6 +1,6 @@
-import {AdminUsersPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { AdminUsersPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/admin/users")({
-    component: AdminUsersPage,
+	component: AdminUsersPage,
 });
diff --git a/orders-frontend/src/routes/cart.tsx b/orders-frontend/src/routes/cart.tsx
index c93a654..9c9d4b3 100644
--- a/orders-frontend/src/routes/cart.tsx
+++ b/orders-frontend/src/routes/cart.tsx
@@ -1,258 +1,389 @@
-import {AuthDialog} from "#/components/store/AuthDialog";
-import {QuantityStepper} from "#/components/store/QuantityStepper";
-import {SiteHeader} from "#/components/store/SiteHeader";
-import {ErrorState} from "#/components/ui/ErrorState";
-import {Button} from "#/components/ui/button";
-import {Card, CardContent, CardHeader, CardTitle} from "#/components/ui/card";
-import {Input} from "#/components/ui/input";
-import {Label} from "#/components/ui/label";
-import {Separator} from "#/components/ui/separator";
-import {formatCurrency} from "#/hooks/formatCurrency";
-import {useAuth} from "#/hooks/useAuth";
-import {useCart} from "#/hooks/useCart";
-import {useCreateOrder} from "#/hooks/useOrders";
-import {navigateToRoleHome} from "#/lib/auth-navigation";
-import {Link, createFileRoute, useNavigate} from "@tanstack/react-router";
-import {ShoppingCart, Trash2} from "lucide-react";
-import {useState} from "react";
-import {toast} from "sonner";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { CreditCard, ShoppingCart, Trash2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { AuthDialog } from "#/components/store/AuthDialog";
+import { QuantityStepper } from "#/components/store/QuantityStepper";
+import { SiteHeader } from "#/components/store/SiteHeader";
+import { Button } from "#/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "#/components/ui/card";
+import { ErrorState } from "#/components/ui/ErrorState";
+import { Input } from "#/components/ui/input";
+import { Label } from "#/components/ui/label";
+import { Separator } from "#/components/ui/separator";
+import { formatCurrency } from "#/hooks/formatCurrency";
+import { useAuth } from "#/hooks/useAuth";
+import { useCart } from "#/hooks/useCart";
+import {
+	useCheckoutQuote,
+	useInitializePaystackPayment,
+} from "#/hooks/usePayments";
+import { navigateToRoleHome } from "#/lib/auth-navigation";
 
 export const Route = createFileRoute("/cart")({
-    component: CartPage,
+	component: CartPage,
 });
 
 function CartPage() {
-    const cart = useCart();
-    const {user, login, register, logout} = useAuth();
-    const navigate = useNavigate();
-    const createOrder = useCreateOrder();
-    const [authMode, setAuthMode] = useState<"login" | "register" | null>(null);
-    const [requestRide, setRequestRide] = useState(false);
-    const [rideForm, setRideForm] = useState({pickupLocation: "", dropoffLocation: "", distanceKm: "5"});
+	const cart = useCart();
+	const { user, login, register, logout } = useAuth();
+	const navigate = useNavigate();
+	const initializePayment = useInitializePaystackPayment();
+	const [authMode, setAuthMode] = useState<"login" | "register" | null>(null);
+	const [requestRide, setRequestRide] = useState(false);
+	const [rideForm, setRideForm] = useState({
+		pickupLocation: "",
+		dropoffLocation: "",
+		distanceKm: "5",
+	});
+	const rideFormIsValid =
+		!requestRide ||
+		(rideForm.pickupLocation.trim().length > 0 &&
+			rideForm.dropoffLocation.trim().length > 0 &&
+			Number(rideForm.distanceKm) > 0);
+	const checkoutRequest = useMemo(
+		() => ({
+			items: cart.items.map((item) => ({
+				productId: item.product.id,
+				quantity: item.quantity,
+			})),
+			deliveryRide:
+				requestRide && rideFormIsValid
+					? {
+							pickupLocation: rideForm.pickupLocation,
+							dropoffLocation: rideForm.dropoffLocation,
+							distanceKm: Number(rideForm.distanceKm),
+						}
+					: null,
+		}),
+		[
+			cart.items,
+			requestRide,
+			rideForm.dropoffLocation,
+			rideForm.distanceKm,
+			rideForm.pickupLocation,
+			rideFormIsValid,
+		],
+	);
+	const checkoutQuote = useCheckoutQuote(
+		checkoutRequest,
+		cart.items.length > 0 && rideFormIsValid,
+	);
+	const productSubtotal =
+		checkoutQuote.data?.productSubtotal ?? cart.totalAmount;
+	const rideFare = requestRide ? (checkoutQuote.data?.rideFare ?? 0) : 0;
+	const grandTotal =
+		checkoutQuote.data?.grandTotal ?? productSubtotal + rideFare;
+	const currency = checkoutQuote.data?.currency ?? cart.currency;
 
-    async function handleLogin(request: {username: string; password: string}) {
-        const user = await login(request);
-        setAuthMode(null);
-        toast.success("Signed in", {description: "Opening your dashboard."});
-        await navigateToRoleHome(navigate, user);
-        return user;
-    }
+	async function handleLogin(request: { username: string; password: string }) {
+		const user = await login(request);
+		setAuthMode(null);
+		toast.success("Signed in", { description: "Opening your dashboard." });
+		await navigateToRoleHome(navigate, user);
+		return user;
+	}
 
-    async function handleRegister(request: {username: string; password: string; displayName: string}) {
-        const user = await register(request);
-        setAuthMode(null);
-        toast.success("Account created", {description: "Opening your dashboard."});
-        await navigateToRoleHome(navigate, user);
-        return user;
-    }
+	async function handleRegister(request: {
+		username: string;
+		password: string;
+		displayName: string;
+	}) {
+		const user = await register(request);
+		setAuthMode(null);
+		toast.success("Account created", {
+			description: "Opening your dashboard.",
+		});
+		await navigateToRoleHome(navigate, user);
+		return user;
+	}
 
-    async function checkout() {
-        if (!user) {
-            setAuthMode("login");
-            toast.info("Sign in to checkout", {description: "Your cart will stay here after authentication."});
-            return;
-        }
+	async function checkout() {
+		if (!user) {
+			setAuthMode("login");
+			toast.info("Sign in to checkout", {
+				description: "Your cart will stay here after authentication.",
+			});
+			return;
+		}
 
-        if (user.role !== "CUSTOMER") {
-            toast.error("Checkout requires a customer account");
-            return;
-        }
+		if (user.role !== "CUSTOMER") {
+			toast.error("Checkout requires a customer account");
+			return;
+		}
 
-        if (requestRide && (!rideForm.pickupLocation || !rideForm.dropoffLocation || Number(rideForm.distanceKm) <= 0)) {
-            toast.error("Pickup, dropoff, and distance are required for a delivery ride");
-            return;
-        }
+		if (
+			requestRide &&
+			(!rideForm.pickupLocation ||
+				!rideForm.dropoffLocation ||
+				Number(rideForm.distanceKm) <= 0)
+		) {
+			toast.error(
+				"Pickup, dropoff, and distance are required for a delivery ride",
+			);
+			return;
+		}
 
-        try {
-            const order = await createOrder.mutateAsync({
-                items: cart.items.map((item) => ({
-                    productId: item.product.id,
-                    quantity: item.quantity,
-                })),
-                deliveryRide: requestRide
-                    ? {
-                        pickupLocation: rideForm.pickupLocation,
-                        dropoffLocation: rideForm.dropoffLocation,
-                        distanceKm: Number(rideForm.distanceKm),
-                    }
-                    : null,
-            });
-            cart.clearCart();
-            toast.success("Order placed", {
-                description: requestRide
-                    ? `Order ${order.id.slice(0, 8)} is pending and a ride was requested.`
-                    : `Order ${order.id.slice(0, 8)} is pending.`,
-            });
-        } catch (error) {
-            toast.error("Checkout failed", {description: error instanceof Error ? error.message : "Please review your cart and try again."});
-        }
-    }
+		try {
+			const payment = await initializePayment.mutateAsync(checkoutRequest);
+			toast.success("Redirecting to Paystack", {
+				description: `Payment ${payment.reference} is ready.`,
+			});
+			window.location.href = payment.authorizationUrl;
+		} catch (error) {
+			toast.error("Checkout failed", {
+				description:
+					error instanceof Error
+						? error.message
+						: "Please review your cart and try again.",
+			});
+		}
+	}
 
-    return (
-        <main className="min-h-screen bg-background">
-            <SiteHeader
-                user={user}
-                onLogin={() => setAuthMode("login")}
-                onRegister={() => setAuthMode("register")}
-                onLogout={logout}
-            />
+	return (
+		<main className="min-h-screen bg-background">
+			<SiteHeader
+				user={user}
+				onLogin={() => setAuthMode("login")}
+				onRegister={() => setAuthMode("register")}
+				onLogout={logout}
+			/>
 
-            <div className="mx-auto max-w-6xl px-4 py-8">
-                <div className="mb-6">
-                    <p className="text-sm font-medium uppercase text-muted-foreground">Checkout</p>
-                    <h1 className="mt-2 text-3xl font-bold">Cart</h1>
-                </div>
+			<div className="mx-auto max-w-6xl px-4 py-8">
+				<div className="mb-6">
+					<p className="text-sm font-medium uppercase text-muted-foreground">
+						Checkout
+					</p>
+					<h1 className="mt-2 text-3xl font-bold">Cart</h1>
+				</div>
 
-                {cart.items.length === 0 ? (
-                    <Card>
-                        <CardContent className="py-10 text-center">
-                            <ShoppingCart className="mx-auto mb-3 size-8 text-muted-foreground"/>
-                            <p className="font-medium">Your cart is empty.</p>
-                            <Button asChild className="mt-4">
-                                <Link to="/">Browse products</Link>
-                            </Button>
-                        </CardContent>
-                    </Card>
-                ) : (
-                    <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
-                        <div className="space-y-3">
-                            {cart.items.map((item) => (
-                                <Card key={item.product.id}>
-                                    <CardContent className="p-4">
-                                        <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-                                            <div>
-                                                <Button asChild variant="link" className="h-auto p-0 text-base font-semibold">
-                                                    <Link to="/products/$productId" params={{productId: item.product.id}}>
-                                                        {item.product.name}
-                                                    </Link>
-                                                </Button>
-                                                <p className="mt-1 text-sm text-muted-foreground">{item.product.sku}</p>
-                                                <p className="mt-2 text-sm">
-                                                    {formatCurrency(item.product.price, item.product.currency)} each
-                                                </p>
-                                            </div>
-                                            <div className="flex items-center gap-3">
-                                                <QuantityStepper
-                                                    value={item.quantity}
-                                                    min={1}
-                                                    max={item.product.availableQuantity}
-                                                    onChange={(quantity) => cart.updateQuantity(item.product.id, quantity)}
-                                                />
-                                                <Button
-                                                    type="button"
-                                                    variant="destructive"
-                                                    size="icon"
-                                                    onClick={() => {
-                                                        cart.removeItem(item.product.id);
-                                                        toast.info("Removed from cart");
-                                                    }}
-                                                    aria-label={`Remove ${item.product.name}`}
-                                                >
-                                                    <Trash2/>
-                                                </Button>
-                                            </div>
-                                        </div>
-                                        <p className="mt-4 text-right font-semibold">
-                                            {formatCurrency(item.product.price * item.quantity, item.product.currency)}
-                                        </p>
-                                    </CardContent>
-                                </Card>
-                            ))}
-                        </div>
+				{cart.items.length === 0 ? (
+					<Card>
+						<CardContent className="py-10 text-center">
+							<ShoppingCart className="mx-auto mb-3 size-8 text-muted-foreground" />
+							<p className="font-medium">Your cart is empty.</p>
+							<Button asChild className="mt-4">
+								<Link to="/">Browse products</Link>
+							</Button>
+						</CardContent>
+					</Card>
+				) : (
+					<div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
+						<div className="space-y-3">
+							{cart.items.map((item) => (
+								<Card key={item.product.id}>
+									<CardContent className="p-4">
+										<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+											<div>
+												<Button
+													asChild
+													variant="link"
+													className="h-auto p-0 text-base font-semibold"
+												>
+													<Link
+														to="/products/$productId"
+														params={{ productId: item.product.id }}
+													>
+														{item.product.name}
+													</Link>
+												</Button>
+												<p className="mt-1 text-sm text-muted-foreground">
+													{item.product.sku}
+												</p>
+												<p className="mt-2 text-sm">
+													{formatCurrency(
+														item.product.price,
+														item.product.currency,
+													)}{" "}
+													each
+												</p>
+											</div>
+											<div className="flex items-center gap-3">
+												<QuantityStepper
+													value={item.quantity}
+													min={1}
+													max={item.product.availableQuantity}
+													onChange={(quantity) =>
+														cart.updateQuantity(item.product.id, quantity)
+													}
+												/>
+												<Button
+													type="button"
+													variant="destructive"
+													size="icon"
+													onClick={() => {
+														cart.removeItem(item.product.id);
+														toast.info("Removed from cart");
+													}}
+													aria-label={`Remove ${item.product.name}`}
+												>
+													<Trash2 />
+												</Button>
+											</div>
+										</div>
+										<p className="mt-4 text-right font-semibold">
+											{formatCurrency(
+												item.product.price * item.quantity,
+												item.product.currency,
+											)}
+										</p>
+									</CardContent>
+								</Card>
+							))}
+						</div>
 
-                        <Card className="h-fit">
-                            <CardHeader>
-                                <CardTitle>Order summary</CardTitle>
-                            </CardHeader>
-                            <CardContent className="space-y-4">
-                                <div className="flex justify-between text-sm">
-                                    <span className="text-muted-foreground">Items</span>
-                                    <span className="font-medium">{cart.itemCount}</span>
-                                </div>
-                                <Separator/>
-                                <div className="space-y-3 rounded-lg border p-3">
-                                    <label className="flex items-center gap-2 text-sm font-medium">
-                                        <input
-                                            type="checkbox"
-                                            checked={requestRide}
-                                            onChange={(event) => setRequestRide(event.target.checked)}
-                                        />
-                                        Request delivery ride with this order
-                                    </label>
-                                    {requestRide ? (
-                                        <div className="grid gap-3">
-                                            <div className="space-y-2">
-                                                <Label htmlFor="checkout-pickup">Pickup</Label>
-                                                <Input
-                                                    id="checkout-pickup"
-                                                    value={rideForm.pickupLocation}
-                                                    onChange={(event) => setRideForm({...rideForm, pickupLocation: event.target.value})}
-                                                    required={requestRide}
-                                                />
-                                            </div>
-                                            <div className="space-y-2">
-                                                <Label htmlFor="checkout-dropoff">Dropoff</Label>
-                                                <Input
-                                                    id="checkout-dropoff"
-                                                    value={rideForm.dropoffLocation}
-                                                    onChange={(event) => setRideForm({...rideForm, dropoffLocation: event.target.value})}
-                                                    required={requestRide}
-                                                />
-                                            </div>
-                                            <div className="space-y-2">
-                                                <Label htmlFor="checkout-distance">Distance KM</Label>
-                                                <Input
-                                                    id="checkout-distance"
-                                                    type="number"
-                                                    min="0.1"
-                                                    step="0.1"
-                                                    value={rideForm.distanceKm}
-                                                    onChange={(event) => setRideForm({...rideForm, distanceKm: event.target.value})}
-                                                    required={requestRide}
-                                                />
-                                            </div>
-                                        </div>
-                                    ) : null}
-                                </div>
-                                <Separator/>
-                                <div className="flex justify-between text-lg font-semibold">
-                                    <span>Total</span>
-                                    <span>{formatCurrency(cart.totalAmount, cart.currency)}</span>
-                                </div>
-                                <Button
-                                    type="button"
-                                    disabled={createOrder.isPending}
-                                    onClick={checkout}
-                                    className="w-full"
-                                >
-                                    {createOrder.isPending ? "Placing order..." : "Proceed to checkout"}
-                                </Button>
-                                {!user ? (
-                                    <div className="grid grid-cols-2 gap-2">
-                                        <Button type="button" variant="outline" onClick={() => setAuthMode("login")}>
-                                            Sign in
-                                        </Button>
-                                        <Button type="button" variant="outline" onClick={() => setAuthMode("register")}>
-                                            Create account
-                                        </Button>
-                                    </div>
-                                ) : null}
-                                {createOrder.error ? (
-                                    <ErrorState message={createOrder.error instanceof Error ? createOrder.error.message : "Checkout failed"}/>
-                                ) : null}
-                            </CardContent>
-                        </Card>
-                    </div>
-                )}
-            </div>
+						<Card className="h-fit">
+							<CardHeader>
+								<CardTitle>Order summary</CardTitle>
+							</CardHeader>
+							<CardContent className="space-y-4">
+								<div className="flex justify-between text-sm">
+									<span className="text-muted-foreground">Items</span>
+									<span className="font-medium">{cart.itemCount}</span>
+								</div>
+								<div className="flex justify-between text-sm">
+									<span className="text-muted-foreground">
+										Product subtotal
+									</span>
+									<span className="font-medium">
+										{formatCurrency(productSubtotal, currency)}
+									</span>
+								</div>
+								<Separator />
+								<div className="space-y-3 rounded-lg border p-3">
+									<label className="flex items-center gap-2 text-sm font-medium">
+										<input
+											type="checkbox"
+											checked={requestRide}
+											onChange={(event) => setRequestRide(event.target.checked)}
+										/>
+										Request delivery ride with this order
+									</label>
+									{requestRide ? (
+										<div className="grid gap-3">
+											<div className="space-y-2">
+												<Label htmlFor="checkout-pickup">Pickup</Label>
+												<Input
+													id="checkout-pickup"
+													value={rideForm.pickupLocation}
+													onChange={(event) =>
+														setRideForm({
+															...rideForm,
+															pickupLocation: event.target.value,
+														})
+													}
+													required={requestRide}
+												/>
+											</div>
+											<div className="space-y-2">
+												<Label htmlFor="checkout-dropoff">Dropoff</Label>
+												<Input
+													id="checkout-dropoff"
+													value={rideForm.dropoffLocation}
+													onChange={(event) =>
+														setRideForm({
+															...rideForm,
+															dropoffLocation: event.target.value,
+														})
+													}
+													required={requestRide}
+												/>
+											</div>
+											<div className="space-y-2">
+												<Label htmlFor="checkout-distance">Distance KM</Label>
+												<Input
+													id="checkout-distance"
+													type="number"
+													min="0.1"
+													step="0.1"
+													value={rideForm.distanceKm}
+													onChange={(event) =>
+														setRideForm({
+															...rideForm,
+															distanceKm: event.target.value,
+														})
+													}
+													required={requestRide}
+												/>
+											</div>
+										</div>
+									) : null}
+								</div>
+								{requestRide ? (
+									<div className="flex justify-between text-sm">
+										<span className="text-muted-foreground">Delivery ride</span>
+										<span className="font-medium">
+											{checkoutQuote.isFetching
+												? "Calculating..."
+												: formatCurrency(rideFare, currency)}
+										</span>
+									</div>
+								) : null}
+								<Separator />
+								<div className="flex justify-between text-lg font-semibold">
+									<span>Total</span>
+									<span>{formatCurrency(grandTotal, currency)}</span>
+								</div>
+								<Button
+									type="button"
+									disabled={initializePayment.isPending}
+									onClick={checkout}
+									className="w-full"
+								>
+									<CreditCard className="mr-2 size-4" />
+									{initializePayment.isPending
+										? "Opening Paystack..."
+										: "Pay with Paystack"}
+								</Button>
+								{!user ? (
+									<div className="grid grid-cols-2 gap-2">
+										<Button
+											type="button"
+											variant="outline"
+											onClick={() => setAuthMode("login")}
+										>
+											Sign in
+										</Button>
+										<Button
+											type="button"
+											variant="outline"
+											onClick={() => setAuthMode("register")}
+										>
+											Create account
+										</Button>
+									</div>
+								) : null}
+								{checkoutQuote.error ? (
+									<ErrorState
+										message={
+											checkoutQuote.error instanceof Error
+												? checkoutQuote.error.message
+												: "Quote failed"
+										}
+									/>
+								) : null}
+								{initializePayment.error ? (
+									<ErrorState
+										message={
+											initializePayment.error instanceof Error
+												? initializePayment.error.message
+												: "Checkout failed"
+										}
+									/>
+								) : null}
+							</CardContent>
+						</Card>
+					</div>
+				)}
+			</div>
 
-            <AuthDialog
-                open={authMode !== null}
-                initialMode={authMode ?? "login"}
-                onOpenChange={(open) => !open && setAuthMode(null)}
-                onLogin={handleLogin}
-                onRegister={handleRegister}
-            />
-        </main>
-    );
+			<AuthDialog
+				open={authMode !== null}
+				initialMode={authMode ?? "login"}
+				onOpenChange={(open) => !open && setAuthMode(null)}
+				onLogin={handleLogin}
+				onRegister={handleRegister}
+			/>
+		</main>
+	);
 }
diff --git a/orders-frontend/src/routes/driver.rides.accepted.tsx b/orders-frontend/src/routes/driver.rides.accepted.tsx
index 1892210..f66d68a 100644
--- a/orders-frontend/src/routes/driver.rides.accepted.tsx
+++ b/orders-frontend/src/routes/driver.rides.accepted.tsx
@@ -1,6 +1,6 @@
-import {DriverRidesPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { DriverRidesPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/driver/rides/accepted")({
-    component: () => <DriverRidesPage status="ACCEPTED"/>,
+	component: () => <DriverRidesPage status="ACCEPTED" />,
 });
diff --git a/orders-frontend/src/routes/driver.rides.completed.tsx b/orders-frontend/src/routes/driver.rides.completed.tsx
index 0716388..caafcd7 100644
--- a/orders-frontend/src/routes/driver.rides.completed.tsx
+++ b/orders-frontend/src/routes/driver.rides.completed.tsx
@@ -1,6 +1,6 @@
-import {DriverRidesPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { DriverRidesPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/driver/rides/completed")({
-    component: () => <DriverRidesPage status="COMPLETED"/>,
+	component: () => <DriverRidesPage status="COMPLETED" />,
 });
diff --git a/orders-frontend/src/routes/driver.rides.index.tsx b/orders-frontend/src/routes/driver.rides.index.tsx
index 7fdc04c..61b9447 100644
--- a/orders-frontend/src/routes/driver.rides.index.tsx
+++ b/orders-frontend/src/routes/driver.rides.index.tsx
@@ -1,6 +1,6 @@
-import {DriverRidesPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { DriverRidesPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/driver/rides/")({
-    component: DriverRidesPage,
+	component: DriverRidesPage,
 });
diff --git a/orders-frontend/src/routes/driver.rides.requested.tsx b/orders-frontend/src/routes/driver.rides.requested.tsx
index c31c1d5..b359c4c 100644
--- a/orders-frontend/src/routes/driver.rides.requested.tsx
+++ b/orders-frontend/src/routes/driver.rides.requested.tsx
@@ -1,6 +1,6 @@
-import {DriverRidesPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { DriverRidesPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/driver/rides/requested")({
-    component: () => <DriverRidesPage status="REQUESTED"/>,
+	component: () => <DriverRidesPage status="REQUESTED" />,
 });
diff --git a/orders-frontend/src/routes/driver.rides.tsx b/orders-frontend/src/routes/driver.rides.tsx
index b4abc27..ec0cb75 100644
--- a/orders-frontend/src/routes/driver.rides.tsx
+++ b/orders-frontend/src/routes/driver.rides.tsx
@@ -1,5 +1,5 @@
-import {Outlet, createFileRoute} from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/driver/rides")({
-    component: Outlet,
+	component: Outlet,
 });
diff --git a/orders-frontend/src/routes/index.tsx b/orders-frontend/src/routes/index.tsx
index 17fd0ff..fc1060e 100644
--- a/orders-frontend/src/routes/index.tsx
+++ b/orders-frontend/src/routes/index.tsx
@@ -1,26 +1,30 @@
-import {AdminOverviewPage, CustomerOverviewPage, DriverOverviewPage} from "#/components/app/WorkspacePages";
-import {StoreHome} from "#/components/store/StoreHome";
-import {useAuth} from "#/hooks/useAuth";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import {
+	AdminOverviewPage,
+	CustomerOverviewPage,
+	DriverOverviewPage,
+} from "#/components/app/WorkspacePages";
+import { StoreHome } from "#/components/store/StoreHome";
+import { useAuth } from "#/hooks/useAuth";
 
 export const Route = createFileRoute("/")({
-    component: HomePage,
+	component: HomePage,
 });
 
 function HomePage() {
-    const {user} = useAuth();
+	const { user } = useAuth();
 
-    if (!user) {
-        return <StoreHome/>;
-    }
+	if (!user) {
+		return <StoreHome />;
+	}
 
-    if (user.role === "ADMIN") {
-        return <AdminOverviewPage/>;
-    }
+	if (user.role === "ADMIN") {
+		return <AdminOverviewPage />;
+	}
 
-    if (user.role === "DRIVER") {
-        return <DriverOverviewPage/>;
-    }
+	if (user.role === "DRIVER") {
+		return <DriverOverviewPage />;
+	}
 
-    return <CustomerOverviewPage/>;
+	return <CustomerOverviewPage />;
 }
diff --git a/orders-frontend/src/routes/orders.index.tsx b/orders-frontend/src/routes/orders.index.tsx
index d02d0a3..63c4720 100644
--- a/orders-frontend/src/routes/orders.index.tsx
+++ b/orders-frontend/src/routes/orders.index.tsx
@@ -1,6 +1,6 @@
-import {CustomerOrdersPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { CustomerOrdersPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/orders/")({
-    component: CustomerOrdersPage,
+	component: CustomerOrdersPage,
 });
diff --git a/orders-frontend/src/routes/orders.status.tsx b/orders-frontend/src/routes/orders.status.tsx
index 6bbc9f4..df4ac0d 100644
--- a/orders-frontend/src/routes/orders.status.tsx
+++ b/orders-frontend/src/routes/orders.status.tsx
@@ -1,6 +1,6 @@
-import {CustomerOrdersPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { CustomerOrdersPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/orders/status")({
-    component: () => <CustomerOrdersPage status="SHIPPED"/>,
+	component: () => <CustomerOrdersPage status="SHIPPED" />,
 });
diff --git a/orders-frontend/src/routes/orders.tsx b/orders-frontend/src/routes/orders.tsx
index fd17d1b..0326540 100644
--- a/orders-frontend/src/routes/orders.tsx
+++ b/orders-frontend/src/routes/orders.tsx
@@ -1,5 +1,5 @@
-import {Outlet, createFileRoute} from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/orders")({
-    component: Outlet,
+	component: Outlet,
 });
diff --git a/orders-frontend/src/routes/payments.paystack.callback.tsx b/orders-frontend/src/routes/payments.paystack.callback.tsx
new file mode 100644
index 0000000..838377a
--- /dev/null
+++ b/orders-frontend/src/routes/payments.paystack.callback.tsx
@@ -0,0 +1,136 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { CheckCircle2, Loader2, XCircle } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";
+import { SiteHeader } from "#/components/store/SiteHeader";
+import { Button } from "#/components/ui/button";
+import { Card, CardContent } from "#/components/ui/card";
+import { useAuth } from "#/hooks/useAuth";
+import { useCart } from "#/hooks/useCart";
+import { useVerifyPaystackPayment } from "#/hooks/usePayments";
+
+export const Route = createFileRoute("/payments/paystack/callback")({
+	validateSearch: (search: Record<string, unknown>) => ({
+		reference: typeof search.reference === "string" ? search.reference : "",
+	}),
+	component: PaystackCallbackPage,
+});
+
+function PaystackCallbackPage() {
+	const { user, logout } = useAuth();
+	const cart = useCart();
+	const navigate = useNavigate();
+	const { reference } = Route.useSearch();
+	const verifyPayment = useVerifyPaystackPayment();
+	const startedRef = useRef(false);
+
+	useEffect(() => {
+		if (!reference || startedRef.current) {
+			return;
+		}
+
+		startedRef.current = true;
+		verifyPayment.mutate(reference, {
+			onSuccess: (payment) => {
+				if (payment.status === "PAID") {
+					cart.clearCart();
+					toast.success("Payment verified", {
+						description: `Order ${payment.orderId.slice(0, 8)} is ready for fulfillment.`,
+					});
+					return;
+				}
+
+				toast.error("Payment not completed", {
+					description: payment.message,
+				});
+			},
+			onError: (error) => {
+				toast.error("Payment verification failed", {
+					description:
+						error instanceof Error
+							? error.message
+							: "Please contact support with your reference.",
+				});
+			},
+		});
+	}, [cart, reference, verifyPayment]);
+
+	const paid = verifyPayment.data?.status === "PAID";
+	const failed =
+		!reference ||
+		verifyPayment.isError ||
+		(verifyPayment.data && verifyPayment.data.status !== "PAID");
+
+	return (
+		<main className="min-h-screen bg-background">
+			<SiteHeader
+				user={user}
+				onLogin={() => navigate({ to: "/cart" })}
+				onRegister={() => navigate({ to: "/cart" })}
+				onLogout={logout}
+			/>
+
+			<div className="mx-auto flex max-w-2xl px-4 py-12">
+				<Card className="w-full">
+					<CardContent className="space-y-5 p-6">
+						{verifyPayment.isPending ? (
+							<div className="flex items-center gap-3">
+								<Loader2 className="size-5 animate-spin text-muted-foreground" />
+								<div>
+									<h1 className="text-xl font-semibold">Verifying payment</h1>
+									<p className="text-sm text-muted-foreground">
+										Reference {reference}
+									</p>
+								</div>
+							</div>
+						) : null}
+
+						{paid ? (
+							<div className="rounded-md border p-4">
+								<div className="flex gap-3">
+									<CheckCircle2 className="mt-0.5 size-4 text-emerald-600" />
+									<div>
+										<h1 className="font-semibold">Payment verified</h1>
+										<p className="text-sm text-muted-foreground">
+											Order {verifyPayment.data?.orderId.slice(0, 8)} is pending
+											fulfillment.
+										</p>
+									</div>
+								</div>
+							</div>
+						) : null}
+
+						{failed ? (
+							<div className="rounded-md border border-destructive/40 p-4 text-destructive">
+								<div className="flex gap-3">
+									<XCircle className="mt-0.5 size-4" />
+									<div>
+										<h1 className="font-semibold">
+											Payment could not be verified
+										</h1>
+										<p className="text-sm">
+											{reference
+												? (verifyPayment.data?.message ??
+													verifyPayment.error?.message ??
+													"Please contact support with your reference.")
+												: "The Paystack callback did not include a reference."}
+										</p>
+									</div>
+								</div>
+							</div>
+						) : null}
+
+						<div className="flex flex-col gap-2 sm:flex-row">
+							<Button asChild>
+								<Link to="/orders">View orders</Link>
+							</Button>
+							<Button asChild variant="outline">
+								<Link to="/cart">Back to cart</Link>
+							</Button>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</main>
+	);
+}
diff --git a/orders-frontend/src/routes/products.$productId.tsx b/orders-frontend/src/routes/products.$productId.tsx
index f79418d..8f6e97e 100644
--- a/orders-frontend/src/routes/products.$productId.tsx
+++ b/orders-frontend/src/routes/products.$productId.tsx
@@ -1,145 +1,177 @@
-import {AppShell} from "#/components/app/AppShell";
-import {QuantityStepper} from "#/components/store/QuantityStepper";
-import {SiteHeader} from "#/components/store/SiteHeader";
-import {ErrorState} from "#/components/ui/ErrorState";
-import {LoadingState} from "#/components/ui/LoadingState";
-import {Button} from "#/components/ui/button";
-import {Card, CardContent, CardHeader, CardTitle} from "#/components/ui/card";
-import {Separator} from "#/components/ui/separator";
-import {StatusBadge} from "#/components/ui/status-badge";
-import {formatCurrency} from "#/hooks/formatCurrency";
-import {useAuth} from "#/hooks/useAuth";
-import {useCart} from "#/hooks/useCart";
-import {useProduct} from "#/hooks/useProducts";
-import {Link, createFileRoute} from "@tanstack/react-router";
-import {ShoppingCart} from "lucide-react";
-import {useState, type ReactNode} from "react";
-import {toast} from "sonner";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { ShoppingCart } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { toast } from "sonner";
+import { AppShell } from "#/components/app/AppShell";
+import { QuantityStepper } from "#/components/store/QuantityStepper";
+import { SiteHeader } from "#/components/store/SiteHeader";
+import { Button } from "#/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "#/components/ui/card";
+import { ErrorState } from "#/components/ui/ErrorState";
+import { LoadingState } from "#/components/ui/LoadingState";
+import { Separator } from "#/components/ui/separator";
+import { StatusBadge } from "#/components/ui/status-badge";
+import { formatCurrency } from "#/hooks/formatCurrency";
+import { useAuth } from "#/hooks/useAuth";
+import { useCart } from "#/hooks/useCart";
+import { useProduct } from "#/hooks/useProducts";
 
 export const Route = createFileRoute("/products/$productId")({
-    component: ProductDetailPage,
+	component: ProductDetailPage,
 });
 
 function ProductDetailPage() {
-    const {productId} = Route.useParams();
-    const productQuery = useProduct(productId);
-    const {user} = useAuth();
-    const cart = useCart();
-    const [quantity, setQuantity] = useState(1);
+	const { productId } = Route.useParams();
+	const productQuery = useProduct(productId);
+	const { user } = useAuth();
+	const cart = useCart();
+	const [quantity, setQuantity] = useState(1);
 
-    if (productQuery.isLoading) {
-        return <ProductDetailFrame user={user} title="Product detail"><LoadingState title="Loading product"/></ProductDetailFrame>;
-    }
+	if (productQuery.isLoading) {
+		return (
+			<ProductDetailFrame user={user} title="Product detail">
+				<LoadingState title="Loading product" />
+			</ProductDetailFrame>
+		);
+	}
 
-    if (productQuery.isError || !productQuery.data) {
-        return (
-            <ProductDetailFrame user={user} title="Product detail">
-                <ErrorState
-                    title="Could not load product"
-                    message={productQuery.error instanceof Error ? productQuery.error.message : "Product was not found"}
-                    onRetry={() => productQuery.refetch()}
-                />
-            </ProductDetailFrame>
-        );
-    }
+	if (productQuery.isError || !productQuery.data) {
+		return (
+			<ProductDetailFrame user={user} title="Product detail">
+				<ErrorState
+					title="Could not load product"
+					message={
+						productQuery.error instanceof Error
+							? productQuery.error.message
+							: "Product was not found"
+					}
+					onRetry={() => productQuery.refetch()}
+				/>
+			</ProductDetailFrame>
+		);
+	}
 
-    const product = productQuery.data;
-    const inStock = product.availableQuantity > 0;
-    const maxQuantity = Math.max(product.availableQuantity, 1);
+	const product = productQuery.data;
+	const inStock = product.availableQuantity > 0;
+	const maxQuantity = Math.max(product.availableQuantity, 1);
 
-    function addToCart() {
-        cart.addItem(product, quantity);
-        toast.success("Added to cart", {description: `${quantity} x ${product.name}`});
-    }
+	function addToCart() {
+		cart.addItem(product, quantity);
+		toast.success("Added to cart", {
+			description: `${quantity} x ${product.name}`,
+		});
+	}
 
-    return (
-        <ProductDetailFrame user={user} title={product.name}>
-                <nav className="mb-6 flex gap-3 text-sm font-medium">
-                    <Button asChild variant="link" className="h-auto p-0">
-                        <Link to="/">Store</Link>
-                    </Button>
-                    <span className="text-muted-foreground">/</span>
-                    <span className="text-muted-foreground">{product.name}</span>
-                </nav>
+	return (
+		<ProductDetailFrame user={user} title={product.name}>
+			<nav className="mb-6 flex gap-3 text-sm font-medium">
+				<Button asChild variant="link" className="h-auto p-0">
+					<Link to="/">Store</Link>
+				</Button>
+				<span className="text-muted-foreground">/</span>
+				<span className="text-muted-foreground">{product.name}</span>
+			</nav>
 
-                <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
-                    <Card>
-                        <CardHeader>
-                            <div className="flex items-start justify-between gap-4">
-                                <div>
-                                    <p className="text-sm font-medium uppercase text-muted-foreground">{product.sku}</p>
-                                    <CardTitle className="mt-2 text-3xl">{product.name}</CardTitle>
-                                </div>
-                                <StatusBadge status={inStock ? "IN_STOCK" : "OUT_OF_STOCK"} label={inStock ? "In stock" : "Out of stock"}/>
-                            </div>
-                        </CardHeader>
-                        <CardContent className="space-y-6">
-                            <p className="text-3xl font-semibold">
-                                {formatCurrency(product.price, product.currency)}
-                            </p>
-                            <Separator/>
-                            <dl className="grid gap-3 text-sm md:grid-cols-3">
-                                <Metric label="Available" value={String(product.availableQuantity)}/>
-                                <Metric label="Reorder level" value={String(product.reorderLevel)}/>
-                                <Metric label="Currency" value={product.currency}/>
-                            </dl>
-                        </CardContent>
-                    </Card>
+			<div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
+				<Card>
+					<CardHeader>
+						<div className="flex items-start justify-between gap-4">
+							<div>
+								<p className="text-sm font-medium uppercase text-muted-foreground">
+									{product.sku}
+								</p>
+								<CardTitle className="mt-2 text-3xl">{product.name}</CardTitle>
+							</div>
+							<StatusBadge
+								status={inStock ? "IN_STOCK" : "OUT_OF_STOCK"}
+								label={inStock ? "In stock" : "Out of stock"}
+							/>
+						</div>
+					</CardHeader>
+					<CardContent className="space-y-6">
+						<p className="text-3xl font-semibold">
+							{formatCurrency(product.price, product.currency)}
+						</p>
+						<Separator />
+						<dl className="grid gap-3 text-sm md:grid-cols-3">
+							<Metric
+								label="Available"
+								value={String(product.availableQuantity)}
+							/>
+							<Metric
+								label="Reorder level"
+								value={String(product.reorderLevel)}
+							/>
+							<Metric label="Currency" value={product.currency} />
+						</dl>
+					</CardContent>
+				</Card>
 
-                    <Card className="h-fit">
-                        <CardHeader>
-                            <CardTitle>Add to cart</CardTitle>
-                        </CardHeader>
-                        <CardContent className="space-y-4">
-                            <QuantityStepper
-                                value={Math.min(quantity, maxQuantity)}
-                                min={1}
-                                max={maxQuantity}
-                                disabled={!inStock}
-                                onChange={setQuantity}
-                            />
-                            <Button type="button" disabled={!inStock} onClick={addToCart} className="w-full">
-                                <ShoppingCart/>
-                                Add to cart
-                            </Button>
-                            <Button asChild variant="outline" className="w-full">
-                                <Link to="/cart">View cart ({cart.itemCount})</Link>
-                            </Button>
-                        </CardContent>
-                    </Card>
-                </div>
-        </ProductDetailFrame>
-    );
+				<Card className="h-fit">
+					<CardHeader>
+						<CardTitle>Add to cart</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<QuantityStepper
+							value={Math.min(quantity, maxQuantity)}
+							min={1}
+							max={maxQuantity}
+							disabled={!inStock}
+							onChange={setQuantity}
+						/>
+						<Button
+							type="button"
+							disabled={!inStock}
+							onClick={addToCart}
+							className="w-full"
+						>
+							<ShoppingCart />
+							Add to cart
+						</Button>
+						<Button asChild variant="outline" className="w-full">
+							<Link to="/cart">View cart ({cart.itemCount})</Link>
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+		</ProductDetailFrame>
+	);
 }
 
 function ProductDetailFrame({
-    user,
-    title,
-    children,
+	user,
+	title,
+	children,
 }: {
-    user: ReturnType<typeof useAuth>["user"];
-    title: string;
-    children: ReactNode;
+	user: ReturnType<typeof useAuth>["user"];
+	title: string;
+	children: ReactNode;
 }) {
-    const {logout} = useAuth();
+	const { logout } = useAuth();
 
-    if (user) {
-        return <AppShell title={title} showCart>{children}</AppShell>;
-    }
+	if (user) {
+		return (
+			<AppShell title={title} showCart>
+				{children}
+			</AppShell>
+		);
+	}
 
-    return (
-        <main className="min-h-screen bg-background">
-            <SiteHeader user={user} onLogout={logout}/>
-            <div className="mx-auto max-w-7xl px-4 py-8">{children}</div>
-        </main>
-    );
+	return (
+		<main className="min-h-screen bg-background">
+			<SiteHeader user={user} onLogout={logout} />
+			<div className="mx-auto max-w-7xl px-4 py-8">{children}</div>
+		</main>
+	);
 }
 
-function Metric({label, value}: {label: string; value: string}) {
-    return (
-        <div className="rounded-lg border border-border p-4">
-            <dt className="text-xs font-medium uppercase text-muted-foreground">{label}</dt>
-            <dd className="mt-1 font-semibold">{value}</dd>
-        </div>
-    );
+function Metric({ label, value }: { label: string; value: string }) {
+	return (
+		<div className="rounded-lg border border-border p-4">
+			<dt className="text-xs font-medium uppercase text-muted-foreground">
+				{label}
+			</dt>
+			<dd className="mt-1 font-semibold">{value}</dd>
+		</div>
+	);
 }
diff --git a/orders-frontend/src/routes/products.featured.tsx b/orders-frontend/src/routes/products.featured.tsx
index 6369160..ac3012d 100644
--- a/orders-frontend/src/routes/products.featured.tsx
+++ b/orders-frontend/src/routes/products.featured.tsx
@@ -1,6 +1,6 @@
-import {ProductListingPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { ProductListingPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/products/featured")({
-    component: () => <ProductListingPage featured/>,
+	component: () => <ProductListingPage featured />,
 });
diff --git a/orders-frontend/src/routes/products.index.tsx b/orders-frontend/src/routes/products.index.tsx
index 9510025..38bba5a 100644
--- a/orders-frontend/src/routes/products.index.tsx
+++ b/orders-frontend/src/routes/products.index.tsx
@@ -1,6 +1,6 @@
-import {ProductListingPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { ProductListingPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/products/")({
-    component: ProductListingPage,
+	component: ProductListingPage,
 });
diff --git a/orders-frontend/src/routes/products.tsx b/orders-frontend/src/routes/products.tsx
index 0b46b02..c770d7d 100644
--- a/orders-frontend/src/routes/products.tsx
+++ b/orders-frontend/src/routes/products.tsx
@@ -1,5 +1,5 @@
-import {Outlet, createFileRoute} from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/products")({
-    component: Outlet,
+	component: Outlet,
 });
diff --git a/orders-frontend/src/routes/rides.index.tsx b/orders-frontend/src/routes/rides.index.tsx
index 89a0256..d42acd5 100644
--- a/orders-frontend/src/routes/rides.index.tsx
+++ b/orders-frontend/src/routes/rides.index.tsx
@@ -1,6 +1,6 @@
-import {CustomerRidesPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { CustomerRidesPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/rides/")({
-    component: CustomerRidesPage,
+	component: CustomerRidesPage,
 });
diff --git a/orders-frontend/src/routes/rides.new.tsx b/orders-frontend/src/routes/rides.new.tsx
index 285e127..43122f7 100644
--- a/orders-frontend/src/routes/rides.new.tsx
+++ b/orders-frontend/src/routes/rides.new.tsx
@@ -1,6 +1,6 @@
-import {CustomerRideRequestPage} from "#/components/app/WorkspacePages";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { CustomerRideRequestPage } from "#/components/app/WorkspacePages";
 
 export const Route = createFileRoute("/rides/new")({
-    component: CustomerRideRequestPage,
+	component: CustomerRideRequestPage,
 });
diff --git a/orders-frontend/src/routes/rides.tsx b/orders-frontend/src/routes/rides.tsx
index 15ff6ae..bdfda84 100644
--- a/orders-frontend/src/routes/rides.tsx
+++ b/orders-frontend/src/routes/rides.tsx
@@ -1,5 +1,5 @@
-import {Outlet, createFileRoute} from "@tanstack/react-router";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/rides")({
-    component: Outlet,
+	component: Outlet,
 });
diff --git a/orders-frontend/src/types/api.ts b/orders-frontend/src/types/api.ts
index 54a8d8d..fbaec34 100644
--- a/orders-frontend/src/types/api.ts
+++ b/orders-frontend/src/types/api.ts
@@ -1,15 +1,15 @@
 export type ApiErrorResponse = {
-    error: string;
-    message: string;
-    details: unknown;
-    timestamp: string;
-    path: string;
+	error: string;
+	message: string;
+	details: unknown;
+	timestamp: string;
+	path: string;
 };
 
 export type PageResponse<T> = {
-    items: T[];
-    page: number;
-    size: number;
-    totalItems: number;
-    totalPages: number;
-};
\ No newline at end of file
+	items: T[];
+	page: number;
+	size: number;
+	totalItems: number;
+	totalPages: number;
+};
diff --git a/orders-frontend/src/types/auth.ts b/orders-frontend/src/types/auth.ts
index 6515845..9e1399b 100644
--- a/orders-frontend/src/types/auth.ts
+++ b/orders-frontend/src/types/auth.ts
@@ -1,17 +1,17 @@
 export type Role = "ADMIN" | "CUSTOMER" | "DRIVER";
 
 export type AuthUser = {
-    id: string;
-    username: string;
-    displayName: string;
-    role: Role;
+	id: string;
+	username: string;
+	displayName: string;
+	role: Role;
 };
 
 export type LoginRequest = {
-    username: string;
-    password: string;
+	username: string;
+	password: string;
 };
 
 export type RegisterRequest = LoginRequest & {
-    displayName: string;
+	displayName: string;
 };
diff --git a/orders-frontend/src/types/fare.ts b/orders-frontend/src/types/fare.ts
index 9ad31d3..856cca6 100644
--- a/orders-frontend/src/types/fare.ts
+++ b/orders-frontend/src/types/fare.ts
@@ -1,10 +1,10 @@
 export type FareCalculationResponse = {
-    distanceKm: number;
-    baseFare: number;
-    perKmRate: number;
-    surgeMultiplier: number;
-    minimumFare: number;
-    calculatedFare: number;
-    currency: string;
-    formula: string;
-};
\ No newline at end of file
+	distanceKm: number;
+	baseFare: number;
+	perKmRate: number;
+	surgeMultiplier: number;
+	minimumFare: number;
+	calculatedFare: number;
+	currency: string;
+	formula: string;
+};
diff --git a/orders-frontend/src/types/inventory.ts b/orders-frontend/src/types/inventory.ts
index 84c0bc5..4f356ff 100644
--- a/orders-frontend/src/types/inventory.ts
+++ b/orders-frontend/src/types/inventory.ts
@@ -1,21 +1,21 @@
 export type InventoryStatus = "IN_STOCK" | "LOW_STOCK" | "OUT_OF_STOCK";
 
 export type InventoryItem = {
-    productId: string;
-    productName: string;
-    sku: string;
-    availableQuantity: number;
-    reservedQuantity: number;
-    reorderLevel: number;
-    status: InventoryStatus;
-    updatedAt: string;
+	productId: string;
+	productName: string;
+	sku: string;
+	availableQuantity: number;
+	reservedQuantity: number;
+	reorderLevel: number;
+	status: InventoryStatus;
+	updatedAt: string;
 };
 
 export type InventoryResponse = {
-    items: InventoryItem[];
+	items: InventoryItem[];
 };
 
 export type LowStockInventoryResponse = {
-    threshold: number;
-    items: InventoryItem[];
-};
\ No newline at end of file
+	threshold: number;
+	items: InventoryItem[];
+};
diff --git a/orders-frontend/src/types/order.ts b/orders-frontend/src/types/order.ts
index b749a2b..aa3e4a3 100644
--- a/orders-frontend/src/types/order.ts
+++ b/orders-frontend/src/types/order.ts
@@ -1,58 +1,58 @@
 export type OrderStatus = "PENDING" | "SHIPPED" | "DELIVERED" | "CANCELLED";
 
 export type OrderItem = {
-    productId: string;
-    productName: string;
-    quantity: number;
-    unitPrice: number;
-    lineTotal: number;
+	productId: string;
+	productName: string;
+	quantity: number;
+	unitPrice: number;
+	lineTotal: number;
 };
 
 export type Order = {
-    id: string;
-    customerId: string | null;
-    customerName: string;
-    status: OrderStatus;
-    items: OrderItem[];
-    totalAmount: number;
-    currency: string;
-    createdAt: string;
-    cancelledAt: string | null;
+	id: string;
+	customerId: string | null;
+	customerName: string;
+	status: OrderStatus;
+	items: OrderItem[];
+	totalAmount: number;
+	currency: string;
+	createdAt: string;
+	cancelledAt: string | null;
 };
 
 export type OrderSummary = {
-    id: string;
-    customerId: string | null;
-    customerName: string;
-    status: OrderStatus;
-    totalAmount: number;
-    currency: string;
-    itemCount: number;
-    createdAt: string;
-    cancelledAt: string | null;
+	id: string;
+	customerId: string | null;
+	customerName: string;
+	status: OrderStatus;
+	totalAmount: number;
+	currency: string;
+	itemCount: number;
+	createdAt: string;
+	cancelledAt: string | null;
 };
 
 export type OrderFilters = {
-    status?: OrderStatus | "";
-    from?: string;
-    to?: string;
+	status?: OrderStatus | "";
+	from?: string;
+	to?: string;
 };
 
 export type CancelOrderResponse = {
-    id: string;
-    status: OrderStatus;
-    cancelledAt: string;
-    stockRolledBack: boolean;
+	id: string;
+	status: OrderStatus;
+	cancelledAt: string;
+	stockRolledBack: boolean;
 };
 
 export type CreateOrderRequest = {
-    items: {
-        productId: string;
-        quantity: number;
-    }[];
-    deliveryRide?: {
-        pickupLocation: string;
-        dropoffLocation: string;
-        distanceKm: number;
-    } | null;
+	items: {
+		productId: string;
+		quantity: number;
+	}[];
+	deliveryRide?: {
+		pickupLocation: string;
+		dropoffLocation: string;
+		distanceKm: number;
+	} | null;
 };
diff --git a/orders-frontend/src/types/payment.ts b/orders-frontend/src/types/payment.ts
new file mode 100644
index 0000000..6f29e84
--- /dev/null
+++ b/orders-frontend/src/types/payment.ts
@@ -0,0 +1,34 @@
+import type { CreateOrderRequest } from "#/types/order";
+
+export type CheckoutQuoteRequest = CreateOrderRequest;
+
+export type CheckoutQuote = {
+	productSubtotal: number;
+	rideFare: number;
+	grandTotal: number;
+	currency: string;
+	expiresAt: string;
+};
+
+export type PaystackInitializeRequest = CreateOrderRequest;
+
+export type PaystackInitializeResponse = {
+	authorizationUrl: string;
+	accessCode: string;
+	reference: string;
+	orderId: string;
+	rideId: string | null;
+	amount: number;
+	currency: string;
+	status: "PENDING" | "PAID" | "FAILED" | "ABANDONED" | "REFUNDED";
+};
+
+export type PaystackVerifyResponse = {
+	reference: string;
+	status: "PENDING" | "PAID" | "FAILED" | "ABANDONED" | "REFUNDED";
+	orderId: string;
+	rideId: string | null;
+	amount: number;
+	currency: string;
+	message: string;
+};
diff --git a/orders-frontend/src/types/product.ts b/orders-frontend/src/types/product.ts
index bf26fd9..7a4dd63 100644
--- a/orders-frontend/src/types/product.ts
+++ b/orders-frontend/src/types/product.ts
@@ -1,21 +1,21 @@
 export type Product = {
-    id: string;
-    name: string;
-    sku: string;
-    price: number;
-    currency: string;
-    active: boolean;
-    availableQuantity: number;
-    reorderLevel: number;
-    updatedAt: string;
+	id: string;
+	name: string;
+	sku: string;
+	price: number;
+	currency: string;
+	active: boolean;
+	availableQuantity: number;
+	reorderLevel: number;
+	updatedAt: string;
 };
 
 export type ProductRequest = {
-    name: string;
-    sku: string;
-    price: number;
-    currency: string;
-    active: boolean;
-    availableQuantity: number;
-    reorderLevel: number;
+	name: string;
+	sku: string;
+	price: number;
+	currency: string;
+	active: boolean;
+	availableQuantity: number;
+	reorderLevel: number;
 };
diff --git a/orders-frontend/src/types/ride.ts b/orders-frontend/src/types/ride.ts
index 2424669..7830106 100644
--- a/orders-frontend/src/types/ride.ts
+++ b/orders-frontend/src/types/ride.ts
@@ -1,27 +1,27 @@
 export type RideStatus = "REQUESTED" | "ACCEPTED" | "COMPLETED" | "CANCELLED";
 
 export type Ride = {
-    id: string;
-    orderId: string | null;
-    customerId: string;
-    customerName: string;
-    driverId: string | null;
-    driverName: string | null;
-    pickupLocation: string;
-    dropoffLocation: string;
-    distanceKm: number;
-    fareAmount: number | null;
-    currency: string;
-    status: RideStatus;
-    requestedAt: string;
-    acceptedAt: string | null;
-    completedAt: string | null;
-    cancelledAt: string | null;
+	id: string;
+	orderId: string | null;
+	customerId: string;
+	customerName: string;
+	driverId: string | null;
+	driverName: string | null;
+	pickupLocation: string;
+	dropoffLocation: string;
+	distanceKm: number;
+	fareAmount: number | null;
+	currency: string;
+	status: RideStatus;
+	requestedAt: string;
+	acceptedAt: string | null;
+	completedAt: string | null;
+	cancelledAt: string | null;
 };
 
 export type CreateRideRequest = {
-    orderId: string;
-    pickupLocation: string;
-    dropoffLocation: string;
-    distanceKm: number;
+	orderId: string;
+	pickupLocation: string;
+	dropoffLocation: string;
+	distanceKm: number;
 };
diff --git a/orders-frontend/src/types/user.ts b/orders-frontend/src/types/user.ts
index 7951a5c..bd4b692 100644
--- a/orders-frontend/src/types/user.ts
+++ b/orders-frontend/src/types/user.ts
@@ -1,18 +1,18 @@
-import type {Role} from "#/types/auth";
+import type { Role } from "#/types/auth";
 
 export type UserSummary = {
-    id: string;
-    username: string;
-    displayName: string;
-    role: Role;
-    enabled: boolean;
-    createdAt: string;
+	id: string;
+	username: string;
+	displayName: string;
+	role: Role;
+	enabled: boolean;
+	createdAt: string;
 };
 
 export type AdminUserRequest = {
-    username: string;
-    displayName: string;
-    password?: string;
-    role: Role;
-    enabled: boolean;
+	username: string;
+	displayName: string;
+	password?: string;
+	role: Role;
+	enabled: boolean;
 };
diff --git a/orders-frontend/vite.config.ts b/orders-frontend/vite.config.ts
index ef3e851..049c0ee 100644
--- a/orders-frontend/vite.config.ts
+++ b/orders-frontend/vite.config.ts
@@ -1,24 +1,21 @@
-import { defineConfig } from 'vite'
-import { devtools } from '@tanstack/devtools-vite'
+import babel from "@rolldown/plugin-babel";
+import tailwindcss from "@tailwindcss/vite";
+import { devtools } from "@tanstack/devtools-vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact, { reactCompilerPreset } from "@vitejs/plugin-react";
+import { nitro } from "nitro/vite";
+import { defineConfig } from "vite";
 
-import { tanstackStart } from '@tanstack/react-start/plugin/vite'
-
-import viteReact, { reactCompilerPreset } from '@vitejs/plugin-react'
-import babel from '@rolldown/plugin-babel'
-import tailwindcss from '@tailwindcss/vite'
-import { nitro } from 'nitro/vite'
-
-// @ts-ignore
 const config = defineConfig({
-  plugins: [
-    devtools(),
-    nitro({rollupConfig: {external: [/^@sentry\//]}}),
-    tailwindcss(),
-    tanstackStart(),
-    viteReact(),
-    babel({presets: [reactCompilerPreset()]}),
-  ],
-  resolve: {tsconfigPaths: true},
-})
+	plugins: [
+		devtools(),
+		nitro({ rollupConfig: { external: [/^@sentry\//] } }),
+		tailwindcss(),
+		tanstackStart(),
+		viteReact(),
+		babel({ presets: [reactCompilerPreset()] }),
+	],
+	resolve: { tsconfigPaths: true },
+});
 
-export default config
+export default config;
diff --git a/render.yaml b/render.yaml
index 1d43d10..c1b48d9 100644
--- a/render.yaml
+++ b/render.yaml
@@ -15,6 +15,14 @@ services:
         sync: false
       - key: APP_CORS_ALLOWED_ORIGINS
         value: https://cymelle-web.onrender.com
+      - key: PAYSTACK_SECRET_KEY
+        sync: false
+      - key: PAYSTACK_PUBLIC_KEY
+        sync: false
+      - key: PAYSTACK_CALLBACK_URL
+        value: https://cymelle-web.onrender.com/payments/paystack/callback
+      - key: PAYSTACK_WEBHOOK_SECRET
+        sync: false
 
   - type: web
     name: cymelle-web