@apptimate/ui 5.4.0 → 5.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {
@@ -8,6 +8,7 @@
     "apexcharts": "^5.15.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.14.0",
     "react": "^19.2.5",

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

@@ -49,6 +49,10 @@ export function PartyPicker({
   const [quickAddLastName, setQuickAddLastName] = useState("");
   const [quickAddEmail, setQuickAddEmail] = useState("");
   const [quickAddPhone, setQuickAddPhone] = useState("");
+  const [quickAddSecondaryContact, setQuickAddSecondaryContact] = useState("");
+  const [quickAddGender, setQuickAddGender] = useState("");
+  const [quickAddDOB, setQuickAddDOB] = useState("");
+  const [errors, setErrors] = useState<Record<string, string[]>>({});
   const [isCreating, setIsCreating] = useState(false);
 
   const fetchData = useCallback(async (query: string = "") => {
@@ -90,12 +94,16 @@ export function PartyPicker({
   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,
+        gender: quickAddGender || undefined,
+        date_of_birth: quickAddDOB || undefined,
         type: [partyType === "all" ? "customer" : partyType],
         status: "active"
       };
@@ -110,7 +118,13 @@ export function PartyPicker({
         setQuickAddLastName("");
         setQuickAddEmail("");
         setQuickAddPhone("");
+        setQuickAddSecondaryContact("");
+        setQuickAddGender("");
+        setQuickAddDOB("");
+        setErrors({});
         setIsOpen(false);
+      } else if ((res as any).errors) {
+        setErrors((res as any).errors);
       } else {
         toast.error(res.message || "Failed to create");
       }
@@ -157,6 +171,10 @@ export function PartyPicker({
               setQuickAddLastName(""); 
               setQuickAddEmail("");
               setQuickAddPhone("");
+              setQuickAddSecondaryContact("");
+              setQuickAddGender("");
+              setQuickAddDOB("");
+              setErrors({});
             }}
             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}`}
@@ -207,12 +225,14 @@ export function PartyPicker({
               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]}
             />
           </div>
           <div className="grid grid-cols-2 gap-3">
@@ -222,14 +242,47 @@ export function PartyPicker({
               placeholder="Email address"
               value={quickAddEmail}
               onChange={(e) => setQuickAddEmail(e.target.value)}
+              error={errors.email?.[0]}
             />
             <Input
-              label="Phone"
-              placeholder="Phone number"
+              label="Primary Contact"
+              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]}
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-sm font-semibold text-gray-700">Gender</label>
+            <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"
+            >
+              <option value="">Select gender</option>
+              <option value="male">Male</option>
+              <option value="female">Female</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>}
+          </div>
           <ModalFooter>
             <Button
               variant="flat"