namirasoft-site-react 1.3.448 → 1.3.450

package/dist/components/NSAccordion.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IBaseComponentProps } from '../main';
+interface NSAccordionProps extends IBaseComponentProps {
+    getHeader: () => React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const NSAccordion: (props: NSAccordionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NSAccordion.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import Styles from "./NSAccordion.module.css";
+export const NSAccordion = (props) => {
+    var _a;
+    const [isOpen, setIsOpen] = useState(false);
+    const [height, setHeight] = useState(0);
+    const contentRef = useRef(null);
+    const toggleAccordion = () => {
+        setIsOpen(!isOpen);
+    };
+    useEffect(() => {
+        var _a;
+        if (isOpen) {
+            setHeight(((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) || 'auto');
+        }
+        else {
+            setHeight(0);
+        }
+    }, [isOpen]);
+    return (_jsxs("div", { className: `${Styles.nsaccordion_parent} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx("div", { onClick: toggleAccordion, children: props.getHeader() }), _jsx("div", { ref: contentRef, style: {
+                    height: height,
+                    overflow: 'hidden',
+                    transition: 'height 0.3s ease',
+                }, children: props.children })] }));
+};
+//# sourceMappingURL=NSAccordion.js.map

package/dist/components/NSAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSAccordion.js","sourceRoot":"","sources":["../../src/components/NSAccordion.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAQ7C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;;IAEtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAkB,CAAC,CAAC,CAAC;IACzD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,GAAG,EAAE;QAE5B,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;;QAEd,IAAI,MAAM,EACV;YACC,SAAS,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,YAAY,KAAI,MAAM,CAAC,CAAC;SACtD;aACD;YACC,SAAS,CAAC,CAAC,CAAC,CAAC;SACb;IACF,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACN,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,kBAAkB,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aAC/F,cACC,OAAO,EAAE,eAAe,YAEvB,KAAK,CAAC,SAAS,EAAE,GACb,EACN,cACC,GAAG,EAAE,UAAU,EACf,KAAK,EAAE;oBACN,MAAM,EAAE,MAAM;oBACd,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,kBAAkB;iBAC9B,YAEA,KAAK,CAAC,QAAQ,GACV,IACD,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/NSAccordion.module.css

@@ -0,0 +1,5 @@
+.nsaccordion_parent {
+	border-radius: 8px;
+	width: 100%;
+	max-width: 1150px;
+}

package/dist/components/NSChartTable.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Table, Progress } from 'antd';
 import Styles from "./NSChartTable.module.css";
 export function NSChartTable(props) {
+    var _a;
     const getColor = (percentage) => {
         if (percentage >= 75)
             return '#368F01';
@@ -56,7 +57,7 @@ export function NSChartTable(props) {
             render: (totalHours, record) => (_jsx(Progress, { percent: (totalHours / 8) * 100, showInfo: false, strokeColor: getColor(record.percentage), strokeWidth: 16, size: { width: 310, height: 16 } })),
         },
     ];
-    return (_jsx("div", { children: _jsx(Table, { columns: columns, dataSource: props.data, pagination: false, scroll: { x: 800 }, rowClassName: () => Styles.custom_row }) }));
+    return (_jsx("div", { className: `${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: _jsx(Table, { columns: columns, dataSource: props.data, pagination: false, scroll: { x: 800 }, rowClassName: () => Styles.custom_row }) }));
 }
 ;
 //# sourceMappingURL=NSChartTable.js.map

package/dist/components/NSChartTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSChartTable.js","sourceRoot":"","sources":["../../src/components/NSChartTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAGvC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAkB9C,MAAM,UAAU,YAAY,CAAC,KAAuB;IAEnD,MAAM,QAAQ,GAAG,CAAC,UAAkB,EAAE,EAAE;QAEvC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,SAAS,CAAC;QACvC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,UAAU,CAAC;QACxC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,SAAS,CAAC;QACvC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,SAAS,CAAC;QACvC,OAAO,KAAK,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,OAAO,GAA2B;QACvC;YACC,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,GAAG,EAAE,KAAK;SACV;QACD;YACC,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,YAAY;YACjB,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,wBAAM,IAAI,GAAO;SAC3C;QACD;YACC,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,YAAY;YACjB,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,0BAAM,IAAI,SAAQ;SAC5C;QACD;YACC,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,MAAM;YACjB,GAAG,EAAE,MAAM;YACX,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,+BAAO,IAAI,IAAO;SAC5C;QACD;YACC,KAAK,EAAE,QAAQ;YACf,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,QAAQ;YACb,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,+BAAO,IAAI,IAAO;SAC5C;QACD;YACC,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,SAAS;YACpB,GAAG,EAAE,SAAS;YACd,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,+BAAO,IAAI,IAAO;SAC5C;QACD;YACC,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,OAAO;YACZ,MAAM,EAAE,CAAC,UAAkB,EAAE,MAAgB,EAAE,EAAE,CAAC,CACjD,KAAC,QAAQ,IACR,OAAO,EAAE,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,GAAG,EAC/B,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,EACxC,WAAW,EAAE,EAAE,EACf,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,GAC/B,CACF;SACD;KACD,CAAC;IAEF,OAAO,CACN,wBACC,KAAC,KAAK,IACL,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,KAAK,CAAC,IAAI,EACtB,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,EAClB,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,GACpC,GACG,CACN,CAAC;AACH,CAAC;AAAA,CAAC"}
+{"version":3,"file":"NSChartTable.js","sourceRoot":"","sources":["../../src/components/NSChartTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAGvC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAkB9C,MAAM,UAAU,YAAY,CAAC,KAAuB;;IAEnD,MAAM,QAAQ,GAAG,CAAC,UAAkB,EAAE,EAAE;QAEvC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,SAAS,CAAC;QACvC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,UAAU,CAAC;QACxC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,SAAS,CAAC;QACvC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,SAAS,CAAC;QACvC,OAAO,KAAK,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,OAAO,GAA2B;QACvC;YACC,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,GAAG,EAAE,KAAK;SACV;QACD;YACC,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,YAAY;YACjB,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,wBAAM,IAAI,GAAO;SAC3C;QACD;YACC,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,YAAY;YACjB,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,0BAAM,IAAI,SAAQ;SAC5C;QACD;YACC,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,MAAM;YACjB,GAAG,EAAE,MAAM;YACX,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,+BAAO,IAAI,IAAO;SAC5C;QACD;YACC,KAAK,EAAE,QAAQ;YACf,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,QAAQ;YACb,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,+BAAO,IAAI,IAAO;SAC5C;QACD;YACC,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,SAAS;YACpB,GAAG,EAAE,SAAS;YACd,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,+BAAO,IAAI,IAAO;SAC5C;QACD;YACC,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,OAAO;YACZ,MAAM,EAAE,CAAC,UAAkB,EAAE,MAAgB,EAAE,EAAE,CAAC,CACjD,KAAC,QAAQ,IACR,OAAO,EAAE,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,GAAG,EAC/B,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,EACxC,WAAW,EAAE,EAAE,EACf,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,GAC/B,CACF;SACD;KACD,CAAC;IAEF,OAAO,CACN,cAAK,SAAS,EAAE,GAAG,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,YAClE,KAAC,KAAK,IACL,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,KAAK,CAAC,IAAI,EACtB,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,EAClB,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,GACpC,GACG,CACN,CAAC;AACH,CAAC;AAAA,CAAC"}

package/dist/components/NSRange.js

@@ -28,7 +28,7 @@ export function NSRange(props) {
         const width = ((minute * 100) / 1440).toString();
         return `${width}%`;
     };
-    return (_jsxs("div", { className: `container d-flex justify-content-center direction-ltr flex-column ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")} `, style: props.style, children: [_jsx("h5", { className: Styles.ns_time_line_title, children: props.title }), _jsx("div", { className: "col-12 col-sm-11 px-0", children: _jsxs("div", { className: ` ${Styles.ns_range_time_box_full} d-flex justify-content-start`, children: [_jsx("div", { children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.map((data, index) => _jsx("span", { className: Styles.ns_range_time_line, style: {
+    return (_jsxs("div", { className: `${Styles.ns_range_parent} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx("h5", { className: Styles.ns_time_line_title, children: props.title }), _jsx("div", { className: "col-12 px-0", children: _jsxs("div", { className: ` ${Styles.ns_range_time_box_full} d-flex justify-content-start`, children: [_jsx("div", { children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.map((data, index) => _jsx("span", { className: Styles.ns_range_time_line, style: {
                                     background: Color.getColor(data === null || data === void 0 ? void 0 : data.percentage),
                                     width: Widths[index] || '0%',
                                     left: positions[index] || '%0'

package/dist/components/NSRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSRange.js","sourceRoot":"","sources":["../../src/components/NSRange.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAG1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAejC,MAAM,UAAU,OAAO,CAAC,KAAoB;;IAExC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;;QAEX,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAEpC,MAAM,OAAO,GAAG,uBAAuB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACxE,OAAO,mBAAmB,CAAC,OAAO,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAEvC,MAAM,OAAO,GAAG,uBAAuB,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;YAC1F,OAAO,mBAAmB,CAAC,OAAO,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,SAAS,CAAC,MAAM,CAAC,CAAC;QAClB,YAAY,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAEjB,MAAM,uBAAuB,GAAG,CAAC,UAAgB,EAAE,QAAc,EAAU,EAAE;QAEzE,MAAM,0BAA0B,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;QACvF,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,0BAA0B,GAAG,IAAI,GAAG,EAAE,CAAC,CAAC;QACjF,OAAO,qBAAqB,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,MAAc,EAAU,EAAE;QAEnD,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;QACjD,OAAO,GAAG,KAAK,GAAG,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,qEAAqE,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aAClI,aAAI,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAAG,KAAK,CAAC,KAAK,GAAM,EAC5D,cAAK,SAAS,EAAC,uBAAuB,YAClC,eAAK,SAAS,EAAE,IAAI,MAAM,CAAC,sBAAsB,+BAA+B,aAC5E,wBAEQ,MAAA,KAAK,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC5B,eAEI,SAAS,EAAE,MAAM,CAAC,kBAAkB,EACpC,KAAK,EAAE;oCACH,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,CAAC;oCAC5C,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI;oCAC5B,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,IAAI;iCACjC,IANI,KAAK,CAOP,CACV,GAEH,EACL,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC/B,cAAgB,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAChD,2BAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,WAAW,IAD5C,IAAI,CAER,CACT,CAAC,IACA,GACJ,IACJ,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"NSRange.js","sourceRoot":"","sources":["../../src/components/NSRange.tsx"],"names":[],"mappings":"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"}

package/dist/components/NSRange.module.css

@@ -1,38 +1,67 @@
+.ns_range_parent {
+	width: 100%;
+	max-width: 1150px;
+}
+
 .ns_range_time_item {
-    z-index: 99;
-    text-align: center;
-    width: 4.166666%;
-    display: inline-block;
-    height: 60px;
-    position: relative;
-    border-width: 1px;
-    border-color: #DCDCDC;
-    border-style: groove;
+	z-index: 99;
+	text-align: center;
+	max-width: 48px;
+	display: inline-block;
+	height: 60px;
+	position: relative;
+	border-width: 1px;
+	border-color: #DCDCDC;
+	border-style: groove;
 }
 
 .ns_range_time_box_full {
-    background-color: #fff;
-    border-radius: 5px;
-    position: relative;
-    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
-    overflow: hidden;
+	background-color: #fff;
+	border-radius: 5px;
+	position: relative;
+	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
+	overflow-x: scroll;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
 }
 
 .ns_range_time_line {
-    position: absolute;
-    height: 100%;
+	position: absolute;
+	height: 100%;
 }
 
 .ns_time_line_title {
-    color: #141B5C;
-    margin-bottom: 16px;
+	color: #141B5C;
+	margin-bottom: 16px;
 }
 
 .ns_range_time_item span {
-    color: #141B5C;
-        width: 100%;
-        display: inline-block;
-        background-color: #DCDCDC;
-        border-bottom: 1px solid #DCDCDC;
-        font-weight: 500;
+	color: #141B5C;
+	width: 100%;
+	display: inline-block;
+	background-color: #DCDCDC;
+	border-bottom: 1px solid #DCDCDC;
+	font-weight: 500;
+}
+
+@media screen and (min-width: 992px) {
+	.ns_range_time_box_full {
+		overflow: hidden;
+	}
+
+	.ns_range_time_item {
+		width: 4.166666%;
+	}
 }

package/dist/components/NSTimeTable.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ConfigProvider, Table } from 'antd';
 import Styles from "./NSTimeTable.module.css";
 export function NSTimeTable(props) {
+    var _a;
     return (_jsx(ConfigProvider, { theme: {
             components: {
                 Table: {
@@ -12,9 +13,9 @@ export function NSTimeTable(props) {
                     colorText: "#141B5C",
                 }
             }
-        }, children: _jsx(Table, { columns: props.columns, dataSource: props.rows, bordered: false, rowClassName: Styles.custom_row, rowHoverable: false, scroll: {
-                x: true
-            } }) }));
+        }, children: _jsx("div", { className: `${Styles.ns_timetable_parent} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: _jsx(Table, { columns: props.columns, dataSource: props.rows, bordered: false, rowClassName: Styles.custom_row, rowHoverable: false, scroll: {
+                    x: true
+                } }) }) }));
 }
 ;
 //# sourceMappingURL=NSTimeTable.js.map

package/dist/components/NSTimeTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSTimeTable.js","sourceRoot":"","sources":["../../src/components/NSTimeTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAG7C,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAiB7C,MAAM,UAAU,WAAW,CAAC,KAAuB;IAGlD,OAAO,CACN,KAAC,cAAc,IAAC,KAAK,EAAE;YACtB,UAAU,EAAE;gBACX,KAAK,EAAE;oBACN,QAAQ,EAAE,SAAS;oBACnB,WAAW,EAAE,MAAM;oBACnB,gBAAgB,EAAE,SAAS;oBAC3B,YAAY,EAAE,EAAE;oBAChB,SAAS,EAAE,SAAS;iBACpB;aACD;SACD,YACA,KAAC,KAAK,IACL,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,UAAU,EAAE,KAAK,CAAC,IAAI,EACtB,QAAQ,EAAE,KAAK,EACf,YAAY,EAAE,MAAM,CAAC,UAAU,EAC/B,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE;gBACP,CAAC,EAAE,IAAI;aACP,GACA,GACc,CACjB,CAAA;AACF,CAAC;AAAA,CAAC"}
+{"version":3,"file":"NSTimeTable.js","sourceRoot":"","sources":["../../src/components/NSTimeTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAG7C,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAiB7C,MAAM,UAAU,WAAW,CAAC,KAAuB;;IAGlD,OAAO,CACN,KAAC,cAAc,IAAC,KAAK,EAAE;YACtB,UAAU,EAAE;gBACX,KAAK,EAAE;oBACN,QAAQ,EAAE,SAAS;oBACnB,WAAW,EAAE,MAAM;oBACnB,gBAAgB,EAAE,SAAS;oBAC3B,YAAY,EAAE,EAAE;oBAChB,SAAS,EAAE,SAAS;iBACpB;aACD;SACD,YACA,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,mBAAmB,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,YAChG,KAAC,KAAK,IACL,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,UAAU,EAAE,KAAK,CAAC,IAAI,EACtB,QAAQ,EAAE,KAAK,EACf,YAAY,EAAE,MAAM,CAAC,UAAU,EAC/B,YAAY,EAAE,KAAK,EACnB,MAAM,EAAE;oBACP,CAAC,EAAE,IAAI;iBACP,GACA,GACG,GACU,CACjB,CAAA;AACF,CAAC;AAAA,CAAC"}

package/dist/components/NSTimeTable.module.css

@@ -1,3 +1,7 @@
 .custom_row th:nth-child(1) {
-    box-shadow: 4px 0px 4px 0px #00000040;
+	box-shadow: 4px 0px 4px 0px #00000040;
+}
+
+.ns_timetable_parent {
+	max-width: 1150px;
 }

package/dist/components/NSTimelineMonthly.js

@@ -7,6 +7,6 @@ export function NSTimelineMonthly(props) {
         let percentage = (value * 100) / 24;
         return percentage.toString() + "%";
     }
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: `container d-flex justify-content-center ${Styles.ns_parent}  ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")} `, style: props.style, children: [_jsx("h5", { className: Styles.ns_time_line_title, children: props.title }), _jsx("div", { className: Styles.ns_time_line_monthly, children: props.data.map((card, index) => (_jsxs("div", { className: Styles.ns_time_line_monthly_card, children: [_jsx("h5", { className: Styles.ns_time_line_monthly_card_week_day, children: card.title }), _jsx("span", { className: Styles.ns_time_line_cards_hour, children: card.value }), _jsx("div", { className: Styles.ns_time_line_monthly_card_parent_chart, children: _jsx("div", { className: Styles.ns_time_line_monthly_card_bar, style: { width: getPercentage(card.value), background: Color.getColor(card.percentage) }, children: "bar" }) })] }, index))) })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: `${Styles.ns_parent}  ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")} `, style: props.style, children: [_jsx("h5", { className: Styles.ns_time_line_title, children: props.title }), _jsx("div", { className: Styles.ns_time_line_monthly, children: props.data.map((card, index) => (_jsxs("div", { className: Styles.ns_time_line_monthly_card, children: [_jsx("h5", { className: Styles.ns_time_line_monthly_card_week_day, children: card.title }), _jsx("span", { className: Styles.ns_time_line_cards_hour, children: card.value }), _jsx("div", { className: Styles.ns_time_line_monthly_card_parent_chart, children: _jsx("div", { className: Styles.ns_time_line_monthly_card_bar, style: { width: getPercentage(card.value), background: Color.getColor(card.percentage) }, children: "bar" }) })] }, index))) })] }) }));
 }
 //# sourceMappingURL=NSTimelineMonthly.js.map

package/dist/components/NSTimelineMonthly.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSTimelineMonthly.js","sourceRoot":"","sources":["../../src/components/NSTimelineMonthly.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAahC,MAAM,UAAU,iBAAiB,CAAC,KAAgC;;IAE9D,SAAS,aAAa,CAAC,KAAa;QAEhC,IAAI,UAAU,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACpC,OAAO,UAAU,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACvC,CAAC;IACD,OAAO,CACH,4BACI,eAAK,SAAS,EAAE,2CAA2C,MAAM,CAAC,SAAS,KAAK,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aAC7H,aAAI,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAAG,KAAK,CAAC,KAAK,GAAM,EAC5D,cAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,YAEnC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC5C,aAAI,SAAS,EAAE,MAAM,CAAC,kCAAkC,YAAG,IAAI,CAAC,KAAK,GAAM,EAC3E,eAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,YAAG,IAAI,CAAC,KAAK,GAAQ,EACpE,cAAK,SAAS,EAAE,MAAM,CAAC,sCAAsC,YACzD,cAAK,SAAS,EAAE,MAAM,CAAC,6BAA6B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,oBAAW,GACvJ,KAL6C,KAAK,CAMtD,CACT,CAAC,GAEJ,IACJ,GACP,CACN,CAAC;AACN,CAAC"}
+{"version":3,"file":"NSTimelineMonthly.js","sourceRoot":"","sources":["../../src/components/NSTimelineMonthly.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAahC,MAAM,UAAU,iBAAiB,CAAC,KAAgC;;IAEjE,SAAS,aAAa,CAAC,KAAa;QAEnC,IAAI,UAAU,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACpC,OAAO,UAAU,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACpC,CAAC;IACD,OAAO,CACN,4BACC,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,KAAK,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aACxF,aAAI,SAAS,EAAE,MAAM,CAAC,kBAAkB,YAAG,KAAK,CAAC,KAAK,GAAM,EAC5D,cAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,YAEzC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC/C,aAAI,SAAS,EAAE,MAAM,CAAC,kCAAkC,YAAG,IAAI,CAAC,KAAK,GAAM,EAC3E,eAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,YAAG,IAAI,CAAC,KAAK,GAAQ,EACpE,cAAK,SAAS,EAAE,MAAM,CAAC,sCAAsC,YAC5D,cAAK,SAAS,EAAE,MAAM,CAAC,6BAA6B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,oBAAW,GACpJ,KALgD,KAAK,CAMtD,CACN,CAAC,GAEE,IACD,GACJ,CACH,CAAC;AACH,CAAC"}

package/dist/components/NSTimelineMonthly.module.css

@@ -1,57 +1,72 @@
 .ns_time_line_monthly_card {
-    width: 72px;
-    border-radius: 4px;
-    background-color: #fff;
-    overflow: hidden;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    box-shadow: 1px 0px 3px 1px #b2b2b2;
+	width: 72px;
+	border-radius: 4px;
+	background-color: #fff;
+	overflow: hidden;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	box-shadow: 1px 0px 3px 1px #b2b2b2;
 }
 
 .ns_time_line_monthly_card_week_day {
-    background-color: #141B5C;
-    color: #fff;
-    margin: 0;
-    text-align: center;
-    padding: 8px;
-    /* margin-bottom: 4px; */
+	background-color: #141B5C;
+	color: #fff;
+	margin: 0;
+	text-align: center;
+	padding: 8px;
+	/* margin-bottom: 4px; */
 }
 
 .ns_time_line_cards_hour {
-    color: #141B5C;
+	color: #141B5C;
 }
 
 .ns_time_line_monthly_card_parent_chart {
-    width: 100%;
-    height: 30%;
-    background-color: #E0DFFF;
-    box-shadow: 1px 1px 2px 1px #6c6a6acc;
+	width: 100%;
+	height: 30%;
+	background-color: #E0DFFF;
+	box-shadow: 1px 1px 2px 1px #6c6a6acc;
 }
 
 .ns_time_line_monthly_card_bar {
-    height: 100%;
-    /* background-color: #3B9D00; */
-    color: transparent;
+	height: 100%;
+	/* background-color: #3B9D00; */
+	color: transparent;
 }
 
 .ns_time_line_monthly {
-    display: flex;
-    gap: 2px;
-    flex-direction: row;
-    width: max-content;
+	display: flex;
+	gap: 2px;
+	flex-direction: row;
+	width: max-content;
 }
 
 .ns_parent {
-    width: 100%;
-    overflow-x: scroll;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-        flex-direction: column;
+	width: 100%;
+	max-width: 1150px;
+	overflow-x: scroll;
+	flex-direction: column;
+}
+
+.ns_parent::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_parent::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_parent::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
 }
 
 .ns_time_line_title {
-    color: #141B5C;
-    margin-bottom: 16px;
+	color: #141B5C;
+	margin-bottom: 16px;
+	position: sticky;
+	left: 0;
 }

package/dist/main.d.ts

@@ -1,3 +1,4 @@
+export * from "./components/NSAccordion";
 export * from "./components/NSActionMenu";
 export * from "./components/NSBarAction";
 export * from "./components/NSBarHeroBanner";

package/dist/main.js

@@ -1,3 +1,4 @@
+export * from "./components/NSAccordion";
 export * from "./components/NSActionMenu";
 export * from "./components/NSBarAction";
 export * from "./components/NSBarHeroBanner";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,73 +1,73 @@
 {
-    "name": "namirasoft-site-react",
-    "title": "Namirasoft Site React NPM Package",
-    "description": "Namira Software Corporation Site React NPM Package",
-    "icon": "logo.png",
-    "logo": "https://static.namirasoft.com/image/namirasoft/site/logo/base.png",
-    "language": "ts",
-    "framework": "npm",
-    "application": "package",
-    "private": false,
-    "version": "1.3.448",
-    "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh, Mehrab Bahramian",
-    "license": "MIT",
-    "main": "./dist/main.js",
-    "types": "./dist/main.d.ts",
-    "scripts": {
-        "start": "react-app-rewired start",
-        "build": "npm run copy",
-        "test": "react-app-rewired test",
-        "eject": "react-app-rewired eject",
-        "copy": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.svg src/**/*.png src/**/*.jpg dist/"
-    },
-    "dependencies": {
-        "@ant-design/charts": "^2.1.2",
-        "@types/node": "^22.4.1",
-        "@types/react": "^18.3.3",
-        "@types/react-bootstrap": "^0.32.37",
-        "@types/react-dom": "^18.3.0",
-        "antd": "^5.20.1",
-        "bootstrap": "^5.3.3",
-        "chart.js": "^4.4.3",
-        "copyfiles": "^2.4.1",
-        "link-react": "^3.0.0",
-        "namirasoft-api-link": "^1.4.3",
-        "namirasoft-api-product": "^1.4.3",
-        "namirasoft-core": "^1.4.5",
-        "path-browserify": "^1.0.1",
-        "react": "^18.3.1",
-        "react-app-rewired": "^2.2.1",
-        "react-bootstrap": "^2.10.4",
-        "react-chartjs-2": "^5.2.0",
-        "react-dom": "^18.3.1",
-        "react-phone-input-2": "^2.15.1",
-        "react-phone-number-input": "^3.4.5",
-        "react-router-dom": "^6.26.1",
-        "react-scripts": "5.0.1",
-        "styled-components": "^6.1.12",
-        "xlsx": "^0.18.5"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "skip": {
-        "files": [
-            "/tsconfig.json"
-        ]
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    }
+	"name": "namirasoft-site-react",
+	"title": "Namirasoft Site React NPM Package",
+	"description": "Namira Software Corporation Site React NPM Package",
+	"icon": "logo.png",
+	"logo": "https://static.namirasoft.com/image/namirasoft/site/logo/base.png",
+	"language": "ts",
+	"framework": "npm",
+	"application": "package",
+	"private": false,
+	"version": "1.3.450",
+	"author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh, Mehrab Bahramian",
+	"license": "MIT",
+	"main": "./dist/main.js",
+	"types": "./dist/main.d.ts",
+	"scripts": {
+		"start": "react-app-rewired start",
+		"build": "npm run copy",
+		"test": "react-app-rewired test",
+		"eject": "react-app-rewired eject",
+		"copy": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.svg src/**/*.png src/**/*.jpg dist/"
+	},
+	"dependencies": {
+		"@ant-design/charts": "^2.1.2",
+		"@types/node": "^22.4.1",
+		"@types/react": "^18.3.3",
+		"@types/react-bootstrap": "^0.32.37",
+		"@types/react-dom": "^18.3.0",
+		"antd": "^5.20.2",
+		"bootstrap": "^5.3.3",
+		"chart.js": "^4.4.3",
+		"copyfiles": "^2.4.1",
+		"link-react": "^3.0.0",
+		"namirasoft-api-link": "^1.4.3",
+		"namirasoft-api-product": "^1.4.3",
+		"namirasoft-core": "^1.4.5",
+		"path-browserify": "^1.0.1",
+		"react": "^18.3.1",
+		"react-app-rewired": "^2.2.1",
+		"react-bootstrap": "^2.10.4",
+		"react-chartjs-2": "^5.2.0",
+		"react-dom": "^18.3.1",
+		"react-phone-input-2": "^2.15.1",
+		"react-phone-number-input": "^3.4.5",
+		"react-router-dom": "^6.26.1",
+		"react-scripts": "5.0.1",
+		"styled-components": "^6.1.12",
+		"xlsx": "^0.18.5"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app",
+			"react-app/jest"
+		]
+	},
+	"skip": {
+		"files": [
+			"/tsconfig.json"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
 }

package/src/components/NSAccordion.module.css

@@ -0,0 +1,5 @@
+.nsaccordion_parent {
+	border-radius: 8px;
+	width: 100%;
+	max-width: 1150px;
+}

package/src/components/NSAccordion.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { IBaseComponentProps } from '../main';
+import Styles from "./NSAccordion.module.css"
+
+interface NSAccordionProps extends IBaseComponentProps
+{
+	getHeader: () => React.ReactNode;
+	children: React.ReactNode;
+}
+
+export const NSAccordion = (props: NSAccordionProps) =>
+{
+	const [isOpen, setIsOpen] = useState(false);
+	const [height, setHeight] = useState<number | 'auto'>(0);
+	const contentRef = useRef<HTMLDivElement>(null);
+
+	const toggleAccordion = () =>
+	{
+		setIsOpen(!isOpen);
+	};
+
+	useEffect(() =>
+	{
+		if (isOpen)
+		{
+			setHeight(contentRef.current?.scrollHeight || 'auto');
+		} else
+		{
+			setHeight(0);
+		}
+	}, [isOpen]);
+
+	return (
+		<div className={`${Styles.nsaccordion_parent} ${props.classList?.join(" ")}`} style={props.style}>
+			<div
+				onClick={toggleAccordion}
+			>
+				{props.getHeader()}
+			</div>
+			<div
+				ref={contentRef}
+				style={{
+					height: height,
+					overflow: 'hidden',
+					transition: 'height 0.3s ease',
+				}}
+			>
+				{props.children}
+			</div>
+		</div>
+	);
+};

package/src/components/NSChartTable.tsx

@@ -83,7 +83,7 @@ export function NSChartTable(props: CustomTableProps)
 	];
 
 	return (
-		<div>
+		<div className={`${props.classList?.join(" ")}`} style={props.style}>
 			<Table
 				columns={columns}
 				dataSource={props.data}

package/src/components/NSRange.module.css

@@ -1,38 +1,67 @@
+.ns_range_parent {
+	width: 100%;
+	max-width: 1150px;
+}
+
 .ns_range_time_item {
-    z-index: 99;
-    text-align: center;
-    width: 4.166666%;
-    display: inline-block;
-    height: 60px;
-    position: relative;
-    border-width: 1px;
-    border-color: #DCDCDC;
-    border-style: groove;
+	z-index: 99;
+	text-align: center;
+	max-width: 48px;
+	display: inline-block;
+	height: 60px;
+	position: relative;
+	border-width: 1px;
+	border-color: #DCDCDC;
+	border-style: groove;
 }
 
 .ns_range_time_box_full {
-    background-color: #fff;
-    border-radius: 5px;
-    position: relative;
-    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
-    overflow: hidden;
+	background-color: #fff;
+	border-radius: 5px;
+	position: relative;
+	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
+	overflow-x: scroll;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
 }
 
 .ns_range_time_line {
-    position: absolute;
-    height: 100%;
+	position: absolute;
+	height: 100%;
 }
 
 .ns_time_line_title {
-    color: #141B5C;
-    margin-bottom: 16px;
+	color: #141B5C;
+	margin-bottom: 16px;
 }
 
 .ns_range_time_item span {
-    color: #141B5C;
-        width: 100%;
-        display: inline-block;
-        background-color: #DCDCDC;
-        border-bottom: 1px solid #DCDCDC;
-        font-weight: 500;
+	color: #141B5C;
+	width: 100%;
+	display: inline-block;
+	background-color: #DCDCDC;
+	border-bottom: 1px solid #DCDCDC;
+	font-weight: 500;
+}
+
+@media screen and (min-width: 992px) {
+	.ns_range_time_box_full {
+		overflow: hidden;
+	}
+
+	.ns_range_time_item {
+		width: 4.166666%;
+	}
 }

package/src/components/NSRange.tsx

@@ -6,78 +6,78 @@ import { Color } from "../Color";
 
 export interface NSRangeRow
 {
-    start_time: Date;
-    end_time: Date;
-    percentage: number;
+	start_time: Date;
+	end_time: Date;
+	percentage: number;
 }
 
 export interface INSRangeProps extends IBaseComponentProps
 {
-    data: NSRangeRow[];
-    title?:string;
+	data: NSRangeRow[];
+	title?: string;
 }
 
 export function NSRange(props: INSRangeProps)
 {
-    const [Widths, setWidths] = useState<string[]>([]);
-    const [positions, setPositions] = useState<string[]>([]);
+	const [Widths, setWidths] = useState<string[]>([]);
+	const [positions, setPositions] = useState<string[]>([]);
 
-    useEffect(() =>
-    {
-        const widths = props.data?.map((data) =>
-        {
-            const minutes = calculateMinutesBetween(data.start_time, data.end_time);
-            return convertToPercentage(minutes);
-        });
-        const positions = props.data?.map((data) =>
-        {
-            const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
-            return convertToPercentage(minutes);
-        });
-        setWidths(widths);
-        setPositions(positions);
-    }, [props.data]);
+	useEffect(() =>
+	{
+		const widths = props.data?.map((data) =>
+		{
+			const minutes = calculateMinutesBetween(data.start_time, data.end_time);
+			return convertToPercentage(minutes);
+		});
+		const positions = props.data?.map((data) =>
+		{
+			const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
+			return convertToPercentage(minutes);
+		});
+		setWidths(widths);
+		setPositions(positions);
+	}, [props.data]);
 
-    const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
-    {
-        const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
-        const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
-        return difference_in_minutes;
-    };
+	const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
+	{
+		const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
+		const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
+		return difference_in_minutes;
+	};
 
-    const convertToPercentage = (minute: number): string =>
-    {
-        const width = ((minute * 100) / 1440).toString();
-        return `${width}%`;
-    };
+	const convertToPercentage = (minute: number): string =>
+	{
+		const width = ((minute * 100) / 1440).toString();
+		return `${width}%`;
+	};
 
-    return (
-        <div className={`container d-flex justify-content-center direction-ltr flex-column ${props.classList?.join(" ")} `} style={props.style}>
-            <h5 className={Styles.ns_time_line_title}>{props.title}</h5>
-            <div className="col-12 col-sm-11 px-0">
-                <div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
-                    <div>
-                        {
-                            props.data?.map((data, index) =>
-                                <span
-                                    key={index}
-                                    className={Styles.ns_range_time_line}
-                                    style={{
-                                        background: Color.getColor(data?.percentage),
-                                        width: Widths[index] || '0%',
-                                        left: positions[index] || '%0'
-                                    }}>
-                                </span>
-                            )
-                        }
-                    </div>
-                    {[...Array(24).keys()].map(hour => (
-                        <div key={hour} className={Styles.ns_range_time_item}>
-                            <span>{hour.toString().padStart(2, '0')}:00</span>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
+	return (
+		<div className={`${Styles.ns_range_parent} ${props.classList?.join(" ")}`} style={props.style}>
+			<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
+			<div className="col-12 px-0">
+				<div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
+					<div>
+						{
+							props.data?.map((data, index) =>
+								<span
+									key={index}
+									className={Styles.ns_range_time_line}
+									style={{
+										background: Color.getColor(data?.percentage),
+										width: Widths[index] || '0%',
+										left: positions[index] || '%0'
+									}}>
+								</span>
+							)
+						}
+					</div>
+					{[...Array(24).keys()].map(hour => (
+						<div key={hour} className={Styles.ns_range_time_item}>
+							<span>{hour.toString().padStart(2, '0')}:00</span>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
 }

package/src/components/NSTimeTable.module.css

@@ -1,3 +1,7 @@
 .custom_row th:nth-child(1) {
-    box-shadow: 4px 0px 4px 0px #00000040;
+	box-shadow: 4px 0px 4px 0px #00000040;
+}
+
+.ns_timetable_parent {
+	max-width: 1150px;
 }

package/src/components/NSTimeTable.tsx

@@ -33,16 +33,18 @@ export function NSTimeTable(props: NSTimeTableProps)
 				}
 			}
 		}}>
-			<Table
-				columns={props.columns}
-				dataSource={props.rows}
-				bordered={false}
-				rowClassName={Styles.custom_row}
-				rowHoverable={false}
-				scroll={{
-					x: true
-				}}
-			/>
+			<div className={`${Styles.ns_timetable_parent} ${props.classList?.join(" ")}`} style={props.style}>
+				<Table
+					columns={props.columns}
+					dataSource={props.rows}
+					bordered={false}
+					rowClassName={Styles.custom_row}
+					rowHoverable={false}
+					scroll={{
+						x: true
+					}}
+				/>
+			</div>
 		</ConfigProvider>
 	)
 };

package/src/components/NSTimelineMonthly.module.css

@@ -1,57 +1,72 @@
 .ns_time_line_monthly_card {
-    width: 72px;
-    border-radius: 4px;
-    background-color: #fff;
-    overflow: hidden;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    box-shadow: 1px 0px 3px 1px #b2b2b2;
+	width: 72px;
+	border-radius: 4px;
+	background-color: #fff;
+	overflow: hidden;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	box-shadow: 1px 0px 3px 1px #b2b2b2;
 }
 
 .ns_time_line_monthly_card_week_day {
-    background-color: #141B5C;
-    color: #fff;
-    margin: 0;
-    text-align: center;
-    padding: 8px;
-    /* margin-bottom: 4px; */
+	background-color: #141B5C;
+	color: #fff;
+	margin: 0;
+	text-align: center;
+	padding: 8px;
+	/* margin-bottom: 4px; */
 }
 
 .ns_time_line_cards_hour {
-    color: #141B5C;
+	color: #141B5C;
 }
 
 .ns_time_line_monthly_card_parent_chart {
-    width: 100%;
-    height: 30%;
-    background-color: #E0DFFF;
-    box-shadow: 1px 1px 2px 1px #6c6a6acc;
+	width: 100%;
+	height: 30%;
+	background-color: #E0DFFF;
+	box-shadow: 1px 1px 2px 1px #6c6a6acc;
 }
 
 .ns_time_line_monthly_card_bar {
-    height: 100%;
-    /* background-color: #3B9D00; */
-    color: transparent;
+	height: 100%;
+	/* background-color: #3B9D00; */
+	color: transparent;
 }
 
 .ns_time_line_monthly {
-    display: flex;
-    gap: 2px;
-    flex-direction: row;
-    width: max-content;
+	display: flex;
+	gap: 2px;
+	flex-direction: row;
+	width: max-content;
 }
 
 .ns_parent {
-    width: 100%;
-    overflow-x: scroll;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-        flex-direction: column;
+	width: 100%;
+	max-width: 1150px;
+	overflow-x: scroll;
+	flex-direction: column;
+}
+
+.ns_parent::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_parent::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_parent::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
 }
 
 .ns_time_line_title {
-    color: #141B5C;
-    margin-bottom: 16px;
+	color: #141B5C;
+	margin-bottom: 16px;
+	position: sticky;
+	left: 0;
 }

package/src/components/NSTimelineMonthly.tsx

@@ -3,41 +3,41 @@ import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import { Color } from "../Color"
 export interface NSdata
 {
-    title: string;
-    value: number;
-    percentage: number;
+	title: string;
+	value: number;
+	percentage: number;
 }
 export interface INSNSTimelineMonthlyProps extends IBaseComponentProps
 {
-    data: NSdata[];
-    title?: string;
+	data: NSdata[];
+	title?: string;
 }
 
 export function NSTimelineMonthly(props: INSNSTimelineMonthlyProps)
 {
-    function getPercentage(value: number): string
-    {
-        let percentage = (value * 100) / 24;
-        return percentage.toString() + "%";
-    }
-    return (
-        <>
-            <div className={`container d-flex justify-content-center ${Styles.ns_parent}  ${props.classList?.join(" ")} `} style={props.style}>
-                <h5 className={Styles.ns_time_line_title}>{props.title}</h5>
-                <div className={Styles.ns_time_line_monthly}>
-                    {
-                        props.data.map((card, index) => (
-                            <div className={Styles.ns_time_line_monthly_card} key={index}>
-                                <h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
-                                <span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
-                                <div className={Styles.ns_time_line_monthly_card_parent_chart}>
-                                    <div className={Styles.ns_time_line_monthly_card_bar} style={{ width: getPercentage(card.value), background: Color.getColor(card.percentage) }}>bar</div>
-                                </div>
-                            </div>
-                        ))
-                    }
-                </div>
-            </div>
-        </>
-    );
+	function getPercentage(value: number): string
+	{
+		let percentage = (value * 100) / 24;
+		return percentage.toString() + "%";
+	}
+	return (
+		<>
+			<div className={`${Styles.ns_parent}  ${props.classList?.join(" ")} `} style={props.style}>
+				<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
+				<div className={Styles.ns_time_line_monthly}>
+					{
+						props.data.map((card, index) => (
+							<div className={Styles.ns_time_line_monthly_card} key={index}>
+								<h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
+								<span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
+								<div className={Styles.ns_time_line_monthly_card_parent_chart}>
+									<div className={Styles.ns_time_line_monthly_card_bar} style={{ width: getPercentage(card.value), background: Color.getColor(card.percentage) }}>bar</div>
+								</div>
+							</div>
+						))
+					}
+				</div>
+			</div>
+		</>
+	);
 }

package/src/main.ts

@@ -1,3 +1,4 @@
+export * from "./components/NSAccordion";
 export * from "./components/NSActionMenu";
 export * from "./components/NSBarAction";
 export * from "./components/NSBarHeroBanner";