@codezee/sixtify-brahma 0.2.24 → 0.2.25

package/packages/shared-components/dist/Svgs/SvgsIndicator.d.ts

@@ -0,0 +1,8 @@
+import { type WorkDayType } from "../utils/colorVariant";
+type SvgsIndicatorIconProps = {
+    variant?: WorkDayType;
+    colourCode?: string;
+};
+export declare const SvgsIndicator: ({ variant, colourCode, }: SvgsIndicatorIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SvgsIndicator.d.ts.map

package/packages/shared-components/dist/Svgs/SvgsIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgsIndicator.d.ts","sourceRoot":"","sources":["../../src/Svgs/SvgsIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE5E,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,aAAa,GAAI,0BAG3B,sBAAsB,4CAcxB,CAAC"}

package/packages/shared-components/dist/Svgs/SvgsIndicator.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgsIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colorVariant_1 = require("../utils/colorVariant");
+const SvgsIndicator = ({ variant, colourCode, }) => {
+    const color = variant ? (0, colorVariant_1.getColorByVariant)(variant) : colourCode;
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("circle", { cx: "5", cy: "5", r: "5", fill: color }) }));
+};
+exports.SvgsIndicator = SvgsIndicator;

package/packages/shared-components/dist/Svgs/index.d.ts

@@ -0,0 +1,15 @@
+export * from "./Company";
+export * from "./Drawer";
+export * from "./FormAction";
+export * from "./ImportExcelSuccessIcon";
+export * from "./LogoIcon";
+export * from "./SvgAdd";
+export * from "./SvgCalendar";
+export * from "./SvgConfigure";
+export * from "./SvgDelete";
+export * from "./SvgDownload";
+export * from "./SvgNoLogo";
+export * from "./SvgNoSign";
+export * from "./SvgsDrop";
+export * from "./SvgsHome";
+//# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/Svgs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Svgs/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}

package/packages/shared-components/dist/Svgs/index.js

@@ -0,0 +1,30 @@
+"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("./Company"), exports);
+__exportStar(require("./Drawer"), exports);
+__exportStar(require("./FormAction"), exports);
+__exportStar(require("./ImportExcelSuccessIcon"), exports);
+__exportStar(require("./LogoIcon"), exports);
+__exportStar(require("./SvgAdd"), exports);
+__exportStar(require("./SvgCalendar"), exports);
+__exportStar(require("./SvgConfigure"), exports);
+__exportStar(require("./SvgDelete"), exports);
+__exportStar(require("./SvgDownload"), exports);
+__exportStar(require("./SvgNoLogo"), exports);
+__exportStar(require("./SvgNoSign"), exports);
+__exportStar(require("./SvgsDrop"), exports);
+__exportStar(require("./SvgsHome"), exports);

package/packages/shared-components/dist/Tab/Skeleton.d.ts

@@ -0,0 +1,2 @@
+export declare const Skeleton: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/packages/shared-components/dist/Tab/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/Tab/Skeleton.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAYpB,CAAC"}

package/packages/shared-components/dist/Tab/Skeleton.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Skeleton = () => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { gap: "10px", children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 200, height: "30px", sx: {
+                transform: "scale(1)",
+            } }) }));
+};
+exports.Skeleton = Skeleton;

package/packages/shared-components/dist/Tab/Tabs.d.ts

