aq-fe-framework 0.1.155 → 0.1.156

package/dist/components/ActionIcons/ActionIconCRUD/MyActionIconDelete.tsx

@@ -0,0 +1,81 @@
+import { MyButton } from "@/components/Buttons/Button/MyButton";
+import { utils_notification_show } from "@/utils/utils_notification";
+import { Group, Highlight } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ComponentProps, useState } from "react";
+import { MyActionIconModal } from "../ActionIconModal/MyActionIconModal";
+interface IActionIconDelete extends Omit<ComponentProps<typeof MyActionIconModal>, "disclosure"> {
+    onSubmit: () => void;
+    onSuccess?: () => void;
+    onError?: () => void;
+    contextData?: string;
+    loading?: boolean;
+}
+
+export function MyActionIconDelete({
+    onSubmit,
+    onSuccess,
+    onError,
+    contextData,
+    ...rest
+}: IActionIconDelete) {
+    const queryClient = useQueryClient();
+    const disc = useDisclosure();
+    const loadingState = useState<boolean>()
+
+
+    const mutation = useMutation({
+        mutationFn: async () => await onSubmit(),
+        onSuccess: () => {
+            if (onSuccess) {
+                onSuccess()
+                return
+            }
+            queryClient.invalidateQueries();
+            utils_notification_show({ crudType: "delete" });
+            disc[1].close();
+        },
+        onError: () => {
+            if (onError) {
+                onError()
+                return
+            }
+        },
+    });
+
+    function handleCLick() {
+        loadingState[1](true)
+        mutation.mutate();
+    }
+    return (
+        <MyActionIconModal
+            disclosure={disc}
+            crudType="delete"
+            {...rest}
+        >
+            <Highlight
+                highlight={contextData || []}
+                color="red.6"
+                highlightStyles={{
+                    fontWeight: 700,
+                    WebkitBackgroundClip: 'text',
+                    WebkitTextFillColor: 'transparent',
+                }}
+            >
+                {`Bạn sắp xóa dữ liệu ${contextData || ""}. Hành động này không thể hoàn tác. Bạn có chắc chắn muốn tiếp tục?`}
+            </Highlight>
+            <Group grow>
+                <MyButton
+                    crudType="delete"
+                    onClick={handleCLick}
+                    loading={loadingState[0]}
+                />
+                <MyButton
+                    crudType="cancel"
+                    onClick={disc[1].close}
+                />
+            </Group>
+        </MyActionIconModal>
+    );
+}

package/dist/components/ActionIcons/ActionIconCRUD/MyActionIconUpdate.tsx

@@ -0,0 +1,68 @@
+import { MyButton } from "@/components/Buttons/Button/MyButton"
+import { MyFlexColumn } from "@/components/Layouts/FlexColumn/MyFlexColumn"
+import { utils_notification_show } from "@/utils/utils_notification"
+import { UseFormReturnType } from "@mantine/form"
+import { useDisclosure } from "@mantine/hooks"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { ComponentProps, useEffect } from "react"
+import { MyActionIconModal } from "../ActionIconModal/MyActionIconModal"
+
+interface IActionIconUpdate<T> extends Omit<ComponentProps<typeof MyActionIconModal>, "form" | "disclosure" | "onSubmit"> {
+    resetFormWhenclose?: boolean
+    onSubmit: (values: T) => void
+    onSuccess?: () => void; // Custom callback for success handling
+    onError?: () => void; // Custom callback for error handling
+    form: UseFormReturnType<T>;
+    disclosure?: ReturnType<typeof useDisclosure>;
+}
+
+export function MyActionIconUpdate<T>({
+    resetFormWhenclose,
+    form,
+    onSubmit,
+    onSuccess,
+    onError,
+    children,
+    ...rest
+}: IActionIconUpdate<T>) {
+    const disc = useDisclosure()
+    const queryClient = useQueryClient()
+
+    const mutation = useMutation({
+        mutationFn: async (values: T) => {
+            await onSubmit(values);
+        },
+        onSuccess: () => {
+            if (onSuccess) {
+                onSuccess()
+            }
+            queryClient.invalidateQueries()
+            utils_notification_show({ crudType: "update" });
+            disc[1].close();
+
+        },
+        onError: () => {
+            if (onError) onError();
+        },
+    })
+    useEffect(() => {
+        if (!resetFormWhenclose) return
+        if (disc[0] == true) return
+        form.reset()
+    }, [disc[0]])
+    return (
+        <MyActionIconModal disclosure={disc} crudType="update" {...rest}>
+            <form onSubmit={form.onSubmit((values) => {
+                mutation.mutate(values);
+            })}>
+                <MyFlexColumn>
+                    {children}
+                    <MyButton
+                        type="submit"
+                        crudType="save"
+                    />
+                </MyFlexColumn>
+            </form>
+        </MyActionIconModal>
+    )
+}

