@ramesesinc/platform-core 0.1.0

package/dist/components/input/YearPicker.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+import UIComponent from "../common/UIComponent";
+import useUIInput, { UIInputProps } from "../common/UIInput";
+
+type YearPickerProps = UIInputProps & {
+  min?: number;
+  max?: number;
+  immediate?: boolean;
+};
+
+const YearPicker = (props: YearPickerProps) => {
+  const { min = 1900, max, immediate = true } = props ?? {};
+  const valueRef = useRef<string>("");
+  const [focused, setFocused] = useState(false);
+
+  // Set default max to current year if not provided
+  const currentYear = new Date().getFullYear();
+  const maxYear = max || currentYear;
+
+  // Generate array of years (descending order)
+  const years = Array.from({ length: maxYear - min + 1 }, (_, i) => maxYear - i);
+
+  const onRefresh = () => {
+    setInputValue(getValue());
+  };
+
+  const { initialValue, getValue, setValue } = useUIInput({ ...props, onRefresh });
+  valueRef.current = initialValue ?? "";
+  const [inputValue, setInputValue] = useState(valueRef.current);
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const year = e.target.value;
+
+    if (year !== inputValue) {
+      valueRef.current = year;
+      setInputValue(valueRef.current);
+    }
+
+    if (immediate) {
+      setValue(year);
+    }
+  };
+
+  const handleFocus = () => {
+    setFocused(true);
+  };
+
+  const handleBlur = () => {
+    if (!immediate) {
+      setValue(inputValue);
+    }
+    setFocused(false);
+  };
+
+  useEffect(() => {
+    // console.log("inputValue", inputValue);
+  }, [inputValue]);
+
+  return (
+    <UIComponent {...(props ?? {})}>
+      <div className="flex flex-col gap-1">
+        <select
+          value={inputValue}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          className="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
+        >
+          <option value="">Select year</option>
+          {years.map((year) => (
+            <option key={year} value={year}>
+              {year}
+            </option>
+          ))}
+        </select>
+      </div>
+    </UIComponent>
+  );
+};
+
+export default YearPicker;

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

