@homefile/components-v2 2.17.2 → 2.17.4

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/AlertHeader.d.ts

@@ -1 +1,3 @@
-export declare const AlertHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const AlertHeader: ({ bg }: {
+    bg?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Flex, Center, Image, Text } from '@chakra-ui/react';
+import { Flex, Center, Image, Text, Box } from '@chakra-ui/react';
 import { Exclamation } from '../../../assets/images';
-export const AlertHeader = () => {
-    return (_jsx(Flex, { justifyContent: "space-between", px: "base", py: "1", bg: "error.2", borderTopRadius: "lg", align: "center", children: _jsxs(Flex, { align: "center", gap: "2", children: [_jsx(Center, { p: "1", borderRadius: "full", bg: "pink.1", h: "18px", w: "18px", children: _jsx(Image, { src: Exclamation, h: "100%", w: "auto" }) }), _jsx(Text, { color: "white", fontSize: "sm", fontWeight: "medium", textTransform: "uppercase", children: t('homeAssistant.monitorAlerts.homeAction') })] }) }));
+export const AlertHeader = ({ bg = 'error.2' }) => {
+    return (_jsx(Flex, { justifyContent: "space-between", px: "base", py: "1", bg: bg, borderTopRadius: "lg", align: "center", children: _jsxs(Flex, { align: "center", gap: "2", children: [_jsxs(Center, { p: "1", position: "relative", h: "18px", w: "18px", children: [_jsx(Box, { borderRadius: "full", bg: "neutral.white", opacity: 0.3, h: "full", w: "full", position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }), _jsx(Image, { src: Exclamation, h: "100%", w: "auto" })] }), _jsx(Text, { color: "white", fontSize: "sm", fontWeight: "medium", textTransform: "uppercase", children: t('homeAssistant.monitorAlerts.homeAction') })] }) }));
 };

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BackendAlertCard } from '../..';
+import { getCategoryStyles } from '../../../utils/Alerts.utils';
+export const BackendAlert = ({ category, form }) => {
+    var _a, _b, _c;
+    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" }));
+};

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

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

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

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

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

@@ -3,6 +3,8 @@ export * from './AlertHeader';
 export * from './AlertTemplate';
 export * from './AlertTitle';
 export * from './BaseAlertCard';
+export * from './BackendAlert';
+export * from './BackendAlertCard';
 export * from './WeatherWidget';
 export * from './HomefileMonitoring';
 export * from './MonitorAlerts';

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

@@ -3,6 +3,8 @@ export * from './AlertHeader';
 export * from './AlertTemplate';
 export * from './AlertTitle';
 export * from './BaseAlertCard';
+export * from './BackendAlert';
+export * from './BackendAlertCard';
 export * from './WeatherWidget';
 export * from './HomefileMonitoring';
 export * from './MonitorAlerts';

package/dist/helpers/homeAssistant/HomeAssistant.helper.d.ts

@@ -1,2 +1,11 @@
 import { HomeAssistantStepI } from '../../interfaces';
+import { AlertCategory } from '../../interfaces/homeAssistant/BackendAlert.interface';
 export declare const homeAssistantSteps: Array<HomeAssistantStepI>;
+interface CategoryConfigI {
+    label: string;
+    icon: string;
+    color: string;
+    accent: string;
+}
+export declare const CATEGORY_CONFIG: Record<AlertCategory, CategoryConfigI>;
+export {};

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',
@@ -25,3 +25,29 @@ export const homeAssistantSteps = [
         icon: Water,
     },
 ];
