@homefile/components-v2 1.6.0 → 1.6.1

package/dist/assets/locales/en/index.json

@@ -400,6 +400,7 @@
     },
     "details": "Provide details about your home’s",
     "homeMonitor": "Home Monitor",
+    "homeMonitoring": "Homefile is monitoring your home.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
       "homeAction": "Home Action",

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

@@ -1,2 +1,2 @@
 import { HomeMonitorButtonI } from '../../interfaces';
-export declare const HomeMonitorButton: ({ currentStep, onStepClick, status, step, }: HomeMonitorButtonI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorButton: ({ currentStep, menuItems, onStepClick, status, step, }: HomeMonitorButtonI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitorButton.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react';
 import { getIconAltText } from '../../utils';
-export const HomeMonitorButton = ({ currentStep, onStepClick, status, step, }) => {
+import { IconMenu, MoreHorizontal } from '..';
+export const HomeMonitorButton = ({ currentStep, menuItems, onStepClick, status = 'ok', step, }) => {
     const iconAltText = getIconAltText(step.icon);
     const handleClick = () => {
-        console.log({ status });
         if (status !== 'ok')
             onStepClick(currentStep);
     };
-    return (_jsx(Box, { children: _jsxs(Stack, Object.assign({ as: "button", spacing: "2", borderRadius: "lg", boxShadow: "lg", border: "1px solid transparent", w: "90px", align: "center", h: "96px", py: "base", bg: "neutral.white" }, setStyles(status), { onClick: handleClick, children: [_jsx(Center, { h: "60%", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] })) }));
+    const isDisabled = Number(menuItems.length) === 0;
+    return (_jsxs(Box, { position: "relative", children: [_jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", boxShadow: "lg", zIndex: "2", children: [_jsx(Box, { bg: status === 'alert' ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, Object.assign({ position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", w: "90px", align: "center", h: "96px", py: "base" }, setStyles(status), { onClick: handleClick, children: [_jsx(Center, { h: "60%", marginTop: "2", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "4", children: _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: currentStep, menuItems: menuItems, disabled: isDisabled }) })] }));
 };
 const setStyles = (status) => {
     switch (status) {
@@ -24,7 +25,6 @@ const setStyles = (status) => {
             };
         case 'ok':
             return {
-                cursor: 'not-allowed',
                 filter: 'grayscale(1) opacity(0.6)',
             };
     }

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

@@ -1,2 +1,2 @@
 import { HomeMonitortStepsI } from '../../interfaces';
-export declare const HomeMonitorSteps: ({ onStepClick, stepsWithAlerts, }: HomeMonitortStepsI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorSteps: ({ menuItems, onStepClick, stepsWithAlerts, }: HomeMonitortStepsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Flex } from '@chakra-ui/react';
 import { HomeMonitorButton } from '..';
 import { homeAssistantSteps } from '../../helpers';
-export const HomeMonitorSteps = ({ onStepClick, stepsWithAlerts, }) => {
-    return (_jsx(Flex, { gap: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { flex: "auto", children: _jsx(HomeMonitorButton, { currentStep: index + 1, onStepClick: onStepClick, status: getStatus(index + 1, stepsWithAlerts), step: step }) }, step.title))) }));
+export const HomeMonitorSteps = ({ menuItems, onStepClick, stepsWithAlerts, }) => {
+    return (_jsx(Flex, { gap: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { flex: "auto", children: _jsx(HomeMonitorButton, { currentStep: index + 1, menuItems: menuItems, onStepClick: onStepClick, status: getStatus(index + 1, stepsWithAlerts), step: step }) }, step.title))) }));
 };
 const getStatus = (index, stepsWithAlerts) => {
     const hasAlert = stepsWithAlerts.includes(index);

package/dist/components/homeAssistant/monitorAlerts/HomefileMonitoring.d.ts

@@ -0,0 +1 @@
+export declare const HomefileMonitoring: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/monitorAlerts/HomefileMonitoring.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { HomieAnimation } from '../..';
+export const HomefileMonitoring = () => {
+    return (_jsx(Box, { p: "base", borderRadius: "lg", bg: "#C5E9F4", h: "66px", zIndex: "2", flex: "1", children: _jsxs(Flex, { align: "center", children: [_jsx(Box, { boxSize: "47px", children: _jsx(HomieAnimation, {}) }), _jsx(Text, { children: t('homeAssistant.homeMonitoring') })] }) }));
+};

package/dist/components/homeAssistant/monitorAlerts/Notifications.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Flex, Center, Text } from '@chakra-ui/react';
 import { t } from 'i18next';
 export const Notifications = ({ date = '', local = '' }) => {
-    return (_jsxs(Stack, { spacing: "base", minH: "full", zIndex: "2", children: [_jsxs(Flex, { justify: "space-between", children: [_jsx(CustomText, { children: date }), _jsx(CustomText, { children: local })] }), _jsx(Center, { w: "188px", h: "full", border: "1px dashed", borderColor: "blue.1", borderRadius: "sm", children: _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: t('homeAssistant.notifications') }) })] }));
+    return (_jsxs(Stack, { spacing: "base", minH: "full", zIndex: "2", children: [_jsxs(Flex, { justify: "space-between", children: [_jsx(CustomText, { children: date }), _jsx(CustomText, { children: local })] }), _jsx(Center, { w: "188px", h: "243px", border: "1px dashed", borderColor: "blue.1", borderRadius: "sm", children: _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: t('homeAssistant.notifications') }) })] }));
 };
 const CustomText = ({ children = '' }) => {
     return (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: children }));