package/dist/components/ActionIcons/ActionIconCheck/MyActionIconCheck.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { MyTextInput } from "@/components/Inputs/TextInput/MyTextInput";
+import { MyFlexColumn } from "@/components/Layouts/FlexColumn/MyFlexColumn";
+import { ActionIcon, ActionIconProps, Button, Checkbox, Modal, Switch, Text, Tooltip } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconChecklist } from "@tabler/icons-react";
+import { useState } from "react";
+
+
+interface IActionIconCheck extends ActionIconProps {
+    modalSize?: string; comment?: string
+}
+
+export function MyActionIconCheck({ modalSize = "50%", comment = "", ...rest }: IActionIconCheck) {
+    const disc = useDisclosure(false);
+    const fullScreen = useState(false);
+    const hSize = useState("50vh");
+    return (
+        <>
+            <Tooltip label="Xem tài liệu trực tiếp" >
+                <ActionIcon color="cyan" onClick={disc[1].open} {...rest}>
+                    <IconChecklist size={24} color="blue" />
+                </ActionIcon>
+            </Tooltip>
+
+            <Modal
+                fullScreen={fullScreen[0]}
+                opened={disc[0]}
+                onClose={disc[1].close}
+                size={modalSize}
+                title={
+                    <Text>Kiểm tra hồ sơ đã đăng ký</Text>
+
+                }>
+                <Switch
+                    defaultChecked
+                    label="Đạt yêu cầu"
+                />
+                <MyFlexColumn>
+                    <MyTextInput label="Nhận xét" />
+                    <Checkbox label="Gửi mail thông báo" />
+                    <Button>Cập nhập</Button>
+                </MyFlexColumn>
+
+            </Modal>
+
+
+        </>
+    );
+}

package/dist/components/ActionIcons/ActionIconDownloadPDF/MyActionIconDownloadPDF.tsx

@@ -0,0 +1,13 @@
+import { utils_pdf_download } from "@/utils/utils_pdf";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconDownload } from "@tabler/icons-react";
+
+export function MyActionIconDownloadPDF({ pdfLink = "https://datafiles.chinhphu.vn/cpp/files/vbpq/2021/07/17-bgd.signed.pdf" }: { pdfLink: string }) {
+    return (
+        <Tooltip label="Nhấp để tải xuống">
+            <ActionIcon onClick={async () => await utils_pdf_download(pdfLink)} color="red">
+                <IconDownload />
+            </ActionIcon>
+        </Tooltip>
+    );
+}

package/dist/components/ActionIcons/ActionIconModal/MyActionIconModal.tsx

