aq-fe-framework 0.1.155 → 0.1.156

package/dist/modules-features/admin/core/MainDashboard/ViewVoucherStat.tsx

@@ -0,0 +1,311 @@
+'use client'
+import { Center, Progress, Space, Text } from "@mantine/core";
+
+// const data_singleDiscountCode = {
+//     total: 500,
+//     used: 453,
+// }
+
+export default function ViewDiscountStat() {
+    return (
+        <>
+            <PieChart_VoucherUsedPercentage />
+            {/* <Divider />
+            <Group w={"100%"} align="end">
+                <TextInput
+                    flex={1}
+                    label="Tìm mã giảm giá"
+                    placeholder="Nhập mã giảm giá"
+                />
+                <Button>
+                    Tìm kiếm
+                </Button>
+            </Group>
+            <Space mt={32} />
+            <Center>
+                <Text>Đã sử dụng: <strong>{data_singleDiscountCode.used} / {data_singleDiscountCode.total}</strong> - ({((data_singleDiscountCode.used / data_singleDiscountCode.total) * 100).toFixed(2)}%)</Text>
+            </Center>
+            <Progress color="yellow" radius="xs" size="lg" value={(data_singleDiscountCode.used / data_singleDiscountCode.total) * 100} /> */}
+        </>
+    )
+}
+
+
+import { MyDataTable } from "@/components/DataDisplay/DataTable/MyDataTable";
+import { MyFlexColumn } from "@/components/Layouts/FlexColumn/MyFlexColumn";
+import { PieChart } from '@mantine/charts';
+import { MRT_ColumnDef } from "mantine-react-table";
+import { useMemo } from "react";
+
+function getRandomColor(seed: number): string {
+    const random = Math.sin(seed) * 10000;
+    const color = `#${Math.floor((random - Math.floor(random)) * 16777215).toString(16).padStart(6, '0')}`;
+    return color;
+}
+
+const data_used_discountCode = [
+    { name: 'VOU01', value: 124, color: getRandomColor(1) },
+    { name: 'VOU02', value: 34, color: getRandomColor(2) },
+    { name: 'VOU03', value: 23, color: getRandomColor(3) },
+    { name: 'VOU04', value: 34, color: getRandomColor(4) },
+    { name: 'VOU05', value: 46, color: getRandomColor(5) },
+    { name: 'VOU06', value: 123, color: getRandomColor(6) },
+    { name: 'VOU07', value: 87, color: getRandomColor(7) },
+    { name: 'VOU08', value: 25, color: getRandomColor(8) },
+    { name: 'VOU09', value: 34, color: getRandomColor(9) },
+    { name: 'VOU10', value: 67, color: getRandomColor(10) },
+    { name: 'VOU11', value: 23, color: getRandomColor(11) },
+    { name: 'VOU12', value: 98, color: getRandomColor(12) },
+    { name: 'VOU13', value: 54, color: getRandomColor(13) },
+    { name: 'VOU14', value: 27, color: getRandomColor(14) },
+    { name: 'VOU15', value: 3, color: getRandomColor(15) },
+    { name: 'VOU16', value: 56, color: getRandomColor(16) },
+    { name: 'VOU17', value: 85, color: getRandomColor(17) },
+    { name: 'VOU18', value: 45, color: getRandomColor(18) },
+    { name: 'VOU19', value: 64, color: getRandomColor(19) },
+    { name: 'VOU20', value: 12, color: getRandomColor(20) }
+];
+
+interface IUsedVoucherCode {
+    code: string;
+    name: string;
+    total: number
+    used: number;
+    color: string;
+}
+
+const mockData = [
+    {
+        code: 'VOU01',
+        name: 'Voucher Code 1',
+        total: 150,
+        used: 124,
+        color: getRandomColor(1)
+    },
+    {
+        code: 'VOU02',
+        name: 'Voucher Code 2',
+        total: 150,
+        used: 34,
+        color: getRandomColor(2)
+    },
+    {
+        code: 'VOU03',
+        name: 'Voucher Code 3',
+        total: 50,
+        used: 23,
+        color: getRandomColor(3)
+    },
+    {
+        code: 'VOU04',
+        name: 'Voucher Code 4',
+        total: 100,
+        used: 34,
+        color: getRandomColor(4)
+    },
+    {
+        code: 'VOU05',
+        name: 'Voucher Code 5',
+        total: 100,
+        used: 46,
+        color: getRandomColor(5)
+    },
+    {
+        code: 'VOU06',
+        name: 'Voucher Code 6',
+        total: 130,
+        used: 123,
+        color: getRandomColor(6)
+    },
+    {
+        code: 'VOU07',
+        name: 'Voucher Code 7',
+        total: 100,
+        used: 87,
+        color: getRandomColor(7)
+    },
+    {
+        code: 'VOU08',
+        name: 'Voucher Code 8',
+        total: 100,
+        used: 25,
+        color: getRandomColor(8)
+    },
+    {
+        code: 'VOU09',
+        name: 'Voucher Code 9',
+        total: 100,
+        used: 34,
+        color: getRandomColor(9)
+    },
+    {
+        code: 'VOU10',
+        name: 'Voucher Code 10',
+        total: 100,
+        used: 67,
+        color: getRandomColor(10)
+    },
+    {
+        code: 'VOU11',
+        name: 'Voucher Code 11',
+        total: 100,
+        used: 23,
+        color: getRandomColor(11)
+    },
+    {
+        code: 'VOU12',
+        name: 'Voucher Code 12',
+        total: 100,
+        used: 98,
+        color: getRandomColor(12)
+    },
+    {
+        code: 'VOU13',
+        name: 'Voucher Code 13',
+        total: 100,
+        used: 54,
+        color: getRandomColor(13)
+    },
+    {
+        code: 'VOU14',
+        name: 'Voucher Code 14',
+        total: 100,
+        used: 27,
+        color: getRandomColor(14)
+    },
+    {
+        code: 'VOU15',
+        name: 'Voucher Code 15',
+        total: 100,
+        used: 3,
+        color: getRandomColor(15)
+    },
+    {
+        code: 'VOU16',
+        name: 'Voucher Code 16',
+        total: 100,
+        used: 56,
+        color: getRandomColor(16)
+    },
+    {
+        code: 'VOU17',
+        name: 'Voucher Code 17',
+        total: 100,
+        used: 85,
+        color: getRandomColor(17)
+    },
+    {
+        code: 'VOU18',
+        name: 'Voucher Code 18',
+        total: 100,
+        used: 45,
+        color: getRandomColor(18)
+    },
+    {
+        code: 'VOU19',
+        name: 'Voucher Code 19',
+        total: 100,
+        used: 64,
+        color: getRandomColor(19)
+    },
+    {
+        code: 'VOU20',
+        name: 'Voucher Code 20',
+        total: 100,
+        used: 12,
+        color: getRandomColor(20)
+    }
+]
+
+export function PieChart_VoucherUsedPercentage() {
+
+    const totalVoucherCode = mockData.reduce((acc, cur) => acc + cur.used, 0);
+
+    const columns = useMemo<MRT_ColumnDef<IUsedVoucherCode>[]>(
+        () => [
+            {
+                header: "Màu",
+                accessorKey: "color",
+                accessorFn(originalRow) {
+                    return (
+                        <div style={{ width: 20, height: 20, backgroundColor: originalRow.color }} />
+                    )
+                },
+                minSize: 30,
+                maxSize: 30
+            },
+            {
+                header: "Mã",
+                accessorKey: "code",
+                minSize: 20,
+                maxSize: 20
+
+            },
+            {
+                header: "%",
+                accessorKey: "used",
+                accessorFn(originalRow) {
+                    return (
+                        <>
+                            <Center>
+                                <Text>{((originalRow.used / totalVoucherCode) * 100).toFixed(0)}%</Text>
+                            </Center>
+                        </>
+                    )
+                },
+                minSize: 64,
+                maxSize: 64
+            },
+            {
+                header: "Số lượng sử dụng",
+                accessorKey: "value",
+                accessorFn(originalRow) {
+                    return originalRow.used;
+                },
+                Cell: ({ row }) => {
+                    return (
+                        <>
+                            <Center>
+                                <Text>Đã sử dụng: <strong>{row.original.used} / {row.original.total}</strong> - ({((row.original.used / row.original.total) * 100).toFixed(2)}%)</Text>
+                            </Center>
+                            <Progress color="yellow" radius="xs" size="lg" value={(row.original.used / row.original.total) * 100} />
+                        </>
+                    )
+                },
+                minSize: 50,
+                maxSize: 50
+            }
+        ],
+        []
+    );
+
+    return (
+        <>
+            <MyFlexColumn>
+                <Text mb={"20"}>Biểu đồ phần trăm sử dụng mã giảm giá học viên trong 60 ngày qua</Text>
+                <Center>
+                    <PieChart
+                        startAngle={90}
+                        endAngle={-270}
+                        strokeWidth={0}
+                        withLabelsLine
+                        labelsPosition="outside"
+                        withLabels
+                        labelsType="percent"
+                        data={data_used_discountCode}
+                    />
+                </Center>
+                <Space mt={5} />
+                <MyDataTable
+                    data={mockData}
+                    columns={columns}
+                    initialState={{
+                        density: "xs",
+                        pagination: { pageIndex: 0, pageSize: 5 },
+                    }}
+                />
+            </MyFlexColumn>
+        </>
+    )
+}
+