@@ -0,0 +1,18 @@
+import type { TabOwnProps } from "@mui/material/Tab";
+import type { ReactElement } from "react";
+export type TabsItems = {
+    value: string;
+    label: string;
+    icon?: ReactElement;
+    toolTipLabel?: string;
+    iconPosition?: TabOwnProps["iconPosition"];
+    onClick: () => void;
+};
+type TabsProps = {
+    tabs: TabsItems[];
+    value: string;
+    loading?: boolean;
+};
+export declare const Tabs: ({ tabs, value, loading }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/packages/shared-components/dist/Tab/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/Tab/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,0BAA0B,SAAS,4CAuCvD,CAAC"}

package/packages/shared-components/dist/Tab/Tabs.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HelpOutlineOutlined_1 = __importDefault(require("@mui/icons-material/HelpOutlineOutlined"));
+const material_1 = require("@mui/material");
+const Tab_1 = __importDefault(require("@mui/material/Tab"));
+const uuid_1 = require("uuid");
+const Tooltip_1 = require("../Tooltip");
+const Skeleton_1 = require("./Skeleton");
+const Tabs = ({ tabs, value, loading }) => {
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Stack, { gap: "10px", direction: "row", children: tabs.map(() => {
+                return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {}, (0, uuid_1.v4)());
+            }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Tabs, { value: value, children: tabs.map(({ iconPosition = "end", toolTipLabel = "", icon = (0, jsx_runtime_1.jsx)(HelpOutlineOutlined_1.default, { color: "secondary" }), ...rest }) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { icon: toolTipLabel ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: toolTipLabel, placement: "bottom", children: icon })) : (icon), disabled: loading, iconPosition: iconPosition, ...rest }, (0, uuid_1.v4)()))) }));
+};
+exports.Tabs = Tabs;

package/packages/shared-components/dist/Tab/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tabs";
+//# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/Tab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tab/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/packages/shared-components/dist/Tab/index.js

@@ -0,0 +1,17 @@
+"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("./Tabs"), exports);

package/packages/shared-components/dist/Timeline/AttendanceStatus.d.ts

@@ -0,0 +1,7 @@
+import { type WorkDayType } from "../utils/colorVariant";
+type AttendanceStatusProps = {
+    variant: WorkDayType;
+};
+export declare const AttendanceStatus: ({ variant }: AttendanceStatusProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AttendanceStatus.d.ts.map

package/packages/shared-components/dist/Timeline/AttendanceStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttendanceStatus.d.ts","sourceRoot":"","sources":["../../src/Timeline/AttendanceStatus.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAE/B,KAAK,qBAAqB,GAAG;IAC3B,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,aAAa,qBAAqB,4CA4ClE,CAAC"}

package/packages/shared-components/dist/Timeline/AttendanceStatus.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttendanceStatus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const colorVariant_1 = require("../utils/colorVariant");
+const AttendanceStatus = ({ variant }) => {
+    const color = (0, colorVariant_1.getColorByVariant)(variant);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { position: "relative", width: "100%", alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                    position: "absolute",
+                    backgroundColor: "#ffffff",
+                    border: `1px solid ${color}`,
+                    borderRadius: "7px",
+                    padding: "0px 5px",
+                    zIndex: 1,
+                    color: `${color}`,
+                    height: "28px",
+                    display: "flex",
+                    alignItems: "center",
+                }, children: (0, colorVariant_1.getStatusLabel)(variant) }), (0, jsx_runtime_1.jsx)(material_1.Slider, { valueLabelDisplay: "off", value: [0, 2], max: 2, step: 1, sx: {
+                    "& .MuiSlider-track": {
+                        background: `${color}`,
+                        height: "2px",
+                        border: "none",
+                    },
+                    "& .MuiSlider-thumb": {
+                        backgroundColor: `${color}`,
+                        height: 8,
+                        width: 8,
+                    },
+                    "& .MuiSlider-rail": {
+                        backgroundColor: "transparent",
+                    },
+                } })] }));
+};
+exports.AttendanceStatus = AttendanceStatus;

package/packages/shared-components/dist/Timeline/Timeline.d.ts

