@ramesesinc/platform-core 0.1.6 → 0.1.8

package/dist/components/list/TreeMenu.tsx

@@ -1,279 +0,0 @@
-"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.tsx

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

package/dist/components/output/Label.tsx

@@ -1,50 +0,0 @@
-import { useEffect, useState } from "react";
-import { usePageContext } from "../../core/PageContext";
-import useDependHandler from "../../core/UIDependHandler";
-import { render } from "../../lib/utils/ExprUtil";
-import UIComponent from "../common/UIComponent";
-
-type LabelProps = {
-  depends?: string;
-  expr?: string;
-  html?: boolean;
-};
-
-const Label = (props: LabelProps) => {
-  const { depends, expr, html = false } = props ?? {};
-  const pageContext = usePageContext();
-  const binding = pageContext?.binding;
-
-  // Render the expression using ExprUtil
-  const renderExpression = (expression: string) => {
-    const data = pageContext?.getAllData() ?? {};
-    return render(expression, data);
-  };
-
-  const initialValue = renderExpression(expr ?? "");
-  const [value, setValue] = useState(initialValue);
-
-  const onRefresh = () => {
-    const newValue = renderExpression(expr ?? "");
-    setValue(newValue);
-  };
-
-  useDependHandler({ name: depends, onRefresh });
-
-  useEffect(() => {
-    const newValue = renderExpression(expr ?? "");
-    setValue(newValue);
-  }, [binding?.raw, expr]);
-
-  const getPreferredValue = () => {
-    return value;
-  };
-
-  return (
-    <>
-      <UIComponent {...(props ?? {})}>{html ? <div dangerouslySetInnerHTML={{ __html: getPreferredValue() }} /> : getPreferredValue()}</UIComponent>
-    </>
-  );
-};
-
-export default Label;