package/dist/modules-features/admin/core/core12196/F_core12196.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { F_core12196_Read } from './F_core12196_Read'
+import { F_core12196_Create } from './F_core12196_Create'
+import { MyFlexEnd } from '@/components/Layouts/FlexEnd/MyFlexEnd'
+import { Paper, Space } from '@mantine/core'
+
+export function F_core12196({ FormTypeId
+}: {
+    FormTypeId: number
+}) {
+    return (
+        <Paper p={'md'} >
+            <MyFlexEnd>
+                <F_core12196_Create FormTypeId={FormTypeId} />
+            </MyFlexEnd>
+            <Space />
+            <F_core12196_Read FormTypeId={FormTypeId} />
+        </Paper>
+    )
+}

package/dist/modules-features/admin/core/core12196/F_core12196_Create.tsx

@@ -0,0 +1,101 @@
+"use client";
+import baseAxios from "@/api/baseAxios";
+import { MyFileInput, MyNumberInput } from "@/components";
+import { MyButtonCreate } from "@/components/Buttons/ButtonCRUD/MyButtonCreate";
+import { MyDateInput } from "@/components/Inputs/DateInput/MyDateInput";
+import { MyTextInput } from "@/components/Inputs/TextInput/MyTextInput";
+import { OBJECT_DOCUMENT_TYPES } from "@/constants/object/documentTypes";
+import { F_core18256_Select } from "@/modules-features/admin/core/core18256/F_core18256_Select";
+import { utils_file_fileToAQDocumentType } from "@/utils/utils_file";
+import { useForm } from "@mantine/form";
+interface IDocument {
+  path?: string;
+  orderBy?: number;
+  documentType?: number;
+  promulgateDate?: Date;
+  decisionCode?: string;
+  departmentName?: string;
+  description?: string;
+  startDate?: Date;
+  endDate?: Date;
+  conclusion?: string;
+  note?: string;
+  documentAttributeId?: number;
+  documentAttributeName?: string;
+  isCycleCheck?: boolean;
+  meetingDate?: Date;
+  fileDetail?: {
+    fileBase64String?: string;
+    fileExtension?: string;
+    fileName?: string;
+  };
+  id?: number;
+  code?: string;
+  name?: string;
+  concurrencyStamp?: string;
+  isEnabled?: boolean;
+  ngayChinhSua?: Date;
+  nguoiChinhSua?: string;
+}
+interface I extends IDocument {
+  file?: File;
+}
+export function F_core12196_Create({ FormTypeId }: { FormTypeId: number }) {
+  const form = useForm<I>({
+    mode: "uncontrolled",
+    validate: {
+      decisionCode: (value) =>
+        value ? null : "Số quy định không được để trống",
+      promulgateDate: (value) =>
+        value ? null : "Ngày ban hành không được để trống",
+      name: (value) => (value ? null : "Tên tài liệu không được để trống"),
+      documentAttributeId: (value) =>
+        value ? null : "Loại văn bản không được để trống",
+      file: (value) => (value ? null : "Tệp đính kèm không được để trống"),
+    },
+  });
+  return (
+    <MyButtonCreate
+      objectName="Văn bản quy định tổ chức"
+      form={form}
+      onSubmit={async (values) => {
+        return await baseAxios.post("/Document/create", {
+          ...values,
+          DocumentType: OBJECT_DOCUMENT_TYPES.Form,
+          fileDetail: await utils_file_fileToAQDocumentType(values.file!),
+        });
+      }}
+    >
+      <MyTextInput
+        withAsterisk
+        label="Số quy định"
+        {...form.getInputProps("decisionCode")}
+      />
+      <MyDateInput
+        withAsterisk
+        label="Ngày ban hành"
+        {...form.getInputProps("promulgateDate")}
+      />
+      <MyTextInput
+        withAsterisk
+        label="Tên tài liệu"
+        {...form.getInputProps("name")}
+      />
+      <F_core18256_Select
+        withAsterisk
+        label="Loại văn bản"
+        documentTypeId={FormTypeId}
+        {...form.getInputProps("documentAttributeId")}
+      />
+      <MyFileInput
+        withAsterisk
+        label="Văn bản"
+        {...form.getInputProps("file")}
+      />
+      <MyNumberInput
+        label="Thứ tự hiển thị trên danh sách"
+        {...form.getInputProps("orderBy")}
+      />
+    </MyButtonCreate>
+  );
+}

