@homefile/components-v2 2.17.1 → 2.17.3

package/dist/components/homeAssistant/HomeMonitorButton.d.ts

@@ -1,2 +1,2 @@
 import { HomeMonitorButtonI } from '../../interfaces';
-export declare const HomeMonitorButton: ({ currentStep, onStepClick, status, step, }: HomeMonitorButtonI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorButton: ({ alertCount, currentStep, onStepClick, status, step, }: HomeMonitorButtonI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitorButton.js

@@ -1,26 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react';
 import { getIconAltText } from '../../utils';
-export const HomeMonitorButton = ({ currentStep, onStepClick, status = 'ok', step, }) => {
+import { keyframes } from '@emotion/react';
+export const HomeMonitorButton = ({ alertCount = 0, currentStep, onStepClick, status = 'ok', step, }) => {
     const buttonId = `homeMonitorButton-${currentStep}`;
     const iconAltText = getIconAltText(step.icon);
-    return (_jsx(Box, { position: "relative", id: buttonId, zIndex: "2", children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", boxShadow: "lg", zIndex: "2", children: [_jsx(Box, { bg: status === 'alert' ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, Object.assign({ position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", align: "center", h: "96px", w: "100%", p: "base" }, setStyles(status), { onClick: () => onStepClick(currentStep), children: [_jsx(Center, { h: "60%", marginTop: "2", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }) }));
+    const alert = status === 'alert';
+    const ok = status === 'ok';
+    return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, zIndex: "2", boxShadow: "lg" }, setStyles(status), { children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", zIndex: "2", children: [_jsx(Box, { bg: alert ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, { position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", align: "center", h: "96px", w: "100%", p: "base", onClick: () => onStepClick(currentStep), filter: ok ? 'grayscale(1) opacity(0.6)' : '', children: [_jsxs(Center, { h: "60%", marginTop: "2", children: [!alert && (_jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" })), alert && (_jsx(Center, { boxSize: "32px", bg: "error.2", borderRadius: "full", color: "neutral.white", lineHeight: "1", fontWeight: "bold", children: alertCount }))] }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] })] }) })));
 };
+const alertGradient = keyframes `
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+`;
 const setStyles = (status) => {
     switch (status) {
         case 'alert':
             return {
+                background: 'white',
                 cursor: 'pointer',
-                border: '1px solid',
-                borderColor: 'error.2',
                 transition: 'all 0.3s',
+                borderRadius: 'lg',
+                border: 'none',
+                _before: {
+                    content: '""',
+                    position: 'absolute',
+                    inset: '-2px',
+                    borderRadius: 'inherit',
+                    background: 'linear-gradient(270deg,rgb(123, 6, 105),rgb(233, 175, 236), #F544DA)',
+                    backgroundSize: '400% 400%',
+                    animation: `${alertGradient} 2s linear infinite`,
+                    animationDirection: 'alternate',
+                    zIndex: -1,
+                    pointerEvents: 'none',
+                },
                 _hover: {
                     bg: 'lightGreen.7',
                 },
             };
         case 'ok':
             return {
-                filter: 'grayscale(1) opacity(0.6)',
+                bg: 'neutral.white',
+                borderRadius: 'lg',
             };
     }
 };

package/dist/components/homeAssistant/HomeMonitorSteps.d.ts

@@ -1,2 +1,2 @@
 import { HomeMonitortStepsI } from '../../interfaces';
-export declare const HomeMonitorSteps: ({ menuItems, onStepClick, stepsWithAlerts, }: HomeMonitortStepsI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorSteps: ({ alerts, menuItems, onStepClick, stepsWithAlerts, }: HomeMonitortStepsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -4,13 +4,17 @@ import { Box, Flex } from '@chakra-ui/react';
 import { HomeMonitorButton, IconMenu, MoreHorizontal } from '..';
 import { homeAssistantSteps } from '../../helpers';
 import { homeAssistantProxy } from '../../proxies';
-export const HomeMonitorSteps = ({ menuItems = [], onStepClick, stepsWithAlerts, }) => {
+export const HomeMonitorSteps = ({ alerts = [], menuItems = [], onStepClick, stepsWithAlerts = [], }) => {
     const { setSelectedId } = homeAssistantProxy;
     const isDisabled = menuItems.length === 0;
     const handleStepClick = (step) => onStepClick(step);
-    return (_jsx(Flex, { gap: "base", justify: "center", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { children: [_jsx(HomeMonitorButton, { currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, stepsWithAlerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title))) }));
+    return (_jsx(Flex, { gap: "base", justify: "center", children: homeAssistantSteps.map((step, index) => {
+            var _a;
+            return (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { children: [_jsx(HomeMonitorButton, { alertCount: (_a = alerts.find((alert) => alert.step === index + 1)) === null || _a === void 0 ? void 0 : _a.count, currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, stepsWithAlerts, alerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title));
+        }) }));
 };
-const getStatus = (index, stepsWithAlerts) => {
-    const hasAlert = stepsWithAlerts.includes(index);
+const getStatus = (index, stepsWithAlerts, alerts) => {
+    const hasAlert = (stepsWithAlerts === null || stepsWithAlerts === void 0 ? void 0 : stepsWithAlerts.includes(index)) ||
+        (alerts === null || alerts === void 0 ? void 0 : alerts.some((alert) => alert.step === index));
     return hasAlert ? 'alert' : 'ok';
 };

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, icon, id, title, tabs, summary, }: BackendAlertI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BackendAlertCard } from '../..';
+import { getCategoryStyles } from '../../../utils/Alerts.utils';
+export const BackendAlert = ({ category, icon, id, title, tabs, summary, }) => {
+    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" }));
+};

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, ...props }: PropsWithChildren<BackendAlertCardI>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+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';
+export const BackendAlertCard = (_a) => {
+    var { alertBg = 'error.2', alertIcon = Warranty, alertTitle = t('homeAssistant.monitorAlerts.protection'), children } = _a, props = __rest(_a, ["alertBg", "alertIcon", "alertTitle", "children"]);
+    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'}`) }) })] }));
+};

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

@@ -25,3 +25,29 @@ export const homeAssistantSteps = [
         icon: Water,
     },
 ];
+export const CATEGORY_CONFIG = {
+    safeguard: {
+        label: 'Protection Monitor',
+        color: '#DB1DA1',
+        accent: '#FDDDF8',
+        icon: Fire,
+    },
+    maintain: {
+        label: 'Maintenance Monitor',
+        color: '#8CC421',
+        accent: '#B9DEF2',
+        icon: LargeAppliances,
+    },
+    budget: {
+        label: 'Budget Monitor',
+        color: '#1D8BDB',
+        accent: '#B9DEF2',
+        icon: Target,
+    },
+    improve: {
+        label: 'Improvement Monitor',
+        color: '#8516A7',
+        accent: '#B9DEF2',
+        icon: House,
+    },
+};

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

@@ -0,0 +1,15 @@
+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;
+    category: AlertCategory;
+    icon: string;
+    title: string;
+    summary: string;
+    tabs?: AlertTab[];
+}

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

@@ -1,12 +1,19 @@
 import { HomeAssistantStepI, MenuItemI } from '..';
+interface AlertI {
+    step: number;
+    count: number;
+}
 export interface HomeMonitortStepsI {
+    alerts?: AlertI[];
     menuItems: MenuItemI[];
-    stepsWithAlerts: number[];
+    stepsWithAlerts?: number[];
     onStepClick: (step: number) => void;
 }
 export interface HomeMonitorButtonI {
+    alertCount?: number;
     currentStep: number;
     onStepClick: HomeMonitortStepsI['onStepClick'];
     status: 'alert' | 'ok';
     step: HomeAssistantStepI;
 }
+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/stories/homeAssistant/HomeMonitorSteps.stories.d.ts

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

package/dist/stories/homeAssistant/HomeMonitorSteps.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HomeMonitorSteps } from '../../components';
+import { Box } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
+import { menuMock } from '../../mocks';
+export default {
+    title: 'Components/HomeAssistant',
+    component: HomeMonitorSteps,
+    args: {
+        alerts: [
+            { step: 2, count: 3 },
+            { step: 1, count: 2 },
+            { step: 6, count: 2 },
+        ],
+        menuItems: menuMock,
+        onStepClick: action('onStepClick'),
+    },
+    decorators: [
+        (Story) => (_jsx(Box, { p: "base", w: ['full', '800px'], h: "fit-content", children: _jsx(Story, {}) })),
+    ],
+};
+export const HomeMonitorStepsComponent = (args) => {
+    return _jsx(HomeMonitorSteps, 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.1",
+  "version": "2.17.3",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -1,8 +1,10 @@
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react'
 import { HomeMonitorButtonI } from '@/interfaces'
 import { getIconAltText } from '@/utils'
+import { keyframes } from '@emotion/react'
 
 export const HomeMonitorButton = ({
+  alertCount = 0,
   currentStep,
   onStepClick,
   status = 'ok',
@@ -10,18 +12,20 @@ export const HomeMonitorButton = ({
 }: HomeMonitorButtonI) => {
   const buttonId = `homeMonitorButton-${currentStep}`
   const iconAltText = getIconAltText(step.icon)
+  const alert = status === 'alert'
+  const ok = status === 'ok'
 
   return (
-    <Box position="relative" id={buttonId} zIndex="2">
-      <Box
-        position="relative"
-        bg="neutral.white"
-        borderRadius="lg"
-        boxShadow="lg"
-        zIndex="2"
-      >
+    <Box
+      position="relative"
+      id={buttonId}
+      zIndex="2"
+      boxShadow="lg"
+      {...setStyles(status)}
+    >
+      <Box position="relative" bg="neutral.white" borderRadius="lg" zIndex="2">
         <Box
-          bg={status === 'alert' ? 'error.2' : 'green.1'}
+          bg={alert ? 'error.2' : 'green.1'}
           boxSize="10px"
           borderRadius="full"
           position="absolute"
@@ -40,11 +44,25 @@ export const HomeMonitorButton = ({
           h="96px"
           w="100%"
           p="base"
-          {...setStyles(status)}
           onClick={() => onStepClick(currentStep)}
+          filter={ok ? 'grayscale(1) opacity(0.6)' : ''}
         >
           <Center h="60%" marginTop="2">
-            <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
+            {!alert && (
+              <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
+            )}
+            {alert && (
+              <Center
+                boxSize="32px"
+                bg="error.2"
+                borderRadius="full"
+                color="neutral.white"
+                lineHeight="1"
+                fontWeight="bold"
+              >
+                {alertCount}
+              </Center>
+            )}
           </Center>
           <Center h="40%">
             <Text
@@ -62,21 +80,45 @@ export const HomeMonitorButton = ({
   )
 }
 
+const alertGradient = keyframes`
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+`
+
 const setStyles = (status: HomeMonitorButtonI['status']) => {
   switch (status) {
     case 'alert':
       return {
+        background: 'white',
         cursor: 'pointer',
-        border: '1px solid',
-        borderColor: 'error.2',
         transition: 'all 0.3s',
+        borderRadius: 'lg',
+        border: 'none',
+        _before: {
+          content: '""',
+          position: 'absolute',
+          inset: '-2px',
+          borderRadius: 'inherit',
+          background:
+            'linear-gradient(270deg,rgb(123, 6, 105),rgb(233, 175, 236), #F544DA)',
+          backgroundSize: '400% 400%',
+          animation: `${alertGradient} 2s linear infinite`,
+          animationDirection: 'alternate',
+          zIndex: -1,
+          pointerEvents: 'none',
+        },
         _hover: {
           bg: 'lightGreen.7',
         },
       }
     case 'ok':
       return {
-        filter: 'grayscale(1) opacity(0.6)',
+        bg: 'neutral.white',
+        borderRadius: 'lg',
       }
   }
 }

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -6,9 +6,10 @@ import { homeAssistantSteps } from '@/helpers'
 import { homeAssistantProxy } from '@/proxies'
 
 export const HomeMonitorSteps = ({
+  alerts = [],
   menuItems = [],
   onStepClick,
-  stepsWithAlerts,
+  stepsWithAlerts = [],
 }: HomeMonitortStepsI) => {
   const { setSelectedId } = homeAssistantProxy
 
@@ -21,9 +22,12 @@ export const HomeMonitorSteps = ({
         <Box key={step?.title} position="relative" flex="1">
           <Fragment>
             <HomeMonitorButton
+              alertCount={
+                alerts.find((alert) => alert.step === index + 1)?.count
+              }
               currentStep={index + 1}
               onStepClick={handleStepClick}
-              status={getStatus(index + 1, stepsWithAlerts)}
+              status={getStatus(index + 1, stepsWithAlerts, alerts)}
               step={step}
             />
             <Box position="absolute" top="-2px" right="4px" zIndex="1400">
@@ -43,7 +47,13 @@ export const HomeMonitorSteps = ({
   )
 }
 
-const getStatus = (index: number, stepsWithAlerts: number[]) => {
-  const hasAlert = stepsWithAlerts.includes(index)
+const getStatus = (
+  index: number,
+  stepsWithAlerts: number[],
+  alerts: HomeMonitortStepsI['alerts']
+) => {
+  const hasAlert =
+    stepsWithAlerts?.includes(index) ||
+    alerts?.some((alert) => alert.step === index)
   return hasAlert ? 'alert' : 'ok'
 }

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,28 @@
+import { BackendAlertCard } from '@/components'
+import { BackendAlertI } from '@/interfaces'
+import { getCategoryStyles } from '@/utils/Alerts.utils'
+
+export const BackendAlert = ({
+  category,
+  icon,
+  id,
+  title,
+  tabs,
+  summary,
+}: BackendAlertI) => {
+  const { headerBg, alertIcon, alertIconBg, alertTitle } =
+    getCategoryStyles(category)
+  return (
+    <BackendAlertCard
+      alertBg={headerBg}
+      alertIcon={alertIcon}
+      alertTitle={alertTitle}
+      bg={alertIconBg}
+      icon={icon}
+      title={title}
+      description={summary}
+    >
+      content
+    </BackendAlertCard>
+  )
+}

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

@@ -0,0 +1,49 @@
+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 { Warranty } from '@/assets/images'
+
+export const BackendAlertCard = ({
+  alertBg = 'error.2',
+  alertIcon = Warranty,
+  alertTitle = t('homeAssistant.monitorAlerts.protection'),
+  children,
+  ...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} />
+      <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

@@ -7,6 +7,7 @@ import {
   Water,
 } from '@/assets/images'
 import { HomeAssistantStepI } from '@/interfaces'
+import { AlertCategory } from '@/interfaces/homeAssistant/BackendAlert.interface'
 
 export const homeAssistantSteps: Array<HomeAssistantStepI> = [
   {
@@ -34,3 +35,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: Fire,
+  },
+  maintain: {
+    label: 'Maintenance Monitor',
+    color: '#8CC421',
+    accent: '#B9DEF2',
+    icon: LargeAppliances,
+  },
+  budget: {
+    label: 'Budget Monitor',
+    color: '#1D8BDB',
+    accent: '#B9DEF2',
+    icon: Target,
+  },
+  improve: {
+    label: 'Improvement Monitor',
+    color: '#8516A7',
+    accent: '#B9DEF2',
+    icon: House,
+  },
+}

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

@@ -0,0 +1,18 @@
+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
+  category: AlertCategory
+  icon: string
+  title: string
+  summary: string
+  tabs?: AlertTab[]
+}

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/HomeMonitorSteps.interface.ts

@@ -1,12 +1,19 @@
 import { HomeAssistantStepI, MenuItemI } from '@/interfaces'
 
+interface AlertI {
+  step: number
+  count: number
+}
+
 export interface HomeMonitortStepsI {
+  alerts?: AlertI[]
   menuItems: MenuItemI[]
-  stepsWithAlerts: number[]
+  stepsWithAlerts?: number[]
   onStepClick: (step: number) => void
 }
 
 export interface HomeMonitorButtonI {
+  alertCount?: number
   currentStep: number
   onStepClick: HomeMonitortStepsI['onStepClick']
   status: 'alert' | 'ok'

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/stories/homeAssistant/HomeMonitorSteps.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/react'
+import { HomeMonitorSteps } from '@/components'
+import { Box } from '@chakra-ui/react'
+import { action } from '@storybook/addon-actions'
+import { menuMock } from '@/mocks'
+import { HomeMonitortStepsI } from '@/interfaces'
+
+export default {
+  title: 'Components/HomeAssistant',
+  component: HomeMonitorSteps,
+  args: {
+    alerts: [
+      { step: 2, count: 3 },
+      { step: 1, count: 2 },
+      { step: 6, count: 2 },
+    ],
+    menuItems: menuMock,
+    onStepClick: action('onStepClick'),
+  },
+  decorators: [
+    (Story: any) => (
+      <Box p="base" w={['full', '800px']} h="fit-content">
+        <Story />
+      </Box>
+    ),
+  ],
+} as Meta<HomeMonitortStepsI>
+
+export const HomeMonitorStepsComponent = (args: HomeMonitortStepsI) => {
+  return <HomeMonitorSteps {...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,
+  }
+}