@@ -0,0 +1,17 @@
+import { type WorkDayType } from "../utils/colorVariant";
+export type HighlightedInterval = {
+    in_time: string;
+    out_time: string;
+    status_type: WorkDayType;
+};
+type TimelineProps = {
+    totalDots: number;
+    highlightedIntervals: HighlightedInterval[];
+    startTimeline: string;
+    shiftStartTime: string;
+    shiftEndTime: string;
+};
+export declare const getArrowValue: (date: string) => number;
+export declare const Timeline: ({ totalDots, highlightedIntervals, shiftStartTime, shiftEndTime, startTimeline, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Timeline.d.ts.map

package/packages/shared-components/dist/Timeline/Timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKzD,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,oBAAoB,EAAE,mBAAmB,EAAE,CAAC;IAC5C,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,WAQzC,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,mFAMtB,aAAa,4CAoIf,CAAC"}

package/packages/shared-components/dist/Timeline/Timeline.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = exports.getArrowValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const TimelineTrackSegments_1 = require("./TimelineTrackSegments");
+const date_1 = require("../utils/date");
+const ArrowUp_1 = require("../Svgs/ArrowUp");
+const luxon_1 = require("luxon");
+const getArrowValue = (date) => {
+    const time = luxon_1.DateTime.fromFormat(date, "HH:mm");
+    const hour = time.hour;
+    const minute = time.minute;
+    return hour + minute / 60;
+};
+exports.getArrowValue = getArrowValue;
+const Timeline = ({ totalDots, highlightedIntervals, shiftStartTime, shiftEndTime, startTimeline = "2024-11-17T18:30:04.000Z", }) => {
+    const slotStartTime = parseFloat((0, date_1.getTimeInHHmm)(startTimeline));
+    const getArrowPosition = (shiftStartTime, shiftEndTime, type) => {
+        const shiftStart = (0, date_1.getTimeInHHmm)(shiftStartTime);
+        const shiftEnd = (0, date_1.getTimeInHHmm)(shiftEndTime);
+        let shiftStartValue = (0, exports.getArrowValue)(shiftStart);
+        let shiftEndValue = (0, exports.getArrowValue)(shiftEnd);
+        shiftStartValue =
+            shiftStartValue < slotStartTime
+                ? shiftStartValue + totalDots
+                : shiftStartValue;
+        shiftEndValue =
+            shiftEndValue < shiftStartValue
+                ? shiftEndValue + totalDots
+                : shiftEndValue;
+        return type === "END" ? shiftEndValue : shiftStartValue;
+    };
+    const isHighlighted = (index) => {
+        const wrappedValue = (index + slotStartTime) % totalDots;
+        return highlightedIntervals.some((interval) => wrappedValue >= parseFloat((0, date_1.getTimeInHHmm)(interval.in_time)) &&
+            wrappedValue <= parseFloat((0, date_1.getTimeInHHmm)(interval.out_time)));
+    };
+    const marks = Array.from({ length: totalDots }, (_, index) => ({
+        value: (index + slotStartTime) % totalDots,
+        label: "",
+        highlighted: isHighlighted((index + slotStartTime) % totalDots),
+    }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { sx: { position: "relative", width: "100%" }, children: [(0, jsx_runtime_1.jsx)(TimelineTrackSegments_1.TimelineTrackSegments, { totalDots: totalDots, intervals: highlightedIntervals, startTimeline: slotStartTime }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `Shift Start: ${(0, date_1.getTimeInHHmm)(shiftStartTime)}`, arrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        cursor: "pointer",
+                        position: "absolute",
+                        top: "12px",
+                        zIndex: 2,
+                        left: `${(((getArrowPosition(shiftStartTime, shiftEndTime, "START") - slotStartTime) % totalDots) / (totalDots - 1)) * 100}%`,
+                    }, children: (0, jsx_runtime_1.jsx)(ArrowUp_1.ArrowUp, {}) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: `Shift End: ${(0, date_1.getTimeInHHmm)(shiftEndTime)}`, arrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        cursor: "pointer",
+                        position: "absolute",
+                        top: "12px",
+                        zIndex: 2,
+                        left: `${(((getArrowPosition(shiftStartTime, shiftEndTime, "END") - slotStartTime) % totalDots) / (totalDots - 1)) * 100}%`,
+                    }, children: (0, jsx_runtime_1.jsx)(ArrowUp_1.ArrowUp, {}) }) }), (0, jsx_runtime_1.jsx)(material_1.Slider, { valueLabelDisplay: "off", marks: marks, max: totalDots - 1, step: 1, value: highlightedIntervals
+                    .map((interval) => [
+                    (parseFloat((0, date_1.getTimeInHHmm)(interval.in_time)) -
+                        slotStartTime +
+                        totalDots) %
+                        totalDots,
+                    (parseFloat((0, date_1.getTimeInHHmm)(interval.out_time)) -
+                        slotStartTime +
+                        totalDots) %
+                        totalDots,
+                ])
+                    .flat(), sx: {
+                    zIndex: 1,
+                    "& .MuiSlider-track": {
+                        background: "transparent",
+                        height: 1,
+                        border: "none",
+                    },
+                    "& .MuiSlider-mark": {
+                        backgroundColor: "gray",
+                        height: 4,
+                        width: 4,
+                        borderRadius: "50%",
+                    },
+                    "& .MuiSlider-markActive": {
+                        backgroundColor: "transparent",
+                        height: 5,
+                        width: 5,
+                    },
+                    "& .MuiSlider-rail": {
+                        height: 2,
+                        backgroundColor: "#929292",
+                    },
+                    "& .MuiSlider-thumb": {
+                        display: "none",
+                    },
+                } })] }));
+};
+exports.Timeline = Timeline;

