@homefile/components-v2 2.18.0 → 2.20.0

package/dist/assets/images/index.d.ts

@@ -53,6 +53,7 @@ import Exclamation from './exclamation.svg';
 import Face from './face.svg';
 import Feedback from './feedback.svg';
 import FileUploading from './file-uploading.svg';
+import FilterSize from './filter-size.png';
 import Finance from './finance.svg';
 import Fire from './fire.svg';
 import Flag from './flag.png';
@@ -161,7 +162,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/assets/images/index.js

@@ -53,6 +53,7 @@ import Exclamation from './exclamation.svg';
 import Face from './face.svg';
 import Feedback from './feedback.svg';
 import FileUploading from './file-uploading.svg';
+import FilterSize from './filter-size.png';
 import Finance from './finance.svg';
 import Fire from './fire.svg';
 import Flag from './flag.png';
@@ -161,7 +162,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/assets/images/index.ts

@@ -53,6 +53,7 @@ import Exclamation from './exclamation.svg'
 import Face from './face.svg'
 import Feedback from './feedback.svg'
 import FileUploading from './file-uploading.svg'
+import FilterSize from './filter-size.png'
 import Finance from './finance.svg'
 import Fire from './fire.svg'
 import Flag from './flag.png'
@@ -218,6 +219,7 @@ export {
   Face,
   Feedback,
   FileUploading,
+  FilterSize,
   Finance,
   Fire,
   Flag,

package/dist/components/badge/CustomBadge.d.ts

@@ -1,5 +1,4 @@
-export declare const CustomBadge: ({ bg, color, label, }: {
-    bg?: string | undefined;
-    color?: string | undefined;
-    label?: string | undefined;
+import { CenterProps } from '@chakra-ui/react';
+export declare const CustomBadge: ({ bg, color, label, ...props }: CenterProps & {
+    label?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/CustomBadge.js

@@ -1,5 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Center } from '@chakra-ui/react';
-export const CustomBadge = ({ bg = 'neutral.white', color = 'neutral.white', label = '', }) => {
-    return (_jsx(Center, { bg: bg, fontSize: "xxs", color: color, fontWeight: "bold", py: "1", px: "2", rounded: "md", textTransform: "uppercase", children: label }));
+export const CustomBadge = (_a) => {
+    var { bg = 'neutral.white', color = 'neutral.white', label = '' } = _a, props = __rest(_a, ["bg", "color", "label"]);
+    return (_jsx(Center, Object.assign({ bg: bg, fontSize: "xxs", color: color, fontWeight: "bold", py: "1", px: "2", rounded: "md", textTransform: "uppercase" }, props, { children: label })));
 };

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

@@ -1,2 +1,2 @@
 import { BackendAlertI } from '../../../interfaces';
-export declare const BackendAlert: ({ category, form }: BackendAlertI) => import("react/jsx-runtime").JSX.Element;
+export declare const BackendAlert: ({ category, form, callback }: 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 }) => {
+export const BackendAlert = ({ category, form, callback }) => {
     var _a, _b, _c, _d, _e;
     const { headerBg, alertIcon, alertIconBg, alertTitle } = getCategoryStyles(category);
     const alert = form === null || form === void 0 ? void 0 : form.find((item) => item.type === 'alert');
@@ -10,7 +10,7 @@ export const BackendAlert = ({ category, form }) => {
         var _a;
         return ({
             label: tab.name,
-            component: _jsx(AlertFields, { fields: (_a = tab.children) !== null && _a !== void 0 ? _a : [] }),
+            component: (_jsx(AlertFields, { fields: (_a = tab.children) !== null && _a !== void 0 ? _a : [], callback: callback })),
         });
     })) !== null && _b !== void 0 ? _b : [];
     return (_jsxs(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: (_c = alert === null || alert === void 0 ? void 0 : alert.icon) !== null && _c !== void 0 ? _c : '', title: (_d = alert === null || alert === void 0 ? void 0 : alert.label) !== null && _d !== void 0 ? _d : '', description: (_e = alert === null || alert === void 0 ? void 0 : alert.description) !== null && _e !== void 0 ? _e : '', children: [_jsx(Divider, {}), _jsx(TabsHeader, { tabList: tabs })] }));

package/dist/components/homeAssistant/monitorAlerts/alertDetails/AlertFields.d.ts

@@ -1,2 +1,2 @@
 import { FieldTypesI } from '../../../../interfaces';
-export declare const AlertFields: ({ fields }: FieldTypesI) => import("react/jsx-runtime").JSX.Element;
+export declare const AlertFields: ({ fields, callback }: FieldTypesI) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,23 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack, Text } from '@chakra-ui/react';
-import { VideoDetail } from './VideoDetail';
-export const AlertFields = ({ fields }) => {
+import { FilterSize, PurchaseProduct, SearchField, VideoDetail, } from '../../..';
+import { fieldIcons } from '../../../../helpers';
+export const AlertFields = ({ fields, callback }) => {
     return (_jsx(Stack, { spacing: "base", p: "base", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
-            const { id, type, value } = field;
+            const { id, type, value, icon } = field;
+            const mappedIcon = icon && fieldIcons[icon];
             switch (type) {
                 case 'text':
                     return (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", lineHeight: "1.2", whiteSpace: "pre-line", children: String(value) }, id));
                 case 'video':
                     return _createElement(VideoDetail, Object.assign({}, field, { key: id }));
+                case 'filter-size':
+                    return _createElement(FilterSize, Object.assign({}, field, { key: id, icon: mappedIcon }));
+                case 'search':
+                    return _createElement(SearchField, Object.assign({}, field, { key: id, callback: callback }));
+                case 'purchase-product':
+                    return _createElement(PurchaseProduct, Object.assign({}, field, { key: id, callback: callback }));
                 default:
                     return null;
             }

package/dist/components/homeAssistant/monitorAlerts/alertDetails/FilterSize.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from '../../../../interfaces';
+export declare const FilterSize: ({ name, icon, value }: ReportI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Image, Stack, Text } from '@chakra-ui/react';
+import { CustomDivider } from '../../..';
+export const FilterSize = ({ name, icon, value }) => {
+    return (_jsxs(Stack, { spacing: "base", children: [_jsx(CustomDivider, {}), _jsx(Text, { fontWeight: "semibold", children: name }), _jsxs(Flex, { gap: "base", children: [_jsx(Image, { boxSize: "86px", src: icon }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", lineHeight: "1.2", children: value })] }), _jsx(CustomDivider, {})] }));
+};

package/dist/components/homeAssistant/monitorAlerts/alertDetails/PurchaseProduct.d.ts

@@ -0,0 +1,2 @@
+import { FieldTypesI, ReportI } from '../../../../interfaces';
+export declare const PurchaseProduct: ({ name, label, icon, comments, value, callback, ...rest }: ReportI & Pick<FieldTypesI, "callback">) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CustomBadge, Plus } from '../../..';
+import { colors } from '../../../../theme/colors';
+import { AspectRatio, Container, Flex, IconButton, Image, Stack, Text, } from '@chakra-ui/react';
+export const PurchaseProduct = (_a) => {
+    var _b;
+    var { name, label, icon, comments, value, callback } = _a, rest = __rest(_a, ["name", "label", "icon", "comments", "value", "callback"]);
+    const bgs = {
+        best: '#232669',
+        better: '#424CBF',
+        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(AspectRatio, { ratio: 1, minW: "70px", h: "auto", children: _jsx(Image, { src: icon, alt: name, objectFit: "cover", w: "100%", h: "100%" }) }), _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: "center", 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)) })] })] })] })] }));
+};

