aq-fe-framework 0.1.156 → 0.1.157

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

@@ -1,357 +0,0 @@
-"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

@@ -1,62 +0,0 @@
-.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

@@ -1,64 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,147 +0,0 @@
-'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>
-    );
-}