@homefile/components-v2 1.0.2 → 1.0.4

package/dist/components/receipts/receipt/ReceiptPDF.js

@@ -1,13 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReceiptPDF = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var images_1 = require("../../../assets/images");
-var components_1 = require("../..");
-var ReceiptPDF = function (_a) {
-    var onBack = _a.onBack, onPDFClick = _a.onPDFClick;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", p: "base", bg: "lightBlue.2", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "base", children: [(0, jsx_runtime_1.jsx)(components_1.BackCircleButton, { onClick: onBack }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "regular", children: (0, i18next_1.t)('receipts.receipt') })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "base", as: "button", onClick: onPDFClick, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { variant: "home", color: "blue.2", fontWeight: "medium", textTransform: "capitalize", children: (0, i18next_1.t)('receipts.viewPdf') }), (0, jsx_runtime_1.jsx)(react_1.Image, { src: images_1.PdfIcon, h: "23px", w: "auto" })] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from "i18next";
+import { Flex, Text, Image } from '@chakra-ui/react';
+import { PdfIcon } from "../../../assets/images";
+import { BackCircleButton } from "../..";
+export const ReceiptPDF = ({ onBack, onPDFClick }) => {
+    return (_jsxs(Flex, { align: "center", justify: "space-between", p: "base", bg: "lightBlue.2", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(BackCircleButton, { onClick: onBack }), _jsx(Text, { fontWeight: "regular", children: t('receipts.receipt') })] }), _jsxs(Flex, { align: "center", gap: "base", as: "button", onClick: onPDFClick, children: [_jsx(Text, { variant: "home", color: "blue.2", fontWeight: "medium", textTransform: "capitalize", children: t('receipts.viewPdf') }), _jsx(Image, { src: PdfIcon, h: "23px", w: "auto" })] })] }));
 };
-exports.ReceiptPDF = ReceiptPDF;

package/dist/components/receipts/receipt/ReceiptRoom.js

@@ -1,14 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReceiptRoom = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var helpers_1 = require("../../../helpers");
-var utils_1 = require("../../../utils");
-var ReceiptRoom = function (_a) {
-    var roomType = _a.roomType, roomId = _a.roomId, onClick = _a.onClick;
-    var label = helpers_1.roomNames[roomType];
-    var altName = (0, utils_1.getIconAltText)(label);
-    return ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: label, placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", bg: "lightGreen.2", onClick: function () { return onClick(roomId); }, children: (0, jsx_runtime_1.jsx)(react_1.Center, { px: "base", minW: "fit-content", children: (0, jsx_runtime_1.jsx)(react_1.Image, { src: helpers_1.roomIcons[roomType], alt: altName, w: "23px", h: "auto" }) }) }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Center, Image, Tooltip } from '@chakra-ui/react';
+import { roomIcons, roomNames } from '../../../helpers';
+import { getIconAltText } from '../../../utils';
+export const ReceiptRoom = ({ roomType, roomId, onClick }) => {
+    const label = roomNames[roomType];
+    const altName = getIconAltText(label);
+    return (_jsx(Tooltip, { label: label, placement: "top", children: _jsx(Box, { as: "button", bg: "lightGreen.2", onClick: () => onClick(roomId), children: _jsx(Center, { px: "base", minW: "fit-content", children: _jsx(Image, { src: roomIcons[roomType], alt: altName, w: "23px", h: "auto" }) }) }) }));
 };
-exports.ReceiptRoom = ReceiptRoom;

package/dist/components/receipts/receipt/index.js

@@ -1,35 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DetailsColumn"), exports);
-__exportStar(require("./ItemsReviewBanner"), exports);
-__exportStar(require("./PdfButton"), exports);
-__exportStar(require("./ReceiptBody"), exports);
-__exportStar(require("./ReceiptContent"), exports);
-__exportStar(require("./ReceiptDetails"), exports);
-__exportStar(require("./ReceiptFilters"), exports);
-__exportStar(require("./ReceiptFooter"), exports);
-__exportStar(require("./ReceiptHeader"), exports);
-__exportStar(require("./ReceiptInfoCard"), exports);
-__exportStar(require("./ReceiptInfos"), exports);
-__exportStar(require("./ReceiptItem"), exports);
-__exportStar(require("./ReceiptItemAssigned"), exports);
-__exportStar(require("./ReceiptItemBody"), exports);
-__exportStar(require("./ReceiptItemContainer"), exports);
-__exportStar(require("./ReceiptItemHeader"), exports);
-__exportStar(require("./ReceiptItems"), exports);
-__exportStar(require("./ReceiptPDF"), exports);
-__exportStar(require("./ReceiptRoom"), exports);
+export * from './DetailsColumn';
+export * from './ItemsReviewBanner';
+export * from './PdfButton';
+export * from './ReceiptBody';
+export * from './ReceiptContent';
+export * from './ReceiptDetails';
+export * from './ReceiptFilters';
+export * from './ReceiptFooter';
+export * from './ReceiptHeader';
+export * from './ReceiptInfoCard';
+export * from './ReceiptInfos';
+export * from './ReceiptItem';
+export * from './ReceiptItemAssigned';
+export * from './ReceiptItemBody';
+export * from './ReceiptItemContainer';
+export * from './ReceiptItemHeader';
+export * from './ReceiptItems';
+export * from './ReceiptPDF';
+export * from './ReceiptRoom';

package/dist/components/rooms/AddItemCard.js

@@ -1,17 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AddItemCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var images_1 = require("../../assets/images");
-var AddItemCard = function (_a) {
-    var onClick = _a.onClick, disabled = _a.disabled;
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", bg: "neutral.white", boxShadow: "md", onClick: onClick, transition: "all 0.1s ease-in-out", w: "fit-content", disabled: disabled, _hover: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Center, Stack, Image, Text } from '@chakra-ui/react';
+import { Plus } from '../../assets/images';
+export const AddItemCard = ({ onClick, disabled }) => {
+    return (_jsx(Box, { as: "button", bg: "neutral.white", boxShadow: "md", onClick: onClick, transition: "all 0.1s ease-in-out", w: "fit-content", disabled: disabled, _hover: {
             boxShadow: 'lg',
         }, _disabled: {
             filter: 'grayscale(100%)',
             pointerEvents: 'none',
-        }, children: (0, jsx_runtime_1.jsx)(react_1.Center, { w: "8.75rem", h: "8.75rem", children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: images_1.Plus }), (0, jsx_runtime_1.jsx)(react_1.Text, { textColor: "blue.2", fontSize: "xs", children: (0, i18next_1.t)('groups.add') })] }) }) }));
+        }, children: _jsx(Center, { w: "8.75rem", h: "8.75rem", children: _jsxs(Stack, { children: [_jsx(Image, { src: Plus }), _jsx(Text, { textColor: "blue.2", fontSize: "xs", children: t('groups.add') })] }) }) }));
 };
