nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/ProfilePage/components/ProfilePage.js

@@ -0,0 +1,1336 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { cn } from "../../../utils/cn";
+import { AbstractAnimatedBackground } from "../../AbstractAnimatedBackground";
+import { Button } from "../../Button";
+import { useProfileStore } from "../store";
+import { profilePageTheme } from "../theme";
+import { AddressCard } from "./AddressCard";
+import { PhoneCard } from "./PhoneCard";
+import { ProfileHeader } from "./ProfileHeader";
+gsap.registerPlugin(useGSAP);
+export function ProfilePage({ meAction, addProfileAction, updateProfileAction, addAddressAction, updateAddressAction, deleteAddressAction, addPhoneAction, updatePhoneAction, deletePhoneAction, uploadFileAction, updateFileAction, deleteFileAction, fileProxyBasePath = "/file-proxy", onProfileUpdated, onAddressAdded, onAddressUpdated, onAddressDeleted, onPhoneAdded, onPhoneUpdated, onPhoneDeleted, onFileUploaded, onFileUpdated, onFileDeleted, onProfilePictureChanged, showBackground = false, allowProfileEdit = true, allowAddressEdit = true, allowPhoneEdit = true, allowFileUpload = true, changePasswordHref, devicesHref, onChangePassword, onViewDevices }) {
+    const theme = profilePageTheme;
+    const containerRef = useRef(null);
+    const cardRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const store = useProfileStore();
+    const [editingAddress, setEditingAddress] = useState(null);
+    const [editingPhone, setEditingPhone] = useState(null);
+    const [showAddressModal, setShowAddressModal] = useState(false);
+    const [showPhoneModal, setShowPhoneModal] = useState(false);
+    const mouseDownTargetRef = useRef(null);
+    const [profileFormData, setProfileFormData] = useState({});
+    const [addressFormData, setAddressFormData] = useState({});
+    const [phoneFormData, setPhoneFormData] = useState({});
+    const fetchProfile = useEffectEvent(()=>{
+        meAction.start({
+            payload: undefined,
+            onAfterHandle: (response)=>{
+                const data = response.data;
+                if (!data?.user?.id) return;
+                const { user, profile, addresses, phones, files, roles } = data;
+                store.setUser(user);
+                store.setProfile(profile);
+                store.setAddresses(addresses);
+                store.setPhones(phones);
+                store.setFiles(files);
+                store.setRoles(roles || []);
+                const profilePics = files.filter((f)=>f.type === "profile_picture");
+                const profilePic = profilePics.length > 0 ? profilePics.sort((a, b)=>new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())[0] : null;
+                store.setProfilePicture(profilePic || null);
+                if (profile) {
+                    setProfileFormData({
+                        firstName: profile.firstName,
+                        lastName: profile.lastName
+                    });
+                }
+            }
+        });
+    });
+    useEffect(()=>{
+        fetchProfile();
+    }, []);
+    useGSAP(()=>{
+        if (!cardRef.current) return;
+        gsap.fromTo(cardRef.current, {
+            opacity: 0,
+            y: 30
+        }, {
+            opacity: 1,
+            y: 0,
+            duration: 0.6,
+            ease: "power3.out"
+        });
+    }, {
+        scope: containerRef
+    });
+    const handleSaveProfile = ()=>{
+        if (!store.user?.id) return;
+        const hasExistingProfile = !!store.profile?.id;
+        const previousProfile = store.profile;
+        const optimisticProfile = {
+            ...previousProfile,
+            ...profileFormData
+        };
+        store.setProfile(optimisticProfile);
+        store.setEditingProfile(false);
+        if (hasExistingProfile && previousProfile?.id) {
+            updateProfileAction.start({
+                payload: {
+                    id: previousProfile.id,
+                    ...profileFormData
+                },
+                onAfterHandle: (response)=>{
+                    const record = response.data;
+                    if (record) {
+                        store.setProfile(record);
+                        onProfileUpdated?.(record);
+                    }
+                },
+                onErrorHandle: ()=>{
+                    store.setProfile(previousProfile);
+                }
+            });
+        } else {
+            addProfileAction.start({
+                payload: {
+                    userId: store.user.id,
+                    ...profileFormData
+                },
+                onAfterHandle: (response)=>{
+                    const record = response.data;
+                    if (record) {
+                        store.setProfile(record);
+                        onProfileUpdated?.(record);
+                    }
+                },
+                onErrorHandle: ()=>{
+                    store.setProfile(previousProfile);
+                }
+            });
+        }
+    };
+    const handleAddAddress = ()=>{
+        if (!store.user?.id) return;
+        const tempId = `temp-${Date.now()}`;
+        const optimisticAddress = {
+            id: tempId,
+            ...addressFormData,
+            ownerType: "user",
+            ownerId: store.user.id,
+            name: addressFormData.name || "New Address"
+        };
+        store.addAddress(optimisticAddress);
+        setShowAddressModal(false);
+        setAddressFormData({});
+        addAddressAction.start({
+            payload: {
+                ...addressFormData,
+                ownerType: "user",
+                ownerId: store.user.id,
+                name: addressFormData.name || "New Address"
+            },
+            onAfterHandle: (response)=>{
+                const record = response.data;
+                if (record) {
+                    store.removeAddress(tempId);
+                    store.addAddress(record);
+                    onAddressAdded?.(record);
+                }
+            },
+            onErrorHandle: ()=>{
+                store.removeAddress(tempId);
+            }
+        });
+    };
+    const handleUpdateAddress = ()=>{
+        if (!editingAddress?.id) return;
+        const addressId = editingAddress.id;
+        const previousAddress = store.addresses.find((a)=>a.id === addressId);
+        const optimisticAddress = {
+            ...previousAddress,
+            ...addressFormData,
+            id: addressId
+        };
+        store.updateAddress(optimisticAddress);
+        setEditingAddress(null);
+        setShowAddressModal(false);
+        setAddressFormData({});
+        updateAddressAction.start({
+            payload: {
+                id: addressId,
+                ...addressFormData
+            },
+            onAfterHandle: (response)=>{
+                const record = response.data;
+                if (record) {
+                    store.updateAddress(record);
+                    onAddressUpdated?.(record);
+                }
+            },
+            onErrorHandle: ()=>{
+                if (previousAddress) store.updateAddress(previousAddress);
+            }
+        });
+    };
+    const handleDeleteAddress = (addressId)=>{
+        deleteAddressAction.start({
+            payload: {
+                id: addressId
+            },
+            onAfterHandle: ()=>{
+                store.removeAddress(addressId);
+                onAddressDeleted?.(addressId);
+            }
+        });
+    };
+    const handleAddPhone = ()=>{
+        if (!store.user?.id) return;
+        const tempId = `temp-${Date.now()}`;
+        const optimisticPhone = {
+            id: tempId,
+            ...phoneFormData,
+            ownerType: "user",
+            ownerId: store.user.id,
+            name: phoneFormData.name || "New Phone",
+            number: phoneFormData.number || "",
+            countryCode: phoneFormData.countryCode || "+1"
+        };
+        store.addPhone(optimisticPhone);
+        setShowPhoneModal(false);
+        setPhoneFormData({});
+        addPhoneAction.start({
+            payload: {
+                ...phoneFormData,
+                ownerType: "user",
+                ownerId: store.user.id,
+                name: phoneFormData.name || "New Phone",
+                number: phoneFormData.number || "",
+                countryCode: phoneFormData.countryCode || "+1"
+            },
+            onAfterHandle: (response)=>{
+                const record = response.data;
+                if (record) {
+                    store.removePhone(tempId);
+                    store.addPhone(record);
+                    onPhoneAdded?.(record);
+                }
+            },
+            onErrorHandle: ()=>{
+                store.removePhone(tempId);
+            }
+        });
+    };
+    const handleUpdatePhone = ()=>{
+        if (!editingPhone?.id) return;
+        const phoneId = editingPhone.id;
+        const previousPhone = store.phones.find((p)=>p.id === phoneId);
+        const optimisticPhone = {
+            ...previousPhone,
+            ...phoneFormData,
+            id: phoneId
+        };
+        store.updatePhone(optimisticPhone);
+        setEditingPhone(null);
+        setShowPhoneModal(false);
+        setPhoneFormData({});
+        updatePhoneAction.start({
+            payload: {
+                id: phoneId,
+                ...phoneFormData
+            },
+            onAfterHandle: (response)=>{
+                const record = response.data;
+                if (record) {
+                    store.updatePhone(record);
+                    onPhoneUpdated?.(record);
+                }
+            },
+            onErrorHandle: ()=>{
+                if (previousPhone) store.updatePhone(previousPhone);
+            }
+        });
+    };
+    const handleDeletePhone = (phoneId)=>{
+        deletePhoneAction.start({
+            payload: {
+                id: phoneId
+            },
+            onAfterHandle: ()=>{
+                store.removePhone(phoneId);
+                onPhoneDeleted?.(phoneId);
+            }
+        });
+    };
+    const handleUploadFile = (event)=>{
+        const file = event.target.files?.[0];
+        if (!file || !uploadFileAction) return;
+        const formData = new FormData();
+        formData.append("files", file);
+        formData.append("data", JSON.stringify({
+            type: "profile_picture"
+        }));
+        uploadFileAction.start({
+            payload: formData,
+            onAfterHandle: (response)=>{
+                const record = response.data;
+                if (record) {
+                    store.addFile(record);
+                    onFileUploaded?.(record);
+                    onProfilePictureChanged?.(record);
+                }
+            }
+        });
+    };
+    const handleSetAsProfilePicture = (file)=>{
+        if (!updateFileAction) return;
+        const previousFile = store.files.find((f)=>f.id === file.id);
+        const optimisticFile = {
+            ...file,
+            type: "profile_picture"
+        };
+        store.updateFile(optimisticFile);
+        updateFileAction.start({
+            payload: {
+                id: file.id,
+                type: "profile_picture"
+            },
+            onAfterHandle: (response)=>{
+                const record = response.data;
+                if (record) {
+                    store.updateFile(record);
+                    onFileUpdated?.(record);
+                    onProfilePictureChanged?.(record);
+                }
+            },
+            onErrorHandle: ()=>{
+                if (previousFile) store.updateFile(previousFile);
+            }
+        });
+    };
+    const handleDeleteFile = (fileId)=>{
+        if (!deleteFileAction) return;
+        deleteFileAction.start({
+            payload: {
+                id: fileId
+            },
+            onAfterHandle: ()=>{
+                store.removeFile(fileId);
+                onFileDeleted?.(fileId);
+            }
+        });
+    };
+    const getFileUrl = (file)=>`${fileProxyBasePath}/${file.id}`;
+    const isImageFile = (file)=>{
+        const imageTypes = [
+            "image",
+            "profile_picture"
+        ];
+        return imageTypes.includes(file.type || "") || file.mimeType?.startsWith("image/");
+    };
+    const openEditAddress = (address)=>{
+        setEditingAddress(address);
+        setAddressFormData({
+            name: address.name,
+            street: address.street,
+            city: address.city,
+            state: address.state,
+            zip: address.zip,
+            country: address.country
+        });
+        setShowAddressModal(true);
+    };
+    const openEditPhone = (phone)=>{
+        setEditingPhone(phone);
+        setPhoneFormData({
+            name: phone.name,
+            number: phone.number,
+            countryCode: phone.countryCode,
+            type: phone.type,
+            extension: phone.extension
+        });
+        setShowPhoneModal(true);
+    };
+    const openAddAddress = ()=>{
+        setEditingAddress(null);
+        setAddressFormData({});
+        setShowAddressModal(true);
+    };
+    const openAddPhone = ()=>{
+        setEditingPhone(null);
+        setPhoneFormData({});
+        setShowPhoneModal(true);
+    };
+    return /*#__PURE__*/ _jsxs("main", {
+        ref: containerRef,
+        className: cn(theme.container.base),
+        "aria-label": "Profile page",
+        children: [
+            showBackground && /*#__PURE__*/ _jsx(AbstractAnimatedBackground, {}),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.container.wrapper,
+                children: /*#__PURE__*/ _jsx("article", {
+                    ref: cardRef,
+                    className: cn(theme.card.base, theme.card.padding, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+                    children: meAction.state.isPending ? /*#__PURE__*/ _jsxs("div", {
+                        className: theme.loading.container,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: theme.loading.spinner
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.loading.text,
+                                children: "Loading profile..."
+                            })
+                        ]
+                    }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(ProfileHeader, {
+                                user: store.user || undefined,
+                                profile: store.profile || undefined,
+                                profilePicture: store.profilePicture || undefined,
+                                fileProxyBasePath: fileProxyBasePath,
+                                onUploadPicture: allowFileUpload && uploadFileAction ? ()=>fileInputRef.current?.click() : undefined,
+                                isUploading: uploadFileAction?.state.isPending
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                ref: fileInputRef,
+                                type: "file",
+                                accept: "image/*",
+                                className: "hidden",
+                                onChange: handleUploadFile
+                            }),
+                            /*#__PURE__*/ _jsxs("section", {
+                                className: theme.section.container,
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.section.titleWrapper,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("h2", {
+                                                className: theme.section.title,
+                                                children: "Profile Information"
+                                            }),
+                                            allowProfileEdit && !store.isEditingProfile && /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>store.setEditingProfile(true),
+                                                className: theme.section.addButton,
+                                                children: "Edit"
+                                            })
+                                        ]
+                                    }),
+                                    store.isEditingProfile ? /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.profileForm.container,
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: theme.profileForm.grid,
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: theme.profileForm.field.container,
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("label", {
+                                                                htmlFor: "firstName",
+                                                                className: theme.profileForm.field.label,
+                                                                children: "First Name"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("input", {
+                                                                id: "firstName",
+                                                                type: "text",
+                                                                value: profileFormData.firstName || "",
+                                                                onChange: (e)=>setProfileFormData((prev)=>({
+                                                                            ...prev,
+                                                                            firstName: e.target.value
+                                                                        })),
+                                                                className: theme.profileForm.field.input,
+                                                                placeholder: "Enter first name"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: theme.profileForm.field.container,
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("label", {
+                                                                htmlFor: "lastName",
+                                                                className: theme.profileForm.field.label,
+                                                                children: "Last Name"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("input", {
+                                                                id: "lastName",
+                                                                type: "text",
+                                                                value: profileFormData.lastName || "",
+                                                                onChange: (e)=>setProfileFormData((prev)=>({
+                                                                            ...prev,
+                                                                            lastName: e.target.value
+                                                                        })),
+                                                                className: theme.profileForm.field.input,
+                                                                placeholder: "Enter last name"
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: theme.profileForm.actions,
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        variant: "outline",
+                                                        size: "sm",
+                                                        onClick: ()=>store.setEditingProfile(false),
+                                                        children: "Cancel"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        variant: "primary",
+                                                        size: "sm",
+                                                        onClick: handleSaveProfile,
+                                                        disabled: updateProfileAction.state.isPending || addProfileAction.state.isPending,
+                                                        children: updateProfileAction.state.isPending || addProfileAction.state.isPending ? "Saving..." : "Save Changes"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }) : /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.profileForm.grid,
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("p", {
+                                                        className: "text-xs text-zinc-500 dark:text-zinc-400",
+                                                        children: "First Name"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("p", {
+                                                        className: "text-sm font-medium text-zinc-900 dark:text-white",
+                                                        children: store.profile?.firstName || "Not set"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("p", {
+                                                        className: "text-xs text-zinc-500 dark:text-zinc-400",
+                                                        children: "Last Name"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("p", {
+                                                        className: "text-sm font-medium text-zinc-900 dark:text-white",
+                                                        children: store.profile?.lastName || "Not set"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("section", {
+                                className: theme.section.container,
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.section.titleWrapper,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("h2", {
+                                                className: theme.section.title,
+                                                children: "Addresses"
+                                            }),
+                                            allowAddressEdit && /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: openAddAddress,
+                                                className: theme.section.addButton,
+                                                children: "+ Add Address"
+                                            })
+                                        ]
+                                    }),
+                                    store.addresses.length === 0 ? /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.section.empty.container,
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("svg", {
+                                                className: theme.section.empty.icon,
+                                                viewBox: "0 0 24 24",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                strokeWidth: "1.5",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("title", {
+                                                        children: "No addresses"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("path", {
+                                                        strokeLinecap: "round",
+                                                        strokeLinejoin: "round",
+                                                        d: "M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("path", {
+                                                        strokeLinecap: "round",
+                                                        strokeLinejoin: "round",
+                                                        d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx("p", {
+                                                className: theme.section.empty.text,
+                                                children: "No addresses added yet"
+                                            })
+                                        ]
+                                    }) : /*#__PURE__*/ _jsx("div", {
+                                        className: theme.section.content,
+                                        children: store.addresses.map((address)=>/*#__PURE__*/ _jsx(AddressCard, {
+                                                address: address,
+                                                onEdit: openEditAddress,
+                                                onDelete: handleDeleteAddress,
+                                                isUpdating: updateAddressAction.state.isPending,
+                                                isDeleting: deleteAddressAction.state.isPending,
+                                                allowEdit: allowAddressEdit
+                                            }, address.id))
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("section", {
+                                className: theme.section.container,
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.section.titleWrapper,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("h2", {
+                                                className: theme.section.title,
+                                                children: "Phone Numbers"
+                                            }),
+                                            allowPhoneEdit && /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: openAddPhone,
+                                                className: theme.section.addButton,
+                                                children: "+ Add Phone"
+                                            })
+                                        ]
+                                    }),
+                                    store.phones.length === 0 ? /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.section.empty.container,
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("svg", {
+                                                className: theme.section.empty.icon,
+                                                viewBox: "0 0 24 24",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                strokeWidth: "1.5",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("title", {
+                                                        children: "No phones"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("path", {
+                                                        strokeLinecap: "round",
+                                                        strokeLinejoin: "round",
+                                                        d: "M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx("p", {
+                                                className: theme.section.empty.text,
+                                                children: "No phone numbers added yet"
+                                            })
+                                        ]
+                                    }) : /*#__PURE__*/ _jsx("div", {
+                                        className: theme.section.content,
+                                        children: store.phones.map((phone)=>/*#__PURE__*/ _jsx(PhoneCard, {
+                                                phone: phone,
+                                                onEdit: openEditPhone,
+                                                onDelete: handleDeletePhone,
+                                                isUpdating: updatePhoneAction.state.isPending,
+                                                isDeleting: deletePhoneAction.state.isPending,
+                                                allowEdit: allowPhoneEdit
+                                            }, phone.id))
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("section", {
+                                className: theme.section.container,
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.section.titleWrapper,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("h2", {
+                                                className: theme.section.title,
+                                                children: "My Files"
+                                            }),
+                                            allowFileUpload && uploadFileAction && /*#__PURE__*/ _jsx("button", {
+                                                type: "button",
+                                                onClick: ()=>fileInputRef.current?.click(),
+                                                className: theme.section.addButton,
+                                                children: "+ Upload File"
+                                            })
+                                        ]
+                                    }),
+                                    store.files.length === 0 ? /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.section.empty.container,
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("svg", {
+                                                className: theme.section.empty.icon,
+                                                viewBox: "0 0 24 24",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                strokeWidth: "1.5",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("title", {
+                                                        children: "No files"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("path", {
+                                                        strokeLinecap: "round",
+                                                        strokeLinejoin: "round",
+                                                        d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx("p", {
+                                                className: theme.section.empty.text,
+                                                children: "No files uploaded yet"
+                                            })
+                                        ]
+                                    }) : /*#__PURE__*/ _jsx("div", {
+                                        className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4",
+                                        children: store.files.map((file)=>/*#__PURE__*/ _jsxs("div", {
+                                                className: cn("group relative rounded-lg overflow-hidden border border-zinc-200 dark:border-zinc-700", "hover:border-zinc-300 dark:hover:border-zinc-600 transition-all", file.type === "profile_picture" && "ring-2 ring-blue-500"),
+                                                children: [
+                                                    isImageFile(file) ? /*#__PURE__*/ _jsx("img", {
+                                                        src: getFileUrl(file),
+                                                        alt: file.originalName || file.name,
+                                                        className: "w-full aspect-square object-cover"
+                                                    }) : /*#__PURE__*/ _jsx("div", {
+                                                        className: "w-full aspect-square bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center",
+                                                        children: /*#__PURE__*/ _jsxs("svg", {
+                                                            className: "w-8 h-8 text-zinc-400",
+                                                            viewBox: "0 0 24 24",
+                                                            fill: "none",
+                                                            stroke: "currentColor",
+                                                            strokeWidth: "1.5",
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx("title", {
+                                                                    children: "File"
+                                                                }),
+                                                                /*#__PURE__*/ _jsx("path", {
+                                                                    strokeLinecap: "round",
+                                                                    strokeLinejoin: "round",
+                                                                    d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                                                                })
+                                                            ]
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("div", {
+                                                        className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100",
+                                                        children: /*#__PURE__*/ _jsxs("div", {
+                                                            className: "flex gap-1",
+                                                            children: [
+                                                                isImageFile(file) && store.profilePicture?.id !== file.id && updateFileAction && /*#__PURE__*/ _jsx("button", {
+                                                                    type: "button",
+                                                                    onClick: ()=>handleSetAsProfilePicture(file),
+                                                                    disabled: updateFileAction.state.isPending,
+                                                                    className: "p-2 bg-white dark:bg-zinc-800 rounded-full shadow-md hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors",
+                                                                    title: "Set as profile picture",
+                                                                    children: /*#__PURE__*/ _jsxs("svg", {
+                                                                        className: "w-4 h-4 text-blue-600",
+                                                                        viewBox: "0 0 24 24",
+                                                                        fill: "none",
+                                                                        stroke: "currentColor",
+                                                                        strokeWidth: "2",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsx("title", {
+                                                                                children: "Set as profile"
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("path", {
+                                                                                strokeLinecap: "round",
+                                                                                strokeLinejoin: "round",
+                                                                                d: "M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                }),
+                                                                deleteFileAction && /*#__PURE__*/ _jsx("button", {
+                                                                    type: "button",
+                                                                    onClick: ()=>handleDeleteFile(file.id),
+                                                                    disabled: deleteFileAction.state.isPending,
+                                                                    className: "p-2 bg-white dark:bg-zinc-800 rounded-full shadow-md hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors",
+                                                                    title: "Delete file",
+                                                                    children: /*#__PURE__*/ _jsxs("svg", {
+                                                                        className: "w-4 h-4 text-red-600",
+                                                                        viewBox: "0 0 24 24",
+                                                                        fill: "none",
+                                                                        stroke: "currentColor",
+                                                                        strokeWidth: "2",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsx("title", {
+                                                                                children: "Delete"
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("path", {
+                                                                                strokeLinecap: "round",
+                                                                                strokeLinejoin: "round",
+                                                                                d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
+                                                    }),
+                                                    file.type === "profile_picture" && /*#__PURE__*/ _jsx("div", {
+                                                        className: "absolute top-1 left-1 px-1.5 py-0.5 bg-blue-500 text-white text-xs rounded-full",
+                                                        children: "Profile"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("div", {
+                                                        className: "p-2 bg-white dark:bg-zinc-800",
+                                                        children: /*#__PURE__*/ _jsx("p", {
+                                                            className: "text-xs text-zinc-700 dark:text-zinc-300 truncate",
+                                                            children: file.originalName || file.name
+                                                        })
+                                                    })
+                                                ]
+                                            }, file.id))
+                                    })
+                                ]
+                            }),
+                            store.roles.length > 0 && /*#__PURE__*/ _jsxs("section", {
+                                className: theme.section.container,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: theme.section.titleWrapper,
+                                        children: /*#__PURE__*/ _jsx("h2", {
+                                            className: theme.section.title,
+                                            children: "My Roles"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "flex flex-wrap gap-2",
+                                        children: store.roles.map((role)=>/*#__PURE__*/ _jsxs("span", {
+                                                className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("svg", {
+                                                        className: "w-3.5 h-3.5",
+                                                        viewBox: "0 0 24 24",
+                                                        fill: "none",
+                                                        stroke: "currentColor",
+                                                        strokeWidth: "2",
+                                                        "aria-hidden": "true",
+                                                        children: /*#__PURE__*/ _jsx("path", {
+                                                            strokeLinecap: "round",
+                                                            strokeLinejoin: "round",
+                                                            d: "M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
+                                                        })
+                                                    }),
+                                                    role.name
+                                                ]
+                                            }, role.id))
+                                    })
+                                ]
+                            }),
+                            (changePasswordHref || onChangePassword || devicesHref || onViewDevices) && /*#__PURE__*/ _jsxs("section", {
+                                className: theme.section.container,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: theme.section.titleWrapper,
+                                        children: /*#__PURE__*/ _jsx("h2", {
+                                            className: theme.section.title,
+                                            children: "Account Settings"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: theme.accountSettings.container,
+                                        children: [
+                                            (changePasswordHref || onChangePassword) && /*#__PURE__*/ _jsxs("button", {
+                                                type: "button",
+                                                onClick: ()=>{
+                                                    if (onChangePassword) {
+                                                        onChangePassword();
+                                                    } else if (changePasswordHref) {
+                                                        window.location.href = changePasswordHref;
+                                                    }
+                                                },
+                                                className: theme.accountSettings.item,
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: theme.accountSettings.content,
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("div", {
+                                                                className: cn(theme.accountSettings.iconWrapper, "bg-blue-100 dark:bg-blue-900/30"),
+                                                                children: /*#__PURE__*/ _jsxs("svg", {
+                                                                    className: "w-5 h-5 text-blue-600 dark:text-blue-400",
+                                                                    fill: "none",
+                                                                    stroke: "currentColor",
+                                                                    viewBox: "0 0 24 24",
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx("title", {
+                                                                            children: "Change Password"
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx("path", {
+                                                                            strokeLinecap: "round",
+                                                                            strokeLinejoin: "round",
+                                                                            strokeWidth: 2,
+                                                                            d: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx("p", {
+                                                                        className: theme.accountSettings.title,
+                                                                        children: "Change Password"
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx("p", {
+                                                                        className: theme.accountSettings.description,
+                                                                        children: "Update your account password"
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs("svg", {
+                                                        className: theme.accountSettings.arrow,
+                                                        fill: "none",
+                                                        stroke: "currentColor",
+                                                        viewBox: "0 0 24 24",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("title", {
+                                                                children: "Go"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("path", {
+                                                                strokeLinecap: "round",
+                                                                strokeLinejoin: "round",
+                                                                strokeWidth: 2,
+                                                                d: "M9 5l7 7-7 7"
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            }),
+                                            (devicesHref || onViewDevices) && /*#__PURE__*/ _jsxs("button", {
+                                                type: "button",
+                                                onClick: ()=>{
+                                                    if (onViewDevices) {
+                                                        onViewDevices();
+                                                    } else if (devicesHref) {
+                                                        window.location.href = devicesHref;
+                                                    }
+                                                },
+                                                className: theme.accountSettings.item,
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: theme.accountSettings.content,
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("div", {
+                                                                className: cn(theme.accountSettings.iconWrapper, "bg-green-100 dark:bg-green-900/30"),
+                                                                children: /*#__PURE__*/ _jsxs("svg", {
+                                                                    className: "w-5 h-5 text-green-600 dark:text-green-400",
+                                                                    fill: "none",
+                                                                    stroke: "currentColor",
+                                                                    viewBox: "0 0 24 24",
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx("title", {
+                                                                            children: "Devices"
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx("path", {
+                                                                            strokeLinecap: "round",
+                                                                            strokeLinejoin: "round",
+                                                                            strokeWidth: 2,
+                                                                            d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx("p", {
+                                                                        className: theme.accountSettings.title,
+                                                                        children: "Active Sessions"
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx("p", {
+                                                                        className: theme.accountSettings.description,
+                                                                        children: "Manage your logged-in devices"
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs("svg", {
+                                                        className: theme.accountSettings.arrow,
+                                                        fill: "none",
+                                                        stroke: "currentColor",
+                                                        viewBox: "0 0 24 24",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("title", {
+                                                                children: "Go"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("path", {
+                                                                strokeLinecap: "round",
+                                                                strokeLinejoin: "round",
+                                                                strokeWidth: 2,
+                                                                d: "M9 5l7 7-7 7"
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            }),
+            showAddressModal && /*#__PURE__*/ _jsx("div", {
+                className: theme.modal.overlay,
+                onMouseDown: (e)=>{
+                    mouseDownTargetRef.current = e.target;
+                },
+                onClick: (e)=>{
+                    if (e.target === e.currentTarget && mouseDownTargetRef.current === e.target) {
+                        setShowAddressModal(false);
+                    }
+                },
+                onKeyDown: (e)=>e.key === "Escape" && setShowAddressModal(false),
+                role: "dialog",
+                "aria-modal": "true",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: theme.modal.container,
+                    role: "document",
+                    children: [
+                        /*#__PURE__*/ _jsx("h2", {
+                            className: theme.modal.title,
+                            children: editingAddress ? "Edit Address" : "Add Address"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: theme.modal.form,
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.profileForm.field.container,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("label", {
+                                            htmlFor: "addressName",
+                                            className: theme.profileForm.field.label,
+                                            children: "Name"
+                                        }),
+                                        /*#__PURE__*/ _jsx("input", {
+                                            id: "addressName",
+                                            type: "text",
+                                            value: addressFormData.name || "",
+                                            onChange: (e)=>setAddressFormData((prev)=>({
+                                                        ...prev,
+                                                        name: e.target.value
+                                                    })),
+                                            className: theme.profileForm.field.input,
+                                            placeholder: "e.g., Home, Work"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.profileForm.field.container,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("label", {
+                                            htmlFor: "street",
+                                            className: theme.profileForm.field.label,
+                                            children: "Street"
+                                        }),
+                                        /*#__PURE__*/ _jsx("input", {
+                                            id: "street",
+                                            type: "text",
+                                            value: addressFormData.street || "",
+                                            onChange: (e)=>setAddressFormData((prev)=>({
+                                                        ...prev,
+                                                        street: e.target.value
+                                                    })),
+                                            className: theme.profileForm.field.input,
+                                            placeholder: "Street address"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.profileForm.grid,
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: theme.profileForm.field.container,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("label", {
+                                                    htmlFor: "city",
+                                                    className: theme.profileForm.field.label,
+                                                    children: "City"
+                                                }),
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    id: "city",
+                                                    type: "text",
+                                                    value: addressFormData.city || "",
+                                                    onChange: (e)=>setAddressFormData((prev)=>({
+                                                                ...prev,
+                                                                city: e.target.value
+                                                            })),
+                                                    className: theme.profileForm.field.input,
+                                                    placeholder: "City"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: theme.profileForm.field.container,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("label", {
+                                                    htmlFor: "state",
+                                                    className: theme.profileForm.field.label,
+                                                    children: "State/Province"
+                                                }),
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    id: "state",
+                                                    type: "text",
+                                                    value: addressFormData.state || "",
+                                                    onChange: (e)=>setAddressFormData((prev)=>({
+                                                                ...prev,
+                                                                state: e.target.value
+                                                            })),
+                                                    className: theme.profileForm.field.input,
+                                                    placeholder: "State"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.profileForm.grid,
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: theme.profileForm.field.container,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("label", {
+                                                    htmlFor: "zip",
+                                                    className: theme.profileForm.field.label,
+                                                    children: "ZIP Code"
+                                                }),
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    id: "zip",
+                                                    type: "text",
+                                                    value: addressFormData.zip || "",
+                                                    onChange: (e)=>setAddressFormData((prev)=>({
+                                                                ...prev,
+                                                                zip: e.target.value
+                                                            })),
+                                                    className: theme.profileForm.field.input,
+                                                    placeholder: "ZIP"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: theme.profileForm.field.container,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("label", {
+                                                    htmlFor: "country",
+                                                    className: theme.profileForm.field.label,
+                                                    children: "Country"
+                                                }),
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    id: "country",
+                                                    type: "text",
+                                                    value: addressFormData.country || "",
+                                                    onChange: (e)=>setAddressFormData((prev)=>({
+                                                                ...prev,
+                                                                country: e.target.value
+                                                            })),
+                                                    className: theme.profileForm.field.input,
+                                                    placeholder: "Country"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: theme.modal.actions,
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outline",
+                                    size: "sm",
+                                    onClick: ()=>setShowAddressModal(false),
+                                    children: "Cancel"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    size: "sm",
+                                    onClick: editingAddress ? handleUpdateAddress : handleAddAddress,
+                                    disabled: addAddressAction.state.isPending || updateAddressAction.state.isPending,
+                                    children: addAddressAction.state.isPending || updateAddressAction.state.isPending ? "Saving..." : "Save"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            showPhoneModal && /*#__PURE__*/ _jsx("div", {
+                className: theme.modal.overlay,
+                onMouseDown: (e)=>{
+                    mouseDownTargetRef.current = e.target;
+                },
+                onClick: (e)=>{
+                    if (e.target === e.currentTarget && mouseDownTargetRef.current === e.target) {
+                        setShowPhoneModal(false);
+                    }
+                },
+                onKeyDown: (e)=>e.key === "Escape" && setShowPhoneModal(false),
+                role: "dialog",
+                "aria-modal": "true",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: theme.modal.container,
+                    role: "document",
+                    children: [
+                        /*#__PURE__*/ _jsx("h2", {
+                            className: theme.modal.title,
+                            children: editingPhone ? "Edit Phone" : "Add Phone"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: theme.modal.form,
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.profileForm.field.container,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("label", {
+                                            htmlFor: "phoneName",
+                                            className: theme.profileForm.field.label,
+                                            children: "Name"
+                                        }),
+                                        /*#__PURE__*/ _jsx("input", {
+                                            id: "phoneName",
+                                            type: "text",
+                                            value: phoneFormData.name || "",
+                                            onChange: (e)=>setPhoneFormData((prev)=>({
+                                                        ...prev,
+                                                        name: e.target.value
+                                                    })),
+                                            className: theme.profileForm.field.input,
+                                            placeholder: "e.g., Mobile, Work"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.profileForm.field.container,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("label", {
+                                            htmlFor: "phoneType",
+                                            className: theme.profileForm.field.label,
+                                            children: "Type"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("select", {
+                                            id: "phoneType",
+                                            value: phoneFormData.type || "",
+                                            onChange: (e)=>{
+                                                const value = e.target.value;
+                                                setPhoneFormData((prev)=>({
+                                                        ...prev,
+                                                        type: value || undefined
+                                                    }));
+                                            },
+                                            className: theme.profileForm.field.input,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("option", {
+                                                    value: "",
+                                                    children: "Select type"
+                                                }),
+                                                /*#__PURE__*/ _jsx("option", {
+                                                    value: "mobile",
+                                                    children: "Mobile"
+                                                }),
+                                                /*#__PURE__*/ _jsx("option", {
+                                                    value: "office",
+                                                    children: "Office"
+                                                }),
+                                                /*#__PURE__*/ _jsx("option", {
+                                                    value: "fax",
+                                                    children: "Fax"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.profileForm.grid,
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: theme.profileForm.field.container,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("label", {
+                                                    htmlFor: "countryCode",
+                                                    className: theme.profileForm.field.label,
+                                                    children: "Country Code"
+                                                }),
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    id: "countryCode",
+                                                    type: "text",
+                                                    value: phoneFormData.countryCode || "+1",
+                                                    onChange: (e)=>setPhoneFormData((prev)=>({
+                                                                ...prev,
+                                                                countryCode: e.target.value
+                                                            })),
+                                                    className: theme.profileForm.field.input,
+                                                    placeholder: "+1"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: theme.profileForm.field.container,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("label", {
+                                                    htmlFor: "phoneNumber",
+                                                    className: theme.profileForm.field.label,
+                                                    children: "Number"
+                                                }),
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    id: "phoneNumber",
+                                                    type: "tel",
+                                                    value: phoneFormData.number || "",
+                                                    onChange: (e)=>setPhoneFormData((prev)=>({
+                                                                ...prev,
+                                                                number: e.target.value
+                                                            })),
+                                                    className: theme.profileForm.field.input,
+                                                    placeholder: "Phone number"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.profileForm.field.container,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("label", {
+                                            htmlFor: "extension",
+                                            className: theme.profileForm.field.label,
+                                            children: "Extension (optional)"
+                                        }),
+                                        /*#__PURE__*/ _jsx("input", {
+                                            id: "extension",
+                                            type: "text",
+                                            value: phoneFormData.extension || "",
+                                            onChange: (e)=>setPhoneFormData((prev)=>({
+                                                        ...prev,
+                                                        extension: e.target.value
+                                                    })),
+                                            className: theme.profileForm.field.input,
+                                            placeholder: "Extension"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: theme.modal.actions,
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outline",
+                                    size: "sm",
+                                    onClick: ()=>setShowPhoneModal(false),
+                                    children: "Cancel"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    size: "sm",
+                                    onClick: editingPhone ? handleUpdatePhone : handleAddPhone,
+                                    disabled: addPhoneAction.state.isPending || updatePhoneAction.state.isPending,
+                                    children: addPhoneAction.state.isPending || updatePhoneAction.state.isPending ? "Saving..." : "Save"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}