@homefile/components-v2 2.21.2 → 2.22.1

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

@@ -414,10 +414,12 @@
     },
     "details": "Provide details about your home’s",
     "homeMonitor": "Homie",
+    "HomieMessages": "Homie Messages ({{ count }})",
     "homeMonitoring": "I’m learning about your home…",
     "homeMonitoringAlerts": "I have {{ count }} new messages for you.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
+      "completed": "Mark as Completed",
       "homeAction": "Home Action",
       "maintenance": "Maintenance Monitor",
       "protection": "Protection Monitor",

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, Flex, Image, Stack, Text } from '@chakra-ui/react';
 export const AlertTemplate = ({ bg = 'error.1', description, icon, title, }) => {
-    return (_jsxs(Flex, { gap: "base", px: "base", pt: "1", pb: "4", children: [_jsx(Center, { minW: "60px", h: "60px", bg: bg, borderRadius: "md", children: _jsx(Image, { src: icon, maxH: "36px", w: "auto" }) }), _jsxs(Stack, { children: [_jsx(Text, { fontWeight: "semibold", fontSize: "xl", lineHeight: "1.2", children: title }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1.2", children: description })] })] }));
+    return (_jsxs(Flex, { gap: "base", px: "base", pt: "1", pb: "4", children: [_jsx(Center, { minW: "60px", h: "60px", bg: bg, borderRadius: "md", children: _jsx(Image, { src: icon, maxH: "36px", w: "auto" }) }), _jsxs(Stack, { children: [_jsx(Text, { fontWeight: "600", fontSize: "xl", lineHeight: "1.2", children: title }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1.2", children: description })] })] }));
 };

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

@@ -1,2 +1,2 @@
 import { BackendAlertI } from '../../../interfaces';
-export declare const BackendAlert: ({ category, form, callback }: BackendAlertI) => import("react/jsx-runtime").JSX.Element;
+export declare const BackendAlert: ({ id, category, form, callback, onComplete, }: BackendAlertI) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertFields, BackendAlertCard, TabsHeader } from '../..';
 import { getCategoryStyles } from '../../../utils/Alerts.utils';
 import { Divider } from '@chakra-ui/react';
-export const BackendAlert = ({ category, form, callback }) => {
+export const BackendAlert = ({ id, category, form, callback, onComplete, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { headerBg, alertIcon, alertIconBg, alertTitle } = getCategoryStyles(category);
     const alert = form === null || form === void 0 ? void 0 : form.find((item) => item.type === 'alert');
@@ -15,5 +15,5 @@ export const BackendAlert = ({ category, form, callback }) => {
             component: (_jsx(AlertFields, { fields: (_a = tab.children) !== null && _a !== void 0 ? _a : [], callback: callback })),
         });
     })) !== null && _d !== void 0 ? _d : [];
-    return (_jsxs(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: (_e = alert === null || alert === void 0 ? void 0 : alert.icon) !== null && _e !== void 0 ? _e : '', title: (_f = alert === null || alert === void 0 ? void 0 : alert.label) !== null && _f !== void 0 ? _f : '', description: (_g = alert === null || alert === void 0 ? void 0 : alert.description) !== null && _g !== void 0 ? _g : '', children: [_jsx(Divider, {}), hasChildren && !isSingleTab && _jsx(TabsHeader, { tabList: tabs }), hasChildren && isSingleTab && (_jsx(AlertFields, { fields: (_k = (_j = (_h = alert === null || alert === void 0 ? void 0 : alert.children) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.children) !== null && _k !== void 0 ? _k : [], callback: callback }))] }));
+    return (_jsxs(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: (_e = alert === null || alert === void 0 ? void 0 : alert.icon) !== null && _e !== void 0 ? _e : '', title: (_f = alert === null || alert === void 0 ? void 0 : alert.label) !== null && _f !== void 0 ? _f : '', description: (_g = alert === null || alert === void 0 ? void 0 : alert.description) !== null && _g !== void 0 ? _g : '', onComplete: onComplete, showCollapse: hasChildren, id: id, children: [_jsx(Divider, {}), hasChildren && !isSingleTab && _jsx(TabsHeader, { tabList: tabs }), hasChildren && isSingleTab && (_jsx(AlertFields, { fields: (_k = (_j = (_h = alert === null || alert === void 0 ? void 0 : alert.children) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.children) !== null && _k !== void 0 ? _k : [], callback: callback }))] }));
 };

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

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { BackendAlertCardI } from '../../../interfaces';
-export declare const BackendAlertCard: ({ alertBg, alertIcon, alertTitle, children, icon, ...props }: PropsWithChildren<BackendAlertCardI>) => import("react/jsx-runtime").JSX.Element;
+export declare const BackendAlertCard: ({ alertBg, alertIcon, alertTitle, children, icon, id, onComplete, showCollapse, ...props }: PropsWithChildren<BackendAlertCardI>) => import("react/jsx-runtime").JSX.Element;

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

@@ -16,7 +16,7 @@ import { AlertHeader, AlertTemplate, AlertTitle } from '../..';
 import { Warranty } from '../../../assets/images';
 import { fieldIcons } from '../../../helpers';
 export const BackendAlertCard = (_a) => {
-    var { alertBg = 'error.2', alertIcon = Warranty, alertTitle = t('homeAssistant.monitorAlerts.protection'), children, icon = 'warning' } = _a, props = __rest(_a, ["alertBg", "alertIcon", "alertTitle", "children", "icon"]);
+    var { alertBg = 'error.2', alertIcon = Warranty, alertTitle = t('homeAssistant.monitorAlerts.protection'), children, icon = 'warning', id, onComplete, showCollapse = true } = _a, props = __rest(_a, ["alertBg", "alertIcon", "alertTitle", "children", "icon", "id", "onComplete", "showCollapse"]);
     const { isOpen, onToggle } = useDisclosure();
-    return (_jsxs(Box, { display: "flex", flexDir: "column", bg: "neutral.white", boxShadow: "lg", borderRadius: "lg", overflow: "hidden", maxW: "420px", children: [_jsx(AlertHeader, { bg: alertBg }), _jsx(AlertTitle, { alertIcon: alertIcon, alertTitle: alertTitle }), _jsx(AlertTemplate, Object.assign({}, props, { icon: fieldIcons[icon] })), _jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { bg: "lightBlue.1", children: children }) }), _jsx(Flex, { py: "base", bg: "lightBlue.1", justify: "flex-end", children: _jsx(Button, { variant: "leftRounded", w: "fit-content", px: "8", fontSize: "sm", fontWeight: "medium", onClick: onToggle, bg: isOpen ? 'blue.8' : 'blue.2', children: t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`) }) })] }));
+    return (_jsxs(Box, { display: "flex", flexDir: "column", bg: "neutral.white", boxShadow: "lg", borderRadius: "lg", overflow: "hidden", minW: "400px", children: [_jsx(AlertHeader, { bg: alertBg }), _jsx(AlertTitle, { alertIcon: alertIcon, alertTitle: alertTitle }), _jsx(AlertTemplate, Object.assign({}, props, { icon: fieldIcons[icon] })), _jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { bg: "lightBlue.1", children: children }) }), _jsxs(Flex, { py: "base", bg: "lightBlue.1", justify: id ? 'space-between' : 'end', gap: "4", children: [id && (_jsx(Button, { variant: "unstyled", w: "fit-content", px: "base", fontSize: "sm", color: "blue.3", onClick: () => onComplete === null || onComplete === void 0 ? void 0 : onComplete(id), transition: "color 0.2s", _hover: { color: 'blue.8' }, children: t('homeAssistant.monitorAlerts.completed') })), showCollapse && (_jsx(Button, { variant: "leftRounded", w: "fit-content", px: "8", fontSize: "sm", fontWeight: "medium", onClick: onToggle, bg: isOpen ? 'blue.8' : 'blue.2', children: t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`) }))] })] }));
 };

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

@@ -0,0 +1,2 @@
+import { HomeMonitorPanelI } from '../../../interfaces';
+export declare const HomeMonitorPanel: ({ onClose, alerts }: HomeMonitorPanelI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { DrawerBody, DrawerHeader, Stack } from '@chakra-ui/react';
+import { IA } from '../../../assets/images';
+import { BackendAlert, PanelHeader } from '../..';
+export const HomeMonitorPanel = ({ onClose, alerts }) => {
+    var _a;
+    return (_jsx(_Fragment, { children: _jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeAssistant.HomieMessages', {
+                        count: (_a = alerts === null || alerts === void 0 ? void 0 : alerts.length) !== null && _a !== void 0 ? _a : 0,
+                    }), icon: IA }), _jsx(DrawerBody, { p: "0", children: _jsx(Stack, { spacing: "base", p: "base", children: alerts === null || alerts === void 0 ? void 0 : alerts.map((alert) => (_jsx(BackendAlert, Object.assign({}, alert), alert.id))) }) })] }) }));
+};

package/dist/components/homeAssistant/monitorAlerts/alertDetails/PurchaseProduct.js

@@ -22,5 +22,5 @@ export const PurchaseProduct = (_a) => {
         good: '#5C81C7',
     };
     const bg = bgs[(_b = label === null || label === void 0 ? void 0 : label.toLowerCase()) !== null && _b !== void 0 ? _b : 'best'];
-    return (_jsxs(Container, { p: "base", position: "relative", boxShadow: "md", children: [_jsx(CustomBadge, { label: label, bg: bg, position: "absolute", top: "2", left: "-1", zIndex: "3" }), _jsxs(Flex, { gap: "base", ml: "6", children: [_jsx(Image, { src: icon, alt: name, objectFit: "contain", w: "70px", h: "70px" }), _jsxs(Stack, { spacing: "0", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", noOfLines: 2, overflow: "hidden", textOverflow: "ellipsis", children: name }), _jsxs(Flex, { alignSelf: "end", gap: "base", align: "end", children: [_jsxs(Stack, { spacing: "0", align: "end", children: [_jsx(Text, { fontSize: "xs", fontFamily: "secondary", color: "red", children: comments }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", lineHeight: "1.2", children: value })] }), _jsx(IconButton, { w: "2rem", h: "2rem", "aria-label": "Add product", variant: "iconOutlined", icon: _jsx(Plus, { size: 20, stroke: colors.blue['3'] }), onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({ name, icon, value: String(value) }, rest)) })] })] })] })] }));
+    return (_jsxs(Container, { p: "base", position: "relative", boxShadow: "md", children: [_jsx(CustomBadge, { label: label, bg: bg, position: "absolute", top: "2", left: "-1", zIndex: "3" }), _jsxs(Flex, { gap: "base", ml: "6", children: [_jsx(Image, { src: icon, alt: name, objectFit: "contain", w: "70px", h: "70px" }), _jsxs(Stack, { spacing: "0", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", noOfLines: 2, overflow: "hidden", textOverflow: "ellipsis", children: name }), _jsxs(Flex, { alignSelf: "end", gap: "base", align: "end", children: [_jsxs(Stack, { spacing: "0", align: "end", children: [_jsx(Text, { fontSize: "xs", fontFamily: "secondary", color: "red", children: comments }), _jsx(Text, { fontSize: "sm", fontWeight: "600", lineHeight: "1.2", children: value })] }), _jsx(IconButton, { w: "2rem", h: "2rem", "aria-label": "Add product", variant: "iconOutlined", icon: _jsx(Plus, { size: 20, stroke: colors.blue['3'] }), onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({ name, icon, value: String(value) }, rest)) })] })] })] })] }));
 };

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

@@ -7,5 +7,6 @@ export * from './BackendAlert';
 export * from './BackendAlertCard';
 export * from './WeatherWidget';
 export * from './HomefileMonitoring';
+export * from './HomeMonitorPanel';
 export * from './MonitorAlerts';
 export * from './Notifications';

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

@@ -7,5 +7,6 @@ export * from './BackendAlert';
 export * from './BackendAlertCard';
 export * from './WeatherWidget';
 export * from './HomefileMonitoring';
+export * from './HomeMonitorPanel';
 export * from './MonitorAlerts';
 export * from './Notifications';

package/dist/helpers/forms/dynamicForm.helper.js

@@ -1,4 +1,4 @@
-import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Contacts, 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, CircleFace, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, BookOpened, Company2, AADisease, AADressing, AALawn, AAMowing, AAWeed, AApest, FilterSize, Wallet, } from '../../assets/images';
+import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Contacts, 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, CircleFace, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, BookOpened, Company2, AADisease, AADressing, AALawn, AAMowing, AAWeed, AApest, FilterSize, Wallet, Fire, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -32,6 +32,7 @@ export const fieldIcons = {
     'solar-panel': SolarPanel,
     calendar2: Calendar2,
     drop: Drop,
+    fire: Fire,
     wind: Wind,
     foundation: Foundation,
     heater: Heater,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, 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, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, 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, SkeletonBox, 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, WeatherWidget, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, 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, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, 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, SkeletonBox, 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, WeatherWidget, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
 export { Contacts, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, } from './assets/images';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, 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, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, 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, SkeletonBox, 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, WeatherWidget, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, 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, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, 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, SkeletonBox, 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, WeatherWidget, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
 export { Contacts, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, } from './assets/images';

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

@@ -2,6 +2,8 @@ import { DynamicFormI } from '..';
 export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve';
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out';
 export type AlertFieldType = 'alert' | 'search' | 'purchase-product' | 'hire-info' | 'hire-service' | 'hire-service-cta';
-export interface BackendAlertI extends DynamicFormI {
+export interface BackendAlertI extends Pick<DynamicFormI, 'form' | 'callback'> {
+    id: string;
     category: AlertCategory;
+    onComplete?: (id?: string) => void;
 }

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

@@ -4,6 +4,9 @@ export interface BackendAlertCardI {
     alertTitle?: string;
     bg?: string;
     icon: string;
+    id?: string;
     title: string;
     description: string;
+    onComplete?: (id?: string) => void;
+    showCollapse?: boolean;
 }

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

@@ -0,0 +1,5 @@
+import { BackendAlertI } from '..';
+export interface HomeMonitorPanelI {
+    onClose: () => void;
+    alerts: BackendAlertI[];
+}

package/dist/interfaces/homeAssistant/HomeMonitorPanel.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/homeAssistant/index.d.ts

@@ -8,6 +8,7 @@ export * from './HomeAssistantPanel.interface';
 export * from './HomeAssistantStepper.interface';
 export * from './HomeAssistantSteps.interface';
 export * from './HomeAssistantTutorial.interface';
+export * from './HomeMonitorPanel.interface';
 export * from './HomeMonitorSteps.interface';
 export * from './MonitorAlerts.interface';
 export * from './WeatherWidget.interface';

package/dist/interfaces/homeAssistant/index.js

@@ -8,6 +8,7 @@ export * from './HomeAssistantPanel.interface';
 export * from './HomeAssistantStepper.interface';
 export * from './HomeAssistantSteps.interface';
 export * from './HomeAssistantTutorial.interface';
+export * from './HomeMonitorPanel.interface';
 export * from './HomeMonitorSteps.interface';
 export * from './MonitorAlerts.interface';
 export * from './WeatherWidget.interface';

package/dist/mocks/forms/dynamicForm.mock.d.ts

@@ -5,3 +5,5 @@ export declare const tileUIMock: ReportI[];
 export declare const viewingHomeItemMock: ReportI[];
 export declare const unknownFormMock: Record<string, any>;
 export declare const alertFieldsMock: ReportI[];
+export declare const alertFieldsMock2: ReportI[];
+export declare const alertFieldsMock3: ReportI[];

package/dist/mocks/forms/dynamicForm.mock.js

@@ -842,10 +842,10 @@ export const unknownFormMock = {
 export const alertFieldsMock = [
     {
         id: faker.database.mongodbObjectId(),
-        name: 'Filter',
-        label: 'Time to change your heating & cooling air filter.',
-        description: 'Changing your air filter every 30 days ensures efficient system performance and improves indoor air quality by trapping dust and allergens.',
-        icon: 'wind',
+        name: 'Batteries',
+        label: 'Check the batteries in your Smoke detectors.',
+        description: 'Regularly checking and replacing batteries ensures they function properly, especially during emergencies. Neglecting this simple task can lead to malfunctioning detectors, increasing the risk of undetected fires and potential harm to your family and property.',
+        icon: 'fire',
         value: false,
         type: 'alert',
         children: [
@@ -1101,3 +1101,25 @@ export const alertFieldsMock = [
         ],
     },
 ];
+export const alertFieldsMock2 = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Smoke Detectors',
+        label: 'Your smoke detectors could be expired.',
+        description: 'Smoke detectors are essential for home safety, alerting you to smoke and fire hazards. Regularly checking and replacing them ensures they function properly, providing peace of mind and protection for your family.',
+        icon: 'fire',
+        value: false,
+        type: 'alert',
+    },
+];
+export const alertFieldsMock3 = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Air Filter',
+        label: 'Time to change your heating & cooling air filter.',
+        description: 'Changing your air filter is critical for maintaining your home’s HVAC system efficiency and ensuring good air quality. A clogged filter forces your system to work harder, leading to higher energy bills and potential damage to components. Neglecting this simple maintenance can result in costly repairs or even a full system replacement, which can run into thousands of dollars. Regularly replacing your air filter not only saves money but also extends the lifespan of your HVAC system, keeping your home comfortable and your expenses in check.',
+        icon: 'wind',
+        value: false,
+        type: 'alert',
+    },
+];

package/dist/stories/homeAssistant/HomeMonitorPanel.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { HomeMonitorPanelI } from '../../interfaces';
+declare const _default: Meta<HomeMonitorPanelI>;
+export default _default;
+export declare const HomeMonitorPanelComponent: (args: HomeMonitorPanelI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/homeAssistant/HomeMonitorPanel.stories.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DrawerContent } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
+import { HomeMonitorPanel, RightPanel } from '../../components';
+import { alertFieldsMock, alertFieldsMock2, alertFieldsMock3 } from '../../mocks';
+export default {
+    title: 'Components/HomeAssistant',
+    component: HomeMonitorPanel,
+    args: {
+        onClose: action('onClose'),
+        alerts: [
+            {
+                category: 'safeguard',
+                id: 'alert-1',
+                form: alertFieldsMock,
+                callback: action('callback'),
+                onComplete: action('onComplete'),
+            },
+            {
+                category: 'safeguard',
+                id: 'alert-2',
+                form: alertFieldsMock2,
+                callback: action('callback'),
+                onComplete: action('onComplete'),
+            },
+            {
+                category: 'maintain',
+                id: 'alert-3',
+                form: alertFieldsMock3,
+                callback: action('callback'),
+                onComplete: action('onComplete'),
+            },
+        ],
+    },
+    decorators: [
+        (Story) => (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), children: _jsx(Story, {}) })),
+    ],
+};
+export const HomeMonitorPanelComponent = (args) => {
+    return (_jsx(DrawerContent, { bg: "lightBlue.1", overflowY: "auto", children: _jsx(HomeMonitorPanel, Object.assign({}, args)) }));
+};

package/package.json

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

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

@@ -414,10 +414,12 @@
     },
     "details": "Provide details about your home’s",
     "homeMonitor": "Homie",
+    "HomieMessages": "Homie Messages ({{ count }})",
     "homeMonitoring": "I’m learning about your home…",
     "homeMonitoringAlerts": "I have {{ count }} new messages for you.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
+      "completed": "Mark as Completed",
       "homeAction": "Home Action",
       "maintenance": "Maintenance Monitor",
       "protection": "Protection Monitor",

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

@@ -13,7 +13,7 @@ export const AlertTemplate = ({
         <Image src={icon} maxH="36px" w="auto" />
       </Center>
       <Stack>
-        <Text fontWeight="semibold" fontSize="xl" lineHeight="1.2">
+        <Text fontWeight="600" fontSize="xl" lineHeight="1.2">
           {title}
         </Text>
         <Text fontFamily="secondary" fontSize="sm" lineHeight="1.2">

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

@@ -3,7 +3,13 @@ import { BackendAlertI, TabI } from '@/interfaces'
 import { getCategoryStyles } from '@/utils/Alerts.utils'
 import { Divider } from '@chakra-ui/react'
 
-export const BackendAlert = ({ category, form, callback }: BackendAlertI) => {
+export const BackendAlert = ({
+  id,
+  category,
+  form,
+  callback,
+  onComplete,
+}: BackendAlertI) => {
   const { headerBg, alertIcon, alertIconBg, alertTitle } =
     getCategoryStyles(category)
   const alert = form?.find((item) => item.type === 'alert')
@@ -30,6 +36,9 @@ export const BackendAlert = ({ category, form, callback }: BackendAlertI) => {
       icon={alert?.icon ?? ''}
       title={alert?.label ?? ''}
       description={alert?.description ?? ''}
+      onComplete={onComplete}
+      showCollapse={hasChildren}
+      id={id}
     >
       <Divider />
       {hasChildren && !isSingleTab && <TabsHeader tabList={tabs} />}

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

@@ -12,6 +12,9 @@ export const BackendAlertCard = ({
   alertTitle = t('homeAssistant.monitorAlerts.protection'),
   children,
   icon = 'warning',
+  id,
+  onComplete,
+  showCollapse = true,
   ...props
 }: PropsWithChildren<BackendAlertCardI>) => {
   const { isOpen, onToggle } = useDisclosure()
@@ -23,7 +26,7 @@ export const BackendAlertCard = ({
       boxShadow="lg"
       borderRadius="lg"
       overflow="hidden"
-      maxW="420px"
+      minW="400px"
     >
       <AlertHeader bg={alertBg} />
       <AlertTitle alertIcon={alertIcon} alertTitle={alertTitle} />
@@ -31,18 +34,39 @@ export const BackendAlertCard = ({
       <Collapse in={isOpen} animateOpacity>
         <Box bg="lightBlue.1">{children}</Box>
       </Collapse>
-      <Flex py="base" bg="lightBlue.1" justify="flex-end">
-        <Button
-          variant="leftRounded"
-          w="fit-content"
-          px="8"
-          fontSize="sm"
-          fontWeight="medium"
-          onClick={onToggle}
-          bg={isOpen ? 'blue.8' : 'blue.2'}
-        >
-          {t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`)}
-        </Button>
+      <Flex
+        py="base"
+        bg="lightBlue.1"
+        justify={id ? 'space-between' : 'end'}
+        gap="4"
+      >
+        {id && (
+          <Button
+            variant="unstyled"
+            w="fit-content"
+            px="base"
+            fontSize="sm"
+            color="blue.3"
+            onClick={() => onComplete?.(id)}
+            transition="color 0.2s"
+            _hover={{ color: 'blue.8' }}
+          >
+            {t('homeAssistant.monitorAlerts.completed')}
+          </Button>
+        )}
+        {showCollapse && (
+          <Button
+            variant="leftRounded"
+            w="fit-content"
+            px="8"
+            fontSize="sm"
+            fontWeight="medium"
+            onClick={onToggle}
+            bg={isOpen ? 'blue.8' : 'blue.2'}
+          >
+            {t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`)}
+          </Button>
+        )}
       </Flex>
     </Box>
   )

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

@@ -0,0 +1,28 @@
+import { t } from 'i18next'
+import { DrawerBody, DrawerHeader, Stack } from '@chakra-ui/react'
+import { IA } from '@/assets/images'
+import { BackendAlert, PanelHeader } from '@/components'
+import { HomeMonitorPanelI } from '@/interfaces'
+
+export const HomeMonitorPanel = ({ onClose, alerts }: HomeMonitorPanelI) => {
+  return (
+    <>
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={onClose}
+          title={t('homeAssistant.HomieMessages', {
+            count: alerts?.length ?? 0,
+          })}
+          icon={IA}
+        />
+        <DrawerBody p="0">
+          <Stack spacing="base" p="base">
+            {alerts?.map((alert) => (
+              <BackendAlert key={alert.id} {...alert} />
+            ))}
+          </Stack>
+        </DrawerBody>
+      </DrawerHeader>
+    </>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/PurchaseProduct.tsx

@@ -53,7 +53,7 @@ export const PurchaseProduct = ({
               <Text fontSize="xs" fontFamily="secondary" color="red">
                 {comments}
               </Text>
-              <Text fontSize="sm" fontWeight="bold" lineHeight="1.2">
+              <Text fontSize="sm" fontWeight="600" lineHeight="1.2">
                 {value}
               </Text>
             </Stack>

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

@@ -7,5 +7,6 @@ export * from './BackendAlert'
 export * from './BackendAlertCard'
 export * from './WeatherWidget'
 export * from './HomefileMonitoring'
+export * from './HomeMonitorPanel'
 export * from './MonitorAlerts'
 export * from './Notifications'

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

@@ -59,6 +59,7 @@ import {
   AApest,
   FilterSize,
   Wallet,
+  Fire,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -95,6 +96,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   'solar-panel': SolarPanel,
   calendar2: Calendar2,
   drop: Drop,
+  fire: Fire,
   wind: Wind,
   foundation: Foundation,
   heater: Heater,

package/src/index.ts

@@ -78,6 +78,7 @@ export {
   HomefileMonitoring,
   HomeHeader,
   HomeMonitor,
+  HomeMonitorPanel,
   HomeMonitorSteps,
   HomeSharedWith,
   InboxForwardBanner,

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

@@ -12,6 +12,8 @@ export type AlertFieldType =
   | 'hire-service'
   | 'hire-service-cta'
 
-export interface BackendAlertI extends DynamicFormI {
+export interface BackendAlertI extends Pick<DynamicFormI, 'form' | 'callback'> {
+  id: string
   category: AlertCategory
+  onComplete?: (id?: string) => void
 }

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

@@ -4,6 +4,9 @@ export interface BackendAlertCardI {
   alertTitle?: string
   bg?: string
   icon: string
+  id?: string
   title: string
   description: string
+  onComplete?: (id?: string) => void
+  showCollapse?: boolean
 }

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

@@ -0,0 +1,6 @@
+import { BackendAlertI } from '@/interfaces'
+
+export interface HomeMonitorPanelI {
+  onClose: () => void
+  alerts: BackendAlertI[]
+}

package/src/interfaces/homeAssistant/index.ts

@@ -8,6 +8,7 @@ export * from './HomeAssistantPanel.interface'
 export * from './HomeAssistantStepper.interface'
 export * from './HomeAssistantSteps.interface'
 export * from './HomeAssistantTutorial.interface'
+export * from './HomeMonitorPanel.interface'
 export * from './HomeMonitorSteps.interface'
 export * from './MonitorAlerts.interface'
 export * from './WeatherWidget.interface'

package/src/mocks/forms/dynamicForm.mock.ts

@@ -857,11 +857,11 @@ export const unknownFormMock: Record<string, any> = {
 export const alertFieldsMock: ReportI[] = [
   {
     id: faker.database.mongodbObjectId(),
-    name: 'Filter',
-    label: 'Time to change your heating & cooling air filter.',
+    name: 'Batteries',
+    label: 'Check the batteries in your Smoke detectors.',
     description:
-      'Changing your air filter every 30 days ensures efficient system performance and improves indoor air quality by trapping dust and allergens.',
-    icon: 'wind',
+      'Regularly checking and replacing batteries ensures they function properly, especially during emergencies. Neglecting this simple task can lead to malfunctioning detectors, increasing the risk of undetected fires and potential harm to your family and property.',
+    icon: 'fire',
     value: false,
     type: 'alert',
     children: [
@@ -1122,3 +1122,29 @@ export const alertFieldsMock: ReportI[] = [
     ],
   },
 ]
+
+export const alertFieldsMock2: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Smoke Detectors',
+    label: 'Your smoke detectors could be expired.',
+    description:
+      'Smoke detectors are essential for home safety, alerting you to smoke and fire hazards. Regularly checking and replacing them ensures they function properly, providing peace of mind and protection for your family.',
+    icon: 'fire',
+    value: false,
+    type: 'alert',
+  },
+]
+
+export const alertFieldsMock3: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Air Filter',
+    label: 'Time to change your heating & cooling air filter.',
+    description:
+      'Changing your air filter is critical for maintaining your home’s HVAC system efficiency and ensuring good air quality. A clogged filter forces your system to work harder, leading to higher energy bills and potential damage to components. Neglecting this simple maintenance can result in costly repairs or even a full system replacement, which can run into thousands of dollars. Regularly replacing your air filter not only saves money but also extends the lifespan of your HVAC system, keeping your home comfortable and your expenses in check.',
+    icon: 'wind',
+    value: false,
+    type: 'alert',
+  },
+]

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

@@ -3,7 +3,6 @@ import {
   HomefileMonitoring,
   HomeMonitor,
   HomeMonitorSteps,
-  Notifications,
   WeatherWidget,
 } from '@/components'
 import { Box, Flex, Stack } from '@chakra-ui/react'

package/src/stories/homeAssistant/HomeMonitorPanel.stories.tsx

@@ -0,0 +1,52 @@
+import { Meta } from '@storybook/react'
+import { DrawerContent } from '@chakra-ui/react'
+import { action } from '@storybook/addon-actions'
+import { HomeMonitorPanel, RightPanel } from '@/components'
+import { HomeMonitorPanelI } from '@/interfaces'
+import { alertFieldsMock, alertFieldsMock2, alertFieldsMock3 } from '@/mocks'
+
+export default {
+  title: 'Components/HomeAssistant',
+  component: HomeMonitorPanel,
+  args: {
+    onClose: action('onClose'),
+    alerts: [
+      {
+        category: 'safeguard',
+        id: 'alert-1',
+        form: alertFieldsMock,
+        callback: action('callback'),
+        onComplete: action('onComplete'),
+      },
+      {
+        category: 'safeguard',
+        id: 'alert-2',
+        form: alertFieldsMock2,
+        callback: action('callback'),
+        onComplete: action('onComplete'),
+      },
+      {
+        category: 'maintain',
+        id: 'alert-3',
+        form: alertFieldsMock3,
+        callback: action('callback'),
+        onComplete: action('onComplete'),
+      },
+    ],
+  },
+  decorators: [
+    (Story: any) => (
+      <RightPanel isOpen={true} onClose={action('onClose')}>
+        <Story />
+      </RightPanel>
+    ),
+  ],
+} as Meta<HomeMonitorPanelI>
+
+export const HomeMonitorPanelComponent = (args: HomeMonitorPanelI) => {
+  return (
+    <DrawerContent bg="lightBlue.1" overflowY="auto">
+      <HomeMonitorPanel {...args} />
+    </DrawerContent>
+  )
+}