package/packages/shared-components/dist/Timeline/TimelineTrackSegments.d.ts

@@ -0,0 +1,9 @@
+import { type HighlightedInterval } from "./Timeline";
+type TimelineTrackSegmentsProps = {
+    totalDots: number;
+    intervals: HighlightedInterval[];
+    startTimeline: number;
+};
+export declare const TimelineTrackSegments: ({ totalDots, intervals, startTimeline, }: TimelineTrackSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TimelineTrackSegments.d.ts.map

package/packages/shared-components/dist/Timeline/TimelineTrackSegments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineTrackSegments.d.ts","sourceRoot":"","sources":["../../src/Timeline/TimelineTrackSegments.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAErE,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,mBAAmB,EAAE,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,0CAInC,0BAA0B,4CAiH5B,CAAC"}

package/packages/shared-components/dist/Timeline/TimelineTrackSegments.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTrackSegments = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const luxon_1 = require("luxon");
+const colorVariant_1 = require("../utils/colorVariant");
+const date_1 = require("../utils/date");
+const Timeline_1 = require("./Timeline");
+const TimelineTrackSegments = ({ totalDots, intervals, startTimeline, }) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { position: "relative", width: "100%", height: 4 }, children: intervals?.map((interval, index) => {
+            const inTime = (0, date_1.getTimeInHHmm)(interval.in_time);
+            const outTime = (0, date_1.getTimeInHHmm)(interval.out_time);
+            const intervalInTime = luxon_1.DateTime.fromISO(interval.in_time);
+            const intervalOutTime = luxon_1.DateTime.fromISO(interval.out_time);
+            const shiftHours = intervalOutTime
+                .diff(intervalInTime, ["hours", "minutes"])
+                .toFormat("hh:mm");
+            let in_time = (0, Timeline_1.getArrowValue)(inTime);
+            in_time = in_time < startTimeline ? in_time + totalDots : in_time;
+            let out_time = (0, Timeline_1.getArrowValue)(outTime);
+            out_time = out_time < in_time ? out_time + totalDots : out_time;
+            const isValidInTime = !isNaN(in_time);
+            const isValidOutTime = !isNaN(out_time);
+            let inTimeLabel = "";
+            let outTimeLabel = "";
+            if (isValidInTime) {
+                inTimeLabel = `In time : ${inTime} ${!isValidOutTime ? " / Missing punch" : ""}`;
+            }
+            if (isValidOutTime) {
+                outTimeLabel = `Out time : ${outTime}  ${!isValidInTime ? "/ Missing punch" : ""}`;
+            }
+            const startPercent = (((in_time - startTimeline) % totalDots) / (totalDots - 1)) * 100;
+            const endPercent = (((out_time - startTimeline) % totalDots) / (totalDots - 1)) * 100;
+            const labelText = `In/Out: ${(0, date_1.getTimeInHHmm)(interval.in_time)} - ${(0, date_1.getTimeInHHmm)(interval.out_time)} (${shiftHours})`;
+            const color = (0, colorVariant_1.getColorByVariant)(interval.status_type);
+            return (
+            // eslint-disable-next-line sonarjs/no-array-index-key
+            (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [isValidInTime && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { arrow: true, title: inTimeLabel, placement: "top", children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                height: 8,
+                                width: 8,
+                                position: "absolute",
+                                left: `${startPercent}%`,
+                                boxShadow: "none",
+                                backgroundColor: color,
+                                borderRadius: "50%",
+                                top: "15px",
+                                zIndex: 3,
+                                "&:focus, &:hover, &:active": {
+                                    boxShadow: "none",
+                                },
+                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { arrow: true, title: labelText, placement: "top", children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                position: "absolute",
+                                left: `${startPercent}%`,
+                                width: `${endPercent - startPercent}%`,
+                                height: 3.5,
+                                top: "17.5px",
+                                backgroundColor: color,
+                                zIndex: 2,
+                            } }) }), isValidOutTime && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { arrow: true, title: outTimeLabel, placement: "top", children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                height: 8,
+                                width: 8,
+                                position: "absolute",
+                                right: `${100 - endPercent}%`,
+                                boxShadow: "none",
+                                backgroundColor: color,
+                                borderRadius: "50%",
+                                top: "15px",
+                                zIndex: 3,
+                                "&:focus, &:hover, &:active": {
+                                    boxShadow: "none",
+                                },
+                            } }) }))] }, index));
+        }) }));
+};
+exports.TimelineTrackSegments = TimelineTrackSegments;

