@ramesesinc/platform-core 0.1.0

package/dist/components/list/TreeMenu.js

@@ -0,0 +1,207 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import DynamicIcon from "../../core/DynamicIcon";
+import { usePageContext } from "../../core/PageContext";
+import { usePageViewContext } from "../../core/PageViewContext";
+import useUIMenu from "../common/UIMenu";
+/* ------------------------------------------------------------------ */
+/* Helpers */
+const buildItems = (raw) => {
+    var _a;
+    const mapped = [];
+    for (const entry of raw) {
+        if (Array.isArray(entry.items)) {
+            mapped.push(Object.assign(Object.assign({}, entry), { isDropdown: (_a = entry.isDropdown) !== null && _a !== void 0 ? _a : true, items: buildItems(entry.items) }));
+        }
+        else {
+            const lastGroup = mapped[mapped.length - 1];
+            if (lastGroup && lastGroup.title === "" && !lastGroup.isDropdown) {
+                lastGroup.items.push(entry);
+            }
+            else {
+                mapped.push({ title: "", icon: undefined, isDropdown: false, items: [entry] });
+            }
+        }
+    }
+    return mapped;
+};
+const findFirstItem = (groups) => {
+    for (const group of groups) {
+        for (const item of group.items) {
+            if (Array.isArray(item.items)) {
+                const found = findFirstItem([item]);
+                if (found)
+                    return found;
+            }
+            else if (item.page)
+                return item;
+        }
+    }
+    return null;
+};
+const findGroupPath = (groups, targetPage, depth = 0) => {
+    for (let i = 0; i < groups.length; i++) {
+        const group = groups[i];
+        const key = `${depth}-${i}`;
+        for (const item of group.items) {
+            if (Array.isArray(item.items)) {
+                const path = findGroupPath([item], targetPage, depth + 1);
+                if (path.length)
+                    return [key, ...path];
+            }
+            else if (item.page === targetPage)
+                return [key];
+        }
+    }
+    return [];
+};
+const findItemByPage = (groups, targetPage) => {
+    for (const group of groups) {
+        for (const item of group.items) {
+            if (Array.isArray(item.items)) {
+                const found = findItemByPage([item], targetPage);
+                if (found)
+                    return found;
+            }
+            else {
+                // console.log("treemenu findItemByPage", targetPage, item.page);
+                if (item.page === targetPage)
+                    return item;
+            }
+        }
+    }
+    return null;
+};
+const isActiveItemInTree = (groups, page) => groups.some((group) => group.items.some((item) => (Array.isArray(item.items) ? isActiveItemInTree([item], page) : item.page === page)));
+const TreeMenu = (props) => {
+    var _a;
+    const { name = "selectedPage", menugroup, depends, items: itemsProp, data } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    const pageView = usePageViewContext();
+    const contextKey = (_a = name !== null && name !== void 0 ? name : depends) !== null && _a !== void 0 ? _a : "";
+    const [openGroups, setOpenGroups] = useState([]);
+    const [activeItem, setActiveItem] = useState({});
+    const [items, setItems] = useState([]);
+    const initializedRef = useRef(false);
+    const { items: rawItems } = useUIMenu({
+        items: itemsProp,
+        data,
+        menugroup,
+    });
+    useLayoutEffect(() => {
+        var _a;
+        const { path = "" } = (_a = pageView.getOriginalLocationInfo()) !== null && _a !== void 0 ? _a : {};
+        const [, ...anchors] = path.split("#");
+        const [selectedPath] = anchors;
+        pageContext.set(contextKey, selectedPath);
+    }, []);
+    /* ---------------------- Sync active item from page view ---------------------- */
+    useLayoutEffect(() => {
+        if (items.length === 0 || !pageView.getSelectedPage())
+            return;
+        if (initializedRef.current)
+            return;
+        const item = findItemByPage(items, pageView.getSelectedPage());
+        if (item)
+            setActiveItem(item);
+    }, [items, pageView.getSelectedPage()]);
+    /* ---------------------- Build items ---------------------- */
+    useEffect(() => {
+        if (!Array.isArray(rawItems) || rawItems.length === 0)
+            return;
+        setItems(buildItems(rawItems));
+    }, [rawItems]);
+    /* ---------------------- Auto-select first item on init ---------------------- */
+    useEffect(() => {
+        if (initializedRef.current || items.length === 0)
+            return;
+        const firstItem = findFirstItem(items);
+        if (!(firstItem === null || firstItem === void 0 ? void 0 : firstItem.page))
+            return;
+        let selectedPage = pageContext.get(contextKey);
+        // console.log("treemenu selected page from context", contextKey, selectedPage);
+        if (selectedPage == null && contextKey === "selectedPage") {
+            selectedPage = pageView.getSelectedPage();
+            // console.log("treemenu selected page fallback from context", contextKey, selectedPage);
+        }
+        // console.log("treemenu selected page final", contextKey, selectedPage);
+        if (selectedPage != null) {
+            const selectedItem = findItemByPage(items, selectedPage);
+            // console.log("treemenu findItemByPage", selectedPage, selectedItem);
+            if (selectedItem) {
+                setOpenGroups(findGroupPath(items, selectedPage));
+                setActiveItem(selectedItem);
+            }
+            else {
+                setOpenGroups(findGroupPath(items, firstItem.page));
+                setActiveItem(firstItem);
+            }
+        }
+        else {
+            setOpenGroups(findGroupPath(items, firstItem.page));
+            setActiveItem(firstItem);
+        }
+        initializedRef.current = true;
+    }, [items, contextKey]);
+    /* ---------------------- Sync page context on active item change ---------------------- */
+    useEffect(() => {
+        const { mode, page } = (activeItem !== null && activeItem !== void 0 ? activeItem : {});
+        if (!page)
+            return;
+        const idx = ["window", "popup"].indexOf(String(mode).toLowerCase());
+        if (idx >= 0) {
+            pageView.setPage(page, { mode });
+        }
+        else {
+            pageView.setSelectedPage(page);
+            pageContext.set(contextKey, page);
+        }
+    }, [activeItem]);
+    /* ---------------------- Auto-open group containing active item ---------------------- */
+    useEffect(() => {
+        if (!(activeItem === null || activeItem === void 0 ? void 0 : activeItem.page) || items.length === 0)
+            return;
+        const path = findGroupPath(items, activeItem.page);
+        if (path.length) {
+            setOpenGroups((prev) => Array.from(new Set([...prev, ...path])));
+        }
+    }, [activeItem, items]);
+    /* ---------------------- Helpers ---------------------- */
+    const toggleGroup = (key) => setOpenGroups((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]));
+    const isGroupOpen = (key) => openGroups.includes(key);
+    const calculateHeight = (items, depth) => {
+        return items.reduce((total, item, idx) => {
+            if (Array.isArray(item.items)) {
+                const key = `${depth + 1}-${idx}`;
+                return total + 36 + (isGroupOpen(key) ? calculateHeight(item.items, depth + 1) : 0);
+            }
+            return total + 36;
+        }, 0);
+    };
+    /* ---------------------- Events ---------------------- */
+    const handleSubItemClick = (item) => {
+        if (!item.page || item.page === activeItem.page)
+            return;
+        setActiveItem(item);
+    };
+    /* ---------------------- Recursive render ---------------------- */
+    const renderGroup = (group, index, depth = 0) => {
+        const paddingLeft = depth * 12;
+        const key = `${depth}-${index}`;
+        return (_jsxs("div", { children: [group.title && (_jsxs("div", { onClick: () => group.isDropdown && toggleGroup(key), className: "flex items-center justify-between px-3 py-2 cursor-pointer rounded-md", style: { paddingLeft: `${12 + paddingLeft}px` }, children: [_jsxs("div", { className: "flex items-center gap-2 h-6", children: [_jsx("div", { className: "w-5 h-5 flex items-center justify-center", children: _jsx(DynamicIcon, { icon: group.icon, size: 18 }) }), _jsx("span", { className: "text-sm font-medium truncate", children: group.title })] }), group.isDropdown && _jsx(ChevronDown, { size: 16, className: `transition-transform duration-200 ${isGroupOpen(key) ? "rotate-90" : ""}` })] })), _jsx("div", { style: {
+                        maxHeight: !group.title || isGroupOpen(key) ? `${calculateHeight(group.items, depth)}px` : "0px",
+                    }, className: "overflow-hidden transition-[max-height] duration-300", children: group.items.map((item, idx) => {
+                        if (Array.isArray(item.items)) {
+                            return renderGroup(item, idx, depth + 1);
+                        }
+                        const isActive = item.page === activeItem.page;
+                        const itemPadding = group.title ? `${24 + paddingLeft}px` : `${12 + paddingLeft}px`;
+                        return (_jsxs("div", { onClick: () => handleSubItemClick(item), className: `py-2 text-sm cursor-pointer rounded-md flex items-center gap-2 hover:bg-[#d3e3fd] ${isActive ? "bg-[#e8f0fe] text-blue-700 font-medium" : ""}`, style: { paddingLeft: itemPadding }, children: [_jsx("div", { className: "w-5 h-5 flex items-center justify-center", children: _jsx(DynamicIcon, { icon: item.icon, size: 16 }) }), _jsx("span", { className: "text-sm truncate", children: item.title })] }, idx));
+                    }) })] }, key));
+    };
+    /* ---------------------- Render ---------------------- */
+    return _jsx("div", { className: "flex flex-col gap-1 px-4 py-3 h-full overflow-y-auto", children: items.map((group, index) => renderGroup(group, index, 0)) });
+};
+export default TreeMenu;