package/dist/modules-features/admin/core/core12196/F_core12196_Delete.tsx

@@ -0,0 +1,19 @@
+import baseAxios from "@/api/baseAxios";
+import { MyActionIconDelete } from "@/components/ActionIcons/ActionIconCRUD/MyActionIconDelete";
+
+export function F_core12196_Delete({
+  id,
+  contextData,
+}: {
+  id: number;
+  contextData: string;
+}) {
+  return (
+    <MyActionIconDelete
+      contextData={contextData}
+      onSubmit={async () =>
+        await baseAxios.post("/Document/delete", { id: id })
+      }
+    />
+  );
+}

package/dist/modules-features/admin/core/core12196/F_core12196_Read.tsx

@@ -0,0 +1,165 @@
+"use client";
+import { MyFlexColumn } from "@/components/Layouts/FlexColumn/MyFlexColumn";
+import { Accordion, Blockquote, Paper, Space } from "@mantine/core";
+import { useQuery } from "@tanstack/react-query";
+
+import baseAxios from "@/api/baseAxios";
+import { MyButtonViewPDF } from "@/components/Buttons/ButtonViewPDF/MyButtonViewPDF";
+import { MyCenterFull } from "@/components/CenterFull/MyCenterFull";
+import { MyDataTable } from "@/components/DataDisplay/DataTable/MyDataTable";
+import { MyPageContent } from "@/components/Layouts/PageContent/MyPageContent";
+import { OBJECT_DOCUMENT_TYPES } from "@/constants/object/documentTypes";
+import { U0DateToDDMMYYYString } from "@/utils/utils_date";
+import { MRT_ColumnDef } from "mantine-react-table";
+import { useMemo } from "react";
+
+import { F_core12196_Create } from "./F_core12196_Create";
+import { F_core12196_Delete } from "./F_core12196_Delete";
+import { F_core12196_Update } from "./F_core12196_Update";
+import { MyFlexEnd } from "@/components";
+interface I {
+  documentType?: number;
+  id?: number;
+  code?: string;
+  name?: string;
+  concurrencyStamp?: string;
+  isEnabled?: boolean;
+}
+
+export function F_core12196_Read({ FormTypeId }: { FormTypeId: number }) {
+  const documentAttributeQuery = useQuery<I[]>({
+    queryKey: ["F_core12196_Read", FormTypeId],
+    queryFn: async () => {
+      const result = await baseAxios.get("/DocumentAttribute/GetByType?", {
+        params: { documentType: FormTypeId },
+      });
+      return result.data?.data || [];
+    },
+  });
+  if (documentAttributeQuery.isLoading) return "Loading...";
+  if (documentAttributeQuery.isError) return "có lỗi xảy ra!";
+  if (documentAttributeQuery.data?.length == 0)
+    return <Blockquote color="yellow">Chưa có loại văn bản</Blockquote>;
+  return (
+    <MyFlexColumn>
+      <Accordion
+        variant="contained"
+        defaultValue={documentAttributeQuery.data?.map(
+          (item) => item.id?.toString()!
+        )}
+        multiple
+      >
+        {documentAttributeQuery.data?.map((item, idx) => (
+          <SubRead
+            key={idx}
+            name={item.name!}
+            documentType={item.id!}
+            FormTypeId={FormTypeId}
+          />
+        ))}
+      </Accordion>
+    </MyFlexColumn>
+  );
+}
+
+function SubRead({
+  name,
+  documentType,
+  FormTypeId,
+}: {
+  name: string;
+  documentType: number;
+  FormTypeId: number;
+}) {
+  interface I {
+    path?: string;
+    orderBy?: number;
+    documentType?: number;
+    promulgateDate?: Date;
+    decisionCode?: string;
+    departmentName?: string;
+    description?: string;
+    startDate?: Date;
+    endDate?: Date;
+    conclusion?: string;
+    note?: string;
+    documentAttributeId?: number;
+    documentAttributeName?: string;
+    isCycleCheck?: boolean;
+    meetingDate?: Date;
+    fileDetail?: {
+      fileBase64String?: string;
+      fileExtension?: string;
+      fileName?: string;
+    };
+    id?: number;
+    code?: string;
+    name?: string;
+    concurrencyStamp?: string;
+    isEnabled?: boolean;
+    ngayChinhSua?: Date;
+    nguoiChinhSua?: string;
+  }
+  const documentQuery = useQuery<I[]>({
+    queryKey: ["SF2_3Read" + documentType],
+    queryFn: async () => {
+      const result = await baseAxios.get(
+        `/Document/GetByDocumentAttribute?id=${documentType}`
+      );
+      return result.data.data;
+    },
+  });
+  const columns = useMemo<MRT_ColumnDef<I>[]>(
+    () => [
+      {
+        header: "Số quy định",
+        accessorKey: "decisionCode",
+      },
+      {
+        header: "Ngày ban hành",
+        accessorFn: (row) =>
+          U0DateToDDMMYYYString(new Date(row.promulgateDate!)),
+      },
+      {
+        header: "Tên tài liệu",
+        accessorKey: "name",
+      },
+      {
+        header: "File",
+        accessorFn: (row) => {
+          return (
+            <MyCenterFull>
+              <MyButtonViewPDF id={row.id} />
+            </MyCenterFull>
+          );
+        },
+      },
+    ],
+    []
+  );
+  if (documentQuery.isLoading) return "Loading...";
+  if (documentQuery.isError) return "Error!";
+  return (
+    <Accordion.Item value={documentType.toString()}>
+      <Accordion.Control>{name}</Accordion.Control>
+      <Accordion.Panel>
+        <MyDataTable
+          columns={columns}
+          data={documentQuery.data!}
+          renderRowActions={({ row }) => (
+            <MyCenterFull>
+              <F_core12196_Update
+                FormTypeId={FormTypeId}
+                values={row.original!}
+              />
+              <F_core12196_Delete
+                id={row.original.id!}
+                contextData={row.original.decisionCode!}
+              />
+            </MyCenterFull>
+          )}
+        />
+      </Accordion.Panel>
+    </Accordion.Item>
+  );
+}