-exports.AddItemCard = AddItemCard;

package/dist/components/rooms/AddItemImage.js

@@ -1,15 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AddItemImage = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var colors_1 = require("../../theme/colors");
-var AddItemImage = function (_a) {
-    var onClick = _a.onClick, disabled = _a.disabled;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: "neutral.white", transition: "all 0.1s ease-in-out", position: "relative", _hover: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Input, Stack, Text } from '@chakra-ui/react';
+import { Plus } from '..';
+import { colors } from '../../theme/colors';
+export const AddItemImage = ({ onClick, disabled, }) => {
+    return (_jsxs(Box, { bg: "neutral.white", transition: "all 0.1s ease-in-out", position: "relative", _hover: {
             boxShadow: 'md',
-        }, children: [(0, jsx_runtime_1.jsx)(react_1.Input, { accept: "image/*", cursor: "pointer", id: "upload-image-btn", left: "0", minH: "5.8rem", name: "imageUpload", opacity: "0", onChange: onClick, position: "absolute", top: "-7", type: "file", disabled: disabled }), (0, jsx_runtime_1.jsxs)(react_1.Stack, { border: "1px", borderColor: "lightBlue.6", w: "4rem", h: "4rem", align: "center", justify: "center", spacing: "0", children: [(0, jsx_runtime_1.jsx)(components_1.Plus, { stroke: colors_1.colors.blue[3] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6rem", fontWeight: "bold", mt: "-2", children: (0, i18next_1.t)('groups.addImg') })] })] }));
+        }, children: [_jsx(Input, { accept: "image/*", cursor: "pointer", id: "upload-image-btn", left: "0", minH: "5.8rem", name: "imageUpload", opacity: "0", onChange: onClick, position: "absolute", top: "-7", type: "file", disabled: disabled }), _jsxs(Stack, { border: "1px", borderColor: "lightBlue.6", w: "4rem", h: "4rem", align: "center", justify: "center", spacing: "0", children: [_jsx(Plus, { stroke: colors.blue[3] }), _jsx(Text, { fontSize: "0.6rem", fontWeight: "bold", mt: "-2", children: t('groups.addImg') })] })] }));
 };
-exports.AddItemImage = AddItemImage;

package/dist/components/rooms/GroupCard.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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)
@@ -21,57 +9,44 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var utils_1 = require("../../utils");
-var hooks_1 = require("../../hooks");
-var helpers_1 = require("../../helpers");
-var storageUrl = process.env.STORAGE_URL;
-var GroupCard = function (_a) {
-    var items = _a.items, menuItems = _a.menuItems, onAddItem = _a.onAddItem, onAddImage = _a.onAddImage, onClickDelete = _a.onClickDelete, onClickDetails = _a.onClickDetails, title = _a.title, totalAmount = _a.totalAmount, disabled = _a.disabled, props = __rest(_a, ["items", "menuItems", "onAddItem", "onAddImage", "onClickDelete", "onClickDetails", "title", "totalAmount", "disabled"]);
-    var _b = (0, hooks_1.useGroupCard)({ items: items, onAddItem: onAddItem, title: title, totalAmount: totalAmount }), filteredResults = _b.filteredResults, handleAddItem = _b.handleAddItem, handleChange = _b.handleChange, isItemsEmpty = _b.isItemsEmpty, searchValue = _b.searchValue, totalAmountFormatted = _b.totalAmountFormatted;
-    return ((0, jsx_runtime_1.jsx)(components_1.TileTooltip, { label: title, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { backgroundColor: "lightBlue.1", boxShadow: "base", w: "100%", children: [(0, jsx_runtime_1.jsx)(components_1.GroupCardHeader, { menuItems: menuItems, title: title, totalAmount: totalAmountFormatted }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: items.length >= 10 ? 'space-between' : 'flex-end', pl: "base", my: "base", align: "center", gap: "base", children: [items.length >= 10 && ((0, jsx_runtime_1.jsx)(components_1.SearchInput, { value: searchValue, onChange: handleChange })), (0, jsx_runtime_1.jsx)(components_1.LeftButtonAnimated, { onClick: handleAddItem, label: (0, i18next_1.t)('addHomeItem.btnLabel'), disabled: disabled, id: "addingItems" })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { pb: "10", px: "base", children: [isItemsEmpty && (0, jsx_runtime_1.jsx)(components_1.AddItemCard, { onClick: handleAddItem }), !isItemsEmpty && ((0, jsx_runtime_1.jsx)(react_1.Wrap, { spacing: "base", children: filteredResults.map(function (_a) {
-                                var _b, _c, _d, _e;
-                                var _id = _a._id, title = _a.title, report = _a.report, images = _a.images, receipt = _a.receipt, metadata = _a.metadata, type = _a.type, subType = _a.subType, room = _a.room;
-                                var reportData = {
-                                    _id: _id,
-                                    report: report,
-                                    room: room,
-                                    subType: subType,
-                                    title: title,
-                                    type: type,
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Flex, Wrap } from '@chakra-ui/react';
+import { ItemCard, GroupCardHeader, LeftButtonAnimated, AddItemCard, SearchInput, TileTooltip, } from '..';
+import { handleMapMedia } from '../../utils';
+import { useGroupCard } from '../../hooks';
+import { receiptOrigins } from '../../helpers';
+const storageUrl = import.meta.env.VITE_STORAGE_URL;
+export const GroupCard = (_a) => {
+    var { items, menuItems, onAddItem, onAddImage, onClickDelete, onClickDetails, title, totalAmount, disabled } = _a, props = __rest(_a, ["items", "menuItems", "onAddItem", "onAddImage", "onClickDelete", "onClickDetails", "title", "totalAmount", "disabled"]);
+    const { filteredResults, handleAddItem, handleChange, isItemsEmpty, searchValue, totalAmountFormatted, } = useGroupCard({ items, onAddItem, title, totalAmount });
+    return (_jsx(TileTooltip, { label: title, children: _jsxs(Box, { backgroundColor: "lightBlue.1", boxShadow: "base", w: "100%", children: [_jsx(GroupCardHeader, { menuItems: menuItems, title: title, totalAmount: totalAmountFormatted }), _jsxs(Flex, { justify: items.length >= 10 ? 'space-between' : 'flex-end', pl: "base", my: "base", align: "center", gap: "base", children: [items.length >= 10 && (_jsx(SearchInput, { value: searchValue, onChange: handleChange })), _jsx(LeftButtonAnimated, { onClick: handleAddItem, label: t('addHomeItem.btnLabel'), disabled: disabled, id: "addingItems" })] }), _jsxs(Box, { pb: "10", px: "base", children: [isItemsEmpty && _jsx(AddItemCard, { onClick: handleAddItem }), !isItemsEmpty && (_jsx(Wrap, { spacing: "base", children: filteredResults.map(({ _id, title, report, images, receipt, metadata, type, subType, room, }) => {
+                                var _a, _b, _c, _d;
+                                const reportData = {
+                                    _id,
+                                    report,
+                                    room,
+                                    subType,
+                                    title,
+                                    type,
                                 };
-                                var brand = receipt
+                                const brand = receipt
                                     ? ''
-                                    : ((_b = report === null || report === void 0 ? void 0 : report.find(function (doc) { var _a; return (_a = doc === null || doc === void 0 ? void 0 : doc.name) === null || _a === void 0 ? void 0 : _a.includes('Brand'); })) === null || _b === void 0 ? void 0 : _b.value) || '';
-                                var hasImage = images.length > 0;
-                                var imageUrl = "".concat(storageUrl, "/").concat((_c = images[0]) === null || _c === void 0 ? void 0 : _c.bucketName, "/").concat((_d = images[0]) === null || _d === void 0 ? void 0 : _d.fileName, ".").concat((_e = images[0]) === null || _e === void 0 ? void 0 : _e.extension);
-                                var storeImage = (metadata === null || metadata === void 0 ? void 0 : metadata.receiptOrigin)
-                                    ? helpers_1.receiptOrigins[metadata === null || metadata === void 0 ? void 0 : metadata.receiptOrigin]
+                                    : ((_a = report === null || report === void 0 ? void 0 : report.find((doc) => { var _a; return (_a = doc === null || doc === void 0 ? void 0 : doc.name) === null || _a === void 0 ? void 0 : _a.includes('Brand'); })) === null || _a === void 0 ? void 0 : _a.value) || '';
+                                const hasImage = images.length > 0;
+                                const imageUrl = `${storageUrl}/${(_b = images[0]) === null || _b === void 0 ? void 0 : _b.bucketName}/${(_c = images[0]) === null || _c === void 0 ? void 0 : _c.fileName}.${(_d = images[0]) === null || _d === void 0 ? void 0 : _d.extension}`;
+                                const storeImage = (metadata === null || metadata === void 0 ? void 0 : metadata.receiptOrigin)
+                                    ? receiptOrigins[metadata === null || metadata === void 0 ? void 0 : metadata.receiptOrigin]
                                     : '';
-                                var handleImage = function (files) {
+                                const handleImage = (files) => {
                                     if (files) {
-                                        var fileMapped = (0, utils_1.handleMapMedia)({
-                                            files: __spreadArray([], files, true),
-                                            _id: _id,
+                                        const fileMapped = handleMapMedia({
+                                            files: [...files],
+                                            _id,
                                         });
                                         onAddImage(fileMapped);
                                     }
                                 };
-                                return ((0, jsx_runtime_1.jsx)(components_1.ItemCard, __assign({ brandLabel: brand, imageUrl: hasImage ? imageUrl : storeImage, onAddImage: handleImage, onClickDelete: onClickDelete, onClickDetails: onClickDetails }, props, reportData), _id));
+                                return (_jsx(ItemCard, Object.assign({ brandLabel: brand, imageUrl: hasImage ? imageUrl : storeImage, onAddImage: handleImage, onClickDelete: onClickDelete, onClickDetails: onClickDetails }, props, reportData), _id));
                             }) }))] })] }) }));
 };
-exports.GroupCard = GroupCard;

package/dist/components/rooms/GroupCardHeader.js

@@ -1,19 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupCardHeader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var images_1 = require("../../assets/images");
-var helpers_1 = require("../../helpers");
-var hooks_1 = require("../../hooks");
-var GroupCardHeader = function (_a) {
-    var title = _a.title, totalAmount = _a.totalAmount, menuItems = _a.menuItems;
-    var _b = (0, hooks_1.useGroupCardHeader)({
-        menuItems: menuItems,
-        title: title,
-    }), haveNoMenuItems = _b.haveNoMenuItems, iconAlt = _b.iconAlt;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { justifyContent: "space-between", bg: "neutral.white", align: "center", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "base", id: "organizeByGroup", bg: "neutral.white", p: "4", children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: helpers_1.GroupIcons[title] || images_1.Group, alt: iconAlt, w: "1rem", h: "auto" }), (0, jsx_runtime_1.jsx)(react_1.Text, { noOfLines: 1, children: title })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "base", p: "4", id: "trackGroupValue", bg: "neutral.white", children: [(0, jsx_runtime_1.jsx)(react_1.Show, { breakpoint: "(min-width: 600px)", children: (0, jsx_runtime_1.jsx)(react_1.Text, { textColor: "gray.4", fontWeight: "semibold", fontSize: "xs", mr: "3", children: (0, i18next_1.t)('groups.total') }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { textColor: "blue.8", fontWeight: "semibold", fontSize: ['md', 'lg'], children: totalAmount }), menuItems && menuItems.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Show, { breakpoint: "(min-width: 600px)", children: (0, jsx_runtime_1.jsx)(react_1.Divider, { orientation: "vertical", h: "6" }) }), (0, jsx_runtime_1.jsx)(components_1.IconMenu, { icon: (0, jsx_runtime_1.jsx)(components_1.MoreHorizontal, { size: 38 }), menuItems: menuItems, disabled: haveNoMenuItems })] }))] })] }));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Divider, Flex, Image, Show, Text } from '@chakra-ui/react';
+import { IconMenu, MoreHorizontal } from '..';
+import { Group } from '../../assets/images';
+import { GroupIcons } from '../../helpers';
+import { useGroupCardHeader } from '../../hooks';
+export const GroupCardHeader = ({ title, totalAmount, menuItems, }) => {
+    const { haveNoMenuItems, iconAlt } = useGroupCardHeader({
+        menuItems,
+        title,
+    });
+    return (_jsxs(Flex, { justifyContent: "space-between", bg: "neutral.white", align: "center", children: [_jsxs(Flex, { gap: "base", id: "organizeByGroup", bg: "neutral.white", p: "4", children: [_jsx(Image, { src: GroupIcons[title] || Group, alt: iconAlt, w: "1rem", h: "auto" }), _jsx(Text, { noOfLines: 1, children: title })] }), _jsxs(Flex, { align: "center", gap: "base", p: "4", id: "trackGroupValue", bg: "neutral.white", children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Text, { textColor: "gray.4", fontWeight: "semibold", fontSize: "xs", mr: "3", children: t('groups.total') }) }), _jsx(Text, { textColor: "blue.8", fontWeight: "semibold", fontSize: ['md', 'lg'], children: totalAmount }), menuItems && menuItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Divider, { orientation: "vertical", h: "6" }) }), _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 38 }), menuItems: menuItems, disabled: haveNoMenuItems })] }))] })] }));
 };