package/dist/components/homeAssistant/monitorAlerts/index.d.ts

@@ -3,5 +3,6 @@ export * from './AlertHeader';
 export * from './AlertTemplate';
 export * from './AlertTitle';
 export * from './BaseAlertCard';
+export * from './HomefileMonitoring';
 export * from './MonitorAlerts';
 export * from './Notifications';

package/dist/components/homeAssistant/monitorAlerts/index.js

@@ -3,5 +3,6 @@ export * from './AlertHeader';
 export * from './AlertTemplate';
 export * from './AlertTitle';
 export * from './BaseAlertCard';
+export * from './HomefileMonitoring';
 export * from './MonitorAlerts';
 export * from './Notifications';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileContent, MyProfileFooter, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileContent, MyProfileFooter, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor } from './utils';
 export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileContent, MyProfileFooter, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxTile, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadTour, LeftPanel, MediaDetailsStep, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileContent, MyProfileFooter, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor } from './utils';
 export { billingProxy, dynamicFormProxy, homeCardProxy, partnerContentProxy, partnerDetailsProxy, paymentMethodProxy, recordsInputsProxy, recordsInputsToDBProxy, userDetailsProxy, confirmAddressProxy, } from './proxies';

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

@@ -1,10 +1,12 @@
-import { HomeAssistantStepI } from '..';
+import { HomeAssistantStepI, MenuItemI } from '..';
 export interface HomeMonitortStepsI {
+    menuItems: MenuItemI[];
     stepsWithAlerts: number[];
     onStepClick: (step: number) => void;
 }
 export interface HomeMonitorButtonI {
     currentStep: number;
+    menuItems: HomeMonitortStepsI['menuItems'];
     onStepClick: HomeMonitortStepsI['onStepClick'];
     status: 'alert' | 'ok';
     step: HomeAssistantStepI;

package/dist/stories/homeAssistant/HomeMonitor.stories.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HomeMonitor, HomeMonitorSteps, MonitorAlerts, Notifications, } from '../../components';
+import { HomefileMonitoring, HomeMonitor, HomeMonitorSteps, Notifications, } from '../../components';
 import { Box, Flex, Stack } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
