@homefile/components-v2 1.0.9 → 1.0.11

package/dist/components/forms/dynamicForm/DynamicFormSimple.js

@@ -13,7 +13,7 @@ export const DynamicFormSimple = ({ form: fields }) => {
                             id,
                             value,
                             icon: icon ? fieldIcons[icon] : undefined,
-                            placeholder: name || description,
+                            placeholder: name !== null && name !== void 0 ? name : description,
                         };
                         switch (type) {
                             case 'number':

package/dist/components/homeAssistant/HomeAssistantButton.js

@@ -10,7 +10,8 @@ export const HomeAssistantButton = ({ currentStep, onStepClick, status, step, })
         if (!isPending)
             onStepClick(currentStep);
     };
-    return (_jsxs(Box, { position: "relative", children: [isCompleted && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", spacing: "2", borderRadius: "lg", boxShadow: "lg", border: "1px solid transparent", w: "116px", align: "center", h: "106px", py: "base", onClick: handleClick }, setStyles(status), { children: [_jsx(Center, { h: "60%", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "38px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "sm", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }));
+    const buttonId = `homeAssistantButton-${currentStep}`;
+    return (_jsxs(Box, { position: "relative", id: buttonId, children: [isCompleted && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", spacing: "2", borderRadius: "lg", boxShadow: "lg", border: "1px solid transparent", w: "116px", align: "center", h: "106px", py: "base", onClick: handleClick }, setStyles(status), { children: [_jsx(Center, { h: "60%", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "38px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "sm", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }));
 };
 const setStyles = (status) => {
     switch (status) {

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

@@ -1,2 +1,2 @@
 import { HomeAssistantStepsI } from '../../interfaces';
-export declare const HomeAssistantSteps: ({ currentStep, onStepClick, }: 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,8 +2,22 @@ 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';
-export const HomeAssistantSteps = ({ currentStep, onStepClick, }) => {
-    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], zIndex: "2", 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))) })] }));
+import { useComponentStyles } from '../../hooks';
+export const HomeAssistantSteps = ({ currentStep, onStepClick, currentPanel, }) => {
+    const wrapperZIndex = currentPanel ? undefined : '2';
+    const stepId = `homeAssistantButton-${currentPanel}`;
+    const componentIds = currentPanel
+        ? [
+            'homeAssistantButton-1',
+            'homeAssistantButton-2',
+            'homeAssistantButton-3',
+            'homeAssistantButton-4',
+            'homeAssistantButton-5',
+            'homeAssistantButton-6',
+        ]
+        : [];
+    useComponentStyles(componentIds, stepId);
+    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: onStepClick, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
 };
 const getStatus = (index, currentStep) => {
     if (index === currentStep)

package/dist/components/homeBoard/HomeBoard.js

@@ -9,13 +9,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, DrawerBody, DrawerContent, DrawerHeader, Flex, Stack, } from '@chakra-ui/react';
-import { HomeHeader, HomeCardWithRecipent, AddFolder, EditAccountType, FolderSharing, RightPanel, HomeBoardTour, RoomsMenu, ContactsContent, AppBar, BarDivider, ContactList, PeopleConnected, StorageUsed, TourButton, Trash, TutorialsButton, FolderTypeSelection, DisplayFiles, DisplayOptions, FilesUploader, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, SharedAccounts, ReceiptAutofiler, HomeBoardGrid, ShortPartnerTile, ValueMonitor, TrendingValue, ReceiptsFiled, PropertyTaxes, AddHomeItem, SendCommunication, PartnerCatalogPanel, DynamicForm, PanelHeader, EditHomePanel, HomeCard, EditHomeFooter, HomeAssistant, } from '..';
+import { HomeHeader, HomeCardWithRecipent, AddFolder, EditAccountType, FolderSharing, RightPanel, HomeBoardTour, RoomsMenu, ContactsContent, AppBar, BarDivider, ContactList, PeopleConnected, StorageUsed, TourButton, Trash, TutorialsButton, FolderTypeSelection, DisplayFiles, DisplayOptions, FilesUploader, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, SharedAccounts, ReceiptAutofiler, HomeBoardGrid, ShortPartnerTile, ValueMonitor, TrendingValue, ReceiptsFiled, PropertyTaxes, AddHomeItem, SendCommunication, PartnerCatalogPanel, DynamicForm, PanelHeader, EditHomePanel, HomeCard, EditHomeFooter, HomeAssistant, HomeAssistantPanel, } from '..';
 import { HomeCards, recipientsDb, FoldersDB, selectOptions, RoomsList, RoomsToAdd, } from '../../helpers';
