@homefile/components-v2 2.3.1 → 2.5.0

package/dist/utils/Avatars.utils.js

@@ -33,7 +33,7 @@ const colors = [
     '#DE9E35',
     '#37323E',
 ];
-export const randomColor = (index) => {
+export const randomColor = (index = Math.floor(Math.random() * 30)) => {
     if (index >= colors.length) {
         return colors[index % colors.length];
     }

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './AddMedia.utils';
+export * from './Animations.utils';
 export * from './Avatars.utils';
 export * from './BrowserDetectors.utils';
 export * from './BubblesTour.utils';

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 export * from './AddMedia.utils';
+export * from './Animations.utils';
 export * from './Avatars.utils';
 export * from './BrowserDetectors.utils';
 export * from './BubblesTour.utils';

package/package.json

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

package/src/assets/images/animations/index.ts

@@ -0,0 +1,15 @@
+import TreesDay from './trees-day-summer.png'
+import TreesDayFall from './trees-day-fall.png'
+import TreesDayWinter from './trees-day-winter.png'
+import TreesEvening from './trees-evening.png'
+import TreesMorning from './trees-morning.png'
+import TreesNight from './trees-night.png'
+
+export {
+  TreesDay,
+  TreesDayFall,
+  TreesDayWinter,
+  TreesEvening,
+  TreesMorning,
+  TreesNight,
+}

package/src/assets/images/book.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36.229" height="25.49" viewBox="0 0 36.229 25.49">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_24874" data-name="Rectangle 24874" width="36.229" height="25.49" transform="translate(0 0)" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_20984" data-name="Group 20984" transform="translate(0 0)">
+    <g id="Group_20983" data-name="Group 20983" transform="translate(0 0)" clip-path="url(#clip-path)">
+      <path id="Path_15109" data-name="Path 15109" d="M23.19,0V23.3A2.195,2.195,0,0,0,21,21.1H7.4V0Z" transform="translate(-5.076 0)" fill="#d2edef"/>
+      <path id="Path_15110" data-name="Path 15110" d="M59.866,21.1a2.194,2.194,0,0,0-2.191,2.2V0H73.461V21.1Z" transform="translate(-39.561 0)" fill="#d2edef"/>
+      <path id="Path_15111" data-name="Path 15111" d="M15.919,24.116H2.324V4.392H0V26.311H15.919A2.192,2.192,0,0,0,18.114,28.5V26.311a2.195,2.195,0,0,0-2.195-2.2" transform="translate(0 -3.013)" fill="#e24c5d"/>
+      <path id="Path_15112" data-name="Path 15112" d="M73.461,4.393V24.117H59.866a2.194,2.194,0,0,0-2.191,2.2V28.5a2.191,2.191,0,0,0,2.191-2.192H75.789V4.393Z" transform="translate(-39.561 -3.013)" fill="#cd4160"/>
+      <rect id="Rectangle_24864" data-name="Rectangle 24864" width="5.916" height="0.942" transform="translate(7.209 2.445)" fill="#40566b"/>
+      <rect id="Rectangle_24865" data-name="Rectangle 24865" width="10.4" height="0.942" transform="translate(4.965 7.581)" fill="#40566b"/>
+      <rect id="Rectangle_24866" data-name="Rectangle 24866" width="10.4" height="0.942" transform="translate(4.965 10.636)" fill="#40566b"/>
+      <rect id="Rectangle_24867" data-name="Rectangle 24867" width="10.4" height="0.942" transform="translate(4.965 13.689)" fill="#40566b"/>
+      <rect id="Rectangle_24868" data-name="Rectangle 24868" width="10.4" height="0.942" transform="translate(4.965 16.744)" fill="#40566b"/>
+      <rect id="Rectangle_24869" data-name="Rectangle 24869" width="10.4" height="0.942" transform="translate(20.807 7.581)" fill="#40566b"/>
+      <rect id="Rectangle_24870" data-name="Rectangle 24870" width="10.4" height="0.942" transform="translate(20.807 4.4)" fill="#40566b"/>
+      <rect id="Rectangle_24871" data-name="Rectangle 24871" width="10.4" height="0.942" transform="translate(20.807 10.636)" fill="#40566b"/>
+      <rect id="Rectangle_24872" data-name="Rectangle 24872" width="10.4" height="0.942" transform="translate(20.807 13.689)" fill="#40566b"/>
+      <rect id="Rectangle_24873" data-name="Rectangle 24873" width="10.4" height="0.942" transform="translate(20.807 16.744)" fill="#40566b"/>
+    </g>
+  </g>
+</svg>

package/src/assets/images/chat-bubble.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g id="Group_21874" data-name="Group 21874" transform="translate(-1764 -254)">
+    <g id="Union_41" data-name="Union 41" transform="translate(1764 254)" fill="#fff">
+      <path d="M 6.399946212768555 19.02802085876465 L 4.829119682312012 16.40986061096191 L 4.683469772338867 16.16709899902344 L 4.400369644165039 16.16709899902344 L 2.999699831008911 16.16709899902344 C 1.621359825134277 16.16709899902344 0.4999998509883881 15.04533958435059 0.4999998509883881 13.66650009155273 L 0.4999998509883881 2.999699831008911 C 0.4999998509883881 1.621359825134277 1.621359825134277 0.4999998509883881 2.999699831008911 0.4999998509883881 L 17.00009918212891 0.4999998509883881 C 18.37843894958496 0.4999998509883881 19.49979972839355 1.621359825134277 19.49979972839355 2.999699831008911 L 19.49979972839355 13.66650009155273 C 19.49979972839355 15.04533958435059 18.37843894958496 16.16709899902344 17.00009918212891 16.16709899902344 L 8.399879455566406 16.16709899902344 L 8.116809844970703 16.16709899902344 L 7.971149921417236 16.40982055664062 L 6.399946212768555 19.02802085876465 Z" stroke="none"/>
+      <path d="M 6.399997234344482 18.05625152587891 L 7.833739757537842 15.66709995269775 L 17.00009918212891 15.66709995269775 C 18.10273933410645 15.66709995269775 18.99979972839355 14.76962947845459 18.99979972839355 13.66650009155273 L 18.99979972839355 2.999699831008911 C 18.99979972839355 1.897059917449951 18.10273933410645 0.9999998807907104 17.00009918212891 0.9999998807907104 L 2.999699831008911 0.9999998807907104 C 1.897059917449951 0.9999998807907104 0.9999998807907104 1.897059917449951 0.9999998807907104 2.999699831008911 L 0.9999998807907104 13.66650009155273 C 0.9999998807907104 14.76962947845459 1.897059917449951 15.66709995269775 2.999699831008911 15.66709995269775 L 4.966569900512695 15.66709995269775 L 6.399997234344482 18.05625152587891 M 6.399899959564209 19.99979972839355 L 4.400369644165039 16.66709899902344 L 2.999699831008911 16.66709899902344 C 1.34279990196228 16.66709899902344 -1.358032193365943e-07 15.32339954376221 -1.358032193365943e-07 13.66650009155273 L -1.358032193365943e-07 2.999699831008911 C -1.358032193365943e-07 1.34279990196228 1.34279990196228 -1.358032193365943e-07 2.999699831008911 -1.358032193365943e-07 L 17.00009918212891 -1.358032193365943e-07 C 18.6569995880127 -1.358032193365943e-07 19.99979972839355 1.34279990196228 19.99979972839355 2.999699831008911 L 19.99979972839355 13.66650009155273 C 19.99979972839355 15.32339954376221 18.6569995880127 16.66709899902344 17.00009918212891 16.66709899902344 L 8.399879455566406 16.66709899902344 L 6.399899959564209 19.99979972839355 Z" stroke="none" fill="#1c7ab4"/>
+    </g>
+  </g>
+</svg>

package/src/assets/images/document2.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.852" height="21.158" viewBox="0 0 20.852 21.158">
+  <g id="Group_21880" data-name="Group 21880" transform="translate(-13.43 -0.001)">
+    <path id="Path_17605" data-name="Path 17605" d="M13.43,0V21.158H34.281V3.591L30.028,0Z" transform="translate(0 0)" fill="#d2edef"/>
+    <path id="Path_17606" data-name="Path 17606" d="M77.93,0V3.389h3.481Z" transform="translate(-47.13)" fill="#324458"/>
+    <path id="Path_17607" data-name="Path 17607" d="M13.43,94.821Z" transform="translate(0 -73.662)" fill="#28b5a8"/>
+    <rect id="Rectangle_25619" data-name="Rectangle 25619" width="5.587" height="0.632" transform="translate(15.576 3.073)" fill="#324458"/>
+    <rect id="Rectangle_25620" data-name="Rectangle 25620" width="16.429" height="0.632" transform="translate(15.641 7.362)" fill="#324458"/>
+    <rect id="Rectangle_25621" data-name="Rectangle 25621" width="16.429" height="0.632" transform="translate(15.641 9.314)" fill="#324458"/>
+    <rect id="Rectangle_25622" data-name="Rectangle 25622" width="16.429" height="0.632" transform="translate(15.641 11.268)" fill="#324458"/>
+    <rect id="Rectangle_25623" data-name="Rectangle 25623" width="16.429" height="0.632" transform="translate(15.641 13.223)" fill="#324458"/>
+    <rect id="Rectangle_25624" data-name="Rectangle 25624" width="16.429" height="0.632" transform="translate(15.641 15.177)" fill="#324458"/>
+    <rect id="Rectangle_25625" data-name="Rectangle 25625" width="7.453" height="0.632" transform="translate(15.641 17.328)" fill="#324458"/>
+  </g>
+</svg>

package/src/assets/images/index.ts

@@ -12,11 +12,13 @@ import Billing from './billing.svg'
 import BillingAddress from './billing-address.svg'
 import BlueFolder from './blue-folder.svg'
 import BlueFolderShared from './blue-folder-shared.svg'
+import BookOpened from './book.svg'
 import Box from './box.svg'
 import Building from './building.svg'
 import Calc from './calc.svg'
 import Calendar2 from './calendar2.svg'
 import Catalog from './catalog.svg'
+import ChatBubble from './chat-bubble.svg'
 import Check from './check.svg'
 import CheckInCircle from './check-in-circle.svg'
 import CheckPen from './check-pen.svg'
@@ -39,6 +41,7 @@ import Diamond from './diamond.svg'
 import DiningRoom from './dining-room.svg'
 import DocIcon from './doc-icon.svg'
 import Document from './document.svg'
+import Document2 from './document2.svg'
 import Drop from './drop.svg'
 import DropCalendar from './drop-calendar.svg'
 import Electricity from './electricity.svg'
@@ -171,11 +174,13 @@ export {
   BillingAddress,
   BlueFolder,
   BlueFolderShared,
+  BookOpened,
   Box,
   Building,
   Calc,
   Calendar2,
   Catalog,
+  ChatBubble,
   Check,
   CheckInCircle,
   CheckPen,
@@ -198,6 +203,7 @@ export {
   DiningRoom,
   DocIcon,
   Document,
+  Document2,
   Drop,
   DropCalendar,
   Electricity,
@@ -317,6 +323,7 @@ export {
 }
 
 export * from './alerts'
+export * from './animations'
 export * from './appliances'
 export * from './clouds-animation'
 export * from './form'

package/src/assets/locales/en/index.json

@@ -167,6 +167,10 @@
     "recipient": "recipient",
     "title": "Contacts"
   },
+  "counter": {
+    "of": "of",
+    "showing": "Showing"
+  },
   "daysOfWeek": {
     "1": "Monday",
     "2": "Tuesday",
@@ -288,6 +292,7 @@
   },
   "forms": {
     "addAll": "Add All",
+    "all": "All",
     "apartmentNumber": "Apartment, Suite, Unit, Building, Floor, etc.",
     "city": "City",
     "companyEmail": "Company email",
@@ -311,6 +316,7 @@
     "lastName": "Last name",
     "link": "Link",
     "message": "Message",
+    "new": "New",
     "moreDetails": "Add Optional Details",
     "obs": "Additional information",
     "password": "Password",
@@ -465,7 +471,11 @@
     "altImage": "image"
   },
   "inbox": {
-    "forwardTo": "To use Receipt Autofiler, simply forward reciepts to "
+    "createReply": "Create Reply",
+    "enterContent": "Enter content",
+    "forwardTo": "To use Receipt Autofiler, simply forward reciepts to ",
+    "from": "From: ",
+    "message": "Message"
   },
   "launchpad": {
     "menu": {
@@ -628,15 +638,6 @@
       "shared": "Shared",
       "updated": "Updated"
     },
-    "types": {
-      "contact": "Contact",
-      "file": "File",
-      "folder": "Folder",
-      "receipt": "Receipt",
-      "user": "User",
-      "tile": "Tile",
-      "payment": "Payment"
-    },
     "title": "Notifications"
   },
   "partner": {

package/src/components/animations/CloudsAnimation.tsx

@@ -1,16 +1,16 @@
-import {
-  Airplane,
-  Cloud1,
-  Cloud2,
-  Cloud3,
-  TreesCrop,
-  TreesCrop2,
-} from '@/assets/images'
+import { Fragment, PropsWithChildren, useEffect, useState } from 'react'
+import { Airplane, Cloud1, Cloud2, Cloud3 } from '@/assets/images'
 import { useWindowDimensions } from '@/hooks'
 import { colors } from '@/theme/colors'
+import {
+  TimeOfDay,
+  getTimeOfDay,
+  TimeOfDaySeason,
+  getTimeOfDaySeason,
+} from '@/utils'
 import { Box, Image } from '@chakra-ui/react'
 import { keyframes } from '@emotion/react'
-import { Fragment, PropsWithChildren } from 'react'
+import { WeatherTrees } from './WeatherTrees'
 
 export const moveLeftToRightAirplane = keyframes`
     0% {
@@ -77,6 +77,22 @@ export const moveRightToLeftWithFade3 = keyframes`
     }
   `
 export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
+  const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>(getTimeOfDay())
+  const timeOfDaySeason = getTimeOfDaySeason()
+  const gradients: Record<TimeOfDay, string> = {
+    day: colors.dayGradient,
+    evening: colors.eveningGradient,
+    morning: colors.morningGradient,
+    night: colors.nightGradient,
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeOfDay(getTimeOfDay())
+    }, 60000)
+
+    return () => clearInterval(interval)
+  }, [])
   const {
     windowDimensions: { width },
   } = useWindowDimensions()
@@ -88,7 +104,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       minH="100vh"
       w="full"
       position="relative"
-      bgGradient={colors.skyGradient}
+      bgGradient={gradients[timeOfDay]}
       overflowX="hidden"
       overflowY="scroll"
     >
@@ -156,22 +172,23 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
         animation={`${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`}
         zIndex="1"
       />
-      <Image
-        src={TreesCrop}
+      <WeatherTrees
+        timeOfDaySeason={timeOfDaySeason}
         position="fixed"
         bottom="0"
-        right="2"
+        right="0"
         w="auto"
-        h="80px"
+        h="100px"
         zIndex="1"
       />
-      <Image
-        src={TreesCrop2}
+      <WeatherTrees
+        timeOfDaySeason={timeOfDaySeason}
         position="fixed"
         bottom="0"
         left="2"
         w="auto"
-        h="80px"
+        transform="rotateY(180deg)"
+        h="100px"
         zIndex="1"
       />
     </Box>

package/src/components/animations/WeatherTrees.tsx

@@ -0,0 +1,37 @@
+import {
+  TreesDay,
+  TreesDayFall,
+  TreesDayWinter,
+  TreesEvening,
+  TreesMorning,
+  TreesNight,
+} from '@/assets/images'
+import { TimeOfDaySeason } from '@/utils'
+import { Image, ImageProps } from '@chakra-ui/react'
+
+export interface WeatherTreesI extends ImageProps {
+  timeOfDaySeason: TimeOfDaySeason
+}
+
+export const WeatherTrees = ({ timeOfDaySeason, ...props }: WeatherTreesI) => {
+  const images: Record<TimeOfDaySeason, string> = {
+    'day-summer': TreesDay,
+    'day-fall': TreesDayFall,
+    'day-winter': TreesDayWinter,
+    'day-spring': TreesDay,
+    'evening-summer': TreesEvening,
+    'evening-fall': TreesEvening,
+    'evening-winter': TreesDayWinter,
+    'evening-spring': TreesEvening,
+    'morning-summer': TreesMorning,
+    'morning-fall': TreesMorning,
+    'morning-winter': TreesDayWinter,
+    'morning-spring': TreesMorning,
+    'night-summer': TreesNight,
+    'night-fall': TreesNight,
+    'night-winter': TreesDayWinter,
+    'night-spring': TreesNight,
+  }
+
+  return <Image {...props} src={images[timeOfDaySeason]} alt="trees" />
+}

package/src/components/animations/index.ts

@@ -1,2 +1,3 @@
 export * from './CloudsAnimation'
 export * from './HomieAnimation'
+export * from './WeatherTrees'

package/src/components/badge/TextBadge.tsx

@@ -19,7 +19,7 @@ export const TextBadge = ({
       py="0.1rem"
       px="0.5rem"
       _hover={{
-        width,
+        width: showAnimation ? width : 'fit-content',
       }}
       transition="all 0.2s ease-in-out"
     >

package/src/components/folderPanel/folderDetails/FilesCounter.tsx

@@ -1,9 +1,7 @@
 import { t } from 'i18next'
-import { Box, Flex, Text, chakra } from '@chakra-ui/react'
-import { BeatLoader } from 'react-spinners'
-import { colors } from '@/theme/colors'
 import { FilesCounterI } from '@/interfaces'
 import { pluralize } from '@/utils'
+import { BaseCounter } from '@/components'
 
 export const FilesCounter = ({
   totalFiles,
@@ -22,23 +20,10 @@ export const FilesCounter = ({
   )} ${totalFiles} ${files}`
 
   return (
-    <Box w="100%">
-      <Flex justify="space-between" align="center">
-        {!uploading && (
-          <Text variant="home">{totalFiles > 1 ? moreThanOne : one}</Text>
-        )}
-        {uploading && (
-          <Text variant="home">
-            <chakra.span fontWeight="bold">
-              {t('folderSharing.uploading')}
-            </chakra.span>
-            {` ${uploadingFiles} ${files}`}
-            <chakra.span ml="2">
-              <BeatLoader size="4px" color={colors.blue[6]} />
-            </chakra.span>
-          </Text>
-        )}
-      </Flex>
-    </Box>
+    <BaseCounter
+      text={totalFiles > 1 ? moreThanOne : one}
+      uploading={uploading}
+      uploadingText={` ${uploadingFiles ?? ''} ${files}`}
+    />
   )
 }

package/src/components/footers/FooterButtons.tsx

@@ -5,9 +5,10 @@ export const FooterButtons = ({
   button1,
   button2,
   button3,
+  px = 'base',
 }: FooterButtonsI) => {
   return (
-    <Flex align="center" justifyContent="space-between" w="full" px="base">
+    <Flex align="center" justifyContent="space-between" w="full" px={px}>
       <Flex align="center" gap="2">
         {button1 ? (
           <Button

package/src/components/forms/BaseCounter.tsx

@@ -0,0 +1,30 @@
+import { t } from 'i18next'
+import { Box, chakra, Flex, Text } from '@chakra-ui/react'
+import { BeatLoader } from 'react-spinners'
+import { colors } from '@/theme/colors'
+import { BaseCounterI } from '@/interfaces'
+
+export const BaseCounter = ({
+  text,
+  uploading,
+  uploadingText,
+}: BaseCounterI) => {
+  return (
+    <Box w="100%">
+      <Flex justify="space-between" align="center">
+        {!uploading && <Text variant="home">{text}</Text>}
+        {uploading && (
+          <Text variant="home">
+            <chakra.span fontWeight="bold">
+              {t('folderSharing.uploading')}
+            </chakra.span>
+            {uploadingText}
+            <chakra.span ml="2">
+              <BeatLoader size="4px" color={colors.blue[6]} />
+            </chakra.span>
+          </Text>
+        )}
+      </Flex>
+    </Box>
+  )
+}

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

@@ -6,9 +6,11 @@ export const TileCta = ({ callback, ...props }: TileCtaI) => {
   return (
     <Button
       onClick={() => callback?.({ ...props })}
-      variant={type === 'primary-cta' ? 'tertiaryFooter' : 'secondaryFooter'}
+      variant={type === 'primary-cta' ? 'primary' : 'secondary'}
       fontSize="sm"
-      maxW="full"
+      textTransform="capitalize"
+      px="none"
+      bg={type === 'primary-cta' ? '' : 'neutral.white'}
     >
       {value}
     </Button>

package/src/components/forms/index.ts

@@ -2,5 +2,6 @@ export * from './dynamicForm'
 export * from './readOnly'
 export * from './Address'
 export * from './AddressStored'
+export * from './BaseCounter'
 export * from './Collapsible'
 export * from './EditItemName'

package/src/components/forms/readOnly/ReadOnlyDynamicForm.tsx

@@ -6,6 +6,7 @@ import {
   ReadOnlyGrid,
   ReadOnlyGroup,
   ReadOnlyInput,
+  ReadOnlyNotes,
   ReadOnlyRating,
   ReadOnlyTextArea,
 } from '@/components'
@@ -13,10 +14,11 @@ import { fieldIcons } from '@/helpers'
 
 export const ReadOnlyDynamicForm = ({
   form: fields,
+  onClick,
   onEdit = () => {},
 }: ReadOnlyDynamicFormI) => {
   return (
-    <Box bg="lightBlue.1">
+    <Box bg="lightBlue.1" overflow="scroll">
       {fields?.map((field) => {
         const { children = [], icon, id, name, type, value } = field
         const baseProps = {
@@ -43,11 +45,15 @@ export const ReadOnlyDynamicForm = ({
           case 'textarea':
             return <ReadOnlyTextArea {...baseProps} />
           case 'grid':
-            return <ReadOnlyGrid key={id} children={children} />
+            return (
+              <ReadOnlyGrid key={id} children={children} onClick={onClick} />
+            )
           case 'group':
             return <ReadOnlyGroup key={id} children={children} />
           case 'appliances':
             return <ReadOnlyAppliances {...field} key={id} onEdit={onEdit} />
+          case 'notes':
+            return <ReadOnlyNotes {...field} key={id} />
           default:
             return null
         }

package/src/components/forms/readOnly/fields/ReadOnlyGrid.tsx

@@ -1,9 +1,18 @@
 import { Flex } from '@chakra-ui/react'
 import { IconTypes, ReadOnlyGridI } from '@/interfaces'
-import { ReadOnlyDate, ReadOnlyInput } from '@/components'
+import {
+  ReadOnlyDate,
+  ReadOnlyGuidelines,
+  ReadOnlyInput,
+  ReadOnlyItemRelated,
+} from '@/components'
 import { fieldIcons } from '@/helpers'
 
-export const ReadOnlyGrid = ({ children, ...props }: ReadOnlyGridI) => {
+export const ReadOnlyGrid = ({
+  children,
+  onClick,
+  ...props
+}: ReadOnlyGridI) => {
   return (
     <Flex
       align="stretch"
@@ -13,7 +22,7 @@ export const ReadOnlyGrid = ({ children, ...props }: ReadOnlyGridI) => {
       p="base"
       {...props}
     >
-      {children?.map(({ id, name, value, type, icon }) => {
+      {children?.map(({ children, id, name, value, type, icon }) => {
         const baseProps = {
           key: `${id}-${name}-${value}-${type}`,
           id,
@@ -34,6 +43,26 @@ export const ReadOnlyGrid = ({ children, ...props }: ReadOnlyGridI) => {
             )
           case 'date':
             return <ReadOnlyDate {...baseProps} name={name} p="0" />
+
+          case 'guidelines':
+            return (
+              <ReadOnlyGuidelines
+                key={id}
+                name={name}
+                children={children}
+                onClick={onClick}
+              />
+            )
+
+          case 'item-related':
+            return (
+              <ReadOnlyItemRelated
+                key={id}
+                name={name}
+                children={children}
+                onClick={onClick}
+              />
+            )
           default:
             return null
         }

package/src/components/forms/readOnly/fields/ReadOnlyNotes.tsx

@@ -0,0 +1,16 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { ReportI } from '@/interfaces'
+
+export const ReadOnlyNotes = ({
+  name,
+  value,
+}: Pick<ReportI, 'name' | 'value'>) => {
+  return (
+    <Stack p="base" spacing="base">
+      <Text fontSize="xs" textTransform="uppercase">
+        {name}
+      </Text>
+      <Text fontFamily="secondary">{value}</Text>
+    </Stack>
+  )
+}

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.tsx

@@ -19,7 +19,7 @@ export const ReadOnlyAppliances = ({
   const rating = children?.find(({ type }) => type === 'rating')
   const images = children?.find(({ type }) => type === 'images')
   return (
-    <Stack spacing="base" p="base">
+    <Stack spacing="base" p="base" bg="neutral.white" mt="2px">
       <Flex justify="space-between">
         <Text fontSize="xs" textTransform="uppercase">
           {name}

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyGuidelines.tsx

@@ -0,0 +1,33 @@
+import { Text, Stack, Grid } from '@chakra-ui/react'
+import { HiddenField } from '@/components'
+import { ReadOnlyGuidelinesI } from '@/interfaces'
+import { fieldIcons } from '@/helpers'
+
+export const ReadOnlyGuidelines = ({
+  name,
+  children,
+  onClick,
+}: ReadOnlyGuidelinesI) => {
+  return (
+    <Stack spacing="base">
+      <Text fontSize="xs" textTransform="uppercase">
+        {name}
+      </Text>
+      <Grid templateColumns="repeat(2, minmax(80px, 1fr))" gap="base">
+        {children?.map((child) => {
+          const { id, icon, value } = child
+          const btnIcon = icon ? fieldIcons[icon] : ''
+          return (
+            <HiddenField
+              key={id}
+              id={id}
+              icon={btnIcon}
+              name={value as string}
+              onClick={() => onClick?.(id)}
+            />
+          )
+        })}
+      </Grid>
+    </Stack>
+  )
+}

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemImages.tsx

@@ -14,6 +14,7 @@ export const ReadOnlyHomeItemImages = (props: Partial<ReportI>) => {
       <SimpleGrid columns={4} spacing="base">
         {images?.map((image) => (
           <Box
+            key={image}
             as="button"
             backgroundImage={image}
             backgroundSize="cover"