-import { useState } from 'react';
+import { menuMock } from '../../mocks';
 export default {
     title: 'Components/HomeAssistant',
     component: HomeMonitor,
@@ -11,15 +11,8 @@ export default {
     ],
 };
 export const HomeMonitorComponent = () => {
-    const [alertId, setAlertId] = useState('smoke-detector-battery');
     const handleAlertClick = (step) => {
-        setAlertId(stepAlerts[step]);
         action('onStepClick')(step);
     };
-    return (_jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(MonitorAlerts, { alertId: alertId }), _jsx(Notifications, { date: "10-10-24", local: "TX - Houston" })] }), _jsx(HomeMonitorSteps, { stepsWithAlerts: [2, 3, 5], onStepClick: handleAlertClick })] }) }));
-};
-const stepAlerts = {
-    2: 'smoke-detector-expired',
-    3: 'change-air-filter',
-    5: 'smoke-detector-battery',
+    return (_jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, {}), _jsx(Notifications, { date: "10-10-24", local: "TX - Houston" })] }), _jsx(HomeMonitorSteps, { menuItems: menuMock, stepsWithAlerts: [], onStepClick: handleAlertClick })] }) }));
 };

package/package.json

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

package/src/assets/locales/en/index.json

@@ -400,6 +400,7 @@
     },
     "details": "Provide details about your home’s",
     "homeMonitor": "Home Monitor",
+    "homeMonitoring": "Homefile is monitoring your home.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
       "homeAction": "Home Action",

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -1,49 +1,77 @@
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react'
 import { HomeMonitorButtonI } from '@/interfaces'
 import { getIconAltText } from '@/utils'
+import { IconMenu, MoreHorizontal } from '@/components'
 
 export const HomeMonitorButton = ({
   currentStep,
+  menuItems,
   onStepClick,
-  status,
+  status = 'ok',
   step,
 }: HomeMonitorButtonI) => {
   const iconAltText = getIconAltText(step.icon)
   const handleClick = () => {
-    console.log({ status })
     if (status !== 'ok') onStepClick(currentStep)
   }
 
+  const isDisabled = Number(menuItems.length) === 0
+
   return (
-    <Box>
-      <Stack
-        as="button"
-        spacing="2"
+    <Box position="relative">
+      <Box
+        position="relative"
+        bg="neutral.white"
         borderRadius="lg"
         boxShadow="lg"
-        border="1px solid transparent"
-        w="90px"
-        align="center"
-        h="96px"
-        py="base"
-        bg="neutral.white"
-        {...setStyles(status)}
-        onClick={handleClick}
+        zIndex="2"
       >
-        <Center h="60%">
-          <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
-        </Center>
-        <Center h="40%">
-          <Text
-            fontSize="xs"
-            textTransform="uppercase"
-            textAlign="center"
-            lineHeight="14px"
-          >
-            {step.title}
-          </Text>
-        </Center>
-      </Stack>
+        <Box
+          bg={status === 'alert' ? 'error.2' : 'green.1'}
+          boxSize="10px"
+          borderRadius="full"
+          position="absolute"
+          top="6px"
+          left="6px"
+          zIndex="8"
+        />
+
+        <Stack
+          position="relative"
+          zIndex="2"
+          as="button"
+          spacing="2"
+          border="1px solid transparent"
+          w="90px"
+          align="center"
+          h="96px"
+          py="base"
+          {...setStyles(status)}
+          onClick={handleClick}
+        >
+          <Center h="60%" marginTop="2">
+            <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
+          </Center>
+          <Center h="40%">
+            <Text
+              fontSize="xs"
+              textTransform="uppercase"
+              textAlign="center"
+              lineHeight="14px"
+            >
+              {step.title}
+            </Text>
+          </Center>
+        </Stack>
+      </Box>
+      <Box position="absolute" top="-2px" right="4px" zIndex="4">
+        <IconMenu
+          icon={<MoreHorizontal size={26} />}
+          itemForm={currentStep}
+          menuItems={menuItems}
+          disabled={isDisabled}
+        />
+      </Box>
     </Box>
   )
 }