package/packages/shared-components/dist/Timeline/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./AttendanceStatus";
+export * from "./Timeline";
+//# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/Timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Timeline/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC"}

package/packages/shared-components/dist/Timeline/index.js

@@ -0,0 +1,18 @@
+"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("./AttendanceStatus"), exports);
+__exportStar(require("./Timeline"), exports);

package/packages/shared-components/dist/Toast/Toast.d.ts

@@ -0,0 +1,9 @@
+import type { ToastBodyProps } from "./ToastBody";
+import type { ToastFooterLinkProps } from "./ToastFooterLink";
+import type { ToastType } from "./types";
+export type ToastProps = ToastBodyProps & ToastFooterLinkProps & {
+    closeToast?: () => void;
+    type: ToastType;
+};
+export declare const Toast: ({ closeToast, type, title, description, href, linkText, }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toast.d.ts.map

package/packages/shared-components/dist/Toast/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG,cAAc,GACrC,oBAAoB,GAAG;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAMJ,eAAO,MAAM,KAAK,GAAI,2DAOnB,UAAU,4CAyBZ,CAAC"}

package/packages/shared-components/dist/Toast/Toast.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const PadBox_1 = require("../PadBox");
+const ToastBody_1 = require("./ToastBody");
+const ToastFooterLink_1 = require("./ToastFooterLink");
+const Toast = ({ closeToast, type, title, description, href, linkText, }) => {
+    const toastIcons = {
+        info: (0, jsx_runtime_1.jsx)(icons_material_1.AddCircleOutline, { color: "info", fontSize: "large" }),
+        success: (0, jsx_runtime_1.jsx)(icons_material_1.CheckCircleOutline, { color: "success", fontSize: "large" }),
+        warning: (0, jsx_runtime_1.jsx)(icons_material_1.ErrorOutline, { color: "warning", fontSize: "large" }),
+        error: (0, jsx_runtime_1.jsx)(icons_material_1.HighlightOff, { color: "error", fontSize: "large" }),
+    };
+    return ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { p: "20px", pl: "16px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "16px", alignItems: "center", children: [toastIcons[type], (0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "flex-start", gap: "1.2rem", flexGrow: 1, children: [(0, jsx_runtime_1.jsx)(ToastBody_1.ToastBody, { title: title, description: description }), href && (0, jsx_runtime_1.jsx)(ToastFooterLink_1.ToastFooterLink, { href: href, linkText: linkText })] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: closeToast, disableRipple: true, children: (0, jsx_runtime_1.jsx)(icons_material_1.Close, {}) })] }) }));
+};
+exports.Toast = Toast;

package/packages/shared-components/dist/Toast/ToastBody.d.ts

@@ -0,0 +1,4 @@
+import type { ToastBody as ToastBodyType } from "./types";
+export type ToastBodyProps = Readonly<ToastBodyType>;
+export declare function ToastBody({ title, description }: ToastBodyProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToastBody.d.ts.map

package/packages/shared-components/dist/Toast/ToastBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastBody.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastBody.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErD,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,cAAc,2CAoB/D"}

package/packages/shared-components/dist/Toast/ToastBody.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastBody = ToastBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+function ToastBody({ title, description }) {
+    const { palette: { app: { color }, }, } = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 500, color: "black", variant: "body1", children: title }), description && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: color.slate[900], variant: "body2", children: description }))] }));
+}