@@ -0,0 +1,14 @@
+import { AbstractComponent } from "../../types/component";
+import { MenuGroup } from "../common/UIMenu";
+interface IconMenuProps extends AbstractComponent {
+    name?: string;
+    items?: MenuGroup[];
+    data?: Record<string, any>;
+    menugroup?: string;
+    depends?: string;
+    columns?: number;
+    size?: "sm" | "md" | "lg";
+    style?: string;
+}
+declare const IconMenu: (props: IconMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default IconMenu;

package/dist/components/list/IconMenu.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+import DynamicIcon from "../../core/DynamicIcon";
+import { usePageContext } from "../../core/PageContext";
+import { usePageViewContext } from "../../core/PageViewContext";
+import useUIMenu from "../common/UIMenu";
+/* ------------------------------------------------------------------ */
+/* Size config */
+const sizeConfig = {
+    sm: { tile: "w-20 h-20", icon: 24, label: "text-xs", gap: "gap-2" },
+    md: { tile: "w-28 h-28", icon: 32, label: "text-sm", gap: "gap-3" },
+    lg: { tile: "w-36 h-36", icon: 40, label: "text-base", gap: "gap-4" },
+};
+/* ------------------------------------------------------------------ */
+/* Component */
+const IconMenu = (props) => {
+    var _a;
+    const { name, menugroup, depends, items: itemsProp, data, columns = 5, size = "md", style = "" } = 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 [activeItem, setActiveItem] = useState(null);
+    const defaultPopupClass = `bg-white rounded-lg shadow-xl w-[90%] h-[90%] flex flex-col`;
+    const finalPopupClass = twMerge(clsx(defaultPopupClass, style));
+    // useUIMenu always returns MenuGroup[]
+    const { items } = useUIMenu({ menugroup, items: itemsProp, data });
+    const cfg = sizeConfig[size];
+    /* ---------------------- Events ---------------------- */
+    const handleItemClick = (item) => {
+        if (!item.page || item.page === activeItem)
+            return;
+        if (item.mode == "window") {
+            const oldHref = window.location.href;
+            const nidx = oldHref.lastIndexOf("/");
+            if (nidx > 0) {
+                const newUrl = oldHref.substring(0, nidx) + "/" + item.page;
+                window.location.href = newUrl;
+            }
+        }
+        else {
+            setActiveItem(item.page);
+            if (contextKey && contextKey !== "selectedPage") {
+                pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(contextKey, item.page);
+            }
+            else {
+                pageView === null || pageView === void 0 ? void 0 : pageView.setPage(item.page);
+            }
+        }
+    };
+    /* ---------------------- Shared button ---------------------- */
+    const renderButton = (item, index) => (_jsxs("button", { onClick: () => handleItemClick(item), className: `
+        ${cfg.tile}
+        flex flex-col items-center justify-center gap-2
+        rounded-2xl select-none cursor-pointer
+        transition-all duration-200 ease-out
+        focus:outline-none
+        text-gray-600 hover:bg-gray-100 hover:text-gray-900
+      `, children: [_jsx(DynamicIcon, { icon: item.icon, size: cfg.icon }), _jsx("span", { className: `${cfg.label} font-semibold leading-tight text-center px-1 truncate w-full`, children: item.title })] }, index));
+    /* ---------------------- Render ---------------------- */
+    return (_jsx("div", { className: "flex flex-col gap-6 p-4", children: items.map((group, groupIndex) => {
+            // Flat item — no group structure
+            if (!Array.isArray(group.items)) {
+                return renderButton(group, groupIndex);
+            }
+            // Grouped with category title
+            return (_jsxs("div", { className: "flex flex-col gap-2", children: [group.title && _jsx("span", { className: "text-xs font-semibold text-gray-400 uppercase tracking-widest px-1", children: group.title }), _jsx("div", { className: `grid ${cfg.gap} justify-items-center`, style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: group.items.map((item, index) => renderButton(item, index)) })] }, groupIndex));
+        }) }));
+};
+export default IconMenu;

package/dist/components/list/IconMenu.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import clsx from "clsx";
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+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";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+
+interface IconMenuProps extends AbstractComponent {
+  name?: string;
+  items?: MenuGroup[];
+  data?: Record<string, any>;
+  menugroup?: string;
+  depends?: string;
+  columns?: number;
+  size?: "sm" | "md" | "lg";
+  style?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Size config */
+
+const sizeConfig = {
+  sm: { tile: "w-20 h-20", icon: 24, label: "text-xs", gap: "gap-2" },
+  md: { tile: "w-28 h-28", icon: 32, label: "text-sm", gap: "gap-3" },
+  lg: { tile: "w-36 h-36", icon: 40, label: "text-base", gap: "gap-4" },
+};
+
+/* ------------------------------------------------------------------ */
+/* Component */
+
+const IconMenu = (props: IconMenuProps) => {
+  const { name, menugroup, depends, items: itemsProp, data, columns = 5, size = "md", style = "" } = props ?? {};
+  const pageContext = usePageContext();
+  const pageView = usePageViewContext();
+  const contextKey = name ?? depends ?? "";
+  const [activeItem, setActiveItem] = useState<string | null>(null);
+
+  const defaultPopupClass = `bg-white rounded-lg shadow-xl w-[90%] h-[90%] flex flex-col`;
+  const finalPopupClass = twMerge(clsx(defaultPopupClass, style));
+
+  // useUIMenu always returns MenuGroup[]
+  const { items } = useUIMenu({ menugroup, items: itemsProp, data });
+
+  const cfg = sizeConfig[size];
+
+  /* ---------------------- Events ---------------------- */
+  const handleItemClick = (item: MenuItem) => {
+    if (!item.page || item.page === activeItem) return;
+    if (item.mode == "window") {
+      const oldHref = window.location.href;
+      const nidx = oldHref.lastIndexOf("/");
+      if (nidx > 0) {
+        const newUrl = oldHref.substring(0, nidx) + "/" + item.page;
+        window.location.href = newUrl;
+      }
+    } else {
+      setActiveItem(item.page);
+      if (contextKey && contextKey !== "selectedPage") {
+        pageContext?.set(contextKey, item.page);
+      } else {
+        pageView?.setPage(item.page);
+      }
+    }
+  };
+
+  /* ---------------------- Shared button ---------------------- */
+  const renderButton = (item: MenuItem, index: number) => (
+    <button
+      key={index}
+      onClick={() => handleItemClick(item)}
+      className={`
+        ${cfg.tile}
+        flex flex-col items-center justify-center gap-2
+        rounded-2xl select-none cursor-pointer
+        transition-all duration-200 ease-out
+        focus:outline-none
+        text-gray-600 hover:bg-gray-100 hover:text-gray-900
+      `}
+    >
+      <DynamicIcon icon={item.icon} size={cfg.icon} />
+      <span className={`${cfg.label} font-semibold leading-tight text-center px-1 truncate w-full`}>{item.title}</span>
+    </button>
+  );
+
+  /* ---------------------- Render ---------------------- */
+  return (
+    <div className="flex flex-col gap-6 p-4">
+      {(items as MenuGroup[]).map((group, groupIndex) => {
+        // Flat item — no group structure
+        if (!Array.isArray(group.items)) {
+          return renderButton(group as unknown as MenuItem, groupIndex);
+        }
+
+        // Grouped with category title
+        return (
+          <div key={groupIndex} className="flex flex-col gap-2">
+            {group.title && <span className="text-xs font-semibold text-gray-400 uppercase tracking-widest px-1">{group.title}</span>}
+            <div className={`grid ${cfg.gap} justify-items-center`} style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
+              {group.items.map((item, index) => renderButton(item, index))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default IconMenu;

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

@@ -0,0 +1,10 @@
+type TabMenuProps = {
+    name?: string;
+    depends?: string;
+    items?: Record<string, any>[];
+    data?: Record<string, any>;
+    menugroup?: string;
+    orientation?: "horizontal" | "vertical";
+};
+declare const TabMenu: (props: TabMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default TabMenu;

package/dist/components/list/TabMenu.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useEffect, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import { usePageViewContext } from "../../core/PageViewContext";
+import useDependHandler from "../../core/UIDependHandler";
+import HPanel from "../../layouts/HPanel";
+import VPanel from "../../layouts/VPanel";
+const TabMenu = (props) => {
+    var _a;
+    const { name, depends, items = [], data, menugroup, orientation = "horizontal" } = props !== null && props !== void 0 ? props : {};
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const [refreshKey, setRefreshKey] = useState(0);
+    const pageContext = usePageContext();
+    const pageView = usePageViewContext();
+    const contextKey = (_a = name !== null && name !== void 0 ? name : depends) !== null && _a !== void 0 ? _a : "";
+    const resolvedItems = items.map((item, index) => {
+        var _a;
+        return (Object.assign(Object.assign({}, item), { key: (_a = item.id) !== null && _a !== void 0 ? _a : Math.random().toString(36).substring(2, 15), index }));
+    });
+    const onRefresh = () => setRefreshKey((k) => k + 1);
+    useDependHandler({ name: depends, onRefresh });
+    const handleClick = (item) => {
+        setSelectedIndex(item.index);
+        if (item.page != null && item.page.trim() !== "") {
+            pageView.setPage(item.page);
+        }
+        else if (contextKey != null && contextKey.trim() !== "") {
+            const selItem = Object.assign({}, item);
+            delete selItem.id;
+            delete selItem.title;
+            delete selItem.index;
+            delete selItem.key;
+            delete selItem.selected;
+            delete selItem.onClick;
+            pageContext.set(contextKey, selItem); // ← sets "selectedTask" = "new_application_list"
+        }
+    };
+    useEffect(() => {
+        if (resolvedItems != null && resolvedItems.length > 0 && selectedIndex === -1) {
+            handleClick(resolvedItems[0]);
+        }
+    }, [resolvedItems]);
+    const render = () => {
+        if (resolvedItems.length === 0)
+            return null;
+        const elems = resolvedItems.map((it) => {
+            const item = it;
+            item.selected = item.index === selectedIndex;
+            return _createElement(TabMenuItem, Object.assign({}, item, { key: item.key, onClick: handleClick }));
+        });
+        if (orientation === "vertical") {
+            return (_jsx("div", { className: "border-r border-gray-200", children: _jsx(VPanel, { gap: 25, children: elems }) }));
+        }
+        return (_jsx("div", { className: "w-full", children: _jsx(HPanel, { gap: 25, children: elems }) }));
+    };
+    return _jsx("div", { children: render() });
+};
+export default TabMenu;
+/* ------------------------------------------------------------------ */
+/* TabMenuItem */
+const TabMenuItem = (props) => {
+    const { title, onClick } = props !== null && props !== void 0 ? props : {};
+    const handleClick = () => onClick(props);
+    const render = () => {
+        if (props.selected) {
+            return (_jsxs("div", { onClick: handleClick, className: "relative px-4 py-3 cursor-pointer text-sm transition-all duration-200 text-gray-900 font-semibold", children: [title, _jsx("span", { className: "absolute bottom-0 left-0 w-full h-[2px] rounded-full bg-gray-900" })] }));
+        }
+        return (_jsx("div", { onClick: handleClick, className: "relative px-4 py-3 cursor-pointer text-sm transition-all duration-200 text-gray-500 font-normal hover:text-gray-600", children: title }));
+    };
+    return _jsx("div", { onClick: handleClick, children: render() });
+};

package/dist/components/list/TabMenu.tsx

@@ -0,0 +1,127 @@
+import { useEffect, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import { usePageViewContext } from "../../core/PageViewContext";
+import useDependHandler from "../../core/UIDependHandler";
+import HPanel from "../../layouts/HPanel";
+import VPanel from "../../layouts/VPanel";
+
+type TabMenuProps = {
+  name?: string;
+  depends?: string;
+  items?: Record<string, any>[];
+  data?: Record<string, any>;
+  menugroup?: string;
+  orientation?: "horizontal" | "vertical";
+};
+
+type TabMenuItemProps = {
+  id: string;
+  title: string;
+  key: string;
+  component?: string;
+  attr?: Record<string, any>;
+  index: number;
+  selected?: boolean;
+  onClick: (item: Record<string, any>) => void;
+  [key: string]: any;
+};
+
+const TabMenu = (props: TabMenuProps) => {
+  const { name, depends, items = [], data, menugroup, orientation = "horizontal" } = props ?? {};
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const pageContext = usePageContext();
+  const pageView = usePageViewContext();
+  const contextKey = name ?? depends ?? "";
+
+  const resolvedItems = items.map((item: any, index: number) => ({
+    ...item,
+    key: item.id ?? Math.random().toString(36).substring(2, 15),
+    index,
+  }));
+
+  const onRefresh = () => setRefreshKey((k) => k + 1);
+  useDependHandler({ name: depends, onRefresh });
+
+  const handleClick = (item: Record<string, any>) => {
+    setSelectedIndex(item.index);
+
+    if (item.page != null && item.page.trim() !== "") {
+      pageView.setPage(item.page);
+    } else if (contextKey != null && contextKey.trim() !== "") {
+      const selItem = { ...item };
+      delete selItem.id;
+      delete selItem.title;
+      delete selItem.index;
+      delete selItem.key;
+      delete selItem.selected;
+      delete selItem.onClick;
+      pageContext.set(contextKey, selItem); // ← sets "selectedTask" = "new_application_list"
+    }
+  };
+
+  useEffect(() => {
+    if (resolvedItems != null && resolvedItems.length > 0 && selectedIndex === -1) {
+      handleClick(resolvedItems[0]);
+    }
+  }, [resolvedItems]);
+
+  const render = () => {
+    if (resolvedItems.length === 0) return null;
+
+    const elems = resolvedItems.map((it) => {
+      const item = it as unknown as TabMenuItemProps;
+      item.selected = item.index === selectedIndex;
+      return <TabMenuItem {...item} key={item.key} onClick={handleClick} />;
+    });
+
+    if (orientation === "vertical") {
+      return (
+        <div className="border-r border-gray-200">
+          <VPanel gap={25}>{elems}</VPanel>
+        </div>
+      );
+    }
+
+    return (
+      <div className="w-full">
+        <HPanel gap={25}>{elems}</HPanel>
+      </div>
+    );
+  };
+
+  return <div>{render()}</div>;
+};
+
+export default TabMenu;
+
+/* ------------------------------------------------------------------ */
+/* TabMenuItem */
+
+const TabMenuItem = (props: TabMenuItemProps) => {
+  const { title, onClick } = props ?? {};
+
+  const handleClick = () => onClick(props);
+
+  const render = () => {
+    if (props.selected) {
+      return (
+        <div onClick={handleClick} className="relative px-4 py-3 cursor-pointer text-sm transition-all duration-200 text-gray-900 font-semibold">
+          {title}
+          <span className="absolute bottom-0 left-0 w-full h-[2px] rounded-full bg-gray-900" />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        onClick={handleClick}
+        className="relative px-4 py-3 cursor-pointer text-sm transition-all duration-200 text-gray-500 font-normal hover:text-gray-600"
+      >
+        {title}
+      </div>
+    );
+  };
+
+  return <div onClick={handleClick}>{render()}</div>;
+};

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

@@ -0,0 +1,14 @@
+import { AbstractComponent } from "../../types/component";
+import { MenuGroup, MenuItem } from "../common/UIMenu";
+type TreeMenuGroup = MenuGroup & {
+    isDropdown?: boolean;
+};
+interface TreeMenuProps extends AbstractComponent {
+    name?: string;
+    items?: TreeMenuGroup[] | MenuItem[];
+    data?: Record<string, any>;
+    menugroup?: string;
+    depends?: string;
+}
+declare const TreeMenu: (props: TreeMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default TreeMenu;