-import { ContactsMock, DisplayFilesMock, formFieldsMock, homeBoardRecorsMock, lineChartData, menuMock, partnerCatalogMock, sharedAccountsMock, socialLinksMock2, taxesMock, userMock, videoMock, } from '../../mocks';
+import { ContactsMock, DisplayFilesMock, formFieldsMock, homeBoardRecorsMock, lineChartData, menuMock, partnerCatalogMock, sharedAccountsMock, socialLinksMock2, taxesMock, userMock, videoMock, homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, } from '../../mocks';
 import { useHomeBoard, useWindowDimensions } from '../../hooks';
 import { Painting } from '../../assets/images';
+const forms = {
+    1: homeAssitantStep1FormMock,
+    2: homeAssitantStep2FormMock,
+    3: homeAssitantStep3FormMock,
+    4: homeAssitantStep4FormMock,
+    5: homeAssitantStep5FormMock,
+    6: homeAssitantStep6FormMock,
+};
 export const HomeBoard = () => {
-    const { currentStep, activeTour, currentComponent, form, handleClose, handleEditHomeClick, handleFolderClick, handleNewFolder, handleStep, homeName, isRightOpen, onRightClose, setActiveTour, setShowFooter, showFooter, showOverlay, } = useHomeBoard();
+    const { currentStep, activeTour, currentComponent, form, handleClose, handleEditHomeClick, handleFolderClick, handleNewFolder, handleStep, homeName, isRightOpen, onRightClose, setActiveTour, setShowFooter, showFooter, showOverlay, handleHomeAssistantFormChange, handleHomeAssistantBack, homeAssistantCurrentStep, handleHomeAssistantClick, } = useHomeBoard();
+    const currentHomeAssistantForm = forms[homeAssistantCurrentStep];
     const rightPanelComponents = {
         AddFolder: (_jsx(AddFolder, { handleClose: onRightClose, handleSubmit: (_) => {
                 onRightClose();
@@ -37,11 +46,12 @@ export const HomeBoard = () => {
                     handleClick: () => null,
                 },
             ] })),
-        PartnerCatalog: (_jsx(PartnerCatalogPanel, { onClose: () => null, onPartnerAdd: () => null, partners: partnerCatalogMock })),
+        PartnerCatalog: (_jsx(PartnerCatalogPanel, { onClose: onRightClose, onPartnerAdd: () => null, partners: partnerCatalogMock })),
         AddHouseholdItem: (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Painting, title: "Add Household Item" }) }), _jsx(DrawerBody, { children: _jsx(DynamicForm, { form: formFieldsMock }) })] })),
+        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, { currentStep: 6, onStepClick: () => null }), _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/helpers/forms/dynamicForm.helper.js

@@ -1,4 +1,4 @@
-import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool2, Closet, Structure, GlassWater, Roof2, } from '../../assets/images';
+import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool2, Closet, Structure, GlassWater, Roof2, Target, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -40,4 +40,5 @@ export const fieldIcons = {
     umbrella: Closet,
     water: GlassWater,
     house: Structure,
+    target: Target,
 };

package/dist/hooks/homeBoard/useHomeBoard.d.ts

@@ -17,4 +17,8 @@ export declare const useHomeBoard: () => {
     setShowFooter: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     showFooter: boolean;
     showOverlay: boolean;
+    handleHomeAssistantFormChange: () => void;
+    handleHomeAssistantBack: () => void;
+    homeAssistantCurrentStep: number;
+    handleHomeAssistantClick: (step: number) => void;
 };

