@homefile/components-v2 2.17.4 → 2.19.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/homeAssistant/monitorAlerts/BackendAlert.js

@@ -1,9 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BackendAlertCard } from '../..';
+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 }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const { headerBg, alertIcon, alertIconBg, alertTitle } = getCategoryStyles(category);
-    const alertHeader = form === null || form === void 0 ? void 0 : form.find((item) => item.type === 'alertHeader');
-    return (_jsx(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: (_a = alertHeader === null || alertHeader === void 0 ? void 0 : alertHeader.icon) !== null && _a !== void 0 ? _a : '', title: (_b = alertHeader === null || alertHeader === void 0 ? void 0 : alertHeader.label) !== null && _b !== void 0 ? _b : '', description: (_c = alertHeader === null || alertHeader === void 0 ? void 0 : alertHeader.description) !== null && _c !== void 0 ? _c : '', children: "content" }));
+    const alert = form === null || form === void 0 ? void 0 : form.find((item) => item.type === 'alert');
+    const tabs = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.children) === null || _a === void 0 ? void 0 : _a.map((tab) => {
+        var _a;
+        return ({
+            label: tab.name,
+            component: _jsx(AlertFields, { fields: (_a = tab.children) !== null && _a !== void 0 ? _a : [] }),
+        });
+    })) !== 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/BackendAlertCard.js

@@ -18,5 +18,5 @@ 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"]);
     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, { p: "base", 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", 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'}`) }) })] }));
 };

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

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

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

@@ -0,0 +1,23 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack, Text } from '@chakra-ui/react';
+import { FilterSize, 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, 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 }));
+                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/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.d.ts

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

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

