feat(WIP): setting and upload logic

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

@@ -13,6 +13,8 @@ import { ResponseCompanyDto } from './dto/response-company.dto';
 import { ResponseExternalProfileDto } from './dto/response-external-profile.dto';
 import { ResponseFFClientDto } from './dto/response-ff-client.dto';
 import { CompanyInfoResponseDto } from './dto/company-info-response.dto';
+import { UpdateProfileDto } from './dto/update-profile.dto';
+import { ProfileResponseDto } from './dto/profile-response.dto';
 
 interface CurrentIamUser {
   id: string;
@@ -36,6 +38,22 @@ export class CompaniesController {
     return new CompanyInfoResponseDto(profile, company);
   }
 
+  @Get('profile')
+  @ApiOperation({ summary: 'Get flattened profile for the settings page' })
+  async getProfile(@CurrentUser() user: CurrentIamUser): Promise<ProfileResponseDto> {
+    const { profile, company } = await this.companiesService.getCompanyInfoByUserId(user.id);
+    return new ProfileResponseDto(profile, company);
+  }
+
+  @Patch('profile')
+  @ApiOperation({ summary: 'Update profile (flattened settings page)' })
+  async updateProfile(
+    @CurrentUser() user: CurrentIamUser,
+    @Body() dto: UpdateProfileDto,
+  ): Promise<ProfileResponseDto> {
+    return this.companiesService.updateProfile(user.id, dto);
+  }
+
   @Post('create')
   @ApiOperation({ summary: 'Create a company with its associated external profile (onboarding)' })
   async createWithProfile(

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

@@ -7,6 +7,8 @@ import { UpdateCompanyDto } from './dto/update-company.dto';
 import { CreateExternalProfileDto } from './dto/create-external-profile.dto';
 import { CreateFFClientDto } from './dto/create-ff-client.dto';
 import { CreateCompanyWithProfileDto } from './dto/create-company-with-profile.dto';
+import { UpdateProfileDto } from './dto/update-profile.dto';
+import { ProfileResponseDto } from './dto/profile-response.dto';
 import { Company } from './entities/company.entity';
 import { ExternalProfile } from './entities/external-profile.entity';
 import { FFClient } from './entities/ff-client.entity';
@@ -103,6 +105,42 @@ export class CompaniesService {
     return updated;
   }
 
+  async updateProfile(userId: string, dto: UpdateProfileDto): Promise<ProfileResponseDto> {
+    const { profile, company } = await this.getCompanyInfoByUserId(userId);
+
+    const companyUpdates: Record<string, any> = {};
+    const attrUpdates: Record<string, any> = { ...(company.attributes ?? {}) };
+
+    if (dto.companyName !== undefined) companyUpdates.name = dto.companyName;
+    if (dto.companyEmail !== undefined) companyUpdates.email = dto.companyEmail;
+    if (dto.companyPhone !== undefined) companyUpdates.phone = dto.companyPhone;
+    if (dto.companyLocation !== undefined) companyUpdates.country = dto.companyLocation;
+    if (dto.companyAddress !== undefined) companyUpdates.address = dto.companyAddress;
+    if (dto.tin !== undefined) companyUpdates.tin = dto.tin;
+    if (dto.vatNumber !== undefined) companyUpdates.vatNumber = dto.vatNumber;
+    if (dto.fanNumber !== undefined) {
+      companyUpdates.businessLicense = dto.fanNumber;
+      companyUpdates.fanNumber = dto.fanNumber;
+    }
+
+    if (dto.contactPersonName !== undefined) attrUpdates.contactPersonName = dto.contactPersonName;
+    if (dto.contactPersonPhone !== undefined) attrUpdates.contactPersonPhone = dto.contactPersonPhone;
+    if (dto.generalManagerName !== undefined) attrUpdates.generalManagerName = dto.generalManagerName;
+    if (dto.generalManagerEmail !== undefined) attrUpdates.generalManagerEmail = dto.generalManagerEmail;
+    if (dto.generalManagerPhone !== undefined) attrUpdates.generalManagerPhone = dto.generalManagerPhone;
+    if (dto.poaName !== undefined) attrUpdates.poaName = dto.poaName;
+    if (dto.poaPhone !== undefined) attrUpdates.poaPhone = dto.poaPhone;
+    if (dto.poaEmail !== undefined) attrUpdates.poaEmail = dto.poaEmail;
+    if (dto.poaLocation !== undefined) attrUpdates.poaLocation = dto.poaLocation;
+    if (dto.poaAddress !== undefined) attrUpdates.poaAddress = dto.poaAddress;
+
+    companyUpdates.attributes = attrUpdates;
+
+    const updated = await this.companiesRepo.update(company.id, companyUpdates);
+    if (!updated) throw new NotFoundException(`Company ${company.id} not found`);
+    return new ProfileResponseDto(profile, updated);
+  }
+
   async deleteCompany(id: string): Promise<void> {
     await this.findCompanyById(id);
     await this.companiesRepo.softDelete(id);

apps/edr-freight-api/src/modules/companies/dto/profile-response.dto.ts

@@ -0,0 +1,53 @@
+import { Company } from '../entities/company.entity';
+import { ExternalProfile } from '../entities/external-profile.entity';
+
+export class ProfileResponseDto {
+  companyId: string;
+  companyName: string;
+  companyEmail: string | null;
+  companyPhone: string | null;
+  companyLocation: string;
+  companyAddress: string | null;
+  tinNumber: string;
+  vatNumber: string | null;
+  fanNumber: string | null;
+
+  contactPersonName: string | null;
+  contactPersonPhone: string | null;
+  generalManagerName: string | null;
+  generalManagerEmail: string | null;
+  generalManagerPhone: string | null;
+
+  poaName: string | null;
+  poaPhone: string | null;
+  poaEmail: string | null;
+  poaLocation: string | null;
+  poaAddress: string | null;
+
+  profileId: string;
+
+  constructor(profile: ExternalProfile, company: Company) {
+    this.companyId = company.id;
+    this.companyName = company.name;
+    this.companyEmail = company.email ?? null;
+    this.companyPhone = company.phone ?? null;
+    this.companyLocation = company.country;
+    this.companyAddress = company.address ?? null;
+    this.tinNumber = company.tin;
+    this.vatNumber = company.vatNumber ?? null;
+    this.fanNumber = company.fanNumber ?? null;
+    this.profileId = profile.id;
+
+    const attrs = company.attributes ?? {};
+    this.contactPersonName = attrs.contactPersonName ?? null;
+    this.contactPersonPhone = attrs.contactPersonPhone ?? null;
+    this.generalManagerName = attrs.generalManagerName ?? null;
+    this.generalManagerEmail = attrs.generalManagerEmail ?? null;
+    this.generalManagerPhone = attrs.generalManagerPhone ?? null;
+    this.poaName = attrs.poaName ?? null;
+    this.poaPhone = attrs.poaPhone ?? null;
+    this.poaEmail = attrs.poaEmail ?? null;
+    this.poaLocation = attrs.poaLocation ?? null;
+    this.poaAddress = attrs.poaAddress ?? null;
+  }
+}

apps/edr-freight-api/src/modules/companies/dto/update-profile.dto.ts

@@ -0,0 +1,83 @@
+import { IsString, IsOptional, IsEmail, MaxLength, Length, Matches } from 'class-validator';
+
+export class UpdateProfileDto {
+  @IsOptional()
+  @IsString()
+  @MaxLength(200)
+  companyName?: string;
+
+  @IsOptional()
+  @IsEmail()
+  @MaxLength(150)
+  companyEmail?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(20)
+  companyPhone?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(32)
+  companyLocation?: string;
+
+  @IsOptional()
+  @IsString()
+  companyAddress?: string;
+
+  @IsOptional()
+  @IsString()
+  @Length(10, 10)
+  @Matches(/^\d+$/, { message: 'TIN must contain only digits' })
+  tin?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(50)
+  vatNumber?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(16)
+  fanNumber?: string;
+
+  @IsOptional()
+  @IsString()
+  contactPersonName?: string;
+
+  @IsOptional()
+  @IsString()
+  contactPersonPhone?: string;
+
+  @IsOptional()
+  @IsString()
+  generalManagerName?: string;
+
+  @IsOptional()
+  @IsEmail()
+  generalManagerEmail?: string;
+
+  @IsOptional()
+  @IsString()
+  generalManagerPhone?: string;
+
+  @IsOptional()
+  @IsString()
+  poaName?: string;
+
+  @IsOptional()
+  @IsString()
+  poaPhone?: string;
+
+  @IsOptional()
+  @IsEmail()
+  poaEmail?: string;
+
+  @IsOptional()
+  @IsString()
+  poaLocation?: string;
+
+  @IsOptional()
+  @IsString()
+  poaAddress?: string;
+}

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

@@ -14,11 +14,13 @@ import {
   Home,
   Loader2,
   User,
+  Settings,
 } from "lucide-react";
 
 import useAuth from "./hooks/useAuth";
 
 import ProfilePage from "./pages/ProfilePage";
+import SettingsPage from "./pages/SettingsPage";
 import MyPortalPage from "./pages/MyPortalPage";
 import EDRFreightLandingPage from "./pages/EDRFreightLandingPage";
 import SignupPage from "./pages/accounts/SignupPage";
@@ -40,6 +42,7 @@ const sidebarItems: SidebarItem[] = [
   { label: "Tracking", href: "/tracking", icon: <MapPin /> },
   { label: "Billing", href: "/billing", icon: <Receipt /> },
   { label: "Profile", href: "/profile", icon: <User /> },
+  { label: "Settings", href: "/settings", icon: <Settings /> },
 ];
 
 const App = () => {
@@ -108,6 +111,7 @@ const App = () => {
         <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 />} />
     </Routes>

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

@@ -82,6 +82,7 @@ export const URL_CONSTANTS = {
   COMPANIES_API: {
     GET_INFO: "/api/companies/getInfo",
     CREATE: "/api/companies/create",
+    PROFILE: "/api/companies/profile",
     DOCUMENTS: (id: string) => `/api/companies/${id}/documents`,
   },
 

apps/edr-freight-web/portal/src/hooks/useAuth.ts

@@ -29,7 +29,6 @@ const useAuth = () => {
 
   const authQuery = useQuery(
     api.auth.getMyInfo.queryOptions({
-      enabled: !!getCookie("auth-token"),
       retry: false,
       staleTime: 10 * 60 * 1000,
     }),

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

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import {
   ArrowRight,
@@ -14,6 +14,8 @@ import {
   Plus,
   Receipt,
   Truck,
+  UploadCloud,
+  X,
 } from "lucide-react";
 
 import {
@@ -48,6 +50,7 @@ export default function MyPortalPage() {
   const outstandingInvoices = myInvoices.filter(
     (inv) => inv.status === "Sent" || inv.status === "Overdue",
   );
+  const [dismissed, setDismissed] = useState(false);
   const totalOutstanding = outstandingInvoices
     .filter((inv) => inv.currency === "USD")
     .reduce((sum, inv) => sum + inv.amount, 0);
@@ -61,6 +64,34 @@ export default function MyPortalPage() {
   return (
     <div className="min-h-screen bg-background p-6">
       <div className="mx-auto max-w-7xl space-y-6">
+        {/* Documents banner */}
+        {!me.documentsComplete && !dismissed && (
+          <div className="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
+            <UploadCloud className="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
+            <div className="flex-1">
+              <p className="font-semibold">Upload your documents</p>
+              <p className="mt-0.5 text-amber-700">
+                To enable all account features, please upload your Business
+                License, TIN Certificate, and National ID / Passport.
+              </p>
+              <Link
+                to="/settings?tab=documents"
+                className="mt-2 inline-flex items-center gap-1 font-medium text-amber-900 underline underline-offset-2 transition hover:text-amber-700"
+              >
+                Upload now
+              </Link>
+            </div>
+            <button
+              type="button"
+              onClick={() => setDismissed(true)}
+              className="shrink-0 rounded-lg p-1 text-amber-400 transition hover:bg-amber-100 hover:text-amber-600"
+              aria-label="Dismiss"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+
         {/* Welcome banner */}
         <div className="overflow-hidden rounded-3xl bg-gradient-to-r from-[#059669] to-[#10B981] p-6 text-white shadow-sm">
           <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">

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

@@ -1,135 +1,46 @@
-import { useMemo } from "react";
-import {
-  User,
-  Building2,
-  Phone,
-  Mail,
-  MapPin,
-  ShieldCheck,
-  Briefcase,
-  UserCheck,
-  Building,
-  Globe,
-  Fingerprint,
-  FileCheck,
-  Settings2,
-  ExternalLink,
-} from "lucide-react";
-import useAuth from "@/hooks/useAuth";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardAction,
-  Badge,
-  Separator,
-  SmartFileInput,
-  Button,
-} from "@edr/ui-common";
-import type { IFileUploadSetting } from "@edr/types/freight";
-import { cn } from "@/lib/utils";
+import { User, Building2, Phone, Mail, MapPin, ShieldCheck, Briefcase, UserCheck, Fingerprint, FileCheck, Globe, Building } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/services/api";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, Badge, Separator } from "@edr/ui-common";
+
+function InfoItem({ icon, label, value }: { icon?: React.ReactNode; label: string; value?: string | null }) {
+  return (
+    <div className="flex items-start gap-3">
+      {icon && <div className="mt-1 text-muted-foreground [&_svg]:size-4">{icon}</div>}
+      <div className="flex flex-col gap-0.5">
+        <p className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground">{label}</p>
+        <p className="text-sm font-bold text-foreground">{value || "—"}</p>
+      </div>
+    </div>
+  );
+}
 
 export default function ProfilePage() {
-  const { user, customer, isPending } = useAuth();
-
-  const documentSettings = useMemo<IFileUploadSetting>(() => ({
-    id: "profile-docs",
-    code: "customer_documents",
-    label: "Customer Documents",
-    entity: "customer",
-    createdAt: new Date(),
-    updatedAt: new Date(),
-    fields: [
-      {
-        id: "doc-tin",
-        settingId: "profile-docs",
-        fileKey: "tin_certificate",
-        fileLabel: "TIN Certificate",
-        isRequired: true,
-        isMultiple: false,
-        maxFiles: 1,
-        allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png"],
-        maxSizeMb: 5,
-        order: 1,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-      {
-        id: "doc-license",
-        settingId: "profile-docs",
-        fileKey: "business_license",
-        fileLabel: "Business/Investment License",
-        isRequired: true,
-        isMultiple: false,
-        maxFiles: 1,
-        allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png"],
-        maxSizeMb: 5,
-        order: 2,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-      {
-        id: "doc-reg",
-        settingId: "profile-docs",
-        fileKey: "registration_certificate",
-        fileLabel: "Business Registration Certificate",
-        isRequired: true,
-        isMultiple: false,
-        maxFiles: 1,
-        allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png"],
-        maxSizeMb: 5,
-        order: 3,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-      {
-        id: "doc-id",
-        settingId: "profile-docs",
-        fileKey: "national_id",
-        fileLabel: "National ID",
-        isRequired: true,
-        isMultiple: false,
-        maxFiles: 1,
-        allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png"],
-        maxSizeMb: 5,
-        order: 4,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-      {
-        id: "doc-poa",
-        settingId: "profile-docs",
-        fileKey: "power_of_attorney",
-        fileLabel: "Power of Attorney",
-        isRequired: false,
-        isMultiple: false,
-        maxFiles: 1,
-        allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png"],
-        maxSizeMb: 5,
-        order: 5,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-    ],
-  }), []);
+  const { data: profile, isPending } = useQuery(
+    api.companies.getProfile.queryOptions(),
+  );
 
   if (isPending) {
     return (
       <div className="flex h-full items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
+        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
       </div>
     );
   }
 
-  const displayName = user?.name?.en || user?.username || user?.email || "User";
+  if (!profile) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-muted-foreground">No company profile found.</p>
+      </div>
+    );
+  }
 
   return (
-    <div className="container mx-auto max-w-7xl px-4 py-8">
-      <div className="flex flex-col gap-8">
-        {/* Header Section */}
-        <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+    <div className="px-4 py-8">
+      <div className="mx-auto max-w-7xl">
+        <div className="flex flex-col gap-8">
+          {/* Header */}
           <div className="flex items-center gap-6">
             <div className="flex size-24 items-center justify-center rounded-2xl bg-primary/10 text-primary shadow-inner">
               <User className="size-12" />
@@ -137,7 +48,7 @@ export default function ProfilePage() {
             <div className="flex flex-col gap-1">
               <div className="flex items-center gap-3">
                 <h1 className="text-3xl font-black tracking-tight text-foreground">
-                  {displayName}
+                  {profile.companyName}
                 </h1>
                 <Badge variant="secondary" className="font-bold uppercase tracking-wider">
                   Verified
@@ -145,182 +56,129 @@ export default function ProfilePage() {
               </div>
               <p className="flex items-center gap-2 font-medium text-muted-foreground">
                 <Building className="size-4" />
-                {customer?.companyName || "No Company Linked"}
+                {profile.companyName}
               </p>
             </div>
           </div>
-          <div className="flex items-center gap-3">
-             <Button variant="outline">
-               <Settings2 data-icon="inline-start" />
-               Account Settings
-             </Button>
-          </div>
-        </div>
 
-        <Separator />
+          <Separator />
 
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-          {/* Left Column - Personal & Company Info */}
-          <div className="flex flex-col gap-8 lg:col-span-2">
-            <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-              {/* Personal Details Card */}
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+            {/* Left Column */}
+            <div className="flex flex-col gap-8 lg:col-span-2">
+              <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+                {/* Company Details */}
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <Building2 className="size-5 text-primary" />
+                      Company Details
+                    </CardTitle>
+                    <CardDescription>Business registration information</CardDescription>
+                  </CardHeader>
+                  <CardContent className="flex flex-col gap-4">
+                    <InfoItem icon={<Globe />} label="Location" value={profile.companyLocation} />
+                    <InfoItem icon={<MapPin />} label="Address" value={profile.companyAddress} />
+                    <InfoItem icon={<FileCheck />} label="TIN Number" value={profile.tinNumber} />
+                    <InfoItem icon={<ShieldCheck />} label="FAN Number" value={profile.fanNumber} />
+                    <InfoItem icon={<Mail />} label="Email" value={profile.companyEmail} />
+                    <InfoItem icon={<Phone />} label="Phone" value={profile.companyPhone} />
+                  </CardContent>
+                </Card>
+
+                {/* Personal Details (from ExternalProfile) */}
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <Fingerprint className="size-5 text-primary" />
+                      Profile Details
+                    </CardTitle>
+                    <CardDescription>Your linked user profile</CardDescription>
+                  </CardHeader>
+                  <CardContent className="flex flex-col gap-4">
+                    <InfoItem icon={<User />} label="Profile" value="Primary Contact" />
+                  </CardContent>
+                </Card>
+              </div>
+
+              {/* Personnel Card */}
               <Card>
                 <CardHeader>
                   <CardTitle className="flex items-center gap-2">
-                    <Fingerprint className="size-5 text-primary" />
-                    Personal Details
+                    <Briefcase className="size-5 text-primary" />
+                    Key Personnel
                   </CardTitle>
-                  <CardDescription>Your account contact information</CardDescription>
-                  <CardAction>
-                    <Button variant="ghost" size="icon">
-                      <ExternalLink />
-                    </Button>
-                  </CardAction>
+                  <CardDescription>Management and contact persons</CardDescription>
                 </CardHeader>
-                <CardContent className="flex flex-col gap-4">
-                  <InfoItem icon={<Mail />} label="Email Address" value={user?.email} />
-                  <InfoItem icon={<Phone />} label="Phone Number" value={user?.phoneNumber} />
-                  <InfoItem icon={<UserCheck />} label="Username" value={user?.username} />
+                <CardContent className="grid grid-cols-1 gap-8 md:grid-cols-2">
+                  <div className="flex flex-col gap-4">
+                    <h3 className="border-l-4 border-primary pl-3 text-sm font-bold uppercase tracking-wide text-foreground">
+                      Contact Person
+                    </h3>
+                    <div className="flex flex-col gap-3 pl-4">
+                      <InfoItem label="Name" value={profile.contactPersonName} />
+                      <InfoItem label="Phone" value={profile.contactPersonPhone} />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-4">
+                    <h3 className="border-l-4 border-accent pl-3 text-sm font-bold uppercase tracking-wide text-foreground">
+                      General Manager
+                    </h3>
+                    <div className="flex flex-col gap-3 pl-4">
+                      <InfoItem label="Name" value={profile.generalManagerName} />
+                      <InfoItem label="Email" value={profile.generalManagerEmail} />
+                      <InfoItem label="Phone" value={profile.generalManagerPhone} />
+                    </div>
+                  </div>
                 </CardContent>
               </Card>
 
-              {/* Company Details Card */}
-              <Card>
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <Building2 className="size-5 text-primary" />
-                    Company Details
-                  </CardTitle>
-                  <CardDescription>Business registration information</CardDescription>
-                </CardHeader>
-                <CardContent className="flex flex-col gap-4">
-                  <InfoItem icon={<Globe />} label="Location" value={customer?.companyLocation} />
-                  <InfoItem icon={<MapPin />} label="Address" value={customer?.companyAddress} />
-                  <InfoItem icon={<FileCheck />} label="TIN Number" value={customer?.tinNumber} />
-                  <InfoItem icon={<ShieldCheck />} label="FAN Number" value={customer?.fanNumber} />
+              {/* Power of Attorney */}
+              {profile.poaName && (
+                <Card className="border-dashed">
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                      <UserCheck className="size-5 text-accent" />
+                      Power of Attorney
+                    </CardTitle>
+                    <CardDescription>Authorized representative details</CardDescription>
+                  </CardHeader>
+                  <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                    <InfoItem label="PoA Name" value={profile.poaName} />
+                    <InfoItem label="PoA Email" value={profile.poaEmail} />
+                    <InfoItem label="PoA Phone" value={profile.poaPhone} />
+                    <InfoItem label="PoA Location" value={profile.poaLocation} />
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+
+            {/* Right Column */}
+            <div className="flex flex-col gap-8">
+              <Card className="relative overflow-hidden border-none bg-foreground text-background shadow-xl">
+                <div className="absolute right-0 top-0 p-4 opacity-10">
+                  <ShieldCheck className="size-32" />
+                </div>
+                <CardContent className="relative z-10 flex flex-col gap-4 px-6 py-8">
+                  <h3 className="text-xl font-black">Secure Account</h3>
+                  <p className="text-sm leading-relaxed text-muted-foreground/80">
+                    Your information is protected by enterprise-grade security.
+                    Contact support for verified information updates.
+                  </p>
+                  <div className="pt-2">
+                    <a
+                      href="/settings"
+                      className="inline-flex h-9 items-center justify-center rounded-md bg-background px-4 text-sm font-medium text-foreground hover:bg-background/90"
+                    >
+                      Edit Settings
+                    </a>
+                  </div>
                 </CardContent>
               </Card>
             </div>
-
-            {/* Personnel Card */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Briefcase className="size-5 text-primary" />
-                  Key Personnel
-                </CardTitle>
-                <CardDescription>Management and contact persons</CardDescription>
-              </CardHeader>
-              <CardContent className="grid grid-cols-1 gap-8 md:grid-cols-2">
-                <div className="flex flex-col gap-4">
-                  <h3 className="border-l-4 border-primary pl-3 text-sm font-bold uppercase tracking-wide text-foreground">
-                    Contact Person
-                  </h3>
-                  <div className="flex flex-col gap-3 pl-4">
-                    <InfoItem label="Name" value={customer?.contactPersonName} />
-                    <InfoItem label="Phone" value={customer?.contactPersonPhone} />
-                  </div>
-                </div>
-                <div className="flex flex-col gap-4">
-                  <h3 className="border-l-4 border-accent pl-3 text-sm font-bold uppercase tracking-wide text-foreground">
-                    General Manager
-                  </h3>
-                  <div className="flex flex-col gap-3 pl-4">
-                    <InfoItem label="Name" value={customer?.generalManagerName} />
-                    <InfoItem label="Email" value={customer?.generalManagerEmail} />
-                    <InfoItem label="Phone" value={customer?.generalManagerPhone} />
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Power of Attorney Section (Conditional) */}
-            {customer?.poaName && (
-              <Card className="border-dashed">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2">
-                    <UserCheck className="size-5 text-accent" />
-                    Power of Attorney
-                  </CardTitle>
-                  <CardDescription>Authorized representative details</CardDescription>
-                </CardHeader>
-                <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                  <InfoItem label="PoA Name" value={customer.poaName} />
-                  <InfoItem label="PoA Email" value={customer.poaEmail} />
-                  <InfoItem label="PoA Phone" value={customer.poaPhone} />
-                  <InfoItem label="PoA Location" value={customer.poaLocation} />
-                </CardContent>
-              </Card>
-            )}
-          </div>
-
-          {/* Right Column - Documents */}
-          <div className="flex flex-col gap-8">
-            <Card className="border-primary/20 bg-primary/[0.02] shadow-md">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <FileCheck className="size-6 text-primary" />
-                  Documents
-                </CardTitle>
-                <CardDescription>Manage required business documents</CardDescription>
-              </CardHeader>
-              <CardContent className="px-6 pb-6 pt-0">
-                <SmartFileInput
-                  file={documentSettings}
-                  variant="minimal"
-                  className="flex flex-col gap-4"
-                />
-              </CardContent>
-            </Card>
-
-            <Card className="relative overflow-hidden border-none bg-foreground text-background shadow-xl">
-              <div className="absolute right-0 top-0 p-4 opacity-10">
-                <ShieldCheck className="size-32" />
-              </div>
-              <CardContent className="relative z-10 flex flex-col gap-4 px-6 py-8">
-                <h3 className="text-xl font-black">Secure Account</h3>
-                <p className="text-sm leading-relaxed text-muted-foreground/80">
-                  Your information is protected by enterprise-grade security. 
-                  Contact support for verified information updates.
-                </p>
-                <div className="pt-2">
-                  <Button variant="secondary" size="sm">
-                    Contact Support
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
           </div>
         </div>
       </div>
     </div>
   );
 }
-
-function InfoItem({
-  icon,
-  label,
-  value,
-}: {
-  icon?: React.ReactNode;
-  label: string;
-  value?: string | null;
-}) {
-  return (
-    <div className="flex items-start gap-3">
-      {icon && (
-        <div className="mt-1 text-muted-foreground [&_svg]:size-4">
-          {icon}
-        </div>
-      )}
-      <div className="flex flex-col gap-0.5">
-        <p className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground">
-          {label}
-        </p>
-        <p className="text-sm font-bold text-foreground">
-          {value || "—"}
-        </p>
-      </div>
-    </div>
-  );
-}

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

@@ -0,0 +1,617 @@
+import { useState, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import { useQuery, useMutation, useQueryClient } 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 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";
+
+type SettingsTab =
+  | "company"
+  | "contact"
+  | "gm"
+  | "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" /> },
+  { id: "gm", label: "General Manager", icon: <Briefcase className="size-4" /> },
+  { id: "poa", label: "Power of Attorney", icon: <UserCheck className="size-4" /> },
+  { 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) => {
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev);
+      next.set("tab", t);
+      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">
+        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
+      </div>
+    );
+  }
+
+  if (!profile) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-muted-foreground">No company profile found.</p>
+      </div>
+    );
+  }
+
+  const onSubmit = (data: FormData) => {
+    updateMutation.mutate(data);
+  };
+
+  return (
+    <div className="px-4 py-8">
+      <div className="mb-8 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-black tracking-tight text-foreground">
+            Account Settings
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Manage your company profile, personnel, and documents
+          </p>
+        </div>
+        <Badge variant="secondary" className="font-bold uppercase tracking-wider">
+          Verified
+        </Badge>
+      </div>
+
+      {/* Tab Bar */}
+      <div className="mb-6 flex flex-wrap gap-1 border-b border-border">
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            type="button"
+            onClick={() => setTab(t.id)}
+            className={cn(
+              "flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-semibold transition-colors",
+              tab === t.id
+                ? "border-primary text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {t.icon}
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              {tab === "company" && <><Building2 className="size-5 text-primary" /> Company 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/customers/customers.mock.ts

@@ -14,6 +14,7 @@ export interface Customer {
   country: string;
   address: string;
   notes: string;
+  documentsComplete: boolean;
 }
 
 const seedCustomers: Customer[] = [
@@ -30,6 +31,7 @@ const seedCustomers: Customer[] = [
     country: "Ethiopia",
     address: "Bole Road, Sub-City 03, Building 17",
     notes: "Top-tier importer. Prefers weekly invoicing.",
+    documentsComplete: false,
   },
   {
     id: 2,
@@ -44,6 +46,7 @@ const seedCustomers: Customer[] = [
     country: "Ethiopia",
     address: "Industrial Park, Zone B, Warehouse 4",
     notes: "Awaiting compliance documents.",
+    documentsComplete: false,
   },
   {
     id: 3,
@@ -58,6 +61,7 @@ const seedCustomers: Customer[] = [
     country: "Djibouti",
     address: "Port Quarter, Avenue 26, Block 9",
     notes: "Account paused since last quarter.",
+    documentsComplete: true,
   },
 ];
 
@@ -99,6 +103,7 @@ const generated: Customer[] = extras.map((entry, i) => {
     country: entry.country,
     address: `Block ${i + 1}, Street ${10 + i}, Quarter ${(i % 5) + 1}`,
     notes: `Mock customer #${id}.`,
+    documentsComplete: i % 3 === 0,
   };
 });
 

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

@@ -33,6 +33,7 @@ import type {
   CompanyInfoResponse,
   CreateCompanyPayload,
 } from "./companies.service";
+import type { ProfileResponse, UpdateProfilePayload } from "@/types/profile";
 import type {
   AuthUser,
   GenerateVerificationCodePayload,
@@ -101,6 +102,18 @@ export const api = {
       "create",
       companiesService.create,
     ),
+
+    getProfile: endpoint<void, ProfileResponse>(
+      "companies",
+      "getProfile",
+      companiesService.getProfile,
+    ),
+
+    updateProfile: endpoint<UpdateProfilePayload, ProfileResponse>(
+      "companies",
+      "updateProfile",
+      companiesService.updateProfile,
+    ),
   },
 
   bookings: {

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

@@ -2,6 +2,7 @@ import { client } from "@/utils/api";
 import { unwrap } from "@/utils/endpoint";
 import { URL_CONSTANTS } from "@/constants/URLS";
 import type { ApiResponse } from "@/types/apiResponse";
+import type { ProfileResponse, UpdateProfilePayload } from "@/types/profile";
 import { isAxiosError } from "axios";
 
 export interface ExternalProfileResponse {
@@ -81,6 +82,21 @@ export const companiesService = {
     return unwrap(response.data);
   },
 
+  getProfile: async (): Promise<ProfileResponse> => {
+    const response = await client.get<ApiResponse<ProfileResponse>>(
+      URL_CONSTANTS.COMPANIES_API.PROFILE,
+    );
+    return unwrap(response.data);
+  },
+
+  updateProfile: async (payload: UpdateProfilePayload): Promise<ProfileResponse> => {
+    const response = await client.patch<ApiResponse<ProfileResponse>>(
+      URL_CONSTANTS.COMPANIES_API.PROFILE,
+      payload,
+    );
+    return unwrap(response.data);
+  },
+
   uploadDocuments: async (
     companyId: string,
     files: Record<string, File | File[] | null>,

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

@@ -0,0 +1,43 @@
+export interface ProfileResponse {
+  companyId: string;
+  companyName: string;
+  companyEmail: string | null;
+  companyPhone: string | null;
+  companyLocation: string;
+  companyAddress: string | null;
+  tinNumber: string;
+  vatNumber: string | null;
+  fanNumber: string | null;
+  contactPersonName: string | null;
+  contactPersonPhone: string | null;
+  generalManagerName: string | null;
+  generalManagerEmail: string | null;
+  generalManagerPhone: string | null;
+  poaName: string | null;
+  poaPhone: string | null;
+  poaEmail: string | null;
+  poaLocation: string | null;
+  poaAddress: string | null;
+  profileId: string;
+}
+
+export interface UpdateProfilePayload {
+  companyName?: string;
+  companyEmail?: string;
+  companyPhone?: string;
+  companyLocation?: string;
+  companyAddress?: string;
+  tin?: string;
+  vatNumber?: string;
+  fanNumber?: string;
+  contactPersonName?: string;
+  contactPersonPhone?: string;
+  generalManagerName?: string;
+  generalManagerEmail?: string;
+  generalManagerPhone?: string;
+  poaName?: string;
+  poaPhone?: string;
+  poaEmail?: string;
+  poaLocation?: string;
+  poaAddress?: string;
+}