@apptimate/ui 6.5.0 → 6.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {

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

@@ -51,18 +51,45 @@ export function PartyPicker({
   const [quickAddEmail, setQuickAddEmail] = useState("");
   const [quickAddPhone, setQuickAddPhone] = useState("");
   const [quickAddSecondaryContact, setQuickAddSecondaryContact] = useState("");
-  const [quickAddGender, setQuickAddGender] = 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 && !hasInitializedQuickAddCurrency.current) {
-      hasInitializedQuickAddCurrency.current = true;
+    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) {
@@ -89,8 +116,18 @@ export function PartyPicker({
             }
           }
         });
+      }
+      
+      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]);
+  }, [isQuickAddOpen, fieldConfigs.length]);
 
   const fetchData = useCallback(async (query: string = "") => {
     setIsLoading(true);
@@ -121,12 +158,17 @@ export function PartyPicker({
 
   const handleSelect = (party: any) => {
     onChange({
-      id: party.id,
-      name: party.name,
-      code: party.code,
-      type: party.type,
-      default_currency_id: party.default_currency_id,
-      default_currency: party.default_currency,
+      id: Number(party.id),
+      name: String(party.name || ""),
+      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.default_currency_id ? Number(party.default_currency_id) : undefined,
+      default_currency: party.default_currency ? {
+        id: Number(party.default_currency.id),
+        code: String(party.default_currency.code),
+        name: String(party.default_currency.name),
+        symbol: String(party.default_currency.symbol),
+      } : undefined,
     });
     setIsOpen(false);
   };
@@ -146,11 +188,20 @@ export function PartyPicker({
         email: quickAddEmail.trim() || undefined,
         primary_contact: quickAddPhone.trim() || undefined,
         secondary_contact: quickAddSecondaryContact.trim() || undefined,
-        gender: quickAddGender || undefined,
         date_of_birth: quickAddDOB || undefined,
+        identity_type: quickAddIdentityType || undefined,
+        identity: quickAddIdentity.trim() || undefined,
         default_currency_id: quickAddCurrencyId || undefined,
-        type: [partyType === "all" ? "customer" : partyType],
-        status: "active"
+        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) {
@@ -158,16 +209,16 @@ export function PartyPicker({
         const party = res.result;
         const partyName = party.name || party.full_name || [party.first_name, party.last_name].filter(Boolean).join(" ");
         onChange({
-          id: party.id,
-          name: partyName,
-          code: party.code,
-          type: party.type,
-          default_currency_id: quickAddCurrencyDisplay?.id,
+          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: quickAddCurrencyDisplay.id,
-            code: quickAddCurrencyDisplay.code,
-            name: quickAddCurrencyDisplay.name,
-            symbol: quickAddCurrencyDisplay.symbol
+            id: Number(quickAddCurrencyDisplay.id),
+            code: String(quickAddCurrencyDisplay.code),
+            name: String(quickAddCurrencyDisplay.name),
+            symbol: String(quickAddCurrencyDisplay.symbol)
           } : undefined
         });
         setIsQuickAddOpen(false);
@@ -176,8 +227,16 @@ export function PartyPicker({
         setQuickAddEmail("");
         setQuickAddPhone("");
         setQuickAddSecondaryContact("");
-        setQuickAddGender("");
         setQuickAddDOB("");
+        setQuickAddIdentityType("");
+        setQuickAddIdentity("");
+        setQuickAddAddressLine1("");
+        setQuickAddAddressLine2("");
+        setQuickAddCity("");
+        setQuickAddState("");
+        setQuickAddPostalCode("");
+        setQuickAddCountry("");
+        setShowQuickAddDetailedAddress(false);
         setErrors({});
         setIsOpen(false);
       } else if ((res as any).errors) {
@@ -229,8 +288,16 @@ export function PartyPicker({
               setQuickAddEmail("");
               setQuickAddPhone("");
               setQuickAddSecondaryContact("");
-              setQuickAddGender("");
               setQuickAddDOB("");
+              setQuickAddIdentityType("");
+              setQuickAddIdentity("");
+              setQuickAddAddressLine1("");
+              setQuickAddAddressLine2("");
+              setQuickAddCity("");
+              setQuickAddState("");
+              setQuickAddPostalCode("");
+              setQuickAddCountry("");
+              setShowQuickAddDetailedAddress(false);
               setErrors({});
             }}
             className="p-1.5 rounded-lg bg-primary-50 text-primary-600 hover:bg-primary-100 transition-colors flex-shrink-0"
@@ -256,7 +323,11 @@ export function PartyPicker({
               <PickerItem
                 key={party.id}
                 label={party.name}
-                sublabel={party.code ? `Code: ${party.code}` : undefined}
+                sublabel={[
+                  party.code ? `Code: ${party.code}` : null,
+                  party.phone ? `Contact: ${party.phone}` : null,
+                  party.identity ? `Identity: ${party.identity}` : null
+                ].filter(Boolean).join(" | ") || undefined}
                 isSelected={String(value) === String(party.id)}
                 onClick={() => handleSelect(party)}
               />
@@ -276,71 +347,181 @@ export function PartyPicker({
       >
         <div className="space-y-4">
           <div className="grid grid-cols-2 gap-3">
-            <Input
-              label="First Name"
-              isRequired
-              placeholder={`Enter ${label.toLowerCase()} first name`}
-              value={quickAddFirstName}
-              onChange={(e) => setQuickAddFirstName(e.target.value)}
-              error={errors.first_name?.[0]}
-            />
-            <Input
-              label="Last Name"
-              placeholder={`Enter ${label.toLowerCase()} last name`}
-              value={quickAddLastName}
-              onChange={(e) => setQuickAddLastName(e.target.value)}
-              error={errors.last_name?.[0]}
-            />
+            {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">
-            <Input
-              label="Email"
-              type="email"
-              placeholder="Email address"
-              value={quickAddEmail}
-              onChange={(e) => setQuickAddEmail(e.target.value)}
-              error={errors.email?.[0]}
-            />
-            <Input
-              label="Primary Contact"
-              placeholder="Primary phone number"
-              value={quickAddPhone}
-              onChange={(e) => setQuickAddPhone(e.target.value)}
-              error={errors.primary_contact?.[0]}
-            />
+            {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">
-            <Input
-              label="Secondary Contact"
-              placeholder="Alternative phone (optional)"
-              value={quickAddSecondaryContact}
-              onChange={(e) => setQuickAddSecondaryContact(e.target.value)}
-              error={errors.secondary_contact?.[0]}
-            />
-            <Input
-              label="Date of Birth"
-              type="date"
-              value={quickAddDOB}
-              onChange={(e) => setQuickAddDOB(e.target.value)}
-              error={errors.date_of_birth?.[0]}
-            />
+            {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>
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-1">
-              <label className="text-sm font-semibold text-gray-700">Gender</label>
+          {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={quickAddGender}
-                onChange={(e) => setQuickAddGender(e.target.value)}
-                className="w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white"
+                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 gender</option>
-                <option value="male">Male</option>
-                <option value="female">Female</option>
+                <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>
-                <option value="prefer_not_to_say">Prefer not to say</option>
               </select>
-              {errors.gender?.[0] && <p className="text-xs text-red-500">{errors.gender[0]}</p>}
+              <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"