@homefile/components-v2 2.17.3 → 2.18.0

package/dist/components/forms/dynamicForm/fields/uiFields/TileBody.tsx

@@ -2,7 +2,6 @@ import { Box, Stack } from '@chakra-ui/react'
 import { TileBodyI } from '@/interfaces'
 import {
   PartnerFooter,
-  SingleFields,
   TileBodyFields,
   TileFooterFields,
   TileHeaderFields,

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

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

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

@@ -1,7 +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';
-export const BackendAlert = ({ category, icon, id, title, tabs, summary, }) => {
+import { Divider } from '@chakra-ui/react';
+export const BackendAlert = ({ category, form }) => {
+    var _a, _b, _c, _d, _e;
     const { headerBg, alertIcon, alertIconBg, alertTitle } = getCategoryStyles(category);
-    return (_jsx(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: icon, title: title, description: summary, 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.d.ts

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

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

@@ -14,8 +14,9 @@ import { t } from 'i18next';
 import { Box, Button, Collapse, Flex, useDisclosure } from '@chakra-ui/react';
 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 } = _a, props = __rest(_a, ["alertBg", "alertIcon", "alertTitle", "children"]);
+    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)), _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 }: FieldTypesI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+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 }) => {
+    return (_jsx(Stack, { spacing: "base", p: "base", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
+            const { id, type, value } = field;
+            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 }));
+                default:
+                    return null;
+            }
+        }) }));
+};

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,6 @@
+export * from './AlertFields';
 export * from './ChangeAirFilter';
 export * from './CustomDivider';
 export * from './SmokeDetectorBattery';
 export * from './SmokeDetectorExpired';
+export * from './VideoDetail';

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

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

package/dist/helpers/homeAssistant/HomeAssistant.helper.js

@@ -1,4 +1,4 @@
-import { Fire, House, LargeAppliances, Target, Temperature, Water, } from '../../assets/images';
+import { Fire, GearTime, House, LargeAppliances, Target, Temperature, Water, } from '../../assets/images';
 export const homeAssistantSteps = [
     {
         title: 'Goals',
@@ -30,24 +30,24 @@ export const CATEGORY_CONFIG = {
         label: 'Protection Monitor',
         color: '#DB1DA1',
         accent: '#FDDDF8',
-        icon: Fire,
+        icon: GearTime,
     },
     maintain: {
         label: 'Maintenance Monitor',
         color: '#8CC421',
         accent: '#B9DEF2',
-        icon: LargeAppliances,
+        icon: GearTime,
     },
     budget: {
         label: 'Budget Monitor',
         color: '#1D8BDB',
         accent: '#B9DEF2',
-        icon: Target,
+        icon: GearTime,
     },
     improve: {
         label: 'Improvement Monitor',
         color: '#8516A7',
         accent: '#B9DEF2',
-        icon: House,
+        icon: GearTime,
     },
 };

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

@@ -1,5 +1,5 @@
-import { AIGridFieldI, 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;
+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;

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,15 +1,7 @@
+import { DynamicFormI } from '..';
 export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve';
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out';
-export interface AlertTab<T = unknown> {
-    key: AlertTabType;
-    label: string;
-    data: T;
-}
-export interface BackendAlertI {
-    id: string;
+export type AlertFieldType = 'alert' | 'iconSection' | 'tabList' | 'list';
+export interface BackendAlertI extends DynamicFormI {
     category: AlertCategory;
-    icon: string;
-    title: string;
-    summary: string;
-    tabs?: AlertTab[];
 }

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

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

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

@@ -839,3 +839,59 @@ export const unknownFormMock = {
     updatedAt: '2025-04-17T19:26:39.435Z',
     __v: 0,
 };
+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',
+        value: false,
+        type: 'alert',
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Details',
+                label: 'Model or Serial',
+                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,
+            },
+        ],
+    },
+];

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BackendAlert } from '../../../components';
+import { alertFieldsMock } from '../../../mocks';
+export default {
+    title: 'Components/HomeAssistant/MonitorAlerts',
+    component: BackendAlert,
+    args: {
+        category: 'budget',
+        form: alertFieldsMock,
+    },
+};
+export const BackendAlertComponent = (args) => {
+    return _jsx(BackendAlert, Object.assign({}, args));
+};

package/package.json

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

package/src/components/forms/dynamicForm/fields/uiFields/TileBody.tsx

@@ -2,7 +2,6 @@ import { Box, Stack } from '@chakra-ui/react'
 import { TileBodyI } from '@/interfaces'
 import {
   PartnerFooter,
-  SingleFields,
   TileBodyFields,
   TileFooterFields,
   TileHeaderFields,

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

@@ -1,28 +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,
-  icon,
-  id,
-  title,
-  tabs,
-  summary,
-}: BackendAlertI) => {
+export const BackendAlert = ({ category, form }: BackendAlertI) => {
   const { headerBg, alertIcon, alertIconBg, alertTitle } =
     getCategoryStyles(category)
+  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={icon}
-      title={title}
-      description={summary}
+      icon={alert?.icon ?? ''}
+      title={alert?.label ?? ''}
+      description={alert?.description ?? ''}
     >
-      content
+      <Divider />
+      <TabsHeader tabList={tabs} />
     </BackendAlertCard>
   )
 }

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

