@gadmin2n/schematics 0.0.64 → 0.0.65

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/layout/logo.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export const Logo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#1677FF"
+      fillRule="evenodd"
+      d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.744-18.41c.182-.647-.446-1.03-1.02-.621l-8.008 5.705c-.622.443-.524 1.326.147 1.326h2.109v-.016h4.11l-3.35 1.181-1.476 5.245c-.182.647.446 1.03 1.02.621l8.008-5.705c.622-.443.524-1.326-.147-1.326H13.94l1.805-6.41Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/layout/sider.tsx

@@ -1,162 +1,341 @@
-import React, { useState } from "react";
+import React, { useMemo, useEffect, useRef, useCallback, type CSSProperties } from "react";
+
+import { useThemedLayoutContext } from "@refinedev/antd";
 import {
-    ITreeMenu,
-    CanAccess,
-    useIsExistAuthentication,
-    useTranslate,
-    useLogout,
-    useMenu,
-    useWarnAboutChange,
+  type ITreeMenu,
+  pickNotDeprecated,
+  useLink,
+  useMenu,
+  useNavigation,
+  useGo,
 } from "@refinedev/core";
-import { Link } from "react-router-dom";
-import { Sider, ThemedTitle } from "@refinedev/antd";
-import { Layout as AntdLayout, Menu, Grid, theme, Button } from "antd";
+import { useTranslation } from "react-i18next";
+
 import {
-    LogoutOutlined,
-    UnorderedListOutlined,
-    RightOutlined,
-    LeftOutlined,
+  BarsOutlined,
+  LeftOutlined,
+  RightOutlined,
+  UnorderedListOutlined,
 } from "@ant-design/icons";
-import { antLayoutSider, antLayoutSiderMobile } from "./styles";
+import { Button, Drawer, Grid, Layout, Menu, theme, type MenuProps } from "antd";
+import { Title } from "./title";
+
+const drawerButtonStyles: CSSProperties = {
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  position: "fixed",
+  top: 64,
+  zIndex: 1001,
+};
+
+let reRouteNum = 0;
 
+const { SubMenu } = Menu;
 const { useToken } = theme;
 
