aq-fe-framework 0.1.155 → 0.1.156

package/dist/providers/MyMantineProvider.tsx

@@ -0,0 +1,140 @@
+'use client'
+import { ActionIcon, Blockquote, Divider, FileInput, Indicator, MantineProvider, Modal, Paper, Select, SimpleGrid, Space, Switch, Table, TextInput, Textarea, Title, Tooltip, createTheme } from '@mantine/core';
+import { DateInput, TimeInput } from '@mantine/dates';
+import { ModalsProvider } from '@mantine/modals';
+import { Notifications } from '@mantine/notifications';
+import { IconFile, IconInfoCircle } from '@tabler/icons-react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/vi';
+import { ReactNode } from 'react';
+import classes from './mantine.module.css';
+dayjs.locale('vi');
+export default function MyMantineProvider({ children }: { children?: ReactNode }) {
+    return (
+        <MantineProvider defaultColorScheme="light" theme={theme}>
+            <ModalsProvider labels={{
+                confirm: 'Thêm', cancel: 'Huỷ'
+            }}>
+                <Notifications />
+                {children}
+            </ModalsProvider>
+        </MantineProvider >
+    )
+}
+
+const theme = createTheme({
+    cursorType: 'pointer',
+    components: {
+        Switch: Switch.extend({
+            defaultProps: {
+                maw: "fit-content"
+            }
+        }),
+        Paper: Paper.extend({
+            defaultProps: {
+                withBorder: true,
+                shadow: "sm",
+                radius: "md",
+            }
+        }),
+        TextInput: TextInput.extend({
+            defaultProps: {
+                classNames: classes
+            }
+        }),
+        Textarea: Textarea.extend({
+            defaultProps: {
+                autosize: true,
+                minRows: 4,
+                w: '100%'
+            }
+        }),
+        Title: Title.extend({
+            defaultProps: {
+                order: 2
+            }
+        }),
+        Modal: Modal.extend({
+            defaultProps: {
+                centered: true,
+                overlayProps: {
+                    backgroundOpacity: 0.55,
+                    blur: 3,
+                },
+            }
+        }),
+        DateInput: DateInput.extend({
+            defaultProps: {
+                dateParser: (value) => {
+                    const [day, month, year] = value.split("/");
+                    return new Date(`${year}-${month}-${day}`);
+                },
+                valueFormat: "DD/MM/YYYY",
+                locale: "vi",
+                clearable: true,
+                highlightToday: true,
+            },
+        }),
+        TimeInput: TimeInput.extend({
+            defaultProps: {
+            }
+        }),
+        Divider: Divider.extend({
+            defaultProps: {
+                my: "md"
+            }
+        }),
+
+        Tooltip: Tooltip.extend({
+            defaultProps: {
+                withArrow: true,
+                transitionProps: { transition: 'skew-up', duration: 150 }
+            }
+        }),
+        SimpleGrid: SimpleGrid.extend({
+            defaultProps: {
+                cols: { base: 1, sm: 2, lg: 4 }
+            }
+        }),
+        Blockquote: Blockquote.extend({
+            defaultProps: {
+                iconSize: 30,
+                icon: <IconInfoCircle />
+            }
+        }),
+        ActionIcon: ActionIcon.extend({
+            defaultProps: {
+                variant: "light"
+            }
+        }),
+        Indicator: Indicator.extend({
+            defaultProps: {
+                size: 16,
+                inline: true,
+            }
+        }),
+        Table: Table.extend({
+            defaultProps: {
+                withTableBorder: true,
+                withColumnBorders: true,
+                highlightOnHover: true,
+            },
+        }),
+        Space: Space.extend({
+            defaultProps: {
+                my: "md",
+                mx: "md"
+            }
+        }),
+        FileInput: FileInput.extend({
+            defaultProps: {
+                leftSection: <IconFile></IconFile>
+            }
+        }),
+        Select: Select.extend({
+            defaultProps: {
+                allowDeselect: false
+            }
+        })
+    }
+});

package/dist/providers/MyReactQueryProvider.tsx

