aq-fe-framework 0.1.154 → 0.1.156

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>
+        </>
+    );
+}

package/dist/components/Buttons/Button/MyButton.tsx

@@ -0,0 +1,90 @@
+import { TYPES_CRUD } from "@/types/types";
+import { Button, ButtonProps } from "@mantine/core";
+import { IconDeviceFloppy, IconEdit, IconFileExport, IconFileImport, IconPlus, IconPrinter, IconTrash, IconX } from "@tabler/icons-react";
+import { ReactNode } from "react";
+
+interface IMyButton extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "style">, ButtonProps {
+    crudType?: TYPES_CRUD
+    children?: ReactNode;
+}
+
+export function MyButton({ children, crudType = "delete", ...rest }: IMyButton) {
+    if (crudType == "default") {
+        return (
+            <Button color="indigo" {...rest}>
+                {children}
+            </Button>
+        );
+    }
+    if (crudType == "create") {
+        return (
+            <Button color="indigo" type="submit" leftSection={<IconPlus />} {...rest}>
+                {children ? children : "Lưu"}
+            </Button>
+        );
+    }
+    if (crudType == "createMultiple") {
+        return (
+            <Button color="green" type="submit" leftSection={<IconPlus />} {...rest}>
+                {children ? children : "Thêm danh sách"}
+            </Button>
+        );
+    }
+    if (crudType == "delete") {
+        return (
+            <Button color="red" leftSection={<IconTrash />} {...rest}>
+                {children ? children : "Xác nhận xóa"}
+            </Button>
+        );
+    }
+    if (crudType == "update") {
+        return (
+            <Button color="yellow" type="submit" leftSection={<IconEdit />} {...rest}>
+                {children ? children : "Chỉnh sửa"}
+            </Button>
+        );
+    }
+    if (crudType == "save") {
+        return (
+            <Button color="blue" type="submit" leftSection={<IconDeviceFloppy />} {...rest}>
+                {children ? children : "Lưu"}
+            </Button>
+        );
+    }
+    if (crudType == "import") {
+        return (
+            <Button color="green.8" leftSection={<IconFileImport />} {...rest}>
+                {children ? children : "Import"}
+            </Button>
+        );
+    }
+    if (crudType == "print") {
+        return (
+            <Button color="orange.7" leftSection={<IconPrinter />} {...rest}>
+                {children ? children : "In"}
+            </Button>
+        );
+    }
+    if (crudType == "export") {
+        return (
+            <Button color="green.8" leftSection={<IconFileExport />} {...rest}>
+                {children ? children : "Export"}
+            </Button>
+        );
+    }
+    if (crudType == "cancel") {
+        return (
+            <Button color="gray" leftSection={<IconX />} {...rest}>
+                {children ? children : "Hủy thao tác"}
+            </Button>
+        );
+    }
+    if (crudType == "select") {
+        return (
+            <Button  {...rest}>
+                {children ? children : "Chọn"}
+            </Button>
+        );
+    }
+
+}

package/dist/components/Buttons/ButtonCRUD/AQButtonCreateByImportFile.tsx

