aq-fe-framework 0.1.155 → 0.1.156

package/dist/components/Layouts/BasicAppShell/BasicAppShell.tsx

@@ -0,0 +1,357 @@
+"use client";
+import { MySwitchTheme } from "@/components/ActionIcons/SwitchTheme/MySwitchTheme";
+import { MyAppSpotlight } from "@/components/AppSpotlight/MyAppSpotlight";
+import {
+    ActionIcon,
+    AppShell,
+    Badge,
+    Divider,
+    Group,
+    Image,
+    NavLink,
+    ScrollArea,
+    Select,
+    Text,
+    TextInput,
+    Tooltip
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { spotlight } from "@mantine/spotlight";
+import {
+    IconLayoutSidebarLeftCollapse,
+    IconLayoutSidebarLeftExpand,
+    IconLibraryMinus,
+    IconSearch,
+} from "@tabler/icons-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ReactNode } from "react";
+import { useS_BasicAppShell } from "./useS_BasicAppShell";
+import { F_authenticate_Logout } from "@/modules-features/authenticate/F_authenticate_Logout";
+
+export interface I_BasicAppShell_LinkItem {
+    pageId?: number;
+    name?: string;
+    label: string;
+    status?: "Default" | "Prototype" | "New" | "Menu" | "Change";
+    link?: string;
+    links?: I_BasicAppShell_LinkItem[];
+}
+
+function getRightSection(status: string) {
+    if (status === "Prototype")
+        return (
+            <Badge styles={{ root: { cursor: "pointer" } }} radius="xs" color="pink" circle>
+                P
+            </Badge>
+        );
+    if (status === "New")
+        return (
+            <Badge styles={{ root: { cursor: "pointer" } }} radius="xs" circle>
+                N
+            </Badge>
+        );
+    if (status === "Menu")
+        return (
+            <Badge styles={{ root: { cursor: "pointer" } }} radius="xs" color="gray" circle>
+                M
+            </Badge>
+        );
+    if (status === "Change")
+        return (
+            <Badge styles={{ root: { cursor: "pointer" } }} radius="xs" color="green" circle>
+                C
+            </Badge>
+        );
+    return null; // Fallback for unknown types
+}
+
+function RenderNavLinks({ items }: { items: I_BasicAppShell_LinkItem[] }) {
+    const basicAppShellStore = useS_BasicAppShell();
+    const pathName = usePathname();
+    return (
+        <>
+            {items.map((item, index) => (
+                <NavLink
+                    active={item.link === pathName.split("/")[2]}
+                    component={Link}
+                    key={index}
+                    rightSection={getRightSection(item.status!)}
+                    opened={basicAppShellStore.state.groupMenuOpenId.includes(item.label)}
+                    href={`/${pathName.split("/")[1]}/${item.link}` || "#"}
+                    label={item.label}
+                    childrenOffset={28}
+                    // rightSection={item.link && "prototype"}
+                    onClick={() => {
+                        if (item.links) basicAppShellStore.toggleGroupMenuOpenId(item.label);
+                        if (item.link) {
+                            basicAppShellStore.setProperty("menuCode", item.link);
+                            basicAppShellStore.setProperty("title", item.label);
+                        }
+                    }}
+                >
+                    {item.links && <RenderNavLinks items={item.links} />}
+                </NavLink>
+            ))}
+        </>
+    );
+}
+
+function childrenMenuToListEnumUsingPageIdAndName(children: I_BasicAppShell_LinkItem[]): I_BasicAppShell_LinkItem[] {
+    return children.flatMap((item) => {
+        if (item.label === "Quản lí hệ thống" || item.label === "Văn bản - Quy định") {
+            return []; // Exclude these menus
+        }
+        return item.links
+            ? item.pageId
+                ? [item, ...childrenMenuToListEnumUsingPageIdAndName(item.links)]
+                : childrenMenuToListEnumUsingPageIdAndName(item.links)
+            : item.pageId
+                ? [item]
+                : [];
+    });
+}
+
+function validateMenuItems(items: I_BasicAppShell_LinkItem[]): boolean {
+    const pageIdSet = new Set<number>();
+    const nameSet = new Set<string>();
+
+    for (const item of items) {
+        if (item.pageId) {
+            if (pageIdSet.has(item.pageId)) {
+                alert(`Duplicate pageId detected: ${item.pageId}`);
+                return false;
+            }
+            pageIdSet.add(item.pageId);
+        }
+        if (item.name) {
+            const enumName = "COE_" + item.name.replace(/\s+/g, "_");
+            if (nameSet.has(enumName)) {
+                alert(`Duplicate name detected: ${item.name}`);
+                return false;
+            }
+            nameSet.add(enumName);
+        }
+    }
+
+    return true;
+}
+
+function sortMenuItemsByPageId(items: I_BasicAppShell_LinkItem[]): I_BasicAppShell_LinkItem[] {
+    return items.sort((a, b) => (a.pageId ?? 0) - (b.pageId ?? 0));
+}
+
+export function BasicAppShell_transformMenuToEnum(prefixProjectName: string, menu: I_BasicAppShell_LinkItem[]) {
+    const items = childrenMenuToListEnumUsingPageIdAndName(menu);
+
+    if (!validateMenuItems(items)) {
+        return {};
+    }
+
+    return sortMenuItemsByPageId(items).reduce((acc, item) => {
+        if (item.pageId && item.name) {
+            acc[prefixProjectName + item.name.replace(/\s+/g, "_")] = item.pageId;
+        }
+        return acc;
+    }, {} as Record<string, number>);
+}
+
+interface BasicAppShellProps {
+    children: ReactNode,
+    menu: I_BasicAppShell_LinkItem[],
+    extraTopRight?: ReactNode
+}
+
+export function BasicAppShell({ children, menu, extraTopRight }: BasicAppShellProps) {
+    const basicAppShellStore = useS_BasicAppShell();
+    const media = useMediaQuery("(min-width: 72em)");
+    const selectMedia = useMediaQuery("(min-width: 80em)");
+    // console.log(BasicAppShell_transformMenuToEnum("STM_", menu));
+
+    return (
+        <AppShell
+            header={{ height: 60 }}
+            navbar={{
+                width: 333,
+                breakpoint: "sm",
+                collapsed: {
+                    mobile: basicAppShellStore.state.opened,
+                    desktop: !basicAppShellStore.state.opened,
+                },
+            }}
+            padding="md"
+        >
+            <AppShell.Header>
+                <MyAppSpotlight menu={menu} />
+                {/* For large screens - show all elements normally */}
+                {media ? (
+                    <Group h="100%" px="md" justify="space-between" align="center">
+                        {/* Left side */}
+                        <Group h="100%">
+                            <Tooltip
+                                label={
+                                    basicAppShellStore.state.opened
+                                        ? "Ẩn thanh menu"
+                                        : "Hiện thanh menu"
+                                }
+                            >
+                                <ActionIcon
+                                    size="lg"
+                                    radius="md"
+                                    variant="default"
+                                    onClick={basicAppShellStore.toggle}
+                                >
+                                    {basicAppShellStore.state.opened ? (
+                                        <IconLayoutSidebarLeftExpand />
+                                    ) : (
+                                        <IconLayoutSidebarLeftCollapse />
+                                    )}
+                                </ActionIcon>
+                            </Tooltip>
+                            <Tooltip label="Đóng tất cả menu">
+                                <ActionIcon
+                                    size="lg"
+                                    radius="md"
+                                    variant="default"
+                                    onClick={() => basicAppShellStore.clearGroupMenuOpenId()}
+                                >
+                                    <IconLibraryMinus />
+                                </ActionIcon>
+                            </Tooltip>
+                        </Group>
+
+                        {/* Center - placed with absolute positioning */}
+                        <Group
+                            style={{
+                                position: "absolute",
+                                left: "50%",
+                                transform: "translateX(-50%)",
+                            }}
+                        >
+                            <Text c="green" fw="bold">
+                                {`${basicAppShellStore.state.moduleCode} - ${basicAppShellStore.state.moduleName}`}
+                            </Text>
+                        </Group>
+
+                        {/* Right side */}
+                        <Group>
+                            {extraTopRight}
+                            <MySwitchTheme />
+                        </Group>
+                    </Group>
+                ) : (
+                    // For mobile screens - simplified layout
+                    <Group h="100%" px="md" justify="space-between">
+                        {/* Left: Just menu toggle */}
+                        <ActionIcon
+                            size="lg"
+                            radius="md"
+                            variant="default"
+                            onClick={basicAppShellStore.toggle}
+                        >
+                            {basicAppShellStore.state.opened ? (
+                                <IconLayoutSidebarLeftExpand />
+                            ) : (
+                                <IconLayoutSidebarLeftCollapse />
+                            )}
+                        </ActionIcon>
+
+                        {/* Center: Short title */}
+                        <Text c="green" fw="bold" size="sm">
+                            {`${basicAppShellStore.state.moduleCode} - ${basicAppShellStore.state.moduleName}`}
+                        </Text>
+
+                        {/* Right: Just theme switch and dropdown menu for other options */}
+                        <Group>
+                            {extraTopRight}
+                            <MySwitchTheme />
+                        </Group>
+                    </Group>
+                )}
+            </AppShell.Header>
+            <AppShell.Navbar>
+                <TextInput
+                    mt={"md"}
+                    placeholder="Tìm menu (Ctrl + K)"
+                    mx={10}
+                    component={"button"}
+                    onClick={spotlight.open}
+                    leftSection={<IconSearch />}
+                >
+                    Tìm kiếm (Ctrl + K)
+                </TextInput>
+                <AppShell.Section grow component={ScrollArea} p={5}>
+                    <RenderNavLinks items={menu} />
+                    <Divider></Divider>
+                    <F_authenticate_Logout />
+                </AppShell.Section>
+                <AppShell.Section p={"md"}>
+                    <Divider></Divider>
+                    <Image
+                        fit="contain"
+                        src={`data:image/${basicAppShellStore.state.logoFileDetail?.fileExtension};base64,
+                            ${basicAppShellStore.state.logoFileDetail?.fileBase64String}`}
+                        h={"115px"}
+                        fallbackSrc="https://placehold.co/600x400?text=Placeholder"
+                        alt="Main logo"
+                        w="330px"
+                    ></Image>
+                </AppShell.Section>
+            </AppShell.Navbar>
+            <AppShell.Main
+                bg={"light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8))"}
+            >
+                {children}
+            </AppShell.Main>
+
+        </AppShell >
+    );
+}
+
+export const groupToTwoLevels = (menu: I_BasicAppShell_LinkItem[]): I_BasicAppShell_LinkItem[] => {
+    return menu
+        .map((item) => {
+            if (item.links) {
+                const flattenedLinks: I_BasicAppShell_LinkItem[] = [];
+
+                const flattenSubLinks = (subLinks: I_BasicAppShell_LinkItem[]) => {
+                    subLinks.forEach((subItem) => {
+                        if (subItem.links) {
+                            flattenSubLinks(subItem.links); // Flatten deeper levels
+                        } else {
+                            if (subItem.pageId != undefined) {
+                                flattenedLinks.push(subItem);
+                            }
+                        }
+                    });
+                };
+
+                flattenSubLinks(item.links);
+
+                return {
+                    ...item,
+                    links: flattenedLinks, // Replace with flattened links
+                };
+            }
+
+            if (item.pageId != undefined) {
+                return item;
+            }
+            return undefined;
+        })
+        .filter((item) => item != undefined);
+};
+export function utils_layout_getItemsWithoutLinks(menu: I_BasicAppShell_LinkItem[]) {
+    let result: I_BasicAppShell_LinkItem[] = [];
+    function traverse(items: I_BasicAppShell_LinkItem[]) {
+        for (const item of items) {
+            if (!item.links) {
+                result.push(item);
+            } else {
+                traverse(item.links);
+            }
+        }
+    }
+    traverse(menu);
+    return result;
+}

package/dist/components/Layouts/BasicAppShell/css.module.css

@@ -0,0 +1,62 @@
+.navbar {
+  height: rem(700px);
+  padding: var(--mantine-spacing-md);
+  display: flex;
+  flex-direction: column;
+  border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.navbarMain {
+  flex: 1;
+}
+
+.header {
+  padding-bottom: var(--mantine-spacing-md);
+  margin-bottom: calc(var(--mantine-spacing-md) * 1.5);
+  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.footer {
+  padding-top: var(--mantine-spacing-md);
+  margin-top: var(--mantine-spacing-md);
+  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-sm);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+
+    .linkIcon {
+      color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    }
+  }
+
+  &[data-active] {
+    &,
+    &:hover {
+      background-color: var(--mantine-color-blue-light);
+      color: var(--mantine-color-blue-light-color);
+
+      .linkIcon {
+        color: var(--mantine-color-blue-light-color);
+      }
+    }
+  }
+}
+
+.linkIcon {
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  margin-right: var(--mantine-spacing-sm);
+  width: rem(25px);
+  height: rem(25px);
+}

package/dist/components/Layouts/BasicAppShell/useS_BasicAppShell.ts

@@ -0,0 +1,64 @@
+import { useQ_AQ_GetAQModule } from "@/hooks/query/AQ/useQ_AQ_GetAQModule";
+import { createGenericStore } from "@/stores";
+import { IAQFileDetail } from "@/utils";
+
+interface I {
+    moduleCode?: string
+    moduleName?: string
+
+    logoFileDetail?: IAQFileDetail,
+    faviconFileDetail?: IAQFileDetail
+
+    opened: boolean
+    title: string
+    groupMenuOpenId: string[]
+    menuCode?: string;
+}
+
+const useStore = createGenericStore<I>({
+    initialState: {
+        menuCode: "",
+        moduleCode: "Module code",
+        moduleName: "Module name",
+        title: "",
+        opened: true,
+        groupMenuOpenId: []
+    },
+    storageKey: "useS_BasicAppShell",
+});
+
+export function useS_BasicAppShell() {
+    const store = useStore();
+    const GetAQModule_query = useQ_AQ_GetAQModule()
+    function toggle() {
+        store.setProperty("opened", !store.state.opened);
+    }
+    function toggleGroupMenuOpenId(id: string) {
+        const currentIds = store.state.groupMenuOpenId;
+        if (currentIds.includes(id)) {
+            // Nếu id đã tồn tại, xóa nó
+            store.setProperty(
+                "groupMenuOpenId",
+                currentIds.filter((existingId) => existingId !== id)
+            );
+        } else {
+            store.setProperty("groupMenuOpenId", [...currentIds, id]);
+        }
+    }
+    function clearGroupMenuOpenId() {
+        store.setProperty("groupMenuOpenId", []);
+    }
+    function setDefault() {
+        if (!GetAQModule_query.data) return
+        store.setProperty("faviconFileDetail", GetAQModule_query.data?.faviconFileDetail)
+        store.setProperty("logoFileDetail", GetAQModule_query.data?.logoFileDetail)
+    }
+
+    return {
+        ...store,
+        toggle,
+        toggleGroupMenuOpenId,
+        clearGroupMenuOpenId,
+        setDefault
+    };
+}

package/dist/components/Layouts/Container/MyContainer.tsx

@@ -0,0 +1,16 @@
+import { Container, ContainerProps, Flex } from '@mantine/core'
+import { ReactNode } from 'react'
+
+interface I extends ContainerProps {
+    children?: ReactNode
+}
+
+export function MyContainer({ children, ...rest }: I) {
+    return (
+        <Container fluid {...rest}>
+            <Flex direction={"column"}>
+                {children}
+            </Flex>
+        </Container>
+    )
+}

package/dist/components/Layouts/FlexColumn/MyFlexColumn.tsx

@@ -0,0 +1,14 @@
+import { Flex, FlexProps } from "@mantine/core";
+import { ReactNode } from "react";
+
+interface IMyFlexColumn extends FlexProps {
+    children?: ReactNode;
+}
+
+export function MyFlexColumn({ children, ...rest }: IMyFlexColumn) {
+    return (
+        <Flex direction={"column"} gap={"md"} {...rest}>
+            {children}
+        </Flex>
+    );
+}

package/dist/components/Layouts/FlexEnd/MyFlexEnd.tsx

@@ -0,0 +1,14 @@
+import { Group, GroupProps } from "@mantine/core";
+import { ReactNode } from "react";
+
+interface IMyFlexEnd extends GroupProps {
+    children: ReactNode;
+}
+
+export function MyFlexEnd({ children, ...rest }: IMyFlexEnd) {
+    return (
+        <Group justify="end" mt={"md"} {...rest}>
+            {children}
+        </Group>
+    );
+}

package/dist/components/Layouts/FlexRow/MyFlexRow.tsx

@@ -0,0 +1,14 @@
+import { Flex, FlexProps } from "@mantine/core";
+import { ReactNode } from "react";
+
+interface IFlexRow extends FlexProps {
+    children: ReactNode;
+}
+
+export function MyFlexRow({ children, ...rest }: IFlexRow) {
+    return (
+        <Flex gap={"md"} align={"center"} {...rest}>
+            {children}
+        </Flex>
+    );
+}

package/dist/components/Layouts/HeaderMegaMenu/HeaderMegaMenu.tsx

@@ -0,0 +1,147 @@
+'use client'
+import { MySwitchTheme } from '@/components/ActionIcons/SwitchTheme/MySwitchTheme';
+import { OBJECT_COlORS } from '@/constants/object/color';
+import {
+    Box,
+    Burger,
+    Button,
+    Container,
+    Divider,
+    Drawer,
+    Group,
+    Image,
+    ScrollArea,
+    Text,
+    TextInput,
+    ThemeIcon,
+    UnstyledButton,
+    useMantineTheme
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import {
+    IconBook,
+    IconChartPie3,
+    IconCode,
+    IconCoin,
+    IconFingerprint,
+    IconNotification,
+    IconSearch
+} from '@tabler/icons-react';
+import Link from 'next/link';
+import { ReactNode } from 'react';
+import { MyFlexColumn } from '../FlexColumn/MyFlexColumn';
+import classes from './css.module.css';
+import { useHeaderMegaMenuStore } from './HeaderMegaMenuStore';
+
+const mockdata = [
+    {
+        icon: IconCode,
+        title: 'Open source',
+        description: 'This Pokémon’s cry is very loud and distracting',
+    },
+    {
+        icon: IconCoin,
+        title: 'Free for everyone',
+        description: 'The fluid of Smeargle’s tail secretions changes',
+    },
+    {
+        icon: IconBook,
+        title: 'Documentation',
+        description: 'Yanma is capable of seeing 360 degrees without',
+    },
+    {
+        icon: IconFingerprint,
+        title: 'Security',
+        description: 'The shell’s rounded shape and the grooves on its.',
+    },
+    {
+        icon: IconChartPie3,
+        title: 'Analytics',
+        description: 'This Pokémon uses its flying ability to quickly chase',
+    },
+    {
+        icon: IconNotification,
+        title: 'Notifications',
+        description: 'Combusken battles with the intensely hot flames it spews',
+    },
+];
+interface IMenu {
+    label?: string,
+    href?: string
+}
+
+interface IHeaderMegaMenu {
+    children?: ReactNode
+    menus?: IMenu[]
+}
+
+export function HeaderMegaMenu({ children, menus }: IHeaderMegaMenu) {
+    const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false);
+    const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);
+    const HeaderMegaMenuStore = useHeaderMegaMenuStore()
+    const theme = useMantineTheme();
+
+    const links = mockdata.map((item) => (
+        <UnstyledButton className={classes.subLink} key={item.title}>
+            <Group wrap="nowrap" align="flex-start">
+                <ThemeIcon size={34} variant="default" radius="md">
+                    <item.icon size={22} color={theme.colors.blue[6]} />
+                </ThemeIcon>
+                <div>
+                    <Text size="sm" fw={500}>
+                        {item.title}
+                    </Text>
+                    <Text size="xs" c="dimmed">
+                        {item.description}
+                    </Text>
+                </div>
+            </Group>
+        </UnstyledButton>
+    ));
+
+    return (
+        <Box>
+            <header className={classes.header} >
+                <Group justify="space-between" h="100%">
+                    <Group>
+                        <Image src={"/imgs/0/IMG0LogoAQTech.png"} h={30} alt="" w="auto"></Image>
+
+                        <Group h="100%" gap={5} visibleFrom="sm" >
+                            {menus?.map((item, idx) => (
+                                <Button key={idx} component={Link} href={item.href!} variant={HeaderMegaMenuStore.state.name == item.label ? "light" : "subtle"} onClick={() => HeaderMegaMenuStore.setState({ name: item.label })}>{item.label}</Button>
+                            ))}
+                        </Group>
+                    </Group>
+
+                    <Group>
+                        <TextInput placeholder='Tìm kiếm' leftSection={<IconSearch />} radius={'xl'} w={'250px'} />
+                        <MySwitchTheme />
+                    </Group>
+                    <Burger opened={drawerOpened} onClick={toggleDrawer} hiddenFrom="sm" />
+                </Group>
+            </header>
+            <Container fluid pt={'sm'} pb={'md'} bg={OBJECT_COlORS.mantineBackgroundSecondary} mih={'93vh'}>
+                {children}
+            </Container>
+            <Drawer
+                opened={drawerOpened}
+                onClose={closeDrawer}
+                size="100%"
+                padding="md"
+                title="Navigation"
+                hiddenFrom="sm"
+                zIndex={1000000}
+            >
+                <ScrollArea h="calc(100vh - 80px" mx="-md">
+                    <Divider my="sm" />
+                    <MyFlexColumn h="100%" gap={0} >
+                        {menus?.map((item, idx) => (
+                            <Button key={idx} component={Link} href={item.href!} variant={HeaderMegaMenuStore.state.name == item.label ? "light" : "subtle"} onClick={() => HeaderMegaMenuStore.setState({ name: item.label })}>{item.label}</Button>
+                        ))}
+                    </MyFlexColumn>
+                    <Divider my="sm" />
+                </ScrollArea>
+            </Drawer>
+        </Box>
+    );
+}