-exports.GroupCardHeader = GroupCardHeader;

package/dist/components/rooms/GroupContent.js

@@ -1,15 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupContent = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var images_1 = require("../../assets/images");
-var GroupContent = function (_a) {
-    var groupList = _a.groupList, onClick = _a.onClick, onClose = _a.onClose;
-    return ((0, jsx_runtime_1.jsxs)(react_1.DrawerContent, { bg: "lightBlue.2", children: [(0, jsx_runtime_1.jsxs)(react_1.DrawerHeader, { p: "0", children: [(0, jsx_runtime_1.jsx)(components_1.PanelHeader, { handleCloseButton: onClose, icon: images_1.Groups, title: (0, i18next_1.t)('addRoomGroup.title') }), (0, jsx_runtime_1.jsx)(react_1.Box, { p: "base", bg: "lightBlue.1", children: (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", textColor: "gray.4", fontWeight: "regular", lineHeight: "1.1", children: (0, i18next_1.t)('addRoomGroup.subtitle') }) })] }), (0, jsx_runtime_1.jsx)(react_1.DrawerBody, { p: "base", children: groupList.map(function (group, idx) {
-                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [idx !== 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { borderTop: "1px", borderColor: "lightBlue.4" })), (0, jsx_runtime_1.jsx)(components_1.GroupOptionCard, { group: group, onClick: onClick })] }, group._id));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { DrawerBody, DrawerContent, DrawerHeader, Box, Text, } from '@chakra-ui/react';
+import { GroupOptionCard, PanelHeader } from '..';
+import { Groups } from '../../assets/images';
+export const GroupContent = ({ groupList, onClick, onClose, }) => {
+    return (_jsxs(DrawerContent, { bg: "lightBlue.2", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: onClose, icon: Groups, title: t('addRoomGroup.title') }), _jsx(Box, { p: "base", bg: "lightBlue.1", children: _jsx(Text, { variant: "info", textColor: "gray.4", fontWeight: "regular", lineHeight: "1.1", children: t('addRoomGroup.subtitle') }) })] }), _jsx(DrawerBody, { p: "base", children: groupList.map((group, idx) => {
+                    return (_jsxs(Box, { children: [idx !== 0 && (_jsx(Box, { borderTop: "1px", borderColor: "lightBlue.4" })), _jsx(GroupOptionCard, { group: group, onClick: onClick })] }, group._id));
                 }) })] }));
 };
