@homefile/components-v2 2.47.5 → 2.48.1

package/dist/components/buttons/DisplayOptionsButtons.d.ts

@@ -1,2 +1,2 @@
 import { DisplayOptionsButtonsI } from '../../interfaces';
-export declare const DisplayOptionsButtons: ({ displays, initialDisplay, onDisplayClick, }: DisplayOptionsButtonsI) => import("react/jsx-runtime").JSX.Element;
+export declare const DisplayOptionsButtons: ({ displays, iconSize, initialDisplay, onDisplayClick, }: DisplayOptionsButtonsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/DisplayOptionsButtons.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Flex, Button } from '@chakra-ui/react';
 import { colors } from '../../theme/colors';
 import { DisplayItem, DisplayList, DisplayGrid } from '../../components';
-export const DisplayOptionsButtons = ({ displays = [], initialDisplay, onDisplayClick, }) => {
+export const DisplayOptionsButtons = ({ displays = [], iconSize = 5, initialDisplay, onDisplayClick, }) => {
     const types = displays;
     const [display, setDisplay] = useState(initialDisplay);
     const handleDisplayClick = (type) => {
@@ -13,5 +13,5 @@ export const DisplayOptionsButtons = ({ displays = [], initialDisplay, onDisplay
     const getCurrentDisplayColor = (type) => {
         return display === type ? colors.blue[3] : colors.blue[1];
     };
-    return (_jsx(Flex, { gap: "base", children: types.map((type) => (_jsxs(Button, { variant: "displayIcon", onClick: () => handleDisplayClick(type), children: [type === 'list' && (_jsx(DisplayList, { stroke: getCurrentDisplayColor(type) })), type === 'item' && (_jsx(DisplayItem, { stroke: getCurrentDisplayColor(type) })), type === 'grid' && (_jsx(DisplayGrid, { stroke: getCurrentDisplayColor(type) }))] }, type))) }));
+    return (_jsx(Flex, { gap: "base", children: types.map((type) => (_jsxs(Button, { variant: "displayIcon", onClick: () => handleDisplayClick(type), minW: "fit-content", h: "fit-content", p: "0", children: [type === 'list' && (_jsx(DisplayList, { boxSize: iconSize, stroke: getCurrentDisplayColor(type) })), type === 'item' && (_jsx(DisplayItem, { boxSize: iconSize, stroke: getCurrentDisplayColor(type) })), type === 'grid' && (_jsx(DisplayGrid, { boxSize: iconSize, stroke: getCurrentDisplayColor(type) }))] }, type))) }));
 };

package/dist/components/icons/DisplayGrid.d.ts

@@ -1 +1,5 @@
-export declare const DisplayGrid: ({ stroke, }: React.SVGProps<SVGGElement>) => import("react/jsx-runtime").JSX.Element;
+type DisplayIconProps = React.SVGProps<SVGGElement> & {
+    boxSize?: number | string;
+};
+export declare const DisplayGrid: ({ boxSize, stroke, ...props }: DisplayIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/DisplayGrid.js

@@ -1,6 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@chakra-ui/react';
 import { colors } from '../../theme/colors';
-export const DisplayGrid = ({ stroke = colors.blue[3], }) => {
-    return (_jsx(Icon, { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19.5 19.5", children: _jsxs("g", { fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", "data-name": "Group 14495", children: [_jsx("path", { d: "M.75.75h7.321v7.321H.75Z", "data-name": "Path 10064" }), _jsx("path", { d: "M11.429.75h7.321v7.321h-7.321Z", "data-name": "Path 10065" }), _jsx("path", { d: "M11.429 11.428h7.321v7.321h-7.321Z", "data-name": "Path 10066" }), _jsx("path", { d: "M.75 11.428h7.321v7.321H.75Z", "data-name": "Path 10067" })] }) }) }));
+export const DisplayGrid = (_a) => {
+    var { boxSize, stroke = colors.blue[3] } = _a, props = __rest(_a, ["boxSize", "stroke"]);
+    return (_jsx(Icon, { viewBox: "0 0 19.5 19.5", boxSize: boxSize, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19.5 19.5", children: _jsxs("g", Object.assign({ fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", "data-name": "Group 14495" }, props, { children: [_jsx("path", { d: "M.75.75h7.321v7.321H.75Z", "data-name": "Path 10064" }), _jsx("path", { d: "M11.429.75h7.321v7.321h-7.321Z", "data-name": "Path 10065" }), _jsx("path", { d: "M11.429 11.428h7.321v7.321h-7.321Z", "data-name": "Path 10066" }), _jsx("path", { d: "M.75 11.428h7.321v7.321H.75Z", "data-name": "Path 10067" })] })) }) }));
 };

