mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-30 08:48:11 +00:00
refactor(settings): decompose monolithic SettingsPage into modular tab components
This commit is contained in:
ghost2023
@@ -1,41 +1,20 @@
|
|||||||
import { useState, useMemo } from "react";
|
|
||||||
import { useSearchParams } from "react-router-dom";
|
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 {
|
import {
|
||||||
Building2,
|
Building2,
|
||||||
User,
|
User,
|
||||||
Briefcase,
|
Briefcase,
|
||||||
UserCheck,
|
UserCheck,
|
||||||
FileCheck,
|
FileCheck,
|
||||||
Loader2,
|
|
||||||
Save,
|
|
||||||
UploadCloud,
|
|
||||||
CheckCircle2,
|
|
||||||
XCircle,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { api } from "@/services/api";
|
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 { 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 =
|
type SettingsTab =
|
||||||
| "company"
|
| "company"
|
||||||
@@ -44,32 +23,6 @@ type SettingsTab =
|
|||||||
| "poa"
|
| "poa"
|
||||||
| "documents";
|
| "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 }[] = [
|
const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
|
||||||
{ id: "company", label: "Company Profile", icon: <Building2 className="size-4" /> },
|
{ id: "company", label: "Company Profile", icon: <Building2 className="size-4" /> },
|
||||||
{ id: "contact", label: "Contact Person", icon: <User 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" /> },
|
{ 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() {
|
export default function SettingsPage() {
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
const tab = (searchParams.get("tab") as SettingsTab) || "company";
|
const tab = (searchParams.get("tab") as SettingsTab) || "company";
|
||||||
const setTab = (t: SettingsTab) => {
|
const setTab = (t: SettingsTab) => {
|
||||||
@@ -96,130 +41,13 @@ export default function SettingsPage() {
|
|||||||
return next;
|
return next;
|
||||||
}, { replace: true });
|
}, { replace: true });
|
||||||
};
|
};
|
||||||
const [documentFiles, setDocumentFiles] = useState<
|
|
||||||
Record<string, File | File[] | null>
|
|
||||||
>({});
|
|
||||||
|
|
||||||
const profileQuery = useQuery(
|
const profileQuery = useQuery(
|
||||||
api.companies.getProfile.queryOptions(),
|
api.companies.getProfile.queryOptions(),
|
||||||
);
|
);
|
||||||
|
|
||||||
const docSettingQuery = useQuery(
|
|
||||||
api.fileUploadSettings.getByCode.queryOptions({
|
|
||||||
input: { code: "customer_documents" },
|
|
||||||
enabled: tab === "documents",
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
const profile = profileQuery.data;
|
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) {
|
if (profileQuery.isPending) {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full items-center justify-center">
|
<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 (
|
return (
|
||||||
<div className="px-4 py-8">
|
<div className="px-4 py-8">
|
||||||
<div className="mb-8 flex items-center justify-between">
|
<div className="mb-8 flex items-center justify-between">
|
||||||
@@ -276,342 +100,11 @@ export default function SettingsPage() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
107
apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx
Normal file
107
apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user