Merge branch 'dev' into feat/login-page-customization

src/hooks/useLocalStorage.ts

@@ -2,8 +2,8 @@ import {
     useState,
     useEffect,
     useCallback,
-    Dispatch,
-    SetStateAction
+    type Dispatch,
+    type SetStateAction
 } from "react";
 
 type SetValue<T> = Dispatch<SetStateAction<T>>;

src/hooks/useStoredColumnVisibility.ts

@@ -0,0 +1,81 @@
+import type { VisibilityState } from "@tanstack/react-table";
+import { useCallback, useState } from "react";
+
+const STORAGE_KEYS = {
+    COLUMN_VISIBILITY: "datatable-column-visibility",
+    getTableColumnVisibility: (tableId: string) =>
+        `datatable-${tableId}-column-visibility`
+};
+
+const getStoredColumnVisibility = (
+    tableId: string,
+    defaultVisibility?: Record<string, boolean>
+): Record<string, boolean> => {
+    if (typeof window === "undefined") return defaultVisibility || {};
+
+    try {
+        const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            // Validate that it's an object
+            if (typeof parsed === "object" && parsed !== null) {
+                return parsed;
+            }
+        }
+    } catch (error) {
+        console.warn(
+            "Failed to read column visibility from localStorage:",
+            error
+        );
+    }
+    return defaultVisibility || {};
+};
+
+const setStoredColumnVisibility = (
+    visibility: Record<string, boolean>,
+    tableId: string
+): void => {
+    if (typeof window === "undefined") return;
+
+    try {
+        const key = STORAGE_KEYS.getTableColumnVisibility(tableId);
+        localStorage.setItem(key, JSON.stringify(visibility));
+    } catch (error) {
+        console.warn(
+            "Failed to save column visibility to localStorage:",
+            error
+        );
+    }
+};
+
+export function useStoredColumnVisibility(
+    tableId: string,
+    defaultColumnVisibility?: Record<string, boolean>
+) {
+    const [columnVisibility, setVisibility] = useState<VisibilityState>(() =>
+        getStoredColumnVisibility(tableId, defaultColumnVisibility)
+    );
+
+    const setColumnVisibility = useCallback(
+        (
+            updaterOrValue:
+                | VisibilityState
+                | ((old: VisibilityState) => VisibilityState)
+        ) => {
+            if (typeof updaterOrValue === "function") {
+                setVisibility((oldValue) => {
+                    const newValue = updaterOrValue(oldValue);
+                    setStoredColumnVisibility(newValue, tableId);
+                    return newValue;
+                });
+            } else {
+                setVisibility(updaterOrValue);
+                setStoredColumnVisibility(updaterOrValue, tableId);
+            }
+        },
+        [tableId]
+    );
+
+    return [columnVisibility, setColumnVisibility] as const;
+}

src/hooks/useStoredPageSize.ts

@@ -0,0 +1,60 @@
+import { useState, useCallback } from "react";
+
+const STORAGE_KEYS = {
+    PAGE_SIZE: "datatable-page-size",
+    getTablePageSize: (tableId: string) => `datatable-${tableId}-page-size`
+};
+
+const getStoredPageSize = (tableId: string, defaultSize = 20): number => {
+    if (typeof window === "undefined") return defaultSize;
+
+    try {
+        const key = STORAGE_KEYS.getTablePageSize(tableId);
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = parseInt(stored, 10);
+            if (parsed > 0 && parsed <= 1000) {
+                return parsed;
+            }
+        }
+    } catch (error) {
+        console.warn("Failed to read page size from localStorage:", error);
+    }
+    return defaultSize;
+};
+
+const setStoredPageSize = (pageSize: number, tableId: string): void => {
+    if (typeof window === "undefined") return;
+
+    try {
+        const key = STORAGE_KEYS.getTablePageSize(tableId);
+        localStorage.setItem(key, pageSize.toString());
+    } catch (error) {
+        console.warn("Failed to save page size to localStorage:", error);
+    }
+};
+
+// export function useStore
+export function useStoredPageSize(tableId: string, defaultPageSize?: number) {
+    const [pageSize, setSize] = useState(() =>
+        getStoredPageSize(tableId, defaultPageSize)
+    );
+
+    const setPageSize = useCallback(
+        (updaterOrValue: number | ((old: number) => number)) => {
+            if (typeof updaterOrValue === "function") {
+                setSize((oldValue) => {
+                    const newValue = updaterOrValue(oldValue);
+                    setStoredPageSize(newValue, tableId);
+                    return newValue;
+                });
+            } else {
+                setSize(updaterOrValue);
+                setStoredPageSize(updaterOrValue, tableId);
+            }
+        },
+        [tableId]
+    );
+
+    return [pageSize, setPageSize] as const;
+}