-exports.GroupContent = GroupContent;

package/dist/components/rooms/GroupOptionCard.js

@@ -1,21 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupOptionCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var helpers_1 = require("../../helpers");
-var utils_1 = require("../../utils");
-var images_1 = require("../../assets/images");
-var colors_1 = require("../../theme/colors");
-var GroupOptionCard = function (_a) {
-    var group = _a.group, onClick = _a.onClick;
-    var active = group.active, name = group.name;
-    var imgAlt = (0, utils_1.getImageAltText)(images_1.Group);
-    var handleClick = function () { return onClick(group); };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", bg: "neutral.white", p: "base", w: "full", onClick: handleClick, disabled: !active, transition: "all 0.1s ease-in-out", _hover: { backgroundColor: 'lightGreen.3' }, _disabled: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text, Image } from '@chakra-ui/react';
+import { Plus } from '..';
+import { GroupIcons } from '../../helpers';
+import { getImageAltText } from '../../utils';
+import { Group } from '../../assets/images';
+import { colors } from '../../theme/colors';
+export const GroupOptionCard = ({ group, onClick }) => {
+    const { active, name } = group;
+    const imgAlt = getImageAltText(Group);
+    const handleClick = () => onClick(group);
+    return (_jsx(Box, { as: "button", bg: "neutral.white", p: "base", w: "full", onClick: handleClick, disabled: !active, transition: "all 0.1s ease-in-out", _hover: { backgroundColor: 'lightGreen.3' }, _disabled: {
             filter: 'opacity(0.6)',
             pointerEvents: 'none',
-        }, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "base", align: "center", children: [(0, jsx_runtime_1.jsx)(components_1.Plus, { stroke: active ? colors_1.colors.blue[1] : 'transparent', size: 26 }), (0, jsx_runtime_1.jsx)(react_1.Image, { src: helpers_1.GroupIcons[name] || images_1.Group, alt: imgAlt, boxSize: "1.5rem", objectFit: "scale-down" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", children: (0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "left", variant: "caption", noOfLines: 1, overflow: "hidden", children: name }) })] }) }));
+        }, children: _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(Plus, { stroke: active ? colors.blue[1] : 'transparent', size: 26 }), _jsx(Image, { src: GroupIcons[name] || Group, alt: imgAlt, boxSize: "1.5rem", objectFit: "scale-down" }), _jsx(Box, { flex: "1", children: _jsx(Text, { textAlign: "left", variant: "caption", noOfLines: 1, overflow: "hidden", children: name }) })] }) }));
 };