package/dist/components/homeAssistant/monitorAlerts/alertDetails/SearchField.d.ts

@@ -0,0 +1,2 @@
+import { FieldTypesI, ReportI } from '../../../../interfaces';
+export declare const SearchField: ({ callback, description, ...props }: ReportI & Pick<FieldTypesI, "callback">) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Text } from '@chakra-ui/react';
+import { SearchInput } from '../../..';
+import { useState } from 'react';
+export const SearchField = (_a) => {
+    var { callback, description } = _a, props = __rest(_a, ["callback", "description"]);
+    const [search, setSearch] = useState('');
+    const handleSearch = (value) => {
+        callback === null || callback === void 0 ? void 0 : callback(Object.assign(Object.assign({}, props), { value }));
+    };
+    return (_jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "sm", fontFamily: "secondary", lineHeight: "1.2", children: description }), _jsx(SearchInput, { onChange: (e) => setSearch(e.target.value), value: search, maxW: "full", onBlur: () => handleSearch(search), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        handleSearch(search);
+                    }
+                } })] }));
+};

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AspectRatio, Box, Container, Flex, Text } from '@chakra-ui/react';
 export const VideoDetail = ({ name, label, link, description }) => {
-    return (_jsx(Container, { p: "base", children: _jsxs(Flex, { gap: "base", children: [_jsx(AspectRatio, { w: "140px", ratio: 16 / 9, children: _jsx("iframe", { title: name, src: link, allowFullScreen: true }) }), _jsxs(Box, { children: [_jsx(Text, { fontWeight: "semibold", children: name }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: `${label} | ${description}` })] })] }) }));
+    return (_jsx(Container, { p: "base", boxShadow: "md", children: _jsxs(Flex, { gap: "base", children: [_jsx(AspectRatio, { w: "140px", ratio: 16 / 9, children: _jsx("iframe", { title: name, src: link, allowFullScreen: true }) }), _jsxs(Box, { children: [_jsx(Text, { fontWeight: "semibold", children: name }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: `${label} | ${description}` })] })] }) }));
 };

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