package/packages/shared-components/dist/Toast/ToastFooterLink.d.ts

@@ -0,0 +1,4 @@
+import type { ToastLink } from "./types";
+export type ToastFooterLinkProps = Readonly<ToastLink>;
+export declare function ToastFooterLink({ href, linkText }: ToastFooterLinkProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToastFooterLink.d.ts.map

package/packages/shared-components/dist/Toast/ToastFooterLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastFooterLink.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastFooterLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAEvD,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAYvE"}

package/packages/shared-components/dist/Toast/ToastFooterLink.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastFooterLink = ToastFooterLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Toaster_styled_1 = require("./Toaster.styled");
+function ToastFooterLink({ href, linkText }) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Link, { href: href, underline: "none", target: href?.startsWith("http") ? "_blank" : "_self", children: (0, jsx_runtime_1.jsx)(Toaster_styled_1.HoverBox, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: linkText ?? href }) }) }));
+}

package/packages/shared-components/dist/Toast/Toaster.d.ts

@@ -0,0 +1,2 @@
+export declare const Toaster: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toaster.d.ts.map

package/packages/shared-components/dist/Toast/Toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../src/Toast/Toaster.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO,+CAgBnB,CAAC"}

package/packages/shared-components/dist/Toast/Toaster.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toaster = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_toastify_1 = require("react-toastify");
+const Toaster_styled_1 = require("./Toaster.styled");
+const Toaster = () => {
+    return ((0, jsx_runtime_1.jsx)(Toaster_styled_1.ToasterStyled, { position: "top-right", autoClose: 5000, hideProgressBar: true, newestOnTop: true, closeButton: false, closeOnClick: false, rtl: false, draggable: true, pauseOnHover: true, transition: react_toastify_1.Slide, limit: 5 }));
+};
+exports.Toaster = Toaster;

package/packages/shared-components/dist/Toast/Toaster.styled.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from "@mui/material";
+import { ComponentType } from "react";
+import { type ToastContainerProps } from "react-toastify";
+export declare const ToasterStyled: ComponentType<ToastContainerProps>;
+export declare const HoverBox: ComponentType<BoxProps>;
+//# sourceMappingURL=Toaster.styled.d.ts.map

package/packages/shared-components/dist/Toast/Toaster.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.styled.d.ts","sourceRoot":"","sources":["../../src/Toast/Toaster.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1E,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,mBAAmB,CAkE3D,CAAC;AAEH,eAAO,MAAM,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAM1C,CAAC"}