aq-fe-framework 0.1.155 → 0.1.156

package/dist/components/Buttons/ButtonViewPDF/MyButtonViewPDF.tsx

@@ -0,0 +1,121 @@
+"use client";
+import baseAxios from "@/api/baseAxios";
+import {
+    ActionIcon,
+    Button,
+    Group,
+    LoadingOverlay,
+    Modal,
+    Paper,
+    Text,
+    Tooltip,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconLivePhoto, IconMaximize, IconMinimize } from "@tabler/icons-react";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+interface IMyButtonViewPDF {
+    modalSize?: string;
+    label?: string;
+    id?: number;
+    src?: string;
+    isActionIcon?: boolean;
+    filePath?: string
+}
+export function MyButtonViewPDF({
+    id,
+    modalSize = "80%",
+    label = "Xem file",
+    src = "https://datafiles.chinhphu.vn/cpp/files/vbpq/2016/07/85.signed.pdf",
+    isActionIcon = false,
+    filePath
+}: IMyButtonViewPDF) {
+    const disc = useDisclosure(false);
+    const fullScreen = useState(false);
+    const hSize = useState("80vh");
+    const query = useQuery({
+        queryKey: ["MyButtonViewPDF", id, filePath],
+        queryFn: async () => {
+            if (filePath) {
+                const res = await baseAxios.get("/AQ/GetFile?filePath=" + filePath);
+                return res.data.data;
+            }
+
+            const res = await baseAxios.get("/Document/Get?id=" + id);
+            return res.data.data;
+        },
+        enabled: disc[0] == true,
+    });
+    return (
+        <>
+            <Tooltip label="Xem tài liệu trực tiếp">
+                {isActionIcon ? (
+                    <ActionIcon
+                        onClick={() => {
+                            disc[1].open();
+                        }}
+                    >
+                        <IconLivePhoto />
+                    </ActionIcon>
+                ) : (
+                    <Button
+                        color="cyan"
+                        onClick={() => {
+                            disc[1].open();
+                        }}
+                        leftSection={<IconLivePhoto />}
+                    >
+                        {label}
+                    </Button>
+                )}
+            </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"} pos={"relative"}>
+                    <LoadingOverlay
+                        visible={query.isLoading}
+                        zIndex={1000}
+                        overlayProps={{ radius: "sm", blur: 2 }}
+                    />
+                    {query.data ? (
+                        <iframe
+                            src={`data:application/pdf;base64, ${filePath ? query.data?.fileBase64String : query.data?.fileDetail?.fileBase64String}`}
+                            width={"100%"}
+                            height={"100%"}
+                        />
+                    ) : (
+                        <iframe src={src} width={"100%"} height={"100%"} />
+                    )}
+                </Paper>
+            </Modal>
+        </>
+    );
+}

package/dist/components/Calendar/MyCalendar.tsx

