@homefile/components-v2 1.0.10 → 1.0.12

package/dist/components/homeAssistant/HomeAssistantStepper.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Flex, Stack, Text } from '@chakra-ui/react';
 export const HomeAssistantStepper = ({ currentStep, totalSteps, }) => {
-    return (_jsx(Flex, { gap: "1px", w: "100%", children: Array.from({ length: totalSteps }).map((_, index) => {
+    return (_jsx(Flex, { gap: "1px", w: "100%", zIndex: "2", children: Array.from({ length: totalSteps }).map((_, index) => {
             return (_jsxs(Stack, { flex: "1", spacing: "1", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "xs", textTransform: "uppercase", color: setTextColor(index + 1, currentStep), textAlign: "center", children: `${currentStep} ${t('addItemWizard.of')} ${totalSteps}` }), _jsx(Box, { h: "16px", bg: setBgColor(index + 1, currentStep) })] }, index));
         }) }));
 };

package/dist/components/homeAssistant/HomeAssistantSteps.d.ts

@@ -1,2 +1,2 @@
 import { HomeAssistantStepsI } from '../../interfaces';
-export declare const HomeAssistantSteps: ({ currentStep, onStepClick, isPanelOpen, }: HomeAssistantStepsI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeAssistantSteps: ({ currentStep, onStepClick, currentPanel, }: HomeAssistantStepsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeAssistantSteps.js

@@ -2,12 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, SimpleGrid, Stack } from '@chakra-ui/react';
 import { HomeAssistantButton, HomeAssistantStepper } from '..';
 import { homeAssistantSteps } from '../../helpers';
-import { useState } from 'react';
 import { useComponentStyles } from '../../hooks';
-export const HomeAssistantSteps = ({ currentStep, onStepClick, isPanelOpen, }) => {
-    const [step, setStep] = useState(currentStep);
-    const stepId = `homeAssistantButton-${step}`;
-    const componentIds = isPanelOpen
+export const HomeAssistantSteps = ({ currentStep, onStepClick, currentPanel, }) => {
+    const wrapperZIndex = currentPanel ? undefined : '2';
+    const stepId = `homeAssistantButton-${currentPanel}`;
+    const componentIds = currentPanel
         ? [
             'homeAssistantButton-1',
             'homeAssistantButton-2',
@@ -17,13 +16,8 @@ export const HomeAssistantSteps = ({ currentStep, onStepClick, isPanelOpen, }) =
             'homeAssistantButton-6',
         ]
         : [];
-    const handleStepClick = (step) => {
-        onStepClick(step);
-        setStep(step);
-    };
-    useComponentStyles(componentIds, stepId);
-    const wrapperZIndex = isPanelOpen ? undefined : '2';
-    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], zIndex: wrapperZIndex, children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
+    useComponentStyles({ ids: componentIds, selectedId: stepId, zIndex: '2' });
+    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: onStepClick, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
 };
 const getStatus = (index, currentStep) => {
     if (index === currentStep)

package/dist/components/homeAssistant/panel/ApplianceSteps.js

@@ -3,68 +3,69 @@ import { t } from 'i18next';
 import { Center, SimpleGrid, Stack, Text } from '@chakra-ui/react';
 import { ApplianceButton } from '../..';
 import { Fridge, Freezer, Washer, Dryer, Dishwasher, CookTop, Oven, Hood, Microwave, Range, } from '../../../assets/images';
+import { useState } from 'react';
 export const ApplianceSteps = ({ onClick }) => {
-    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.2", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: t('homeAssistant.selectAppliances') }), _jsx(SimpleGrid, { columns: [4, 5], spacing: "base", children: steps.map((step) => (_jsx(Center, { w: "100%", children: _jsx(ApplianceButton, { onClick: onClick, step: step }) }, step.id))) })] }));
+    const [appliances, setAppliances] = useState([]);
+    const handleClick = (id) => {
+        if (appliances.includes(id)) {
+            const newAppliances = appliances.filter((appliance) => appliance !== id);
+            onClick(newAppliances);
+            return setAppliances(newAppliances);
+        }
+        setAppliances([...appliances, id]);
+        onClick([...appliances, id]);
+    };
+    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.2", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: t('homeAssistant.selectAppliances') }), _jsx(SimpleGrid, { columns: [4, 5], spacing: "base", children: steps.map((step) => (_jsx(Center, { w: "100%", children: _jsx(ApplianceButton, { onClick: handleClick, step: Object.assign(Object.assign({}, step), { isCompleted: appliances.includes(step.id) }) }) }, step.id))) })] }));
 };
 export const steps = [
     {
         id: 'fridge',
         title: 'fridge',
         icon: Fridge,
-        isCompleted: true,
     },
     {
         id: 'freezer',
         title: 'freezer',
         icon: Freezer,
-        isCompleted: false,
     },
     {
         id: 'washer',
         title: 'washer',
         icon: Washer,
-        isCompleted: false,
     },
     {
         id: 'dryer',
         title: 'Dryer',
         icon: Dryer,
-        isCompleted: false,
     },
     {
         id: 'dish-washer',
         title: 'Dish Washer',
         icon: Dishwasher,
-        isCompleted: false,
     },
     {
         id: 'cook-top',
         title: 'Cook Top',
         icon: CookTop,
-        isCompleted: false,
     },
     {
         id: 'oven',
         title: 'oven',
         icon: Oven,
-        isCompleted: false,
     },
     {
         id: 'range',
         title: 'range',
         icon: Range,
-        isCompleted: false,
     },
     {
         id: 'hood',
         title: 'hood',
         icon: Hood,
-        isCompleted: false,
     },
     {
         id: 'microwave',
         title: 'microwave',
         icon: Microwave,
-        isCompleted: false,
     },
 ];

package/dist/components/homeBoard/HomeBoard.js

@@ -51,7 +51,7 @@ export const HomeBoard = () => {
         HomeAssistant: (_jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose })),
     };
     const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md';
-    return (_jsxs(Box, { overflowX: "hidden", children: [_jsx(RightPanel, { overlay: showOverlay, isOpen: isRightOpen, onClose: onRightClose, size: panelSize, children: rightPanelComponents[currentComponent] }), _jsxs(Flex, { w: "full", minH: "100dvh", children: [_jsx(RoomsMenu, { activeRoom: "homeboard", handleAddRoom: (id) => __awaiter(void 0, void 0, void 0, function* () { return console.log(id); }), handleClick: () => null, handleHomeClick: () => null, rooms: RoomsList, roomsToAdd: RoomsToAdd }), _jsxs(Box, { w: "full", children: [_jsx(AppBarComponent, { setActiveTour: setActiveTour }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(HomeHeader, { buttonLabel: "Partner catalog", onBack: () => null, homeName: homeName, onAdd: () => null }), _jsxs(HomeBoardGrid, { children: [_jsx(HomeCardWithRecipent, { address: HomeCards[0].address, handleEdit: handleEditHomeClick, handleDeleteAccountType: (email) => email, handleSubmitAccountType: (form) => form, _id: HomeCards[0]._id, image: HomeCards[0].image, loading: false, name: HomeCards[0].name, menu: menuMock, addImage: () => null, recipients: recipientsDb, records: homeBoardRecorsMock }), _jsx(HomeAssistant, { isPanelOpen: isRightOpen, currentStep: 6, onStepClick: handleHomeAssistantClick }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsxs(Stack, { spacing: "base", children: [_jsx(ReceiptAutofiler, { onClick: () => null, totalReceipts: 36, totalTitle: "Receipts Received", forwardTo: "reciepts@homefile.cloud", onFilter: () => null, children: _jsx(ReceiptsFiled, { incidentalItemsNumber: 0, incidentalSpent: 0, inventoryItemsNumber: 0, inventorySpent: 0, total: 0 }) }), _jsx(ValueMonitor, { menuItems: menuMock, balance: "+3%", totalValue: 323421, year: "2023", yearValue: 5684 })] }), _jsx(ShortPartnerTile, { _id: "1", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(TrendingValue, { chartData: lineChartData, marketValue: 894000, menuItems: menuMock, mortgageBalance: 220532, purchasePrice: 220532, roi: "+234%" }), _jsx(ShortPartnerTile, { _id: "2", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(FolderSharing, { folders: FoldersDB, handleAddNewFolder: handleNewFolder, handleFolderClick: handleFolderClick, handleSelect: () => null, initialSelectItem: selectOptions[0], menuItems: menuMock, selectItems: selectOptions }), _jsxs(Stack, { spacing: "base", children: [_jsx(AddHomeItem, { handleClick: () => null }), _jsx(SendCommunication, { documentList: [] })] }), _jsx(ShortPartnerTile, { _id: "3", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" })] })] })] })] }), _jsx(HomeBoardTour, { currentStep: currentStep, handleClose: handleClose, handleStep: handleStep, meetStepUrl: videoMock, isActive: activeTour })] }));
+    return (_jsxs(Box, { overflowX: "hidden", children: [_jsx(RightPanel, { overlay: showOverlay, isOpen: isRightOpen, onClose: onRightClose, size: panelSize, children: rightPanelComponents[currentComponent] }), _jsxs(Flex, { w: "full", minH: "100dvh", children: [_jsx(RoomsMenu, { activeRoom: "homeboard", handleAddRoom: (id) => __awaiter(void 0, void 0, void 0, function* () { return console.log(id); }), handleClick: () => null, handleHomeClick: () => null, rooms: RoomsList, roomsToAdd: RoomsToAdd }), _jsxs(Box, { w: "full", children: [_jsx(AppBarComponent, { setActiveTour: setActiveTour }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(HomeHeader, { buttonLabel: "Partner catalog", onBack: () => null, homeName: homeName, onAdd: () => null }), _jsxs(HomeBoardGrid, { children: [_jsx(HomeCardWithRecipent, { address: HomeCards[0].address, handleEdit: handleEditHomeClick, handleDeleteAccountType: (email) => email, handleSubmitAccountType: (form) => form, _id: HomeCards[0]._id, image: HomeCards[0].image, loading: false, name: HomeCards[0].name, menu: menuMock, addImage: () => null, recipients: recipientsDb, records: homeBoardRecorsMock }), _jsx(HomeAssistant, { currentPanel: homeAssistantCurrentStep, currentStep: 6, onStepClick: handleHomeAssistantClick }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsxs(Stack, { spacing: "base", children: [_jsx(ReceiptAutofiler, { onClick: () => null, totalReceipts: 36, totalTitle: "Receipts Received", forwardTo: "reciepts@homefile.cloud", onFilter: () => null, children: _jsx(ReceiptsFiled, { incidentalItemsNumber: 0, incidentalSpent: 0, inventoryItemsNumber: 0, inventorySpent: 0, total: 0 }) }), _jsx(ValueMonitor, { menuItems: menuMock, balance: "+3%", totalValue: 323421, year: "2023", yearValue: 5684 })] }), _jsx(ShortPartnerTile, { _id: "1", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(TrendingValue, { chartData: lineChartData, marketValue: 894000, menuItems: menuMock, mortgageBalance: 220532, purchasePrice: 220532, roi: "+234%" }), _jsx(ShortPartnerTile, { _id: "2", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(FolderSharing, { folders: FoldersDB, handleAddNewFolder: handleNewFolder, handleFolderClick: handleFolderClick, handleSelect: () => null, initialSelectItem: selectOptions[0], menuItems: menuMock, selectItems: selectOptions }), _jsxs(Stack, { spacing: "base", children: [_jsx(AddHomeItem, { handleClick: () => null }), _jsx(SendCommunication, { documentList: [] })] }), _jsx(ShortPartnerTile, { _id: "3", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" })] })] })] })] }), _jsx(HomeBoardTour, { currentStep: currentStep, handleClose: handleClose, handleStep: handleStep, meetStepUrl: videoMock, isActive: activeTour })] }));
 };
 export const AppBarComponent = ({ setActiveTour = (value) => { } }) => {
     const handleTour = () => {

package/dist/components/tour/HomeBoardTour.js

@@ -22,7 +22,7 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
         'addCatalog',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles(componentIds, currentStep);
+    useComponentStyles({ ids: componentIds, selectedId: currentStep });
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const parsedBubbleWidth = Number(bubbleWidth.replace('px', ''));
     const panelBubbleArrowSize = 500 + parsedBubbleWidth + arrowSize;

package/dist/components/tour/LaunchpadTour.js

@@ -20,7 +20,7 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
         'forwardReceipts',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles(componentIds, currentStep);
+    useComponentStyles({ ids: componentIds, selectedId: currentStep });
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const cardSize = 220;
     const steps = {

package/dist/components/tour/RoomsBoardTour.js

@@ -16,7 +16,7 @@ export const RoomsBoardTour = ({ currentStep = 'addRooms', handleClose, handleSt
         'addingItems',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles(componentIds, currentStep);
+    useComponentStyles({ ids: componentIds, selectedId: currentStep });
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const steps = {
         addRooms: {

package/dist/hooks/useComponentStyles.d.ts

@@ -1 +1,7 @@
-export declare const useComponentStyles: (ids: string[], selectedId: string) => void;
+interface UseComponentStyles {
+    ids: string[];
+    selectedId: string;
+    zIndex?: string;
+}
+export declare const useComponentStyles: ({ ids, selectedId, zIndex, }: UseComponentStyles) => void;
+export {};

package/dist/hooks/useComponentStyles.js

@@ -1,14 +1,14 @@
-export const useComponentStyles = (ids, selectedId) => {
+export const useComponentStyles = ({ ids, selectedId, zIndex = 'auto', }) => {
     if ((ids === null || ids === void 0 ? void 0 : ids.length) === 0)
         return;
     ids.forEach((id) => {
         const component = document.getElementById(id);
         if (component) {
-            component.style.zIndex = 'auto';
+            component.style.zIndex = zIndex;
         }
     });
     const currentComponent = document.getElementById(selectedId);
     if (currentComponent) {
-        currentComponent.style.zIndex = '99999';
+        currentComponent.style.zIndex = '1400';
     }
 };

package/dist/interfaces/homeAssistant/ApplianceSteps.interface.d.ts

@@ -1,3 +1,3 @@
 export interface ApplianceStepsI {
-    onClick: (id: string) => void;
+    onClick: (selectedSteps: string[]) => void;
 }

package/dist/interfaces/homeAssistant/HomeAssistantPanel.interface.d.ts

@@ -2,7 +2,7 @@ import { DynamicFormI } from '..';
 export interface HomeAssistantPanelI {
     currentForm: DynamicFormI['form'];
     currentStep: number;
-    onApplianceClick: (id: string) => void;
+    onApplianceClick: (selected: string[]) => void;
     onBack: () => void;
     onClose: () => void;
     onNext: () => void;

package/dist/interfaces/homeAssistant/HomeAssistantSteps.interface.d.ts

@@ -2,6 +2,6 @@ export interface HomeAssistantStepsI {
     currentStep: number;
     onStepClick: (step: number) => void;
     showTutorial?: boolean;
-    isPanelOpen?: boolean;
+    currentPanel?: number;
     tutorialUrl?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/homeAssistant/HomeAssistantStepper.tsx

@@ -7,7 +7,7 @@ export const HomeAssistantStepper = ({
   totalSteps,
 }: HomeAssistantStepperI) => {
   return (
-    <Flex gap="1px" w="100%">
+    <Flex gap="1px" w="100%" zIndex="2">
       {Array.from({ length: totalSteps }).map((_, index) => {
         return (
           <Stack key={index} flex="1" spacing="1">

package/src/components/homeAssistant/HomeAssistantSteps.tsx

@@ -2,17 +2,16 @@ import { Center, SimpleGrid, Stack } from '@chakra-ui/react'
 import { HomeAssistantStepsI } from '@/interfaces'
 import { HomeAssistantButton, HomeAssistantStepper } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
-import { useState } from 'react'
 import { useComponentStyles } from '@/hooks'
 
 export const HomeAssistantSteps = ({
   currentStep,
   onStepClick,
-  isPanelOpen,
+  currentPanel,
 }: HomeAssistantStepsI) => {
-  const [step, setStep] = useState(currentStep)
-  const stepId = `homeAssistantButton-${step}`
-  const componentIds = isPanelOpen
+  const wrapperZIndex = currentPanel ? undefined : '2'
+  const stepId = `homeAssistantButton-${currentPanel}`
+  const componentIds = currentPanel
     ? [
         'homeAssistantButton-1',
         'homeAssistantButton-2',
@@ -23,20 +22,13 @@ export const HomeAssistantSteps = ({
       ]
     : []
 
-  const handleStepClick = (step: number) => {
-    onStepClick(step)
-    setStep(step)
-  }
-
-  useComponentStyles(componentIds, stepId)
-  const wrapperZIndex = isPanelOpen ? undefined : '2'
+  useComponentStyles({ ids: componentIds, selectedId: stepId, zIndex: '2' })
   return (
     <Stack
       spacing="8"
       w="fit-content"
       position="relative"
       top={['-10px', '-30px']}
-      zIndex={wrapperZIndex}
     >
       <HomeAssistantStepper currentStep={currentStep} totalSteps={6} />
       <SimpleGrid columns={[2, 3]} spacing="base">
@@ -44,7 +36,7 @@ export const HomeAssistantSteps = ({
           <Center key={step.title} w="100%">
             <HomeAssistantButton
               currentStep={index + 1}
-              onStepClick={handleStepClick}
+              onStepClick={onStepClick}
               status={getStatus(index + 1, currentStep)}
               step={step}
             />

package/src/components/homeAssistant/panel/ApplianceSteps.tsx

@@ -14,8 +14,20 @@ import {
   Microwave,
   Range,
 } from '@/assets/images'
+import { useState } from 'react'
 
 export const ApplianceSteps = ({ onClick }: ApplianceStepsI) => {
+  const [appliances, setAppliances] = useState<string[]>([])
+  const handleClick = (id: string) => {
+    if (appliances.includes(id)) {
+      const newAppliances = appliances.filter((appliance) => appliance !== id)
+      onClick(newAppliances)
+      return setAppliances(newAppliances)
+    }
+
+    setAppliances([...appliances, id])
+    onClick([...appliances, id])
+  }
   return (
     <Stack spacing="base" bg="lightBlue.2" p="base">
       <Text fontFamily="secondary" fontSize="sm">
@@ -24,7 +36,13 @@ export const ApplianceSteps = ({ onClick }: ApplianceStepsI) => {
       <SimpleGrid columns={[4, 5]} spacing="base">
         {steps.map((step) => (
           <Center key={step.id} w="100%">
-            <ApplianceButton onClick={onClick} step={step} />
+            <ApplianceButton
+              onClick={handleClick}
+              step={{
+                ...step,
+                isCompleted: appliances.includes(step.id),
+              }}
+            />
           </Center>
         ))}
       </SimpleGrid>
@@ -37,60 +55,50 @@ export const steps: ApplianceStepI[] = [
     id: 'fridge',
     title: 'fridge',
     icon: Fridge,
-    isCompleted: true,
   },
   {
     id: 'freezer',
     title: 'freezer',
     icon: Freezer,
-    isCompleted: false,
   },
   {
     id: 'washer',
     title: 'washer',
     icon: Washer,
-    isCompleted: false,
   },
   {
     id: 'dryer',
     title: 'Dryer',
     icon: Dryer,
-    isCompleted: false,
   },
   {
     id: 'dish-washer',
     title: 'Dish Washer',
     icon: Dishwasher,
-    isCompleted: false,
   },
   {
     id: 'cook-top',
     title: 'Cook Top',
     icon: CookTop,
-    isCompleted: false,
   },
   {
     id: 'oven',
     title: 'oven',
     icon: Oven,
-    isCompleted: false,
   },
   {
     id: 'range',
     title: 'range',
     icon: Range,
-    isCompleted: false,
   },
   {
     id: 'hood',
     title: 'hood',
     icon: Hood,
-    isCompleted: false,
   },
   {
     id: 'microwave',
     title: 'microwave',
     icon: Microwave,
-    isCompleted: false,
   },
 ]

package/src/components/homeBoard/HomeBoard.tsx

@@ -314,7 +314,7 @@ export const HomeBoard = () => {
               />
 
               <HomeAssistant
-                isPanelOpen={isRightOpen}
+                currentPanel={homeAssistantCurrentStep}
                 currentStep={6}
                 onStepClick={handleHomeAssistantClick}
               />

package/src/components/tour/HomeBoardTour.tsx

@@ -46,7 +46,7 @@ export const HomeBoardTour = ({
 
   const { coordinates } = useComponentCoordinates(componentIds)
 
-  useComponentStyles(componentIds, currentStep)
+  useComponentStyles({ ids: componentIds, selectedId: currentStep })
 
   const {
     windowDimensions: { width, height },

package/src/components/tour/LaunchpadTour.tsx

@@ -41,7 +41,7 @@ export const LaunchpadTour = ({
 
   const { coordinates } = useComponentCoordinates(componentIds)
 
-  useComponentStyles(componentIds, currentStep)
+  useComponentStyles({ ids: componentIds, selectedId: currentStep })
 
   const {
     windowDimensions: { width, height },

package/src/components/tour/RoomsBoardTour.tsx

@@ -33,7 +33,7 @@ export const RoomsBoardTour = ({
 
   const { coordinates } = useComponentCoordinates(componentIds)
 
-  useComponentStyles(componentIds, currentStep)
+  useComponentStyles({ ids: componentIds, selectedId: currentStep })
 
   const {
     windowDimensions: { width, height },

package/src/hooks/useComponentStyles.ts

@@ -1,17 +1,27 @@
-export const useComponentStyles = (ids: string[], selectedId: string) => {
+interface UseComponentStyles {
+  ids: string[]
+  selectedId: string
+  zIndex?: string
+}
+
+export const useComponentStyles = ({
+  ids,
+  selectedId,
+  zIndex = 'auto',
+}: UseComponentStyles) => {
   if (ids?.length === 0) return
 
   ids.forEach((id) => {
     const component = document.getElementById(id)
 
     if (component) {
-      component.style.zIndex = 'auto'
+      component.style.zIndex = zIndex
     }
   })
 
   const currentComponent = document.getElementById(selectedId)
 
   if (currentComponent) {
-    currentComponent.style.zIndex = '99999'
+    currentComponent.style.zIndex = '1400'
   }
 }

package/src/interfaces/homeAssistant/ApplianceSteps.interface.ts

@@ -1,5 +1,5 @@
 import { ApplianceStepI } from '@/interfaces'
 
 export interface ApplianceStepsI {
-  onClick: (id: string) => void
+  onClick: (selectedSteps: string[]) => void
 }

package/src/interfaces/homeAssistant/HomeAssistantPanel.interface.ts

@@ -3,7 +3,7 @@ import { DynamicFormI } from '@/interfaces'
 export interface HomeAssistantPanelI {
   currentForm: DynamicFormI['form']
   currentStep: number
-  onApplianceClick: (id: string) => void
+  onApplianceClick: (selected: string[]) => void
   onBack: () => void
   onClose: () => void
   onNext: () => void

package/src/interfaces/homeAssistant/HomeAssistantSteps.interface.ts

@@ -2,6 +2,6 @@ export interface HomeAssistantStepsI {
   currentStep: number
   onStepClick: (step: number) => void
   showTutorial?: boolean
-  isPanelOpen?: boolean
+  currentPanel?: number
   tutorialUrl?: string
 }