@@ -0,0 +1,113 @@
+import { MyFlexColumn } from "@/components/Layouts/FlexColumn/MyFlexColumn";
+import { TYPES_CRUD, TYPES_MANTINE_SIZE } from "@/types/types";
+import { ActionIcon, ActionIconProps, Modal } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
+import { ReactNode } from "react";
+
+interface IMyActionIconModal extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style">, ActionIconProps {
+    title?: string;
+    children?: ReactNode;
+    crudType?: TYPES_CRUD;
+    modalSize?: TYPES_MANTINE_SIZE;
+    disclosure: ReturnType<typeof useDisclosure>;
+    fullScreen?: boolean;
+    icon?: ReactNode;
+}
+
+export function MyActionIconModal({
+    fullScreen = false,
+    crudType = "default",
+    disclosure,
+    modalSize,
+    title,
+    children,
+    icon,
+    ...rest
+}: IMyActionIconModal) {
+    if (crudType == "default") {
+        return (
+            <>
+                <ActionIcon onClick={disclosure?.[1].open} color="indigo" {...rest}>
+                    {icon}
+                </ActionIcon>
+                <Modal
+                    fullScreen={fullScreen}
+                    size={modalSize}
+                    title={title}
+                    opened={disclosure?.[0]}
+                    onClose={disclosure[1].close}>
+                    <MyFlexColumn>{children}</MyFlexColumn>
+                </Modal>
+            </>
+        );
+    }
+    if (crudType == "create") {
+        return (
+            <>
+                <ActionIcon onClick={disclosure?.[1].open}  {...rest}>
+                    {icon ? icon : <IconPlus />}
+                </ActionIcon>
+                <Modal
+                    fullScreen={fullScreen}
+                    size={modalSize}
+                    title={title ? title : "Tạo dữ liệu mới"}
+                    opened={disclosure?.[0]}
+                    onClose={disclosure[1].close}>
+                    <MyFlexColumn>{children}</MyFlexColumn>
+                </Modal>
+            </>
+        );
+    }
+    if (crudType == "update") {
+        return (
+            <>
+                <ActionIcon onClick={disclosure?.[1].open} color="yellow"  {...rest}>
+                    {icon ? icon : <IconEdit />}
+                </ActionIcon>
+                <Modal
+                    fullScreen={fullScreen}
+                    size={modalSize}
+                    title={title ? title : "Sửa dữ liệu"}
+                    opened={disclosure?.[0]}
+                    onClose={disclosure[1].close}>
+                    <MyFlexColumn>{children}</MyFlexColumn>
+                </Modal>
+            </>
+        );
+    }
+    if (crudType == "delete") {
+        return (
+            <>
+                <ActionIcon onClick={disclosure?.[1].open} color="red"  {...rest}>
+                    {icon ? icon : <IconTrash />}
+                </ActionIcon>
+                <Modal
+                    fullScreen={fullScreen}
+                    size={modalSize}
+                    title={title ? title : "Xóa dữ liệu"}
+                    opened={disclosure?.[0]}
+                    onClose={disclosure[1].close}>
+                    <MyFlexColumn>{children}</MyFlexColumn>
+                </Modal>
+            </>
+        );
+    }
+    if (crudType == "check") {
+        return (
+            <>
+                <ActionIcon onClick={disclosure?.[1].open} color="green"  {...rest}>
+                    {icon ? icon : <IconTrash />}
+                </ActionIcon>
+                <Modal
+                    fullScreen={fullScreen}
+                    size={modalSize}
+                    title={title ? title : "Kiểm tra"}
+                    opened={disclosure?.[0]}
+                    onClose={disclosure[1].close}>
+                    <MyFlexColumn>{children}</MyFlexColumn>
+                </Modal>
+            </>
+        );
+    }
+}

package/dist/components/ActionIcons/ActionIconUpload/MyActionIconUpload.tsx

@@ -0,0 +1,19 @@
+import { ActionIcon } from "@mantine/core";
+import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
+import { IconCloudUpload } from "@tabler/icons-react";
+import { useRef } from "react";
+
+export function MyActionIconUpload() {
+    const openRef = useRef<() => void>(null);
+    return (
+        <Dropzone
+            openRef={openRef}
+            onDrop={() => { }}
+            radius="md"
+
+            accept={[MIME_TYPES.pdf]}
+        >
+            <ActionIcon><IconCloudUpload /></ActionIcon>
+        </Dropzone>
+    )
+}