@@ -0,0 +1,118 @@
+import {
+    createViewDay,
+    createViewMonthAgenda,
+    createViewMonthGrid,
+    createViewWeek
+} from '@schedule-x/calendar';
+import { createEventModalPlugin } from '@schedule-x/event-modal';
+import { createEventsServicePlugin } from '@schedule-x/events-service';
+import { ScheduleXCalendar, useNextCalendarApp } from '@schedule-x/react';
+
+import { Paper, Text } from '@mantine/core';
+import '@schedule-x/theme-default/dist/index.css';
+import { useEffect } from "react";
+import { MyFlexColumn } from '../Layouts/FlexColumn/MyFlexColumn';
+
+export function MyCalendar() {
+    const plugins = [createEventsServicePlugin(), createEventModalPlugin()]
+
+    const calendar = useNextCalendarApp({
+        locale: "vi-VN",
+        dayBoundaries: {
+            start: '05:00',
+            end: '21:00',
+        },
+        weekOptions: {
+            gridHeight: 700
+        },
+        views: [createViewDay(), createViewWeek(), createViewMonthGrid(), createViewMonthAgenda()],
+        events: [
+            {
+                id: '1',
+                giangvien: 'TDMU048- Bùi Đức Anh',
+                title: 'Tin học căn bản',
+                people: ['Sức chứa: 30'],
+                location: 'Phòng: B103',
+                start: '2024-12-17 06:00',
+                end: '2024-12-17 08:00',
+                laLichThi: false,
+                description: 'Giảng viên: TDMU048- Bùi Đức Anh',
+            },
+            {
+                id: '2',
+                giangvien: 'CNTT030- Nguyễn Thế Bảo',
+                title: 'Tin học căn bản',
+                people: ['Sức chứa: 30'],
+                location: 'Phòng: B103',
+                start: '2024-12-18 06:00',
+                end: '2024-12-18 08:00',
+                laLichThi: false,
+                description: 'Giảng viên: CNTT030- Nguyễn Thế Bảo',
+            },
+            {
+                id: 3,
+                giangvien: 'CNTT026- Võ Thị Diễm Hương',
+                title: 'Tin học căn bản',
+                people: ['Sức chứa: 30'],
+                location: 'Phòng: B103',
+                start: '2024-12-19 06:00',
+                end: '2024-12-19 08:00',
+                laLichThi: false,
+                description: "Giảng viên:  CNTT026- Võ Thị Diễm Hương"
+            },
+            {
+                id: 4,
+                giangvien: 'KHNN065- Nguyễn Xuân Tiến',
+                title: 'Tin học căn bản',
+                people: ['Sức chứa: 30'],
+                location: 'Phòng: B102',
+                start: '2024-12-20 06:00',
+                end: '2024-12-20 08:00',
+                laLichThi: false,
+                description: "Giảng viên: KHNN065- Nguyễn Xuân Tiến"
+            },
+            {
+                id: 5,
+                // giangvien: 'KHNN065- Nguyễn Xuân Tiến',
+                title: 'Tiếng anh thương mại',
+                people: ['Sức chứa: 30'],
+                location: 'Phòng: B102',
+                start: '2024-12-16 14:00',
+                end: '2024-12-16 16:00',
+                laLichThi: true,
+                // description: "Giảng viên: KHNN065- Nguyễn Xuân Tiến"
+            },
+        ],
+    }, plugins)
+
+    useEffect(() => {
+        // get all events
+        calendar?.events.getAll()
+    }, [])
+
+    return (
+        <div>
+            <ScheduleXCalendar calendarApp={calendar} customComponents={{
+                timeGridEvent: ({ calendarEvent }) => {
+                    console.log(calendarEvent);
+                    return (
+                        <Paper h={'100%'} bg={calendarEvent.laLichThi ? 'violet.2' : "blue.2"} p={4}>
+                            <MyFlexColumn gap={1}>
+                                <Text size='sm' fw={'bold'}>{calendarEvent.laLichThi ? "(Thi) " : "(Học) "}{calendarEvent.title}</Text>
+                                {calendarEvent.laLichThi == false && <Text size='sm'>{calendarEvent.giangvien}</Text>}
+                                <Text size='sm'>{calendarEvent.location}</Text>
+                            </MyFlexColumn>
+                        </Paper>
+                    )
+                },
+                // eventModal: ({ calendarEvent }) => {
+                //     return (
+                //         <Paper bg={'red'} style={{ position: 'relative', overflow: "hidden" }}>
+                //             âs
+                //         </Paper>
+                //     )
+                // }
+            }} />
+        </div>
+    )
+}

package/dist/components/CenterFull/MyCenterFull.tsx

@@ -0,0 +1,10 @@
+import { Center, Group } from "@mantine/core";
+import { ReactNode } from "react";
+
+export function MyCenterFull({ children }: { children: ReactNode }) {
+    return (
+        <Center w={"100%"}>
+            <Group>{children}</Group>
+        </Center>
+    );
+}

package/dist/components/Checkbox/MyCheckbox.tsx

@@ -0,0 +1,9 @@
+import { Checkbox, CheckboxProps } from "@mantine/core";
+
+interface I extends CheckboxProps { }
+
+export function MyCheckbox({ ...rest }: I) {
+    return (
+        <Checkbox {...rest}></Checkbox>
+    )
+}

