quik access

src/pages/home/Home.tsx

@@ -15,11 +15,13 @@ import { QuikAccessItemType } from './types/HomeTypes'
 import ServiceItem from '../../components/ServiceItem'
 import PageLoading from '../../components/PageLoading'
 import { Helmet } from 'react-helmet-async';
+import { useHomeStore } from './store/HomeStore'
 
 
 const Home: FC = () => {
 
     const { t } = useTranslation('global')
+    const { setShowModal } = useHomeStore()
     const getAds = useGetAds(AdsDisplayLocation.HOMEPAGE_TOP)
     const getQuikAccess = useGetQuikAccess()
     const getDashboard = useGetDashboardSummary()
@@ -131,6 +133,8 @@ const Home: FC = () => {
                                                 className='flex-1 min-w-[40%] xl:!min-w-[20%] xl:p-6 p-4 flex flex-col'
                                                 isQuikAccess
                                                 businessName={item.userSubscription.businessName}
+                                                isLinkPanel
+                                                onMoreClick={() => setShowModal(true)}
                                             />
                                         )
                                     })

src/pages/home/components/BoxNewAccessbility.tsx

@@ -8,11 +8,12 @@ import { MyServicesItem } from '../../service/types/ServiecTypes'
 import PageLoading from '../../../components/PageLoading'
 import { useGetQuikAccess, useQuikAccess, useRemoveQuikAccess } from '../hooks/useHomeData'
 import ChangeQuikAccess from './ChangeQuikAccess'
+import { useHomeStore } from '../store/HomeStore'
 
 const BoxNewAccessbility: FC = () => {
 
+    const { showModal, setShowModal } = useHomeStore()
     const [search, setSearch] = useState<string>('')
-    const [open, setOpen] = useState<boolean>(false)
     const { t } = useTranslation('global')
     const getMyservices = useGetMyServices(search)
     const getQuikAccess = useGetQuikAccess()
@@ -38,7 +39,7 @@ const BoxNewAccessbility: FC = () => {
     return (
         <>
             <div
-                onClick={() => setOpen(true)}
+                onClick={() => setShowModal(true)}
                 className="flex-1 min-w-[40%] xl:p-6 p-4 xl:min-w-[20%]  flex justify-center items-center min-h-[152px]"
                 style={{
                     position: 'relative',
@@ -76,8 +77,8 @@ const BoxNewAccessbility: FC = () => {
             </div>
 
             <DefaulModal
-                open={open}
-                close={() => setOpen(false)}
+                open={showModal}
+                close={() => setShowModal(false)}
                 isHeader={true}
                 title_header={t('home.create_new_access')}
             >

src/pages/home/store/HomeStore.ts

@@ -0,0 +1,9 @@
+import { create } from "zustand";
+import { HomeStoreType } from "../types/HomeTypes";
+
+export const useHomeStore = create<HomeStoreType>((set) => ({
+  showModal: false,
+  setShowModal(value) {
+    set({ showModal: value });
+  },
+}));

src/pages/home/types/HomeTypes.ts

@@ -18,3 +18,8 @@ export type QuikAccessItemType = {
     updatedAt: string;
   };
 };
+
+export type HomeStoreType = {
+  showModal: boolean;
+  setShowModal: (value: boolean) => void;
+};