@@ -0,0 +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}` })] })] }) }));
+};

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

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

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

@@ -1,4 +1,8 @@
+export * from './AlertFields';
 export * from './ChangeAirFilter';
 export * from './CustomDivider';
+export * from './FilterSize';
+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

@@ -1,9 +1,9 @@
-import { AIGridFieldI, AlertFieldType, FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
-export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | UIKindTypes | HomeItemTypes | AlertFieldType;
+import { AIGridFieldI, AlertFieldType, AlertTabType, FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
+export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | 'video' | UIKindTypes | HomeItemTypes | AlertTabType | AlertFieldType;
 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';
 export type ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;
 export interface ReportI {

package/dist/interfaces/headers/TabsHeader.interface.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-interface Tab {
+export interface TabI {
     label: string;
     component: ReactNode | null;
 }
@@ -7,8 +7,7 @@ export interface TabsHeaderI {
     defaultIndex?: number;
     onChange?: (index: number) => void;
     rightButton?: ReactNode;
-    rightTabList?: Tab[];
+    rightTabList?: TabI[];
     tabIndex?: number;
-    tabList: Tab[];
+    tabList: TabI[];
 }
-export {};

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 = 'alertHeader' | 'text' | 'iconSection' | 'tabList' | 'list';
+export type AlertFieldType = 'alert' | 'search';
 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

@@ -847,6 +847,84 @@ export const alertFieldsMock = [
         description: 'Changing your air filter every 30 days ensures efficient system performance and improves indoor air quality by trapping dust and allergens.',
         icon: 'wind',
         value: false,
-        type: 'alertHeader',
+        type: 'alert',
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Details',
+                label: '',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: '',
+                type: 'details',
+                visible: true,
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        label: '',
+                        description: '',
+                        comments: '',
+                        value: '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. \n\nNeglecting 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.',
+                        type: 'text',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Where to find and change the Air Filter',
+                        label: 'Dec 5, 2024',
+                        description: '1:39',
+                        comments: '',
+                        value: '',
+                        link: 'https://www.youtube.com/embed/qCNIc1y18pA?si=oC1NmAjuh0JZTYcr',
+                        type: 'video',
+                        visible: true,
+                    },
+                ],
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Filter Size',
+                label: 'Upload Image',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                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,
+                    },
+                ],
+            },
+        ],
     },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.17.4",
+  "version": "2.19.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/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

@@ -1,22 +1,34 @@
-import { BackendAlertCard } from '@/components'
-import { BackendAlertI } from '@/interfaces'
+import { AlertFields, BackendAlertCard, TabsHeader } from '@/components'
+import { BackendAlertI, TabI } from '@/interfaces'
 import { getCategoryStyles } from '@/utils/Alerts.utils'
+import { Divider } from '@chakra-ui/react'
 
 export const BackendAlert = ({ category, form }: BackendAlertI) => {
   const { headerBg, alertIcon, alertIconBg, alertTitle } =
     getCategoryStyles(category)
-  const alertHeader = form?.find((item) => item.type === 'alertHeader')
+  const alert = form?.find((item) => item.type === 'alert')
+
+  const tabs =
+    alert?.children?.map(
+      (tab) =>
+        ({
+          label: tab.name,
+          component: <AlertFields fields={tab.children ?? []} />,
+        } as TabI)
+    ) ?? []
+
   return (
     <BackendAlertCard
       alertBg={headerBg}
       alertIcon={alertIcon}
       alertTitle={alertTitle}
       bg={alertIconBg}
-      icon={alertHeader?.icon ?? ''}
-      title={alertHeader?.label ?? ''}
-      description={alertHeader?.description ?? ''}
+      icon={alert?.icon ?? ''}
+      title={alert?.label ?? ''}
+      description={alert?.description ?? ''}
     >
-      content
+      <Divider />
+      <TabsHeader tabList={tabs} />
     </BackendAlertCard>
   )
 }

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

@@ -29,9 +29,7 @@ export const BackendAlertCard = ({
       <AlertTitle alertIcon={alertIcon} alertTitle={alertTitle} />
       <AlertTemplate {...props} icon={fieldIcons[icon as IconTypes]} />
       <Collapse in={isOpen} animateOpacity>
-        <Box p="base" bg="lightBlue.1">
-          {children}
-        </Box>
+        <Box bg="lightBlue.1">{children}</Box>
       </Collapse>
       <Flex py="base" bg="lightBlue.1" justify="flex-end">
         <Button

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

@@ -0,0 +1,37 @@
+import { FieldTypesI, IconTypes } from '@/interfaces'
+import { Box, Stack, Text } from '@chakra-ui/react'
+import { FilterSize, SearchField, VideoDetail } from '@/components'
+import { fieldIcons } from '@/helpers'
+
+export const AlertFields = ({ fields, callback }: FieldTypesI) => {
+  return (
+    <Stack spacing="base" p="base">
+      {fields?.map((field) => {
+        const { id, type, value, icon } = field
+        const mappedIcon = icon && (fieldIcons[icon] as IconTypes)
+        switch (type) {
+          case 'text':
+            return (
+              <Text
+                key={id}
+                fontSize="sm"
+                fontFamily="secondary"
+                lineHeight="1.2"
+                whiteSpace="pre-line"
+              >
+                {String(value)}
+              </Text>
+            )
+          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} />
+          default:
+            return null
+        }
+      })}
+    </Stack>
+  )
+}

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/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

@@ -0,0 +1,20 @@
+import { ReportI } from '@/interfaces'
+import { AspectRatio, Box, Container, Flex, Text } from '@chakra-ui/react'
+
+export const VideoDetail = ({ name, label, link, description }: ReportI) => {
+  return (
+    <Container p="base">
+      <Flex gap="base">
+        <AspectRatio w="140px" ratio={16 / 9}>
+          <iframe title={name} src={link} allowFullScreen />
+        </AspectRatio>
+        <Box>
+          <Text fontWeight="semibold">{name}</Text>
+          <Text fontSize="sm" fontFamily="secondary">
+            {`${label} | ${description}`}
+          </Text>
+        </Box>
+      </Flex>
+    </Container>
+  )
+}

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

@@ -1,4 +1,8 @@
+export * from './AlertFields'
 export * from './ChangeAirFilter'
 export * from './CustomDivider'
+export * from './FilterSize'
+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

@@ -1,6 +1,7 @@
 import {
   AIGridFieldI,
   AlertFieldType,
+  AlertTabType,
   FolderFileI,
   MenuItemI,
   PartnerFooterI,
@@ -31,8 +32,10 @@ export type KindTypes =
   | 'text'
   | 'textarea'
   | 'default'
+  | 'video'
   | UIKindTypes
   | HomeItemTypes
+  | AlertTabType
   | AlertFieldType
 
 export type UIKindTypes =
@@ -119,6 +122,7 @@ export type UIIconTypes =
   | 'aa-weed'
   | 'aa-dressing'
   | 'aa-pest'
+  | 'filter-size'
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null

package/src/interfaces/headers/TabsHeader.interface.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-interface Tab {
+export interface TabI {
   label: string
   component: ReactNode | null
 }
@@ -8,7 +8,7 @@ export interface TabsHeaderI {
   defaultIndex?: number
   onChange?: (index: number) => void
   rightButton?: ReactNode
-  rightTabList?: Tab[]
+  rightTabList?: TabI[]
   tabIndex?: number
-  tabList: Tab[]
+  tabList: TabI[]
 }

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

@@ -4,12 +4,7 @@ export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve'
 
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out'
 
-export type AlertFieldType =
-  | 'alertHeader'
-  | 'text'
-  | 'iconSection'
-  | 'tabList'
-  | 'list'
+export type AlertFieldType = 'alert' | 'search'
 
 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

@@ -863,6 +863,88 @@ export const alertFieldsMock: ReportI[] = [
       'Changing your air filter every 30 days ensures efficient system performance and improves indoor air quality by trapping dust and allergens.',
     icon: 'wind',
     value: false,
-    type: 'alertHeader',
+    type: 'alert',
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Details',
+        label: '',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'details',
+        visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            label: '',
+            description: '',
+            comments: '',
+            value:
+              '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. \n\nNeglecting 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.',
+            type: 'text',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Where to find and change the Air Filter',
+            label: 'Dec 5, 2024',
+            description: '1:39',
+            comments: '',
+            value: '',
+            link: 'https://www.youtube.com/embed/qCNIc1y18pA?si=oC1NmAjuh0JZTYcr',
+            type: 'video',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Filter Size',
+        label: 'Upload Image',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        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,
+          },
+        ],
+      },
+    ],
   },
 ]