package/dist/components/Combobox/Select/MySelect.tsx

@@ -0,0 +1,12 @@
+import { Select, SelectProps } from '@mantine/core';
+
+interface IMySelect extends SelectProps {
+    label?: string;
+    data: Array<string | { value: string; label: string }>; // Thêm `data` là mảng các lựa chọn
+}
+
+export function MySelect({ label, ...rest }: IMySelect) {
+    return (
+        <Select label={label} placeholder={label ? `Chọn ${label?.toLowerCase()}` : ""} {...rest} />
+    )
+}

package/dist/components/DataDisplay/Card/AQCard.tsx

@@ -0,0 +1,49 @@
+import { MyFlexRow } from '@/components/Layouts/FlexRow/MyFlexRow';
+import { Badge, Card, Center, Image, Text } from '@mantine/core';
+import Link from 'next/link';
+import { ReactNode } from 'react';
+export interface IAQCardProps {
+    imgSrc?: string | null,
+    title?: string
+    description?: string,
+    children?: ReactNode,
+    date?: string
+    status?: string,
+    href?: string
+}
+
+export function AQCard({
+    imgSrc = "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png",
+    title,
+    description,
+    date,
+    children,
+    status,
+    href = ""
+}: IAQCardProps) {
+    return (
+        <Card shadow="sm" padding="lg" radius="md" withBorder component={Link} href={href}>
+            <Card.Section >
+                <Center>
+                    <Image
+                        src={imgSrc}
+                        h={200}
+                        w="auto"
+                        fallbackSrc="https://placehold.co/600x400?text=Placeholder"
+                        alt="Norway"
+                    />
+                </Center>
+            </Card.Section>
+
+            <MyFlexRow justify="space-between" mt="md" mb="xs">
+                <Text fw={500} >{title}</Text>
+                {status && <Badge color='violet.5' w={'150px'}>{status}</Badge>}
+            </MyFlexRow>
+
+            <Text size="sm" c="dimmed" lineClamp={2}>
+                {description}
+            </Text>
+            {children}
+        </Card>
+    );
+}

package/dist/components/DataDisplay/CardInformation/MyCardInformation.tsx

@@ -0,0 +1,77 @@
+import { Box, Button, Flex, Group, Paper, Text } from "@mantine/core";
+import { IconArrowDownRight, IconArrowUpRight } from "@tabler/icons-react";
+import { ReactNode } from "react";
+
+interface MyCardInformationProps {
+    title?: string,
+    value?: string,
+    unit?: string,
+    description?: string,
+    icon?: ReactNode,
+    diff?: number,
+    extraControl?: ReactNode
+}
+
+export function MyCardInformation({
+    title,
+    value,
+    unit = "",
+    description,
+    icon,
+    diff = 0,
+    extraControl
+}: MyCardInformationProps) {
+    return (
+        <Paper withBorder
+            p="md"
+            radius="md"
+            key={title}>
+            <Group justify="space-between">
+                <Flex direction={"column"}>
+                    <Text
+                        tt="uppercase"
+                        size="lg"
+                        c="dimmed"
+                    >
+                        {title}
+                    </Text>
+                    {unit == "" ?
+                        <Text size="xs" style={{ visibility: 'hidden' }}>Đơn vị: <strong>{unit}</strong></Text>
+                        :
+                        <Text size="xs">Đơn vị: <strong>{unit}</strong></Text>
+                    }
+                </Flex>
+                <Box>
+                    {icon}
+                </Box>
+            </Group>
+
+            <Group
+                mt={"5"}
+                align="flex-end"
+                gap={"xs"}
+            >
+                <Text
+                    fw={700}
+                    fz="h1"
+                >{value}
+                </Text>
+                <Text
+                    mb={"2"}
+                    c={diff > 0 ? 'teal' : 'red'}
+                    fz="h2"
+                    fw={500}
+                >
+                    <span>{diff}%</span>{diff > 0 ? <IconArrowUpRight /> : <IconArrowDownRight />}
+                </Text>
+            </Group>
+
+            <Group justify="space-between">
+                <Text tt="uppercase" fz="xs" c="dimmed">
+                    {description}
+                </Text>
+                {extraControl}
+            </Group>
+        </Paper>
+    );
+}