@@ -0,0 +1,81 @@
+import { MyButton } from "@/components/Buttons/Button/MyButton"
+import { MyFlexColumn } from "@/components/Layouts/FlexColumn/MyFlexColumn"
+import { utils_notification_show } from "@/utils/utils_notification"
+import { FileInput } from "@mantine/core"
+import { useForm } from "@mantine/form"
+import { useDisclosure } from "@mantine/hooks"
+import { IconFileTypeXls } from "@tabler/icons-react"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { ComponentProps } from "react"
+import * as XLSX from 'xlsx'
+import { MyButtonModal } from "../ButtonModal/MyButtonModal"
+
+interface IMyButtonCreate extends Omit<ComponentProps<typeof MyButtonModal>, "disclosure" | "form"> {
+    onSubmit: () => void,
+    onSuccess?: () => void; // Custom callback for success handling
+    onError?: () => void; // Custom callback for error handling
+    form: ReturnType<typeof useForm>;
+    setImportedData?: (data: any) => void;
+}
+
+export function AQButtonCreateByImportFile({ form, onSubmit, onSuccess, onError,
+    // children,
+    setImportedData,
+    ...rest }: IMyButtonCreate) {
+
+    const disc = useDisclosure()
+    const queryClient = useQueryClient()
+    const mutation = useMutation({
+        mutationFn: async () => {
+            return await onSubmit()
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries()
+            utils_notification_show({ crudType: "create" });
+            disc[1].close();
+            form.reset()
+            if (onSuccess) onSuccess();
+        },
+        onError: () => {
+            if (onError) onError();
+        },
+    })
+
+
+    const handleFileChange = (file: File | null) => {
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const binaryStr = event.target?.result;
+            if (binaryStr) {
+                const workbook = XLSX.read(binaryStr, { type: 'binary' });
+                const sheetName = workbook.SheetNames[0]; // Get the first sheet name
+                const sheet = workbook.Sheets[sheetName]; // Get the first sheet
+                const data = XLSX.utils.sheet_to_json(sheet); // Convert sheet to JSON
+                setImportedData && setImportedData(data); // Save the parsed data to the form
+            }
+        };
+        reader.readAsArrayBuffer(file);
+    };
+
+    return (
+        <MyButtonModal disclosure={disc} crudType="createMultiple"  {...rest}>
+            <form onSubmit={form.onSubmit((values) => {
+
+            })}>
+                <MyFlexColumn>
+                    {/* {children} */}
+                    <FileInput
+                        leftSection={<IconFileTypeXls />}
+                        accept=".xlsx"
+                        description="Định dạng hợp lệ: .xlsx"
+                        label="Chọn file"
+                        onChange={handleFileChange}
+                        clearable={true}
+                        placeholder="Chọn file" />
+                    <MyButton type="submit" crudType="createMultiple" />
+                </MyFlexColumn>
+            </form>
+        </MyButtonModal>
+    )
+}

package/dist/components/Buttons/ButtonCRUD/AQButtonExportData.tsx

@@ -0,0 +1,75 @@
+import { Button } from "@mantine/core";
+import { IconDownload } from "@tabler/icons-react";
+import * as XLSX from "xlsx";
+
+interface FieldConfig {
+    fieldName: string; // Field name in the data
+    header: string; // Header name for the export
+    formatFunction?: (value: any, row: any) => any; // Optional formatting function
+}
+
+interface ExportConfig {
+    fields: FieldConfig[]; // Array of field configurations
+}
+
+interface AQButtonExportDataProps {
+    isAllData: boolean
+    objectName: string;
+    data: any[];
+    exportConfig: ExportConfig;
+}
+
+export function AQButtonExportData({
+    isAllData,
+    objectName,
+    data,
+    exportConfig
+}: AQButtonExportDataProps) {
+    const handleExport = () => {
+        // Process data with formatting functions
+        const processedData = data.map((row) => {
+            const newRow: any = {};
+            exportConfig.fields.forEach(({ fieldName, formatFunction }) => {
+                newRow[fieldName] = formatFunction ? formatFunction(row[fieldName], row) : row[fieldName];
+            });
+            return newRow;
+        });
+
+        // Map headers to new labels
+        const headers: { [key: string]: string } = {};
+        exportConfig.fields.forEach(({ fieldName, header }) => {
+            headers[fieldName] = header;
+        });
+
+        // Create a worksheet
+        const worksheet = XLSX.utils.json_to_sheet(processedData);
+
+        // Rename headers in the worksheet
+        const headerRow = exportConfig.fields.map(({ fieldName }) => headers[fieldName]);
+        XLSX.utils.sheet_add_aoa(worksheet, [headerRow], { origin: "A1" });
+
+        // Export worksheet as an Excel file
+        const workbook = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(workbook, worksheet, "Exported Data");
+
+        // Trigger the download
+        XLSX.writeFile(workbook, `${objectName}.xlsx`);
+    };
+
+    return (
+        <Button
+            disabled={data.length === 0}
+            variant="filled"
+            color="teal"
+            onClick={(event) => {
+                event.preventDefault();
+                handleExport();
+            }}
+            leftSection={<IconDownload />}
+        >
+            {/* {isAllData ? "Xuất toàn bộ dữ liệu" : "Xuất dữ liệu được chọn"} */}
+            {"Export"}
+        </Button>
+    );
+}
+