@@ -1,6 +1,9 @@
 export * from './AlertFields';
 export * from './ChangeAirFilter';
 export * from './CustomDivider';
+export * from './FilterSize';
+export * from './PurchaseProduct';
+export * from './SearchField';
 export * from './SmokeDetectorBattery';
 export * from './SmokeDetectorExpired';
 export * from './VideoDetail';

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

@@ -1,6 +1,9 @@
 export * from './AlertFields';
 export * from './ChangeAirFilter';
 export * from './CustomDivider';
+export * from './FilterSize';
+export * from './PurchaseProduct';
+export * from './SearchField';
 export * from './SmokeDetectorBattery';
 export * from './SmokeDetectorExpired';
 export * from './VideoDetail';

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 } 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, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -58,5 +58,6 @@ export const fieldIcons = {
     'aa-disease': AADisease,
     'aa-weed': AAWeed,
     'aa-dressing': AADressing,
-    'aa-pest': AApest
+    'aa-pest': AApest,
+    'filter-size': FilterSize,
 };

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

@@ -3,7 +3,7 @@ export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreemen
 export type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-body-partner-image' | 'tile-body-description' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
 export type HomeItemTypes = 'appliances' | 'images' | 'guidelines' | 'item-related' | 'item-icon-btn';
 export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'book-opened' | 'calc' | 'calendar' | 'check' | 'co2' | 'contact' | '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' | 'pressure-washer' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;
