@homefile/components-v2 2.23.6 → 2.23.8

package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { ItemFormPanelI } from '../../../../interfaces';
-export declare const ItemFormPanel: ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay, onClearForm, onDuplicate }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemFormPanel: ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay, onClearForm, onDuplicate, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { DrawerBody, DrawerHeader, DrawerFooter, Box, } from '@chakra-ui/react';
-import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, Loading } from '../../..';
-export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay = false, onClearForm, onDuplicate }) => {
+import { DrawerBody, DrawerHeader, DrawerFooter, Box } from '@chakra-ui/react';
+import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, Loading, } from '../../..';
+export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay = false, onClearForm, onDuplicate, }) => {
     const { firstChild, otherChildren } = useMemo(() => {
         let firstChild = null;
         let otherChildren = children;
@@ -15,5 +15,5 @@ export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, pane
         }
         return { firstChild, otherChildren };
     }, [children]);
-    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: firstChild ? (_jsxs(_Fragment, { children: [firstChild, _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] })) : (_jsx(Loading, {})) }), _jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onClearForm: onClearForm, onDuplicate: onDuplicate, onSave: onSubmitForm, onCancel: onClose }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: firstChild ? (_jsxs(_Fragment, { children: [firstChild, _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] })) : (_jsx(Loading, {})) }), onSubmitForm && (_jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onClearForm: onClearForm, onDuplicate: onDuplicate, onSave: onSubmitForm, onCancel: onClose }) }) }))] }));
 };

package/dist/components/householdItems/ItemNameHeader.d.ts

@@ -1,2 +1,2 @@
 import { ItemNameHeaderI } from '../../interfaces';
-export declare const ItemNameHeader: ({ id, value, onSave, onValueChange, padding, required, }: ItemNameHeaderI) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemNameHeader: ({ id, value, onSave, onValueChange, padding, required, showSaveButton, }: ItemNameHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/householdItems/ItemNameHeader.js

@@ -4,7 +4,7 @@ import { Box, Flex, Button } from '@chakra-ui/react';
 import { TextInput } from '..';
 import { isEmptyField } from '../../utils';
 import { useState, useEffect } from 'react';
-export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, padding = 'base', required = true, }) => {
+export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, padding = 'base', required = true, showSaveButton = true, }) => {
     const [name, setName] = useState(value);
     useEffect(() => {
         setName(value);
@@ -13,5 +13,5 @@ export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, pad
         setName(e.target.value);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
     };
-    return (_jsx(Box, { bg: "lightBlue.2", p: padding, w: "100%", children: _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(TextInput, { errorMessage: `${t('householdItems.headers.itemName')} ${t('forms.required')}`, hasError: required && isEmptyField(name), id: id, handleChange: handleChange, placeholder: t('householdItems.headers.placeholder'), value: name }), name && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: () => onSave(name), children: t('createDocument.buttons.save') }))] }) }));
+    return (_jsx(Box, { bg: "lightBlue.2", p: padding, w: "100%", children: _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(TextInput, { errorMessage: `${t('householdItems.headers.itemName')} ${t('forms.required')}`, hasError: required && isEmptyField(name), id: id, handleChange: handleChange, placeholder: t('householdItems.headers.placeholder'), value: name }), name && showSaveButton && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: () => onSave(name), children: t('createDocument.buttons.save') }))] }) }));
 };

package/dist/hooks/receipts/useDisplayReceipts.d.ts

@@ -14,7 +14,7 @@ export declare const useDisplayReceipts: ({ receipts }: UseDisplayReceiptsI) =>
         itemQuantity: number;
         name?: string;
         paymentMethod: string;
-        purchaseDate: Date;
+        purchaseDate?: Date;
         receiptImage?: string;
         receiptOrigin?: import("../../interfaces").ReceiptOrigintProps;
         store: string;

package/dist/interfaces/forms/ItemFormPanel/ItemFormPanel.interface.d.ts