package/dist/hooks/homeBoard/useHomeBoard.js

@@ -7,8 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useDisclosure } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
+import { useDisclosure } from '@chakra-ui/react';
 export const useHomeBoard = () => {
     const homeName = 'The Edmunds';
     const { isOpen: isRightOpen, onOpen: onRightOpen, onClose: onRightClose, } = useDisclosure();
@@ -17,6 +17,17 @@ export const useHomeBoard = () => {
     const [activeTour, setActiveTour] = useState(false);
     const [showFooter, setShowFooter] = useState(false);
     const [currentStep, setCurrentStep] = useState('homeboard');
+    const [homeAssistantCurrentStep, setHomeAssistantCurrentStep] = useState(6);
+    const handleHomeAssistantFormChange = () => setHomeAssistantCurrentStep((prev) => {
+        if (prev === 6)
+            return 1;
+        return prev + 1;
+    });
+    const handleHomeAssistantBack = () => setHomeAssistantCurrentStep((prev) => {
+        if (prev === 1)
+            return 6;
+        return prev - 1;
+    });
     const handleNewFolder = () => {
         setCurrentComponent('AddFolder');
         onRightOpen();
@@ -29,6 +40,11 @@ export const useHomeBoard = () => {
         setCurrentComponent('EditHome');
         onRightOpen();
     };
+    const handleHomeAssistantClick = (step) => {
+        setCurrentComponent('HomeAssistant');
+        setHomeAssistantCurrentStep(step);
+        onRightOpen();
+    };
     const componentsByStep = {
         nameFolder: 'AddFolder',
         addFiles: 'FolderDetail',
@@ -113,5 +129,9 @@ export const useHomeBoard = () => {
         setShowFooter,
         showFooter,
         showOverlay,
+        handleHomeAssistantFormChange,
+        handleHomeAssistantBack,
+        homeAssistantCurrentStep,
+        handleHomeAssistantClick,
     };
 };

package/dist/hooks/useComponentStyles.js

@@ -9,6 +9,6 @@ export const useComponentStyles = (ids, selectedId) => {
     });
     const currentComponent = document.getElementById(selectedId);
     if (currentComponent) {
-        currentComponent.style.zIndex = '99999';
+        currentComponent.style.zIndex = '1400';
     }
 };

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -1,6 +1,6 @@
 import { FolderFileI } from '../..';
 type KindTypes = 'checkbox' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default';
-export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'calc' | 'calendar' | 'check' | 'co2' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'house';
+export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'calc' | 'calendar' | 'check' | 'co2' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'house' | 'target';
 export type ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;
 export interface ReportI {

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

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

package/dist/mocks/homeAssistant/homeAssistantForms.d.ts

@@ -4,3 +4,4 @@ export declare const homeAssitantStep2FormMock: ReportI[];
 export declare const homeAssitantStep3FormMock: ReportI[];
 export declare const homeAssitantStep4FormMock: ReportI[];
 export declare const homeAssitantStep5FormMock: ReportI[];
+export declare const homeAssitantStep6FormMock: ReportI[];

package/dist/mocks/homeAssistant/homeAssistantForms.js

@@ -236,3 +236,50 @@ export const homeAssitantStep5FormMock = [
         icon: 'plate',
     },
 ];
+export const homeAssitantStep6FormMock = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Save money',
+        description: 'I want to save money.',
+        options: ['Highest', 'High', 'Neutral', 'Low', 'None'],
+        value: 'Highest',
+        type: 'select',
+        icon: 'target',
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Maintain home',
+        description: 'I want to know how to maintain my home.',
+        options: ['Highest', 'High', 'Neutral', 'Low', 'None'],
+        value: 'Highest',
+        type: 'select',
+        icon: 'target',
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Investments',
+        description: 'I want to know how to make good investmemts into my home to maximize my ROI.',
+        options: ['Highest', 'High', 'Neutral', 'Low', 'None'],
+        value: 'Highest',
+        type: 'select',
+        icon: 'target',
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Investments',
+        description: 'I want to be able to see how much I invest into my home.',
+        options: ['Highest', 'High', 'Neutral', 'Low', 'None'],
+        value: 'Highest',
+        type: 'select',
+        icon: 'target',
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Investments',
+        description: 'I want to be able to see how much I invest into my home.',
+        options: ['Highest', 'High', 'Neutral', 'Low', 'None'],
+        value: 'Highest',
+        type: 'select',
+        icon: 'target',
+    },
+];

