namirasoft-site-react 1.3.39 → 1.3.42

package/dist/components/NSSection.d.ts

@@ -3,6 +3,7 @@ import { BackgroundType } from "../types/Background";
 export interface NSSectionProps {
     children: ReactNode;
     background?: BackgroundType;
+    center_items?: boolean;
 }
 export interface NSSectionState {
     background?: BackgroundType;

package/dist/components/NSSection.js

@@ -16,11 +16,14 @@ export class NSSection extends Component {
     }
     render() {
         var _a, _b, _c;
+        let styles = [Styles.ns_section];
+        if (this.props.center_items)
+            styles.push(Styles.ns_section_center);
         return (_jsx("section", { style: {
                 backgroundImage: (_a = this.state.background) === null || _a === void 0 ? void 0 : _a.image,
                 backgroundColor: (_b = this.state.background) === null || _b === void 0 ? void 0 : _b.color,
                 backgroundPosition: (_c = this.state.background) === null || _c === void 0 ? void 0 : _c.position
-            }, className: Styles.ns_section, children: this.props.children }));
+            }, className: styles.join(" "), children: this.props.children }));
     }
 }
 //# sourceMappingURL=NSSection.js.map

package/dist/components/NSSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSection.js","sourceRoot":"","sources":["../../src/components/NSSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAc3C,MAAM,OAAO,SAAU,SAAQ,SAAyC;IACvE,YAAY,KAAqB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACZ,UAAU,EAAE;gBACX,KAAK,EAAE,OAAO,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK,GAAG;gBACxC,KAAK,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC9B,QAAQ,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,QAAQ;aACpC;SACD,CAAA;IACF,CAAC;IACQ,MAAM;;QAEd,OAAO,CACN,kBAAS,KAAK,EACZ;gBACA,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC7C,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC7C,kBAAkB,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,QAAQ;aACnD,EACD,SAAS,EAAE,MAAM,CAAC,UAAU,YAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,GACX,CACV,CAAC;IACH,CAAC;CACD"}
+{"version":3,"file":"NSSection.js","sourceRoot":"","sources":["../../src/components/NSSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAC7C,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAe3C,MAAM,OAAO,SAAU,SAAQ,SAAyC;IAEvE,YAAY,KAAqB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACZ,UAAU,EAAE;gBACX,KAAK,EAAE,OAAO,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK,GAAG;gBACxC,KAAK,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC9B,QAAQ,EAAE,MAAA,KAAK,CAAC,UAAU,0CAAE,QAAQ;aACpC;SACD,CAAA;IACF,CAAC;IACQ,MAAM;;QAEd,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACjC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY;YAC1B,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QACvC,OAAO,CACN,kBAAS,KAAK,EACZ;gBACA,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC7C,eAAe,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,KAAK;gBAC7C,kBAAkB,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,0CAAE,QAAQ;aACnD,EACD,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,YAC1B,IAAI,CAAC,KAAK,CAAC,QAAQ,GACX,CACV,CAAC;IACH,CAAC;CACD"}

package/dist/components/NSSection.module.css

@@ -2,4 +2,10 @@
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
+}
+
+.ns_section_center {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }

package/dist/components/NSSpace.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSpace.js","sourceRoot":"","sources":["../../src/components/NSSpace.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAN,IAAY,eAYX;AAZD,WAAY,eAAe;IAEvB,+BAAY,CAAA;IACZ,gCAAa,CAAA;IACb,gCAAa,CAAA;IACb,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,kCAAe,CAAA;IACf,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,mCAAgB,CAAA;IAChB,qCAAkB,CAAA;AACtB,CAAC,EAZW,eAAe,KAAf,eAAe,QAY1B;AAOD,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAqC;IACpE,YAAY,KAAmB;QAE3B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IACD,QAAQ,CAAC,IAAqB;QAE1B,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;IAC3B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,aAAI,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,GAAI,CACtH,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSSpace.js","sourceRoot":"","sources":["../../src/components/NSSpace.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAN,IAAY,eAYX;AAZD,WAAY,eAAe;IAEvB,+BAAY,CAAA;IACZ,gCAAa,CAAA;IACb,gCAAa,CAAA;IACb,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,kCAAe,CAAA;IACf,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,mCAAgB,CAAA;IAChB,qCAAkB,CAAA;AACtB,CAAC,EAZW,eAAe,KAAf,eAAe,QAY1B;AAOD,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAqC;IAEpE,YAAY,KAAmB;QAE3B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IACD,QAAQ,CAAC,IAAqB;QAE1B,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;IAC3B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,aAAI,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,GAAI,CACtH,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSTable.d.ts