package/dist/components/list/TreeMenu.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import DynamicIcon from "../../core/DynamicIcon";
+import { usePageContext } from "../../core/PageContext";
+import { usePageViewContext } from "../../core/PageViewContext";
+import { AbstractComponent } from "../../types/component";
+import useUIMenu, { MenuGroup, MenuItem } from "../common/UIMenu";
+
+/* ------------------------------------------------------------------ */
+/* Local type */
+type TreeMenuGroup = MenuGroup & { isDropdown?: boolean };
+
+/* ------------------------------------------------------------------ */
+/* Helpers */
+
+const buildItems = (raw: any[]): TreeMenuGroup[] => {
+  const mapped: TreeMenuGroup[] = [];
+
+  for (const entry of raw) {
+    if (Array.isArray(entry.items)) {
+      mapped.push({
+        ...entry,
+        isDropdown: entry.isDropdown ?? true,
+        items: buildItems(entry.items),
+      });
+    } else {
+      const lastGroup = mapped[mapped.length - 1];
+      if (lastGroup && lastGroup.title === "" && !lastGroup.isDropdown) {
+        lastGroup.items.push(entry);
+      } else {
+        mapped.push({ title: "", icon: undefined, isDropdown: false, items: [entry] });
+      }
+    }
+  }
+
+  return mapped;
+};
+
+const findFirstItem = (groups: TreeMenuGroup[]): MenuItem | null => {
+  for (const group of groups) {
+    for (const item of group.items) {
+      if (Array.isArray((item as any).items)) {
+        const found = findFirstItem([item as any as TreeMenuGroup]);
+        if (found) return found;
+      } else if (item.page) return item;
+    }
+  }
+  return null;
+};
+
+const findGroupPath = (groups: TreeMenuGroup[], targetPage: string | null, depth = 0): string[] => {
+  for (let i = 0; i < groups.length; i++) {
+    const group = groups[i];
+    const key = `${depth}-${i}`;
+
+    for (const item of group.items) {
+      if (Array.isArray((item as any).items)) {
+        const path = findGroupPath([item as any as TreeMenuGroup], targetPage, depth + 1);
+        if (path.length) return [key, ...path];
+      } else if (item.page === targetPage) return [key];
+    }
+  }
+  return [];
+};
+
+const findItemByPage = (groups: TreeMenuGroup[], targetPage: string | null): MenuItem | null => {
+  for (const group of groups) {
+    for (const item of group.items) {
+      if (Array.isArray((item as any).items)) {
+        const found = findItemByPage([item as any as TreeMenuGroup], targetPage);
+        if (found) return found;
+      } else {
+        // console.log("treemenu findItemByPage", targetPage, item.page);
+        if (item.page === targetPage) return item;
+      }
+    }
+  }
+  return null;
+};
+
+const isActiveItemInTree = (groups: TreeMenuGroup[], page: string | null): boolean =>
+  groups.some((group) =>
+    group.items.some((item) => (Array.isArray((item as any).items) ? isActiveItemInTree([item as any as TreeMenuGroup], page) : item.page === page)),
+  );
+
+/* ------------------------------------------------------------------ */
+/* Component */
+
+interface TreeMenuProps extends AbstractComponent {
+  name?: string;
+  items?: TreeMenuGroup[] | MenuItem[];
+  data?: Record<string, any>;
+  menugroup?: string;
+  depends?: string;
+}
+
+const TreeMenu = (props: TreeMenuProps) => {
+  const { name = "selectedPage", menugroup, depends, items: itemsProp, data } = props ?? {};
+
+  const pageContext = usePageContext();
+  const pageView = usePageViewContext();
+
+  const contextKey = name ?? depends ?? "";
+
+  const [openGroups, setOpenGroups] = useState<string[]>([]);
+  const [activeItem, setActiveItem] = useState<Record<string, any>>({});
+  const [items, setItems] = useState<TreeMenuGroup[]>([]);
+  const initializedRef = useRef(false);
+
+  const { items: rawItems } = useUIMenu({
+    items: itemsProp as Record<string, any>[],
+    data,
+    menugroup,
+  });
+
+  useLayoutEffect(() => {
+    const { path = "" } = pageView.getOriginalLocationInfo() ?? {};
+    const [, ...anchors] = path.split("#");
+    const [selectedPath] = anchors;
+    pageContext.set(contextKey, selectedPath);
+  }, []);
+
+  /* ---------------------- Sync active item from page view ---------------------- */
+  useLayoutEffect(() => {
+    if (items.length === 0 || !pageView.getSelectedPage()) return;
+    if (initializedRef.current) return;
+
+    const item = findItemByPage(items, pageView.getSelectedPage());
+    if (item) setActiveItem(item);
+  }, [items, pageView.getSelectedPage()]);
+
+  /* ---------------------- Build items ---------------------- */
+  useEffect(() => {
+    if (!Array.isArray(rawItems) || rawItems.length === 0) return;
+    setItems(buildItems(rawItems as any[]));
+  }, [rawItems]);
+
+  /* ---------------------- Auto-select first item on init ---------------------- */
+  useEffect(() => {
+    if (initializedRef.current || items.length === 0) return;
+
+    const firstItem = findFirstItem(items);
+    if (!firstItem?.page) return;
+
+    let selectedPage = pageContext.get(contextKey);
+    // console.log("treemenu selected page from context", contextKey, selectedPage);
+    if (selectedPage == null && contextKey === "selectedPage") {
+      selectedPage = pageView.getSelectedPage();
+      // console.log("treemenu selected page fallback from context", contextKey, selectedPage);
+    }
+    // console.log("treemenu selected page final", contextKey, selectedPage);
+    if (selectedPage != null) {
+      const selectedItem = findItemByPage(items, selectedPage);
+      // console.log("treemenu findItemByPage", selectedPage, selectedItem);
+      if (selectedItem) {
+        setOpenGroups(findGroupPath(items, selectedPage));
+        setActiveItem(selectedItem);
+      } else {
+        setOpenGroups(findGroupPath(items, firstItem.page));
+        setActiveItem(firstItem);
+      }
+    } else {
+      setOpenGroups(findGroupPath(items, firstItem.page));
+      setActiveItem(firstItem);
+    }
+
+    initializedRef.current = true;
+  }, [items, contextKey]);
+
+  /* ---------------------- Sync page context on active item change ---------------------- */
+  useEffect(() => {
+    const { mode, page } = (activeItem ?? {}) as Record<string, any>;
+    if (!page) return;
+
+    const idx = ["window", "popup"].indexOf(String(mode).toLowerCase());
+    if (idx >= 0) {
+      pageView.setPage(page, { mode });
+    } else {
+      pageView.setSelectedPage(page);
+      pageContext.set(contextKey, page);
+    }
+  }, [activeItem]);
+
+  /* ---------------------- Auto-open group containing active item ---------------------- */
+  useEffect(() => {
+    if (!activeItem?.page || items.length === 0) return;
+
+    const path = findGroupPath(items, activeItem.page);
+    if (path.length) {
+      setOpenGroups((prev) => Array.from(new Set([...prev, ...path])));
+    }
+  }, [activeItem, items]);
+
+  /* ---------------------- Helpers ---------------------- */
+  const toggleGroup = (key: string) => setOpenGroups((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]));
+
+  const isGroupOpen = (key: string) => openGroups.includes(key);
+
+  const calculateHeight = (items: any[], depth: number): number => {
+    return items.reduce((total: number, item: any, idx: number) => {
+      if (Array.isArray(item.items)) {
+        const key = `${depth + 1}-${idx}`;
+        return total + 36 + (isGroupOpen(key) ? calculateHeight(item.items, depth + 1) : 0);
+      }
+      return total + 36;
+    }, 0);
+  };
+
+  /* ---------------------- Events ---------------------- */
+  const handleSubItemClick = (item: MenuItem) => {
+    if (!item.page || item.page === activeItem.page) return;
+    setActiveItem(item);
+  };
+
+  /* ---------------------- Recursive render ---------------------- */
+  const renderGroup = (group: TreeMenuGroup, index: number, depth: number = 0): React.ReactNode => {
+    const paddingLeft = depth * 12;
+    const key = `${depth}-${index}`;
+
+    return (
+      <div key={key}>
+        {group.title && (
+          <div
+            onClick={() => group.isDropdown && toggleGroup(key)}
+            className="flex items-center justify-between px-3 py-2 cursor-pointer rounded-md"
+            style={{ paddingLeft: `${12 + paddingLeft}px` }}
+          >
+            <div className="flex items-center gap-2 h-6">
+              <div className="w-5 h-5 flex items-center justify-center">
+                <DynamicIcon icon={group.icon} size={18} />
+              </div>
+              <span className="text-sm font-medium truncate">{group.title}</span>
+            </div>
+            {group.isDropdown && <ChevronDown size={16} className={`transition-transform duration-200 ${isGroupOpen(key) ? "rotate-90" : ""}`} />}
+          </div>
+        )}
+
+        <div
+          style={{
+            maxHeight: !group.title || isGroupOpen(key) ? `${calculateHeight(group.items, depth)}px` : "0px",
+          }}
+          className="overflow-hidden transition-[max-height] duration-300"
+        >
+          {group.items.map((item: any, idx: number) => {
+            if (Array.isArray(item.items)) {
+              return renderGroup(item as TreeMenuGroup, idx, depth + 1);
+            }
+
+            const isActive = item.page === activeItem.page;
+            const itemPadding = group.title ? `${24 + paddingLeft}px` : `${12 + paddingLeft}px`;
+
+            return (
+              <div
+                key={idx}
+                onClick={() => handleSubItemClick(item)}
+                className={`py-2 text-sm cursor-pointer rounded-md flex items-center gap-2 hover:bg-[#d3e3fd] ${
+                  isActive ? "bg-[#e8f0fe] text-blue-700 font-medium" : ""
+                }`}
+                style={{ paddingLeft: itemPadding }}
+              >
+                <div className="w-5 h-5 flex items-center justify-center">
+                  <DynamicIcon icon={item.icon} size={16} />
+                </div>
+                <span className="text-sm truncate">{item.title}</span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  /* ---------------------- Render ---------------------- */
+  return <div className="flex flex-col gap-1 px-4 py-3 h-full overflow-y-auto">{items.map((group, index) => renderGroup(group, index, 0))}</div>;
+};
+
+export default TreeMenu;

package/dist/components/list/TxnTaskList.d.ts

@@ -0,0 +1,2 @@
+declare const TxnTaskList: () => import("react/jsx-runtime").JSX.Element;
+export default TxnTaskList;

package/dist/components/list/TxnTaskList.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@ramesesinc/client";
+import { Eye, Newspaper, Pen, Plus } from "lucide-react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import { parseHashUrl } from "../../lib/utils/PageUtils";
+const rootItems = [
+    {
+        id: "mytasklist",
+        title: "My Tasks",
+    },
+    { id: "unassignedtasklist", title: "Unassigned" },
+    { id: "assignedtasklist", title: "Active Tasks" },
+];
+const TxnTaskList = () => {
+    var _a, _b, _c;
+    const [tasklist, setTaskList] = useState({});
+    const [loading, setLoading] = useState(false);
+    const router = useRouter();
+    const url = router.asPath.replace(/^\/[^/]+\/[^/]+\//, "");
+    const pageContext = usePageContext();
+    const fetchData = async () => {
+        var _a, _b;
+        const { page, params } = parseHashUrl(url);
+        const data = {
+            api: "mongo/list",
+            params: {
+                schemaname: "tasks",
+                filter: Object.assign({}, params),
+            },
+        };
+        setLoading(true);
+        const result = await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(data.api, data.params));
+        const resData = (_a = ((result === null || result === void 0 ? void 0 : result.data) ? result === null || result === void 0 ? void 0 : result.data : result)) !== null && _a !== void 0 ? _a : [];
+        const record = (_b = resData[0]) !== null && _b !== void 0 ? _b : {};
+        const taskData = {};
+        rootItems.forEach((item) => {
+            if (record[item.id]) {
+                taskData[item.id] = record[item.id];
+            }
+        });
+        setTaskList(taskData);
+        setLoading(false);
+    };
+    useEffect(() => {
+        fetchData();
+    }, []);
+    const renderEmpty = (key, title) => (_jsxs("div", { className: "mb-4", children: [_jsx("h5", { className: "font-bold mb-2", children: title }), _jsx("p", { className: "text-sm text-gray-400", children: "No tasks available." })] }, key));
+    const renderShowMore = (show, onToggle) => (_jsx("p", { className: "text-sm text-blue-500 cursor-pointer hover:underline flex justify-center mb-2", onClick: onToggle, children: show ? "Show less" : "Show more" }));
+    const [showAllMyTasks, setShowAllMyTasks] = useState(false);
+    const renderMyTasks = (tasks) => {
+        if (tasks.length === 0)
+            return renderEmpty("mytasklist", "My Tasks");
+        const visibleTasks = showAllMyTasks ? tasks : tasks.slice(0, 5);
+        // ============= My Tasks =============
+        return (_jsxs("div", { className: "", children: [_jsx("h5", { className: "font-bold mb-2 border-t border-b border-gray-200 py-2", children: "My Tasks" }), visibleTasks.map((task) => (_jsx("div", { className: "p-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Newspaper, {}), _jsxs("div", { className: "flex flex-col", children: [_jsx("p", { className: "font-medium", children: task.title }), _jsx("div", { className: "flex gap-2 items-center", children: _jsx(Button, { size: "sm", variant: "text", radius: "full", icon: _jsx(Eye, { size: 16 }), className: "text-xs gap-0", children: "View" }) })] })] }), _jsx("p", { className: "text-sm text-gray-500", children: task.elapsedtime })] }) }, task.objid))), tasks.length > 5 && renderShowMore(showAllMyTasks, () => setShowAllMyTasks(!showAllMyTasks))] }));
+    };
+    const [showAllUnassigned, setShowAllUnassigned] = useState(false);
+    const renderUnassigned = (tasks) => {
+        if (tasks.length === 0)
+            return renderEmpty("unassignedtasklist", "Unassigned");
+        const visibleTasks = showAllUnassigned ? tasks : tasks.slice(0, 5);
+        // ============= Unassigned Tasks =============
+        return (_jsxs("div", { className: "", children: [_jsx("div", { className: "border-t border-b border-gray-200 py-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h5", { className: "font-bold", children: "Unassigned" }), _jsx("span", { className: "text-gray-600 hover:bg-gray-200 rounded p-1 cursor-pointer flex items-center", children: _jsx(Plus, { size: 18 }) })] }) }), visibleTasks.map((task) => (_jsx("div", { className: "p-3", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Newspaper, {}), _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { children: [_jsx("p", { className: "font-medium", children: task.title }), _jsx(Button, { size: "sm", variant: "text", radius: "full", icon: _jsx(Pen, { size: 16 }), className: "text-xs gap-0", children: "Assign to Me" })] }), _jsx("p", { className: "text-sm text-gray-500", children: task.elapsedtime })] })] }) }, task.objid))), tasks.length > 5 && renderShowMore(showAllUnassigned, () => setShowAllUnassigned(!showAllUnassigned))] }));
+    };
+    // ============= Assigned Tasks =============
+    const [showAllAssigned, setShowAllAssigned] = useState(false);
+    const renderAssigned = (tasks) => {
+        if (tasks.length === 0)
+            return renderEmpty("assignedtasklist", "Active Tasks");
+        const visibleTasks = showAllAssigned ? tasks : tasks.slice(0, 5);
+        return (_jsxs("div", { className: "", children: [_jsxs("div", { className: "flex items-center justify-between border-t border-b border-gray-200 py-2", children: [_jsx("h5", { className: "font-bold", children: "Active Tasks" }), _jsx("span", { className: "text-gray-600 hover:bg-gray-200 rounded p-1 cursor-pointer flex items-center", children: _jsx(Plus, { size: 18 }) })] }), visibleTasks.map((task) => (_jsxs("div", { className: "flex items-center justify-between p-3 mb-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: `data:image/png;base64,${task.assignee.img}`, alt: task.assignee.name, className: "w-10 h-10 rounded-full object-cover" }), _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: task.title }), task.findings !== undefined && (_jsxs("span", { className: "text-xs bg-yellow-100 text-yellow-700 rounded-full px-2 py-1", children: [task.findings, " finding", task.findings !== 1 ? "s" : ""] }))] })] }), _jsx("p", { className: "text-sm text-gray-500", children: task.elapsedtime })] }, task.objid))), tasks.length > 5 && renderShowMore(showAllAssigned, () => setShowAllAssigned(!showAllAssigned))] }));
+    };
+    return (_jsx("div", { className: "p-2", children: loading ? (_jsx("div", { className: "flex items-center justify-center h-24", children: _jsx("div", { className: "w-6 h-6 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" }) })) : (_jsxs("div", { className: "overflow-y-auto h-[calc(100vh-154px)]", children: [renderMyTasks((_a = tasklist["mytasklist"]) !== null && _a !== void 0 ? _a : []), renderUnassigned((_b = tasklist["unassignedtasklist"]) !== null && _b !== void 0 ? _b : []), renderAssigned((_c = tasklist["assignedtasklist"]) !== null && _c !== void 0 ? _c : [])] })) }));
+};
+export default TxnTaskList;