package/dist/stories/homeAssistant/panel/HomeAssistantPanel.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
 import { HomeAssistantPanel, RightPanel } from '../../../components';
-import { homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, } from '../../../mocks';
+import { homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, } from '../../../mocks';
 import { useState } from 'react';
 export default {
     title: 'Components/HomeAssistant',
@@ -22,7 +22,7 @@ export const HomeAssistantPanelComponent = (args) => {
         3: homeAssitantStep3FormMock,
         4: homeAssitantStep4FormMock,
         5: homeAssitantStep5FormMock,
-        6: homeAssitantStep5FormMock,
+        6: homeAssitantStep6FormMock,
     };
     const handleFormChange = () => setCurrentStep((prev) => {
         if (prev === 6)

package/package.json

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

package/src/components/forms/dynamicForm/DynamicFormSimple.tsx

@@ -27,7 +27,7 @@ export const DynamicFormSimple = ({ form: fields }: DynamicFormSimpleI) => {
               id,
               value,
               icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
-              placeholder: name || description,
+              placeholder: name ?? description,
             }
             switch (type) {
               case 'number':

package/src/components/homeAssistant/HomeAssistantButton.tsx

@@ -15,8 +15,9 @@ export const HomeAssistantButton = ({
   const handleClick = () => {
     if (!isPending) onStepClick(currentStep)
   }
+  const buttonId = `homeAssistantButton-${currentStep}`
   return (
-    <Box position="relative">
+    <Box position="relative" id={buttonId}>
       {isCompleted && (
         <Image
           src={CheckInCircle}

package/src/components/homeAssistant/HomeAssistantSteps.tsx

@@ -2,18 +2,34 @@ import { Center, SimpleGrid, Stack } from '@chakra-ui/react'
 import { HomeAssistantStepsI } from '@/interfaces'
 import { HomeAssistantButton, HomeAssistantStepper } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
+import { useComponentStyles } from '@/hooks'
 
 export const HomeAssistantSteps = ({
   currentStep,
   onStepClick,
+  currentPanel,
 }: HomeAssistantStepsI) => {
+  const wrapperZIndex = currentPanel ? undefined : '2'
+  const stepId = `homeAssistantButton-${currentPanel}`
+  const componentIds = currentPanel
+    ? [
+        'homeAssistantButton-1',
+        'homeAssistantButton-2',
+        'homeAssistantButton-3',
+        'homeAssistantButton-4',
+        'homeAssistantButton-5',
+        'homeAssistantButton-6',
+      ]
+    : []
+
+  useComponentStyles(componentIds, stepId)
   return (
     <Stack
       spacing="8"
       w="fit-content"
       position="relative"
       top={['-10px', '-30px']}
-      zIndex="2"
+      zIndex={wrapperZIndex}
     >
       <HomeAssistantStepper currentStep={currentStep} totalSteps={6} />
       <SimpleGrid columns={[2, 3]} spacing="base">

package/src/components/homeBoard/HomeBoard.tsx

@@ -50,6 +50,7 @@ import {
   HomeCard,
   EditHomeFooter,
   HomeAssistant,
+  HomeAssistantPanel,
 } from '@/components'
 import {
   HomeCards,
@@ -60,7 +61,6 @@ import {
   RoomsToAdd,
 } from '@/helpers'
 
-
 import {
   ContactsMock,
   DisplayFilesMock,
@@ -74,10 +74,27 @@ import {
   taxesMock,
   userMock,
   videoMock,
+  homeAssitantStep1FormMock,
+  homeAssitantStep2FormMock,
+  homeAssitantStep3FormMock,
+  homeAssitantStep4FormMock,
+  homeAssitantStep5FormMock,
+  homeAssitantStep6FormMock,
 } from '@/mocks'
 import { useHomeBoard, useWindowDimensions } from '@/hooks'
 import { Painting } from '@/assets/images'
 
+import { ReportI } from '@/interfaces'
+
+const forms: Record<number, ReportI[]> = {
+  1: homeAssitantStep1FormMock,
+  2: homeAssitantStep2FormMock,
+  3: homeAssitantStep3FormMock,
+  4: homeAssitantStep4FormMock,
+  5: homeAssitantStep5FormMock,
+  6: homeAssitantStep6FormMock,
+}
+
 export const HomeBoard = () => {
   const {
     currentStep,
@@ -96,8 +113,14 @@ export const HomeBoard = () => {
     setShowFooter,
     showFooter,
     showOverlay,
+    handleHomeAssistantFormChange,
+    handleHomeAssistantBack,
+    homeAssistantCurrentStep,
+    handleHomeAssistantClick,
   } = useHomeBoard()
 
+  const currentHomeAssistantForm = forms[homeAssistantCurrentStep]
+
   const rightPanelComponents: { [key: string]: JSX.Element } = {
     AddFolder: (
       <AddFolder
@@ -212,7 +235,7 @@ export const HomeBoard = () => {
     ),
     PartnerCatalog: (
       <PartnerCatalogPanel
-        onClose={() => null}
+        onClose={onRightClose}
         onPartnerAdd={() => null}
         partners={partnerCatalogMock}
       />
@@ -231,6 +254,16 @@ export const HomeBoard = () => {
         </DrawerBody>
       </DrawerContent>
     ),
+    HomeAssistant: (
+      <HomeAssistantPanel
+        currentStep={homeAssistantCurrentStep}
+        currentForm={currentHomeAssistantForm}
+        onNext={handleHomeAssistantFormChange}
+        onBack={handleHomeAssistantBack}
+        onApplianceClick={() => null}
+        onClose={onRightClose}
+      />
+    ),
   }
 
   const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md'
@@ -280,7 +313,11 @@ export const HomeBoard = () => {
                 records={homeBoardRecorsMock}
               />
 
-              <HomeAssistant currentStep={6} onStepClick={() => null} />
+              <HomeAssistant
+                currentPanel={homeAssistantCurrentStep}
+                currentStep={6}
+                onStepClick={handleHomeAssistantClick}
+              />
               <PropertyTaxes
                 estimatedTaxValue={1000}
                 menuItems={menuMock}

package/src/helpers/forms/dynamicForm.helper.ts

@@ -34,12 +34,11 @@ import {
   Light,
   Plate,
   Pool2,
-  Roof,
   Closet,
-  Water,
   Structure,
   GlassWater,
   Roof2,
+  Target,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -84,4 +83,5 @@ export const fieldIcons: Record<IconTypes, string> = {
   umbrella: Closet,
   water: GlassWater,
   house: Structure,
+  target: Target,
 }

package/src/hooks/homeBoard/useHomeBoard.ts

@@ -1,6 +1,6 @@
-import { EditHomeFormI, FolderI } from '@/interfaces'
-import { useDisclosure } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import { EditHomeFormI, FolderI } from '@/interfaces'
 
 export const useHomeBoard = () => {
   const homeName = 'The Edmunds'
@@ -15,6 +15,20 @@ export const useHomeBoard = () => {
   const [activeTour, setActiveTour] = useState(false)
   const [showFooter, setShowFooter] = useState(false)
   const [currentStep, setCurrentStep] = useState('homeboard')
+  const [homeAssistantCurrentStep, setHomeAssistantCurrentStep] =
+    useState<number>(6)
+
+  const handleHomeAssistantFormChange = () =>
+    setHomeAssistantCurrentStep((prev) => {
+      if (prev === 6) return 1
+      return prev + 1
+    })
+
+  const handleHomeAssistantBack = () =>
+    setHomeAssistantCurrentStep((prev) => {
+      if (prev === 1) return 6
+      return prev - 1
+    })
 
   const handleNewFolder = () => {
     setCurrentComponent('AddFolder')
@@ -31,6 +45,12 @@ export const useHomeBoard = () => {
     onRightOpen()
   }
 
+  const handleHomeAssistantClick = (step: number) => {
+    setCurrentComponent('HomeAssistant')
+    setHomeAssistantCurrentStep(step)
+    onRightOpen()
+  }
+
   const componentsByStep: Record<string, string> = {
     nameFolder: 'AddFolder',
     addFiles: 'FolderDetail',
@@ -122,5 +142,9 @@ export const useHomeBoard = () => {
     setShowFooter,
     showFooter,
     showOverlay,
+    handleHomeAssistantFormChange,
+    handleHomeAssistantBack,
+    homeAssistantCurrentStep,
+    handleHomeAssistantClick,
   }
 }

package/src/hooks/useComponentStyles.ts

@@ -12,6 +12,6 @@ export const useComponentStyles = (ids: string[], selectedId: string) => {
   const currentComponent = document.getElementById(selectedId)
 
   if (currentComponent) {
-    currentComponent.style.zIndex = '99999'
+    currentComponent.style.zIndex = '1400'
   }
 }

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -60,6 +60,7 @@ export type IconTypes =
   | 'light'
   | 'plate'
   | 'house'
+  | 'target'
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null

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

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

package/src/mocks/homeAssistant/homeAssistantForms.ts

@@ -1,17 +1,5 @@
 import { faker } from '@faker-js/faker'
-import { ApplianceStepI, ReportI } from '@/interfaces'
-import {
-  CookTop,
-  Dishwasher,
-  Dryer,
-  Freezer,
-  Fridge,
-  Hood,
-  Microwave,
-  Oven,
-  Range,
-  Washer,
-} from '@/assets/images'
+import { ReportI } from '@/interfaces'
 
 export const homeAssitantStep1FormMock: ReportI[] = [
   {
@@ -255,3 +243,52 @@ export const homeAssitantStep5FormMock: ReportI[] = [
     icon: 'plate',
   },
 ]
+
+export const homeAssitantStep6FormMock: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Save money',
+    description: 'I want to save money.',
+    options: ['Highest', 'High', 'Neutral', 'Low', 'None'],
+    value: 'Highest',
+    type: 'select',
+    icon: 'target',
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Maintain home',
+    description: 'I want to know how to maintain my home.',
+    options: ['Highest', 'High', 'Neutral', 'Low', 'None'],
+    value: 'Highest',
+    type: 'select',
+    icon: 'target',
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Investments',
+    description:
+      'I want to know how to make good investmemts into my home to maximize my ROI.',
+    options: ['Highest', 'High', 'Neutral', 'Low', 'None'],
+    value: 'Highest',
+    type: 'select',
+    icon: 'target',
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Investments',
+    description: 'I want to be able to see how much I invest into my home.',
+    options: ['Highest', 'High', 'Neutral', 'Low', 'None'],
+    value: 'Highest',
+    type: 'select',
+    icon: 'target',
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Investments',
+    description: 'I want to be able to see how much I invest into my home.',
+    options: ['Highest', 'High', 'Neutral', 'Low', 'None'],
+    value: 'Highest',
+    type: 'select',
+    icon: 'target',
+  },
+]

package/src/stories/homeAssistant/panel/HomeAssistantPanel.stories.tsx

@@ -8,6 +8,7 @@ import {
   homeAssitantStep3FormMock,
   homeAssitantStep4FormMock,
   homeAssitantStep5FormMock,
+  homeAssitantStep6FormMock,
 } from '@/mocks'
 import { useState } from 'react'
 
@@ -35,7 +36,7 @@ export const HomeAssistantPanelComponent = (args: HomeAssistantPanelI) => {
     3: homeAssitantStep3FormMock,
     4: homeAssitantStep4FormMock,
     5: homeAssitantStep5FormMock,
-    6: homeAssitantStep5FormMock,
+    6: homeAssitantStep6FormMock,
   }
   const handleFormChange = () =>
     setCurrentStep((prev) => {