-exports.GroupOptionCard = GroupOptionCard;

package/dist/components/rooms/GroupsContainer.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupsContainer = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var GroupsContainer = function (_a) {
-    var children = _a.children;
-    return ((0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: "10", bgGradient: "linear(to-b, lightBlue.6, transparent)", py: "2", px: "base", children: children }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from '@chakra-ui/react';
+export const GroupsContainer = ({ children, }) => {
+    return (_jsx(Stack, { spacing: "10", bgGradient: "linear(to-b, lightBlue.6, transparent)", py: "2", px: "base", children: children }));
 };
-exports.GroupsContainer = GroupsContainer;

package/dist/components/rooms/GroupsHeader.js

@@ -1,14 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupsHeader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var GroupsHeader = function (_a) {
-    var groupList = _a.groupList, onClick = _a.onClick, _b = _a.showingTour, showingTour = _b === void 0 ? false : _b, disabled = _a.disabled;
-    var _c = (0, hooks_1.useGroupsHeader)(onClick), handleClick = _c.handleClick, isOpen = _c.isOpen, onOpen = _c.onOpen, onClose = _c.onClose;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { w: "10rem", ml: "auto", children: [(0, jsx_runtime_1.jsx)(components_1.LeftButton, { onClick: onOpen, height: "2rem", label: (0, i18next_1.t)('addRoomGroup.addBtn'), position: "absolute", right: "0", disabled: disabled, id: "addItemToGroup", w: "fit-content" }), (0, jsx_runtime_1.jsx)(components_1.RightPanel, { children: (0, jsx_runtime_1.jsx)(components_1.GroupContent, { groupList: groupList, onClick: handleClick, onClose: onClose }), isOpen: showingTour || isOpen, onClose: onClose, size: "xs", overlay: !showingTour })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box } from '@chakra-ui/react';
+import { GroupContent, LeftButton, RightPanel } from '..';
+import { useGroupsHeader } from '../../hooks';
+export const GroupsHeader = ({ groupList, onClick, showingTour = false, disabled, }) => {
+    const { handleClick, isOpen, onOpen, onClose } = useGroupsHeader(onClick);
+    return (_jsxs(Box, { w: "10rem", ml: "auto", children: [_jsx(LeftButton, { onClick: onOpen, height: "2rem", label: t('addRoomGroup.addBtn'), position: "absolute", right: "0", disabled: disabled, id: "addItemToGroup", w: "fit-content" }), _jsx(RightPanel, { children: _jsx(GroupContent, { groupList: groupList, onClick: handleClick, onClose: onClose }), isOpen: showingTour || isOpen, onClose: onClose, size: "xs", overlay: !showingTour })] }));
 };
-exports.GroupsHeader = GroupsHeader;

package/dist/components/rooms/ItemCard.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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)
@@ -21,43 +9,40 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var utils_1 = require("../../utils");
-var react_2 = require("react");
-var ItemCard = function (_a) {
-    var brandLabel = _a.brandLabel, imageUrl = _a.imageUrl, onAddImage = _a.onAddImage, onClickDelete = _a.onClickDelete, onClickDetails = _a.onClickDetails, onMove = _a.onMove, _b = _a._id, _id = _b === void 0 ? '' : _b, title = _a.title, subType = _a.subType, room = _a.room, report = _a.report, type = _a.type, onSave = _a.onSave, props = __rest(_a, ["brandLabel", "imageUrl", "onAddImage", "onClickDelete", "onClickDetails", "onMove", "_id", "title", "subType", "room", "report", "type", "onSave"]);
-    var alt = (0, utils_1.getImageAltText)(imageUrl);
-    var handleAddImage = function (event) {
-        var files = event.target.files;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Stack, Image, Text } from '@chakra-ui/react';
+import { AddItemImage, MoreHorizontal, MoveModal, IconMenuWithMove, } from '..';
+import { getImageAltText } from '../../utils';
+import { useState } from 'react';
+export const ItemCard = (_a) => {
+    var { brandLabel, imageUrl, onAddImage, onClickDelete, onClickDetails, onMove, _id = '', title, subType, room, report, type, onSave } = _a, props = __rest(_a, ["brandLabel", "imageUrl", "onAddImage", "onClickDelete", "onClickDetails", "onMove", "_id", "title", "subType", "room", "report", "type", "onSave"]);
+    const alt = getImageAltText(imageUrl);
+    const handleAddImage = (event) => {
+        const files = event.target.files;
         files && onAddImage(files);
     };
-    var _c = (0, react_2.useState)(false), showMoveModal = _c[0], setShowMoveModal = _c[1];
-    var reportData = {
-        _id: _id,
-        title: title,
-        subType: subType,
-        room: room,
-        report: report,
-        type: type,
+    const [showMoveModal, setShowMoveModal] = useState(false);
+    const reportData = {
+        _id,
+        title,
+        subType,
+        room,
+        report,
+        type,
     };
-    var handleMove = function (data) {
+    const handleMove = (data) => {
         onMove(data);
         setShowMoveModal(true);
     };
-    var handleSave = function (form) {
+    const handleSave = (form) => {
         onSave(form);
         setShowMoveModal(false);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: "neutral.white", boxShadow: "md", w: "fit-content", position: "relative", _hover: {
+    return (_jsxs(Box, { bg: "neutral.white", boxShadow: "md", w: "fit-content", position: "relative", _hover: {
             boxShadow: 'xl',
-        }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: "right", w: "full", pr: "2", children: (0, jsx_runtime_1.jsx)(components_1.IconMenuWithMove, { icon: (0, jsx_runtime_1.jsx)(components_1.MoreHorizontal, { size: 26 }), itemForm: _id, menuItems: [
-                        { label: (0, i18next_1.t)('groups.menu.details'), handleClick: onClickDetails },
-                        { label: (0, i18next_1.t)('groups.menu.delete'), handleClick: onClickDelete },
-                    ], onMove: function () { return handleMove(reportData); } }) }), (0, jsx_runtime_1.jsxs)(react_1.Stack, { px: "base", align: "center", w: "8.75rem", h: "8.75rem", cursor: "pointer", pos: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { onClick: function () { return onClickDetails(_id); }, pos: "absolute", top: "0", right: "0", bottom: "0", left: "0" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", fontWeight: "medium", noOfLines: 1, textOverflow: "ellipsis", children: title === null || title === void 0 ? void 0 : title.toUpperCase() }), imageUrl ? ((0, jsx_runtime_1.jsx)(react_1.Image, { src: imageUrl, alt: alt, boxSize: "4.2rem", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(components_1.AddItemImage, { onClick: handleAddImage })), brandLabel && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", noOfLines: 1, textOverflow: "ellipsis", fontSize: "xs", children: brandLabel }))] }), showMoveModal && ((0, jsx_runtime_1.jsx)(components_1.MoveModal, __assign({}, props, { onSave: handleSave, onClose: function () { return setShowMoveModal(false); }, top: "100", left: "260" })))] }));
+        }, children: [_jsx(Box, { textAlign: "right", w: "full", pr: "2", children: _jsx(IconMenuWithMove, { icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: _id, menuItems: [
+                        { label: t('groups.menu.details'), handleClick: onClickDetails },
+                        { label: t('groups.menu.delete'), handleClick: onClickDelete },
+                    ], onMove: () => handleMove(reportData) }) }), _jsxs(Stack, { px: "base", align: "center", w: "8.75rem", h: "8.75rem", cursor: "pointer", pos: "relative", children: [_jsx(Box, { onClick: () => onClickDetails(_id), pos: "absolute", top: "0", right: "0", bottom: "0", left: "0" }), _jsx(Text, { fontSize: "xs", fontWeight: "medium", noOfLines: 1, textOverflow: "ellipsis", children: title === null || title === void 0 ? void 0 : title.toUpperCase() }), imageUrl ? (_jsx(Image, { src: imageUrl, alt: alt, boxSize: "4.2rem", objectFit: "cover" })) : (_jsx(AddItemImage, { onClick: handleAddImage })), brandLabel && (_jsx(Text, { textAlign: "center", noOfLines: 1, textOverflow: "ellipsis", fontSize: "xs", children: brandLabel }))] }), showMoveModal && (_jsx(MoveModal, Object.assign({}, props, { onSave: handleSave, onClose: () => setShowMoveModal(false), top: "100", left: "260" })))] }));
 };
