feat(onboarding): Implement company profile creation on Settings page

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

@@ -438,7 +438,7 @@ export default function MyPortalPage() {
         </Link>
       </Group>
 
-      {!customer&& (
+      {!customer && (
         <Box className="rounded-2xl border border-edr-border bg-gradient-to-r from-edr-blue/5 to-edr-green/5 px-7 py-6">
           <Group justify="space-between" align="center" wrap="nowrap">
             <Box className="flex-1">
@@ -446,9 +446,10 @@ export default function MyPortalPage() {
                 Setup your Company Profile
               </Text>
               <Text fz={13} c="edr-muted" mb={12}>
-                Complete your company information to unlock all features and start booking shipments.
+                Complete your company information to unlock all features and
+                start booking shipments.
               </Text>
-              <Link to="/onboarding" className="no-underline">
+              <Link to="/settings" className="no-underline">
                 <Group gap={8} align="center" className="w-fit">
                   <Text fz={13} fw={600} c="edr-green.7">
                     Complete Setup
@@ -464,7 +465,6 @@ export default function MyPortalPage() {
         </Box>
       )}
 
-
       {/* ── Stats Strip ───────────────────────────────────────────────────── */}
       <Box className="rounded-2xl border border-edr-border bg-gradient-to-br from-white to-edr-soft px-7 py-5">
         <SimpleGrid cols={{ base: 2, lg: 4 }} spacing={0} verticalSpacing={20}>

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

@@ -1,15 +1,39 @@
 import { useSearchParams } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
+  AlertCircle,
   Building2,
-  User,
   Briefcase,
-  UserCheck,
+  CheckCircle2,
   FileCheck,
+  Loader2,
+  Save,
+  User,
+  UserCheck,
+  XCircle,
 } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
 import { api } from "@/services/api";
-import { Badge } from "@edr/ui-common";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  Input,
+} from "@edr/ui-common";
 import { cn } from "@/lib/utils";
+import PhoneInput from "@/components/auth/PhoneInput";
+import type { CreateCompanyPayload } from "@/services/companies.service";
 import TabCompanyProfile from "./settings/TabCompanyProfile";
 import TabContactPerson from "./settings/TabContactPerson";
 import TabGeneralManager from "./settings/TabGeneralManager";
@@ -32,6 +56,7 @@ const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
 ];
 
 export default function SettingsPage() {
+  const queryClient = useQueryClient();
   const [searchParams, setSearchParams] = useSearchParams();
   const tab = (searchParams.get("tab") as SettingsTab) || "company";
   const setTab = (t: SettingsTab) => {
@@ -48,6 +73,54 @@ export default function SettingsPage() {
 
   const profile = profileQuery.data;
 
+  const createCompanyMutation = useMutation({
+    mutationFn: (payload: CreateCompanyPayload) =>
+      api.companies.create.call(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: api.companies.getProfile.queryKey(),
+      });
+    },
+  });
+
+  const onboardingSchema = 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 OnboardingFormData = z.infer<typeof onboardingSchema>;
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<OnboardingFormData>({
+    resolver: zodResolver(onboardingSchema),
+    defaultValues: {
+      companyPhoneCountryCode: "+251",
+    },
+  });
+
+  const onSubmitOnboarding = (data: OnboardingFormData) => {
+    const payload: CreateCompanyPayload = {
+      companyType: "customer",
+      companyName: data.companyName,
+      companyEmail: data.companyEmail,
+      companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`,
+      companyLocation: data.companyLocation,
+      companyAddress: data.companyAddress,
+      tin: data.tinNumber,
+      fanNumber: data.fanNumber,
+    };
+    createCompanyMutation.mutate(payload);
+  };
+
   if (profileQuery.isPending) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -56,14 +129,6 @@ export default function SettingsPage() {
     );
   }
 
-  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="px-4 py-8">
       <div className="mb-8 flex items-center justify-between">
@@ -75,9 +140,11 @@ export default function SettingsPage() {
             Manage your company profile, personnel, and documents
           </p>
         </div>
-        <Badge variant="secondary" className="font-bold uppercase tracking-wider">
-          Verified
-        </Badge>
+        {profile && (
+          <Badge variant="secondary" className="font-bold uppercase tracking-wider">
+            Verified
+          </Badge>
+        )}
       </div>
 
       {/* Tab Bar */}
@@ -86,12 +153,16 @@ export default function SettingsPage() {
           <button
             key={t.id}
             type="button"
-            onClick={() => setTab(t.id)}
+            onClick={() => {
+              if (!profile && t.id !== "company") return;
+              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",
+              !profile && t.id !== "company" && "cursor-not-allowed opacity-50 hover:text-muted-foreground",
             )}
           >
             {t.icon}
@@ -100,11 +171,151 @@ export default function SettingsPage() {
         ))}
       </div>
 
-      {tab === "company" && <TabCompanyProfile profile={profile} />}
-      {tab === "contact" && <TabContactPerson profile={profile} />}
-      {tab === "gm" && <TabGeneralManager profile={profile} />}
-      {tab === "poa" && <TabPowerOfAttorney profile={profile} />}
-      {tab === "documents" && <TabDocuments profile={profile} />}
+      {/* Tab Content */}
+      {!profile ? (
+        <>
+          {tab === "company" ? (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Building2 className="size-5 text-primary" />
+                  Company Profile
+                </CardTitle>
+                <CardDescription>
+                  Enter your company registration details to get started
+                </CardDescription>
+              </CardHeader>
+              <form onSubmit={handleSubmit(onSubmitOnboarding)}>
+                <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">
+                    {createCompanyMutation.isSuccess && (
+                      <span className="flex items-center gap-1.5 text-sm font-medium text-emerald-600">
+                        <CheckCircle2 className="size-4" />
+                        Profile created successfully
+                      </span>
+                    )}
+                    {createCompanyMutation.isError && (
+                      <span className="flex items-center gap-1.5 text-sm font-medium text-red-600">
+                        <XCircle className="size-4" />
+                        Failed to create profile
+                      </span>
+                    )}
+                  </div>
+                  <Button type="submit" disabled={createCompanyMutation.isPending}>
+                    {createCompanyMutation.isPending ? (
+                      <><Loader2 className="size-4 animate-spin" /> Creating...</>
+                    ) : (
+                      <><Save className="size-4" /> Create Profile</>
+                    )}
+                  </Button>
+                </CardFooter>
+              </form>
+            </Card>
+          ) : (
+            <Card>
+              <CardContent className="py-12">
+                <div className="flex flex-col items-center gap-3 text-center">
+                  <AlertCircle className="size-8 text-muted-foreground" />
+                  <p className="text-muted-foreground">
+                    Please complete the company profile first.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </>
+      ) : (
+        <>
+          {tab === "company" && <TabCompanyProfile profile={profile} />}
+          {tab === "contact" && <TabContactPerson profile={profile} />}
+          {tab === "gm" && <TabGeneralManager profile={profile} />}
+          {tab === "poa" && <TabPowerOfAttorney profile={profile} />}
+          {tab === "documents" && <TabDocuments profile={profile} />}
+        </>
+      )}
     </div>
   );
 }