package/dist/components/ActionIcons/ActionIconViewPdf/MyActionIconViewPDF.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { ActionIcon, ActionIconProps, Group, Modal, Paper, Text, Tooltip } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconLivePhoto, IconMaximize, IconMinimize } from "@tabler/icons-react";
+import { useState } from "react";
+
+interface IActionIconViewPDF extends ActionIconProps {
+    modalSize?: string;
+    pdfLink: string;
+}
+
+export function MyActionIconViewPDF({
+    modalSize = "80%",
+    pdfLink = "https://datafiles.chinhphu.vn/cpp/files/vbpq/2021/07/17-bgd.signed.pdf",
+    ...rest
+}: IActionIconViewPDF) {
+    const disc = useDisclosure(false);
+    const fullScreen = useState(false);
+    const hSize = useState("80vh");
+    return (
+        <>
+            <Tooltip label="Xem tài liệu trực tiếp">
+                <ActionIcon color="cyan" onClick={disc[1].open} {...rest}>
+                    <IconLivePhoto />
+                </ActionIcon>
+            </Tooltip>
+            <Modal
+                fullScreen={fullScreen[0]}
+                opened={disc[0]}
+                onClose={disc[1].close}
+                size={modalSize}
+                title={
+                    <Group>
+                        <Text>Xem tài liệu trực tiếp</Text>
+                        {fullScreen[0] ? (
+                            <ActionIcon
+                                onClick={() => {
+                                    fullScreen[1](false);
+                                    hSize[1]("80vh");
+                                }}
+                            >
+                                <IconMinimize />
+                            </ActionIcon>
+                        ) : (
+                            <ActionIcon
+                                onClick={() => {
+                                    fullScreen[1](true);
+                                    hSize[1]("90vh");
+                                }}
+                            >
+                                <IconMaximize />
+                            </ActionIcon>
+                        )}
+                    </Group>
+                }
+            >
+                <Paper h={hSize[0]} p={"lg"}>
+                    <iframe src={pdfLink} width={"100%"} height={"100%"} />
+                </Paper>
+            </Modal>
+        </>
+    );
+}

package/dist/components/ActionIcons/SwitchTheme/MySwitchTheme.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { ActionIcon, useComputedColorScheme, useMantineColorScheme } from '@mantine/core';
+import { IconMoon, IconSun } from '@tabler/icons-react';
+
+export function MySwitchTheme() {
+    const { setColorScheme } = useMantineColorScheme();
+    const computedColorScheme = useComputedColorScheme('light', {
+        getInitialValueInEffect: true,
+    });
+
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) return null; // hoặc <Skeleton /> nếu bạn muốn placeholder
+
+    return (
+        <ActionIcon
+            onClick={() =>
+                setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')
+            }
+            variant="default"
+            size="lg"
+            radius="md"
+            aria-label="Toggle color scheme"
+        >
+            {computedColorScheme === 'dark' ? (
+                <IconSun width="22px" height="22px" stroke={1.5} />
+            ) : (
+                <IconMoon width="22px" height="22px" stroke={1.5} />
+            )}
+        </ActionIcon>
+    );
+}