@@ -0,0 +1,24 @@
+"use client"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { ReactNode } from "react";
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+    mutations: {
+      onSuccess: () => {
+        queryClient.invalidateQueries();
+      },
+    },
+  },
+});
+export default function MyReactQueryProvider({ children }: { children?: ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools buttonPosition={"bottom-left"} initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}

package/dist/providers/Provider.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import MyMantineProvider from './MyMantineProvider';
+import MyReactQueryProvider from './MyReactQueryProvider';
+
+export default function Provider({ children }: { children?: ReactNode }) {
+    return (
+        <MyReactQueryProvider>
+            <MyMantineProvider>
+                {children}
+            </MyMantineProvider>
+        </MyReactQueryProvider>
+    )
+}

package/dist/providers/mantine.module.css

@@ -0,0 +1,21 @@
+.input {
+  &[data-variant="underline"] {
+    border: 2px solid transparent;
+    border-radius: 5px;
+    padding-left: 8px;
+    padding-right: 8px;
+    background-color: white;
+
+    &:focus,
+    &:focus-visible {
+      border-color: var(--mantine-color-gray-5);
+      outline: none;
+    }
+
+    &:active {
+      border-color: var(--mantine-color-gray-5);
+    }
+
+    transition: border-color 0.2s ease-in-out;
+  }
+}

package/dist/stores/CreateGenericStore.ts

@@ -0,0 +1,23 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface GenericStore<T> {
+    state: T;
+    setState: (newState: T) => void;
+    setProperty: <K extends keyof T>(key: K, value: T[K]) => void;
+    resetState: () => void;
+}
+
+export function createGenericStore<T>({ initialState, storageKey }: { initialState: T, storageKey?: string }) {
+    const storeCreator = (set: any) => ({
+        state: initialState,
+        setState: (newState: T) => set({ state: newState }),
+        setProperty: <K extends keyof T>(key: K, value: T[K]) =>
+            set((store: GenericStore<T>) => ({ state: { ...store.state, [key]: value } })),
+        resetState: () => set({ state: initialState }),
+    });
+
+    return storageKey
+        ? create(persist<GenericStore<T>>(storeCreator, { name: storageKey }))
+        : create<GenericStore<T>>(storeCreator);
+}

package/dist/stores/index.ts

@@ -0,0 +1 @@
+export * from './CreateGenericStore';

package/dist/types/types.ts

@@ -0,0 +1,16 @@
+import { MantineSize } from "@mantine/core";
+
+export type TYPES_MANTINE_SIZE = number | MantineSize | (string & {}) | undefined;
+export type TYPES_CRUD =
+    "default"
+    | "create"
+    | "update"
+    | "delete"
+    | "save"
+    | "createMultiple"
+    | "check"
+    | "import"
+    | "print"
+    | "cancel"
+    | "export"
+    | "select";

package/dist/utils/index.ts

@@ -0,0 +1,9 @@
+export * from './utils_converter';
+export * from './utils_currency';
+export * from './utils_date';
+export * from './utils_excel';
+export * from './utils_file';
+export * from './utils_notification';
+export * from './utils_pdf';
+export * from './utils_time';
+export * from './utils_validateForm';

package/dist/utils/utils_converter.ts

@@ -0,0 +1,39 @@
+// export const utils_converter_enumToOptions = (enumObj: object) => {
+//     return Object.entries(enumObj)
+//         .filter(([key]) => isNaN(Number(key))) // Loại bỏ các key là số
+//         .map(([label, value]) => ({ value: String(value), label }));
+// };
+
+export const utils_converter_getLabelByValue = (data: Record<number, string>, value?: number | string): string => {
+    const numericValue = Number(value); // Chuyển về number
+    return data[numericValue] || "Không xác định";
+};
+
+export const utils_converter_getKeyByValue = <K extends string | number, V>(obj: Record<K, V>, value: V): K | undefined => {
+    return (Object.entries(obj) as [K, V][]).find(([_, v]) => v === value)?.[0];
+};
+
+/**
+ * Chuyển đổi enum thành mảng các đối tượng {value, label}
+ * @param enumObject - Đối tượng enum cần chuyển đổi
+ * @returns Mảng các đối tượng có dạng {value: string, label: string}
+ */
+export function utils_converter_enumToSelectOptions<T extends Record<string, string | number>>(enumObject: T): Array<{ value: string, label: string }> {
+    const result: Array<{ value: string, label: string }> = [];
+
+    // Lọc các key là string và value là number (các key enum thông thường)
+    const numericEnumKeys = Object.keys(enumObject).filter(key => isNaN(Number(key)));
+
+    for (const key of numericEnumKeys) {
+        const enumValue = enumObject[key];
+        if (typeof enumValue === 'number') {
+            // Thêm cặp value-label vào mảng kết quả
+            result.push({
+                value: String(enumValue),
+                label: key
+            });
+        }
+    }
+
+    return result;
+}

package/dist/utils/utils_currency.ts

@@ -0,0 +1,5 @@
+export function utils_currency_formatWithSuffix(amount: number, suffix: string = ''): string {
+    const formatter = new Intl.NumberFormat('vi-VN');
+    const formattedAmount = formatter.format(amount);
+    return `${formattedAmount}${suffix}`
+}

package/dist/utils/utils_date.ts

@@ -0,0 +1,34 @@
+export function U0DateToDDMMYYYString(date: Date) {
+  if (!(date instanceof Date) || isNaN(date.getTime())) return "";
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // Tháng bắt đầu từ 0 nên phải cộng thêm 1
+  const year = date.getFullYear();
+  return `${day}/${month}/${year}`;
+}
+
+export function utils_date_dateToDDMMYYYString(date: Date) {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // Tháng bắt đầu từ 0 nên phải cộng thêm 1
+  const year = date.getFullYear();
+  return `${day}/${month}/${year}`;
+}
+
+export function utils_date_formatToDateTimeStartEnd(startDate: Date, endDate: Date) {
+  const startday = String(startDate.getDate()).padStart(2, "0");
+  const startmonth = String(startDate.getMonth() + 1).padStart(2, "0"); // Tháng bắt đầu từ 0 nên phải cộng thêm 1
+  const startyear = startDate.getFullYear();
+  const starthour = String(startDate.getHours()).padStart(2, "0");
+  const startminute = String(startDate.getMinutes()).padStart(2, "0");
+
+  const endhour = String(endDate.getHours()).padStart(2, "0");
+  const endminuate = String(endDate.getMinutes()).padStart(2, "0");
+
+  return `${startday}/${startmonth}/${startyear}  [${starthour}:${startminute} - ${endhour}:${endminuate}]`;
+}
+
+export function utils_date_getHHmm(date: Date) {
+  if (!(date instanceof Date) || isNaN(date.getTime())) return "";
+  const hour = String(date.getHours()).padStart(2, "0");
+  const minute = String(date.getMinutes()).padStart(2, "0");
+  return `${hour}:${minute}`;
+}

package/dist/utils/utils_excel.ts

@@ -0,0 +1,128 @@
+import ExcelJS from "exceljs";
+import saveAs from "file-saver";
+
+export interface IUtils_Excel_ColumnConfig<T> {
+    fieldKey: keyof T | string; // string để hỗ trợ nested key như "user.code"
+    fieldName: string;
+    isRequired?: boolean;
+}
+
+function isObjectPath(path: string): boolean {
+    // true nếu không chứa số hoặc ký tự đặc biệt (ngoài chấm ngăn cách field)
+    return /^[a-zA-Z_$][a-zA-Z0-9_$]*(\.[a-zA-Z_$][a-zA-Z0-9_$]*)+$/.test(path);
+}
+
+function getValueByPath(obj: any, path: string): any {
+    if (isObjectPath(path)) {
+        return path.split(".").reduce((acc, key) => acc?.[key], obj);
+    }
+    return obj?.[path];
+}
+
+export async function utils_excel_exportExcel<T extends Record<string, any>>({
+    workbook,
+    sheetName,
+    data,
+    config,
+}: {
+    workbook: ExcelJS.Workbook;
+    sheetName: string;
+    data: T[];
+    config: IUtils_Excel_ColumnConfig<T>[];
+}) {
+    const sheet = workbook.addWorksheet(sheetName);
+
+    const fieldKeys: string[] = config.map((item) => String(item.fieldKey));
+    const headerMappings: Record<string, string> = {};
+    const markedColumns: string[] = [];
+
+    config.forEach((item) => {
+        const fieldKeyStr = String(item.fieldKey);
+        headerMappings[fieldKeyStr] = item.fieldName;
+        if (item.isRequired) markedColumns.push(fieldKeyStr);
+    });
+
+    sheet.columns = fieldKeys.map((fieldKey) => ({
+        key: fieldKey,
+        width: 20,
+    }));
+
+    const displayRow = sheet.addRow(
+        fieldKeys.map((fieldKey) =>
+            markedColumns.includes(fieldKey)
+                ? `${headerMappings[fieldKey]} *`
+                : headerMappings[fieldKey] || fieldKey
+        )
+    );
+
+    const keyRow = sheet.addRow(fieldKeys);
+
+    data.forEach((item) => {
+        const rowData: Record<string, any> = {};
+        fieldKeys.forEach((fieldKey) => {
+            rowData[fieldKey] = getValueByPath(item, fieldKey);
+        });
+        sheet.addRow(rowData);
+    });
+
+    // Style the first row (display names)
+    for (let i = 1; i <= fieldKeys.length; i++) {
+        const cell = displayRow.getCell(i);
+        cell.font = { bold: true };
+        cell.fill = {
+            type: "pattern",
+            pattern: "solid",
+            fgColor: { argb: "FFE0E0E0" },
+        };
+    }
+
+    // Style the second row (field keys)
+    for (let i = 1; i <= fieldKeys.length; i++) {
+        const cell = keyRow.getCell(i);
+        cell.font = { italic: true };
+        cell.fill = {
+            type: "pattern",
+            pattern: "solid",
+            fgColor: { argb: "FFF0F0F0" },
+        };
+    }
+
+    // Apply red color to asterisks in headers
+    if (markedColumns.length > 0) {
+        for (let i = 1; i <= fieldKeys.length; i++) {
+            const cell = displayRow.getCell(i);
+            const text = cell.value;
+
+            if (typeof text === "string" && text.endsWith(" *")) {
+                cell.value = {
+                    richText: [
+                        {
+                            text: text.slice(0, -2),
+                            font: { bold: true },
+                        },
+                        {
+                            text: " *",
+                            font: { bold: true, color: { argb: "FFFF0000" } },
+                        },
+                    ],
+                };
+            }
+        }
+    }
+
+    return workbook;
+}
+
+export async function utils_excel_download({
+    workbook,
+    name,
+}: {
+    workbook: ExcelJS.Workbook;
+    name: string;
+}) {
+    const buffer = await workbook.xlsx.writeBuffer();
+    const blob = new Blob([buffer], {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
+    saveAs(blob, name);
+}

package/dist/utils/utils_file.ts

@@ -0,0 +1,61 @@
+import Docxtemplater from 'docxtemplater';
+import { saveAs } from 'file-saver';
+import PizZip from 'pizzip';
+
+export interface IAQFileDetail {
+  fileName?: string,
+  fileExtension?: string,
+  fileBase64String?: string
+}
+
+export function utils_file_fileToAQDocumentType(file: File): Promise<IAQFileDetail> {
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+
+    // Đọc tệp dưới dạng Base64
+    fileReader.onloadend = () => {
+      const fileName = file.name; // Tên tệp
+      const fileExtension = file.name.split(".").pop(); // Phần mở rộng tệp
+      const fileBase64String = fileReader.result as string; // Base64 string của tệp
+
+      resolve({
+        fileName,
+        fileExtension,
+        fileBase64String: fileBase64String.split(",")[1], // Chỉ lấy phần base64 sau dấu phẩy
+      });
+    };
+
+    fileReader.onerror = reject;
+
+    // Đọc tệp dưới dạng Data URL (Base64)
+    fileReader.readAsDataURL(file);
+  });
+}
+
+export async function utils_file_docxtemplaterDownload({
+  data,
+  filePath,
+  fileName
+}: {
+  data: any,
+  filePath: string,
+  fileName?: string
+}) {
+  const response = await fetch(filePath);
+  const arrayBuffer = await response.arrayBuffer();
+
+  // Tạo PizZip từ nội dung mẫu
+  const zip = new PizZip(arrayBuffer);
+
+  // Tạo Docxtemplater từ PizZip
+  const doc = new Docxtemplater(zip);
+
+  // Dữ liệu để thay thế
+
+  doc.render(data);
+  // Xuất kết quả thành DOCX
+  const buffer = doc.getZip().generate({ type: 'blob' });
+
+  // Tải xuống tệp DOCX
+  saveAs(buffer, fileName || 'output.docx');
+}

package/dist/utils/utils_notification.ts

@@ -0,0 +1,46 @@
+import { DefaultMantineColor } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+
+interface I {
+  crudType?: "delete" | "update" | "create" | "error" | "importSucess";
+  message?: string;
+  color?: DefaultMantineColor | undefined;
+}
+
+export function utils_notification_show({ crudType = "create", message, color }: I) {
+  if (crudType == "create") {
+    notifications.show({
+      message: message ? message : "Thêm thành công!",
+      color: color ? color : "green",
+    });
+    return;
+  }
+  if (crudType == "update") {
+    notifications.show({
+      message: message ? message : "Cập nhật thành công!",
+      color: color ? color : "green",
+    });
+    return;
+  }
+  if (crudType == "delete") {
+    notifications.show({
+      message: message ? message : "Xóa thành công!",
+      color: color ? color : "green",
+    });
+    return;
+  }
+  if (crudType == "error") {
+    notifications.show({
+      message: message ? message : "Lỗi!",
+      color: color ? color : "red",
+    });
+    return;
+  }
+
+  if (crudType == "importSucess") {
+    notifications.show({
+      message: message ? message : "Import thành công!",
+    });
+    return;
+  }
+}

package/dist/utils/utils_pdf.ts

@@ -0,0 +1,21 @@
+import axios from "axios";
+
+export async function utils_pdf_download(url: string) {
+  try {
+    const response = await axios.get(url, {
+      responseType: "blob", // Đảm bảo nhận dữ liệu dạng blob để tải file
+    });
+
+    // Tạo một URL tạm từ dữ liệu blob nhận được
+    const blob = new Blob([response.data], { type: "application/pdf" });
+    const link = document.createElement("a");
+    link.href = window.URL.createObjectURL(blob);
+    link.download = "file.pdf";
+    link.click();
+
+    // Giải phóng URL tạm khi đã hoàn thành
+    window.URL.revokeObjectURL(link.href);
+  } catch (error) {
+    console.error("Error downloading PDF:", error);
+  }
+}

package/dist/utils/utils_time.ts

@@ -0,0 +1,15 @@
+export const utils_time_convertTimeStringToSeconds = (time: string): number => {
+  const [hours, minutes, seconds] = time.split(":").map(Number);
+  return hours * 3600 + minutes * 60 + seconds;
+};
+
+export const utils_time_getCurrentTimeString = (): string => {
+  const formatTime = (number: number) => {
+    return number < 10 ? "0" + number : number;
+  };
+  const now = new Date();
+  const hours = formatTime(now.getHours());
+  const minutes = formatTime(now.getMinutes());
+  const seconds = formatTime(now.getSeconds());
+  return `${hours}:${minutes}:${seconds}`;
+};

package/dist/utils/utils_validateForm.ts

@@ -0,0 +1,9 @@
+import { isNotEmpty } from "@mantine/form";
+
+export function U0MyValidateEmpty(message?: string) {
+  return isNotEmpty(message ? message : "Không được để trống")
+}
+
+export function U0MyValidateEmail(value?: string) {
+  return /^\S+@\S+$/.test(value!) ? null : "Email không đúng định dạng";
+}

package/package.json

@@ -22,7 +22,7 @@
       "types": "./dist/hooks/index.d.mts"
     }
   },
-  "version": "0.1.155",
+  "version": "0.1.156",
   "private": false,
   "files": [
     "dist"