@@ -62,7 +90,6 @@ const setStyles = (status: HomeMonitorButtonI['status']) => {
       }
     case 'ok':
       return {
-        cursor: 'not-allowed',
         filter: 'grayscale(1) opacity(0.6)',
       }
   }

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -4,6 +4,7 @@ import { HomeMonitorButton } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
 
 export const HomeMonitorSteps = ({
+  menuItems,
   onStepClick,
   stepsWithAlerts,
 }: HomeMonitortStepsI) => {
@@ -13,6 +14,7 @@ export const HomeMonitorSteps = ({
         <Box key={step.title} flex="auto">
           <HomeMonitorButton
             currentStep={index + 1}
+            menuItems={menuItems}
             onStepClick={onStepClick}
             status={getStatus(index + 1, stepsWithAlerts)}
             step={step}

package/src/components/homeAssistant/monitorAlerts/HomefileMonitoring.tsx

@@ -0,0 +1,16 @@
+import { t } from 'i18next'
+import { Box, Flex, Text } from '@chakra-ui/react'
+import { HomieAnimation } from '@/components'
+
+export const HomefileMonitoring = () => {
+  return (
+    <Box p="base" borderRadius="lg" bg="#C5E9F4" h="66px" zIndex="2" flex="1">
+      <Flex align="center">
+        <Box boxSize="47px">
+          <HomieAnimation />
+        </Box>
+        <Text>{t('homeAssistant.homeMonitoring')}</Text>
+      </Flex>
+    </Box>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/Notifications.tsx

@@ -10,7 +10,7 @@ export const Notifications = ({ date = '', local = '' }) => {
       </Flex>
       <Center
         w="188px"
-        h="full"
+        h="243px"
         border="1px dashed"
         borderColor="blue.1"
         borderRadius="sm"

package/src/components/homeAssistant/monitorAlerts/index.ts

@@ -3,5 +3,6 @@ export * from './AlertHeader'
 export * from './AlertTemplate'
 export * from './AlertTitle'
 export * from './BaseAlertCard'
+export * from './HomefileMonitoring'
 export * from './MonitorAlerts'
 export * from './Notifications'

package/src/index.ts

@@ -71,6 +71,7 @@ export {
   HomeBoardTour,
   HomeCard,
   HomeCardWithRecipent,
+  HomefileMonitoring,
   HomeHeader,
   HomeMonitor,
   HomeMonitorSteps,

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

@@ -1,12 +1,14 @@
-import { HomeAssistantStepI } from '@/interfaces'
+import { HomeAssistantStepI, MenuItemI } from '@/interfaces'
 
 export interface HomeMonitortStepsI {
+  menuItems: MenuItemI[]
   stepsWithAlerts: number[]
   onStepClick: (step: number) => void
 }
 
 export interface HomeMonitorButtonI {
   currentStep: number
+  menuItems: HomeMonitortStepsI['menuItems']
   onStepClick: HomeMonitortStepsI['onStepClick']
   status: 'alert' | 'ok'
   step: HomeAssistantStepI

package/src/stories/homeAssistant/HomeMonitor.stories.tsx

@@ -1,14 +1,13 @@
 import { Meta } from '@storybook/react'
 import {
+  HomefileMonitoring,
   HomeMonitor,
   HomeMonitorSteps,
-  MonitorAlerts,
   Notifications,
 } from '@/components'
 import { Box, Flex, Stack } from '@chakra-ui/react'
 import { action } from '@storybook/addon-actions'
-import { MonitorAlertsType } from '@/interfaces'
-import { useState } from 'react'
+import { menuMock } from '@/mocks'
 
 export default {
   title: 'Components/HomeAssistant',
@@ -23,32 +22,22 @@ export default {
 } as Meta
 
 export const HomeMonitorComponent = () => {
-  const [alertId, setAlertId] = useState<MonitorAlertsType>(
-    'smoke-detector-battery'
-  )
-
   const handleAlertClick = (step: number) => {
-    setAlertId(stepAlerts[step])
     action('onStepClick')(step)
   }
   return (
     <HomeMonitor>
       <Stack spacing="base">
         <Flex gap="base">
-          <MonitorAlerts alertId={alertId} />
+          <HomefileMonitoring />
           <Notifications date="10-10-24" local="TX - Houston" />
         </Flex>
         <HomeMonitorSteps
-          stepsWithAlerts={[2, 3, 5]}
+          menuItems={menuMock}
+          stepsWithAlerts={[]}
           onStepClick={handleAlertClick}
         />
       </Stack>
     </HomeMonitor>
   )
 }
-
-const stepAlerts: Record<number, MonitorAlertsType> = {
-  2: 'smoke-detector-expired',
-  3: 'change-air-filter',
-  5: 'smoke-detector-battery',
-}