+export const CATEGORY_CONFIG = {
+    safeguard: {
+        label: 'Protection Monitor',
+        color: '#DB1DA1',
+        accent: '#FDDDF8',
+        icon: GearTime,
+    },
+    maintain: {
+        label: 'Maintenance Monitor',
+        color: '#8CC421',
+        accent: '#B9DEF2',
+        icon: GearTime,
+    },
+    budget: {
+        label: 'Budget Monitor',
+        color: '#1D8BDB',
+        accent: '#B9DEF2',
+        icon: GearTime,
+    },
+    improve: {
+        label: 'Improvement Monitor',
+        color: '#8516A7',
+        accent: '#B9DEF2',
+        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, 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;
 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/homeAssistant/BackendAlert.interface.d.ts

@@ -0,0 +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 interface BackendAlertI extends DynamicFormI {
+    category: AlertCategory;
+}

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

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

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

@@ -0,0 +1,9 @@
+export interface BackendAlertCardI {
+    alertBg?: string;
+    alertIcon?: string;
+    alertTitle?: string;
+    bg?: string;
+    icon: string;
+    title: string;
+    description: string;
+}

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

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

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

@@ -1,6 +1,8 @@
 export * from './ApplianceButton.interface';
 export * from './ApplianceSteps.interface';
+export * from './BackendAlert.interface';
 export * from './BaseAlertCard.interface';
+export * from './BackendAlertCard.interface';
 export * from './HomeAssistantButton.interface';
 export * from './HomeAssistantPanel.interface';
 export * from './HomeAssistantStepper.interface';

package/dist/interfaces/homeAssistant/index.js

@@ -1,6 +1,8 @@
 export * from './ApplianceButton.interface';
 export * from './ApplianceSteps.interface';
+export * from './BackendAlert.interface';
 export * from './BaseAlertCard.interface';
+export * from './BackendAlertCard.interface';
 export * from './HomeAssistantButton.interface';
 export * from './HomeAssistantPanel.interface';
 export * from './HomeAssistantStepper.interface';

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,14 @@ 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: 'alertHeader',
+    },
+];

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/dist/stories/homeAssistant/monitorAlerts/MonitorAlerts.stories.d.ts

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MonitorAlerts } from '../../../components';
+export default {
+    title: 'Components/HomeAssistant/MonitorAlerts',
+    component: MonitorAlerts,
+    args: {
+        alertId: 'change-air-filter',
+    },
+};
+export const MonitorAlertsComponent = (args) => {
+    return _jsx(MonitorAlerts, Object.assign({}, args));
+};

package/dist/utils/Alerts.utils.d.ts

@@ -0,0 +1,7 @@
+import { AlertCategory } from '../interfaces';
+export declare function getCategoryStyles(cat: AlertCategory): {
+    headerBg: string;
+    alertTitle: string;
+    alertIcon: string;
+    alertIconBg: string;
+};

package/dist/utils/Alerts.utils.js

@@ -0,0 +1,10 @@
+import { CATEGORY_CONFIG } from '../helpers';
+export function getCategoryStyles(cat) {
+    const cfg = CATEGORY_CONFIG[cat];
+    return {
+        headerBg: cfg.color,
+        alertTitle: cfg.label,
+        alertIcon: cfg.icon,
+        alertIconBg: cfg.accent,
+    };
+}

package/package.json

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

@@ -1,19 +1,30 @@
 import { t } from 'i18next'
-import { Flex, Center, Image, Text } from '@chakra-ui/react'
+import { Flex, Center, Image, Text, Box } from '@chakra-ui/react'
 import { Exclamation } from '@/assets/images'
 
