mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 07:22:53 +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 { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
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 { Badge } from "@edr/ui-common";
|
||||
import { cn } from "@/lib/utils";
|
||||
import TabCompanyProfile from "./settings/TabCompanyProfile";
|
||||
import TabContactPerson from "./settings/TabContactPerson";
|
||||
import TabGeneralManager from "./settings/TabGeneralManager";
|
||||
import TabPowerOfAttorney from "./settings/TabPowerOfAttorney";
|
||||
import TabDocuments from "./settings/TabDocuments";
|
||||
|
||||
type SettingsTab =
|
||||
| "company"
|
||||
@@ -44,32 +23,6 @@ type SettingsTab =
|
||||
| "poa"
|
||||
| "documents";
|
||||
|
||||
const settingsSchema = z.object({
|
||||
companyName: z.string().min(1, "Company name is required"),
|
||||
companyEmail: z.string().email("Invalid email address"),
|
||||
companyPhone: z.string().min(1, "Company phone is required"),
|
||||
companyPhoneCountryCode: z.string().min(1, "Country code is required"),
|
||||
companyLocation: z.string().min(1, "Location is required"),
|
||||
companyAddress: z.string().min(1, "Address is required"),
|
||||
tinNumber: z.string().length(10, "TIN must be exactly 10 digits"),
|
||||
fanNumber: z.string().length(16, "FAN must be exactly 16 digits"),
|
||||
contactPersonName: z.string().min(1, "Contact person name is required"),
|
||||
contactPersonPhone: z.string().min(1, "Contact person phone is required"),
|
||||
contactPersonPhoneCountryCode: z.string().min(1, "Country code is required"),
|
||||
generalManagerName: z.string().min(1, "GM name is required"),
|
||||
generalManagerEmail: z.string().email("Invalid GM email"),
|
||||
generalManagerPhone: z.string().min(1, "GM phone is required"),
|
||||
generalManagerPhoneCountryCode: z.string().min(1, "Country code is required"),
|
||||
poaName: z.string().optional(),
|
||||
poaEmail: z.string().optional(),
|
||||
poaPhone: z.string().optional(),
|
||||
poaPhoneCountryCode: z.string().optional(),
|
||||
poaLocation: z.string().optional(),
|
||||
poaAddress: z.string().optional(),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof settingsSchema>;
|
||||
|
||||
const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
|
||||
{ id: "company", label: "Company Profile", icon: <Building2 className="size-4" /> },
|
||||
{ id: "contact", label: "Contact Person", icon: <User className="size-4" /> },
|
||||
@@ -78,15 +31,7 @@ const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
|
||||
{ id: "documents", label: "Documents", icon: <FileCheck className="size-4" /> },
|
||||
];
|
||||
|
||||
function splitPhone(fullPhone?: string | null): { code: string; number: string } {
|
||||
if (!fullPhone) return { code: "+251", number: "" };
|
||||
const match = fullPhone.match(/^(\+\d{1,3})(.*)$/);
|
||||
if (match) return { code: match[1], number: match[2] };
|
||||
return { code: "+251", number: fullPhone };
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const tab = (searchParams.get("tab") as SettingsTab) || "company";
|
||||
const setTab = (t: SettingsTab) => {
|
||||
@@ -96,130 +41,13 @@ export default function SettingsPage() {
|
||||
return next;
|
||||
}, { replace: true });
|
||||
};
|
||||
const [documentFiles, setDocumentFiles] = useState<
|
||||
Record<string, File | File[] | null>
|
||||
>({});
|
||||
|
||||
const profileQuery = useQuery(
|
||||
api.companies.getProfile.queryOptions(),
|
||||
);
|
||||
|
||||
const docSettingQuery = useQuery(
|
||||
api.fileUploadSettings.getByCode.queryOptions({
|
||||
input: { code: "customer_documents" },
|
||||
enabled: tab === "documents",
|
||||
}),
|
||||
);
|
||||
|
||||
const profile = profileQuery.data;
|
||||
|
||||
const defaultValues = useMemo((): FormData => {
|
||||
if (!profile) {
|
||||
return {
|
||||
companyName: "",
|
||||
companyEmail: "",
|
||||
companyPhone: "",
|
||||
companyPhoneCountryCode: "+251",
|
||||
companyLocation: "",
|
||||
companyAddress: "",
|
||||
tinNumber: "",
|
||||
fanNumber: "",
|
||||
contactPersonName: "",
|
||||
contactPersonPhone: "",
|
||||
contactPersonPhoneCountryCode: "+251",
|
||||
generalManagerName: "",
|
||||
generalManagerEmail: "",
|
||||
generalManagerPhone: "",
|
||||
generalManagerPhoneCountryCode: "+251",
|
||||
poaName: "",
|
||||
poaEmail: "",
|
||||
poaPhone: "",
|
||||
poaPhoneCountryCode: "+251",
|
||||
poaLocation: "",
|
||||
poaAddress: "",
|
||||
};
|
||||
}
|
||||
const contactPhone = splitPhone(profile.contactPersonPhone);
|
||||
const gmPhone = splitPhone(profile.generalManagerPhone);
|
||||
const poaPhone = splitPhone(profile.poaPhone);
|
||||
return {
|
||||
companyName: profile.companyName,
|
||||
companyEmail: profile.companyEmail ?? "",
|
||||
companyPhone: profile.companyPhone ?? "",
|
||||
companyPhoneCountryCode: splitPhone(profile.companyPhone).code,
|
||||
companyLocation: profile.companyLocation,
|
||||
companyAddress: profile.companyAddress ?? "",
|
||||
tinNumber: profile.tinNumber,
|
||||
fanNumber: profile.fanNumber ?? "",
|
||||
contactPersonName: profile.contactPersonName ?? "",
|
||||
contactPersonPhone: contactPhone.number,
|
||||
contactPersonPhoneCountryCode: contactPhone.code,
|
||||
generalManagerName: profile.generalManagerName ?? "",
|
||||
generalManagerEmail: profile.generalManagerEmail ?? "",
|
||||
generalManagerPhone: gmPhone.number,
|
||||
generalManagerPhoneCountryCode: gmPhone.code,
|
||||
poaName: profile.poaName ?? "",
|
||||
poaEmail: profile.poaEmail ?? "",
|
||||
poaPhone: poaPhone.number,
|
||||
poaPhoneCountryCode: poaPhone.code,
|
||||
poaLocation: profile.poaLocation ?? "",
|
||||
poaAddress: profile.poaAddress ?? "",
|
||||
};
|
||||
}, [profile]);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors, isDirty },
|
||||
} = useForm<FormData>({
|
||||
resolver: zodResolver(settingsSchema),
|
||||
values: defaultValues,
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (data: FormData) =>
|
||||
api.companies.updateProfile.call({
|
||||
companyName: data.companyName,
|
||||
companyEmail: data.companyEmail,
|
||||
companyPhone: `${data.companyPhoneCountryCode}${data.companyPhone}`,
|
||||
companyLocation: data.companyLocation,
|
||||
companyAddress: data.companyAddress,
|
||||
tin: data.tinNumber,
|
||||
fanNumber: data.fanNumber,
|
||||
contactPersonName: data.contactPersonName,
|
||||
contactPersonPhone: `${data.contactPersonPhoneCountryCode}${data.contactPersonPhone}`,
|
||||
generalManagerName: data.generalManagerName,
|
||||
generalManagerEmail: data.generalManagerEmail,
|
||||
generalManagerPhone: `${data.generalManagerPhoneCountryCode}${data.generalManagerPhone}`,
|
||||
poaName: data.poaName || undefined,
|
||||
poaPhone:
|
||||
data.poaPhone && data.poaPhoneCountryCode
|
||||
? `${data.poaPhoneCountryCode}${data.poaPhone}`
|
||||
: undefined,
|
||||
poaEmail: data.poaEmail || undefined,
|
||||
poaLocation: data.poaLocation || undefined,
|
||||
poaAddress: data.poaAddress || undefined,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: api.companies.getProfile.queryKey(),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const docUploadMutation = useMutation({
|
||||
mutationFn: (files: Record<string, File | File[] | null>) =>
|
||||
companiesService.uploadDocuments(profile!.companyId, files),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: api.companies.getProfile.queryKey(),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const isPending = profileQuery.isPending || updateMutation.isPending || docUploadMutation.isPending;
|
||||
|
||||
if (profileQuery.isPending) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
@@ -236,10 +64,6 @@ export default function SettingsPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
updateMutation.mutate(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="px-4 py-8">
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
@@ -276,342 +100,11 @@ export default function SettingsPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<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>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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