@secondstaxorg/sscomp 1.7.86 → 1.7.88

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -570,6 +570,9 @@ const NumberButton = styled.button`
570
570
  display: flex;
571
571
  justify-content: center;
572
572
  align-items: center;
573
+ outline: none;
574
+ border: none;
575
+ cursor: pointer;
573
576
  &.active{
574
577
  background: ${theme.colors["primary-50"]};
575
578
  color: ${theme.colors["primary-500"]};
@@ -579,6 +582,7 @@ const NumberButton = styled.button`
579
582
  background: ${theme.colors["neutral-50"]};
580
583
  color: ${theme.colors["neutral-100"]};
581
584
  border: 1px solid ${theme.colors["neutral-100"]};
585
+ cursor: default;
582
586
  }
583
587
  `;
584
588
 
@@ -590,63 +594,69 @@ const PaginationContainer = styled.div`
590
594
 
591
595
  const _jsxFileName$17 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\Pagination\\index.tsx";
592
596
 
593
-
594
-
595
-
596
-
597
-
598
-
597
+ /**
598
+ * Pagination component for paginating an array
599
+ */
599
600
  const Pagination = (props) => {
600
- const {itemsPerPage,totalItems,returnedPageNum,currPageNum} = props;
601
+ const {itemsPerPage,returnedPageNum,items,paginatedItems} = props;
601
602
  const [pageNum,setPageNum] = React$1.useState(1);
602
603
 
603
604
  const pageNumbers = [];
604
605
 
605
- for(let i = 1; i <= Math.ceil(totalItems/itemsPerPage); i++){
606
+ for(let i = 1; i <= Math.ceil(items.length/itemsPerPage); i++){
606
607
  pageNumbers.push(i);
607
608
  }
608
609
 
609
610
  React$1.useEffect(()=>{
610
- setPageNum(currPageNum);
611
- },[currPageNum]);
611
+ //pagination logic
612
+ if (items.length > 0){
613
+ const lastItemIndex = pageNum * itemsPerPage;
614
+ const firstItemIndex = lastItemIndex - itemsPerPage;
615
+ paginatedItems((items ).slice(firstItemIndex,lastItemIndex)); //set of items based on the itemsPerPage specified
616
+ }
617
+ if (items.length === 0){
618
+ paginatedItems([]);
619
+ }
620
+ },[items,pageNum,itemsPerPage]);
621
+
612
622
 
613
623
  return (
614
624
  React$1.createElement(React$1.Fragment, null
615
625
  , pageNumbers.length > 1 &&
616
- React$1.createElement(PaginationContainer, {__self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 28}}
617
- , React$1.createElement(NumberButton, { onClick: ()=>{
626
+ React$1.createElement(PaginationContainer, {__self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 34}}
627
+ , React$1.createElement(NumberButton, { onClick: ()=>{
618
628
  setPageNum(pageNum - 1);
619
- returnedPageNum(pageNum - 1);
620
- }, disabled: pageNum === 1, __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 29}}
629
+ if (returnedPageNum) returnedPageNum(pageNum - 1);
630
+ }, disabled: pageNum === 1, __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 35}}
621
631
  , pageNum === 1 &&
622
- React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 34}}
623
- , React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 35}})
632
+ React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 40}}
633
+ , React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 41}})
624
634
  )
625
635
 
626
636
  , pageNum > 1 &&
627
- React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 39}}
628
- , React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 40}})
637
+ React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 45}}
638
+ , React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 46}})
629
639
  )
630
640
 
631
641
  )
632
642
  , pageNumbers.map((number) => (
633
- React$1.createElement(NumberButton, { className: `${number === pageNum ? 'active' : ''}`, key: number, onClick: ()=>{
634
- returnedPageNum(number);
643
+ React$1.createElement(NumberButton, { className: `${number === pageNum ? 'active' : ''} somebutton`, key: number, onClick: ()=>{
644
+ if (returnedPageNum) returnedPageNum(number);
635
645
  setPageNum(number);
636
- }, __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 45}}, number)
646
+ }, __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 51}}, number)
637
647
  ))