@@ -15,6 +15,7 @@ export interface NSTableState<RowType> {
         [key: string]: string;
     };
     rows: RowType[];
+    modalState: boolean;
 }
 export declare class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableState<RowType>> {
     constructor(props: NSTableProps<RowType>);

package/dist/components/NSTable.js

@@ -1,11 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import NSButtonGroup from './NSButtonGroup';
+import { NSInputSearch } from './NSInputSearch';
+import { NSPagination } from './NSPagination';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import Styles from './NSTable.module.css';
 import { Component } from 'react';
 export class NSTable extends Component {
     constructor(props) {
         super(props);
-        this.state = { columns: props.columns, rows: props.rows };
+        this.state = { columns: props.columns, rows: props.rows, modalState: false };
     }
     setColumns(columns) {
         this.setState({ columns });
@@ -15,7 +19,7 @@ export class NSTable extends Component {
     }
     render() {
         let column_keys = Object.keys(this.state.columns);
-        return (_jsxs("div", { className: Styles.ns_project_list_container, children: [_jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, this.props.getColumnAttributes(column, columnIndex), { children: this.props.getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsxs("div", { className: Styles.ns_button_group_desktop, children: [_jsxs("button", { onClick: () => window.print(), className: Styles.ns_export_button, children: [_jsx("img", { src: "/assets/images/export-vector.png", alt: "Export Table Data", width: 13, height: 16 }), "Export"] }), _jsxs("button", { onClick: () => window.location.reload(), className: Styles.ns_refresh_button, children: [_jsx("img", { src: "/assets/images/refresh-vector.png", alt: "Refresh Table Contnet", width: 15, height: 16 }), "Refresh"] })] })] }));
+        return (_jsxs("div", { className: `container ${Styles.ns_project_list_container}`, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, {}) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: () => this.setState({ modalState: !this.state.modalState }), children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, this.props.getColumnAttributes(column, columnIndex), { "data-label": this.state.columns[column], children: this.props.getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_button_group, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSButtonGroup, {})] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("section", { onClick: () => this.setState({ modalState: !this.state.modalState }), className: Styles.ns_modal, style: { display: this.state.modalState ? "block" : "none" }, children: [_jsx("a", { children: _jsx("img", { src: '/assets/images/close-vector.png' }) }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. In convallis. Phasellus rhoncus.." })] })] }));
     }
 }
 //# sourceMappingURL=NSTable.js.map

package/dist/components/NSTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBlC,MAAM,OAAO,OAAiB,SAAQ,SAAuD;IAEzF,YAAY,KAA4B;QAEpC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;IAC9D,CAAC;IACD,UAAU,CAAC,OAAkC;QAEzC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/B,CAAC;IACD,OAAO,CAAC,IAAe;QAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACQ,MAAM;QAEX,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAClD,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,aAC5C,iBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,aAC7B,gBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC7B,uBACK,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,aAAqB,KAAK,EAAC,KAAK,YAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,IAAvD,UAAU,CAAmD,CAAC,GACrG,GACD,EACR,gBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,YAEzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAClC,uBAEQ,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACrC,6BAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,cACtD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,IACtD,CACR,CAAC,IAND,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,CAQvC,CAAC,GAET,IACL,EACR,eAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,aAC1C,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,gBAAgB,aAAE,cAAK,GAAG,EAAC,kCAAkC,EAAC,GAAG,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,cAAe,EACvL,kBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,iBAAiB,aAAE,cAAK,GAAG,EAAC,mCAAmC,EAAC,GAAG,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,eAAgB,IACtM,IACH,CACV,CAAA;IACL,CAAC;CACJ"}
+{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/NSTable.module.css

@@ -1,113 +1,146 @@
-.ns_thead th {
-    background-color: rgba(20, 27, 92, 1);
-    font-size: 16px;
-    font-weight: 300;
-    padding: 16px;
-    color: white;
-    font-size: 16px;
-}
-
-.ns_tbody td {
-    background-color: rgb(173, 178, 206);
+.ns_table {
+    display: flex;
+    flex-direction: column;
     color: rgba(20, 27, 92, 1);
-    padding: 8px 16px;
-    font-size: 10px;
-    font-size: 16px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+}
 
+.ns_table thead {
+    clip: rect(0 0 0 0);
+    position: fixed;
 }
 
-.ns_table {
-    width: 100%;
+.ns_table tr {
+    border-radius: 8px;
+    padding: 16px;
+    display: block;
+    background-color: rgba(20, 27, 92, 0.3);
+    margin: 16px 0;
 }
 
-.ns_project_list_container {
-    text-align: left;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
+.ns_table td {
+
+    display: block;
+    padding: 8px 0;
+    font-size: .8em;
+    text-align: right;
 }
 
-.ns_button_group_desktop {
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    gap: 48px;
-    padding: 24px 0;
+.ns_table td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
+    text-transform: uppercase;
 }
 
-.ns_button_group_desktop button {
+/* Button Group  */
+.ns_button_group {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    font-size: 16px;
+}
+
+/* Modal */
+.ns_modal {
+    position: fixed;
+    height: fit-content;
+    top: 25%;
+    left: 0;
     border-radius: 8px;
-    width: 128px;
-    height: 48px;
-    gap: 10px;
-    text-decoration: none;
-    color: black;
-    background-color: transparent;
+    padding: 24px;
+    margin: 0 16px;
+    background-color: rgba(188, 194, 244, 1);
+    z-index: 10;
+    color: rgba(20, 27, 92, 1);
 }
 
-.ns_export_button {
-    border: 1px solid rgba(255, 148, 50, 1);
+.ns_modal a {
+    float: right;
 }
 
-.ns_refresh_button {
-    border: 1px solid rgba(3, 119, 255, 1);
+.modal img {
+    width: 32px;
+    height: 32px;
+    right: 0;
 }
 
-@media only screen and (max-width:600px) {
-    .ns_project_list_container {
-        overflow: auto;
+@media screen and (min-width: 768px) {
+    .ns_table {
+        color: #000000;
     }
-}
 
-/* table-satus */
-.ns_inqueue_status {
-    color: white;
-    background-color: rgba(255, 148, 50, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    .ns_table thead {
+        position: static;
+        background-color: rgba(20, 27, 92, 1);
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+    }
 
-.ns_reserving_status {
-    color: white;
-    background-color: rgba(255, 79, 79, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    .ns_table tbody {
+        background-color: rgba(20, 27, 92, 0.3);
+    }
 
-.ns_done-status {
-    color: white;
-    background-color: rgba(6, 209, 130, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    .ns_table tr {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+        padding: 12px 16px;
+        margin: 0;
+        border-radius: 0;
+        border-bottom: 1px solid rgba(20, 27, 92, 0.3);
+        background-color: transparent;
+    }
 
-.ns_inprogress_status {
-    color: white;
-    background-color: rgba(230, 208, 19, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
+    .ns_table td {
+        text-align: left;
+        display: flex;
+        align-items: start;
+        padding: 0;
+        margin: 0;
+    }
+
+    .ns_table th {
+        font-size: 16px;
+        font-weight: 300;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+    }
+
+    .ns_table td::before {
+        content: attr(none);
+        float: left;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    /* Button Group  */
+    .ns_button_group {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    @media screen and (min-width: 990px) {
+        .ns_table {
+            padding: 0 48px;
+        }
+
+        .ns_table thead {
+            font-size: 24px;
+        }
+
+        .ns_table tr {
+            font-size: 24px;
+        }
+
+        /* Search Input  */
+        .ns_search_input {
+            padding: 0 40px;
+        }
+
+        /* Button Group  */
+        .ns_button_group {
+            padding: 0 48px;
+        }
+    }
 }

package/dist/main.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/NSButtonBlue";
 export * from "./components/NSButtonBlueVector";
 export * from "./components/NSButtonGreen";
+export * from "./components/NSButtonGroup";
 export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";

package/dist/main.js

@@ -1,6 +1,7 @@
 export * from "./components/NSButtonBlue";
 export * from "./components/NSButtonBlueVector";
 export * from "./components/NSButtonGreen";
+export * from "./components/NSButtonGroup";
 export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}

package/package.json

@@ -8,8 +8,8 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.39",
-    "author": "Amir Abolhasani",
+    "version": "1.3.42",
+    "author": "Amir Abolhasani, Alireza Esmaeeli, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
     "types": "./dist/main.d.ts",

package/src/App.tsx

@@ -1,15 +1,53 @@
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSLayoutTitle } from './main';
+import { NSLayoutTitle, NSTable } from './main';
 
 export function App()
 {
+    let columns = {
+        "id": "ID",
+        "project": "Project",
+        "level": "Level",
+        "message": "Message",
+        "cent": "Cent",
+        "status": "Status",
+
+    }
+    let rows = [{
+        id: 1,
+        project: "Namirasoft Account",
+        level: "Debug",
+        message: "Lorem ipsum dolor sit amet, consetetur ",
+        cent: "24",
+        status: "Done"
+    },
+    {
+        id: 2,
+        project: "Namirasoft Account",
+        level: "Debug",
+        message: "Lorem ipsum dolor sit amet, consetetur ",
+        cent: "24",
+        status: "Done"
+    }
+    ]
+    interface Row
+    {
+        id: number,
+        project: string,
+        level: string,
+        message: string,
+        cent: string,
+        status: string
+    }
+    function getCell(row: Row, column: string): any
+    {
+        return (row as any)[column];
+    }
     return (
-        <div className="App">
-            <NSLayoutTitle scope='Namirasoft Account Console' logo='' title="Namirasoft">
-                <div>
-                </div>
-            </NSLayoutTitle>
-        </div>
+        <NSLayoutTitle scope='Namirasoft Account Console' logo='' title="Namirasoft">
+            <div className="container">
+                <NSTable columns={columns} rows={rows} getCell={getCell} getColumnAttributes={() => { return {} }} getRowKey={row => row.id.toString()} />
+            </div>
+        </NSLayoutTitle>
     );
-}
+}   

package/src/components/NSButtonGroup.module.css

@@ -0,0 +1,38 @@
+.ns_button_group_desktop {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.ns_button_group_desktop button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    border-radius: 8px;
+    width: 128px;
+    height: 48px;
+    gap: 10px;
+    text-decoration: none;
+    color: black;
+    background-color: transparent;
+}
+
+.ns_export_button {
+    border: 1px solid rgba(255, 148, 50, 1);
+}
+
+.ns_refresh_button {
+    border: 1px solid rgba(3, 119, 255, 1);
+}
+
+.ns_project img {
+    margin-right: 8px;
+}
+
+@media only screen and (min-width:768px) {
+    .ns_button_group_desktop {
+        gap: 24px;
+    }
+}

package/src/components/NSButtonGroup.tsx

@@ -0,0 +1,12 @@
+import Styles from './NSButtonGroup.module.css'
+function NSButtonGroup()
+{
+    return (
+        <div className={Styles.ns_button_group_desktop}>
+            <button onClick={() => window.print()} className={Styles.ns_export_button}><img src="/assets/images/export-vector.png" alt="Export Table Data" width={13} height={16} />Export</button>
+            <button onClick={() => window.location.reload()} className={Styles.ns_refresh_button}><img src="/assets/images/refresh-vector.png" alt="Refresh Table Contnet" width={15} height={16} />Refresh</button>
+        </div>
+    );
+}
+
+export default NSButtonGroup;

package/src/components/NSInputDuration.tsx

@@ -6,7 +6,9 @@ import IconInputDuration from '../assets/images/icon-input-duration.svg';
 
 export interface NSInputDurationProps
 {
-    title: string;
+	title: string;
+	defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputDurationState
@@ -19,25 +21,27 @@ export class NSInputDuration extends React.Component<NSInputDurationProps, NSInp
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
-        this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
-    }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
+	}
+	getValue(): string
     {
-        this.setState({ value: e.target.value });
-    }
-    setDefaultValue(value: string): void
+        return this.state.value;
+	}
+    setValue(value: string): void
     {
         this.setState({ value });
     }
-    getValue(): string
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        return this.state.value;
-    }
-    override render()
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
+	}
+	override render()
     {
         return (
             <div className={`${Styles.ns_input_parent} p-2`}>
@@ -51,7 +55,7 @@ export class NSInputDuration extends React.Component<NSInputDurationProps, NSInp
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
+					onChange={this.onChanged}
                     type="time"
                     className={Styles.ns_input}
                     placeholder="21:44:06"