package/dist/components/AppSpotlight/MyAppSpotlight.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { Spotlight, spotlight } from "@mantine/spotlight";
+import { IconSearch } from "@tabler/icons-react";
+import { usePathname, useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
+import { I_BasicAppShell_LinkItem } from "../Layouts/BasicAppShell/BasicAppShell";
+import { useS_BasicAppShell } from "../Layouts/BasicAppShell/useS_BasicAppShell";
+
+// Hàm đệ quy để chuyển đổi menu thành các action cho Spotlight
+function convertMenuToSpotlightActions(
+    items: I_BasicAppShell_LinkItem[],
+    router: any,
+    parentPath: string = "",
+    sideBarStore: any,
+    pathName: string
+): any[] {
+    let actions: any[] = [];
+
+    items.forEach((item) => {
+        // Nếu có link, thêm action cho item này
+        if (item.link) {
+            actions.push({
+                id: item.label.toLowerCase().replace(/\s+/g, "-"),
+                label: item.label,
+                description: `Chuyển đến ${item.label} (Code: ${item.link})`,
+                onClick: () => {
+                    sideBarStore.setProperty("title", item.label);
+                    sideBarStore.setProperty("menuCode", item.link);
+                    router.push(
+                        pathName.split("/")[0] + "/" + pathName.split("/")[1] + "/" + item.link
+                    );
+                    spotlight.close();
+                },
+                rightSection: item.status
+                    ? item.status === "Prototype"
+                        ? "P"
+                        : item.status === "New"
+                            ? "N"
+                            : item.status === "Menu"
+                                ? "M"
+                                : null
+                    : null,
+            });
+        }
+
+        // Nếu có submenu, gọi đệ quy để thêm các action con
+        if (item.links) {
+            actions = actions.concat(
+                convertMenuToSpotlightActions(
+                    item.links,
+                    router,
+                    item.link || "",
+                    sideBarStore,
+                    pathName
+                )
+            );
+        }
+    });
+
+    return actions;
+}
+
+export function MyAppSpotlight({ menu }: { menu: I_BasicAppShell_LinkItem[] }) {
+    const [query, setQuery] = useState("");
+    const router = useRouter();
+    const pathName = usePathname();
+    const basicAppShellStore = useS_BasicAppShell(); // Get the sidebar store here
+
+    // Chuyển đổi menu thành các action một lần để tối ưu hiệu suất
+    const spotlightActions = useMemo(
+        () => convertMenuToSpotlightActions(menu, router, "", basicAppShellStore, pathName),
+        [menu, router, basicAppShellStore] // Add sideBarStore to the dependency array
+    );
+
+    return (
+        <Spotlight
+            actions={spotlightActions}
+            query={query}
+            scrollable
+            maxHeight={800}
+            onQueryChange={setQuery}
+            shortcut={["mod + K", "/"]} // Hỗ trợ Ctrl/Cmd + K và phím /
+            nothingFound="Không tìm thấy trang"
+            highlightQuery
+            searchProps={{
+                leftSection: <IconSearch stroke={1.5} />,
+                placeholder: "Tìm kiếm trang...",
+            }}
+        />
+    );
+}
+
+// Nếu muốn thêm nút mở Spotlight
+export function SpotlightTrigger() {
+    return (
+        <button
+            onClick={spotlight.open}
+            style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+            }}
+        >
+            <IconSearch stroke={1.5} />
+            Tìm kiếm (Ctrl + K)
+        </button>
+    );
+}

package/dist/components/Buttons/Anchor/MyAnchorViewPDF.tsx

@@ -0,0 +1,46 @@
+import { ActionIcon, Anchor, Group, Modal, Paper, Text } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconMaximize, IconMinimize } from "@tabler/icons-react";
+import { useState } from "react";
+
+export function MyAnchorViewPDF({ label, pdfLink }: { label: string; pdfLink: string }) {
+    const disc = useDisclosure(false);
+    const fullScreen = useState(false);
+    const hSize = useState("80vh");
+    return (
+        <>
+            <Anchor onClick={disc[1].open}>{label}</Anchor>
+            <Modal
+                fullScreen={fullScreen[0]}
+                opened={disc[0]}
+                onClose={disc[1].close}
+                size={"80%"}
+                title={
+                    <Group>
+                        <Text>Xem tài liệu trực tiếp</Text>
+                        {fullScreen[0] ? (
+                            <ActionIcon
+                                onClick={() => {
+                                    fullScreen[1](false);
+                                    hSize[1]("80vh");
+                                }}>
+                                <IconMinimize />
+                            </ActionIcon>
+                        ) : (
+                            <ActionIcon
+                                onClick={() => {
+                                    fullScreen[1](true);
+                                    hSize[1]("90vh");
+                                }}>
+                                <IconMaximize />
+                            </ActionIcon>
+                        )}
+                    </Group>
+                }>
+                <Paper h={hSize[0]}>
+                    <iframe src={pdfLink} width={"100%"} height={"100%"} />
+                </Paper>
+            </Modal>
+        </>
+    );
+}