638
648
  , React$1.createElement(NumberButton, { onClick: ()=>{
639
649
  setPageNum(pageNum + 1);
640
- returnedPageNum(pageNum + 1);
641
- }, disabled: pageNum === pageNumbers.length, __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 50}}
650
+ if (returnedPageNum) returnedPageNum(pageNum + 1);
651
+ }, disabled: pageNum === pageNumbers.length, __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 56}}
642
652
  , pageNum !== pageNumbers.length &&
643
- React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 55}}
644
- , React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 56}})
653
+ React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 61}}
654
+ , React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 62}})
645
655
  )
646
656
 
647
657
  , pageNum === pageNumbers.length &&
648
- React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 60}}
649
- , React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 61}})
658
+ React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 66}}
659
+ , React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$17, lineNumber: 67}})
650
660
  )
651
661
 
652
662
  )
@@ -789,7 +799,7 @@ const AppActionsTable = (props) => {
789
799
 
790
800
  )
791
801
  , React$1.createElement('div', { className: "mt-[12px]", __self: undefined, __source: {fileName: _jsxFileName$16, lineNumber: 137}}
792
- , React$1.createElement(Pagination, { currPageNum: currentPage, itemsPerPage: 10, totalItems: dispActionsOri.length, returnedPageNum: (a)=>{setCurrentPage(a);}, __self: undefined, __source: {fileName: _jsxFileName$16, lineNumber: 138}})
802
+ , React$1.createElement(Pagination, { itemsPerPage: 10, returnedPageNum: (a)=>{setCurrentPage(a);}, items: actions, paginatedItems: (a)=>{setDispActions(a);}, __self: undefined, __source: {fileName: _jsxFileName$16, lineNumber: 138}})
793
803
  )
794
804
  )
795
805
  )
@@ -1002,7 +1012,7 @@ const AppFormsTable = (props) => {
1002
1012
 
1003
1013
  )
1004
1014
  , React$1.createElement('div', { className: "mt-[12px]", __self: undefined, __source: {fileName: _jsxFileName$15, lineNumber: 132}}
1005
- , React$1.createElement(Pagination, { currPageNum: currentPage, itemsPerPage: 10, totalItems: dispFormsOri.length, returnedPageNum: (a)=>{setCurrentPage(a);}, __self: undefined, __source: {fileName: _jsxFileName$15, lineNumber: 133}})
1015
+ , React$1.createElement(Pagination, { itemsPerPage: 10, returnedPageNum: (a)=>{setCurrentPage(a);}, items: forms, paginatedItems: (a)=>{setDispForms(a);}, __self: undefined, __source: {fileName: _jsxFileName$15, lineNumber: 133}})
1006
1016
  )
1007
1017
  )
1008
1018
  )
@@ -1214,7 +1224,7 @@ const AppModulesTable = (props) => {
1214
1224
  )
1215
1225
 
1216
1226
  )
1217
- , React$1.createElement(Pagination, { itemsPerPage: 10, totalItems: modules.length, returnedPageNum: (a)=>{setCurrentPage(a);}, currPageNum: currentPage, __self: undefined, __source: {fileName: _jsxFileName$14, lineNumber: 132}})
1227
+ , React$1.createElement(Pagination, { itemsPerPage: 10, returnedPageNum: (a)=>{setCurrentPage(a);}, items: modules, paginatedItems: (a)=>{setDispModules(a);}, __self: undefined, __source: {fileName: _jsxFileName$14, lineNumber: 132}})
1218
1228
  )
1219
1229
  )
1220
1230
  };
@@ -2065,7 +2075,7 @@ const BrokersTable = (props) => {
2065
2075
  )
2066
2076
 
2067
2077
  )