@@ -2,14 +2,16 @@ import { PropsWithChildren } from 'react'
 import { t } from 'i18next'
 import { Box, Button, Collapse, Flex, useDisclosure } from '@chakra-ui/react'
 import { AlertHeader, AlertTemplate, AlertTitle } from '@/components'
-import { BackendAlertCardI } from '@/interfaces'
+import { BackendAlertCardI, IconTypes } from '@/interfaces'
 import { Warranty } from '@/assets/images'
+import { fieldIcons } from '@/helpers'
 
 export const BackendAlertCard = ({
   alertBg = 'error.2',
   alertIcon = Warranty,
   alertTitle = t('homeAssistant.monitorAlerts.protection'),
   children,
+  icon = 'warning',
   ...props
 }: PropsWithChildren<BackendAlertCardI>) => {
   const { isOpen, onToggle } = useDisclosure()
@@ -25,11 +27,9 @@ export const BackendAlertCard = ({
     >
       <AlertHeader bg={alertBg} />
       <AlertTitle alertIcon={alertIcon} alertTitle={alertTitle} />
-      <AlertTemplate {...props} />
+      <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,31 @@
+import { FieldTypesI } from '@/interfaces'
+import { Box, Stack, Text } from '@chakra-ui/react'
+import { VideoDetail } from './VideoDetail'
+
+export const AlertFields = ({ fields }: FieldTypesI) => {
+  return (
+    <Stack spacing="base" p="base">
+      {fields?.map((field) => {
+        const { id, type, value } = field
+        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} />
+          default:
+            return null
+        }
+      })}
+    </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,6 @@
+export * from './AlertFields'
 export * from './ChangeAirFilter'
 export * from './CustomDivider'
 export * from './SmokeDetectorBattery'
 export * from './SmokeDetectorExpired'
+export * from './VideoDetail'

package/src/helpers/homeAssistant/HomeAssistant.helper.tsx

@@ -1,5 +1,6 @@
 import {
   Fire,
+  GearTime,
   House,
   LargeAppliances,
   Target,
@@ -48,24 +49,24 @@ export const CATEGORY_CONFIG: Record<AlertCategory, CategoryConfigI> = {
     label: 'Protection Monitor',
     color: '#DB1DA1',
     accent: '#FDDDF8',
-    icon: Fire,
+    icon: GearTime,
   },
   maintain: {
     label: 'Maintenance Monitor',
     color: '#8CC421',
     accent: '#B9DEF2',
-    icon: LargeAppliances,
+    icon: GearTime,
   },
   budget: {
     label: 'Budget Monitor',
     color: '#1D8BDB',
     accent: '#B9DEF2',
-    icon: Target,
+    icon: GearTime,
   },
   improve: {
     label: 'Improvement Monitor',
     color: '#8516A7',
     accent: '#B9DEF2',
-    icon: House,
+    icon: GearTime,
   },
 }

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

@@ -1,5 +1,7 @@
 import {
   AIGridFieldI,
+  AlertFieldType,
+  AlertTabType,
   FolderFileI,
   MenuItemI,
   PartnerFooterI,
@@ -30,8 +32,11 @@ export type KindTypes =
   | 'text'
   | 'textarea'
   | 'default'
+  | 'video'
   | UIKindTypes
   | HomeItemTypes
+  | AlertTabType
+  | AlertFieldType
 
 export type UIKindTypes =
   | 'tile-body'

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

@@ -1,18 +1,11 @@
+import { DynamicFormI } from '@/interfaces'
+
 export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve'
 
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out'
 
-export interface AlertTab<T = unknown> {
-  key: AlertTabType
-  label: string
-  data: T
-}
+export type AlertFieldType = 'alert' | 'iconSection' | 'tabList' | 'list'
 
-export interface BackendAlertI {
-  id: string
+export interface BackendAlertI extends DynamicFormI {
   category: AlertCategory
-  icon: string
-  title: string
-  summary: string
-  tabs?: AlertTab[]
 }

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

@@ -853,3 +853,62 @@ export const unknownFormMock: Record<string, any> = {
   updatedAt: '2025-04-17T19:26:39.435Z',
   __v: 0,
 }
+
+export const alertFieldsMock: ReportI[] = [
+  {
+    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',
+    value: false,
+    type: 'alert',
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Details',
+        label: 'Model or Serial',
+        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,
+      },
+    ],
+  },
+]

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

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/react'
+import { BackendAlert } from '@/components'
+import { BackendAlertI } from '@/interfaces'
+import { alertFieldsMock } from '@/mocks'
+
+export default {
+  title: 'Components/HomeAssistant/MonitorAlerts',
+  component: BackendAlert,
+  args: {
+    category: 'budget',
+    form: alertFieldsMock,
+  },
+} as Meta<BackendAlertI>
+
+export const BackendAlertComponent = (args: BackendAlertI) => {
+  return <BackendAlert {...args} />
+}