-export const AlertHeader = () => {
+export const AlertHeader = ({ bg = 'error.2' }) => {
   return (
     <Flex
       justifyContent="space-between"
       px="base"
       py="1"
-      bg="error.2"
+      bg={bg}
       borderTopRadius="lg"
       align="center"
     >
       <Flex align="center" gap="2">
-        <Center p="1" borderRadius="full" bg="pink.1" h="18px" w="18px">
+        <Center p="1" position="relative" h="18px" w="18px">
+          <Box
+            borderRadius="full"
+            bg="neutral.white"
+            opacity={0.3}
+            h="full"
+            w="full"
+            position="absolute"
+            top="50%"
+            left="50%"
+            transform="translate(-50%, -50%)"
+          />
           <Image src={Exclamation} h="100%" w="auto" />
         </Center>
         <Text

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

@@ -0,0 +1,22 @@
+import { BackendAlertCard } from '@/components'
+import { BackendAlertI } from '@/interfaces'
+import { getCategoryStyles } from '@/utils/Alerts.utils'
+
+export const BackendAlert = ({ category, form }: BackendAlertI) => {
+  const { headerBg, alertIcon, alertIconBg, alertTitle } =
+    getCategoryStyles(category)
+  const alertHeader = form?.find((item) => item.type === 'alertHeader')
+  return (
+    <BackendAlertCard
+      alertBg={headerBg}
+      alertIcon={alertIcon}
+      alertTitle={alertTitle}
+      bg={alertIconBg}
+      icon={alertHeader?.icon ?? ''}
+      title={alertHeader?.label ?? ''}
+      description={alertHeader?.description ?? ''}
+    >
+      content
+    </BackendAlertCard>
+  )
+}

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

@@ -0,0 +1,51 @@
+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, 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()
+  return (
+    <Box
+      display="flex"
+      flexDir="column"
+      bg="neutral.white"
+      boxShadow="lg"
+      borderRadius="lg"
+      overflow="hidden"
+      maxW="420px"
+    >
+      <AlertHeader bg={alertBg} />
+      <AlertTitle alertIcon={alertIcon} alertTitle={alertTitle} />
+      <AlertTemplate {...props} icon={fieldIcons[icon as IconTypes]} />
+      <Collapse in={isOpen} animateOpacity>
+        <Box p="base" bg="lightBlue.1">
+          {children}
+        </Box>
+      </Collapse>
+      <Flex py="base" bg="lightBlue.1" justify="flex-end">
+        <Button
+          variant="leftRounded"
+          w="fit-content"
+          px="8"
+          fontSize="sm"
+          fontWeight="medium"
+          onClick={onToggle}
+          bg={isOpen ? 'blue.8' : 'blue.2'}
+        >
+          {t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`)}
+        </Button>
+      </Flex>
+    </Box>
+  )
+}

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

@@ -3,6 +3,8 @@ export * from './AlertHeader'
 export * from './AlertTemplate'
 export * from './AlertTitle'
 export * from './BaseAlertCard'
+export * from './BackendAlert'
+export * from './BackendAlertCard'
 export * from './WeatherWidget'
 export * from './HomefileMonitoring'
 export * from './MonitorAlerts'

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

@@ -1,5 +1,6 @@
 import {
   Fire,
+  GearTime,
   House,
   LargeAppliances,
   Target,
@@ -7,6 +8,7 @@ import {
   Water,
 } from '@/assets/images'
 import { HomeAssistantStepI } from '@/interfaces'
+import { AlertCategory } from '@/interfaces/homeAssistant/BackendAlert.interface'
 
 export const homeAssistantSteps: Array<HomeAssistantStepI> = [
   {
@@ -34,3 +36,37 @@ export const homeAssistantSteps: Array<HomeAssistantStepI> = [
     icon: Water,
   },
 ]
+
+interface CategoryConfigI {
+  label: string
+  icon: string
+  color: string
+  accent: string
+}
+
+export const CATEGORY_CONFIG: Record<AlertCategory, CategoryConfigI> = {
+  safeguard: {
+    label: 'Protection Monitor',
+    color: '#DB1DA1',
+    accent: '#FDDDF8',
+    icon: GearTime,
+  },
+  maintain: {
+    label: 'Maintenance Monitor',
+    color: '#8CC421',
+    accent: '#B9DEF2',
+    icon: GearTime,
+  },
+  budget: {
+    label: 'Budget Monitor',
+    color: '#1D8BDB',
+    accent: '#B9DEF2',
+    icon: GearTime,
+  },
+  improve: {
+    label: 'Improvement Monitor',
+    color: '#8516A7',
+    accent: '#B9DEF2',
+    icon: GearTime,
+  },
+}

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

@@ -1,5 +1,6 @@
 import {
   AIGridFieldI,
+  AlertFieldType,
   FolderFileI,
   MenuItemI,
   PartnerFooterI,
@@ -32,6 +33,7 @@ export type KindTypes =
   | 'default'
   | UIKindTypes
   | HomeItemTypes
+  | AlertFieldType
 
 export type UIKindTypes =
   | 'tile-body'

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

@@ -0,0 +1,16 @@
+import { DynamicFormI } from '@/interfaces'
+
+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 interface BackendAlertI extends DynamicFormI {
+  category: AlertCategory
+}

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

@@ -0,0 +1,9 @@
+export interface BackendAlertCardI {
+  alertBg?: string
+  alertIcon?: string
+  alertTitle?: string
+  bg?: string
+  icon: string
+  title: string
+  description: string
+}

package/src/interfaces/homeAssistant/index.ts

@@ -1,6 +1,8 @@
 export * from './ApplianceButton.interface'
 export * from './ApplianceSteps.interface'
+export * from './BackendAlert.interface'
 export * from './BaseAlertCard.interface'
+export * from './BackendAlertCard.interface'
 export * from './HomeAssistantButton.interface'
 export * from './HomeAssistantPanel.interface'
 export * from './HomeAssistantStepper.interface'

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

@@ -853,3 +853,16 @@ 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: 'alertHeader',
+  },
+]

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

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

@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/react'
+import { MonitorAlerts } from '@/components'
+import { MonitorAlertsI } from '@/interfaces'
+
+export default {
+  title: 'Components/HomeAssistant/MonitorAlerts',
+  component: MonitorAlerts,
+  args: {
+    alertId: 'change-air-filter',
+  },
+} as Meta<MonitorAlertsI>
+
+export const MonitorAlertsComponent = (args: MonitorAlertsI) => {
+  return <MonitorAlerts {...args} />
+}

package/src/utils/Alerts.utils.ts

@@ -0,0 +1,12 @@
+import { CATEGORY_CONFIG } from '@/helpers'
+import { AlertCategory } from '@/interfaces'
+
+export function getCategoryStyles(cat: AlertCategory) {
+  const cfg = CATEGORY_CONFIG[cat]
+  return {
+    headerBg: cfg.color,
+    alertTitle: cfg.label,
+    alertIcon: cfg.icon,
+    alertIconBg: cfg.accent,
+  }
+}