@apptimate/ui 7.2.0 → 7.4.0

package/src/common-components/pickers/PartyPicker.tsx

@@ -14,6 +14,7 @@ import {
   PickerTrigger,
 } from "./EntityPickerModal";
 import { lookupParties, createParty, sendRequest } from "@apptimate/core-lib";
+import { QuickPartyAddModal } from "./QuickPartyAddModal";
 import toast from "react-hot-toast";
 
 interface PartyPickerProps {
@@ -24,7 +25,8 @@ interface PartyPickerProps {
   placeholder?: string;
   isRequired?: boolean;
   disabled?: boolean;
-  partyType?: "customer" | "supplier" | "all" | "artisan";
+  partyType?: "customer" | "supplier" | "all" | "artisan" | "other" | "employee" | "salesperson";
+  createAsType?: "customer" | "supplier" | "artisan" | "other" | "employee" | "salesperson";
   customTrigger?: (onClick: () => void) => React.ReactNode;
 }
 
@@ -37,6 +39,7 @@ export function PartyPicker({
   isRequired = false,
   disabled = false,
   partyType = "all",
+  createAsType,
   customTrigger,
 }: PartyPickerProps) {
   const [isOpen, setIsOpen] = useState(false);
@@ -46,88 +49,6 @@ export function PartyPicker({
 
   // Quick add
   const [isQuickAddOpen, setIsQuickAddOpen] = useState(false);
-  const [quickAddFirstName, setQuickAddFirstName] = useState("");
-  const [quickAddLastName, setQuickAddLastName] = useState("");
-  const [quickAddEmail, setQuickAddEmail] = useState("");
-  const [quickAddPhone, setQuickAddPhone] = useState("");
-  const [quickAddSecondaryContact, setQuickAddSecondaryContact] = useState("");
-  const [quickAddDOB, setQuickAddDOB] = useState("");
-  const [quickAddIdentityType, setQuickAddIdentityType] = useState("");
-  const [quickAddIdentity, setQuickAddIdentity] = useState("");
-  
-  const [quickAddAddressLine1, setQuickAddAddressLine1] = useState("");
-  const [quickAddAddressLine2, setQuickAddAddressLine2] = useState("");
-  const [quickAddCity, setQuickAddCity] = useState("");
-  const [quickAddState, setQuickAddState] = useState("");
-  const [quickAddPostalCode, setQuickAddPostalCode] = useState("");
-  const [quickAddCountry, setQuickAddCountry] = useState("");
-  const [showQuickAddDetailedAddress, setShowQuickAddDetailedAddress] = useState(false);
-
-  const [quickAddCurrencyId, setQuickAddCurrencyId] = useState<string | number | undefined>(undefined);
-  const [quickAddCurrencyDisplay, setQuickAddCurrencyDisplay] = useState<any>(null);
-  const [errors, setErrors] = useState<Record<string, string[]>>({});
-  const [isCreating, setIsCreating] = useState(false);
-
-  const [fieldConfigs, setFieldConfigs] = useState<any[]>([]);
-
-  const effectiveType = partyType === "all" ? "customer" : partyType;
-  const mergedConfig = React.useMemo(() => {
-    const configMap: Record<string, { active: boolean; mandatory: boolean }> = {};
-    const relevantConfigs = fieldConfigs.filter(c => c.entity === effectiveType);
-    for (const config of relevantConfigs) {
-      if (!configMap[config.field]) {
-        configMap[config.field] = { active: false, mandatory: false };
-      }
-      if (config.status === "active") configMap[config.field].active = true;
-      if (config.is_mandatory) configMap[config.field].mandatory = true;
-    }
-    return configMap;
-  }, [fieldConfigs, effectiveType]);
-
-  const hasInitializedQuickAddCurrency = useRef(false);
-
-  useEffect(() => {
-    if (isQuickAddOpen) {
-      if (!hasInitializedQuickAddCurrency.current) {
-        hasInitializedQuickAddCurrency.current = true;
-      sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/settings`, method: 'GET' })
-        .then((res: any) => {
-          if (res.responseData?.is_success && res.responseData?.result) {
-            const configs = Array.isArray(res.responseData.result) ? res.responseData.result : res.responseData.result.data;
-            const baseConfig = configs?.find((c: any) => c.key === 'base_currency');
-            if (baseConfig?.resolved_item) {
-              const currency = baseConfig.resolved_item;
-              setQuickAddCurrencyId(currency.id);
-              setQuickAddCurrencyDisplay({ id: currency.id, code: currency.code, displayLabel: `${currency.code} — ${currency.name}` });
-            } else if (baseConfig?.value) {
-              // Fallback just in case
-              const baseId = baseConfig.value;
-              sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/currencies`, method: 'GET', params: { search: '' } })
-                .then((cRes: any) => {
-                  if (cRes.responseData?.is_success && cRes.responseData?.result?.data) {
-                    const cData = Array.isArray(cRes.responseData.result.data) ? cRes.responseData.result.data : cRes.responseData.result;
-                    const baseCurrency = cData.find((c: any) => String(c.id) === String(baseId));
-                    if (baseCurrency) {
-                      setQuickAddCurrencyId(baseCurrency.id);
-                      setQuickAddCurrencyDisplay({ id: baseCurrency.id, code: baseCurrency.code, displayLabel: `${baseCurrency.code} — ${baseCurrency.name}` });
-                    }
-                  }
-                });
-            }
-          }
-        });
-      }
-      
-      if (fieldConfigs.length === 0) {
-        sendRequest({ url: `${process.env.NEXT_PUBLIC_API_URL}/api/field-configs`, method: 'GET' })
-          .then((res: any) => {
-            if (res.responseData?.is_success && res.responseData?.result) {
-              setFieldConfigs(res.responseData.result);
-            }
-          });
-      }
-    }
-  }, [isQuickAddOpen, fieldConfigs.length]);
 
   const fetchData = useCallback(async (query: string = "") => {
     setIsLoading(true);
@@ -177,78 +98,7 @@ export function PartyPicker({
     onChange(null);
   };
 
-  const handleQuickAdd = async () => {
-    if (!quickAddFirstName.trim()) return;
-    setIsCreating(true);
-    setErrors({});
-    try {
-      const payload = { 
-        first_name: quickAddFirstName.trim(),
-        last_name: quickAddLastName.trim() || undefined,
-        email: quickAddEmail.trim() || undefined,
-        primary_contact: quickAddPhone.trim() || undefined,
-        secondary_contact: quickAddSecondaryContact.trim() || undefined,
-        date_of_birth: quickAddDOB || undefined,
-        identity_type: quickAddIdentityType || undefined,
-        identity: quickAddIdentity.trim() || undefined,
-        default_currency_id: quickAddCurrencyId || undefined,
-        type: [partyType === "all" || !partyType ? "customer" : partyType],
-        status: "active",
-        address: quickAddAddressLine1.trim() ? {
-          address_line_1: quickAddAddressLine1.trim(),
-          address_line_2: quickAddAddressLine2.trim() || undefined,
-          city: quickAddCity.trim() || undefined,
-          state: quickAddState.trim() || undefined,
-          postal_code: quickAddPostalCode.trim() || undefined,
-          country: quickAddCountry.trim() || undefined,
-        } : undefined
-      };
-      const res = await createParty(payload);
-      if (res.is_success && res.result) {
-        toast.success("Party created");
-        const party = res.result;
-        const partyName = party.name || party.full_name || [party.first_name, party.last_name].filter(Boolean).join(" ");
-        onChange({
-          id: Number(party.id),
-          name: String(partyName),
-          code: party.code ? String(party.code) : undefined,
-          type: Array.isArray(party.type) ? party.type[0] : (party.type ? String(party.type) : undefined),
-          default_currency_id: quickAddCurrencyDisplay?.id ? Number(quickAddCurrencyDisplay.id) : undefined,
-          default_currency: quickAddCurrencyDisplay ? {
-            id: Number(quickAddCurrencyDisplay.id),
-            code: String(quickAddCurrencyDisplay.code),
-            name: String(quickAddCurrencyDisplay.name),
-            symbol: String(quickAddCurrencyDisplay.symbol)
-          } : undefined
-        });
-        setIsQuickAddOpen(false);
-        setQuickAddFirstName("");
-        setQuickAddLastName("");
-        setQuickAddEmail("");
-        setQuickAddPhone("");
-        setQuickAddSecondaryContact("");
-        setQuickAddDOB("");
-        setQuickAddIdentityType("");
-        setQuickAddIdentity("");
-        setQuickAddAddressLine1("");
-        setQuickAddAddressLine2("");
-        setQuickAddCity("");
-        setQuickAddState("");
-        setQuickAddPostalCode("");
-        setQuickAddCountry("");
-        setShowQuickAddDetailedAddress(false);
-        setErrors({});
-        setIsOpen(false);
-      } else if ((res as any).errors) {
-        setErrors((res as any).errors);
-      } else {
-        toast.error(res.message || "Failed to create");
-      }
-    } catch (e: any) {
-      toast.error(e.message || "Error creating party");
-    }
-    setIsCreating(false);
-  };
+
 
   // Server-side filtering used
 
@@ -282,23 +132,7 @@ export function PartyPicker({
           <button
             type="button"
             onClick={() => { 
-              setIsQuickAddOpen(true); 
-              setQuickAddFirstName(""); 
-              setQuickAddLastName(""); 
-              setQuickAddEmail("");
-              setQuickAddPhone("");
-              setQuickAddSecondaryContact("");
-              setQuickAddDOB("");
-              setQuickAddIdentityType("");
-              setQuickAddIdentity("");
-              setQuickAddAddressLine1("");
-              setQuickAddAddressLine2("");
-              setQuickAddCity("");
-              setQuickAddState("");
-              setQuickAddPostalCode("");
-              setQuickAddCountry("");
-              setShowQuickAddDetailedAddress(false);
-              setErrors({});
+              setIsQuickAddOpen(true);
             }}
             className="p-1.5 rounded-lg bg-primary-50 text-primary-600 hover:bg-primary-100 transition-colors flex-shrink-0"
             title={`Quick Add ${label}`}
@@ -336,237 +170,30 @@ export function PartyPicker({
         )}
       </EntityPickerModal>
 
-      {/* Quick Add Modal */}
-      <Modal
+      <QuickPartyAddModal
         isOpen={isQuickAddOpen}
         onClose={() => setIsQuickAddOpen(false)}
-        title={`Quick Add ${label}`}
-        size="md"
-        zIndex={300}
-        backdrop="blur"
-      >
-        <div className="space-y-4">
-          <div className="grid grid-cols-2 gap-3">
-            {mergedConfig.first_name?.active !== false && (
-              <Input
-                label="First Name"
-                isRequired={mergedConfig.first_name?.mandatory ?? true}
-                placeholder={`Enter ${label.toLowerCase()} first name`}
-                value={quickAddFirstName}
-                onChange={(e) => setQuickAddFirstName(e.target.value)}
-                error={errors.first_name?.[0]}
-              />
-            )}
-            {mergedConfig.last_name?.active !== false && (
-              <Input
-                label="Last Name"
-                isRequired={mergedConfig.last_name?.mandatory}
-                placeholder={`Enter ${label.toLowerCase()} last name`}
-                value={quickAddLastName}
-                onChange={(e) => setQuickAddLastName(e.target.value)}
-                error={errors.last_name?.[0]}
-              />
-            )}
-          </div>
-          <div className="grid grid-cols-2 gap-3">
-            {mergedConfig.email?.active !== false && (
-              <Input
-                label="Email"
-                type="email"
-                isRequired={mergedConfig.email?.mandatory}
-                placeholder="Email address"
-                value={quickAddEmail}
-                onChange={(e) => setQuickAddEmail(e.target.value)}
-                error={errors.email?.[0]}
-              />
-            )}
-            {mergedConfig.primary_contact?.active !== false && (
-              <Input
-                label="Primary Contact"
-                isRequired={mergedConfig.primary_contact?.mandatory}
-                placeholder="Primary phone number"
-                value={quickAddPhone}
-                onChange={(e) => setQuickAddPhone(e.target.value)}
-                error={errors.primary_contact?.[0]}
-              />
-            )}
-          </div>
-          <div className="grid grid-cols-2 gap-3">
-            {mergedConfig.secondary_contact?.active !== false && (
-              <Input
-                label="Secondary Contact"
-                isRequired={mergedConfig.secondary_contact?.mandatory}
-                placeholder="Alternative phone (optional)"
-                value={quickAddSecondaryContact}
-                onChange={(e) => setQuickAddSecondaryContact(e.target.value)}
-                error={errors.secondary_contact?.[0]}
-              />
-            )}
-            {mergedConfig.date_of_birth?.active !== false && (
-              <Input
-                label="Date of Birth"
-                type="date"
-                isRequired={mergedConfig.date_of_birth?.mandatory}
-                value={quickAddDOB}
-                onChange={(e) => setQuickAddDOB(e.target.value)}
-                error={errors.date_of_birth?.[0]}
-              />
-            )}
-          </div>
-          {mergedConfig.identity?.active !== false && (
-            <div className="space-y-1.5 w-full">
-              <label className="text-[13px] font-medium text-[#4A5568]">
-                Identity Details {mergedConfig.identity?.mandatory && <span className="text-red-500">*</span>}
-              </label>
-            <div className="flex relative">
-              <select
-                value={quickAddIdentityType}
-                onChange={(e) => setQuickAddIdentityType(e.target.value)}
-                className={`w-1/3 bg-surface-0 border-[1.5px] ${errors.identity_type ? 'border-danger-alt' : 'border-border-subtle'} rounded-l-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 border-r-0 focus:z-10 appearance-none`}
-                style={{ backgroundImage: 'url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right .7rem top 50%', backgroundSize: '.65rem auto' }}
-              >
-                <option value="">Select type</option>
-                <option value="nic">NIC</option>
-                <option value="passport">Passport</option>
-                <option value="driving_license">Driving License</option>
-                <option value="business_registration">Business Registration</option>
-                <option value="other">Other</option>
-              </select>
-              <input
-                type="text"
-                placeholder="Enter identity number"
-                value={quickAddIdentity}
-                onChange={(e) => setQuickAddIdentity(e.target.value)}
-                className={`flex-1 bg-surface-0 border-[1.5px] ${errors.identity ? 'border-danger-alt' : 'border-border-subtle'} rounded-r-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all hover:border-gray-300 focus:border-gray-300 focus:bg-surface-1 placeholder:text-foreground-disabled z-0 focus:z-10 relative`}
-              />
-            </div>
-              {(errors.identity_type?.[0] || errors.identity?.[0]) && (
-                <span className="text-[11px] text-danger-alt font-medium">
-                  {errors.identity_type?.[0] || errors.identity?.[0]}
-                </span>
-              )}
-            </div>
-          )}
-          {mergedConfig.address?.active !== false && (
-            <div className="space-y-3">
-              <div className="flex justify-between items-center">
-                <label className="text-[13px] font-medium text-[#4A5568]">
-                  Address {mergedConfig.address?.mandatory ? <span className="text-red-500">*</span> : "(Optional)"}
-                </label>
-              <button
-                type="button"
-                onClick={() => setShowQuickAddDetailedAddress(!showQuickAddDetailedAddress)}
-                className="text-xs font-semibold text-primary-600 hover:text-primary-700 transition-colors"
-              >
-                {showQuickAddDetailedAddress ? "Quick Add Address" : "Add Detailed Address"}
-              </button>
-            </div>
-
-            {!showQuickAddDetailedAddress ? (
-              <Input
-                placeholder="Enter complete primary address..."
-                value={quickAddAddressLine1}
-                onChange={(e) => setQuickAddAddressLine1(e.target.value)}
-                error={errors.address?.[0] || errors['address.address_line_1']?.[0]}
-              />
-            ) : (
-              <div className="p-3 bg-gray-50 border border-gray-100 rounded-xl space-y-3">
-                <Input
-                  label="Address Line 1"
-                  placeholder="Street address, P.O. box, etc."
-                  value={quickAddAddressLine1}
-                  onChange={(e) => setQuickAddAddressLine1(e.target.value)}
-                  error={errors.address?.[0] || errors['address.address_line_1']?.[0]}
-                />
-                <Input
-                  label="Address Line 2"
-                  placeholder="Apartment, suite, unit, etc. (optional)"
-                  value={quickAddAddressLine2}
-                  onChange={(e) => setQuickAddAddressLine2(e.target.value)}
-                  error={errors['address.address_line_2']?.[0]}
-                />
-                <div className="grid grid-cols-2 gap-3">
-                  <Input
-                    label="City"
-                    placeholder="City"
-                    value={quickAddCity}
-                    onChange={(e) => setQuickAddCity(e.target.value)}
-                    error={errors['address.city']?.[0]}
-                  />
-                  <Input
-                    label="State / Province"
-                    placeholder="State or Province"
-                    value={quickAddState}
-                    onChange={(e) => setQuickAddState(e.target.value)}
-                    error={errors['address.state']?.[0]}
-                  />
-                </div>
-                <div className="grid grid-cols-2 gap-3">
-                  <Input
-                    label="Postal Code"
-                    placeholder="ZIP or Postal Code"
-                    value={quickAddPostalCode}
-                    onChange={(e) => setQuickAddPostalCode(e.target.value)}
-                    error={errors['address.postal_code']?.[0]}
-                  />
-                  <Input
-                    label="Country"
-                    placeholder="Country"
-                    value={quickAddCountry}
-                    onChange={(e) => setQuickAddCountry(e.target.value)}
-                    error={errors['address.country']?.[0]}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-          <div className="grid grid-cols-2 gap-3">
-            {(partyType === "all" || partyType === "customer" || partyType === "supplier") && (
-              <AsyncSearchableSelect
-                label="Default Currency"
-                placeholder="Search currency..."
-                loadOptions={async (search, page) => {
-                  try {
-                    const res: any = await sendRequest({ 
-                      url: `${process.env.NEXT_PUBLIC_API_URL}/api/currencies`, 
-                      method: 'GET', 
-                      params: { search, page, per_page: 20 } 
-                    });
-                    if (res.responseData?.is_success && res.responseData?.result?.data) {
-                      return res.responseData.result.data.map((c: any) => ({
-                        ...c,
-                        displayLabel: `${c.code} — ${c.name}`
-                      }));
-                    }
-                    return [];
-                  } catch { return []; }
-                }}
-                option={{ label: "displayLabel", value: "id", keysToSearch: ["name", "code"] }}
-                onChange={(val, selectedObj: any) => {
-                  setQuickAddCurrencyId(val as string | number);
-                  setQuickAddCurrencyDisplay(selectedObj);
-                }}
-                key={quickAddCurrencyDisplay ? quickAddCurrencyDisplay.code : 'empty'}
-                defaultValue={quickAddCurrencyDisplay || undefined}
-                error={errors.default_currency_id?.[0]}
-              />
-            )}
-          </div>
-          <ModalFooter>
-            <Button
-              variant="flat"
-              color="default"
-              onClick={() => setIsQuickAddOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button onClick={handleQuickAdd} isDisabled={isCreating || !quickAddFirstName.trim()}>
-              {isCreating ? "Creating…" : "Create & Select"}
-            </Button>
-          </ModalFooter>
-        </div>
-      </Modal>
+        label={label}
+        partyType={partyType}
+        createAsType={createAsType}
+        onSuccess={(party) => {
+          const partyName = party.name || party.full_name || [party.first_name, party.last_name].filter(Boolean).join(" ");
+          onChange({
+            id: Number(party.id),
+            name: String(partyName),
+            code: party.code ? String(party.code) : undefined,
+            type: Array.isArray(party.type) ? party.type[0] : (party.type ? String(party.type) : undefined),
+            default_currency_id: party.currencyDisplay?.id ? Number(party.currencyDisplay.id) : undefined,
+            default_currency: party.currencyDisplay ? {
+              id: Number(party.currencyDisplay.id),
+              code: String(party.currencyDisplay.code),
+              name: party.currencyDisplay.name ? String(party.currencyDisplay.name) : "",
+              symbol: party.currencyDisplay.symbol ? String(party.currencyDisplay.symbol) : ""
+            } : undefined
+          });
+          setIsOpen(false);
+        }}
+      />
     </>
   );
 }