@@ -1,6 +1,6 @@
 export interface ItemFormPanelI {
     onClose: () => void;
-    onSubmitForm: () => void;
+    onSubmitForm?: () => void;
     panelIcon: string;
     panelTitle: string;
     showOverlay?: boolean;

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

@@ -5,4 +5,5 @@ export interface ItemNameHeaderI {
     onSave: (name: string) => void;
     padding?: string;
     required?: boolean;
+    showSaveButton?: boolean;
 }

package/dist/interfaces/receipts/receipt/ReceiptDetails.interface.d.ts

@@ -18,7 +18,7 @@ export interface ReceiptDetailsDBI {
     itemQuantity: number;
     name?: string;
     paymentMethod: string;
-    purchaseDate: Date;
+    purchaseDate?: Date;
     receiptImage?: string;
     receiptOrigin?: ReceiptOrigintProps;
     store: string;

package/dist/mocks/receipts/Receipts.mock.d.ts

@@ -1,2 +1,78 @@
 import { ReceiptDetailsDBI } from '../../interfaces';
 export declare const receiptsReceivedMock: ReceiptDetailsDBI[];
+export declare const aiReceiptMock: {
+    details: ({
+        id: string;
+        name: string;
+        description: string;
+        comments: string;
+        value: string;
+        type: string;
+        visible: boolean;
+        options: never[];
+        children: ({
+            id: string;
+            name: string;
+            description: string;
+            comments: string;
+            value: string[];
+            type: string;
+        } | {
+            id: string;
+            name: string;
+            description: string;
+            comments: string;
+            value: number;
+            type: string;
+        } | {
+            id: string;
+            name: string;
+            description: string;
+            comments: string;
+            value: string;
+            type: string;
+        })[];
+    } | {
+        id: string;
+        value: string;
+        type: string;
+        visible: boolean;
+        children: {
+            id: string;
+            name: string;
+            value: string;
+            type: string;
+            visible: boolean;
+            children: {
+                id: string;
+                icon: string;
+                value: string;
+                type: string;
+                visible: boolean;
+                link: string;
+            }[];
+        }[];
+        name?: undefined;
+        description?: undefined;
+        comments?: undefined;
+        options?: undefined;
+    } | {
+        id: string;
+        name: string;
+        description: string;
+        comments: string;
+        value: string;
+        type: string;
+        visible: boolean;
+        options: never[];
+        children?: undefined;
+    })[];
+    specs: {
+        careInstructions: string;
+        overview: string;
+        dimensions: string;
+        features: string;
+        compatibility: string;
+        certifications: string;
+    };
+};

package/dist/mocks/receipts/Receipts.mock.js

@@ -81,3 +81,124 @@ export const receiptsReceivedMock = [
         total: faker.finance.amount({ min: 1, max: 100 }),
     },
 ];
+export const aiReceiptMock = {
+    details: [
+        {
+            id: faker.database.mongodbObjectId(),
+            name: 'Appliances',
+            description: 'KitchenAid Counter-depth 20-cu ft French Door Refrigerator with Ice Maker and Water dispenser (Stainless Steel) ENERGY STAR',
+            comments: faker.lorem.sentence(),
+            value: 'Refrigerator',
+            type: 'appliances',
+            visible: true,
+            options: [],
+            children: [
+                {
+                    id: faker.database.mongodbObjectId(),
+                    name: '',
+                    description: '',
+                    comments: '',
+                    value: [
+                        faker.image.urlLoremFlickr(),
+                        faker.image.urlLoremFlickr(),
+                        faker.image.urlLoremFlickr(),
+                        faker.image.urlLoremFlickr(),
+                    ],
+                    type: 'images',
+                },
+                {
+                    id: faker.database.mongodbObjectId(),
+                    name: '',
+                    description: '',
+                    comments: '',
+                    value: 4,
+                    type: 'rating',
+                },
+                {
+                    id: faker.database.mongodbObjectId(),
+                    name: 'Brand',
+                    description: '',
+                    comments: '',
+                    value: 'Kitchen Aid',
+                    type: 'text',
+                },
+                {
+                    id: faker.database.mongodbObjectId(),
+                    name: 'Model#',
+                    description: '',
+                    comments: '',
+                    value: 'KRFC300ESS',
+                    type: 'text',
+                },
+            ],
+        },
+        {
+            id: faker.database.mongodbObjectId(),
+            value: '',
+            type: 'grid',
+            visible: true,
+            children: [
+                {
+                    id: faker.database.mongodbObjectId(),
+                    name: 'Care & Guidelines',
+                    value: '',
+                    type: 'guidelines',
+                    visible: true,
+                    children: [
+                        {
+                            id: faker.database.mongodbObjectId(),
+                            icon: 'umbrella',
+                            value: 'warranty',
+                            type: 'item-icon-btn',
+                            visible: true,
+                            link: 'www.kitchenaid.com',
+                        },
+                        {
+                            id: faker.database.mongodbObjectId(),
+                            icon: 'book-opened',
+                            value: 'manual',
+                            type: 'item-icon-btn',
+                            visible: true,
+                            link: 'www.kitchenaid.com',
+                        },
+                    ],
+                },
+                {
+                    id: faker.database.mongodbObjectId(),
+                    name: 'Related',
+                    value: '',
+                    type: 'item-related',
+                    visible: true,
+                    children: [
+                        {
+                            id: faker.database.mongodbObjectId(),
+                            icon: 'drop',
+                            value: 'filter',
+                            type: 'item-icon-btn',
+                            visible: true,
+                            link: 'www.kitchenaid.com',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: faker.database.mongodbObjectId(),
+            name: 'Notes',
+            description: '',
+            comments: faker.lorem.sentence(),
+            value: faker.lorem.paragraphs(),
+            type: 'notes',
+            visible: true,
+            options: [],
+        },
+    ],
+    specs: {
+        careInstructions: '',
+        overview: '',
+        dimensions: '',
+        features: '',
+        compatibility: '',
+        certifications: '',
+    },
+};

package/dist/stories/receipts/displayReceipts/GridReceipt.stories.d.ts

@@ -14,7 +14,7 @@ export declare const GridReceiptComponent: {
         itemQuantity: number;
         name?: string;
         paymentMethod: string;
-        purchaseDate: Date;
+        purchaseDate?: Date;
         receiptImage?: string;
         receiptOrigin?: import("../../../interfaces").ReceiptOrigintProps;
         store: string;

package/dist/stories/receipts/displayReceipts/ItemReceipt.stories.d.ts

@@ -14,7 +14,7 @@ export declare const ItemReceiptComponent: {
         itemQuantity: number;
         name?: string;
         paymentMethod: string;
-        purchaseDate: Date;
+        purchaseDate?: Date;
         receiptImage?: string;
         receiptOrigin?: import("../../../interfaces").ReceiptOrigintProps;
         store: string;

package/dist/stories/receipts/displayReceipts/ListReceipt.stories.d.ts

@@ -14,7 +14,7 @@ export declare const ListReceiptComponent: {
         itemQuantity: number;
         name?: string;
         paymentMethod: string;
-        purchaseDate: Date;
+        purchaseDate?: Date;
         receiptImage?: string;
         receiptOrigin?: import("../../../interfaces").ReceiptOrigintProps;
         store: string;

package/dist/utils/Formaters.utils.d.ts

@@ -1,6 +1,6 @@
 import type { DayValue } from 'react-modern-calendar-datepicker';
 interface FormatDateI {
-    date: Date | string;
+    date?: Date | string;
     locale?: string;
 }
 export declare const formatDate: ({ date, locale }: FormatDateI) => string;
@@ -10,8 +10,8 @@ export declare const monthAndYearFormatDate: ({ date, locale, }: FormatDateI) =>
 export declare const dayAndMonthFormatDate: ({ date, locale, }: FormatDateI) => string;
 export declare const formatMonthYear: ({ date, locale, }: FormatDateI) => string;
 export declare const formatDateTime: ({ date, locale }: FormatDateI) => {
-    formattedDate: string;
-    formattedTime: string;
+    formattedDate: string | undefined;
+    formattedTime: string | undefined;
 };
 export declare const extractDayMonthYear: (date: Date | string) => {
     day: number;

package/dist/utils/Formaters.utils.js

@@ -1,5 +1,7 @@
 import { format, isValid, parseISO } from 'date-fns';
 export const formatDate = ({ date, locale = 'en-US' }) => {
+    if (!date)
+        return '';
     const timeFormat = new Intl.DateTimeFormat(locale, {
         timeStyle: 'short',
         timeZone: 'UTC',
@@ -16,6 +18,8 @@ export const formatDate = ({ date, locale = 'en-US' }) => {
     return dateFormat + ' ' + timeFormat;
 };
 export const formatDateWithAt = ({ date, locale = 'en-US', }) => {
+    if (!date)
+        return '';
     const timeFormat = new Intl.DateTimeFormat(locale, {
         timeStyle: 'short',
         timeZone: 'UTC',
@@ -32,6 +36,8 @@ export const formatDateWithAt = ({ date, locale = 'en-US', }) => {
     return dateFormat + ' @ ' + timeFormat;
 };
 export const shortFormatDate = ({ date, locale = 'en-US', }) => {
+    if (!date)
+        return '';
     return new Date(date).toLocaleDateString(locale, {
         month: 'short',
         day: 'numeric',
@@ -39,18 +45,24 @@ export const shortFormatDate = ({ date, locale = 'en-US', }) => {
     });
 };
 export const monthAndYearFormatDate = ({ date, locale = 'en-US', }) => {
+    if (!date)
+        return '';
     return new Date(date).toLocaleDateString(locale, {
         month: 'short',
         year: '2-digit',
     });
 };
 export const dayAndMonthFormatDate = ({ date, locale = 'en-US', }) => {
+    if (!date)
+        return '';
     return new Date(date).toLocaleDateString(locale, {
         month: 'short',
         day: '2-digit',
     });
 };
 export const formatMonthYear = ({ date, locale = 'en-US', }) => {
+    if (!date)
+        return '';
     return new Date(date).toLocaleDateString(locale, {
         month: 'long',
         year: 'numeric',

package/package.json

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

package/src/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.tsx

@@ -1,16 +1,11 @@
 import { PropsWithChildren, ReactNode, useMemo } from 'react'
-import {
-  DrawerBody,
-  DrawerHeader,
-  DrawerFooter,
-  Box,
-} from '@chakra-ui/react'
+import { DrawerBody, DrawerHeader, DrawerFooter, Box } from '@chakra-ui/react'
 import {
   PanelHeader,
   FooterDrawer,
   ItemFormFooter,
   Overlay,
-  Loading
+  Loading,
 } from '@/components'
 import { ItemFormPanelI } from '@/interfaces'
 
@@ -22,9 +17,8 @@ export const ItemFormPanel = ({
   panelTitle,
   showOverlay = false,
   onClearForm,
-  onDuplicate
+  onDuplicate,
 }: PropsWithChildren<ItemFormPanelI>) => {
-
   const { firstChild, otherChildren } = useMemo(() => {
     let firstChild: ReactNode | null = null
     let otherChildren: ReactNode = children
@@ -36,7 +30,7 @@ export const ItemFormPanel = ({
         otherChildren = children.slice(1)
       }
     }
-  
+
     return { firstChild, otherChildren }
   }, [children])
 
@@ -51,31 +45,36 @@ export const ItemFormPanel = ({
       </DrawerHeader>
 
       <DrawerBody p="0" overflowX="hidden" bg="lightBlue.1">
-        {
-          firstChild ? (
-            <>
-              {firstChild}
-              <Box position="relative" mb="200px">
-                <Overlay
-                  showOverlay={showOverlay}
-                  position="absolute"
-                  w="inherit"
-                  h="inherit"
-                  zIndex="9"
-                />
-                {otherChildren}
-              </Box>
-            </>
-          ) : (
-            <Loading />
-          )
-        }
+        {firstChild ? (
+          <>
+            {firstChild}
+            <Box position="relative" mb="200px">
+              <Overlay
+                showOverlay={showOverlay}
+                position="absolute"
+                w="inherit"
+                h="inherit"
+                zIndex="9"
+              />
+              {otherChildren}
+            </Box>
+          </>
+        ) : (
+          <Loading />
+        )}
       </DrawerBody>
-      <FooterDrawer isOpen={!showOverlay}>
-        <DrawerFooter w="100%" py="0">
-          <ItemFormFooter onClearForm={onClearForm} onDuplicate={onDuplicate} onSave={onSubmitForm} onCancel={onClose} />
-        </DrawerFooter>
-      </FooterDrawer>
+      {onSubmitForm && (
+        <FooterDrawer isOpen={!showOverlay}>
+          <DrawerFooter w="100%" py="0">
+            <ItemFormFooter
+              onClearForm={onClearForm}
+              onDuplicate={onDuplicate}
+              onSave={onSubmitForm}
+              onCancel={onClose}
+            />
+          </DrawerFooter>
+        </FooterDrawer>
+      )}
     </>
   )
 }

package/src/components/householdItems/ItemNameHeader.tsx

@@ -12,6 +12,7 @@ export const ItemNameHeader = ({
   onValueChange,
   padding = 'base',
   required = true,
+  showSaveButton = true,
 }: ItemNameHeaderI) => {
   const [name, setName] = useState(value)
 
@@ -36,7 +37,7 @@ export const ItemNameHeader = ({
           placeholder={t('householdItems.headers.placeholder')}
           value={name}
         />
-        {name && (
+        {name && showSaveButton && (
           <Button
             variant="secondary"
             maxW="fit-content"

package/src/interfaces/forms/ItemFormPanel/ItemFormPanel.interface.ts

@@ -1,6 +1,6 @@
 export interface ItemFormPanelI {
   onClose: () => void
-  onSubmitForm: () => void
+  onSubmitForm?: () => void
   panelIcon: string
   panelTitle: string
   showOverlay?: boolean

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

@@ -5,4 +5,5 @@ export interface ItemNameHeaderI {
   onSave: (name: string) => void
   padding?: string
   required?: boolean
+  showSaveButton?: boolean
 }

package/src/interfaces/receipts/receipt/ReceiptDetails.interface.ts

@@ -3,7 +3,13 @@ export type ColumnDetailsType = {
   value: string | number | Date
 }
 
-export type ReceiptOrigintProps = 'homeDepot' | 'lowes' | 'HomeDepot' | 'Lowes' | 'walmart' | 'Walmart'
+export type ReceiptOrigintProps =
+  | 'homeDepot'
+  | 'lowes'
+  | 'HomeDepot'
+  | 'Lowes'
+  | 'walmart'
+  | 'Walmart'
 
 export type ReceiptAssignStatusProps = 'filed' | 'filing' | 'unfiled'
 
@@ -22,7 +28,7 @@ export interface ReceiptDetailsDBI {
   itemQuantity: number
   name?: string
   paymentMethod: string
-  purchaseDate: Date
+  purchaseDate?: Date
   receiptImage?: string
   receiptOrigin?: ReceiptOrigintProps
   store: string
@@ -34,4 +40,4 @@ export interface ReceiptDetailsDBI {
   updateAt?: Date
   user?: string
   items?: ItemsI[]
-}
+}

package/src/mocks/receipts/Receipts.mock.ts

@@ -83,3 +83,126 @@ export const receiptsReceivedMock: ReceiptDetailsDBI[] = [
     total: faker.finance.amount({ min: 1, max: 100 }),
   },
 ]
+
+export const aiReceiptMock = {
+  details: [
+    {
+      id: faker.database.mongodbObjectId(),
+      name: 'Appliances',
+      description:
+        'KitchenAid Counter-depth 20-cu ft French Door Refrigerator with Ice Maker and Water dispenser (Stainless Steel) ENERGY STAR',
+      comments: faker.lorem.sentence(),
+      value: 'Refrigerator',
+      type: 'appliances',
+      visible: true,
+      options: [],
+      children: [
+        {
+          id: faker.database.mongodbObjectId(),
+          name: '',
+          description: '',
+          comments: '',
+          value: [
+            faker.image.urlLoremFlickr(),
+            faker.image.urlLoremFlickr(),
+            faker.image.urlLoremFlickr(),
+            faker.image.urlLoremFlickr(),
+          ],
+          type: 'images',
+        },
+        {
+          id: faker.database.mongodbObjectId(),
+          name: '',
+          description: '',
+          comments: '',
+          value: 4,
+          type: 'rating',
+        },
+        {
+          id: faker.database.mongodbObjectId(),
+          name: 'Brand',
+          description: '',
+          comments: '',
+          value: 'Kitchen Aid',
+          type: 'text',
+        },
+        {
+          id: faker.database.mongodbObjectId(),
+          name: 'Model#',
+          description: '',
+          comments: '',
+          value: 'KRFC300ESS',
+          type: 'text',
+        },
+      ],
+    },
+    {
+      id: faker.database.mongodbObjectId(),
+      value: '',
+      type: 'grid',
+      visible: true,
+      children: [
+        {
+          id: faker.database.mongodbObjectId(),
+          name: 'Care & Guidelines',
+          value: '',
+          type: 'guidelines',
+          visible: true,
+          children: [
+            {
+              id: faker.database.mongodbObjectId(),
+              icon: 'umbrella',
+              value: 'warranty',
+              type: 'item-icon-btn',
+              visible: true,
+              link: 'www.kitchenaid.com',
+            },
+            {
+              id: faker.database.mongodbObjectId(),
+              icon: 'book-opened',
+              value: 'manual',
+              type: 'item-icon-btn',
+              visible: true,
+              link: 'www.kitchenaid.com',
+            },
+          ],
+        },
+        {
+          id: faker.database.mongodbObjectId(),
+          name: 'Related',
+          value: '',
+          type: 'item-related',
+          visible: true,
+          children: [
+            {
+              id: faker.database.mongodbObjectId(),
+              icon: 'drop',
+              value: 'filter',
+              type: 'item-icon-btn',
+              visible: true,
+              link: 'www.kitchenaid.com',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: faker.database.mongodbObjectId(),
+      name: 'Notes',
+      description: '',
+      comments: faker.lorem.sentence(),
+      value: faker.lorem.paragraphs(),
+      type: 'notes',
+      visible: true,
+      options: [],
+    },
+  ],
+  specs: {
+    careInstructions: '',
+    overview: '',
+    dimensions: '',
+    features: '',
+    compatibility: '',
+    certifications: '',
+  },
+}

package/src/utils/Formaters.utils.ts

@@ -2,11 +2,12 @@ import type { DayValue } from 'react-modern-calendar-datepicker'
 import { format, isValid, parseISO } from 'date-fns'
 
 interface FormatDateI {
-  date: Date | string
+  date?: Date | string
   locale?: string
 }
 
 export const formatDate = ({ date, locale = 'en-US' }: FormatDateI): string => {
+  if (!date) return ''
   const timeFormat = new Intl.DateTimeFormat(locale, {
     timeStyle: 'short',
     timeZone: 'UTC',
@@ -29,6 +30,7 @@ export const formatDateWithAt = ({
   date,
   locale = 'en-US',
 }: FormatDateI): string => {
+  if (!date) return ''
   const timeFormat = new Intl.DateTimeFormat(locale, {
     timeStyle: 'short',
     timeZone: 'UTC',
@@ -51,6 +53,7 @@ export const shortFormatDate = ({
   date,
   locale = 'en-US',
 }: FormatDateI): string => {
+  if (!date) return ''
   return new Date(date).toLocaleDateString(locale, {
     month: 'short',
     day: 'numeric',
@@ -62,6 +65,7 @@ export const monthAndYearFormatDate = ({
   date,
   locale = 'en-US',
 }: FormatDateI): string => {
+  if (!date) return ''
   return new Date(date).toLocaleDateString(locale, {
     month: 'short',
     year: '2-digit',
@@ -72,6 +76,7 @@ export const dayAndMonthFormatDate = ({
   date,
   locale = 'en-US',
 }: FormatDateI): string => {
+  if (!date) return ''
   return new Date(date).toLocaleDateString(locale, {
     month: 'short',
     day: '2-digit',
@@ -82,6 +87,7 @@ export const formatMonthYear = ({
   date,
   locale = 'en-US',
 }: FormatDateI): string => {
+  if (!date) return ''
   return new Date(date).toLocaleDateString(locale, {
     month: 'long',
     year: 'numeric',