datastake-daf 0.6.364 → 0.6.366

package/.env

@@ -0,0 +1,8 @@
+REACT_APP_API_KEY=
+REACT_APP_AUTH_DOMAIN=
+REACT_APP_PROJECT_ID=
+REACT_APP_STORAGE_BUCKED=
+REACT_APP_SENDER_ID=
+REACT_APP_APP_ID=
+REACT_APP_MEASUREMENT_ID=
+REACT_APP_VAPID_KEY=

package/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+	"cSpell.words": ["cukura"],
+	"files.autoSave": "afterDelay",
+	"editor.wordWrap": "on",
+	"editor.autoClosingBrackets": "always",
+	"editor.autoClosingComments": "always",
+	"editor.autoClosingQuotes": "always",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnPaste": true,
+	"editor.formatOnSave": true,
+	"notebook.defaultFormatter": "esbenp.prettier-vscode",
+	"javascript.format.semicolons": "insert"
+}

package/dist/components/index.js

@@ -47000,6 +47000,7 @@ const filterParams = value => {
   };
 };
 
+const NEW_PAGINATION_TITLES = ["nashiriki"];
 const useFilters = ({
   view,
   module,
@@ -47013,6 +47014,8 @@ const useFilters = ({
   doPagination = true,
   getRedirectLink
 }) => {
+  const PAGE = NEW_PAGINATION_TITLES.includes(module) ? "skip" : "page";
+  const PAGE_SIZE = NEW_PAGINATION_TITLES.includes(module) ? "take" : "pageSize";
   const params = React.useMemo(() => new URLSearchParams(location.search), [location.search]);
   const [activeFilters, setActiveFilters] = React.useState(defaultActiveFilters || getDefaultActiveFilters(params, selectFiltersConfig, defaultPageSize, defaultUrlParams, doPagination));
   const [pagination, setPagination] = React.useState(defaultActiveFilters ? {
@@ -47020,8 +47023,8 @@ const useFilters = ({
     pageSize: defaultActiveFilters.pageSize || defaultPageSize,
     showSizeChanger: true
   } : {
-    current: !isNaN(Number(params.get('page'))) ? Number(params.get('page')) || 1 : 1,
-    pageSize: !isNaN(Number(params.get('pageSize'))) ? Number(params.get('pageSize')) || defaultPageSize : defaultPageSize,
+    current: !isNaN(Number(params.get(PAGE))) ? Number(params.get(PAGE)) || 1 : 1,
+    pageSize: !isNaN(Number(params.get(PAGE_SIZE))) ? Number(params.get(PAGE_SIZE)) || defaultPageSize : defaultPageSize,
     showSizeChanger: true
   });
   React.useEffect(() => {
@@ -47036,32 +47039,32 @@ const useFilters = ({
     }
     setPagination(prev => ({
       ...prev,
-      current: !isNaN(Number(params.get('page'))) ? Number(params.get('page')) || 1 : 1,
-      pageSize: !isNaN(Number(params.get('pageSize'))) ? Number(params.get('pageSize')) || defaultPageSize : defaultPageSize,
+      current: !isNaN(Number(params.get(PAGE))) ? Number(params.get(PAGE)) || 1 : 1,
+      pageSize: !isNaN(Number(params.get(PAGE_SIZE))) ? Number(params.get(PAGE_SIZE)) || defaultPageSize : defaultPageSize,
       showSizeChanger: true
     }));
   }, []);
   const updateQuery = React.useCallback((filters, page) => {
     const qs = Object.keys(filters).filter(key => {
       if (!doPagination) {
-        return !!filters[key] && key !== 'page' && key !== 'pageSize';
+        return !!filters[key] && key !== PAGE && key !== PAGE_SIZE;
       }
       return !!filters[key];
     }).map(key => {
-      if (filters[key] && typeof filters[key] === 'object') {
+      if (filters[key] && typeof filters[key] === "object") {
         return `${key}=${JSON.stringify(filters[key])}`;
       }
       return `${key}=${filters[key]}`;
-    }).join('&');
+    }).join("&");
     if (view) {
-      if (typeof getRedirectLink === 'function') {
-        goTo(getRedirectLink(view === 'mine-monitoring' ? qs !== '' ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?page=${page}` : location.pathname : qs !== '' ? `${`/app/${view}`}?${qs}` : doPagination ? `${`/app/${view}`}?page=${page}` : `${`/app/${view}`}`));
+      if (typeof getRedirectLink === "function") {
+        goTo(getRedirectLink(view === "mine-monitoring" ? qs !== "" ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?${PAGE}=${page}` : location.pathname : qs !== "" ? `${`/app/${view}`}?${qs}` : doPagination ? `${`/app/${view}`}?${PAGE}=${page}` : `${`/app/${view}`}`));
         return;
       }
-      if (view === 'mine-monitoring') {
-        goTo(qs !== '' ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?page=${page}` : location.pathname);
+      if (view === "mine-monitoring") {
+        goTo(qs !== "" ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?${PAGE}=${page}` : location.pathname);
       } else {
-        goTo(qs !== '' ? `${`/app/${module}/${view}`}?${qs}` : doPagination ? `${`/app/${module}/${view}`}?page=${page}` : `${`/app/${module}/${view}`}`);
+        goTo(qs !== "" ? `${`/app/${module}/${view}`}?${qs}` : doPagination ? `${`/app/${module}/${view}`}?${PAGE}=${page}` : `${`/app/${module}/${view}`}`);
       }
     }
   }, [module, view, location.pathname]); // Updated dependency array
@@ -47107,7 +47110,7 @@ const useFilters = ({
         const {
           show
         } = conf;
-        if (typeof show === 'function') {
+        if (typeof show === "function") {
           if (show(filters)) {
             return all;
           }
@@ -47125,7 +47128,7 @@ const useFilters = ({
         ...prev
       };
       Object.keys(o).forEach(k => {
-        if (Object.keys(selectFiltersConfig).includes(k) || k === 'authorId') {
+        if (Object.keys(selectFiltersConfig).includes(k) || k === "authorId") {
           delete o[k];
         }
       });
@@ -47167,8 +47170,8 @@ const useFilters = ({
       };
     } else if (sortBy || sortDir) {
       fs = Object.keys(fs).reduce((all, key) => {
-        if (key !== 'sortDir' && key !== 'sortBy') {
-          if (key === 'page' || key === 'pageSize') {
+        if (key !== "sortDir" && key !== "sortBy") {
+          if (key === PAGE || key === PAGE_SIZE) {
             all[key] = fs[key];
           } else {
             all[key] = activeFilters[key];
@@ -51378,7 +51381,6 @@ function NameNode({
     token
   } = useToken$7();
   const translateFN = typeof data?.t === "function" ? data.t : key => key;
-  const isPdf = data?.isPdf;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(react.Handle, {
       type: "source",
@@ -51397,7 +51399,6 @@ function NameNode({
         opacity: 0
       }
     }), /*#__PURE__*/jsxRuntime.jsxs(Style$d, {
-      $isPdf: isPdf,
       style: {
         opacity: data.isEmpty ? 0.5 : 1
       },
@@ -51448,7 +51449,7 @@ function NameNode({
               }
             })
           }) : null]
-        }), !isPdf && /*#__PURE__*/jsxRuntime.jsx("div", {
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
           style: {
             marginLeft: "auto"
           },
@@ -51485,32 +51486,27 @@ function NameNode({
   });
 }
 const Style$d = dt.div`
-    width: ${NAME_CARD_WIDTH}px;
-    display: flex;
-    background: white;
-    border-radius: 8px;
-    /* Box-shadows for screen */
-    box-shadow: 0px 3.76px 10.03px 0px #00000014;
-    box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
-    overflow: hidden;
-    box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
-    /* Ensure borders/colors survive PDF rendering */
-    border: ${props => props.$isPdf ? '1px solid var(--base-gray-30)' : 'none'};
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
+	width: ${NAME_CARD_WIDTH}px;
+	display: flex;
+	background: white;
+	border-radius: 8px;
+	box-shadow: 0px 3.76px 10.03px 0px #00000014;
+	box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
+	overflow: hidden;
+	box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
 
-    .left {
-        width: 32px;
-        background: red;
-        border-top-left-radius: 12px;
-        border-bottom-left-radius: 12px;
-    }
+	.left {
+		width: 32px;
+		background: red;
+		border-top-left-radius: 12px;
+		border-bottom-left-radius: 12px;
+	}
 
-    .right {
-        padding: 16px 12px;
-        width: 100%;
-        border-bottom: 1px solid var(--base-gray-30);
-    }
+	.right {
+		padding: 16px 12px;
+		width: 100%
+		border-bottom: 1px solid var(--base-gray-30);
+	}
 `;
 
 const Style$c = dt.div`
@@ -52085,7 +52081,6 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
   t,
   withDuration = true,
   onFilterChange,
-  isPdf,
   ...props
 }, ref) {
   const {
@@ -52142,7 +52137,7 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
           duration: withDuration ? 300 : undefined
         },
         ...props,
-        children: !isPdf && /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
           position: "bottom-right",
           showFitView: false,
           showInteractive: false,
@@ -52659,8 +52654,7 @@ function positionDataNodes(_ref2) {
     total,
     mainNode,
     type,
-    hasContent,
-    isPdf
+    hasContent
   } = _ref2;
   const DATA_NODE_WIDTH = DATA_NODE_SIZE[type].width;
   const DATA_NODE_HEIGHT = DATA_NODE_SIZE[type].height;
@@ -52686,7 +52680,7 @@ function positionDataNodes(_ref2) {
   const startY = iconNodeCenterY - totalHeight / 2;
   const END_Y = startY + totalHeight;
   const yOffset = index * MIN_SPACE_REQUIRED;
-  let yPosition = startY + yOffset + (isPdf ? 50 : 0);
+  let yPosition = startY + yOffset;
   if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
     yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
   } else if (!isAboveMainNode && startY < mainNode.position.y + DATA_NODE_HEIGHT / 2) {
@@ -52877,7 +52871,6 @@ function StakeholderMappings(_ref3) {
             isLeftSide: node.data.order % 2 !== 0,
             isAboveMainNode: node.data.order <= 2,
             iconNode: node,
-            isPdf: true,
             index: 0,
             total: 1,
             mainNode,
@@ -52976,8 +52969,7 @@ function StakeholderMappings(_ref3) {
         duration: 300
       });
     },
-    ref: reactFlowWrapper,
-    isPdf: isPdf
+    ref: reactFlowWrapper
   });
 }
 var index$1 = withProvider(StakeholderMappings);

package/dist/hooks/index.js

@@ -200,6 +200,7 @@ class StorageManager {
   }
 }
 
+const NEW_PAGINATION_TITLES = ["nashiriki"];
 const useFilters = ({
   view,
   module,
@@ -213,6 +214,8 @@ const useFilters = ({
   doPagination = true,
   getRedirectLink
 }) => {
+  const PAGE = NEW_PAGINATION_TITLES.includes(module) ? "skip" : "page";
+  const PAGE_SIZE = NEW_PAGINATION_TITLES.includes(module) ? "take" : "pageSize";
   const params = React.useMemo(() => new URLSearchParams(location.search), [location.search]);
   const [activeFilters, setActiveFilters] = React.useState(defaultActiveFilters || getDefaultActiveFilters(params, selectFiltersConfig, defaultPageSize, defaultUrlParams, doPagination));
   const [pagination, setPagination] = React.useState(defaultActiveFilters ? {
@@ -220,8 +223,8 @@ const useFilters = ({
     pageSize: defaultActiveFilters.pageSize || defaultPageSize,
     showSizeChanger: true
   } : {
-    current: !isNaN(Number(params.get('page'))) ? Number(params.get('page')) || 1 : 1,
-    pageSize: !isNaN(Number(params.get('pageSize'))) ? Number(params.get('pageSize')) || defaultPageSize : defaultPageSize,
+    current: !isNaN(Number(params.get(PAGE))) ? Number(params.get(PAGE)) || 1 : 1,
+    pageSize: !isNaN(Number(params.get(PAGE_SIZE))) ? Number(params.get(PAGE_SIZE)) || defaultPageSize : defaultPageSize,
     showSizeChanger: true
   });
   React.useEffect(() => {
@@ -236,32 +239,32 @@ const useFilters = ({
     }
     setPagination(prev => ({
       ...prev,
-      current: !isNaN(Number(params.get('page'))) ? Number(params.get('page')) || 1 : 1,
-      pageSize: !isNaN(Number(params.get('pageSize'))) ? Number(params.get('pageSize')) || defaultPageSize : defaultPageSize,
+      current: !isNaN(Number(params.get(PAGE))) ? Number(params.get(PAGE)) || 1 : 1,
+      pageSize: !isNaN(Number(params.get(PAGE_SIZE))) ? Number(params.get(PAGE_SIZE)) || defaultPageSize : defaultPageSize,
       showSizeChanger: true
     }));
   }, []);
   const updateQuery = React.useCallback((filters, page) => {
     const qs = Object.keys(filters).filter(key => {
       if (!doPagination) {
-        return !!filters[key] && key !== 'page' && key !== 'pageSize';
+        return !!filters[key] && key !== PAGE && key !== PAGE_SIZE;
       }
       return !!filters[key];
     }).map(key => {
-      if (filters[key] && typeof filters[key] === 'object') {
+      if (filters[key] && typeof filters[key] === "object") {
         return `${key}=${JSON.stringify(filters[key])}`;
       }
       return `${key}=${filters[key]}`;
-    }).join('&');
+    }).join("&");
     if (view) {
-      if (typeof getRedirectLink === 'function') {
-        goTo(getRedirectLink(view === 'mine-monitoring' ? qs !== '' ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?page=${page}` : location.pathname : qs !== '' ? `${`/app/${view}`}?${qs}` : doPagination ? `${`/app/${view}`}?page=${page}` : `${`/app/${view}`}`));
+      if (typeof getRedirectLink === "function") {
+        goTo(getRedirectLink(view === "mine-monitoring" ? qs !== "" ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?${PAGE}=${page}` : location.pathname : qs !== "" ? `${`/app/${view}`}?${qs}` : doPagination ? `${`/app/${view}`}?${PAGE}=${page}` : `${`/app/${view}`}`));
         return;
       }
-      if (view === 'mine-monitoring') {
-        goTo(qs !== '' ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?page=${page}` : location.pathname);
+      if (view === "mine-monitoring") {
+        goTo(qs !== "" ? `${location.pathname}?${qs}` : doPagination ? `${location.pathname}?${PAGE}=${page}` : location.pathname);
       } else {
-        goTo(qs !== '' ? `${`/app/${module}/${view}`}?${qs}` : doPagination ? `${`/app/${module}/${view}`}?page=${page}` : `${`/app/${module}/${view}`}`);
+        goTo(qs !== "" ? `${`/app/${module}/${view}`}?${qs}` : doPagination ? `${`/app/${module}/${view}`}?${PAGE}=${page}` : `${`/app/${module}/${view}`}`);
       }
     }
   }, [module, view, location.pathname]); // Updated dependency array
@@ -307,7 +310,7 @@ const useFilters = ({
         const {
           show
         } = conf;
-        if (typeof show === 'function') {
+        if (typeof show === "function") {
           if (show(filters)) {
             return all;
           }
@@ -325,7 +328,7 @@ const useFilters = ({
         ...prev
       };
       Object.keys(o).forEach(k => {
-        if (Object.keys(selectFiltersConfig).includes(k) || k === 'authorId') {
+        if (Object.keys(selectFiltersConfig).includes(k) || k === "authorId") {
           delete o[k];
         }
       });
@@ -367,8 +370,8 @@ const useFilters = ({
       };
     } else if (sortBy || sortDir) {
       fs = Object.keys(fs).reduce((all, key) => {
-        if (key !== 'sortDir' && key !== 'sortBy') {
-          if (key === 'page' || key === 'pageSize') {
+        if (key !== "sortDir" && key !== "sortBy") {
+          if (key === PAGE || key === PAGE_SIZE) {
             all[key] = fs[key];
           } else {
             all[key] = activeFilters[key];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.364",
+	"version": "0.6.366",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Charts/ColumnChart/ColumnChart.stories.jsx

@@ -457,34 +457,6 @@ export const Pdf = {
 		showBackground: true,
 		isPercentage: true,
 		shouldSeperateLegendName: true,
-		formattedXAxis: (s) => {
-			if (!s) return "";
-		  
-			const limit = 20;
-			let result = "";
-			let line = "";
-		  
-			for (let word of s.split(" ")) {
-			  if ((line + word).length <= limit) {
-				line += (line ? " " : "") + word;
-			  } else if (word.length > limit) {
-				// break long word with hyphen
-				while (word.length > limit) {
-				  result += word.slice(0, limit - 1) + "-\n";
-				  word = word.slice(limit - 1);
-				}
-				line = word;
-			  } else {
-				// move current line into result
-				if (line) result += line + "\n";
-				line = word;
-			  }
-			}
-		  
-			if (line) result += line;
-		  
-			return result;
-		  },
 	},
 	render: (args) => {
 		return <Widget title="Pdf Column Chart" className={"with-border-header"}>

package/src/@daf/core/components/Graphs/StakeholderMappings/index.jsx

@@ -72,7 +72,6 @@ function positionDataNodes({
 	mainNode,
 	type,
 	hasContent,
-	isPdf,
 }) {
 	const DATA_NODE_WIDTH = DATA_NODE_SIZE[type].width;
 	const DATA_NODE_HEIGHT = DATA_NODE_SIZE[type].height;
@@ -105,7 +104,7 @@ function positionDataNodes({
 
 	const yOffset = index * MIN_SPACE_REQUIRED;
 
-	let yPosition = startY + yOffset + (isPdf ? 50 : 0);
+	let yPosition = startY + yOffset;
 
 	if (isAboveMainNode && END_Y >= mainNode.position.y + DATA_NODE_HEIGHT / 2) {
 		yPosition = mainNode.position.y + DATA_NODE_HEIGHT / 2 - totalHeight + yOffset;
@@ -326,7 +325,6 @@ function StakeholderMappings({
 							isLeftSide: node.data.order % 2 !== 0,
 							isAboveMainNode: node.data.order <= 2,
 							iconNode: node,
-							isPdf: true,
 							index: 0,
 							total: 1,
 							mainNode,
@@ -446,7 +444,6 @@ function StakeholderMappings({
 				});
 			}}
 			ref={reactFlowWrapper}
-			isPdf={isPdf}
 		/>
 	);
 }

package/src/@daf/core/components/Graphs/components/BaseGraph.jsx

@@ -32,7 +32,6 @@ const BaseGraph = forwardRef(function BaseGraph(
 		t,
 		withDuration = true,
 		onFilterChange,
-		isPdf,
 		...props
 	},
 	ref,
@@ -88,45 +87,43 @@ const BaseGraph = forwardRef(function BaseGraph(
 					}}
 					{...props}
 				>
-					{!isPdf && (
-						<Controls position="bottom-right" showFitView={false} showInteractive={false}>
-							<ControlButton
-								onClick={() => {
-									fitView({
-										padding: 0.1,
-										nodes: [...nodesToFit],
-										duration: withDuration ? 300 : undefined,
-									});
-								}}
-							>
-								<AimOutlined height={20} width={20} />
-							</ControlButton>
-							<ControlButton
-								onClick={() => {
-									const viewport = getViewport();
-									setViewport({
-										x: viewport.x,
-										y: viewport.y + 20,
-										zoom: viewport.zoom,
-									});
-								}}
-							>
-								<UpOutlined height={20} width={20}></UpOutlined>
-							</ControlButton>
-							<ControlButton
-								onClick={() => {
-									const viewport = getViewport();
-									setViewport({
-										x: viewport.x,
-										y: viewport.y - 20,
-										zoom: viewport.zoom,
-									});
-								}}
-							>
-								<DownOutlined height={20} width={20}></DownOutlined>
-							</ControlButton>
-						</Controls>	
-					)}
+					<Controls position="bottom-right" showFitView={false} showInteractive={false}>
+						<ControlButton
+							onClick={() => {
+								fitView({
+									padding: 0.1,
+									nodes: [...nodesToFit],
+									duration: withDuration ? 300 : undefined,
+								});
+							}}
+						>
+							<AimOutlined height={20} width={20} />
+						</ControlButton>
+						<ControlButton
+							onClick={() => {
+								const viewport = getViewport();
+								setViewport({
+									x: viewport.x,
+									y: viewport.y + 20,
+									zoom: viewport.zoom,
+								});
+							}}
+						>
+							<UpOutlined height={20} width={20}></UpOutlined>
+						</ControlButton>
+						<ControlButton
+							onClick={() => {
+								const viewport = getViewport();
+								setViewport({
+									x: viewport.x,
+									y: viewport.y - 20,
+									zoom: viewport.zoom,
+								});
+							}}
+						>
+							<DownOutlined height={20} width={20}></DownOutlined>
+						</ControlButton>
+					</Controls>
 				</ReactFlow>
 			</div>
 		</ComponentWithFocus>

package/src/@daf/core/components/Graphs/components/Nodes/NameNode.jsx

@@ -13,8 +13,6 @@ const { useToken } = theme;
 export default function NameNode({ data }) {
   const { token } = useToken();
   const translateFN = typeof data?.t === "function" ? data.t : (key) => key;
-  const isPdf = data?.isPdf;
-
   return (
     <>
       <Handle
@@ -36,7 +34,6 @@ export default function NameNode({ data }) {
         }}
       />
       <Style
-        $isPdf={isPdf}
         style={{
           opacity: data.isEmpty ? 0.5 : 1,
         }}
@@ -98,21 +95,19 @@ export default function NameNode({ data }) {
             ) : null}
           </div>
 
-          {!isPdf && (
-            <div
-                style={{
-                  marginLeft: "auto",
-                }}
-                className="go-to"
-                onClick={() => {
-                  if (typeof data.onClick === "function") {
-                    data.onClick();
-                  }
-                }}
-              >
-                <CustomIcon height={14} width={14} name="LinkNewTab" />
-            </div> 
-          )}
+          <div
+            style={{
+              marginLeft: "auto",
+            }}
+            className="go-to"
+            onClick={() => {
+              if (typeof data.onClick === "function") {
+                data.onClick();
+              }
+            }}
+          >
+            <CustomIcon height={14} width={14} name="LinkNewTab" />
+          </div>
         </div>
       </Style>
       <Handle
@@ -134,30 +129,25 @@ export default function NameNode({ data }) {
 }
 
 const Style = styled.div`
-    width: ${NAME_CARD_WIDTH}px;
-    display: flex;
-    background: white;
-    border-radius: 8px;
-    /* Box-shadows for screen */
-    box-shadow: 0px 3.76px 10.03px 0px #00000014;
-    box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
-    overflow: hidden;
-    box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
-    /* Ensure borders/colors survive PDF rendering */
-    border: ${(props) => (props.$isPdf ? '1px solid var(--base-gray-30)' : 'none')};
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
+	width: ${NAME_CARD_WIDTH}px;
+	display: flex;
+	background: white;
+	border-radius: 8px;
+	box-shadow: 0px 3.76px 10.03px 0px #00000014;
+	box-shadow: 0px 1.88px 3.76px -2.51px #0000001f;
+	overflow: hidden;
+	box-shadow: 0px 5.64px 17.56px 5.02px #0000000d;
 
-    .left {
-        width: 32px;
-        background: red;
-        border-top-left-radius: 12px;
-        border-bottom-left-radius: 12px;
-    }
+	.left {
+		width: 32px;
+		background: red;
+		border-top-left-radius: 12px;
+		border-bottom-left-radius: 12px;
+	}
 
-    .right {
-        padding: 16px 12px;
-        width: 100%;
-        border-bottom: 1px solid var(--base-gray-30);
-    }
+	.right {
+		padding: 16px 12px;
+		width: 100%
+		border-bottom: 1px solid var(--base-gray-30);
+	}
 `;

package/src/@daf/hooks/useFilters.js

@@ -1,281 +1,323 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { getDefaultActiveFilters } from '../utils/filters';
-import { StorageManager } from '../../helpers/StorageManager';
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { getDefaultActiveFilters } from "../utils/filters";
+import { StorageManager } from "../../helpers/StorageManager";
+
+const NEW_PAGINATION_TITLES = ["nashiriki"];
 
 export const useFilters = ({
-  view,
-  module,
-  filtersConfig,
-  goTo,
-  location,
-  selectFiltersConfig,
-  defaultPageSize = 20,
-  defaultActiveFilters,
-  defaultUrlParams = {},
-  doPagination = true,
-  getRedirectLink,
+	view,
+	module,
+	filtersConfig,
+	goTo,
+	location,
+	selectFiltersConfig,
+	defaultPageSize = 20,
+	defaultActiveFilters,
+	defaultUrlParams = {},
+	doPagination = true,
+	getRedirectLink,
 }) => {
-  const params = useMemo(() => new URLSearchParams(location.search), [location.search]);
-  const [activeFilters, setActiveFilters] = useState(
-    defaultActiveFilters || getDefaultActiveFilters(params, selectFiltersConfig, defaultPageSize, defaultUrlParams, doPagination)
-  );
-  const [pagination, setPagination] = useState(
-    defaultActiveFilters ? {
-      current: defaultActiveFilters.page || 1,
-      pageSize: defaultActiveFilters.pageSize || defaultPageSize,
-      showSizeChanger: true,
-    } : {
-      current: !isNaN(Number(params.get('page'))) ? Number(params.get('page')) || 1 : 1,
-      pageSize: !isNaN(Number(params.get('pageSize'))) ? Number(params.get('pageSize')) || defaultPageSize : defaultPageSize,
-      showSizeChanger: true,
-    });
-
-  useEffect(() => {
-    if (defaultActiveFilters) {
-      setPagination((prev) => ({
-        ...prev,
-        current: defaultActiveFilters.page || 1,
-        pageSize: defaultActiveFilters.pageSize || defaultPageSize,
-        showSizeChanger: true,
-      }));
-      return;
-    }
-    setPagination((prev) => ({
-      ...prev,
-      current: !isNaN(Number(params.get('page'))) ? Number(params.get('page')) || 1 : 1,
-      pageSize: !isNaN(Number(params.get('pageSize'))) ? Number(params.get('pageSize')) || defaultPageSize : defaultPageSize,
-      showSizeChanger: true,
-    }));
-  }, []);
-
-  const updateQuery = useCallback((filters, page) => {
-    const qs = Object.keys(filters)
-      .filter((key) => {
-        if (!doPagination) {
-          return !!filters[key] && key !== 'page' && key !== 'pageSize';
-        }
-
-        return !!filters[key];
-      })
-      .map(key => {
-        if (filters[key] && typeof filters[key] === 'object') {
-          return `${key}=${JSON.stringify(filters[key])}`;
-        }
-        return `${key}=${filters[key]}`;
-      })
-      .join('&');
-
-    if (view) {
-      if (typeof getRedirectLink === 'function') {
-        goTo(getRedirectLink(
-          view === 'mine-monitoring' 
-            ? (qs !== '' ? `${location.pathname}?${qs}`
-                : doPagination ? `${location.pathname}?page=${page}`
-                  : location.pathname)
-            : (qs !== '' ? `${`/app/${view}`}?${qs}`
-                : doPagination ? `${`/app/${view}`}?page=${page}`
-                  : `${`/app/${view}`}`)
-        ));
-        return;
-      }
-
-      if (view === 'mine-monitoring') {
-        goTo(
-          qs !== '' ? `${location.pathname}?${qs}`
-            : doPagination ? `${location.pathname}?page=${page}`
-              : location.pathname);
-      } else {
-        goTo(
-          qs !== '' ? `${`/app/${module}/${view}`}?${qs}`
-            : doPagination ? `${`/app/${module}/${view}`}?page=${page}`
-              : `${`/app/${module}/${view}`}`);
-      }
-    }
-  }, [module, view, location.pathname]); // Updated dependency array
-
-  const defaultFilters = useMemo(() => {
-    const def = {};
-    Object.keys(selectFiltersConfig).forEach((key) => {
-      if (activeFilters[key]) {
-        def[key] = activeFilters[key];
-      }
-    });
-    return def;
-  }, [activeFilters, selectFiltersConfig]);
-
-  const newFiltersConfig = useMemo(() => {
-    const o = filtersConfig;
-    Object.keys(filtersConfig).forEach((key) => {
-      if (params.has(key)) {
-        o[key] = params.get(key);
-      }
-    });
-    return o;
-  }, [params, filtersConfig]);
-
-  useEffect(() => {
-    const filteredFilters = Object.keys(activeFilters).reduce((all, key) => {
-      if (activeFilters[key]) {
-        all[key] = activeFilters[key];
-      }
-      return all;
-    }, {});
-
-    const filters = StorageManager.saveFilters(module, view, { ...filteredFilters });
-
-    if (!filters.pageSize) {
-      filters.page = 1;
-      filters.pageSize = pagination.pageSize;
-    }
-
-    updateQuery(filters, 1);
-  }, [activeFilters]);
-
-  const onFiltersChange = useCallback((filters) => {
-    const filteredFilters = Object.keys(filters).reduce((all, key) => {
-      const conf = selectFiltersConfig[key];
-      if (conf) {
-        const { show } = conf;
-        if (typeof show === 'function') {
-          if (show(filters)) {
-            return all;
-          }
-        }
-      }
-
-      if (Array.isArray(filters[key]) && !filters[key].length) {
-        all[key] = undefined;
-        return all;
-      }
-
-      all[key] = filters[key];
-      return all;
-    }, {});
-
-    setActiveFilters((prev) => {
-      const o = { ...prev };
-      Object.keys(o).forEach((k) => {
-        if (Object.keys(selectFiltersConfig).includes(k) || k === 'authorId') {
-          delete o[k];
-        }
-      });
-      Object.entries(filteredFilters).forEach(([k, v]) => {
-        o[k] = v;
-      });
-
-      if (doPagination) {
-        o.page = 1;
-      }
-
-      return o;
-    });
-    setPagination((prev) => ({ ...prev, current: 1 }));
-  }, [selectFiltersConfig]);
-
-  const onTableChange = (page, f, sorter) => {
-    const { sortBy, sortDir } = activeFilters;
-    const { columnKey, order } = sorter || {};
-
-    let fs = {
-      ...activeFilters,
-      page: page.pageSize !== activeFilters.pageSize ? 1 : page.current,
-      pageSize: page.pageSize || defaultPageSize,
-    };
-
-    if (sorter && (columnKey !== sortBy || order !== sortDir)) {
-      fs.page = 1;
-    }
-
-    if (order) {
-      fs = { ...fs, sortDir: order, sortBy: columnKey };
-    } else if (sortBy || sortDir) {
-      fs = Object.keys(fs).reduce((all, key) => {
-        if (key !== 'sortDir' && key !== 'sortBy') {
-          if (key === 'page' || key === 'pageSize') {
-            all[key] = fs[key];
-          } else {
-            all[key] = activeFilters[key];
-          }
-        }
-        return all;
-      }, {});
-    }
-
-    setActiveFilters(fs);
-
-    if (isNaN(page.current)) {
-      page.current = 1;
-    }
-
-    const filters = StorageManager.saveFilters(module, view, { page: page.current }, true);
-
-    updateQuery(filters, page.current);
-    setPagination((prev) => ({
-      ...prev,
-      current: fs.page,
-      pageSize: fs.pageSize || defaultPageSize
-    }));
-  };
-
-  const onSearch = useCallback((activeFilter, value) => {
-    setActiveFilters((prev) => ({
-      ...prev,
-      page: 1,
-      searchParams: activeFilter,
-      search: value,
-    }));
-    setPagination((prev) => ({ ...prev, current: 1 }));
-  }, []);
-
-  const totalPages = useMemo(() => {
-    return Math.ceil(pagination.total / pagination.pageSize);
-  }, [pagination]);
-
-  const canGoPrev = useMemo(() => pagination.current !== 1, [pagination]);
-  const canGoNext = useMemo(() => pagination.current !== totalPages && totalPages, [pagination, totalPages]);
-
-  const goPrev = () => {
-    if (!canGoPrev) {
-      return;
-    }
-
-    const { sortDir, sortBy } = activeFilters;
-
-    onTableChange(
-      { ...pagination, current: pagination.current - 1 },
-      undefined,
-      sortBy && sortDir ? { sortBy, sortDir } : undefined
-    );
-  };
-
-  const goNext = () => {
-    if (!canGoNext) {
-      return;
-    }
-
-    const { sortDir, sortBy } = activeFilters;
-
-    onTableChange(
-      { ...pagination, current: pagination.current + 1 },
-      undefined,
-      sortBy && sortDir ? { columnKey: sortBy, order: sortDir } : undefined
-    );
-  };
-
-  return {
-    newFiltersConfig,
-    totalPages,
-    canGoNext,
-    canGoPrev,
-    goPrev,
-    goNext,
-    pagination,
-    activeFilters,
-    onSearch,
-    defaultFilters,
-    onTableChange,
-    setPagination,
-    onFiltersChange,
-    setActiveFilters,
-  };
+	const PAGE = NEW_PAGINATION_TITLES.includes(module) ? "skip" : "page";
+	const PAGE_SIZE = NEW_PAGINATION_TITLES.includes(module) ? "take" : "pageSize";
+
+	const params = useMemo(() => new URLSearchParams(location.search), [location.search]);
+	const [activeFilters, setActiveFilters] = useState(
+		defaultActiveFilters ||
+			getDefaultActiveFilters(
+				params,
+				selectFiltersConfig,
+				defaultPageSize,
+				defaultUrlParams,
+				doPagination,
+			),
+	);
+	const [pagination, setPagination] = useState(
+		defaultActiveFilters
+			? {
+					current: defaultActiveFilters.page || 1,
+					pageSize: defaultActiveFilters.pageSize || defaultPageSize,
+					showSizeChanger: true,
+			  }
+			: {
+					current: !isNaN(Number(params.get(PAGE)))
+						? Number(params.get(PAGE)) || 1
+						: 1,
+					pageSize: !isNaN(Number(params.get(PAGE_SIZE)))
+						? Number(params.get(PAGE_SIZE)) || defaultPageSize
+						: defaultPageSize,
+					showSizeChanger: true,
+			  },
+	);
+
+	useEffect(() => {
+		if (defaultActiveFilters) {
+			setPagination((prev) => ({
+				...prev,
+				current: defaultActiveFilters.page || 1,
+				pageSize: defaultActiveFilters.pageSize || defaultPageSize,
+				showSizeChanger: true,
+			}));
+			return;
+		}
+		setPagination((prev) => ({
+			...prev,
+			current: !isNaN(Number(params.get(PAGE))) ? Number(params.get(PAGE)) || 1 : 1,
+			pageSize: !isNaN(Number(params.get(PAGE_SIZE)))
+				? Number(params.get(PAGE_SIZE)) || defaultPageSize
+				: defaultPageSize,
+			showSizeChanger: true,
+		}));
+	}, []);
+
+	const updateQuery = useCallback(
+		(filters, page) => {
+			const qs = Object.keys(filters)
+				.filter((key) => {
+					if (!doPagination) {
+						return !!filters[key] && key !== PAGE && key !== PAGE_SIZE;
+					}
+
+					return !!filters[key];
+				})
+				.map((key) => {
+					if (filters[key] && typeof filters[key] === "object") {
+						return `${key}=${JSON.stringify(filters[key])}`;
+					}
+					return `${key}=${filters[key]}`;
+				})
+				.join("&");
+
+			if (view) {
+				if (typeof getRedirectLink === "function") {
+					goTo(
+						getRedirectLink(
+							view === "mine-monitoring"
+								? qs !== ""
+									? `${location.pathname}?${qs}`
+									: doPagination
+									? `${location.pathname}?${PAGE}=${page}`
+									: location.pathname
+								: qs !== ""
+								? `${`/app/${view}`}?${qs}`
+								: doPagination
+								? `${`/app/${view}`}?${PAGE}=${page}`
+								: `${`/app/${view}`}`,
+						),
+					);
+					return;
+				}
+
+				if (view === "mine-monitoring") {
+					goTo(
+						qs !== ""
+							? `${location.pathname}?${qs}`
+							: doPagination
+							? `${location.pathname}?${PAGE}=${page}`
+							: location.pathname,
+					);
+				} else {
+					goTo(
+						qs !== ""
+							? `${`/app/${module}/${view}`}?${qs}`
+							: doPagination
+							? `${`/app/${module}/${view}`}?${PAGE}=${page}`
+							: `${`/app/${module}/${view}`}`,
+					);
+				}
+			}
+		},
+		[module, view, location.pathname],
+	); // Updated dependency array
+
+	const defaultFilters = useMemo(() => {
+		const def = {};
+		Object.keys(selectFiltersConfig).forEach((key) => {
+			if (activeFilters[key]) {
+				def[key] = activeFilters[key];
+			}
+		});
+		return def;
+	}, [activeFilters, selectFiltersConfig]);
+
+	const newFiltersConfig = useMemo(() => {
+		const o = filtersConfig;
+		Object.keys(filtersConfig).forEach((key) => {
+			if (params.has(key)) {
+				o[key] = params.get(key);
+			}
+		});
+		return o;
+	}, [params, filtersConfig]);
+
+	useEffect(() => {
+		const filteredFilters = Object.keys(activeFilters).reduce((all, key) => {
+			if (activeFilters[key]) {
+				all[key] = activeFilters[key];
+			}
+			return all;
+		}, {});
+
+		const filters = StorageManager.saveFilters(module, view, { ...filteredFilters });
+
+		if (!filters.pageSize) {
+			filters.page = 1;
+			filters.pageSize = pagination.pageSize;
+		}
+
+		updateQuery(filters, 1);
+	}, [activeFilters]);
+
+	const onFiltersChange = useCallback(
+		(filters) => {
+			const filteredFilters = Object.keys(filters).reduce((all, key) => {
+				const conf = selectFiltersConfig[key];
+				if (conf) {
+					const { show } = conf;
+					if (typeof show === "function") {
+						if (show(filters)) {
+							return all;
+						}
+					}
+				}
+
+				if (Array.isArray(filters[key]) && !filters[key].length) {
+					all[key] = undefined;
+					return all;
+				}
+
+				all[key] = filters[key];
+				return all;
+			}, {});
+
+			setActiveFilters((prev) => {
+				const o = { ...prev };
+				Object.keys(o).forEach((k) => {
+					if (Object.keys(selectFiltersConfig).includes(k) || k === "authorId") {
+						delete o[k];
+					}
+				});
+				Object.entries(filteredFilters).forEach(([k, v]) => {
+					o[k] = v;
+				});
+
+				if (doPagination) {
+					o.page = 1;
+				}
+
+				return o;
+			});
+			setPagination((prev) => ({ ...prev, current: 1 }));
+		},
+		[selectFiltersConfig],
+	);
+
+	const onTableChange = (page, f, sorter) => {
+		const { sortBy, sortDir } = activeFilters;
+		const { columnKey, order } = sorter || {};
+
+		let fs = {
+			...activeFilters,
+			page: page.pageSize !== activeFilters.pageSize ? 1 : page.current,
+			pageSize: page.pageSize || defaultPageSize,
+		};
+
+		if (sorter && (columnKey !== sortBy || order !== sortDir)) {
+			fs.page = 1;
+		}
+
+		if (order) {
+			fs = { ...fs, sortDir: order, sortBy: columnKey };
+		} else if (sortBy || sortDir) {
+			fs = Object.keys(fs).reduce((all, key) => {
+				if (key !== "sortDir" && key !== "sortBy") {
+					if (key === PAGE || key === PAGE_SIZE) {
+						all[key] = fs[key];
+					} else {
+						all[key] = activeFilters[key];
+					}
+				}
+				return all;
+			}, {});
+		}
+
+		setActiveFilters(fs);
+
+		if (isNaN(page.current)) {
+			page.current = 1;
+		}
+
+		const filters = StorageManager.saveFilters(module, view, { page: page.current }, true);
+
+		updateQuery(filters, page.current);
+		setPagination((prev) => ({
+			...prev,
+			current: fs.page,
+			pageSize: fs.pageSize || defaultPageSize,
+		}));
+	};
+
+	const onSearch = useCallback((activeFilter, value) => {
+		setActiveFilters((prev) => ({
+			...prev,
+			page: 1,
+			searchParams: activeFilter,
+			search: value,
+		}));
+		setPagination((prev) => ({ ...prev, current: 1 }));
+	}, []);
+
+	const totalPages = useMemo(() => {
+		return Math.ceil(pagination.total / pagination.pageSize);
+	}, [pagination]);
+
+	const canGoPrev = useMemo(() => pagination.current !== 1, [pagination]);
+	const canGoNext = useMemo(
+		() => pagination.current !== totalPages && totalPages,
+		[pagination, totalPages],
+	);
+
+	const goPrev = () => {
+		if (!canGoPrev) {
+			return;
+		}
+
+		const { sortDir, sortBy } = activeFilters;
+
+		onTableChange(
+			{ ...pagination, current: pagination.current - 1 },
+			undefined,
+			sortBy && sortDir ? { sortBy, sortDir } : undefined,
+		);
+	};
+
+	const goNext = () => {
+		if (!canGoNext) {
+			return;
+		}
+
+		const { sortDir, sortBy } = activeFilters;
+
+		onTableChange(
+			{ ...pagination, current: pagination.current + 1 },
+			undefined,
+			sortBy && sortDir ? { columnKey: sortBy, order: sortDir } : undefined,
+		);
+	};
+
+	return {
+		newFiltersConfig,
+		totalPages,
+		canGoNext,
+		canGoPrev,
+		goPrev,
+		goNext,
+		pagination,
+		activeFilters,
+		onSearch,
+		defaultFilters,
+		onTableChange,
+		setPagination,
+		onFiltersChange,
+		setActiveFilters,
+	};
 };