Merge pull request #116 from Tria-plc/freight/feat/payment

freight/feat/payment

apps/edr-freight-api/src/config/database.config.ts

@@ -17,7 +17,6 @@ import {
   PositionType,
   Position,
   Project,
-  UnitSetting,
   GlobalUnitConfiguration,
   Unit,
   EmployeeSignature,
@@ -64,7 +63,6 @@ const iamEntities = [
   PositionType,
   Position,
   Project,
-  UnitSetting,
   GlobalUnitConfiguration,
   Unit,
   EmployeeSignature,
@@ -98,10 +96,8 @@ const iamMigrationsGlob = join(
 );
 const freightMigrationsGlob = join(__dirname, "../migrations/*.js");
 
-export default registerAs(
+export default registerAs("database", (): TypeOrmModuleOptions => {
-  "database",
+  return {
-  (): TypeOrmModuleOptions => {
-    return {
     type: "postgres",
     host: process.env.DB_HOST ?? "localhost",
     port: parseInt(process.env.DB_PORT ?? "5433", 10),
@@ -124,5 +120,4 @@ export default registerAs(
     synchronize: false,
     logging: process.env.NODE_ENV === "development",
   };
-  },
+});
-);

apps/edr-freight-api/src/modules/payment/payment.controller.ts

@@ -35,7 +35,7 @@ export class PaymentController {
     // }
 
     @Post("/bookings/check-payment/:orderId")
-    checkPayment(@Param("orderId", ParseUUIDPipe) orderId: string) {
+    checkPayment(@Param("orderId") orderId: string) {
         return this.paymentService.checkStatusAndUpdate(orderId)
     }
 

apps/edr-freight-api/src/modules/payment/payment.service.ts

@@ -1,162 +1,189 @@
-import { BadRequestException, Injectable, InternalServerErrorException, NotFoundException } from "@nestjs/common";
+import {
+  BadRequestException,
+  Injectable,
+  InternalServerErrorException,
+  NotFoundException,
+} from "@nestjs/common";
 import { DataSource, QueryRunner } from "typeorm";
 import { PaymentEntity } from "./entities/payment.entity";
 import { PaymentStrategy } from "./strategies/payment.strategy";
 import { PaymentTelebirrStrategy } from "./strategies/payment.telebirr.strategy";
 import { PaymentRepository } from "./payment.repository";
 import { ClientAction, PaymentPlatform } from "./strategies/payments.types";
-import * as crypto from 'crypto';
+import * as crypto from "crypto";
 
-import * as fs from 'fs';
+import * as fs from "fs";
-import * as path from 'path';
+import * as path from "path";
-import * as Handlebars from 'handlebars';
+import * as Handlebars from "handlebars";
 import { ConfigService } from "@nestjs/config";
 import { Booking } from "../bookings/entities/booking.entity";
 
-
+type PaymentMethod = PaymentEntity["method"];
-type PaymentMethod = PaymentEntity["method"]
+type CurrencyType = PaymentEntity["currency"];
-type CurrencyType = PaymentEntity["currency"]
 
 @Injectable()
 export class PaymentService {
-    private strategies: Map<PaymentMethod, PaymentStrategy>;
+  private strategies: Map<PaymentMethod, PaymentStrategy>;
 
-    constructor(
+  constructor(
-        private readonly configService: ConfigService,
+    private readonly configService: ConfigService,
-        private readonly datasource: DataSource,
+    private readonly datasource: DataSource,
-        private readonly paymentRepo: PaymentRepository,
+    private readonly paymentRepo: PaymentRepository,
-        private readonly telebirrPaymentStategy: PaymentTelebirrStrategy) {
+    private readonly telebirrPaymentStategy: PaymentTelebirrStrategy,
-        this.strategies = new Map([
+  ) {
-            ["telebirr", this.telebirrPaymentStategy as PaymentStrategy]
+    this.strategies = new Map([
-        ])
+      ["telebirr", this.telebirrPaymentStategy as PaymentStrategy],
+    ]);
+  }
+
+  async pay(
+    amount: number,
+    currency: CurrencyType,
+    method: PaymentMethod,
+    reason: string,
+    type: PaymentEntity["type"],
+    cb: (
+      qr: QueryRunner,
+    ) => Promise<{ id: string; type: PaymentEntity["type"] }>,
+    payform: PaymentPlatform = "web",
+  ): Promise<{
+    refId: string;
+    clientAction: ClientAction;
+    status: PaymentEntity["status"];
+    paidAt?: string;
+    failureCode?: string;
+    failureMessage?: string;
+  }> {
+    const strategy = this.strategies.get(method);
+    if (!strategy) {
+      throw new NotFoundException("strategy not found");
     }
 
-    async pay(amount: number, currency: CurrencyType, method: PaymentMethod, reason: string, type: PaymentEntity["type"], cb: (qr: QueryRunner) => Promise<{ id: string, type: PaymentEntity["type"] }>, payform: PaymentPlatform = "web"): Promise<{
+    const orderId = `${Date.now()}${crypto.randomBytes(4).toString("hex")}`; //todo: make it dynamic
-        refId: string,
+    let redirectUrl: string;
-        clientAction: ClientAction,
+    switch (type) {
-        status: PaymentEntity["status"],
+      case "booking":
-        paidAt?: string,
+        const url = this.configService.get<string>(
-        failureCode?: string,
+          "TELEBIRR_SUCCESS_REDIRECT_BASE_URL",
-        failureMessage?: string,
+        );
-    }> {
+        redirectUrl = `${url}/${orderId}`;
+        break;
+    }
 
+    const paymentResp = await strategy.pay({
+      redirectUrl,
+      amountMinor: amount,
+      currency: currency,
+      merchantOrderId: orderId,
+      platform: payform,
+    });
 
-        const strategy = this.strategies.get(method)
+    const queryRunner = this.datasource.createQueryRunner();
-        if (!strategy) {
+    await queryRunner.connect();
-            throw new NotFoundException("strategy not found")
+    await queryRunner.startTransaction();
-        }
 
-        const orderId = `${Date.now()}${crypto.randomBytes(4).toString('hex')}` //todo: make it dynamic
+    console.log(paymentResp.expiresAt);
-        let redirectUrl: string;
+    try {
-        switch (type) {
+      const resp = await cb(queryRunner);
-            case "booking":
+      const payment = await this.paymentRepo.createTr(queryRunner, {
-                const url = this.configService.get<string>("TELEBIRR_SUCCESS_REDIRECT_BASE_URL")
+        amount,
-                redirectUrl = `${url}/check-status/${orderId}`
+        currency,
-                break;
+        method,
-        }
+        refId: resp.id,
+        type: resp.type,
+        merchantOrderId: orderId,
+        rawInitiation: paymentResp.rawInitiation,
+        clientAction: paymentResp.clientAction,
+        expiresAt: paymentResp.expiresAt,
+        reason,
+      });
+      await queryRunner.commitTransaction();
+      return {
+        refId: payment.refId,
+        clientAction: paymentResp.clientAction,
+        status: payment.status,
+        paidAt: payment.paidAt?.toISOString(),
+        failureCode: payment.failerCode ?? undefined,
+        failureMessage: payment.failureMessage ?? undefined,
+      };
+    } catch (err) {
+      await queryRunner.rollbackTransaction();
+      throw new Error("payment failed");
+    } finally {
+      await queryRunner.release();
+    }
+  }
 
-        const paymentResp = await strategy.pay({
+  async getActivePaymentByRefIdAndMethod(
-            redirectUrl,
+    refId: string,
-            amountMinor: amount,
+    method: PaymentEntity["method"],
-            currency: currency,
+  ): Promise<PaymentEntity | null> {
-            merchantOrderId: orderId,
+    return this.paymentRepo.getActivePaymentByRefIdAndMethod(refId, method);
-            platform: payform,
+  }
+
+  async genReceiptHtml(orderId: string) {
+    const payment = await this.paymentRepo.findOneBy({
+      merchantOrderId: orderId,
+      status: "success",
+    });
+    if (!payment) {
+      throw new BadRequestException();
+    }
+
+    const filePath = path.join(__dirname, "templates", "receipt.hbs");
+    if (!fs.existsSync(filePath)) {
+      throw new InternalServerErrorException();
+    }
+    const source = fs.readFileSync(filePath, "utf8");
+    const template = Handlebars.compile(source);
+
+    const html = template({
+      vendorName: "Ethio Djibouti Railway Ticket Booking",
+      vendorAddress: "Addis Ababa",
+      receiptDate: payment.paidAt,
+      paymentMethod: payment?.method,
+      subtotal: payment?.amount.toString(),
+      total: payment?.amount.toString(),
+      currency: payment?.currency,
+      reason: payment?.reason,
+    });
+
+    return html;
+  }
+
+  async checkStatusAndUpdate(orderId: string) {
+    const resp = await this.paymentRepo.findOneBy({ merchantOrderId: orderId });
+    if (!resp) {
+      throw new NotFoundException("order id not found");
+    }
+
+    try {
+      const result = await this.telebirrPaymentStategy.queryStatus(
+        resp.merchantOrderId,
+      );
+      const bizContent = result.rawResponse.biz_content as {
+        order_status: string;
+      };
+
+      const ordersStatus = bizContent.order_status;
+      if (ordersStatus == "PAY_SUCCESS") {
+        await this.datasource.transaction(async (mg) => {
+          await mg.update(Booking, { id: resp.refId }, { status: "PAID" });
+          await mg.update(PaymentEntity, { id: resp.id }, { status: "success" });
         });
-
+      }
-        const queryRunner = this.datasource.createQueryRunner()
+      return {
-        await queryRunner.connect()
+        status: result.status,
-        await queryRunner.startTransaction()
+      };
-
+    } catch {
-        console.log(paymentResp.expiresAt)
+      // Telebirr API unavailable — fall back to current DB payment status
-        try {
+      const dbStatus =
-            const resp = await cb(queryRunner)
+        resp.status === "success"
-            const payment = await this.paymentRepo.createTr(queryRunner, {
+          ? "success"
-                amount,
+          : resp.status === "failed"
-                currency,
+            ? "failed"
-                method,
+            : "processing";
-                refId: resp.id,
+      return { status: dbStatus };
-                type: resp.type,
-                merchantOrderId: orderId,
-                rawInitiation: paymentResp.rawInitiation,
-                clientAction: paymentResp.clientAction,
-                expiresAt: paymentResp.expiresAt,
-                reason
-
-            })
-            await queryRunner.commitTransaction()
-            return {
-                refId: payment.refId,
-                clientAction: paymentResp.clientAction,
-                status: payment.status,
-                paidAt: payment.paidAt?.toISOString(),
-                failureCode: payment.failerCode ?? undefined,
-                failureMessage: payment.failureMessage ?? undefined,
-            }
-        } catch (err) {
-            await queryRunner.rollbackTransaction()
-            throw new Error("payment failed")
-        } finally {
-            await queryRunner.release()
-        }
-
     }
-
+  }
-
-    async getActivePaymentByRefIdAndMethod(refId: string, method: PaymentEntity["method"]): Promise<PaymentEntity | null> {
-        return this.paymentRepo.getActivePaymentByRefIdAndMethod(refId, method)
-    }
-
-    async genReceiptHtml(orderId: string) {
-        const payment = await this.paymentRepo.findOneBy({
-            merchantOrderId: orderId,
-            status: "success"
-        })
-        if (!payment) {
-            throw new BadRequestException()
-        }
-
-        const filePath = path.join(__dirname, "templates", "receipt.hbs");
-        if (!fs.existsSync(filePath)) {
-            throw new InternalServerErrorException()
-        }
-        const source = fs.readFileSync(filePath, "utf8");
-        const template = Handlebars.compile(source);
-
-        const html = template({
-            vendorName: "Ethio Djibouti Railway Ticket Booking",
-            vendorAddress: "Addis Ababa",
-            receiptDate: payment.paidAt,
-            paymentMethod: payment?.method,
-            subtotal: payment?.amount.toString(),
-            total: payment?.amount.toString(),
-            currency: payment?.currency,
-            reason: payment?.reason
-        });
-
-        return html;
-    }
-
-    async checkStatusAndUpdate(orderId: string) {
-        const resp = await this.paymentRepo.findOneBy({ merchantOrderId: orderId })
-        if (!resp) {
-            throw new NotFoundException("order id not found")
-        }
-        const result = await this.telebirrPaymentStategy.queryStatus(resp.merchantOrderId)
-        const bizContent = result.rawResponse.biz_content as {
-            order_status: string;
-        };
-
-        const ordersStatus = bizContent.order_status
-        if (ordersStatus == "PAY_SUCCESS") {
-            await this.datasource.transaction(async (mg) => {
-                await mg.update(Booking, { id: resp.refId }, { status: "PAID" })
-                await mg.update(PaymentEntity, { id: resp.id }, { status: "success" })
-            })
-        }
-        return {
-            status: result.status
-        }
-    }
-
 }
-

apps/edr-freight-web/portal/src/App.tsx

@@ -32,6 +32,8 @@ import MyBookings from "./pages/bookings/MyBookings";
 import BookingContractPage from "./pages/bookings/BookingContractPage";
 import BookingDetailPage from "./pages/bookings/BookingDetailPage";
 import NewBookingPage from "./pages/bookings/NewBookingPage";
+import EditBookingPage from "./pages/bookings/EditBookingPage";
+import CheckPaymentPage from "./pages/payments/CheckPaymentPage";
 import TrackingPage from "./pages/tracking/TrackingPage";
 import BillingPage from "./pages/billing/BillingPage";
 import { useEffect } from "react";
@@ -51,7 +53,7 @@ const App = () => {
   const { user, isPending, logout, customer, customerQuery } = useAuth();
 
   useEffect(() => {
-    if (isPending) return;
+    if (isPending || customerQuery.isPending) return;
     const isInProtectedRoutes = sidebarItems.find((item) =>
       location.pathname.startsWith(item.href),
     );
@@ -63,7 +65,6 @@ const App = () => {
 
     if (user && location.pathname === "/") navigate("/portal");
     else if (!customer && !!isInProtectedRoutes) navigate("/onboarding");
-    else if (customer && !isInProtectedRoutes) return navigate("/portal");
   }, [user, location, customer]);
 
   if (isPending) {
@@ -86,6 +87,10 @@ const App = () => {
         <Route path="/otp" element={<VerificationOtpPage />} />
         <Route path="/set-password" element={<SetPasswordPage />} />
         <Route path="/onboarding" element={<OnboardingPage />} />
+        <Route
+          path="/booking/check-status/:orderId"
+          element={<CheckPaymentPage />}
+        />
       </Route>
       <Route
         element={
@@ -106,14 +111,18 @@ const App = () => {
         <Route path="/portal" element={<MyPortalPage />} />
         <Route path="/bookings" element={<MyBookings />} />
         <Route path="/bookings/new" element={<NewBookingPage />} />
+        <Route path="/bookings/:id/edit" element={<EditBookingPage />} />
         <Route path="/bookings/:id" element={<BookingDetailPage />} />
-        <Route path="/bookings/:id/contract" element={<BookingContractPage />} />
+        <Route
+          path="/bookings/:id/contract"
+          element={<BookingContractPage />}
+        />
         <Route path="/tracking" element={<TrackingPage />} />
         <Route path="/billing" element={<BillingPage />} />
         <Route path="/profile" element={<ProfilePage />} />
         <Route path="/settings" element={<SettingsPage />} />
       </Route>
-      <Route path="*" element={<Navigate to="/" replace />} />
+      {/* <Route path="*" element={<Navigate to="/" replace />} /> */}
     </Routes>
   );
 };

apps/edr-freight-web/portal/src/constants/URLS.ts

@@ -10,7 +10,7 @@ export const URL_CONSTANTS = {
   USERS: {
     BASE: "/users",
     BY_ID: (id: string | number) => `/users/${id}`,
-    SIGN_UP: "/api/auth/signup",
+    SIGN_UP: "/api/auth/signup-with-pwd",
     SET_PASSWORD: "/api/auth/set-password",
     ME: "/api/auth/me",
     GENERATE_VERIFICATION_CODE: "/users/generate-verification-code",

apps/edr-freight-web/portal/src/pages/SettingsPage.tsx

@@ -1,41 +1,20 @@
-import { useState, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
 import {
   Building2,
   User,
   Briefcase,
   UserCheck,
   FileCheck,
-  Loader2,
-  Save,
-  UploadCloud,
-  CheckCircle2,
-  XCircle,
 } from "lucide-react";
 import { api } from "@/services/api";
-import { companiesService } from "@/services/companies.service";
+import { Badge } from "@edr/ui-common";
-import PhoneInput from "@/components/auth/PhoneInput";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  Button,
-  Input,
-  Field,
-  FieldLabel,
-  FieldError,
-  FieldGroup,
-  SmartFileInput,
-  Badge,
-} from "@edr/ui-common";
 import { cn } from "@/lib/utils";
+import TabCompanyProfile from "./settings/TabCompanyProfile";
+import TabContactPerson from "./settings/TabContactPerson";
+import TabGeneralManager from "./settings/TabGeneralManager";
+import TabPowerOfAttorney from "./settings/TabPowerOfAttorney";
+import TabDocuments from "./settings/TabDocuments";
 
 type SettingsTab =
   | "company"
@@ -44,32 +23,6 @@ type SettingsTab =
   | "poa"
   | "documents";
 
-const settingsSchema = z.object({
-  companyName: z.string().min(1, "Company name is required"),
-  companyEmail: z.string().email("Invalid email address"),
-  companyPhone: z.string().min(1, "Company phone is required"),
-  companyPhoneCountryCode: z.string().min(1, "Country code is required"),
-  companyLocation: z.string().min(1, "Location is required"),
-  companyAddress: z.string().min(1, "Address is required"),
-  tinNumber: z.string().length(10, "TIN must be exactly 10 digits"),
-  fanNumber: z.string().length(16, "FAN must be exactly 16 digits"),
-  contactPersonName: z.string().min(1, "Contact person name is required"),
-  contactPersonPhone: z.string().min(1, "Contact person phone is required"),
-  contactPersonPhoneCountryCode: z.string().min(1, "Country code is required"),
-  generalManagerName: z.string().min(1, "GM name is required"),
-  generalManagerEmail: z.string().email("Invalid GM email"),
-  generalManagerPhone: z.string().min(1, "GM phone is required"),
-  generalManagerPhoneCountryCode: z.string().min(1, "Country code is required"),
-  poaName: z.string().optional(),
-  poaEmail: z.string().optional(),
-  poaPhone: z.string().optional(),
-  poaPhoneCountryCode: z.string().optional(),
-  poaLocation: z.string().optional(),
-  poaAddress: z.string().optional(),
-});
-
-type FormData = z.infer<typeof settingsSchema>;
-
 const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
   { id: "company", label: "Company Profile", icon: <Building2 className="size-4" /> },
   { id: "contact", label: "Contact Person", icon: <User className="size-4" /> },
@@ -78,15 +31,7 @@ const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
   { id: "documents", label: "Documents", icon: <FileCheck className="size-4" /> },
 ];
 
-function splitPhone(fullPhone?: string | null): { code: string; number: string } {
-  if (!fullPhone) return { code: "+251", number: "" };
-  const match = fullPhone.match(/^(\+\d{1,3})(.*)$/);
-  if (match) return { code: match[1], number: match[2] };
-  return { code: "+251", number: fullPhone };
-}
-
 export default function SettingsPage() {
-  const queryClient = useQueryClient();
   const [searchParams, setSearchParams] = useSearchParams();
   const tab = (searchParams.get("tab") as SettingsTab) || "company";
   const setTab = (t: SettingsTab) => {
@@ -96,130 +41,13 @@ export default function SettingsPage() {
       return next;
     }, { replace: true });
   };
-  const [documentFiles, setDocumentFiles] = useState<
-    Record<string, File | File[] | null>
-  >({});
 
   const profileQuery = useQuery(
     api.companies.getProfile.queryOptions(),
   );
 
-  const docSettingQuery = useQuery(
-    api.fileUploadSettings.getByCode.queryOptions({
-      input: { code: "customer_documents" },
-      enabled: tab === "documents",
-    }),
-  );
-
   const profile = profileQuery.data;
 
-  const defaultValues = useMemo((): FormData => {
-    if (!profile) {
-      return {
-        companyName: "",
-        companyEmail: "",
-        companyPhone: "",
-        companyPhoneCountryCode: "+251",
-        companyLocation: "",
-        companyAddress: "",
-        tinNumber: "",
-        fanNumber: "",
-        contactPersonName: "",
-        contactPersonPhone: "",
-        contactPersonPhoneCountryCode: "+251",
-        generalManagerName: "",
-        generalManagerEmail: "",
-        generalManagerPhone: "",
-        generalManagerPhoneCountryCode: "+251",
-        poaName: "",
-        poaEmail: "",
-        poaPhone: "",
-        poaPhoneCountryCode: "+251",
-        poaLocation: "",
-        poaAddress: "",
-      };
-    }
-    const contactPhone = splitPhone(profile.contactPersonPhone);
-    const gmPhone = splitPhone(profile.generalManagerPhone);
-    const poaPhone = splitPhone(profile.poaPhone);
-    return {
-      companyName: profile.companyName,
-      companyEmail: profile.companyEmail ?? "",
-      companyPhone: profile.companyPhone ?? "",
-      companyPhoneCountryCode: splitPhone(profile.companyPhone).code,
-      companyLocation: profile.companyLocation,
-      companyAddress: profile.companyAddress ?? "",
-      tinNumber: profile.tinNumber,
-      fanNumber: profile.fanNumber ?? "",
-      contactPersonName: profile.contactPersonName ?? "",
-      contactPersonPhone: contactPhone.number,
-      contactPersonPhoneCountryCode: contactPhone.code,
-      generalManagerName: profile.generalManagerName ?? "",
-      generalManagerEmail: profile.generalManagerEmail ?? "",
-      generalManagerPhone: gmPhone.number,
-      generalManagerPhoneCountryCode: gmPhone.code,
-      poaName: profile.poaName ?? "",
-      poaEmail: profile.poaEmail ?? "",
-      poaPhone: poaPhone.number,
-      poaPhoneCountryCode: poaPhone.code,
-      poaLocation: profile.poaLocation ?? "",
-      poaAddress: profile.poaAddress ?? "",
-    };
-  }, [profile]);
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isDirty },
-  } = useForm<FormData>({
-    resolver: zodResolver(settingsSchema),
-    values: defaultValues,
-  });
-
-  const updateMutation = useMutation({
-    mutationFn: (data: FormData) =>
-      api.companies.updateProfile.call({
-        companyName: data.companyName,
-        companyEmail: data.companyEmail,
-        companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`,
-        companyLocation: data.companyLocation,
-        companyAddress: data.companyAddress,
-        tin: data.tinNumber,
-        fanNumber: data.fanNumber,
-        contactPersonName: data.contactPersonName,
-        contactPersonPhone: `${data.contactPersonPhoneCountryCode}${data.contactPersonPhone}`,
-        generalManagerName: data.generalManagerName,
-        generalManagerEmail: data.generalManagerEmail,
-        generalManagerPhone: `${data.generalManagerPhoneCountryCode}${data.generalManagerPhone}`,
-        poaName: data.poaName || undefined,
-        poaPhone:
-          data.poaPhone && data.poaPhoneCountryCode
-            ? `${data.poaPhoneCountryCode}${data.poaPhone}`
-            : undefined,
-        poaEmail: data.poaEmail || undefined,
-        poaLocation: data.poaLocation || undefined,
-        poaAddress: data.poaAddress || undefined,
-      }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: api.companies.getProfile.queryKey(),
-      });
-    },
-  });
-
-  const docUploadMutation = useMutation({
-    mutationFn: (files: Record<string, File | File[] | null>) =>
-      companiesService.uploadDocuments(profile!.companyId, files),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: api.companies.getProfile.queryKey(),
-      });
-    },
-  });
-
-  const isPending = profileQuery.isPending || updateMutation.isPending || docUploadMutation.isPending;
-
   if (profileQuery.isPending) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -236,10 +64,6 @@ export default function SettingsPage() {
     );
   }
 
-  const onSubmit = (data: FormData) => {
-    updateMutation.mutate(data);
-  };
-
   return (
     <div className="px-4 py-8">
       <div className="mb-8 flex items-center justify-between">
@@ -276,342 +100,11 @@ export default function SettingsPage() {
         ))}
       </div>
 
-      <form onSubmit={handleSubmit(onSubmit)}>
+      {tab === "company" && <TabCompanyProfile profile={profile} />}
-        <Card>
+      {tab === "contact" && <TabContactPerson profile={profile} />}
-          <CardHeader>
+      {tab === "gm" && <TabGeneralManager profile={profile} />}
-            <CardTitle className="flex items-center gap-2">
+      {tab === "poa" && <TabPowerOfAttorney profile={profile} />}
-              {tab === "company" && <><Building2 className="size-5 text-primary" /> Company Profile</>}
+      {tab === "documents" && <TabDocuments profile={profile} />}
-              {tab === "contact" && <><User className="size-5 text-primary" /> Contact Person</>}
-              {tab === "gm" && <><Briefcase className="size-5 text-primary" /> General Manager</>}
-              {tab === "poa" && <><UserCheck className="size-5 text-accent" /> Power of Attorney</>}
-              {tab === "documents" && <><FileCheck className="size-5 text-primary" /> Documents</>}
-            </CardTitle>
-            <CardDescription>
-              {tab === "company" && "Edit your company registration details"}
-              {tab === "contact" && "Manage the primary contact person for your account"}
-              {tab === "gm" && "Manage the general manager information"}
-              {tab === "poa" && "Power of Attorney details are optional"}
-              {tab === "documents" && "Upload and manage required business documents"}
-            </CardDescription>
-          </CardHeader>
-
-          <CardContent>
-            <FieldGroup className="gap-4">
-              {/* Company Profile Tab */}
-              {tab === "company" && (
-                <>
-                  <Field data-invalid={Boolean(errors.companyName)}>
-                    <FieldLabel>Company Name</FieldLabel>
-                    <Input
-                      placeholder="Global Logistics Ltd"
-                      aria-invalid={Boolean(errors.companyName)}
-                      {...register("companyName")}
-                    />
-                    <FieldError errors={[errors.companyName]} />
-                  </Field>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <Field data-invalid={Boolean(errors.companyEmail)}>
-                      <FieldLabel>Company Email</FieldLabel>
-                      <Input
-                        type="email"
-                        placeholder="ops@company.com"
-                        aria-invalid={Boolean(errors.companyEmail)}
-                        {...register("companyEmail")}
-                      />
-                      <FieldError errors={[errors.companyEmail]} />
-                    </Field>
-
-                    <PhoneInput
-                      countryCode={{ ...register("companyPhoneCountryCode") }}
-                      phone={{
-                        ...register("companyPhone"),
-                        placeholder: "912345678",
-                      }}
-                      countryCodeError={errors.companyPhoneCountryCode}
-                      phoneError={errors.companyPhone}
-                      label="Company Phone"
-                    />
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <Field data-invalid={Boolean(errors.companyLocation)}>
-                      <FieldLabel>Location</FieldLabel>
-                      <Input
-                        placeholder="Addis Ababa, Ethiopia"
-                        aria-invalid={Boolean(errors.companyLocation)}
-                        {...register("companyLocation")}
-                      />
-                      <FieldError errors={[errors.companyLocation]} />
-                    </Field>
-
-                    <Field data-invalid={Boolean(errors.companyAddress)}>
-                      <FieldLabel>Address</FieldLabel>
-                      <Input
-                        placeholder="Bole Subcity, Woreda 03"
-                        aria-invalid={Boolean(errors.companyAddress)}
-                        {...register("companyAddress")}
-                      />
-                      <FieldError errors={[errors.companyAddress]} />
-                    </Field>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <Field data-invalid={Boolean(errors.tinNumber)}>
-                      <FieldLabel>TIN Number (10 digits)</FieldLabel>
-                      <Input
-                        placeholder="1234567890"
-                        maxLength={10}
-                        aria-invalid={Boolean(errors.tinNumber)}
-                        {...register("tinNumber")}
-                      />
-                      <FieldError errors={[errors.tinNumber]} />
-                    </Field>
-
-                    <Field data-invalid={Boolean(errors.fanNumber)}>
-                      <FieldLabel>FAN Number (16 digits)</FieldLabel>
-                      <Input
-                        placeholder="1234567890123456"
-                        maxLength={16}
-                        aria-invalid={Boolean(errors.fanNumber)}
-                        {...register("fanNumber")}
-                      />
-                      <FieldError errors={[errors.fanNumber]} />
-                    </Field>
-                  </div>
-                </>
-              )}
-
-              {/* Contact Person Tab */}
-              {tab === "contact" && (
-                <>
-                  <Field data-invalid={Boolean(errors.contactPersonName)}>
-                    <FieldLabel>Full Name</FieldLabel>
-                    <Input
-                      placeholder="Jane Smith"
-                      aria-invalid={Boolean(errors.contactPersonName)}
-                      {...register("contactPersonName")}
-                    />
-                    <FieldError errors={[errors.contactPersonName]} />
-                  </Field>
-
-                  <PhoneInput
-                    countryCode={{ ...register("contactPersonPhoneCountryCode") }}
-                    phone={{
-                      ...register("contactPersonPhone"),
-                      placeholder: "912345678",
-                    }}
-                    countryCodeError={errors.contactPersonPhoneCountryCode}
-                    phoneError={errors.contactPersonPhone}
-                    label="Phone Number"
-                  />
-                </>
-              )}
-
-              {/* General Manager Tab */}
-              {tab === "gm" && (
-                <>
-                  <Field data-invalid={Boolean(errors.generalManagerName)}>
-                    <FieldLabel>Full Name</FieldLabel>
-                    <Input
-                      placeholder="Abebe Bikila"
-                      aria-invalid={Boolean(errors.generalManagerName)}
-                      {...register("generalManagerName")}
-                    />
-                    <FieldError errors={[errors.generalManagerName]} />
-                  </Field>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <Field data-invalid={Boolean(errors.generalManagerEmail)}>
-                      <FieldLabel>Email Address</FieldLabel>
-                      <Input
-                        type="email"
-                        placeholder="gm@company.com"
-                        aria-invalid={Boolean(errors.generalManagerEmail)}
-                        {...register("generalManagerEmail")}
-                      />
-                      <FieldError errors={[errors.generalManagerEmail]} />
-                    </Field>
-
-                    <PhoneInput
-                      countryCode={{ ...register("generalManagerPhoneCountryCode") }}
-                      phone={{
-                        ...register("generalManagerPhone"),
-                        placeholder: "912345678",
-                      }}
-                      countryCodeError={errors.generalManagerPhoneCountryCode}
-                      phoneError={errors.generalManagerPhone}
-                      label="Phone Number"
-                    />
-                  </div>
-                </>
-              )}
-
-              {/* Power of Attorney Tab */}
-              {tab === "poa" && (
-                <>
-                  <p className="text-sm text-muted-foreground">
-                    Power of Attorney details are optional. Fill them in if you have
-                    an authorized representative, or leave blank.
-                  </p>
-
-                  <Field data-invalid={Boolean(errors.poaName)}>
-                    <FieldLabel>PoA Full Name</FieldLabel>
-                    <Input
-                      placeholder="Authorized Representative Name"
-                      aria-invalid={Boolean(errors.poaName)}
-                      {...register("poaName")}
-                    />
-                    <FieldError errors={[errors.poaName]} />
-                  </Field>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <Field data-invalid={Boolean(errors.poaEmail)}>
-                      <FieldLabel>PoA Email</FieldLabel>
-                      <Input
-                        type="email"
-                        placeholder="poa@company.com"
-                        aria-invalid={Boolean(errors.poaEmail)}
-                        {...register("poaEmail")}
-                      />
-                      <FieldError errors={[errors.poaEmail]} />
-                    </Field>
-
-                    <PhoneInput
-                      countryCode={{ ...register("poaPhoneCountryCode") }}
-                      phone={{ ...register("poaPhone"), placeholder: "912345678" }}
-                      label="PoA Phone"
-                      countryCodeError={errors.poaPhoneCountryCode}
-                      phoneError={errors.poaPhone}
-                    />
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <Field data-invalid={Boolean(errors.poaLocation)}>
-                      <FieldLabel>PoA Location</FieldLabel>
-                      <Input
-                        placeholder="City, Country"
-                        aria-invalid={Boolean(errors.poaLocation)}
-                        {...register("poaLocation")}
-                      />
-                      <FieldError errors={[errors.poaLocation]} />
-                    </Field>
-
-                    <Field data-invalid={Boolean(errors.poaAddress)}>
-                      <FieldLabel>PoA Address</FieldLabel>
-                      <Input
-                        placeholder="Full Address"
-                        aria-invalid={Boolean(errors.poaAddress)}
-                        {...register("poaAddress")}
-                      />
-                      <FieldError errors={[errors.poaAddress]} />
-                    </Field>
-                  </div>
-                </>
-              )}
-
-              {/* Documents Tab */}
-              {tab === "documents" && (
-                <>
-                  {docSettingQuery.isLoading ? (
-                    <div className="flex items-center justify-center py-8">
-                      <Loader2 className="size-6 animate-spin text-muted-foreground" />
-                    </div>
-                  ) : !docSettingQuery.data ? (
-                    <p className="text-sm text-muted-foreground text-center py-4">
-                      No document requirements configured for your account.
-                    </p>
-                  ) : (
-                    <SmartFileInput
-                      file={docSettingQuery.data}
-                      value={documentFiles}
-                      onChange={setDocumentFiles}
-                    />
-                  )}
-
-                  {docSettingQuery.data && (
-                    <div className="flex items-center justify-between pt-4">
-                      <div className="flex items-center gap-2">
-                        {docUploadMutation.isSuccess && (
-                          <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
-                            <CheckCircle2 className="size-4" />
-                            Documents uploaded successfully
-                          </span>
-                        )}
-                        {docUploadMutation.isError && (
-                          <span className="flex items-center gap-1.5 text-sm font-medium text-red-600">
-                            <XCircle className="size-4" />
-                            Upload failed
-                          </span>
-                        )}
-                      </div>
-                      <Button
-                        type="button"
-                        onClick={() => docUploadMutation.mutate(documentFiles)}
-                        disabled={docUploadMutation.isPending}
-                      >
-                        {docUploadMutation.isPending ? (
-                          <>
-                            <Loader2 className="size-4 animate-spin" />
-                            Uploading...
-                          </>
-                        ) : (
-                          <>
-                            <UploadCloud className="size-4" />
-                            Upload Documents
-                          </>
-                        )}
-                      </Button>
-                    </div>
-                  )}
-                </>
-              )}
-            </FieldGroup>
-          </CardContent>
-
-          {tab !== "documents" && (
-            <CardFooter className="flex items-center justify-between gap-4 border-t border-border px-6 py-4">
-              <div className="flex items-center gap-2">
-                {updateMutation.isSuccess && (
-                  <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
-                    <CheckCircle2 className="size-4" />
-                    Saved successfully
-                  </span>
-                )}
-                {updateMutation.isError && (
-                  <span className="flex items-center gap-1.5 text-sm font-medium text-red-600">
-                    <XCircle className="size-4" />
-                    Save failed
-                  </span>
-                )}
-              </div>
-              <div className="flex items-center gap-3">
-                <Button
-                  type="button"
-                  variant="outline"
-                  disabled={isPending || !isDirty}
-                  onClick={() => reset()}
-                >
-                  Reset
-                </Button>
-                <Button type="submit" disabled={isPending}>
-                  {updateMutation.isPending ? (
-                    <>
-                      <Loader2 className="size-4 animate-spin" />
-                      Saving...
-                    </>
-                  ) : (
-                    <>
-                      <Save className="size-4" />
-                      Save Changes
-                    </>
-                  )}
-                </Button>
-              </div>
-            </CardFooter>
-          )}
-        </Card>
-      </form>
     </div>
   );
 }

apps/edr-freight-web/portal/src/pages/accounts/SignupPage.tsx

@@ -3,12 +3,21 @@ import { useNavigate } from "react-router-dom";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { ArrowRight, UserPlus, Loader2 } from "lucide-react";
+import {
+  ArrowRight,
+  Eye,
+  EyeOff,
+  UserPlus,
+  Loader2,
+  Check,
+  X,
+} from "lucide-react";
 import { userType } from "@/enums/userType";
 import useAuth from "@/hooks/useAuth";
 import type { SignupPayload } from "@/types/auth";
 import AuthLayout from "@/components/auth/AuthLayout";
 import PhoneInput from "@/components/auth/PhoneInput";
+import { cn } from "@/lib/utils";
 import {
   Button,
   Input,
@@ -18,23 +27,47 @@ import {
   FieldGroup,
 } from "@edr/ui-common";
 
-const userSchema = z.object({
+const passwordRequirements = [
-  email: z.string().email("Invalid email address"),
+  { label: "At least 8 characters", test: (v: string) => v.length >= 8 },
-  countryCode: z.string().min(1, "Country code is required"),
+  { label: "One uppercase letter", test: (v: string) => /[A-Z]/.test(v) },
-  phone: z
+  { label: "One lowercase letter", test: (v: string) => /[a-z]/.test(v) },
-    .string()
+  { label: "One number", test: (v: string) => /\d/.test(v) },
-    .min(9, "Phone number is too short")
+  {
-    .max(9, "Phone number is too long"),
+    label: "One special character",
-  userType: z.string(),
+    test: (v: string) => /[^A-Za-z0-9]/.test(v),
-  firstName: z.object({
+  },
-    en: z.string().min(2, "Name is required"),
+] as const;
-    am: z.string().nullable(),
+
-  }),
+const userSchema = z
-  lastName: z.object({
+  .object({
-    en: z.string().min(2, "Name is required"),
+    email: z.string().email("Invalid email address"),
-    am: z.string().nullable(),
+    countryCode: z.string().min(1, "Country code is required"),
-  }),
+    phone: z
-});
+      .string()
+      .min(9, "Phone number is too short")
+      .max(9, "Phone number is too long"),
+    userType: z.string(),
+    firstName: z.object({
+      en: z.string().min(2, "Name is required"),
+      am: z.string().nullable(),
+    }),
+    lastName: z.object({
+      en: z.string().min(2, "Name is required"),
+      am: z.string().nullable(),
+    }),
+    password: z
+      .string()
+      .min(8, "Password must be at least 8 characters")
+      .regex(/[A-Z]/, "Password must include an uppercase letter")
+      .regex(/[a-z]/, "Password must include a lowercase letter")
+      .regex(/\d/, "Password must include a number")
+      .regex(/[^A-Za-z0-9]/, "Password must include a special character"),
+    confirmPassword: z.string().min(1, "Please confirm your password"),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  });
 
 type FormData = z.infer<typeof userSchema>;
 
@@ -43,10 +76,13 @@ export default function SignupPage() {
   const { signup } = useAuth();
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const {
     register,
     handleSubmit,
+    watch,
     formState: { errors },
   } = useForm<FormData>({
     resolver: zodResolver(userSchema),
@@ -57,6 +93,8 @@ export default function SignupPage() {
       userType: userType.individual,
       firstName: { en: "", am: "" },
       lastName: { en: "", am: "" },
+      password: "",
+      confirmPassword: "",
     },
   });
 
@@ -72,7 +110,12 @@ export default function SignupPage() {
         username: data.email,
         phoneNumber: `${data.countryCode}${normalizedPhone}`,
         userType: data.userType,
-        name: { en: `${data.firstName.en} ${data.lastName.en}`, am: "" },
+        name: {
+          en: `${data.firstName.en} ${data.lastName.en}`,
+          am: `${data.firstName.en} ${data.lastName.en}`,
+        },
+        password: data.password,
+        confirmPassword: data.confirmPassword,
       };
       const result = await signup(payload);
       if (result.success) {
@@ -171,6 +214,81 @@ export default function SignupPage() {
             countryCodeError={errors.countryCode}
             phoneError={errors.phone}
           />
+
+          <Field data-invalid={Boolean(errors.password)}>
+            <FieldLabel>Password</FieldLabel>
+            <div className="relative">
+              <Input
+                type={showPassword ? "text" : "password"}
+                placeholder="Create a strong password"
+                disabled={loading}
+                aria-invalid={Boolean(errors.password)}
+                className="pr-10"
+                {...register("password")}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                tabIndex={-1}
+              >
+                {showPassword ? (
+                  <EyeOff className="size-4" />
+                ) : (
+                  <Eye className="size-4" />
+                )}
+              </button>
+            </div>
+            <FieldError errors={[errors.password]} />
+            <div className="mt-2 space-y-1">
+              {passwordRequirements.map((req) => {
+                const met = req.test(watch("password") ?? "");
+                return (
+                  <div
+                    key={req.label}
+                    className={cn(
+                      "flex items-center gap-1.5 text-xs transition-colors",
+                      met ? "text-emerald-600" : "text-muted-foreground",
+                    )}
+                  >
+                    {met ? (
+                      <Check className="size-3" />
+                    ) : (
+                      <X className="size-3" />
+                    )}
+                    {req.label}
+                  </div>
+                );
+              })}
+            </div>
+          </Field>
+
+          <Field data-invalid={Boolean(errors.confirmPassword)}>
+            <FieldLabel>Confirm Password</FieldLabel>
+            <div className="relative">
+              <Input
+                type={showConfirmPassword ? "text" : "password"}
+                placeholder="Re-enter your password"
+                disabled={loading}
+                aria-invalid={Boolean(errors.confirmPassword)}
+                className="pr-10"
+                {...register("confirmPassword")}
+              />
+              <button
+                type="button"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                tabIndex={-1}
+              >
+                {showConfirmPassword ? (
+                  <EyeOff className="size-4" />
+                ) : (
+                  <Eye className="size-4" />
+                )}
+              </button>
+            </div>
+            <FieldError errors={[errors.confirmPassword]} />
+          </Field>
         </FieldGroup>
 
         <Button type="submit" disabled={loading} size="lg" className="w-full">

apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage.tsx

@@ -299,12 +299,12 @@ function DraftBookingView({
     [booking.files],
   );
 
-  const pricingQuery = useQuery(
+  const { data: generatedPricing } = useQuery({
-    api.bookings.generatePrice.queryOptions({
+    ...api.bookings.generatePrice.queryOptions({ input: { id: booking.id } }),
-      input: { id: booking.id },
+    enabled: booking.status === "DRAFT" && !booking.pricingBreakdown,
-      enabled: !!booking.id,
+  });
-    }),
+
-  );
+  const pricing = booking.pricingBreakdown ?? generatedPricing ?? null;
 
   const uploadMutation = useMutation({
     mutationFn: (files: Record<string, File | File[] | null>) =>
@@ -403,20 +403,30 @@ function DraftBookingView({
                 </p>
               </div>
 
-              <Button
+              <div className="flex items-center gap-3">
-                type="button"
+                <Button
-                onClick={handleSubmitRequest}
+                  type="button"
-                disabled={submitMutation.isPending}
+                  variant="outline"
-              >
+                  onClick={() => navigate(`/bookings/${booking.id}/edit`)}
-                {submitMutation.isPending ? (
+                >
-                  <LoaderCircle className="animate-spin" />
+                  <FileText className="size-4" />
-                ) : (
+                  Edit
-                  <CheckCircle2 />
+                </Button>
-                )}
+                <Button
-                {submitMutation.isPending
+                  type="button"
-                  ? "Submitting..."
+                  onClick={handleSubmitRequest}
-                  : "Confirm Booking Request"}
+                  disabled={submitMutation.isPending}
-              </Button>
+                >
+                  {submitMutation.isPending ? (
+                    <LoaderCircle className="animate-spin" />
+                  ) : (
+                    <CheckCircle2 />
+                  )}
+                  {submitMutation.isPending
+                    ? "Submitting..."
+                    : "Confirm Booking Request"}
+                </Button>
+              </div>
             </div>
           </CardHeader>
         </Card>
@@ -431,20 +441,6 @@ function DraftBookingView({
           </div>
         )}
 
-        {pricingQuery.isError && (
-          <div className="flex items-start gap-3 rounded-xl border border-destructive/20 bg-destructive/10 p-4 text-sm text-destructive">
-            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
-            <div>
-              <p className="font-semibold">Pricing failed</p>
-              <p className="mt-1 text-destructive/80">
-                {pricingQuery.error instanceof Error
-                  ? pricingQuery.error.message
-                  : "An unexpected error occurred."}
-              </p>
-            </div>
-          </div>
-        )}
-
         {uploadMutation.isError && (
           <div className="flex items-start gap-3 rounded-xl border border-destructive/20 bg-destructive/10 p-4 text-sm text-destructive">
             <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
@@ -489,7 +485,7 @@ function DraftBookingView({
 
         <Card
           className={cn(
-            pricingQuery.isSuccess ? "border-primary/20 bg-primary/5" : "",
+            pricing ? "border-primary/20 bg-primary/5" : "",
           )}
         >
           <CardHeader>
@@ -502,28 +498,7 @@ function DraftBookingView({
             </CardDescription>
           </CardHeader>
           <CardContent>
-            {pricingQuery.isLoading ? (
+            {pricing ? (
-              <div className="flex flex-col items-center gap-3 py-6 text-center">
-                <LoaderCircle className="size-6 animate-spin text-primary" />
-                <p className="text-xs text-muted-foreground">
-                  Calculating price…
-                </p>
-              </div>
-            ) : pricingQuery.isError ? (
-              <div className="flex flex-col items-center gap-3 py-6 text-center">
-                <p className="text-xs text-muted-foreground">
-                  Could not calculate price.
-                </p>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => pricingQuery.refetch()}
-                >
-                  Retry
-                </Button>
-              </div>
-            ) : pricingQuery.data ? (
               <div className="flex flex-col gap-4">
                 <div className="overflow-hidden rounded-lg border">
                   <table className="w-full text-left text-xs">
@@ -536,7 +511,7 @@ function DraftBookingView({
                       </tr>
                     </thead>
                     <tbody className="divide-y">
-                      {pricingQuery.data.lineItems.map((item, i) => (
+                      {pricing.lineItems.map((item, i) => (
                         <tr key={i}>
                           <td className="px-4 py-2 text-foreground">
                             {item.description}
@@ -551,29 +526,19 @@ function DraftBookingView({
                           Total Estimated Cost
                         </td>
                         <td className="px-4 py-2 text-right text-foreground">
-                          {pricingQuery.data.totalAmount.toLocaleString()}{" "}
+                          {pricing.totalAmount.toLocaleString()}{" "}
-                          {pricingQuery.data.currency}
+                          {pricing.currency}
                         </td>
                       </tr>
                     </tbody>
                   </table>
                 </div>
-
-                {pricingQuery.data.warnings.length > 0 && (
-                  <div className="flex flex-col gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3">
-                    {pricingQuery.data.warnings.map((w, i) => (
-                      <p
-                        key={i}
-                        className="flex items-start gap-2 text-xs text-amber-800"
-                      >
-                        <AlertTriangle className="mt-0.5 size-3 shrink-0" />
-                        {w}
-                      </p>
-                    ))}
-                  </div>
-                )}
               </div>
-            ) : null}
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                Pricing will be calculated after submission.
+              </p>
+            )}
           </CardContent>
         </Card>
 
@@ -802,11 +767,28 @@ function DraftBookingView({
 
 function ReadonlyBookingView({ booking }: { booking: Freight.IBooking }) {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const payMutation = useMutation({
+    mutationFn: () => api.bookings.pay.call({ id: booking.id }),
+    onSuccess: (data) => {
+      if (data.redirectUrl) {
+        window.location.href = data.redirectUrl;
+      }
+    },
+  });
 
   const normalizedStatus = booking.status as keyof typeof STATUS_MAP;
   const statusConfig = STATUS_MAP[normalizedStatus] || STATUS_MAP.DRAFT;
   const currentStageIndex = statusConfig.stage;
 
+  const pricing = booking.pricingBreakdown;
+
+  const uploadedCodes = useMemo(
+    () => new Set(booking.files?.map((f) => f.code) ?? []),
+    [booking.files],
+  );
+
   return (
     <div className="container mx-auto max-w-7xl px-4 py-8">
       <div className="flex flex-col gap-8">
@@ -823,7 +805,7 @@ function ReadonlyBookingView({ booking }: { booking: Freight.IBooking }) {
               <div className="flex size-14 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
                 <Package className="size-6" />
               </div>
-              <div className="flex flex-col gap-1">
+              <div className="flex flex-1 flex-col gap-1">
                 <div className="flex items-center gap-3">
                   <h1 className="text-2xl font-black tracking-tight text-foreground">
                     {booking.reference}
@@ -840,11 +822,100 @@ function ReadonlyBookingView({ booking }: { booking: Freight.IBooking }) {
                   </span>
                 </div>
               </div>
+              {normalizedStatus === "FULLY_EXECUTED" && booking.paymentStatus !== "PAID" && (
+                <Button
+                  type="button"
+                  onClick={() => payMutation.mutate()}
+                  disabled={payMutation.isPending}
+                >
+                  {payMutation.isPending ? (
+                    <LoaderCircle className="mr-1 h-4 w-4 animate-spin" />
+                  ) : (
+                    <CreditCard className="mr-1 h-4 w-4" />
+                  )}
+                  {payMutation.isPending ? "Processing..." : "Pay Now"}
+                </Button>
+              )}
             </div>
           </CardHeader>
         </Card>
 
-        {renderContractCard(booking, navigate)}
+        {renderContractCard(booking, navigate, payMutation)}
+
+        {pricing && (
+          <Card className="border-primary/20 bg-primary/5">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-base">
+                <DollarSign className="size-4 text-primary" />
+                Pricing Breakdown
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="overflow-hidden rounded-lg border">
+                <table className="w-full text-left text-xs">
+                  <thead className="bg-muted text-muted-foreground">
+                    <tr>
+                      <th className="px-4 py-2 font-semibold">Description</th>
+                      <th className="px-4 py-2 font-semibold text-right">Amount</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y">
+                    {pricing.lineItems.map((item, i) => (
+                      <tr key={i}>
+                        <td className="px-4 py-2 text-foreground">{item.description}</td>
+                        <td className="px-4 py-2 text-right font-medium text-foreground">
+                          {item.amount.toLocaleString()} {item.currency}
+                        </td>
+                      </tr>
+                    ))}
+                    <tr className="bg-primary/5 font-bold">
+                      <td className="px-4 py-2 text-foreground">Total Estimated Cost</td>
+                      <td className="px-4 py-2 text-right text-foreground">
+                        {pricing.totalAmount.toLocaleString()} {pricing.currency}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {booking.files && booking.files.length > 0 && (
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-base">
+                <FileText className="size-4 text-primary" />
+                Uploaded Documents ({booking.files.length})
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                {booking.files.map((file) => (
+                  <a
+                    key={file.id}
+                    href={file.signedUrl ?? file.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-3 rounded-lg border border-border p-3 transition hover:border-primary/40"
+                  >
+                    <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10">
+                      <FileText className="size-4 text-primary" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-sm font-medium text-foreground">
+                        {file.name}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {file.code.replace(/_/g, " ")}
+                      </p>
+                    </div>
+                  </a>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
 
         <Card>
           <CardHeader>
@@ -1200,6 +1271,7 @@ function ReadonlyBookingView({ booking }: { booking: Freight.IBooking }) {
 function renderContractCard(
   booking: Freight.IBooking,
   navigate: ReturnType<typeof useNavigate>,
+  payMutation: { mutate: () => void; isPending: boolean },
 ) {
   const s = booking.status;
   if (

apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx

@@ -138,10 +138,7 @@ export default function NewBookingPage() {
     const cargoTypeId =
       data.cargoType === "container"
         ? findContainerCargoTypeId()
-        : (findCargoTypeId(data.bulkCommoditytype) ??
+        : selectedChild?.id ?? "";
-          cargoTree.find((g) => g.code.toLowerCase() === data.freightType)
-            ?.id ??
-          "");
 
     const cargoFreeText =
       data.cargoType === "container"

apps/edr-freight-web/portal/src/pages/payments/CheckPaymentPage.tsx

@@ -0,0 +1,133 @@
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { CheckCircle2, LoaderCircle, XCircle } from "lucide-react";
+import { Button } from "@edr/ui-common";
+import { api } from "@/services/api";
+
+function extractOrderId(): string | null {
+  const params = new URLSearchParams(window.location.search);
+  const fromQuery = params.get("merch_order_id");
+  if (fromQuery) return fromQuery;
+  const segments = window.location.pathname.split("/").filter(Boolean);
+  return segments[segments.length - 1] ?? null;
+}
+
+export default function CheckPaymentPage() {
+  const navigate = useNavigate();
+  const orderId = useMemo(() => extractOrderId(), []);
+
+  const { data, isLoading, isError, error } = useQuery(
+    api.bookings.checkPayment.queryOptions({
+      input: { orderId: orderId! },
+      enabled: !!orderId,
+      retry: false,
+    }),
+  );
+
+  const isSuccess = data?.status === "PAY_SUCCESS";
+
+  if (!orderId) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-4">
+        <div className="w-full max-w-md rounded-2xl border border-border bg-card p-8 text-center shadow-sm">
+          <div className="flex flex-col items-center gap-4">
+            <XCircle className="size-10 text-destructive" />
+            <p className="text-lg font-bold text-foreground">
+              No payment reference found
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate("/bookings")}
+            >
+              Back to My Bookings
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md rounded-2xl border border-border bg-card p-8 text-center shadow-sm">
+        {isLoading && (
+          <div className="flex flex-col items-center gap-4">
+            <LoaderCircle className="size-10 animate-spin text-primary" />
+            <p className="text-lg font-semibold text-foreground">
+              Checking payment status…
+            </p>
+          </div>
+        )}
+
+        {isSuccess && (
+          <div className="flex flex-col items-center gap-4">
+            <div className="flex size-14 items-center justify-center rounded-full bg-primary/10">
+              <CheckCircle2 className="size-8 text-primary" />
+            </div>
+            <p className="text-lg font-bold text-foreground">
+              Payment was successful!
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Your booking has been confirmed and payment is complete.
+            </p>
+            <Button
+              type="button"
+              onClick={() => navigate("/bookings")}
+              className="mt-2"
+            >
+              Go to My Bookings
+            </Button>
+          </div>
+        )}
+
+        {!isLoading && data && !isSuccess && (
+          <div className="flex flex-col items-center gap-4">
+            <div className="flex size-14 items-center justify-center rounded-full bg-destructive/10">
+              <XCircle className="size-8 text-destructive" />
+            </div>
+            <p className="text-lg font-bold text-foreground">
+              Payment status: {data.status}
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Please try again or contact support if the issue persists.
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate("/bookings")}
+              className="mt-2"
+            >
+              Back to My Bookings
+            </Button>
+          </div>
+        )}
+
+        {isError && (
+          <div className="flex flex-col items-center gap-4">
+            <div className="flex size-14 items-center justify-center rounded-full bg-destructive/10">
+              <XCircle className="size-8 text-destructive" />
+            </div>
+            <p className="text-lg font-bold text-foreground">
+              Something went wrong
+            </p>
+            <p className="text-sm text-muted-foreground">
+              {error instanceof Error
+                ? error.message
+                : "Failed to check payment status."}
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate("/bookings")}
+              className="mt-2"
+            >
+              Back to My Bookings
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/edr-freight-web/portal/src/pages/settings/TabCompanyProfile.tsx

@@ -0,0 +1,219 @@
+import { useMemo } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Building2, CheckCircle2, Loader2, Save, XCircle } from "lucide-react";
+import { api } from "@/services/api";
+import PhoneInput from "@/components/auth/PhoneInput";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Button,
+  Input,
+  Field,
+  FieldLabel,
+  FieldError,
+  FieldGroup,
+} from "@edr/ui-common";
+import type { ProfileResponse } from "@/types/profile";
+
+const schema = z.object({
+  companyName: z.string().min(1, "Company name is required"),
+  companyEmail: z.string().email("Invalid email address"),
+  companyPhone: z.string().min(1, "Company phone is required"),
+  companyPhoneCountryCode: z.string().min(1, "Country code is required"),
+  companyLocation: z.string().min(1, "Location is required"),
+  companyAddress: z.string().min(1, "Address is required"),
+  tinNumber: z.string().length(10, "TIN must be exactly 10 digits"),
+  fanNumber: z.string().length(16, "FAN must be exactly 16 digits"),
+});
+
+type FormData = z.infer<typeof schema>;
+
+function splitPhone(fullPhone?: string | null) {
+  if (!fullPhone) return { code: "+251", number: "" };
+  const match = fullPhone.match(/^(\+\d{1,3})(.*)$/);
+  if (match) return { code: match[1], number: match[2] };
+  return { code: "+251", number: fullPhone };
+}
+
+export default function TabCompanyProfile({ profile }: { profile: ProfileResponse }) {
+  const queryClient = useQueryClient();
+
+  const defaultValues = useMemo((): FormData => {
+    const phone = splitPhone(profile.companyPhone);
+    return {
+      companyName: profile.companyName,
+      companyEmail: profile.companyEmail ?? "",
+      companyPhone: phone.number,
+      companyPhoneCountryCode: phone.code,
+      companyLocation: profile.companyLocation,
+      companyAddress: profile.companyAddress ?? "",
+      tinNumber: profile.tinNumber,
+      fanNumber: profile.fanNumber ?? "",
+    };
+  }, [profile]);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty },
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    values: defaultValues,
+  });
+
+  const mutation = useMutation({
+    mutationFn: (data: FormData) =>
+      api.companies.updateProfile.call({
+        companyName: data.companyName,
+        companyEmail: data.companyEmail,
+        companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`,
+        companyLocation: data.companyLocation,
+        companyAddress: data.companyAddress,
+        tin: data.tinNumber,
+        fanNumber: data.fanNumber,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: api.companies.getProfile.queryKey() });
+    },
+  });
+
+  const onSubmit = (data: FormData) => mutation.mutate(data);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Building2 className="size-5 text-primary" />
+          Company Profile
+        </CardTitle>
+        <CardDescription>Edit your company registration details</CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CardContent>
+          <FieldGroup className="gap-4">
+            <Field data-invalid={Boolean(errors.companyName)}>
+              <FieldLabel>Company Name</FieldLabel>
+              <Input
+                placeholder="Global Logistics Ltd"
+                aria-invalid={Boolean(errors.companyName)}
+                {...register("companyName")}
+              />
+              <FieldError errors={[errors.companyName]} />
+            </Field>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field data-invalid={Boolean(errors.companyEmail)}>
+                <FieldLabel>Company Email</FieldLabel>
+                <Input
+                  type="email"
+                  placeholder="ops@company.com"
+                  aria-invalid={Boolean(errors.companyEmail)}
+                  {...register("companyEmail")}
+                />
+                <FieldError errors={[errors.companyEmail]} />
+              </Field>
+
+              <PhoneInput
+                countryCode={{ ...register("companyPhoneCountryCode") }}
+                phone={{
+                  ...register("companyPhone"),
+                  placeholder: "912345678",
+                }}
+                countryCodeError={errors.companyPhoneCountryCode}
+                phoneError={errors.companyPhone}
+                label="Company Phone"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field data-invalid={Boolean(errors.companyLocation)}>
+                <FieldLabel>Location</FieldLabel>
+                <Input
+                  placeholder="Addis Ababa, Ethiopia"
+                  aria-invalid={Boolean(errors.companyLocation)}
+                  {...register("companyLocation")}
+                />
+                <FieldError errors={[errors.companyLocation]} />
+              </Field>
+
+              <Field data-invalid={Boolean(errors.companyAddress)}>
+                <FieldLabel>Address</FieldLabel>
+                <Input
+                  placeholder="Bole Subcity, Woreda 03"
+                  aria-invalid={Boolean(errors.companyAddress)}
+                  {...register("companyAddress")}
+                />
+                <FieldError errors={[errors.companyAddress]} />
+              </Field>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field data-invalid={Boolean(errors.tinNumber)}>
+                <FieldLabel>TIN Number (10 digits)</FieldLabel>
+                <Input
+                  placeholder="1234567890"
+                  maxLength={10}
+                  aria-invalid={Boolean(errors.tinNumber)}
+                  {...register("tinNumber")}
+                />
+                <FieldError errors={[errors.tinNumber]} />
+              </Field>
+
+              <Field data-invalid={Boolean(errors.fanNumber)}>
+                <FieldLabel>FAN Number (16 digits)</FieldLabel>
+                <Input
+                  placeholder="1234567890123456"
+                  maxLength={16}
+                  aria-invalid={Boolean(errors.fanNumber)}
+                  {...register("fanNumber")}
+                />
+                <FieldError errors={[errors.fanNumber]} />
+              </Field>
+            </div>
+          </FieldGroup>
+        </CardContent>
+        <CardFooter className="flex items-center justify-between gap-4 border-t border-border px-6 py-4">
+          <div className="flex items-center gap-2">
+            {mutation.isSuccess && (
+              <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
+                <CheckCircle2 className="size-4" />
+                Saved successfully
+              </span>
+            )}
+            {mutation.isError && (
+              <span className="flex items-center gap-1.5 text-sm font-medium text-red-600">
+                <XCircle className="size-4" />
+                Save failed
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              disabled={mutation.isPending || !isDirty}
+              onClick={() => reset()}
+            >
+              Reset
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? (
+                <><Loader2 className="size-4 animate-spin" /> Saving...</>
+              ) : (
+                <><Save className="size-4" /> Save Changes</>
+              )}
+            </Button>
+          </div>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

apps/edr-freight-web/portal/src/pages/settings/TabContactPerson.tsx

@@ -0,0 +1,145 @@
+import { useMemo } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { CheckCircle2, Loader2, Save, User, XCircle } from "lucide-react";
+import { api } from "@/services/api";
+import PhoneInput from "@/components/auth/PhoneInput";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Button,
+  Input,
+  Field,
+  FieldLabel,
+  FieldError,
+  FieldGroup,
+} from "@edr/ui-common";
+import type { ProfileResponse } from "@/types/profile";
+
+const schema = z.object({
+  contactPersonName: z.string().min(1, "Contact person name is required"),
+  contactPersonPhone: z.string().min(1, "Contact person phone is required"),
+  contactPersonPhoneCountryCode: z.string().min(1, "Country code is required"),
+});
+
+type FormData = z.infer<typeof schema>;
+
+function splitPhone(fullPhone?: string | null) {
+  if (!fullPhone) return { code: "+251", number: "" };
+  const match = fullPhone.match(/^(\+\d{1,3})(.*)$/);
+  if (match) return { code: match[1], number: match[2] };
+  return { code: "+251", number: fullPhone };
+}
+
+export default function TabContactPerson({ profile }: { profile: ProfileResponse }) {
+  const queryClient = useQueryClient();
+
+  const defaultValues = useMemo((): FormData => {
+    const phone = splitPhone(profile.contactPersonPhone);
+    return {
+      contactPersonName: profile.contactPersonName ?? "",
+      contactPersonPhone: phone.number,
+      contactPersonPhoneCountryCode: phone.code,
+    };
+  }, [profile]);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty },
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    values: defaultValues,
+  });
+
+  const mutation = useMutation({
+    mutationFn: (data: FormData) =>
+      api.companies.updateProfile.call({
+        contactPersonName: data.contactPersonName,
+        contactPersonPhone: `${data.contactPersonPhoneCountryCode}${data.contactPersonPhone}`,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: api.companies.getProfile.queryKey() });
+    },
+  });
+
+  const onSubmit = (data: FormData) => mutation.mutate(data);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <User className="size-5 text-primary" />
+          Contact Person
+        </CardTitle>
+        <CardDescription>Manage the primary contact person for your account</CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CardContent>
+          <FieldGroup className="gap-4">
+            <Field data-invalid={Boolean(errors.contactPersonName)}>
+              <FieldLabel>Full Name</FieldLabel>
+              <Input
+                placeholder="Jane Smith"
+                aria-invalid={Boolean(errors.contactPersonName)}
+                {...register("contactPersonName")}
+              />
+              <FieldError errors={[errors.contactPersonName]} />
+            </Field>
+
+            <PhoneInput
+              countryCode={{ ...register("contactPersonPhoneCountryCode") }}
+              phone={{
+                ...register("contactPersonPhone"),
+                placeholder: "912345678",
+              }}
+              countryCodeError={errors.contactPersonPhoneCountryCode}
+              phoneError={errors.contactPersonPhone}
+              label="Phone Number"
+            />
+          </FieldGroup>
+        </CardContent>
+        <CardFooter className="flex items-center justify-between gap-4 border-t border-border px-6 py-4">
+          <div className="flex items-center gap-2">
+            {mutation.isSuccess && (
+              <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
+                <CheckCircle2 className="size-4" />
+                Saved successfully
+              </span>
+            )}
+            {mutation.isError && (
+              <span className="flex items-center gap-1.5 text-sm font-medium text-red-600">
+                <XCircle className="size-4" />
+                Save failed
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              disabled={mutation.isPending || !isDirty}
+              onClick={() => reset()}
+            >
+              Reset
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? (
+                <><Loader2 className="size-4 animate-spin" /> Saving...</>
+              ) : (
+                <><Save className="size-4" /> Save Changes</>
+              )}
+            </Button>
+          </div>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CheckCircle2,
+  FileCheck,
+  Loader2,
+  UploadCloud,
+  XCircle,
+} from "lucide-react";
+import { api } from "@/services/api";
+import { companiesService } from "@/services/companies.service";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Button,
+  SmartFileInput,
+} from "@edr/ui-common";
+import type { ProfileResponse } from "@/types/profile";
+
+export default function TabDocuments({ profile }: { profile: ProfileResponse }) {
+  const queryClient = useQueryClient();
+  const [documentFiles, setDocumentFiles] = useState<Record<string, File | File[] | null>>({});
+
+  const docSettingQuery = useQuery(
+    api.fileUploadSettings.getByCode.queryOptions({
+      input: { code: "customer_documents" },
+    }),
+  );
+
+  const docUploadMutation = useMutation({
+    mutationFn: (files: Record<string, File | File[] | null>) =>
+      companiesService.uploadDocuments(profile.companyId, files),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: api.companies.getProfile.queryKey() });
+    },
+  });
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <FileCheck className="size-5 text-primary" />
+          Documents
+        </CardTitle>
+        <CardDescription>
+          Upload and manage required business documents
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {docSettingQuery.isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="size-6 animate-spin text-muted-foreground" />
+          </div>
+        ) : !docSettingQuery.data ? (
+          <p className="text-sm text-muted-foreground text-center py-4">
+            No document requirements configured for your account.
+          </p>
+        ) : (
+          <SmartFileInput
+            file={docSettingQuery.data}
+            value={documentFiles}
+            onChange={setDocumentFiles}
+          />
+        )}
+
+        {docSettingQuery.data && (
+          <div className="flex items-center justify-between pt-4">
+            <div className="flex items-center gap-2">
+              {docUploadMutation.isSuccess && (
+                <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
+                  <CheckCircle2 className="size-4" />
+                  Documents uploaded successfully
+                </span>
+              )}
+              {docUploadMutation.isError && (
+                <span className="flex items-center gap-1.5 text-sm font-medium text-red-600">
+                  <XCircle className="size-4" />
+                  Upload failed
+                </span>
+              )}
+            </div>
+            <Button
+              type="button"
+              onClick={() => docUploadMutation.mutate(documentFiles)}
+              disabled={docUploadMutation.isPending}
+            >
+              {docUploadMutation.isPending ? (
+                <>
+                  <Loader2 className="size-4 animate-spin" />
+                  Uploading...
+                </>
+              ) : (
+                <>
+                  <UploadCloud className="size-4" />
+                  Upload Documents
+                </>
+              )}
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

apps/edr-freight-web/portal/src/pages/settings/TabGeneralManager.tsx

@@ -0,0 +1,161 @@
+import { useMemo } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Briefcase, CheckCircle2, Loader2, Save, XCircle } from "lucide-react";
+import { api } from "@/services/api";
+import PhoneInput from "@/components/auth/PhoneInput";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Button,
+  Input,
+  Field,
+  FieldLabel,
+  FieldError,
+  FieldGroup,
+} from "@edr/ui-common";
+import type { ProfileResponse } from "@/types/profile";
+
+const schema = z.object({
+  generalManagerName: z.string().min(1, "GM name is required"),
+  generalManagerEmail: z.string().email("Invalid GM email"),
+  generalManagerPhone: z.string().min(1, "GM phone is required"),
+  generalManagerPhoneCountryCode: z.string().min(1, "Country code is required"),
+});
+
+type FormData = z.infer<typeof schema>;
+
+function splitPhone(fullPhone?: string | null) {
+  if (!fullPhone) return { code: "+251", number: "" };
+  const match = fullPhone.match(/^(\+\d{1,3})(.*)$/);
+  if (match) return { code: match[1], number: match[2] };
+  return { code: "+251", number: fullPhone };
+}
+
+export default function TabGeneralManager({ profile }: { profile: ProfileResponse }) {
+  const queryClient = useQueryClient();
+
+  const defaultValues = useMemo((): FormData => {
+    const phone = splitPhone(profile.generalManagerPhone);
+    return {
+      generalManagerName: profile.generalManagerName ?? "",
+      generalManagerEmail: profile.generalManagerEmail ?? "",
+      generalManagerPhone: phone.number,
+      generalManagerPhoneCountryCode: phone.code,
+    };
+  }, [profile]);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty },
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    values: defaultValues,
+  });
+
+  const mutation = useMutation({
+    mutationFn: (data: FormData) =>
+      api.companies.updateProfile.call({
+        generalManagerName: data.generalManagerName,
+        generalManagerEmail: data.generalManagerEmail,
+        generalManagerPhone: `${data.generalManagerPhoneCountryCode}${data.generalManagerPhone}`,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: api.companies.getProfile.queryKey() });
+    },
+  });
+
+  const onSubmit = (data: FormData) => mutation.mutate(data);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Briefcase className="size-5 text-primary" />
+          General Manager
+        </CardTitle>
+        <CardDescription>Manage the general manager information</CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CardContent>
+          <FieldGroup className="gap-4">
+            <Field data-invalid={Boolean(errors.generalManagerName)}>
+              <FieldLabel>Full Name</FieldLabel>
+              <Input
+                placeholder="Abebe Bikila"
+                aria-invalid={Boolean(errors.generalManagerName)}
+                {...register("generalManagerName")}
+              />
+              <FieldError errors={[errors.generalManagerName]} />
+            </Field>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field data-invalid={Boolean(errors.generalManagerEmail)}>
+                <FieldLabel>Email Address</FieldLabel>
+                <Input
+                  type="email"
+                  placeholder="gm@company.com"
+                  aria-invalid={Boolean(errors.generalManagerEmail)}
+                  {...register("generalManagerEmail")}
+                />
+                <FieldError errors={[errors.generalManagerEmail]} />
+              </Field>
+
+              <PhoneInput
+                countryCode={{ ...register("generalManagerPhoneCountryCode") }}
+                phone={{
+                  ...register("generalManagerPhone"),
+                  placeholder: "912345678",
+                }}
+                countryCodeError={errors.generalManagerPhoneCountryCode}
+                phoneError={errors.generalManagerPhone}
+                label="Phone Number"
+              />
+            </div>
+          </FieldGroup>
+        </CardContent>
+        <CardFooter className="flex items-center justify-between gap-4 border-t border-border px-6 py-4">
+          <div className="flex items-center gap-2">
+            {mutation.isSuccess && (
+              <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
+                <CheckCircle2 className="size-4" />
+                Saved successfully
+              </span>
+            )}
+            {mutation.isError && (
+              <span className="flex items-center gap-1.5 text-sm font-medium text-red-600">
+                <XCircle className="size-4" />
+                Save failed
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              disabled={mutation.isPending || !isDirty}
+              onClick={() => reset()}
+            >
+              Reset
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? (
+                <><Loader2 className="size-4 animate-spin" /> Saving...</>
+              ) : (
+                <><Save className="size-4" /> Save Changes</>
+              )}
+            </Button>
+          </div>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

apps/edr-freight-web/portal/src/pages/settings/TabPowerOfAttorney.tsx

@@ -0,0 +1,208 @@
+import { useMemo } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { CheckCircle2, Loader2, Save, UserCheck, XCircle } from "lucide-react";
+import { api } from "@/services/api";
+import PhoneInput from "@/components/auth/PhoneInput";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Button,
+  Input,
+  Field,
+  FieldLabel,
+  FieldError,
+  FieldGroup,
+} from "@edr/ui-common";
+import type { ProfileResponse } from "@/types/profile";
+
+const schema = z.object({
+  poaName: z.string().optional(),
+  poaEmail: z.string().optional(),
+  poaPhone: z.string().optional(),
+  poaPhoneCountryCode: z.string().optional(),
+  poaLocation: z.string().optional(),
+  poaAddress: z.string().optional(),
+});
+
+type FormData = z.infer<typeof schema>;
+
+function splitPhone(fullPhone?: string | null) {
+  if (!fullPhone) return { code: "+251", number: "" };
+  const match = fullPhone.match(/^(\+\d{1,3})(.*)$/);
+  if (match) return { code: match[1], number: match[2] };
+  return { code: "+251", number: fullPhone };
+}
+
+export default function TabPowerOfAttorney({
+  profile,
+}: {
+  profile: ProfileResponse;
+}) {
+  const queryClient = useQueryClient();
+
+  const defaultValues = useMemo((): FormData => {
+    const phone = splitPhone(profile.poaPhone);
+    return {
+      poaName: profile.poaName ?? "",
+      poaEmail: profile.poaEmail ?? "",
+      poaPhone: phone.number,
+      poaPhoneCountryCode: profile.poaPhone ? phone.code : "",
+      poaLocation: profile.poaLocation ?? "",
+      poaAddress: profile.poaAddress ?? "",
+    };
+  }, [profile]);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty },
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+
+    values: defaultValues,
+  });
+
+  const mutation = useMutation({
+    mutationFn: (data: FormData) =>
+      api.companies.updateProfile.call({
+        poaName: data.poaName || undefined,
+        poaPhone:
+          data.poaPhone && data.poaPhoneCountryCode
+            ? `${data.poaPhoneCountryCode}${data.poaPhone}`
+            : undefined,
+        poaEmail: data.poaEmail || undefined,
+        poaLocation: data.poaLocation || undefined,
+        poaAddress: data.poaAddress || undefined,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: api.companies.getProfile.queryKey(),
+      });
+    },
+  });
+
+  const onSubmit = (data: FormData) => mutation.mutate(data);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <UserCheck className="size-5 text-accent" />
+          Power of Attorney
+        </CardTitle>
+        <CardDescription>
+          Power of Attorney details are optional. Fill them in if you have an
+          authorized representative, or leave blank.
+        </CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CardContent>
+          <FieldGroup className="gap-4">
+            <p className="text-sm text-muted-foreground">
+              Power of Attorney details are optional. Fill them in if you have
+              an authorized representative, or leave blank.
+            </p>
+
+            <Field data-invalid={Boolean(errors.poaName)}>
+              <FieldLabel>PoA Full Name</FieldLabel>
+              <Input
+                placeholder="Authorized Representative Name"
+                aria-invalid={Boolean(errors.poaName)}
+                {...register("poaName")}
+              />
+              <FieldError errors={[errors.poaName]} />
+            </Field>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field data-invalid={Boolean(errors.poaEmail)}>
+                <FieldLabel>PoA Email</FieldLabel>
+                <Input
+                  type="email"
+                  placeholder="poa@company.com"
+                  aria-invalid={Boolean(errors.poaEmail)}
+                  {...register("poaEmail")}
+                />
+                <FieldError errors={[errors.poaEmail]} />
+              </Field>
+
+              <PhoneInput
+                countryCode={{ ...register("poaPhoneCountryCode") }}
+                phone={{ ...register("poaPhone"), placeholder: "912345678" }}
+                label="PoA Phone"
+                countryCodeError={errors.poaPhoneCountryCode}
+                phoneError={errors.poaPhone}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field data-invalid={Boolean(errors.poaLocation)}>
+                <FieldLabel>PoA Location</FieldLabel>
+                <Input
+                  placeholder="City, Country"
+                  aria-invalid={Boolean(errors.poaLocation)}
+                  {...register("poaLocation")}
+                />
+                <FieldError errors={[errors.poaLocation]} />
+              </Field>
+
+              <Field data-invalid={Boolean(errors.poaAddress)}>
+                <FieldLabel>PoA Address</FieldLabel>
+                <Input
+                  placeholder="Full Address"
+                  aria-invalid={Boolean(errors.poaAddress)}
+                  {...register("poaAddress")}
+                />
+                <FieldError errors={[errors.poaAddress]} />
+              </Field>
+            </div>
+          </FieldGroup>
+        </CardContent>
+        <CardFooter className="flex items-center justify-between gap-4 border-t border-border px-6 py-4">
+          <div className="flex items-center gap-2">
+            {mutation.isSuccess && (
+              <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
+                <CheckCircle2 className="size-4" />
+                Saved successfully
+              </span>
+            )}
+            {mutation.isError && (
+              <span className="flex items-center gap-1.5 text-sm font-medium text-red-600">
+                <XCircle className="size-4" />
+                Save failed
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              variant="outline"
+              disabled={mutation.isPending || !isDirty}
+              onClick={() => reset()}
+            >
+              Reset
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? (
+                <>
+                  <Loader2 className="size-4 animate-spin" /> Saving...
+                </>
+              ) : (
+                <>
+                  <Save className="size-4" /> Save Changes
+                </>
+              )}
+            </Button>
+          </div>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

apps/edr-freight-web/portal/src/services/api.ts

@@ -134,6 +134,11 @@ export const api = {
       bookingsService.create,
     ),
 
+    update: endpoint<
+      { id: string; dto: Partial<CreateBookingPayload> },
+      { booking: Freight.IBooking; warnings: string[] }
+    >("bookings", "update", ({ id, dto }) => bookingsService.update(id, dto)),
+
     referenceData: endpoint<void, Freight.BookingReferenceData>(
       "bookings",
       "referenceData",
@@ -168,6 +173,18 @@ export const api = {
     >("bookings", "uploadDocuments", ({ id, files }) =>
       bookingsService.uploadDocuments(id, files),
     ),
+
+    pay: endpoint<{ id: string }, { redirectUrl: string }>(
+      "bookings",
+      "pay",
+      ({ id }) => bookingsService.pay(id),
+    ),
+
+    checkPayment: endpoint<{ orderId: string }, { status: string }>(
+      "bookings",
+      "checkPayment",
+      ({ orderId }) => bookingsService.checkPayment(orderId),
+    ),
   },
 
   consignments: {

apps/edr-freight-web/portal/src/services/bookings.service.ts

@@ -74,6 +74,14 @@ export const bookingsService = {
     const { data } = await client.get("/api/bookings/reference-data");
     return data.data;
   },
+  update: async (
+    id: string,
+    payload: Partial<CreateBookingPayload>,
+  ): Promise<{ booking: Freight.IBooking; warnings: string[] }> => {
+    const { data } = await client.patch(`/api/bookings/${id}`, payload);
+    return data.data;
+  },
+
   remove: async (id: string): Promise<void> => {
     await client.delete(`/api/bookings/${id}`);
   },
@@ -126,6 +134,16 @@ export const bookingsService = {
     return data;
   },
 
+  checkPayment: async (orderId: string): Promise<{ status: string }> => {
+    const { data } = await client.post(`/api/payments/bookings/check-payment/${orderId}`);
+    return data.data ?? data;
+  },
+
+  pay: async (id: string): Promise<{ redirectUrl: string }> => {
+    const { data } = await client.post(`/api/bookings/${id}/payment/pay`);
+    return data.data ?? data;
+  },
+
   signContract: async (
     id: string,
     payload: SignContractPayload,

apps/edr-freight-web/portal/src/types/auth.ts

@@ -21,6 +21,8 @@ export interface SignupPayload {
   phoneNumber: string;
   userType: string;
   name: { en: string; am: string };
+  password: string;
+  confirmPassword: string;
 }
 
 export interface SignupResponse {

packages/types/src/freight/index.ts

@@ -244,6 +244,21 @@ export interface IBooking extends BaseEntity {
 
   latestChangeRequestNote?: string | null;
   contractSummary?: string | null;
+  pricingBreakdown?: PricingBreakdown | null;
+}
+
+export interface PricingBreakdownLineItem {
+  code: string;
+  amount: number;
+  currency: string;
+  description: string;
+}
+
+export interface PricingBreakdown {
+  currency: string;
+  lineItems: PricingBreakdownLineItem[];
+  generatedAt: string;
+  totalAmount: number;
 }
 
 export interface IInvoice extends BaseEntity {