-export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home' | 'sh-house' | 'aa-mowing' | 'aa-fertilization' | 'aa-disease' | 'aa-weed' | 'aa-dressing' | 'aa-pest';
+export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home' | 'sh-house' | 'aa-mowing' | 'aa-fertilization' | 'aa-disease' | 'aa-weed' | 'aa-dressing' | 'aa-pest' | 'filter-size' | string;
 export type ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;
 export interface ReportI {

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

@@ -1,7 +1,7 @@
 import { DynamicFormI } from '..';
 export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve';
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out';
-export type AlertFieldType = 'alert' | 'iconSection' | 'tabList' | 'list';
+export type AlertFieldType = 'alert' | 'search' | 'purchase-product';
 export interface BackendAlertI extends DynamicFormI {
     category: AlertCategory;
 }

package/dist/interfaces/inputs/SearchInput.interface.d.ts

@@ -1,5 +1,5 @@
-import { ChakraProps } from "@chakra-ui/react";
-export interface SearchInputI extends ChakraProps {
+import { InputProps } from '@chakra-ui/react';
+export interface SearchInputI extends InputProps {
     maxW?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;

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

@@ -852,7 +852,7 @@ export const alertFieldsMock = [
             {
                 id: faker.database.mongodbObjectId(),
                 name: 'Details',
-                label: 'Model or Serial',
+                label: '',
                 description: faker.lorem.sentence(),
                 comments: faker.lorem.sentence(),
                 value: '',
@@ -891,6 +891,95 @@ export const alertFieldsMock = [
                 value: faker.image.urlPicsumPhotos(),
                 type: 'filter-size',
                 visible: true,
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        label: '',
+                        description: '',
+                        comments: '',
+                        value: 'Home air filters are typically located in the HVAC system’s return air vent, furnace compartment, or air handler, usually near the blower unit or ductwork intake.',
+                        type: 'text',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Check the filter:',
+                        label: '',
+                        description: '',
+                        comments: '',
+                        icon: 'filter-size',
+                        value: 'The size of the filter is usually printed on the side of the filter in inches. The size may be written as length x width x depth. For example, a filter that is 16 in long, 20 in wide, and 1 in deep would be written as 16 x 20 x 1. ',
+                        type: 'filter-size',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        label: '',
+                        description: 'or enter your air conditioning/furnace model number below.',
+                        comments: '',
+                        value: '',
+                        type: 'search',
+                        visible: true,
+                    },
+                ],
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Purchase',
+                label: '',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: '',
+                type: 'purchase',
+                visible: true,
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Filtrete™ Allergen Defense Furnace AC Air Filter 1000 MPR',
+                        label: 'best',
+                        description: '',
+                        icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT50sebT9p-twQB-DdM2tlRo12In8F09QCsmg&s',
+                        comments: 'Save 20% off Retail',
+                        value: '$22.99',
+                        type: 'purchase-product',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Filtrete™ Smart Allergen Bacteria & Virus Furnace AC Air Filter MPR 1500',
+                        label: 'better',
+                        description: '',
+                        icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbFpjG3kybZDb6psqPIlQSoXgp9OjOR672kg&s',
+                        comments: 'Save 28% off Retail',
+                        value: '$16.99',
+                        type: 'purchase-product',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Filtrete™ 700 MPR Dust Pollen and Pet Dander Electrostatic Air Filter',
+                        label: 'good',
+                        description: '',
+                        icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7j1KYfPZqPnFmTgyx7b9pp78N6RForQfZFQ&s',
+                        comments: 'Save 24% off Retail',
+                        value: '$10.99',
+                        type: 'purchase-product',
+                        visible: true,
+                    },
+                ],
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Hire out',
+                label: '',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: faker.image.urlPicsumPhotos(),
+                type: 'hire-out',
+                visible: true,
+                children: [],
             },
         ],
     },

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
 import { BackendAlert } from '../../../components';
 import { alertFieldsMock } from '../../../mocks';
 export default {
@@ -7,6 +8,7 @@ export default {
     args: {
         category: 'budget',
         form: alertFieldsMock,
+        callback: action('onClick'),
     },
 };
 export const BackendAlertComponent = (args) => {

package/package.json

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

package/src/assets/images/index.ts

@@ -53,6 +53,7 @@ import Exclamation from './exclamation.svg'
 import Face from './face.svg'
 import Feedback from './feedback.svg'
 import FileUploading from './file-uploading.svg'
+import FilterSize from './filter-size.png'
 import Finance from './finance.svg'
 import Fire from './fire.svg'
 import Flag from './flag.png'
@@ -218,6 +219,7 @@ export {
   Face,
   Feedback,
   FileUploading,
+  FilterSize,
   Finance,
   Fire,
   Flag,

package/src/components/badge/CustomBadge.tsx

@@ -1,10 +1,11 @@
-import { Center } from '@chakra-ui/react'
+import { Center, CenterProps } from '@chakra-ui/react'
 
 export const CustomBadge = ({
   bg = 'neutral.white',
   color = 'neutral.white',
   label = '',
-}) => {
+  ...props
+}: CenterProps & { label?: string }) => {
   return (
     <Center
       bg={bg}
@@ -15,6 +16,7 @@ export const CustomBadge = ({
       px="2"
       rounded="md"
       textTransform="uppercase"
+      {...props}
     >
       {label}
     </Center>

package/src/components/forms/dynamicForm/fields/TextField.tsx

@@ -1,6 +1,6 @@
 import { Controller, useFormContext } from 'react-hook-form'
 import { Flex } from '@chakra-ui/react'
-import { FormIcon, TextInput } from '@/components'
+import { TextInput } from '@/components'
 import { TextFieldI } from '@/interfaces'
 
 export const TextField = ({

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

@@ -3,7 +3,7 @@ import { BackendAlertI, TabI } from '@/interfaces'
 import { getCategoryStyles } from '@/utils/Alerts.utils'
 import { Divider } from '@chakra-ui/react'
 
-export const BackendAlert = ({ category, form }: BackendAlertI) => {
+export const BackendAlert = ({ category, form, callback }: BackendAlertI) => {
   const { headerBg, alertIcon, alertIconBg, alertTitle } =
     getCategoryStyles(category)
   const alert = form?.find((item) => item.type === 'alert')
@@ -13,7 +13,9 @@ export const BackendAlert = ({ category, form }: BackendAlertI) => {
       (tab) =>
         ({
           label: tab.name,
-          component: <AlertFields fields={tab.children ?? []} />,
+          component: (
+            <AlertFields fields={tab.children ?? []} callback={callback} />
+          ),
         } as TabI)
     ) ?? []
 

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

@@ -1,12 +1,19 @@
-import { FieldTypesI } from '@/interfaces'
+import { FieldTypesI, IconTypes } from '@/interfaces'
 import { Box, Stack, Text } from '@chakra-ui/react'
-import { VideoDetail } from './VideoDetail'
+import {
+  FilterSize,
+  PurchaseProduct,
+  SearchField,
+  VideoDetail,
+} from '@/components'
+import { fieldIcons } from '@/helpers'
 
-export const AlertFields = ({ fields }: FieldTypesI) => {
+export const AlertFields = ({ fields, callback }: FieldTypesI) => {
   return (
     <Stack spacing="base" p="base">
       {fields?.map((field) => {
-        const { id, type, value } = field
+        const { id, type, value, icon } = field
+        const mappedIcon = icon && (fieldIcons[icon] as IconTypes)
         switch (type) {
           case 'text':
             return (
@@ -22,6 +29,12 @@ export const AlertFields = ({ fields }: FieldTypesI) => {
             )
           case 'video':
             return <VideoDetail {...field} key={id} />
+          case 'filter-size':
+            return <FilterSize {...field} key={id} icon={mappedIcon} />
+          case 'search':
+            return <SearchField {...field} key={id} callback={callback} />
+          case 'purchase-product':
+            return <PurchaseProduct {...field} key={id} callback={callback} />
           default:
             return null
         }

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

@@ -0,0 +1,19 @@
+import { Flex, Image, Stack, Text } from '@chakra-ui/react'
+import { CustomDivider } from '@/components'
+import { ReportI } from '@/interfaces'
+
+export const FilterSize = ({ name, icon, value }: ReportI) => {
+  return (
+    <Stack spacing="base">
+      <CustomDivider />
+      <Text fontWeight="semibold">{name}</Text>
+      <Flex gap="base">
+        <Image boxSize="86px" src={icon} />
+        <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+          {value}
+        </Text>
+      </Flex>
+      <CustomDivider />
+    </Stack>
+  )
+}

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

@@ -0,0 +1,78 @@
+import { CustomBadge, Plus } from '@/components'
+import { FieldTypesI, ReportI } from '@/interfaces'
+import { colors } from '@/theme/colors'
+import {
+  AspectRatio,
+  Container,
+  Flex,
+  IconButton,
+  Image,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+
+export const PurchaseProduct = ({
+  name,
+  label,
+  icon,
+  comments,
+  value,
+  callback,
+  ...rest
+}: ReportI & Pick<FieldTypesI, 'callback'>) => {
+  const bgs = {
+    best: '#232669',
+    better: '#424CBF',
+    good: '#5C81C7',
+  }
+  const bg = bgs[(label?.toLowerCase() as keyof typeof bgs) ?? 'best']
+  return (
+    <Container p="base" position="relative" boxShadow="md">
+      <CustomBadge
+        label={label}
+        bg={bg}
+        position="absolute"
+        top="2"
+        left="-1"
+        zIndex="3"
+      />
+      <Flex gap="base" ml="6">
+        <AspectRatio ratio={1} minW="70px" h="auto">
+          <Image src={icon} alt={name} objectFit="cover" w="100%" h="100%" />
+        </AspectRatio>
+
+        <Stack spacing="0">
+          <Text
+            fontWeight="semibold"
+            fontSize="sm"
+            noOfLines={2}
+            overflow="hidden"
+            textOverflow="ellipsis"
+          >
+            {name}
+          </Text>
+          <Flex alignSelf="end" gap="base" align="center">
+            <Stack spacing="0" align="end">
+              <Text fontSize="xs" fontFamily="secondary" color="red">
+                {comments}
+              </Text>
+              <Text fontSize="sm" fontWeight="bold" lineHeight="1.2">
+                {value}
+              </Text>
+            </Stack>
+            <IconButton
+              w="2rem"
+              h="2rem"
+              aria-label="Add product"
+              variant="iconOutlined"
+              icon={<Plus size={20} stroke={colors.blue['3']} />}
+              onClick={() =>
+                callback?.({ name, icon, value: String(value), ...rest })
+              }
+            />
+          </Flex>
+        </Stack>
+      </Flex>
+    </Container>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { SearchInput } from '@/components'
+import { FieldTypesI, ReportI } from '@/interfaces'
+import { useState } from 'react'
+
+export const SearchField = ({
+  callback,
+  description,
+  ...props
+}: ReportI & Pick<FieldTypesI, 'callback'>) => {
+  const [search, setSearch] = useState('')
+  const handleSearch = (value: string) => {
+    callback?.({
+      ...props,
+      value,
+    })
+  }
+  return (
+    <Stack spacing="base">
+      <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+        {description}
+      </Text>
+      <SearchInput
+        onChange={(e) => setSearch(e.target.value)}
+        value={search}
+        maxW="full"
+        onBlur={() => handleSearch(search)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            handleSearch(search)
+          }
+        }}
+      />
+    </Stack>
+  )
+}

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

@@ -3,7 +3,7 @@ import { AspectRatio, Box, Container, Flex, Text } from '@chakra-ui/react'
 
 export const VideoDetail = ({ name, label, link, description }: ReportI) => {
   return (
-    <Container p="base">
+    <Container p="base" boxShadow="md">
       <Flex gap="base">
         <AspectRatio w="140px" ratio={16 / 9}>
           <iframe title={name} src={link} allowFullScreen />

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

@@ -1,6 +1,9 @@
 export * from './AlertFields'
 export * from './ChangeAirFilter'
 export * from './CustomDivider'
+export * from './FilterSize'
+export * from './PurchaseProduct'
+export * from './SearchField'
 export * from './SmokeDetectorBattery'
 export * from './SmokeDetectorExpired'
 export * from './VideoDetail'

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

@@ -56,7 +56,8 @@ import {
   AALawn,
   AAMowing,
   AAWeed,
-  AApest
+  AApest,
+  FilterSize,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -119,5 +120,6 @@ export const fieldIcons: Record<IconTypes, string> = {
   'aa-disease': AADisease,
   'aa-weed': AAWeed,
   'aa-dressing': AADressing,
-  'aa-pest': AApest
+  'aa-pest': AApest,
+  'filter-size': FilterSize,
 }

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

@@ -122,6 +122,8 @@ export type UIIconTypes =
   | 'aa-weed'
   | 'aa-dressing'
   | 'aa-pest'
+  | 'filter-size'
+  | string
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null

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

@@ -4,7 +4,7 @@ export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve'
 
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out'
 
-export type AlertFieldType = 'alert' | 'iconSection' | 'tabList' | 'list'
+export type AlertFieldType = 'alert' | 'search' | 'purchase-product'
 
 export interface BackendAlertI extends DynamicFormI {
   category: AlertCategory

package/src/interfaces/inputs/SearchInput.interface.ts

@@ -1,9 +1,9 @@
-import { ChakraProps } from "@chakra-ui/react"
+import { InputProps } from '@chakra-ui/react'
 
-export interface SearchInputI extends ChakraProps {
+export interface SearchInputI extends InputProps {
   maxW?: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
   placeholder?: string
   size?: string
   value: string
-}
+}

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

@@ -868,7 +868,7 @@ export const alertFieldsMock: ReportI[] = [
       {
         id: faker.database.mongodbObjectId(),
         name: 'Details',
-        label: 'Model or Serial',
+        label: '',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: '',
@@ -908,6 +908,98 @@ export const alertFieldsMock: ReportI[] = [
         value: faker.image.urlPicsumPhotos(),
         type: 'filter-size',
         visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            label: '',
+            description: '',
+            comments: '',
+            value:
+              'Home air filters are typically located in the HVAC system’s return air vent, furnace compartment, or air handler, usually near the blower unit or ductwork intake.',
+            type: 'text',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Check the filter:',
+            label: '',
+            description: '',
+            comments: '',
+            icon: 'filter-size',
+            value:
+              'The size of the filter is usually printed on the side of the filter in inches. The size may be written as length x width x depth. For example, a filter that is 16 in long, 20 in wide, and 1 in deep would be written as 16 x 20 x 1. ',
+            type: 'filter-size',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            label: '',
+            description:
+              'or enter your air conditioning/furnace model number below.',
+            comments: '',
+            value: '',
+            type: 'search',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Purchase',
+        label: '',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'purchase',
+        visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Filtrete™ Allergen Defense Furnace AC Air Filter 1000 MPR',
+            label: 'best',
+            description: '',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT50sebT9p-twQB-DdM2tlRo12In8F09QCsmg&s',
+            comments: 'Save 20% off Retail',
+            value: '$22.99',
+            type: 'purchase-product',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Filtrete™ Smart Allergen Bacteria & Virus Furnace AC Air Filter MPR 1500',
+            label: 'better',
+            description: '',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbFpjG3kybZDb6psqPIlQSoXgp9OjOR672kg&s',
+            comments: 'Save 28% off Retail',
+            value: '$16.99',
+            type: 'purchase-product',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Filtrete™ 700 MPR Dust Pollen and Pet Dander Electrostatic Air Filter',
+            label: 'good',
+            description: '',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7j1KYfPZqPnFmTgyx7b9pp78N6RForQfZFQ&s',
+            comments: 'Save 24% off Retail',
+            value: '$10.99',
+            type: 'purchase-product',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Hire out',
+        label: '',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.image.urlPicsumPhotos(),
+        type: 'hire-out',
+        visible: true,
+        children: [],
       },
     ],
   },

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

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 import { BackendAlert } from '@/components'
 import { BackendAlertI } from '@/interfaces'
 import { alertFieldsMock } from '@/mocks'
@@ -9,6 +10,7 @@ export default {
   args: {
     category: 'budget',
     form: alertFieldsMock,
+    callback: action('onClick'),
   },
 } as Meta<BackendAlertI>