2068
- , React$1.createElement(Pagination, { itemsPerPage: 10, totalItems: brokers.length, returnedPageNum: (a)=>{setCurrentPage(a);}, currPageNum: currentPage, __self: undefined, __source: {fileName: _jsxFileName$Z, lineNumber: 139}})
2078
+ , React$1.createElement(Pagination, { itemsPerPage: 10, returnedPageNum: (a)=>{setCurrentPage(a);}, items: brokers, paginatedItems: (a)=>{setDispBrokers(a);}, __self: undefined, __source: {fileName: _jsxFileName$Z, lineNumber: 139}})
2069
2079
  )
2070
2080
  )
2071
2081
  };
@@ -17104,7 +17114,7 @@ const CurrencyPairsTable = (props) => {
17104
17114
  )
17105
17115
 
17106
17116
  )
17107
- , React$1.createElement(Pagination, { itemsPerPage: 10, totalItems: pairs.length, returnedPageNum: (a)=>{setCurrentPage(a);}, currPageNum: currentPage, __self: undefined, __source: {fileName: _jsxFileName$T, lineNumber: 218}})
17117
+ , React$1.createElement(Pagination, { itemsPerPage: 10, returnedPageNum: (a)=>{setCurrentPage(a);}, items: pairs, paginatedItems: (a)=>{setDispPairs(a);}, __self: undefined, __source: {fileName: _jsxFileName$T, lineNumber: 218}})
17108
17118
  )
17109
17119
  )
17110
17120
  };
@@ -21565,7 +21575,7 @@ const PaymentMethodsTable = (props) => {
21565
21575
  )
21566
21576
 
21567
21577
  )
21568
- , React$1.createElement(Pagination, { itemsPerPage: 10, totalItems: methods.length, returnedPageNum: (a)=>{setCurrentPage(a);}, currPageNum: currentPage, __self: undefined, __source: {fileName: _jsxFileName$y, lineNumber: 134}})
21578
+ , React$1.createElement(Pagination, { itemsPerPage: 10, returnedPageNum: (a)=>{setCurrentPage(a);}, items: methods, paginatedItems: (a)=>{setDispMethods(a);}, __self: undefined, __source: {fileName: _jsxFileName$y, lineNumber: 134}})
21569
21579
  )
21570
21580
  )
21571
21581
  };
@@ -21981,7 +21991,7 @@ const ProvidersTable = (props) => {
21981
21991
  )
21982
21992
 
21983
21993
  )
21984
- , React$1.createElement(Pagination, { itemsPerPage: 10, totalItems: providers.length, returnedPageNum: (a)=>{setCurrentPage(a);}, currPageNum: currentPage, __self: undefined, __source: {fileName: _jsxFileName$v, lineNumber: 135}})
21994
+ , React$1.createElement(Pagination, { itemsPerPage: 10, returnedPageNum: (a)=>{setCurrentPage(a);}, items: providers, paginatedItems: (a)=>{setDispProvs(a);}, __self: undefined, __source: {fileName: _jsxFileName$v, lineNumber: 135}})
21985
21995
  )
21986
21996
  )
21987
21997
  };
