@ramesesinc/platform-core 0.1.0

package/dist/components/list/TxnTaskList.tsx

@@ -0,0 +1,198 @@
+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.d.ts

@@ -0,0 +1,8 @@
+type LabelProps = {
+    label?: string;
+    depends?: string;
+    expr?: string;
+    html?: boolean;
+};
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export default Label;

package/dist/components/output/Label.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+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";
+const Label = (props) => {
+    const { depends, expr, html = false } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    const binding = pageContext === null || pageContext === void 0 ? void 0 : pageContext.binding;
+    // Render the expression using ExprUtil
+    const renderExpression = (expression) => {
+        var _a;
+        const data = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()) !== null && _a !== void 0 ? _a : {};
+        return render(expression, data);
+    };
+    const initialValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
+    const [value, setValue] = useState(initialValue);
+    const onRefresh = () => {
+        const newValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
+        setValue(newValue);
+    };
+    useDependHandler({ name: depends, onRefresh });
+    useEffect(() => {
+        const newValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
+        setValue(newValue);
+    }, [binding === null || binding === void 0 ? void 0 : binding.raw, expr]);
+    const getPreferredValue = () => {
+        return value;
+    };
+    return (_jsx(_Fragment, { children: _jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: html ? _jsx("div", { dangerouslySetInnerHTML: { __html: getPreferredValue() } }) : getPreferredValue() })) }));
+};
+export default Label;

package/dist/components/output/Label.tsx

@@ -0,0 +1,51 @@
+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 = {
+  label?: string;
+  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;

package/dist/components/table/DataList.d.ts

@@ -0,0 +1,88 @@
+import React from "react";
+import { ColumnDefinition } from "./DataTable";
+import { DataConfig } from "./TableContext";
+export interface FilterDefinition {
+    name: string;
+    component: string;
+    attr?: Record<string, any>;
+}
+export interface ActionDefinition {
+    label?: string;
+    icon?: string | React.ReactNode;
+    component: string;
+    attr: Record<string, any>;
+    variant?: "default" | "primary" | "danger";
+    show?: (row: any) => boolean;
+}
+export interface BulkActionDefinition {
+    label: string;
+    icon?: string;
+    onClick: (selectedRows: any[]) => void;
+    variant?: "default" | "primary" | "danger";
+}
+export interface ToolbarActionDefinition {
+    label: string;
+    icon?: string;
+    component: string;
+    attr: Record<string, any>;
+    variant?: "default" | "primary";
+}
+export interface DataListAttr {
+    cols: ColumnDefinition[];
+    data: DataConfig;
+    rowsPerPage?: number;
+    disableTotalCount?: boolean;
+    title?: string;
+    emptyMessage?: string;
+    errorMessage?: string;
+    striped?: boolean;
+    bordered?: boolean;
+    hover?: boolean;
+    dense?: boolean;
+    showPagination?: boolean;
+    paginationPosition?: "top" | "bottom" | "both";
+    showPageInfo?: boolean;
+    showTotalCount?: boolean;
+    showRowsPerPage?: boolean;
+    rowsPerPageOptions?: number[];
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    searchDebounce?: number;
+    onSearchChange?: (text: string) => void;
+    filters?: FilterDefinition[] | FilterDefinition[][];
+    showFilterPanel?: boolean;
+    onFilterChange?: (filters: Record<string, any>) => void;
+    sortable?: boolean;
+    defaultSort?: {
+        column: string;
+        direction: "asc" | "desc";
+    };
+    showSortIndicator?: boolean;
+    selectable?: boolean;
+    selectionMode?: "single" | "multiple";
+    onSelectionChange?: (selectedRows: any[]) => void;
+    selectOnRowClick?: boolean;
+    onRowClick?: (row: any, rowIndex: number) => void;
+    onRowDoubleClick?: (row: any, rowIndex: number) => void;
+    rowActions?: ActionDefinition[];
+    bulkActions?: BulkActionDefinition[];
+    showBulkActions?: boolean;
+    toolbarActions?: ToolbarActionDefinition[];
+    commonActions?: Record<string, any>;
+    showToolbar?: boolean;
+    toolbarTitle?: string;
+    showRefreshButton?: boolean;
+    showExportButton?: boolean;
+    onLoad?: () => void;
+    onError?: (error: any) => void;
+    onRefresh?: () => void;
+    onExport?: () => void;
+    className?: string;
+    rowClassName?: (row: any, rowIndex: number) => string;
+    depends?: string;
+}
+export interface DataListProps {
+    attr: DataListAttr;
+}
+export declare const DataList: React.FC<DataListProps>;
+export default DataList;