-exports.ItemCard = ItemCard;

package/dist/components/rooms/NewRoomPanel.js

@@ -1,17 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewRoomPanel = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var colors_1 = require("../../theme/colors");
-var NewRoomPanel = function (_a) {
-    var _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, rooms = _a.rooms, handleClick = _a.handleClick, handleClose = _a.handleClose;
-    var _c = (0, hooks_1.useNewRoomPanel)({ rooms: rooms, handleClick: handleClick, handleClose: handleClose }), handleClickAndClose = _c.handleClickAndClose, handleChange = _c.handleChange, filteredResults = _c.filteredResults, searchValue = _c.searchValue;
-    return ((0, jsx_runtime_1.jsx)(react_1.DrawerContent, { children: (0, jsx_runtime_1.jsx)(react_1.DrawerBody, { p: "0", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: "16rem", transition: "all 0.2s ease-in-out", bg: "lightBlue.4", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { h: "container.masthead", bg: "blue.8", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "full", justify: "space-between", alignItems: "center", px: "5", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { color: "neutral.white", textTransform: "uppercase", noOfLines: 1, children: (0, i18next_1.t)('addRoom.addBtn') }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { variant: "icon", w: "fit-content", "aria-label": (0, i18next_1.t)('ariaLabels.close'), onClick: handleClose, children: (0, jsx_runtime_1.jsx)(components_1.Close, { size: 28, stroke: colors_1.colors.neutral.white }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { p: "base", bg: "neutral.white", children: (0, jsx_runtime_1.jsx)(components_1.SearchInput, { onChange: handleChange, value: searchValue, maxW: "full" }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { children: filteredResults.map(function (room, i) {
-                            return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { bg: "neutral.white", children: (0, jsx_runtime_1.jsx)(react_1.Box, { h: "1px", bg: "lightBlue.4", marginX: "base" }) }), (0, jsx_runtime_1.jsx)(components_1.RoomCard, { handleClick: handleClickAndClose, draggable: false, handleDragStart: function (_) { return null; }, handleDrop: function (_) { return null; }, room: room, index: i, isOpen: isOpen }), i === filteredResults.length - 1 && ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: "neutral.white", children: (0, jsx_runtime_1.jsx)(react_1.Box, { h: "1px", bg: "lightBlue.4", marginX: "base" }) }))] }, room.type));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Text, Flex, Center, DrawerContent, DrawerBody, IconButton, } from '@chakra-ui/react';
+import { Close, RoomCard, SearchInput } from '..';
+import { useNewRoomPanel } from '../../hooks';
+import { colors } from '../../theme/colors';
+export const NewRoomPanel = ({ isOpen = true, rooms, handleClick, handleClose, }) => {
+    const { handleClickAndClose, handleChange, filteredResults, searchValue } = useNewRoomPanel({ rooms, handleClick, handleClose });
+    return (_jsx(DrawerContent, { children: _jsx(DrawerBody, { p: "0", children: _jsxs(Box, { minW: "16rem", transition: "all 0.2s ease-in-out", bg: "lightBlue.4", children: [_jsx(Center, { h: "container.masthead", bg: "blue.8", children: _jsxs(Flex, { w: "full", justify: "space-between", alignItems: "center", px: "5", children: [_jsx(Text, { color: "neutral.white", textTransform: "uppercase", noOfLines: 1, children: t('addRoom.addBtn') }), _jsx(IconButton, { variant: "icon", w: "fit-content", "aria-label": t('ariaLabels.close'), onClick: handleClose, children: _jsx(Close, { size: 28, stroke: colors.neutral.white }) })] }) }), _jsx(Box, { p: "base", bg: "neutral.white", children: _jsx(SearchInput, { onChange: handleChange, value: searchValue, maxW: "full" }) }), _jsx(Box, { children: filteredResults.map((room, i) => {
+                            return (_jsxs(Box, { children: [_jsx(Box, { bg: "neutral.white", children: _jsx(Box, { h: "1px", bg: "lightBlue.4", marginX: "base" }) }), _jsx(RoomCard, { handleClick: handleClickAndClose, draggable: false, handleDragStart: (_) => null, handleDrop: (_) => null, room: room, index: i, isOpen: isOpen }), i === filteredResults.length - 1 && (_jsx(Box, { bg: "neutral.white", children: _jsx(Box, { h: "1px", bg: "lightBlue.4", marginX: "base" }) }))] }, room.type));
                         }) })] }) }) }));
 };
-exports.NewRoomPanel = NewRoomPanel;