@apptimate/ui 7.2.0 → 7.4.0

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

@@ -0,0 +1,414 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { Modal, ModalFooter } from "../../base-components/Modal";
+import { Input } from "../../base-components/Input";
+import { Button } from "../../base-components/Button";
+import { AsyncSearchableSelect } from "../../base-components/SearchableSelect";
+import { createParty, sendRequest } from "@apptimate/core-lib";
+import toast from "react-hot-toast";
+
+interface QuickPartyAddModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: (party: any) => void;
+  partyType?: "customer" | "supplier" | "all" | "artisan" | "other" | "employee" | "salesperson";
+  createAsType?: "customer" | "supplier" | "artisan" | "other" | "employee" | "salesperson";
+  label?: string;
+}
+
+export function QuickPartyAddModal({
+  isOpen,
+  onClose,
+  onSuccess,
+  partyType = "all",
+  createAsType,
+  label = "Party"
+}: QuickPartyAddModalProps) {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [secondaryContact, setSecondaryContact] = useState("");
+  const [dob, setDob] = useState("");
+  const [identityType, setIdentityType] = useState("");
+  const [identity, setIdentity] = useState("");
+  
+  const [addressLine1, setAddressLine1] = useState("");
+  const [addressLine2, setAddressLine2] = useState("");
+  const [city, setCity] = useState("");
+  const [state, setState] = useState("");
+  const [postalCode, setPostalCode] = useState("");
+  const [country, setCountry] = useState("");
+  const [showDetailedAddress, setShowDetailedAddress] = useState(false);
+
+  const [currencyId, setCurrencyId] = useState<string | number | undefined>(undefined);
+  const [currencyDisplay, setCurrencyDisplay] = useState<any>(null);
+  const [errors, setErrors] = useState<Record<string, string[]>>({});
+  const [isCreating, setIsCreating] = useState(false);
+
+  const [fieldConfigs, setFieldConfigs] = useState<any[]>([]);
+
+  const effectiveType = createAsType || (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 hasInitializedCurrency = useRef(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      if (!hasInitializedCurrency.current) {
+        hasInitializedCurrency.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;
+                setCurrencyId(currency.id);
+                setCurrencyDisplay({ id: currency.id, code: currency.code, displayLabel: `${currency.code} — ${currency.name}` });
+              } else if (baseConfig?.value) {
+                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) {
+                        setCurrencyId(baseCurrency.id);
+                        setCurrencyDisplay({ 
+                          id: baseCurrency.id, 
+                          code: baseCurrency.code, 
+                          name: baseCurrency.name || "",
+                          symbol: baseCurrency.symbol || "",
+                          displayLabel: `${baseCurrency.code}${baseCurrency.name ? ` — ${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);
+            }
+          });
+      }
+    }
+  }, [isOpen, fieldConfigs.length]);
+
+  const handleQuickAdd = async () => {
+    if (!firstName.trim()) return;
+    setIsCreating(true);
+    setErrors({});
+    try {
+      const payload = { 
+        first_name: firstName.trim(),
+        last_name: lastName.trim() || undefined,
+        email: email.trim() || undefined,
+        primary_contact: phone.trim() || undefined,
+        secondary_contact: secondaryContact.trim() || undefined,
+        date_of_birth: dob || undefined,
+        identity_type: identityType || undefined,
+        identity: identity.trim() || undefined,
+        default_currency_id: currencyId || undefined,
+        type: [createAsType || (partyType === "all" || !partyType ? "customer" : partyType)],
+        status: "active",
+        address: addressLine1.trim() ? {
+          address_line_1: addressLine1.trim(),
+          address_line_2: addressLine2.trim() || undefined,
+          city: city.trim() || undefined,
+          state: state.trim() || undefined,
+          postal_code: postalCode.trim() || undefined,
+          country: country.trim() || undefined,
+        } : undefined
+      };
+      
+      const res = await createParty(payload);
+      if (res.is_success && res.result) {
+        toast.success("Party created");
+        const party = res.result;
+        
+        // Reset form
+        setFirstName("");
+        setLastName("");
+        setEmail("");
+        setPhone("");
+        setSecondaryContact("");
+        setDob("");
+        setIdentityType("");
+        setIdentity("");
+        setAddressLine1("");
+        setAddressLine2("");
+        setCity("");
+        setState("");
+        setPostalCode("");
+        setCountry("");
+        setShowDetailedAddress(false);
+        setErrors({});
+        
+        if (onSuccess) {
+          onSuccess({ ...party, currencyDisplay });
+        }
+        
+        onClose();
+      } 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);
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      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={firstName}
+              onChange={(e) => setFirstName(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={lastName}
+              onChange={(e) => setLastName(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={email}
+              onChange={(e) => setEmail(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={phone}
+              onChange={(e) => setPhone(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={secondaryContact}
+              onChange={(e) => setSecondaryContact(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={dob}
+              onChange={(e) => setDob(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={identityType}
+                onChange={(e) => setIdentityType(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={identity}
+                onChange={(e) => setIdentity(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={() => setShowDetailedAddress(!showDetailedAddress)}
+                className="text-xs font-semibold text-primary-600 hover:text-primary-700 transition-colors"
+              >
+                {showDetailedAddress ? "Quick Add Address" : "Add Detailed Address"}
+              </button>
+            </div>
+            {!showDetailedAddress ? (
+              <Input
+                placeholder="Enter complete primary address..."
+                value={addressLine1}
+                onChange={(e) => setAddressLine1(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={addressLine1}
+                  onChange={(e) => setAddressLine1(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={addressLine2}
+                  onChange={(e) => setAddressLine2(e.target.value)}
+                  error={errors['address.address_line_2']?.[0]}
+                />
+                <div className="grid grid-cols-2 gap-3">
+                  <Input
+                    label="City"
+                    placeholder="City"
+                    value={city}
+                    onChange={(e) => setCity(e.target.value)}
+                    error={errors['address.city']?.[0]}
+                  />
+                  <Input
+                    label="State / Province"
+                    placeholder="State or Province"
+                    value={state}
+                    onChange={(e) => setState(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={postalCode}
+                    onChange={(e) => setPostalCode(e.target.value)}
+                    error={errors['address.postal_code']?.[0]}
+                  />
+                  <Input
+                    label="Country"
+                    placeholder="Country"
+                    value={country}
+                    onChange={(e) => setCountry(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" || partyType === "other") && (
+            <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) => {
+                setCurrencyId(val as string | number);
+                setCurrencyDisplay(selectedObj);
+              }}
+              key={currencyDisplay ? currencyDisplay.code : 'empty'}
+              defaultValue={currencyDisplay || undefined}
+              error={errors.default_currency_id?.[0]}
+            />
+          )}
+        </div>
+        <ModalFooter>
+          <Button
+            variant="flat"
+            color="default"
+            onClick={onClose}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleQuickAdd} isDisabled={isCreating || !firstName.trim()}>
+            {isCreating ? "Creating…" : "Create & Select"}
+          </Button>
+        </ModalFooter>
+      </div>
+    </Modal>
+  );
+}

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

@@ -28,6 +28,7 @@ interface UomPickerProps {
   uomGroupId?: number | null;
   pickerZIndex?: number;
   baseUnitsOnly?: boolean;
+  isDisabled?: boolean;
 }
 
 export function UomPicker({
@@ -41,6 +42,7 @@ export function UomPicker({
   uomGroupId,
   pickerZIndex,
   baseUnitsOnly = false,
+  isDisabled = false,
 }: UomPickerProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -90,9 +92,11 @@ export function UomPicker({
     }
     setIsCreating(true);
     try {
-      // 1. Create Group
+      // 1. Create Group (which automatically creates the base UOM on the backend)
       const groupRes = await createUomGroup({
-        name: quickAddData.new_group_name.trim()
+        name: quickAddData.new_group_name.trim(),
+        base_uom_name: quickAddData.name.trim(),
+        base_uom_code: quickAddData.abbreviation.trim()
       });
       
       if (!groupRes.is_success || !groupRes.result) {
@@ -101,26 +105,21 @@ export function UomPicker({
         return;
       }
       
+      toast.success("UOM created");
+      
       const newGroupId = groupRes.result.id;
-
-      // 2. Create UOM (as base unit for the new group)
-      const res = await createUom({
-        name: quickAddData.name.trim(),
-        abbreviation: quickAddData.abbreviation.trim(),
-        conversion_factor: 1,
-        uom_group_id: newGroupId,
-        base_uom_id: null,
-        status: quickAddData.status,
+      const baseUomId = groupRes.result.base_uom?.id || -1;
+      
+      onChange({ 
+        id: baseUomId, 
+        name: quickAddData.name.trim(), 
+        abbreviation: quickAddData.abbreviation.trim(), 
+        uom_group_id: newGroupId 
       });
-      if (res.is_success && res.result) {
-        toast.success("UOM created");
-        onChange({ id: res.result.id, name: res.result.name, abbreviation: res.result.abbreviation, uom_group_id: res.result.uom_group_id });
-        setIsQuickAddOpen(false);
-        setQuickAddData({ name: "", abbreviation: "", new_group_name: "", status: "active" });
-        setIsOpen(false);
-      } else {
-        toast.error(res.message || "Failed to create");
-      }
+
+      setIsQuickAddOpen(false);
+      setQuickAddData({ name: "", abbreviation: "", new_group_name: "", status: "active" });
+      setIsOpen(false);
     } catch (e: any) {
       toast.error(e.message || "Error creating UOM");
     }
@@ -149,6 +148,7 @@ export function UomPicker({
         value={displayValue || null}
         placeholder={placeholder}
         isRequired={isRequired}
+        disabled={isDisabled}
         onClick={handleOpen}
         onClear={value ? handleClear : undefined}
       />