-export const CustomSider: typeof Sider = ({ render }) => {
+const getParentKeysFromMenuTree = (
+  items: ITreeMenu[],
+  targetKey: string,
+  parentKeys: string[] = [],
+): string[] | null => {
+  for (const item of items) {
+    const currentKey = item.key || "";
+
+    if (currentKey === targetKey) {
+      return parentKeys;
+    }
+
+    if (item.children && item.children.length > 0) {
+      const found = getParentKeysFromMenuTree(item.children, targetKey, [
+        ...parentKeys,
+        currentKey,
+      ]);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+const getMenuLabel = (name: string, meta: Record<string, any>, locale: string): string => {
+  const isZh = locale === "zh_CN" || locale === "zh";
+  if (isZh && meta?.zhLabel) return meta.zhLabel;
+  if (!isZh && meta?.enLabel) return meta.enLabel;
+  return meta?.label || name;
+};
+
+export const Sider: React.FC = () => {
   const { token } = useToken();
-  const [collapsed, setCollapsed] = useState<boolean>(false);
-  const isExistAuthentication = useIsExistAuthentication();
-  const { warnWhen, setWarnWhen } = useWarnAboutChange();
-  const { mutate: mutateLogout } = useLogout();
-  const translate = useTranslate();
   const { menuItems, selectedKey, defaultOpenKeys } = useMenu();
-  const { SubMenu } = Menu;
+  const { t, i18n } = useTranslation();
+  const currentLocale = i18n.language;
 
-  const breakpoint = Grid.useBreakpoint();
+  const [openKeys, setOpenKeys] = React.useState<string[]>(defaultOpenKeys);
 
-  const isMobile =
-    typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
-
-  const renderTreeView = (tree: ITreeMenu[], selectedKey: string) => {
-    return tree.map((item: ITreeMenu) => {
-      const { name, children, meta, key, list } = item;
-
-      const icon = meta?.icon;
-      const label = meta?.label ?? name;
-      const parent = meta?.parent;
-      const route =
-        typeof list === "string"
-          ? list
-          : typeof list !== "function"
-          ? list?.path
-          : key;
-
-      if (children.length > 0) {
-        return (
-          <SubMenu
-            key={route}
-            icon={icon ?? <UnorderedListOutlined />}
-            title={label}
-            style={{
-              textTransform: "capitalize",
-            }}
-          >
-            {renderTreeView(children, selectedKey)}
-          </SubMenu>
-        );
-      }
-      //console.log(route , selectedKey, defaultOpenKeys)
-      const isSelected = route === selectedKey;
-      const isRoute = !(parent !== undefined && children.length === 0);
-      return (
-        <CanAccess
-          key={route}
-          resource={name.toLowerCase()}
-          action="list"
-          params={{ resource: item }}
-        >
-          <Menu.Item
-            key={route}
-            style={{
-              textTransform: "capitalize",
-            }}
-            icon={icon ?? (isRoute && <UnorderedListOutlined />)}
-          >
-            {route ? (
-              <Link
-                to={`${route}${meta?.listInitParams || ""}`}
-              >
-                {label}
-              </Link>
-            ) : (
-              label
-            )}
-            {!collapsed && isSelected && (
-              <div className="ant-menu-tree-arrow" />
-            )}
-          </Menu.Item>
-        </CanAccess>
-      );
-    });
-  };
+  const lastSelectedKeyRef = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (selectedKey && selectedKey !== lastSelectedKeyRef.current && menuItems.length > 0) {
+      lastSelectedKeyRef.current = selectedKey;
 
-  const handleLogout = () => {
-    if (warnWhen) {
-      const confirm = window.confirm(
-        translate(
-          "warnWhenUnsavedChanges",
-          "Are you sure you want to leave? You have unsaved changes."
-        )
-      );
-
-      if (confirm) {
-        setWarnWhen(false);
-        mutateLogout();
+      const parentKeys = getParentKeysFromMenuTree(menuItems, selectedKey);
+
+      if (parentKeys !== null) {
+        setOpenKeys(parentKeys);
       }
-    } else {
-      mutateLogout();
     }
-  };
+  }, [selectedKey, menuItems]);
+
+  const { siderCollapsed, setSiderCollapsed, mobileSiderOpen, setMobileSiderOpen } =
+    useThemedLayoutContext();
+
+  const Link = useLink();
+  const go = useGo();
+
+  const breakpoint = Grid.useBreakpoint();
+  const { listUrl } = useNavigation();
+
+  const isMobile = typeof breakpoint.lg === "undefined" ? false : !breakpoint.lg;
+
+  const renderTreeView = useCallback(
+    (tree: ITreeMenu[], currentSelectedKey?: string): MenuProps["items"] => {
+      return tree
+        .map((item: ITreeMenu) => {
+          const { key, name, children, meta = {}, list } = item;
+          const { icon, parent: parentName } = meta;
+
+          const route = typeof list === "string" ? list : listUrl(name);
+
+          if (children.length > 0) {
+            return {
+              key: item.key || Math.random().toString(),
+              label: getMenuLabel(name, meta, currentLocale),
+              icon: icon ?? <UnorderedListOutlined />,
+              children: renderTreeView(children, currentSelectedKey),
+            };
+          }
 
-  const logout = isExistAuthentication && (
-    <Menu.Item key="logout" onClick={handleLogout} icon={<LogoutOutlined />}>
-      {translate("buttons.logout", "Logout")}
-    </Menu.Item>
+          const menuItemKey = item.key || Math.random().toString();
+          const isSelected = menuItemKey === currentSelectedKey;
+          const isRoute = !(
+            pickNotDeprecated(meta?.parent, meta?.parent, parentName) !== undefined &&
+            children.length === 0
+          );
+
+          return {
+            key: menuItemKey,
+            label: (
+              <>
+                <Link to={route ?? ""}>{getMenuLabel(name, meta, currentLocale)}</Link>
+                {!siderCollapsed && isSelected && <div className="ant-menu-tree-arrow" />}
+              </>
+            ),
+            icon: icon ?? (isRoute && <UnorderedListOutlined />),
+          };
+        })
+        .filter(Boolean);
+    },
+    [listUrl, Link, siderCollapsed, currentLocale],
   );
 
-  const items = renderTreeView(menuItems, selectedKey);
+  const items = useMemo(() => {
+    return renderTreeView(menuItems, selectedKey)?.filter(Boolean);
+  }, [menuItems, selectedKey, renderTreeView]);
+
+  // Auto-redirect to first available menu item if current selectedKey is not in the menu
+  useEffect(() => {
+    if (reRouteNum > 5) return;
+
+    const isKeyInMenuItems = (menuItems: MenuProps["items"], key: string): boolean => {
+      if (!menuItems) return false;
+      for (const item of menuItems) {
+        if (!item) continue;
+        if (item.key === key) return true;
+        if ("children" in item && item.children) {
+          if (isKeyInMenuItems(item.children as MenuProps["items"], key)) return true;
+        }
+      }
+      return false;
+    };
+
+    // If selectedKey is in the menu, no need to redirect
+    if (selectedKey && isKeyInMenuItems(items, selectedKey)) {
+      return;
+    }
 
-  const renderSider = () => {
-    if (render) {
-      return render({
-        dashboard: null,
-        items,
-        logout,
-        collapsed,
-      });
+    // Skip auto-redirect for CRUD detail pages (edit/show/create)
+    // These pages are not in the menu but are valid navigation targets
+    if (selectedKey && (
+      selectedKey.includes('/edit/') ||
+      selectedKey.includes('/show/') ||
+      selectedKey.endsWith('/create')
+    )) {
+      return;
     }
+
+    const timer = setTimeout(() => {
+      reRouteNum++;
+
+      const firstKey = items?.[0]?.key;
+      if (firstKey && firstKey !== "/dashboard") {
+        setOpenKeys([String(firstKey)]);
+        const firstItem = items?.find(item => item?.key === firstKey) as any;
+        if (firstItem?.children?.length > 0) {
+          let childItem = firstItem?.children?.find(
+            (item: any) => selectedKey.indexOf(item?.key) !== -1,
+          );
+          if (!childItem) {
+            childItem = firstItem?.children?.[0];
+          }
+          const childKey = childItem?.key;
+          if (childItem?.children?.length > 0) {
+            setOpenKeys([String(firstKey), String(childKey)]);
+            const grandsonItem = childItem?.children?.find(
+              (item: any) => selectedKey.indexOf(item?.key) !== -1,
+            );
+            const grandsonKey = grandsonItem?.key || firstItem?.children?.[0]?.children?.[0]?.key;
+            go({ to: grandsonKey, type: "replace" });
+          } else {
+            go({ to: childKey, type: "replace" });
+          }
+        } else {
+          go({ to: String(firstKey), type: "replace" });
+        }
+      }
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [items, selectedKey, go]);
+
+  const handleOpenChange = useCallback(
+    (keys: string[]) => {
+      const latestOpenKey = keys.find(key => !openKeys.includes(key));
+
+      if (latestOpenKey) {
+        const parentKeys = getParentKeysFromMenuTree(menuItems, latestOpenKey) || [];
+        setOpenKeys([...parentKeys, latestOpenKey]);
+      } else {
+        setOpenKeys(keys);
+      }
+    },
+    [openKeys, menuItems],
+  );
+
+  const handleMenuClick = useCallback(
+    ({ key }: { key: string }) => {
+      const clickedItem = menuItems.find(item => item.key === key);
+      if (clickedItem && clickedItem.children.length === 0) {
+        setOpenKeys([]);
+      }
+      setMobileSiderOpen(false);
+    },
+    [menuItems, setMobileSiderOpen],
+  );
+
+  const renderMenu = useCallback(() => {
+    return (
+      <Menu
+        selectedKeys={selectedKey ? [selectedKey] : []}
+        defaultOpenKeys={defaultOpenKeys}
+        openKeys={openKeys}
+        onOpenChange={handleOpenChange}
+        mode="inline"
+        items={items}
+        style={{
+          paddingTop: "8px",
+          border: "none",
+          overflow: "auto",
+          height: "calc(100% - 72px)",
+          background: "transparent",
+        }}
+        onClick={handleMenuClick}
+      ></Menu>
+    );
+  }, [selectedKey, defaultOpenKeys, openKeys, handleOpenChange, items, handleMenuClick]);
+
+  const renderDrawerSider = () => {
     return (
       <>
-        {items}
+        <Drawer
+          open={mobileSiderOpen}
+          onClose={() => setMobileSiderOpen(false)}
+          placement="left"
+          closable={false}
+          width={256}
+          styles={{
+            body: {
+              padding: 0,
+            },
+          }}
+          maskClosable={true}
+        >
+          <Layout>
+            <Layout.Sider
+              width={500}
+              style={{
+                height: "100vh",
+                backgroundColor: token.colorBgContainer,
+                borderRight: `1px solid ${token.colorBorderBg}`,
+              }}
+            >
+              <div
+                style={{
+                  width: "256px",
+                  padding: "0 16px",
+                  display: "flex",
+                  justifyContent: "flex-start",
+                  alignItems: "center",
+                  height: "64px",
+                  backgroundColor: token.colorBgElevated,
+                  borderBottom: "none",
+                }}
+              >
+                <Title collapsed={false} />
+              </div>
+              {renderMenu()}
+            </Layout.Sider>
+          </Layout>
+        </Drawer>
+        <Button
+          style={drawerButtonStyles}
+          size="large"
+          onClick={() => setMobileSiderOpen(true)}
+          icon={<BarsOutlined />}
+        />
       </>
     );
   };
 
-  const siderStyle = isMobile ? antLayoutSiderMobile : antLayoutSider;
+  if (isMobile) {
+    return renderDrawerSider();
+  }
+
+  const siderStyles: React.CSSProperties = {
+    backgroundColor: token.colorBgContainer,
+    borderRight: `1px solid ${token.colorBorderBg}`,
+    position: "sticky",
+    top: 0,
+    left: 0,
+    height: "100vh",
+    zIndex: 999,
+  };
 
   return (
-    <AntdLayout.Sider
-      collapsible
-      collapsedWidth={isMobile ? 0 : 80}
-      collapsed={collapsed}
-      breakpoint="lg"
-      onCollapse={(collapsed: boolean): void => setCollapsed(collapsed)}
-      style={{
-        ...siderStyle,
-        backgroundColor: token.colorBgContainer,
-        borderRight: `1px solid ${token.colorBgElevated}`,
-      }}
-      trigger={
-        !isMobile && (
+    <>
+      <Layout.Sider
+        style={siderStyles}
+        width={256}
+        collapsible
+        collapsed={siderCollapsed}
+        onCollapse={(collapsed, type) => {
+          if (type === "clickTrigger") {
+            setSiderCollapsed(collapsed);
+          }
+        }}
+        collapsedWidth={80}
+        breakpoint="lg"
+        trigger={
           <Button
             type="text"
             style={{
@@ -164,9 +343,10 @@ export const CustomSider: typeof Sider = ({ render }) => {
               height: "100%",
               width: "100%",
               backgroundColor: token.colorBgElevated,
+              borderRight: `1px solid ${token.colorBorderBg}`,
             }}
           >
-            {collapsed ? (
+            {siderCollapsed ? (
               <RightOutlined
                 style={{
                   color: token.colorPrimary,
@@ -180,39 +360,24 @@ export const CustomSider: typeof Sider = ({ render }) => {
               />
             )}
           </Button>
-        )
-      }
-    >
-      <div
-        style={{
-          width: collapsed ? "80px" : "200px",
-          padding: collapsed ? "0" : "0 16px",
-          display: "flex",
-          justifyContent: collapsed ? "center" : "flex-start",
-          alignItems: "center",
-          height: "64px",
-          backgroundColor: token.colorBgElevated,
-          fontSize: "14px",
-        }}
+        }
       >
-        <ThemedTitle collapsed={collapsed} text='Opinions admin'/>
-      </div>
-      <Menu
-        defaultOpenKeys={defaultOpenKeys}
-        selectedKeys={[selectedKey]}
-        mode="inline"
-        style={{
-          marginTop: "8px",
-          border: "none",
-        }}
-        onClick={() => {
-          if (!breakpoint.lg) {
-            setCollapsed(true);
-          }
-        }}
-      >
-        {renderSider()}
-      </Menu>
-    </AntdLayout.Sider>
+        <div
+          style={{
+            width: siderCollapsed ? "80px" : "256px",
+            padding: siderCollapsed ? "0" : "0 16px",
+            display: "flex",
+            justifyContent: siderCollapsed ? "center" : "flex-start",
+            alignItems: "center",
+            height: "64px",
+            backgroundColor: token.colorBgElevated,
+            fontSize: "14px",
+          }}
+        >
+          <Title collapsed={siderCollapsed} />
+        </div>
+        {renderMenu()}
+      </Layout.Sider>
+    </>
   );
 };

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/layout/title.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+import type { RefineLayoutThemedTitleProps } from "@refinedev/antd";
+import { useLink } from "@refinedev/core";
+
+import { Space, theme, Typography } from "antd";
+
+import { Logo } from "./logo";
+
+const { useToken } = theme;
+
+const name = "Opinions admin";
+
+export const Title: React.FC<RefineLayoutThemedTitleProps> = ({
+  collapsed,
+  wrapperStyles,
+}) => {
+  const { token } = useToken();
+  const Link = useLink();
+
+  return (
+    <Link
+      to="/"
+      style={{
+        display: "inline-block",
+        textDecoration: "none",
+      }}
+    >
+      <Space
+        style={{
+          display: "flex",
+          alignItems: "center",
+          fontSize: "inherit",
+          ...wrapperStyles,
+        }}
+      >
+        <div
+          style={{
+            height: "24px",
+            width: "24px",
+            color: token.colorPrimary,
+          }}
+        >
+          <Logo />
+        </div>
+
+        {!collapsed && (
+          <Typography.Title
+            style={{
+              fontSize: "inherit",
+              marginBottom: 0,
+              fontWeight: 700,
+            }}
+          >
+            {name}
+          </Typography.Title>
+        )}
+      </Space>
+    </Link>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/pagination-total.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+type PaginationTotalProps = {
+  total: number;
+  entityName: string;
+};
+
+export const PaginationTotal: React.FC<PaginationTotalProps> = ({
+  total,
+  entityName,
+}) => {
+  return (
+    <span
+      style={{
+        marginLeft: "16px",
+      }}
+    >
+      <span className="ant-text secondary">{total}</span> {entityName} in total
+    </span>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/tags/index.ts

@@ -0,0 +1 @@
+export * from "./role-tag";

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/tags/role-tag.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { Tag } from "antd";
+
+// Color mapping for different roles
+const roleColorMap: Record<string, string> = {
+  OFFICE: "green",
+  CES: "blue",
+  INFRA: "purple",
+  FIT: "green",
+  SECURITY: "green",
+  COST: "gold",
+  HR: "orange",
+  HR_AMER: "coral",
+  HR_APAC: "khaki",
+  HR_EMEA: "amber",
+  HR_MALAYSIA: "pink",
+  HR_SINGAPORE: "lightblue",
+  OMC: "magenta",
+  PRODUCT: "cyan",
+  SYSTEM_ADMIN: "red",
+  FEATURE_IOA_DEVICE_IP: "green",
+  BUSINESS_TRIP: "teal",
+};
+
+type Props = {
+  role: string;
+};
+
+export const RoleStatusTag: React.FC<Props> = ({ role }) => {
+  const color = roleColorMap[role] || "blue";
+
+  return (
+    <Tag
+      style={{
+        textTransform: "capitalize",
+      }}
+      color={color}
+      title={role}
+    >
+      {role.toLowerCase()}
+    </Tag>
+  );
+};