"use client"; import { useEffect } from "react"; import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import { Alert, Spinner } from "../UI"; import { createClientSchema, updateClientSchema, CLIENT_TYPES, type CreateClientFormValues, type UpdateClientFormValues, } from "@/src/validations/client.validator"; import type { Client } from "@/src/types/client"; import { Schema } from "yup"; // ── Styles ───────────────────────────────────────────────────────────────── const S = { input: { width: "100%", height: 40, padding: "0 0.75rem", borderRadius: "var(--radius-md)", border: "1px solid var(--color-border)", background: "var(--color-surface)", fontSize: 13, color: "var(--color-text-primary)", outline: "none", fontFamily: "var(--font-sans)", } as React.CSSProperties, label: { display: "flex", flexDirection: "column" as const, gap: 6, fontSize: 12, fontWeight: 600, color: "var(--color-text-secondary)", } as React.CSSProperties, errorText: { fontSize: 11, color: "var(--color-danger)", fontWeight: 500, } as React.CSSProperties, }; const withError = (hasError: boolean): React.CSSProperties => ({ ...S.input, ...(hasError ? { borderColor: "var(--color-danger)", background: "#FEF2F2" } : {}), }); // ── Props ────────────────────────────────────────────────────────────────── interface ClientFormModalProps { editClient: Client | null; onClose: () => void; onSubmit: ( data: CreateClientFormValues | UpdateClientFormValues, isNew: boolean ) => Promise; } // ── Component ────────────────────────────────────────────────────────────── export function ClientFormModal({ editClient, onClose, onSubmit }: ClientFormModalProps) { const isNew = editClient === null; // FIX 1: was `Schema` (capital S) — now correctly `schema` const schema = isNew ? createClientSchema : updateClientSchema; const { register, handleSubmit, setError, formState: { errors, isSubmitting }, } = useForm({ resolver: yupResolver(Schema) as never, // FIX 1 applied here defaultValues: { name: editClient?.name ?? "", email: editClient?.email ?? "", phone: editClient?.phone ?? "", clientType: editClient?.clientType ?? undefined, }, }); useEffect(() => { const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, [onClose]); const submitHandler = async (data: CreateClientFormValues | UpdateClientFormValues) => { const ok = await onSubmit(data, isNew); if (ok) { onClose(); } else { setError("name", { message: "حدث خطأ غير متوقع. يرجى المحاولة لاحقاً." }); } }; return ( ); }