package/dist/components/icons/DisplayItem.d.ts

@@ -1 +1,5 @@
-export declare const DisplayItem: ({ stroke, }: React.SVGProps<SVGGElement>) => import("react/jsx-runtime").JSX.Element;
+type DisplayIconProps = React.SVGProps<SVGGElement> & {
+    boxSize?: number | string;
+};
+export declare const DisplayItem: ({ boxSize, stroke, ...props }: DisplayIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/DisplayItem.js

@@ -1,6 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@chakra-ui/react';
 import { colors } from '../../theme/colors';
-export const DisplayItem = ({ stroke = colors.blue[3], }) => {
-    return (_jsx(Icon, { viewBox: "0 0 200 200", color: "red.500", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19.79 17.374", children: _jsxs("g", { stroke: stroke, "data-name": "Group 14548", children: [_jsx("path", { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M.75.75h18.29v11.438H.75Z", "data-name": "Path 10082" }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16845", children: [_jsx("path", { stroke: "none", d: "M.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M1.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16846", children: [_jsx("path", { stroke: "none", d: "M5.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M6.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16847", children: [_jsx("path", { stroke: "none", d: "M10.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M11.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16848", children: [_jsx("path", { stroke: "none", d: "M15.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M16.333 14.874h2v2h-2z" })] })] }) }) }));
+export const DisplayItem = (_a) => {
+    var { boxSize, stroke = colors.blue[3] } = _a, props = __rest(_a, ["boxSize", "stroke"]);
+    return (_jsx(Icon, { viewBox: "0 0 19.79 17.374", boxSize: boxSize, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 19.79 17.374", children: _jsxs("g", Object.assign({ stroke: stroke, "data-name": "Group 14548" }, props, { children: [_jsx("path", { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M.75.75h18.29v11.438H.75Z", "data-name": "Path 10082" }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16845", children: [_jsx("path", { stroke: "none", d: "M.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M1.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16846", children: [_jsx("path", { stroke: "none", d: "M5.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M6.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16847", children: [_jsx("path", { stroke: "none", d: "M10.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M11.333 14.874h2v2h-2z" })] }), _jsxs("g", { fill: stroke, "data-name": "Rectangle 16848", children: [_jsx("path", { stroke: "none", d: "M15.833 14.374h3v3h-3z" }), _jsx("path", { fill: "none", d: "M16.333 14.874h2v2h-2z" })] })] })) }) }));
 };

package/dist/components/icons/DisplayList.d.ts

@@ -1 +1,5 @@
-export declare const DisplayList: ({ stroke, }: React.SVGProps<SVGGElement>) => import("react/jsx-runtime").JSX.Element;
+type DisplayIconProps = React.SVGProps<SVGGElement> & {
+    boxSize?: number | string;
+};
+export declare const DisplayList: ({ boxSize, stroke, ...props }: DisplayIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/DisplayList.js

@@ -1,6 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@chakra-ui/react';
 import { colors } from '../../theme/colors';
-export const DisplayList = ({ stroke = colors.blue[3], }) => {
-    return (_jsx(Icon, { viewBox: "0 0 200 200", color: "red.500", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 18 14", children: _jsxs("g", { fill: stroke, "data-name": "Group 14455", children: [_jsx("path", { d: "M5 0h13v2H5z", "data-name": "Rectangle 14122" }), _jsx("path", { d: "M5 6h13v2H5z", "data-name": "Rectangle 14123" }), _jsx("path", { d: "M5 12h13v2H5z", "data-name": "Rectangle 14124" }), _jsx("path", { d: "M0 0h3v2H0z", "data-name": "Rectangle 14122" }), _jsx("path", { d: "M0 6h3v2H0z", "data-name": "Rectangle 14123" }), _jsx("path", { d: "M0 12h3v2H0z", "data-name": "Rectangle 14124" })] }) }) }));
+export const DisplayList = (_a) => {
+    var { boxSize, stroke = colors.blue[3] } = _a, props = __rest(_a, ["boxSize", "stroke"]);
+    return (_jsx(Icon, { viewBox: "0 0 18 14", boxSize: boxSize, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 18 14", children: _jsxs("g", Object.assign({ fill: stroke, "data-name": "Group 14455" }, props, { children: [_jsx("path", { d: "M5 0h13v2H5z", "data-name": "Rectangle 14122" }), _jsx("path", { d: "M5 6h13v2H5z", "data-name": "Rectangle 14123" }), _jsx("path", { d: "M5 12h13v2H5z", "data-name": "Rectangle 14124" }), _jsx("path", { d: "M0 0h3v2H0z", "data-name": "Rectangle 14122" }), _jsx("path", { d: "M0 6h3v2H0z", "data-name": "Rectangle 14123" }), _jsx("path", { d: "M0 12h3v2H0z", "data-name": "Rectangle 14124" })] })) }) }));
 };

package/dist/components/icons/TicketBookmark.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from '@chakra-ui/react';
+export declare const TicketBookmark: ({ stroke, ...props }: IconProps & {
+    stroke?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/TicketBookmark.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '@chakra-ui/react';
+import { colors } from '../../theme/colors';
+export const TicketBookmark = (_a) => {
+    var { stroke = colors.blue[2] } = _a, props = __rest(_a, ["stroke"]);
+    return (_jsx(Icon, Object.assign({ viewBox: "0 0 24 32" }, props, { children: _jsx("path", { d: "M6 3.5h12A1.5 1.5 0 0 1 19.5 5v22L12 22.385 4.5 27V5A1.5 1.5 0 0 1 6 3.5Z", fill: "none", stroke: stroke, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5" }) })));
+};

package/dist/components/icons/index.d.ts

@@ -28,6 +28,7 @@ export * from './Plus';
 export * from './SearchIcon';
 export * from './ShareIcon';
 export * from './Star';
+export * from './TicketBookmark';
 export * from './TikTok';
 export * from './Trash';
 export * from './Twitter';

package/dist/components/icons/index.js

@@ -28,6 +28,7 @@ export * from './Plus';
 export * from './SearchIcon';
 export * from './ShareIcon';
 export * from './Star';
+export * from './TicketBookmark';
 export * from './TikTok';
 export * from './Trash';
 export * from './Twitter';

package/dist/components/partner/index.d.ts

@@ -5,6 +5,7 @@ export * from './catalog';
 export * from './formTile';
 export * from './panel';
 export * from './popup';
+export * from './serviceTickets';
 export * from './Fader';
 export * from './HeaderPartnerLogo';
 export * from './PartnerAddButton';

package/dist/components/partner/index.js

@@ -5,6 +5,7 @@ export * from './catalog';
 export * from './formTile';
 export * from './panel';
 export * from './popup';
+export * from './serviceTickets';
 export * from './Fader';
 export * from './HeaderPartnerLogo';
 export * from './PartnerAddButton';

package/dist/components/partner/serviceTickets/PartnerServiceTicketCard.d.ts

@@ -0,0 +1,2 @@
+import { PartnerServiceTicketCardI } from '../../../interfaces';
+export declare const PartnerServiceTicketCard: ({ customerName, display, description, footerActionLabel, headerLabel, infoBackground, meta, onFooterActionClick, }: PartnerServiceTicketCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/partner/serviceTickets/PartnerServiceTicketCard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Container, Flex, Grid, IconButton, Stack, Text, } from '@chakra-ui/react';
+import { TicketBookmark } from '../../../components';
+export const PartnerServiceTicketCard = ({ customerName, display = 'grid', description, footerActionLabel, headerLabel, infoBackground = '#e6ddf1', meta, onFooterActionClick, }) => {
+    const isListDisplay = display === 'list';
+    const dividerColor = 'lightBlue.2';
+    const cardWidth = isListDisplay ? '100%' : '180px';
+    const renderMeta = () => (_jsx(Box, { bg: infoBackground, p: "base", minW: { base: '100%', md: '220px' }, children: meta.map(({ label, value }) => (_jsxs(Grid, { templateColumns: "40% 60%", gap: "0", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "xxs", textTransform: "uppercase", lineHeight: "1.4", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "xxs", fontWeight: "bold", textTransform: "uppercase", lineHeight: "1.4", children: value })] }, label))) }));
+    const renderBody = () => (_jsxs(Stack, { spacing: "1", p: "base", borderBottom: "1px solid", borderColor: dividerColor, flex: "1", justify: "center", children: [_jsx(Text, { textTransform: "uppercase", fontWeight: "medium", children: customerName }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1.2", children: description })] }));
+    if (isListDisplay) {
+        return (_jsx(Container, { variant: "launchpad", w: cardWidth, maxW: "none", mx: "0", overflow: "hidden", bg: "neutral.white", children: _jsxs(Flex, { direction: { base: 'column', md: 'row' }, align: "stretch", children: [_jsx(Flex, { p: "2", align: "center", minW: { base: '100%', md: '130px' }, borderBottomWidth: { base: '1px', md: '0' }, borderBottomStyle: "solid", borderRightWidth: { base: '0', md: '1px' }, borderRightStyle: "solid", borderBottomColor: dividerColor, borderRightColor: dividerColor, children: _jsx(Text, { fontSize: "xs", fontWeight: "medium", textTransform: "uppercase", children: headerLabel }) }), renderMeta(), _jsxs(Stack, { spacing: "1", p: "base", flex: "1", justify: "center", minW: "0", children: [_jsx(Text, { textTransform: "uppercase", fontWeight: "medium", children: customerName }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1.2", children: description })] }), _jsx(Flex, { p: "base", align: "center", justify: "center", borderTopWidth: { base: '1px', md: '0' }, borderTopStyle: "solid", borderLeftWidth: { base: '0', md: '1px' }, borderLeftStyle: "solid", borderTopColor: dividerColor, borderLeftColor: dividerColor, minW: { base: '100%', md: '64px' }, children: _jsx(IconButton, { "aria-label": footerActionLabel !== null && footerActionLabel !== void 0 ? footerActionLabel : 'Save ticket', variant: "icon", width: "fit-content", onClick: onFooterActionClick, children: _jsx(TicketBookmark, { boxSize: "5" }) }) })] }) }));
+    }
+    return (_jsxs(Container, { variant: "launchpad", w: cardWidth, maxW: "none", mx: "0", overflow: "hidden", bg: "neutral.white", children: [_jsx(Box, { p: "2", children: _jsx(Text, { fontSize: "xs", fontWeight: "medium", textTransform: "uppercase", children: headerLabel }) }), renderMeta(), renderBody(), _jsx(Flex, { h: "40px", p: "base", align: "center", justify: "space-between", children: _jsx(IconButton, { "aria-label": footerActionLabel !== null && footerActionLabel !== void 0 ? footerActionLabel : 'Save ticket', variant: "icon", width: "fit-content", onClick: onFooterActionClick, children: _jsx(TicketBookmark, { boxSize: "5" }) }) })] }));
+};

package/dist/components/partner/serviceTickets/PartnerServiceTicketsToolbar.d.ts

@@ -0,0 +1,2 @@
+import { PartnerServiceTicketsToolbarI } from '../../../interfaces';
+export declare const PartnerServiceTicketsToolbar: ({ ageItems, initialAge, initialDisplay, initialPriority, initialStatus, newTicketLabel, onAgeChange, onDisplayChange, onNewTicketClick, onPriorityChange, onStatusChange, priorityItems, showNewTicketButton, statusItems, }: PartnerServiceTicketsToolbarI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/partner/serviceTickets/PartnerServiceTicketsToolbar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Flex } from '@chakra-ui/react';
+import { DisplayOptionsButtons, Plus, SelectInput } from '../../../components';
+export const PartnerServiceTicketsToolbar = ({ ageItems, initialAge, initialDisplay = 'grid', initialPriority, initialStatus, newTicketLabel = 'TICKET', onAgeChange, onDisplayChange, onNewTicketClick, onPriorityChange, onStatusChange, priorityItems, showNewTicketButton = false, statusItems, }) => {
+    const getValue = (item) => typeof item === 'string' ? item : String(item._id);
+    const getButtonAriaLabel = () => {
+        const sanitizedLabel = newTicketLabel.trim();
+        if (!sanitizedLabel.length) {
+            return 'Create service ticket';
+        }
+        return `Create ${sanitizedLabel.toLowerCase()}`;
+    };
+    return (_jsx(Box, { p: "base", as: "section", "aria-label": "Service tickets toolbar", children: _jsxs(Flex, { align: { base: 'stretch', md: 'center' }, justify: "space-between", gap: "base", direction: { base: 'column', md: 'row' }, children: [_jsxs(Flex, { gap: { base: 'base', lg: '12' }, align: { base: 'stretch', lg: 'center' }, direction: { base: 'column', lg: 'row' }, flex: "1", children: [showNewTicketButton && (_jsx(Box, { ml: { base: '0', lg: '-base' }, children: _jsx(Button, { id: "addServiceTicketButton", size: "md", onClick: onNewTicketClick, leftIcon: _jsx(Plus, {}), variant: "rightRounded", w: { base: '100%', sm: 'auto' }, "aria-label": getButtonAriaLabel(), children: newTicketLabel }) })), _jsxs(Flex, { gap: "base", wrap: "wrap", flex: "1", children: [_jsx(Box, { w: { base: '100%', sm: '140px' }, children: _jsx(SelectInput, { height: "md", width: "100%", handleClick: (item) => onAgeChange(getValue(item)), items: ageItems, initialValue: initialAge }) }), _jsx(Box, { w: { base: '100%', sm: '140px' }, children: _jsx(SelectInput, { height: "md", width: "100%", handleClick: (item) => onPriorityChange(getValue(item)), items: priorityItems, initialValue: initialPriority }) }), _jsx(Box, { w: { base: '100%', sm: '200px' }, children: _jsx(SelectInput, { height: "md", width: "100%", handleClick: (item) => onStatusChange(getValue(item)), items: statusItems, initialValue: initialStatus }) })] })] }), _jsx(Box, { alignSelf: { base: 'flex-end', md: 'center' }, children: _jsx(DisplayOptionsButtons, { displays: ['list', 'grid'], initialDisplay: initialDisplay, onDisplayClick: onDisplayChange, iconSize: 6 }) })] }) }));
+};

package/dist/components/partner/serviceTickets/PartnerServiceTicketsWrapper.d.ts

@@ -0,0 +1,2 @@
+import { PartnerServiceTicketsWrapperI } from '../../../interfaces';
+export declare const PartnerServiceTicketsWrapper: ({ children, menuItems, onHelpClick, showHelp, title, titleIcon, tooltipLabel, }: PartnerServiceTicketsWrapperI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/partner/serviceTickets/PartnerServiceTicketsWrapper.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Container } from '@chakra-ui/react';
+import { Manager } from '../../../assets/images';
+import { ContainerHeader, MoreHorizontal, TileTooltip } from '../../../components';
+export const PartnerServiceTicketsWrapper = ({ children, menuItems = [], onHelpClick, showHelp = false, title = 'Service Tickets', titleIcon = Manager, tooltipLabel = 'Service Tickets', }) => {
+    return (_jsx(TileTooltip, { label: tooltipLabel, children: _jsxs(Container, { variant: "launchpad", h: "full", maxW: "none", p: "0", position: "relative", overflow: "hidden", bg: "lightBlue.1", children: [_jsx(ContainerHeader, { title: title, titleIcon: titleIcon, icon: _jsx(MoreHorizontal, { size: 38 }), menuItems: menuItems, onHelpClick: onHelpClick, showHelp: showHelp, fontWeight: "normal" }), _jsx(Box, { minH: "420px", bg: "lightBlue.1", children: children })] }) }));
+};

package/dist/components/partner/serviceTickets/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PartnerServiceTicketCard';
+export * from './PartnerServiceTicketsToolbar';
+export * from './PartnerServiceTicketsWrapper';

package/dist/components/partner/serviceTickets/index.js

@@ -0,0 +1,3 @@
+export * from './PartnerServiceTicketCard';
+export * from './PartnerServiceTicketsToolbar';
+export * from './PartnerServiceTicketsWrapper';

package/dist/interfaces/buttons/DisplayOptionsButtons.interface.d.ts

@@ -1,6 +1,7 @@
 import { DisplayOptionsType } from '../../interfaces';
 export interface DisplayOptionsButtonsI {
     displays?: DisplayOptionsType[];
+    iconSize?: number | string;
     initialDisplay?: DisplayOptionsType;
     onDisplayClick: (type: DisplayOptionsType) => void;
 }

package/dist/interfaces/inputs/Select.interface.d.ts

@@ -14,7 +14,7 @@ export interface SelectI {
     label?: string;
     placeholder?: string;
     width?: string;
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'accountType';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'accountType' | 'serviceTicket';
     displaySelectedValue?: boolean;
     emptyValues?: string[];
 }

package/dist/interfaces/partner/PartnerServiceTicketsToolbar.interface.d.ts

@@ -0,0 +1,17 @@
+import { DisplayOptionsType, SelectItemI } from '../../interfaces';
+export interface PartnerServiceTicketsToolbarI {
+    ageItems: SelectItemI<string>[];
+    initialAge?: string;
+    initialDisplay?: DisplayOptionsType;
+    initialPriority?: string;
+    initialStatus?: string;
+    newTicketLabel?: string;
+    onAgeChange: (value: string) => void;
+    onDisplayChange: (display: DisplayOptionsType) => void;
+    onNewTicketClick?: () => void;
+    onPriorityChange: (value: string) => void;
+    onStatusChange: (value: string) => void;
+    priorityItems: SelectItemI<string>[];
+    showNewTicketButton?: boolean;
+    statusItems: SelectItemI<string>[];
+}

package/dist/interfaces/partner/PartnerServiceTicketsToolbar.interface.js

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

package/dist/interfaces/partner/PartnerServiceTicketsWrapper.interface.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { MenuItemI } from '../../interfaces';
+export interface PartnerServiceTicketsWrapperI {
+    children?: ReactNode;
+    menuItems?: MenuItemI[];
+    onHelpClick?: () => void;
+    showHelp?: boolean;
+    title?: string;
+    titleIcon?: string;
+    tooltipLabel?: string;
+}

package/dist/interfaces/partner/PartnerServiceTicketsWrapper.interface.js

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

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

@@ -4,6 +4,7 @@ export * from './charts';
 export * from './formTile';
 export * from './panel';
 export * from './popup';
+export * from './serviceTickets';
 export * from './PartnerSidebarMenu.interface';
 export * from './HeaderPartnerLogo.interface';
 export * from './PartnerCallToAction.interface';
@@ -11,4 +12,6 @@ export * from './PartnerFooter.interface';
 export * from './PartnerHomeHeader.interface';
 export * from './PartnerHeader.interface';
 export * from './PartnerImage.interface';
+export * from './PartnerServiceTicketsWrapper.interface';
+export * from './PartnerServiceTicketsToolbar.interface';
 export * from './ShortPartnerTile.interface';

package/dist/interfaces/partner/index.js

@@ -4,6 +4,7 @@ export * from './charts';
 export * from './formTile';
 export * from './panel';
 export * from './popup';
+export * from './serviceTickets';
 export * from './PartnerSidebarMenu.interface';
 export * from './HeaderPartnerLogo.interface';
 export * from './PartnerCallToAction.interface';
@@ -11,4 +12,6 @@ export * from './PartnerFooter.interface';
 export * from './PartnerHomeHeader.interface';
 export * from './PartnerHeader.interface';
 export * from './PartnerImage.interface';
+export * from './PartnerServiceTicketsWrapper.interface';
+export * from './PartnerServiceTicketsToolbar.interface';
 export * from './ShortPartnerTile.interface';

package/dist/interfaces/partner/serviceTickets/PartnerServiceTicketCard.interface.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { SelectItemI } from '../../../interfaces';
+export interface PartnerServiceTicketMetaI {
+    label: string;
+    value: ReactNode;
+}
+export interface PartnerServiceTicketCardI {
+    customerName: string;
+    display?: 'grid' | 'list';
+    description: string;
+    footerActionLabel?: string;
+    headerLabel: string;
+    infoBackground?: string;
+    meta: PartnerServiceTicketMetaI[];
+    onFooterActionClick?: () => void;
+    onStatusChange?: (value: string) => void;
+    statusOptions?: SelectItemI<string>[];
+    statusValue?: string;
+}

package/dist/interfaces/partner/serviceTickets/PartnerServiceTicketCard.interface.js

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

package/dist/interfaces/partner/serviceTickets/index.d.ts

@@ -0,0 +1 @@
+export * from './PartnerServiceTicketCard.interface';

package/dist/interfaces/partner/serviceTickets/index.js

@@ -0,0 +1 @@
+export * from './PartnerServiceTicketCard.interface';

package/dist/stories/partner/PartnerServiceTicketsWrapper.stories.d.ts

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

package/dist/stories/partner/PartnerServiceTicketsWrapper.stories.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Wrap, WrapItem } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
+import { PartnerServiceTicketCard, PartnerServiceTicketsToolbar, PartnerServiceTicketsWrapper, } from '../../components';
+import { menuMock } from '../../mocks';
+const ageItems = [
+    { _id: 'age', name: 'Age' },
+    { _id: 'newest', name: 'Newest' },
+    { _id: 'oldest', name: 'Oldest' },
+];
+const priorityItems = [
+    { _id: 'priority', name: 'Priority' },
+    { _id: 'high', name: 'High' },
+    { _id: 'medium', name: 'Medium' },
+    { _id: 'low', name: 'Low' },
+];
+const statusItems = [
+    { _id: 'show-all', name: 'Show All' },
+    { _id: 'new', name: 'New Service' },
+    { _id: 'support', name: 'Support' },
+];
+export default {
+    title: 'Components/Partner/Service Tickets',
+    component: PartnerServiceTicketsWrapper,
+    args: {
+        menuItems: menuMock,
+        showHelp: true,
+        onHelpClick: action('onHelpClick'),
+    },
+};
+export const PartnerServiceTicketsWrapperComponent = (args) => {
+    const [displayType, setDisplayType] = useState('grid');
+    const handleDisplayChange = (display) => {
+        if (display === 'grid' || display === 'list') {
+            setDisplayType(display);
+        }
+        action('onDisplayChange')(display);
+    };
+    const isListDisplay = displayType === 'list';
+    return (_jsx(Box, { p: ['0', 'base'], children: _jsxs(PartnerServiceTicketsWrapper, Object.assign({}, args, { children: [_jsx(PartnerServiceTicketsToolbar, { ageItems: ageItems, priorityItems: priorityItems, statusItems: statusItems, initialAge: "Age", initialPriority: "Priority", initialStatus: "Show All", initialDisplay: displayType, showNewTicketButton: true, onAgeChange: action('onAgeChange'), onDisplayChange: handleDisplayChange, onNewTicketClick: action('onNewTicketClick'), onPriorityChange: action('onPriorityChange'), onStatusChange: action('onStatusChange') }), _jsxs(Wrap, { spacing: "base", p: "base", align: "start", direction: isListDisplay ? 'column' : 'row', w: "100%", children: [_jsx(WrapItem, { w: isListDisplay ? '100%' : 'auto', children: _jsx(Box, { w: isListDisplay ? '100%' : 'auto', children: _jsx(PartnerServiceTicketCard, { display: displayType, customerName: "Gerry Jones", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do", headerLabel: "New Service", infoBackground: "#d9d5e9", meta: [
+                                        { label: 'Customer', value: 'New Customer' },
+                                        { label: 'Received', value: '9:30 AM' },
+                                        { label: 'ID', value: '553HMF 8422324-D' },
+                                    ], onFooterActionClick: action('onFooterActionClick') }) }) }), _jsx(WrapItem, { w: isListDisplay ? '100%' : 'auto', children: _jsx(Box, { w: isListDisplay ? '100%' : 'auto', children: _jsx(PartnerServiceTicketCard, { display: displayType, customerName: "Jane Smith", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do", headerLabel: "Support", infoBackground: "#efdaf6", meta: [
+                                        { label: 'Customer', value: 'Existing' },
+                                        { label: 'Received', value: '9:30 AM' },
+                                        { label: 'ID', value: '553HMF 8422324-D' },
+                                    ], onFooterActionClick: action('onFooterActionClick') }) }) }), _jsx(WrapItem, { w: isListDisplay ? '100%' : 'auto', children: _jsx(Box, { w: isListDisplay ? '100%' : 'auto', children: _jsx(PartnerServiceTicketCard, { display: displayType, customerName: "Michael Smith", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do", headerLabel: "Support", infoBackground: "#f5e3d7", meta: [
+                                        { label: 'Customer', value: 'Existing' },
+                                        { label: 'Received', value: '9:30 AM' },
+                                        { label: 'ID', value: '553HMF 8422324-D' },
+                                    ], onFooterActionClick: action('onFooterActionClick') }) }) })] })] })) }));
+};

package/dist/stories/partner/serviceTickets/PartnerServiceTicketCard.stories.d.ts

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

package/dist/stories/partner/serviceTickets/PartnerServiceTicketCard.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
+import { PartnerServiceTicketCard } from '../../../components';
+export default {
+    title: 'Components/Partner/Service Tickets/Card',
+    component: PartnerServiceTicketCard,
+    args: {
+        customerName: 'Jane Smith',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do',
+        headerLabel: 'Support',
+        typeLabel: 'Support',
+        infoBackground: '#efdaf6',
+        meta: [
+            { label: 'Customer', value: 'Existing' },
+            { label: 'Received', value: '9:30 AM' },
+            { label: 'ID', value: '553HMF 8422324-D' },
+        ],
+        onFooterActionClick: action('onFooterActionClick'),
+    },
+};
+export const PartnerServiceTicketCardComponent = (args) => {
+    return (_jsx(Box, { w: "180px", children: _jsx(PartnerServiceTicketCard, Object.assign({}, args)) }));
+};
+export const PartnerServiceTicketCardListComponent = (args) => {
+    return (_jsx(Box, { w: "full", children: _jsx(PartnerServiceTicketCard, Object.assign({}, args, { display: "list" })) }));
+};

package/package.json

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