@@ -22518,6 +22528,10 @@ const ConsolidatedContainer = styled.div`
22518
22528
  height: 50px;
22519
22529
  box-sizing: border-box;
22520
22530
 
22531
+ &.success{
22532
+ border-color: ${theme.colors["success-500"]};
22533
+ }
22534
+
22521
22535
  .search-input,.search-btn{
22522
22536
  width: 100%;
22523
22537
  border: none;
@@ -22554,6 +22568,7 @@ const ConsolidatedContainer = styled.div`
22554
22568
  `;
22555
22569
 
22556
22570
  const _jsxFileName$q = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\SearchBar\\SearchBar.tsx";
22571
+
22557
22572
  /**
22558
22573
  * A search field added on the news application to implement search
22559
22574
  */
@@ -22565,28 +22580,28 @@ const SearchBar = (props) => {
22565
22580
  React$1.createElement('form', { onSubmit: (e)=>{
22566
22581
  e.preventDefault();
22567
22582
  submitFxn(searchStr);
22568
- }, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 15}}
22583
+ }, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 16}}
22569
22584
  , !consolidateBtn &&
22570
- React$1.createElement(SearchBarContainer, {__self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 20}}
22571
- , React$1.createElement(TextField, { type: "text", width: 284, value: searchStr, onChange: (e)=>{setSearchStr(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 21}})
22572
- , React$1.createElement(Button$1, { variant: "primary", size: "lg", width: "fit-content", type: "submit", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 22}}
22573
- , React$1.createElement('svg', { width: "21", height: "21", viewBox: "0 0 21 21" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 23}}
22574
- , React$1.createElement('path', { d: "M20.21 19.29L16.5 15.61C17.9401 13.8144 18.6375 11.5353 18.4488 9.2413C18.2601 6.9473 17.1997 4.81278 15.4855 3.27664C13.7714 1.74051 11.5338 0.91951 9.23292 0.98247C6.93203 1.04543 4.74272 1.98756 3.11514 3.61514C1.48756 5.24272 0.545427 7.43204 0.482466 9.73292C0.419506 12.0338 1.2405 14.2714 2.77664 15.9855C4.31278 17.6997 6.4473 18.7601 8.7413 18.9488C11.0353 19.1375 13.3144 18.4401 15.11 17L18.79 20.68C18.883 20.7737 18.9936 20.8481 19.1154 20.8989C19.2373 20.9497 19.368 20.9758 19.5 20.9758C19.632 20.9758 19.7627 20.9497 19.8846 20.8989C20.0064 20.8481 20.117 20.7737 20.21 20.68C20.3902 20.4935 20.491 20.2443 20.491 19.985C20.491 19.7257 20.3902 19.4765 20.21 19.29V19.29ZM9.5 17C8.11553 17 6.76215 16.5895 5.611 15.8203C4.45986 15.0511 3.56265 13.9579 3.03284 12.6788C2.50303 11.3997 2.3644 9.99223 2.6345 8.63437C2.9046 7.2765 3.57128 6.02922 4.55025 5.05025C5.52922 4.07128 6.7765 3.4046 8.13436 3.1345C9.49223 2.86441 10.8997 3.00303 12.1788 3.53284C13.4579 4.06266 14.5511 4.95986 15.3203 6.11101C16.0895 7.26215 16.5 8.61553 16.5 10C16.5 11.8565 15.7625 13.637 14.4497 14.9497C13.137 16.2625 11.3565 17 9.5 17V17Z" , fill: "#F7F9FC", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 24}})
22585
+ React$1.createElement(SearchBarContainer, {__self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 21}}
22586
+ , React$1.createElement(TextField, { type: "text", width: 284, value: searchStr, onChange: (e)=>{setSearchStr(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 22}})
22587
+ , React$1.createElement(Button$1, { variant: "primary", size: "lg", width: "fit-content", type: "submit", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 23}}
22588
+ , React$1.createElement('svg', { width: "21", height: "21", viewBox: "0 0 21 21" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 24}}
22589
+ , React$1.createElement('path', { d: "M20.21 19.29L16.5 15.61C17.9401 13.8144 18.6375 11.5353 18.4488 9.2413C18.2601 6.9473 17.1997 4.81278 15.4855 3.27664C13.7714 1.74051 11.5338 0.91951 9.23292 0.98247C6.93203 1.04543 4.74272 1.98756 3.11514 3.61514C1.48756 5.24272 0.545427 7.43204 0.482466 9.73292C0.419506 12.0338 1.2405 14.2714 2.77664 15.9855C4.31278 17.6997 6.4473 18.7601 8.7413 18.9488C11.0353 19.1375 13.3144 18.4401 15.11 17L18.79 20.68C18.883 20.7737 18.9936 20.8481 19.1154 20.8989C19.2373 20.9497 19.368 20.9758 19.5 20.9758C19.632 20.9758 19.7627 20.9497 19.8846 20.8989C20.0064 20.8481 20.117 20.7737 20.21 20.68C20.3902 20.4935 20.491 20.2443 20.491 19.985C20.491 19.7257 20.3902 19.4765 20.21 19.29V19.29ZM9.5 17C8.11553 17 6.76215 16.5895 5.611 15.8203C4.45986 15.0511 3.56265 13.9579 3.03284 12.6788C2.50303 11.3997 2.3644 9.99223 2.6345 8.63437C2.9046 7.2765 3.57128 6.02922 4.55025 5.05025C5.52922 4.07128 6.7765 3.4046 8.13436 3.1345C9.49223 2.86441 10.8997 3.00303 12.1788 3.53284C13.4579 4.06266 14.5511 4.95986 15.3203 6.11101C16.0895 7.26215 16.5 8.61553 16.5 10C16.5 11.8565 15.7625 13.637 14.4497 14.9497C13.137 16.2625 11.3565 17 9.5 17V17Z" , fill: "#F7F9FC", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 25}})
22575
22590
  )
22576
22591
  )
22577
22592
  )
22578
22593
 
22579
22594
  , consolidateBtn &&
22580
- React$1.createElement(ConsolidatedContainer, { style: {width:295}, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 30}}
22581
- , React$1.createElement('input', { type: "text", className: "search-input", value: searchStr, onChange: (e)=>{setSearchStr(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 31}})
22582
- , React$1.createElement('button', { type: "submit", className: "search-btn", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 32}}
22583
- , React$1.createElement('svg', { width: "24", height: "24", viewBox: "0 0 24 24" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 33}}
22584
- , React$1.createElement('g', { clipPath: "url(#clip0_2419_580)", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 34}}
22585
- , React$1.createElement('path', { d: "M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.9473 18.6997 5.81278 16.9855 4.27664C15.2714 2.7405 13.0338 1.91951 10.7329 1.98247C8.43207 2.04543 6.24275 2.98756 4.61517 4.61514C2.98759 6.24272 2.04546 8.43203 1.9825 10.7329C1.91954 13.0338 2.74053 15.2714 4.27667 16.9855C5.81281 18.6997 7.94733 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5065 21.8481 21.6171 21.7737 21.71 21.68C21.8903 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8903 20.4765 21.71 20.29ZM11 18C9.61556 18 8.26218 17.5895 7.11103 16.8203C5.95989 16.0511 5.06268 14.9579 4.53287 13.6788C4.00306 12.3997 3.86443 10.9922 4.13453 9.63436C4.40463 8.2765 5.07131 7.02922 6.05028 6.05025C7.02925 5.07128 8.27653 4.4046 9.63439 4.1345C10.9923 3.8644 12.3997 4.00303 13.6788 4.53284C14.9579 5.06265 16.0511 5.95986 16.8203 7.111C17.5895 8.26215 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9498 15.9497C14.637 17.2625 12.8565 18 11 18Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 35}})
22595
+ React$1.createElement(ConsolidatedContainer, { className: searchStr ? 'success' : '', style: {width:295}, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 31}}
22596
+ , React$1.createElement('input', { type: "text", className: "search-input", value: searchStr, onChange: (e)=>{setSearchStr(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 32}})
22597
+ , React$1.createElement('button', { type: "submit", className: "search-btn", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 33}}
22598
+ , React$1.createElement('svg', { width: "24", height: "24", viewBox: "0 0 24 24" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 34}}
22599
+ , React$1.createElement('g', { clipPath: "url(#clip0_2419_580)", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 35}}
22600
+ , React$1.createElement('path', { d: "M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.9473 18.6997 5.81278 16.9855 4.27664C15.2714 2.7405 13.0338 1.91951 10.7329 1.98247C8.43207 2.04543 6.24275 2.98756 4.61517 4.61514C2.98759 6.24272 2.04546 8.43203 1.9825 10.7329C1.91954 13.0338 2.74053 15.2714 4.27667 16.9855C5.81281 18.6997 7.94733 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5065 21.8481 21.6171 21.7737 21.71 21.68C21.8903 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8903 20.4765 21.71 20.29ZM11 18C9.61556 18 8.26218 17.5895 7.11103 16.8203C5.95989 16.0511 5.06268 14.9579 4.53287 13.6788C4.00306 12.3997 3.86443 10.9922 4.13453 9.63436C4.40463 8.2765 5.07131 7.02922 6.05028 6.05025C7.02925 5.07128 8.27653 4.4046 9.63439 4.1345C10.9923 3.8644 12.3997 4.00303 13.6788 4.53284C14.9579 5.06265 16.0511 5.95986 16.8203 7.111C17.5895 8.26215 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9498 15.9497C14.637 17.2625 12.8565 18 11 18Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 36}})
22586
22601
  )
22587
- , React$1.createElement('defs', {__self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 37}}
22588
- , React$1.createElement('clipPath', { id: "clip0_2419_580", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 38}}
22589
- , React$1.createElement('rect', { width: "24", height: "24", fill: "white", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 39}})
22602
+ , React$1.createElement('defs', {__self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 38}}
22603
+ , React$1.createElement('clipPath', { id: "clip0_2419_580", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 39}}
22604
+ , React$1.createElement('rect', { width: "24", height: "24", fill: "white", __self: undefined, __source: {fileName: _jsxFileName$q, lineNumber: 40}})
22590
22605
  )
22591
22606
  )
22592
22607
  )
@@ -23337,7 +23352,7 @@ const SystemConfigTable = (props) => {
23337
23352
  )
23338
23353
 
23339
23354
  )
23340
- , React$1.createElement(Pagination, { itemsPerPage: 10, totalItems: configs.length, returnedPageNum: (a)=>{setCurrentPage(a);}, currPageNum: currentPage, __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 134}})
23355
+ , React$1.createElement(Pagination, { itemsPerPage: 10, returnedPageNum: (a)=>{setCurrentPage(a);}, items: configs, paginatedItems: (a)=>{setDispConfigs(a);}, __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 134}})
23341
23356
  )
23342
23357
  )
23343
23358
  };
@@ -24997,7 +25012,7 @@ const UserRolesTable = (props) => {
24997
25012
  )
24998
25013
 
24999
25014
  )
25000
- , React$1.createElement(Pagination, { itemsPerPage: 10, totalItems: roles.length, returnedPageNum: (a)=>{setCurrentPage(a);}, currPageNum: currentPage, __self: undefined, __source: {fileName: _jsxFileName$e, lineNumber: 133}})
25015
+ , React$1.createElement(Pagination, { itemsPerPage: 10, returnedPageNum: (a)=>{setCurrentPage(a);}, items: roles, paginatedItems: (a)=>{setDispRoles(a);}, __self: undefined, __source: {fileName: _jsxFileName$e, lineNumber: 133}})
25001
25016
  )
25002
25017
  )
25003
25018
  };
@@ -25213,7 +25228,7 @@ const UsersTable = (props) => {
25213
25228
  )
25214
25229
 
25215
25230
  )
25216
- , React$1.createElement(Pagination, { itemsPerPage: 10, totalItems: users.length, returnedPageNum: (a)=>{setCurrentPage(a);}, currPageNum: currentPage, __self: undefined, __source: {fileName: _jsxFileName$d, lineNumber: 138}})
25231
+ , React$1.createElement(Pagination, { itemsPerPage: 10, returnedPageNum: (a)=>{setCurrentPage(a);}, items: users, paginatedItems: (a)=>{setDispUsers(a);}, __self: undefined, __source: {fileName: _jsxFileName$d, lineNumber: 138}})
25217
25232
  )
25218
25233
  )
25219
25234
  };