aq-fe-framework 0.1.154 → 0.1.156

package/dist/components/Buttons/ButtonPrintPDF/MyButtonPrintPDF.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { ReactNode, useRef } from "react";
+import { Button, ButtonProps } from "@mantine/core";
+import { IconPrinter } from "@tabler/icons-react";
+import { useReactToPrint } from "react-to-print";
+
+interface I extends ButtonProps {
+    contentToPrint?: ReactNode; // nội dung HTML để in
+    children?: ReactNode;
+}
+
+export function MyButtonPrintPDF({ contentToPrint, children, ...rest }: I) {
+    const printRef = useRef<HTMLDivElement>(null);
+
+    const handlePrint = useReactToPrint({
+        // Sử dụng documentTitle thay vì content
+        documentTitle: "In nội dung",
+        // Sử dụng contentRef thay vì content
+        contentRef: printRef,
+    });
+
+    function handleClick() {
+        if (!contentToPrint) return;
+        handlePrint();
+    }
+
+    return (
+        <>
+            <div style={{ display: "none" }}>
+                <div ref={printRef}>{contentToPrint}</div>
+            </div>
+            <Button color="orange" onClick={handleClick} leftSection={<IconPrinter />} {...rest}>
+                {children}
+            </Button>
+        </>
+    );
+}

package/dist/components/Buttons/ButtonPrintPDFTable/MyButtonPrintTablePDF.tsx

@@ -0,0 +1,174 @@
+import { MyHtmlWrapper } from "@/components/Layouts/HtmlWrapper/MyHtmlWrapper";
+import { Box, Table } from "@mantine/core";
+import { MRT_RowData } from "mantine-react-table";
+import { MyButtonPrintPDF } from "../ButtonPrintPDF/MyButtonPrintPDF";
+interface FieldConfig {
+  fieldName: string; // Field name in the data
+  header: string; // Header name for the print
+  isCenter?: boolean; // Optional flag to center align content, default is true
+  formatFunction?: (value: any, row: any) => any; // Optional formatting function
+}
+
+interface PrintConfig {
+  fields: FieldConfig[]; // Array of field configurations
+  title?: string; // Optional title for the printed table
+  showRowNumbers?: boolean; // Optional flag to show row numbers
+}
+
+interface AQButtonPrintTableProps<TData extends MRT_RowData = any> extends React.ComponentPropsWithoutRef<typeof MyButtonPrintPDF> {
+  printConfig?: PrintConfig; // Optional print configuration
+  objectName?: string; // Name of the file to print
+  data?: TData[]; // Data to print
+}
+
+export function MyButtonPrintTablePDF<TData extends MRT_RowData = any>({
+  printConfig,
+  data,
+  ...rest
+}: AQButtonPrintTableProps<TData>) {
+  const formatDate = (date: Date): string => {
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = date.getFullYear();
+    return `${day}/${month}/${year}`;
+  };
+
+  // Hàm format giá trị theo kiểu dữ liệu
+  const formatValue = (value: any): string => {
+    if (value === undefined || value === null) {
+      return '';
+    }
+
+    // Xử lý định dạng ngày tháng
+    if (value instanceof Date) {
+      return formatDate(value);
+    }
+
+    // Xử lý các kiểu dữ liệu khác
+    return String(value);
+  };
+
+  const rows = data?.map((item, index) => {
+    if (!printConfig?.fields) return null;
+
+    return (
+      <Table.Tr key={index}>
+        {printConfig.showRowNumbers && (
+          <Table.Td ta="center" px="xs" style={{ border: "1px solid lightgray" }}>
+            {index + 1}
+          </Table.Td>
+        )}
+        {printConfig.fields.map((field) => {
+          let value = item[field.fieldName];
+
+          if (field.formatFunction) {
+            value = field.formatFunction(value, item);
+          } else {
+            value = formatValue(value);
+          }
+
+          const alignment = field.isCenter === false ? "left" : "center";
+
+          // Xử lý giá trị HTML
+          if (typeof value === 'string' && (value.includes('<') || value.includes('&lt;'))) {
+            return (
+              <Table.Td
+                key={field.fieldName}
+                px="xs"
+                ta={alignment}
+                style={{ border: "1px solid lightgray" }}
+              >
+                <MyHtmlWrapper html={value} />
+              </Table.Td>
+            );
+          }
+
+          // Xử lý giá trị boolean
+          if (value === 'true' || value === 'false') {
+            return (
+              <Table.Td
+                key={field.fieldName}
+                ta={alignment}
+                px="xs"
+                style={{ border: "1px solid lightgray" }}
+              >
+                <input type="checkbox" checked={value === 'true'} readOnly />
+              </Table.Td>
+            );
+          }
+
+          return (
+            <Table.Td
+              key={field.fieldName}
+              ta={alignment}
+              px="xs"
+              style={{ border: "1px solid lightgray" }}
+            >
+              {value}
+            </Table.Td>
+          );
+        })}
+      </Table.Tr>
+    );
+  });
+
+  const renderContent = () => {
+    if (!data || !printConfig?.fields) return null;
+
+    const today = new Date();
+    const formattedDate = today.toLocaleDateString('vi-VN', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+
+    const tableTitle = printConfig?.title || "Bảng dữ liệu";
+
+    return (
+      <Box p="lg" >
+        <div style={{ textAlign: 'center', marginTop: '10px', fontStyle: 'italic', color: '#666' }}>
+          Ngày in: {formattedDate}
+        </div>
+        <h2 style={{ textAlign: 'center', fontSize: '24px', fontWeight: 'bold', marginBottom: '20px' }}>
+          {tableTitle}
+        </h2>
+        <Table withColumnBorders highlightOnHover style={{ border: "1px solid lightgray" }}>
+          <Table.Thead>
+            <Table.Tr>
+              {printConfig.showRowNumbers && (
+                <Table.Th style={{ border: "1px solid lightgray" }} w="10%" ta="center" px="xs">
+                  STT
+                </Table.Th>
+              )}
+              {printConfig.fields.map((field) => {
+                const alignment = field.isCenter === false ? "left" : "center";
+                return (
+                  <Table.Th
+                    key={field.fieldName}
+                    style={{ border: "1px solid lightgray" }}
+                    ta={alignment}
+                    px="xs"
+                  >
+                    {field.header}
+                  </Table.Th>
+                );
+              })}
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {rows}
+          </Table.Tbody>
+        </Table>
+      </Box>
+    );
+  };
+  return (
+    <MyButtonPrintPDF
+      contentToPrint={renderContent()}
+      {...rest}
+    />
+  );
+}
+

package/dist/components/Buttons/ButtonRouterBack/MyButtonRouterBack.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { Button, ButtonProps } from "@mantine/core";
+import { IconArrowBack } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+interface IMyButtonRouterBack extends ButtonProps {
+    url?: string;
+    label?: string;
+}
+
+export function MyButtonRouterBack({ url, label, ...rest }: IMyButtonRouterBack) {
+    const router = useRouter();
+    return (
+        <Button
+            variant="light"
+            leftSection={<IconArrowBack stroke={2} />}
+            onClick={() => {
+                if (url) {
+                    router.replace(url);
+                    return;
+                }
+                router.back();
+            }}
+            {...rest}
+        >
+            {label ? label : "Trở về"}
+        </Button>
+    );
+}

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