package/dist/components/DataDisplay/DataTable/MyDataTable.tsx

@@ -0,0 +1,184 @@
+"use client"
+import { Button, Group, Portal } from '@mantine/core';
+import { IconDownload } from '@tabler/icons-react';
+import { ConfigOptions, download, generateCsv, mkConfig } from 'export-to-csv';
+import {
+    MantineReactTable,
+    MRT_Row,
+    MRT_TableInstance,
+    useMantineReactTable,
+    type MRT_ColumnDef,
+    type MRT_RowData,
+    type MRT_TableOptions
+} from 'mantine-react-table';
+import { MRT_Localization_VI } from "mantine-react-table/locales/vi/index.cjs";
+import { ReactNode, useEffect } from 'react';
+
+type FormatFunction<TData extends MRT_RowData> = (value: any) => any;
+
+interface IDataTable<TData extends MRT_RowData> extends MRT_TableOptions<TData> {
+    columns: MRT_ColumnDef<TData>[]; // Table columns
+    data: TData[]; // Table data
+    rowActionSize?: number; // Row action button size
+    exportAble?: boolean; // Flag to enable export all data
+    renderTopToolbarCustomActions?: ((props: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode) | undefined,
+    csvConfigProps?: ConfigOptions,
+    formats?: {
+        [K in keyof TData]?: FormatFunction<TData>;
+    };
+    setSelectedRow?: (data: any) => void;
+}
+
+function formatData<TData extends MRT_RowData>(
+    data: TData[],
+    formats: {
+        [K in keyof TData]?: FormatFunction<TData>;
+    }
+): TData[] {
+    return data.map((row) => {
+        const transformedRow: Partial<TData> = {};
+        Object.entries(row).forEach(([key, value]) => {
+            // Type-safe format application
+            const formatFn = formats[key as keyof TData];
+
+            // Special handling for Date type
+            if (value instanceof Date) {
+                transformedRow[key as keyof TData] = formatFn
+                    ? formatFn(value.toISOString())
+                    : value.toISOString();
+            }
+            // Special handling for objects (excluding null)
+            else if (value !== null && typeof value === "object") {
+                transformedRow[key as keyof TData] = formatFn
+                    ? formatFn(JSON.stringify(value))
+                    : JSON.stringify(value);
+            }
+            // General case
+            else {
+                transformedRow[key as keyof TData] = formatFn ? formatFn(value) : value;
+            }
+        });
+        return transformedRow as TData;
+    });
+}
+
+
+export function MyDataTable<TData extends MRT_RowData>(
+    { formats = {}, exportAble = false, csvConfigProps, rowActionSize, columns, data, renderTopToolbarCustomActions, setSelectedRow, ...rest }: IDataTable<TData>) {
+    const { renderRowActions } = { ...rest };
+    const csvConfig = mkConfig({
+        fieldSeparator: ',',
+        decimalSeparator: '.',
+        useKeysAsHeaders: csvConfigProps?.columnHeaders ? false : true,
+        ...csvConfigProps
+    });
+
+    const handleExport = (rows: MRT_Row<TData>[]) => {
+        if (rows.length == 0) {
+            const transformedData = formatData(data, formats); // Sử dụng formats từ props
+            const csv = generateCsv(csvConfig)(transformedData);
+            download(csvConfig)(csv);
+            return
+        }
+        const rowData = rows.map((row) => row.original);
+        const transformedRows = formatData(rowData, formats);
+        const csv = generateCsv(csvConfig)(transformedRows);
+        download(csvConfig)(csv);
+    };
+
+    const table = useMantineReactTable({
+        columns,
+        data,
+        renderTopToolbarCustomActions: ({ table }) => {
+            return (
+                <Group>
+                    {renderTopToolbarCustomActions && renderTopToolbarCustomActions({ table: table })}
+                    {exportAble &&
+                        <>
+                            {/* <Button
+                                color='green.8'
+                                onClick={() => handleExport(table.getSelectedRowModel().rows)}
+                                leftSection={<IconDownload />}
+                                variant="filled"
+                            >
+                                Import
+                            </Button> */}
+
+                            <Button
+                                color='green.8'
+                                onClick={() => handleExport(table.getSelectedRowModel().rows)}
+                                leftSection={<IconDownload />}
+                                variant="filled"
+                            >
+                                Export
+                            </Button>
+
+                        </>
+
+                    }
+                </Group>
+            );
+        },
+        enableRowNumbers: true,
+        enableRowSelection: exportAble,
+        enableEditing: renderRowActions ? true : false,
+        positionActionsColumn: "last",
+        enableColumnResizing: true,
+        layoutMode: "semantic",
+        displayColumnDefOptions: {
+            "mrt-row-actions": {
+                header: "Thao tác",
+                size: rowActionSize,
+            },
+            "mrt-row-numbers": {
+                Header: "STT",
+                size: 1
+            },
+        },
+        enableColumnPinning: true,
+        initialState: {
+            density: "md",
+            pagination: { pageIndex: 0, pageSize: 30 },
+            columnPinning: { right: ["mrt-row-actions"] },
+            columnVisibility: {
+                nguoiCapNhat: false,
+                ngayCapNhat: false
+            }
+        },
+        mantineTableHeadCellProps: {
+            style: {
+                verticalAlign: "middle",
+                paddingTop: "2px",
+                paddingBottom: "2px",
+            },
+        },
+        mantineTableBodyCellProps: {
+            style: {
+                paddingTop: "2px",
+                paddingBottom: "2px",
+            },
+        },
+        localization: MRT_Localization_VI,
+        ...rest, // Override default table options
+    });
+
+
+    useEffect(() => {
+        setSelectedRow && setSelectedRow(table.getSelectedRowModel().rows.map((row) => row.original));
+    }, [table.getState().rowSelection]);
+
+    if (data == undefined) return
+    return (
+        <main style={{ position: "relative", zIndex: 1 }}>
+            {table.getState().isFullScreen ? (
+                <Portal>
+                    <MantineReactTable table={table} />
+                </Portal>
+            ) : (
+                <MantineReactTable table={table} />
+            )}
+        </main>
+    )
+}

package/dist/components/DataDisplay/IconText/MyIconText.tsx

@@ -0,0 +1,17 @@
+import { Group, Text } from "@mantine/core";
+
+interface MyIconTextProps {
+    icon?: React.ElementType;
+    text?: string;
+}
+
+export function MyIconText({ icon: Icon, text }: MyIconTextProps) {
+    return (
+        <Group wrap="nowrap" gap={10} mt={3}>
+            {Icon && <Icon stroke={1.5} size={16} />}
+            <Text fz="lg" c="dimmed">
+                {text}
+            </Text>
+        </Group>
+    );
+}

package/dist/components/DataDisplay/KeyLabel/MyKeyLabel.tsx

@@ -0,0 +1,15 @@
+import { Group, Text } from "@mantine/core";
+
+
+interface I {
+    keyLabel?: string,
+    label?: string
+}
+export function MyKeyLabel({ keyLabel, label }: I) {
+    return (
+        <Group gap={5}>
+            <Text fw={'bold'}>{keyLabel}:</Text>
+            <Text>{label}</Text>
+        </Group>
+    )
+}

package/dist/components/DataDisplay/NumberFormatter/MyNumberFormatter.tsx

@@ -0,0 +1,9 @@
+import { NumberFormatter, NumberFormatterProps } from '@mantine/core'
+
+
+interface I extends NumberFormatterProps { }
+export function MyNumberFormatter({ ...rest }: I) {
+    return (
+        <NumberFormatter thousandSeparator suffix=' VNĐ' {...rest}></NumberFormatter>
+    )
+}