@greatapps/common 1.1.33 → 1.1.35

package/src/components/account/DeleteAccountModal.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Lock, TriangleAlert } from 'lucide-react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { FormField } from '../ui/form/FormField';
+import { SelectField } from '../ui/form/SelectField';
+import { TextAreaField } from '../ui/form/TextAreaField';
+import { Toast } from '../ui/feedback/Toast';
+import usePasswordVisibility from '../../hooks/usePasswordVisibility';
+import { useAccountModals } from '../../store/useAccountModals';
+import { AccountSectionType } from '../../enums/AccountSectionType';
+
+const REASON_OPTIONS = [
+  { value: 'sem-funcao', label: 'A ferramenta não possui uma função que eu preciso' },
+  { value: 'problemas', label: 'Encontrei problemas técnicos ou erros no sistema' },
+  { value: 'suporte', label: 'Tive problemas com o suporte ou atendimento' },
+  { value: 'demora', label: 'As atualizações demoram mais do que o esperado' },
+  { value: 'temporario', label: 'O cancelamento é temporário' },
+  { value: 'outro', label: 'Outro motivo' },
+];
+
+export default function DeleteAccountModal() {
+  const { activeModal, pagesCount, openConfigurations, openConfirmDelete, close } = useAccountModals();
+  const open = activeModal === 'deleteAccount';
+
+  const [reason, setReason] = useState('');
+  const [description, setDescription] = useState('');
+  const [password, setPassword] = useState('');
+  const { showPassword, togglePassword } = usePasswordVisibility();
+
+  const isFormValid = Boolean(reason && description && password);
+
+  const resetForm = useCallback(() => {
+    setReason('');
+    setDescription('');
+    setPassword('');
+  }, []);
+
+  const handleClose = () => {
+    resetForm();
+    openConfigurations(AccountSectionType.SECURITY);
+  };
+
+  const handleDelete = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isFormValid) {
+      toast.custom((t) => (
+        <Toast variant="error" message="Preencha todos os campos obrigatórios" toastId={t} />
+      ));
+      return;
+    }
+    resetForm();
+    openConfirmDelete(pagesCount);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-lg! lg:h-auto! lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]! overflow-y-auto">
+        <form onSubmit={handleDelete} className="flex flex-col flex-1 lg:flex-none">
+          <div className="flex flex-col gap-6 p-4 lg:p-6 flex-1 lg:flex-none">
+            <DialogHeader className="p-0">
+              <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5 mb-5">
+                <TriangleAlert size={20} className="text-red-500" />
+              </div>
+              <DialogTitle>Excluir conta</DialogTitle>
+              <DialogDescription className="paragraph-small-regular">
+                Esta ação é <span className="font-semibold text-gray-950">irreversível</span>. Ao
+                confirmar, sua conta e todos os seus dados serão excluídos.
+              </DialogDescription>
+            </DialogHeader>
+
+            <SelectField
+              label="Motivo do cancelamento"
+              required
+              placeholder="Selecione"
+              options={REASON_OPTIONS}
+              value={reason}
+              onChange={(value) => setReason(value as string)}
+              className="h-10!"
+            />
+
+            <div>
+              <TextAreaField
+                label="Descreva o que levou a tomar essa decisão"
+                required
+                placeholder="Explique sua decisão..."
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={4}
+                maxLength={400}
+              />
+              <span className="paragraph-xsmall-medium text-gray-600 text-left mt-1 block">
+                {description.length}/400 caracteres
+              </span>
+            </div>
+
+            <FormField
+              className="text-gray-600"
+              label="Senha"
+              type="password"
+              placeholder="Informe sua senha"
+              leftIcon={Lock}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              classnameContainer="h-10!"
+              showPassword={showPassword}
+              onTogglePassword={togglePassword}
+            />
+          </div>
+
+          <div className="flex flex-row items-center gap-2 p-4 lg:p-6 border-t border-gray-200 bg-white mt-auto lg:mt-0">
+            <Button
+              variant="default"
+              className="h-10 flex-1 bg-gray-950 text-white hover:bg-gray-800"
+              type="submit"
+            >
+              Excluir conta
+            </Button>
+            <Button variant="secondary" className="h-10 flex-1" type="button" onClick={handleClose}>
+              Fechar
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/IsntPossibleDeleteAccountModal.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { TriangleAlert } from 'lucide-react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
+import { Button } from '../ui/buttons/Button';
+import { useAccountModals } from '../../store/useAccountModals';
+
+export default function IsntPossibleDeleteAccountModal() {
+  const { activeModal, close, config } = useAccountModals();
+  const { onGoToSubscription } = config;
+  const open = activeModal === 'isntPossibleDelete';
+
+  return (
+    <Dialog open={open} onOpenChange={close}>
+      <DialogContent className="max-w-[calc(100%-2rem)]! w-full rounded-lg border sm:max-w-[400px]! lg:max-w-[470px]! lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!">
+        <div className="flex flex-col gap-5">
+          <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
+            <TriangleAlert size={20} className="text-red-500" />
+          </div>
+          <DialogHeader className="p-0 gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-gray-950">
+              Não é possível excluir a conta
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-gray-600">
+              Você tem uma assinatura ativa. Para excluir sua conta,{' '}
+              <span className="font-semibold text-gray-950">primeiro cancele a assinatura</span> na
+              página Assinatura e depois tente novamente.
+            </DialogDescription>
+          </DialogHeader>
+        </div>
+
+        <div className="h-px bg-gray-200 -mx-6" />
+
+        <div className="flex flex-row items-center gap-2">
+          <Button className="h-10 flex-1" onClick={close}>
+            Ok, entendi
+          </Button>
+          <Button
+            variant="secondary"
+            className="h-10 flex-1"
+            onClick={onGoToSubscription ?? close}
+          >
+            Ir para assinatura
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/layouts/AppMobileNavBar.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { ReactNode } from 'react';
+import Image from 'next/image';
+import { ProfilePopover } from './ProfilePopover';
+import { useAccountModals } from '../../store/useAccountModals';
+import type { ProfileMenuItem } from './ProfilePopover';
+
+export interface AppMobileNavBarProps {
+  appIconActive?: boolean;
+  /** Shows the colored indicator bar below the app icon */
+  appIconIndicator?: boolean;
+  /** Shows the gray indicator bar below the GreatApps logo */
+  logoIndicator?: boolean;
+  /** Extra slot rendered after the app icon (e.g. project selector) */
+  extraLeftSlot?: ReactNode;
+  /** Required: the right-side action element (toggle button, sheet button, etc.) */
+  rightActionSlot: ReactNode;
+  menuItems?: ProfileMenuItem[];
+  onCreditsClick?: () => void;
+}
+
+export function AppMobileNavBar({
+  appIconActive = false,
+  appIconIndicator = false,
+  logoIndicator = false,
+  extraLeftSlot,
+  rightActionSlot,
+  menuItems = [],
+  onCreditsClick,
+}: AppMobileNavBarProps) {
+  const { openConfigurations } = useAccountModals();
+
+  return (
+    <div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
+      <div className="flex items-center gap-1.5">
+        <div className="relative size-10 flex items-center justify-center">
+          <Image src="/icons/great-icon.svg" alt="GreatApps" width={28} height={28} />
+          {logoIndicator && (
+            <div className="absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" />
+          )}
+        </div>
+        <div className="relative">
+          <div
+            className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${
+              appIconActive ? 'bg-pages-300' : 'bg-pages-50'
+            }`}
+          >
+            <Image src="/icons/icon-navbar.svg" alt="GreatPages" width={24} height={24} />
+          </div>
+          {appIconIndicator && (
+            <div className="absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl" />
+          )}
+        </div>
+        {extraLeftSlot}
+      </div>
+      <div className="flex items-center gap-1.5">
+        <ProfilePopover
+          side="bottom"
+          align="end"
+          contentClassName=""
+          onEditProfile={() => openConfigurations()}
+          onCreditsClick={onCreditsClick}
+          menuItems={menuItems}
+        />
+        {rightActionSlot}
+      </div>
+    </div>
+  );
+}

package/src/components/layouts/AppNavBar.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { NavBar } from './NavBar';
+import { ProfilePopover } from './ProfilePopover';
+import { NotificationsPopover } from './NotificationsPopover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';
+import { useAccountModals } from '../../store/useAccountModals';
+import type { ProfileMenuItem } from './ProfilePopover';
+import type { NotificationData } from './NotificationsPopover';
+
+export interface AppNavBarProps {
+  onLogoClick?: () => void;
+  logoIndicatorClassName?: string;
+  appIconHref?: string;
+  appIconActive?: boolean;
+  /** Controls the left-side indicator bar on the app icon (opacity transition) */
+  appIconIndicator?: boolean;
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  menuItems?: ProfileMenuItem[];
+  onCreditsClick?: () => void;
+  notifications?: NotificationData[];
+  onNotificationsViewAll?: () => void;
+}
+
+export function AppNavBar({
+  onLogoClick,
+  logoIndicatorClassName,
+  appIconHref = '/',
+  appIconActive = false,
+  appIconIndicator = false,
+  showExpandButton = false,
+  onExpandClick,
+  menuItems = [],
+  onCreditsClick,
+  notifications,
+  onNotificationsViewAll,
+}: AppNavBarProps) {
+  const router = useRouter();
+  const { openConfigurations } = useAccountModals();
+
+  const handleLogoClick = onLogoClick ?? (() => router.push('/'));
+  const handleAppIconClick = () => router.push(appIconHref);
+
+  return (
+    <NavBar
+      onLogoClick={handleLogoClick}
+      logoIndicatorClassName={logoIndicatorClassName}
+      showExpandButton={showExpandButton}
+      onExpandClick={onExpandClick}
+      appIconSlot={
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger asChild onClick={handleAppIconClick}>
+              <div
+                className={`size-10 flex items-center justify-center rounded-lg hover:bg-pages-100 cursor-pointer transition-colors duration-300 ${
+                  appIconActive ? 'bg-pages-300' : 'bg-pages-50'
+                }`}
+              >
+                <Image src="/icons/icon-navbar.svg" alt="GreatPages" width={24} height={24} />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="right">GreatPages</TooltipContent>
+          </Tooltip>
+          <div
+            className={`absolute -left-4 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-pages-300 rounded-r-xl transition-opacity duration-300 ${
+              appIconIndicator ? 'opacity-100' : 'opacity-0'
+            }`}
+          />
+        </div>
+      }
+    >
+      <NotificationsPopover
+        notifications={notifications}
+        onViewAll={onNotificationsViewAll}
+      />
+      <ProfilePopover
+        onEditProfile={() => openConfigurations()}
+        onCreditsClick={onCreditsClick}
+        menuItems={menuItems}
+      />
+    </NavBar>
+  );
+}

package/src/components/layouts/ProfilePopover.tsx

@@ -9,6 +9,7 @@ import { Progress } from "../ui/feedback/Progress";
 import { Separator } from "../ui/data-display/Separator";
 import { NavBarItem } from "./NavBarItem";
 import { UserAvatar } from "../ui/data-display/UserAvatar";
+import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
 import { useAuth } from "../../providers/auth.provider";
 import { cn } from "../../infra/utils/clsx";
 import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
@@ -27,7 +28,6 @@ export interface ProfilePopoverProps {
   onCreditsClick?: () => void;
   menuItems?: ProfileMenuItem[];
   logoutRedirect?: string;
-  logoutOverlay?: React.ReactNode;
 }
 
 function ProfilePopover({
@@ -38,7 +38,6 @@ function ProfilePopover({
   onCreditsClick,
   menuItems = [],
   logoutRedirect = "/login",
-  logoutOverlay,
 }: ProfilePopoverProps) {
   const router = useRouter();
   const { user, logout } = useAuth();
@@ -70,7 +69,7 @@ function ProfilePopover({
 
   return (
     <>
-      {isLoggingOut && logoutOverlay}
+      <LoadingOverlay isLoading={isLoggingOut} message="Saindo da sua conta..." />
       <Popover>
         <PopoverPrimitive.Trigger className="cursor-pointer">
           {user && (

package/src/components/modals/ModalManager.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { ComponentType } from 'react';
+import { useModalManager } from '../../store/useModalManager';
+
+interface ModalManagerProps {
+  registry: Record<string, ComponentType>;
+}
+
+export function ModalManager({ registry }: ModalManagerProps) {
+  const { modalStack } = useModalManager();
+
+  if (modalStack.length === 0) return null;
+
+  return (
+    <>
+      {modalStack.map((modal) => {
+        const ModalComponent = registry[modal.key];
+
+        if (!ModalComponent) {
+          console.warn(`Modal "${modal.key}" not found in registry`);
+          return null;
+        }
+
+        return <ModalComponent key={modal.key} />;
+      })}
+    </>
+  );
+}

package/src/components/modals/Modals.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { ComponentType, useEffect } from 'react';
+import AccountModals from '../account/AccountModals';
+import { ModalManager } from './ModalManager';
+import { useAccountModals } from '../../store/useAccountModals';
+import type { ComboboxOption } from '../ui/form/ComboboxField';
+
+interface ModalsProps {
+  registry: Record<string, ComponentType>;
+  hasActiveSubscription?: boolean;
+  currencies?: ComboboxOption[];
+  onGoToSubscription?: () => void;
+}
+
+export function Modals({ registry, hasActiveSubscription, currencies, onGoToSubscription }: ModalsProps) {
+  const { updateConfig } = useAccountModals();
+
+  useEffect(() => {
+    updateConfig({ hasActiveSubscription, currencies, onGoToSubscription });
+  }, [hasActiveSubscription, currencies, onGoToSubscription, updateConfig]);
+
+  return (
+    <>
+      <AccountModals />
+      <ModalManager registry={registry} />
+    </>
+  );
+}

package/src/components/ui/feedback/LoadingOverlay.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import Image from 'next/image';
+import { ReactNode } from 'react';
+
+interface LoadingOverlayProps {
+  isLoading: boolean;
+  message?: string;
+  icon?: ReactNode;
+}
+
+export function LoadingOverlay({ isLoading, message, icon }: LoadingOverlayProps) {
+  if (!isLoading) return null;
+
+  const defaultIcon = <Image src="/icons/great-icon.svg" alt="Great Icon" width={20} height={20} />;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-[2px]">
+      <div className="bg-white rounded-2xl shadow-xl px-16 py-12 flex flex-col items-center gap-6 min-w-[380px]">
+        <div className="relative flex items-center justify-center w-20 h-20">
+          <div className="absolute inset-0 border-[5px] border-gray-100 rounded-full" />
+          <div className="absolute inset-0 border-[5px] border-transparent border-t-black rounded-full animate-spin" />
+          <div className="relative z-20 flex items-center justify-center w-14 h-14 bg-gray-100 rounded-full">
+            {icon ?? defaultIcon}
+          </div>
+        </div>
+        <span className="font-bold text-gray-900 text-lg">{message}</span>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -38,6 +38,10 @@ export { parseSchema, parseResult } from './infra/utils/parser';
 export { MainLayout, MainLayoutContent, MainLayoutSpacer, MainLayoutMain } from './components/layouts/MainLayout';
 export { NavBar } from './components/layouts/NavBar';
 export type { NavBarProps } from './components/layouts/NavBar';
+export { AppNavBar } from './components/layouts/AppNavBar';
+export type { AppNavBarProps } from './components/layouts/AppNavBar';
+export { AppMobileNavBar } from './components/layouts/AppMobileNavBar';
+export type { AppMobileNavBarProps } from './components/layouts/AppMobileNavBar';
 export { SideBarNavigation } from './components/layouts/SideBarNavigation';
 export { MdSideBarNavigation } from './components/layouts/MdSideBarNavigation';
 export { NotificationItem } from './components/layouts/NotificationItem';
@@ -72,6 +76,7 @@ export type { UserAvatarProps } from './components/ui/data-display/UserAvatar';
 export { default as CircularProgress } from './components/ui/feedback/CircularProgress';
 export { default as DefaultCircularProgress } from './components/ui/feedback/DefaultCircularProgress';
 export { Progress } from './components/ui/feedback/Progress';
+export { LoadingOverlay } from './components/ui/feedback/LoadingOverlay';
 export { Toast, toastVariants, toastIconContainerVariants } from './components/ui/feedback/Toast';
 export type { ToastProps } from './components/ui/feedback/Toast';
 
@@ -96,6 +101,8 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './comp
 
 // Store
 export { useMdSidebarStore } from './store/useMdSidebarStore';
+export { useModalManager } from './store/useModalManager';
+export type { ModalData } from './store/useModalManager';
 
 // Enums
 export { AccountSectionType } from './enums/AccountSectionType';
@@ -145,8 +152,13 @@ export type {
   ContactResetResult,
 } from './modules/accounts/types';
 
-// Account Components
-export { default as ConfigurationsMyAccountModal } from './components/account/ConfigurationsMyAccountModal';
+export { default as AccountModals } from './components/account/AccountModals';
+export { useAccountModals } from './store/useAccountModals';
+export type { AccountModalsConfig } from './store/useAccountModals';
+
+export { ModalManager } from './components/modals/ModalManager';
+export { Modals } from './components/modals/Modals';
+
 export { default as TwoFactorAuthModal } from './components/account/TwoFactorAuthModal';
 export { default as DisableTwoFactorAuthModal } from './components/account/DisableTwoFactorAuthModal';
 export { default as ConfirmGlobalPreferencesModal } from './components/account/ConfirmGlobalPreferencesModal';

package/src/store/useAccountModals.ts

@@ -0,0 +1,57 @@
+'use client';
+
+import { create } from 'zustand';
+import type { ComboboxOption } from '../components/ui/form/ComboboxField';
+import type { AccountSectionType } from '../enums/AccountSectionType';
+
+type AccountModalType =
+  | 'configurations'
+  | 'deleteAccount'
+  | 'isntPossibleDelete'
+  | 'confirmDelete';
+
+export interface AccountModalsConfig {
+  hasActiveSubscription?: boolean;
+  currencies?: ComboboxOption[];
+  onGoToSubscription?: () => void;
+}
+
+interface AccountModalsState {
+  activeModal: AccountModalType | null;
+  config: AccountModalsConfig;
+  initialSection?: AccountSectionType;
+  pagesCount: number;
+
+  /** Called by <AccountModals> to keep app-level config in sync */
+  updateConfig: (config: AccountModalsConfig) => void;
+
+  openConfigurations: (initialSection?: AccountSectionType) => void;
+  openDeleteAccount: (pagesCount?: number) => void;
+  openIsntPossibleDelete: () => void;
+  openConfirmDelete: (pagesCount?: number) => void;
+  close: () => void;
+}
+
+export const useAccountModals = create<AccountModalsState>((set) => ({
+  activeModal: null,
+  config: {},
+  initialSection: undefined,
+  pagesCount: 0,
+
+  updateConfig: (config) => set({ config }),
+
+  openConfigurations: (initialSection) =>
+    set({ activeModal: 'configurations', initialSection }),
+
+  openDeleteAccount: (pagesCount = 0) =>
+    set({ activeModal: 'deleteAccount', pagesCount }),
+
+  openIsntPossibleDelete: () =>
+    set({ activeModal: 'isntPossibleDelete' }),
+
+  openConfirmDelete: (pagesCount = 0) =>
+    set({ activeModal: 'confirmDelete', pagesCount }),
+
+  close: () =>
+    set({ activeModal: null, initialSection: undefined }),
+}));

package/src/store/useModalManager.ts

@@ -0,0 +1,104 @@
+'use client';
+
+import { create } from 'zustand';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ModalData = Record<string, any>;
+
+interface ModalStackItem {
+  key: string;
+  data: ModalData;
+}
+
+interface ModalState {
+  modalStack: ModalStackItem[];
+  activeModal: string | null;
+  modalData: ModalData;
+  openModal: (key: string, data?: ModalData) => void;
+  /** Closes the top modal in the stack */
+  closeModal: () => void;
+  /** Closes a specific modal by key */
+  closeModalByKey: (key: string) => void;
+  updateModalData: (data: ModalData) => void;
+  isModalOpen: (key: string) => boolean;
+  getModalData: (key: string) => ModalData;
+}
+
+export const useModalManager = create<ModalState>((set, get) => ({
+  modalStack: [],
+  activeModal: null,
+  modalData: {},
+
+  openModal: (key, data = {}) => {
+    set((state) => {
+      const existingIndex = state.modalStack.findIndex((item) => item.key === key);
+      if (existingIndex !== -1) {
+        const newStack = [...state.modalStack];
+        newStack[existingIndex] = { key, data };
+        return {
+          modalStack: newStack,
+          activeModal: newStack[newStack.length - 1]?.key ?? null,
+          modalData: newStack[newStack.length - 1]?.data ?? {},
+        };
+      }
+
+      const newStack = [...state.modalStack, { key, data }];
+      return {
+        modalStack: newStack,
+        activeModal: key,
+        modalData: data,
+      };
+    });
+  },
+
+  closeModal: () => {
+    set((state) => {
+      const newStack = state.modalStack.slice(0, -1);
+      const topModal = newStack[newStack.length - 1];
+      return {
+        modalStack: newStack,
+        activeModal: topModal?.key ?? null,
+        modalData: topModal?.data ?? {},
+      };
+    });
+  },
+
+  closeModalByKey: (key: string) => {
+    set((state) => {
+      const newStack = state.modalStack.filter((item) => item.key !== key);
+      const topModal = newStack[newStack.length - 1];
+      return {
+        modalStack: newStack,
+        activeModal: topModal?.key ?? null,
+        modalData: topModal?.data ?? {},
+      };
+    });
+  },
+
+  updateModalData: (data) => {
+    set((state) => {
+      if (state.modalStack.length === 0) return state;
+
+      const newStack = [...state.modalStack];
+      const lastIndex = newStack.length - 1;
+      newStack[lastIndex] = {
+        ...newStack[lastIndex],
+        data: { ...newStack[lastIndex].data, ...data },
+      };
+
+      return {
+        modalStack: newStack,
+        modalData: newStack[lastIndex].data,
+      };
+    });
+  },
+
+  isModalOpen: (key: string) => {
+    return get().modalStack.some((item) => item.key === key);
+  },
+
+  getModalData: (key: string) => {
+    const item = get().modalStack.find((item) => item.key === key);
+    return item?.data ?? {};
+  },
+}));