quik access

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-e7681877'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.6dtlsl90suo"
+    "revision": "0.3q32r8akalg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/ServiceItem.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { Link } from 'react-router-dom'
 import { Pages } from '../config/Pages'
-import { ArrowLeft } from 'iconsax-react'
+import { ArrowLeft, More } from 'iconsax-react'
 import Button from './Button'
 import { useTranslation } from 'react-i18next'
 import { ItemServiceType } from '../pages/service/types/ServiecTypes'
@@ -12,7 +12,8 @@ type Props = {
     isLinkPanel?: boolean,
     businessName?: string,
     isDisabled?: boolean,
-    isQuikAccess?: boolean
+    isQuikAccess?: boolean,
+    onMoreClick?: () => void,
 }
 
 const ServiceItem: FC<Props> = (props: Props) => {
@@ -21,7 +22,13 @@ const ServiceItem: FC<Props> = (props: Props) => {
     const { item } = props
 
     return (
-        <div className={`flex-1 flex flex-col self-stretch min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4 ${props.className} ${props.isDisabled ? 'opacity-50' : ''}`}>
+        <div className={`flex-1 relative flex flex-col self-stretch min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4 ${props.className} ${props.isDisabled ? 'opacity-50' : ''}`}>
+            {
+                props.isQuikAccess &&
+                <div className='absolute left-4 top-4'>
+                    <More onClick={props.onMoreClick} size={14} color='black' className='rotate-90' />
+                </div>
+            }
             <div className='flex gap-2 items-center'>
                 <div className='xl:size-[50px] xl:min-w-[50px] min-w-10 size-10 overflow-hidden rounded-xl'>
                     <img src={item.icon} alt={item.name} className='w-full h-full' />

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;
+};