aq-fe-framework 0.1.155 → 0.1.156

package/dist/interfaces/global-interface/ISystemManagementScientificResearchProject.ts

@@ -0,0 +1,16 @@
+
+
+export interface ISystemManagementScientificResearchProject {
+  id?: number;
+  code?: string | undefined;
+  name?: string | undefined;
+  concurrencyStamp?: string | undefined;
+  isEnabled?: boolean;
+  userId?: number;
+  projectName?: string | undefined;
+  startYear?: string | undefined;
+  endYear?: string | undefined;
+  projectLevel?: string | undefined;
+  responsibilities?: string | undefined;
+
+}

package/dist/interfaces/global-interface/ISystemManagementUserMenuPermission.ts

@@ -0,0 +1,18 @@
+
+
+export interface ISystemManagementUserMenuPermission {
+  id?: number;
+  code?: string | undefined;
+  name?: string | undefined;
+  concurrencyStamp?: string | undefined;
+  isEnabled?: boolean;
+  userId?: number;
+  menuId?: number;
+  isRead?: boolean | undefined;
+  isAdd?: boolean | undefined;
+  isUpdate?: boolean | undefined;
+  isPrint?: boolean | undefined;
+  isExport?: boolean | undefined;
+  isDelete?: boolean | undefined;
+
+}

package/dist/interfaces/global-interface/IUpdateAccount.ts

@@ -0,0 +1,15 @@
+
+
+export interface IUpdateAccount {
+  isBlocked?: boolean;
+  id?: number;
+  isEnabled?: boolean;
+  fullName?: string | undefined;
+  code?: string | undefined;
+  email?: string | undefined;
+  phoneNumber?: string | undefined;
+  address?: string | undefined;
+  concurrencyStamp?: string | undefined;
+  workingUnitId?: number | undefined;
+
+}

package/dist/interfaces/global-interface/IUser.ts

@@ -0,0 +1,21 @@
+
+export interface IUser {
+    isBlocked: boolean;
+    roleId?: number | undefined;
+    userName: string;
+    passwordHash: string;
+    email?: string | undefined;
+    phoneNumber?: string | undefined;
+    address?: string | undefined;
+    avatarPath?: string | undefined;
+    fullName?: string | undefined;
+    lockoutEnd?: Date | undefined;
+    securityStamp: string;
+    expiresDate?: Date | undefined;
+    facultyId?: number | undefined;
+    majorsId?: number | undefined;
+    classId?: number | undefined;
+    signInWrongCount?: number | undefined;
+    isLocked?: boolean | undefined;
+    workingUnitId?: number | undefined;
+}

package/dist/interfaces/global-interface/IUserPermission.ts

@@ -0,0 +1,7 @@
+import { IPagePermission } from "./IPagePermission";
+
+export interface IUserPermission {
+  userId?: number;
+  pagePermissions?: IPagePermission[] | undefined;
+
+}

package/dist/lib/utils.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

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

@@ -0,0 +1,87 @@
+"use client"
+import { BarChart } from '@mantine/charts';
+import { Group, Paper, Text, useMantineColorScheme } from '@mantine/core';
+// import { BarChart } from "recharts";
+
+const data = [
+    { course_status: 'Đang mở', amount: 120, color: 'blue.6' },
+    { course_status: 'Hoàn thành', amount: 50, color: 'green.6' },
+    { course_status: 'Đã hủy', amount: 32, color: 'red.6' }
+];
+interface ChartTooltipProps {
+    label: string;
+    payload: Record<string, any>[] | undefined;
+}
+
+function ChartTooltip({ label, payload }: ChartTooltipProps) {
+    if (!payload) return null;
+
+    return (
+        <Paper px="md" py="sm" withBorder shadow="md" radius="md">
+            <Text fw={500} mb={5}>
+                {label}
+            </Text>
+            {payload.map((item: any) => (
+                <Text key={item.name} c={item.color} fz="sm">
+                    Số lượng: {item.value}
+                </Text>
+            ))}
+        </Paper>
+    );
+}
+
+// interface DataItem {
+//     name: string;
+//     value: number;
+// }
+
+// const data2: DataItem[] = [
+//     { name: "Page A", value: 400 },
+//     { name: "Page B", value: 300 },
+//     { name: "Page C", value: 300 },
+//     { name: "Page D", value: 200 },
+// ];
+
+export default function BarChart_CourseStatus() {
+    const colorTheme = useMantineColorScheme()
+    return (
+        <>
+            <Group>
+                <Text mb={"50"}>Biểu đồ phân tích trạng thái khóa học</Text>
+                <BarChart
+                    h={200}
+                    w={"90%"}
+                    data={data}
+                    dataKey="course_status"
+                    series={[
+                        { name: 'amount', color: 'color', label: 'Số lượng' },
+                    ]}
+                    tooltipProps={{
+                        content: ({ label, payload }) => <ChartTooltip label={label} payload={payload} />,
+                    }}
+                    yAxisLabel="Số lượng"
+                    yAxisProps={{ width: 64 }}
+                    maxBarWidth={64}
+                    tickLine="y"
+                    barProps={{
+                        label: {
+                            position: 'top',
+                            value: 'amount',
+                            fill: colorTheme.colorScheme === 'dark' ? 'gray' : 'black',
+                        }
+                    }}
+                />
+
+                {/* <BarChart width={600} height={300} data={data2}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="name" />
+                    <YAxis />
+                    <Tooltip />
+                    <Bar dataKey="value" fill={"#2298ec"} color='black'>
+                        <LabelList dataKey="value" fill="white" position="inside" />
+                    </Bar>
+                </BarChart> */}
+            </Group>
+        </>
+    );
+}

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

@@ -0,0 +1,65 @@
+"use client"
+import { BarChart } from '@mantine/charts';
+import { Group, Paper, Text, useMantineColorScheme } from '@mantine/core';
+
+const data = [
+    { course_status: 'Đang mở', amount: 55, color: 'blue.6' },
+    { course_status: 'Hoàn thành', amount: 20, color: 'green.6' },
+    { course_status: 'Đã hủy', amount: 10, color: 'red.6' },
+    { course_status: 'Đã cấp chứng chỉ', amount: 15, color: 'orange.6' }
+];
+interface ChartTooltipProps {
+    label: string;
+    payload: Record<string, any>[] | undefined;
+}
+
+function ChartTooltip({ label, payload }: ChartTooltipProps) {
+    if (!payload) return null;
+
+    return (
+        <Paper px="md" py="sm" withBorder shadow="md" radius="md">
+            <Text fw={500} mb={5}>
+                {label}
+            </Text>
+            {payload.map((item: any) => (
+                <Text key={item.name} c={item.color} fz="sm">
+                    Số lượng: {item.value}
+                </Text>
+            ))}
+        </Paper>
+    );
+}
+
+export default function BarChart_ExamStatus() {
+    const colorTheme = useMantineColorScheme()
+    return (
+        <>
+            <Group>
+                <Text mb={"50"}>Biểu đồ phân tích trạng thái khóa thi</Text>
+                <BarChart
+                    h={200}
+                    w={"90%"}
+                    data={data}
+                    dataKey="course_status"
+                    series={[
+                        { name: 'amount', color: 'color', label: 'Số lượng' },
+                    ]}
+                    tooltipProps={{
+                        content: ({ label, payload }) => <ChartTooltip label={label} payload={payload} />,
+                    }}
+                    yAxisLabel="Số lượng"
+                    yAxisProps={{ width: 64 }}
+                    maxBarWidth={64}
+                    tickLine="y"
+                    barProps={{
+                        label: {
+                            position: 'top',
+                            value: 'amount',
+                            fill: colorTheme.colorScheme === 'dark' ? 'gray' : 'black',
+                        }
+                    }}
+                />
+            </Group>
+        </>
+    );
+}

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

@@ -0,0 +1,82 @@
+"use client"
+import { BarChart } from '@mantine/charts';
+import { Group, Paper, Text, useMantineColorScheme } from '@mantine/core';
+
+const data = [
+    { academic_year: 'K2024', revenue: 167000000 },
+    { academic_year: 'K2023', revenue: 132000000 },
+    { academic_year: 'K2022', revenue: 69000000 },
+    { academic_year: 'K2021', revenue: 85000000 },
+    { academic_year: 'K2020', revenue: 92000000 },
+    { academic_year: 'K2019', revenue: 78000000 },
+    { academic_year: 'K2018', revenue: 105000000 }
+];
+interface ChartTooltipProps {
+    label: string;
+    payload: Record<string, any>[] | undefined;
+}
+
+function ChartTooltip({ label, payload }: ChartTooltipProps) {
+    if (!payload) return null;
+
+    return (
+        <Paper px="md" py="sm" withBorder shadow="md" radius="md">
+            <Text fw={500} mb={5}>
+                {label}
+            </Text>
+            {payload.map((item: any) => (
+                <Text key={item.name} fz="sm">
+                    Doanh thu: {formatCurrency(item.value)}
+                </Text>
+            ))}
+        </Paper>
+    );
+}
+
+let formatCurrency = (value: number): string => {
+    return value.toLocaleString('vi-VN', { style: 'currency', currency: 'VND' });
+}
+
+let formatCurrency2 = (value: number): string => {
+    if (value >= 1000000000) {
+        return `${(value / 1000000000).toFixed(1)} tỷ`;
+    } else if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)} tr`;
+    }
+    return value.toLocaleString('vi-VN', { style: 'currency', currency: 'VND' });
+}
+
+export default function BarChart_RevenueByAcademicYear() {
+    const colorTheme = useMantineColorScheme()
+    return (
+        <>
+            <Group>
+                <Text mb={"50"}>Biểu đồ phân tích doanh thu khóa học</Text>
+                <BarChart
+                    h={200}
+                    w={"90%"}
+                    data={data}
+                    dataKey="academic_year"
+                    series={[
+                        { name: 'revenue', color: 'teal', label: 'Doanh thu' },
+                    ]}
+                    tooltipProps={{
+                        content: ({ label, payload }) => <ChartTooltip label={label} payload={payload} />,
+                    }}
+                    yAxisLabel="Tổng doanh thu"
+                    yAxisProps={{ width: 64, tickFormatter: (value: number) => formatCurrency2(value) }}
+                    maxBarWidth={36}
+                    tickLine="y"
+                    barProps={{
+                        label: {
+                            formatter: (value: number) => formatCurrency2(value),
+                            position: 'top',
+                            value: 'amount',
+                            fill: colorTheme.colorScheme === 'dark' ? 'gray' : 'black',
+                        }
+                    }}
+                />
+            </Group>
+        </>
+    );
+}

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

@@ -0,0 +1,67 @@
+"use client"
+import { BarChart } from '@mantine/charts';
+import { Group, Paper, Text, useMantineColorScheme } from '@mantine/core';
+
+const data = [
+    { student_status: 'Chưa xếp lớp', amount: 94, color: 'orange.6' },
+    { student_status: 'Đang học', amount: 154, color: 'blue.6' },
+    { student_status: 'Tạm dừng', amount: 32, color: 'yellow.6' },
+    { student_status: 'Hoàn thành', amount: 120, color: 'green.6' },
+    { student_status: 'Bỏ học', amount: 5, color: '#96172e' }
+];
+interface ChartTooltipProps {
+    label: string;
+    payload: Record<string, any>[] | undefined;
+}
+
+function ChartTooltip({ label, payload }: ChartTooltipProps) {
+    if (!payload) return null;
+
+    return (
+        <Paper px="md" py="sm" withBorder shadow="md" radius="md">
+            <Text fw={500} mb={5}>
+                {label}
+            </Text>
+            {payload.map((item: any) => (
+                <Text key={item.name} c={item.color} fz="sm">
+                    Số lượng: {item.value}
+                </Text>
+            ))}
+        </Paper>
+    );
+}
+
+
+export default function BarChart_StudentStatusIn30Days() {
+    const colorTheme = useMantineColorScheme()
+    return (
+        <>
+            <Group>
+                <Text mb={"50"}>Biểu đồ trạng thái học viên trong 30 ngày qua</Text>
+                <BarChart
+                    h={200}
+                    w={"90%"}
+                    data={data}
+                    dataKey="student_status"
+                    series={[
+                        { name: 'amount', color: 'color', label: 'Số lượng' },
+                    ]}
+                    tooltipProps={{
+                        content: ({ label, payload }) => <ChartTooltip label={label} payload={payload} />,
+                    }}
+                    yAxisLabel="Tổng số học viên"
+                    yAxisProps={{ width: 64 }}
+                    maxBarWidth={64}
+                    tickLine="y"
+                    barProps={{
+                        label: {
+                            position: 'top',
+                            value: 'amount',
+                            fill: colorTheme.colorScheme === 'dark' ? 'gray' : 'black',
+                        }
+                    }}
+                />
+            </Group>
+        </>
+    );
+}

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

@@ -0,0 +1,77 @@
+import { BarChart } from '@mantine/charts';
+import { Group, Paper, Text, useMantineColorScheme } from '@mantine/core';
+
+const data = [
+    { courseId: 1, courseName: 'Introduction to Programming K2024', dropOutPercent: 5 },
+    { courseId: 2, courseName: 'Data Structures K2024', dropOutPercent: 0 },
+    { courseId: 3, courseName: 'Algorithms K2023', dropOutPercent: 0 },
+    { courseId: 4, courseName: 'Operating Systems K2024', dropOutPercent: 0 },
+    { courseId: 5, courseName: 'Databases K2023', dropOutPercent: 0 },
+    { courseId: 6, courseName: 'Computer Networks K2024', dropOutPercent: 2 },
+    { courseId: 7, courseName: 'Software Engineering K2024', dropOutPercent: 0 },
+    { courseId: 8, courseName: 'Artificial Intelligence K2023', dropOutPercent: 0 },
+    { courseId: 9, courseName: 'Machine Learning K2024', dropOutPercent: 0 },
+    { courseId: 10, courseName: 'Human-Computer Interaction K2023', dropOutPercent: 45 },
+    { courseId: 11, courseName: 'Cybersecurity K2024', dropOutPercent: 30 },
+    { courseId: 12, courseName: 'Cloud Computing K2023', dropOutPercent: 1 },
+    { courseId: 13, courseName: 'Big Data Analytics K2024', dropOutPercent: 10 },
+    { courseId: 14, courseName: 'Internet of Things K2023', dropOutPercent: 0 },
+    { courseId: 15, courseName: 'Blockchain Technology K2024', dropOutPercent: 0 },
+    { courseId: 16, courseName: 'Quantum Computing K2023', dropOutPercent: 0 }
+];
+
+interface ChartTooltipProps {
+    label: string;
+    payload: Record<string, any>[] | undefined;
+}
+
+function ChartTooltip({ label, payload }: ChartTooltipProps) {
+    if (!payload) return null;
+    return (
+        <Paper px="md" py="sm" withBorder shadow="md" radius="md">
+            <Text fw={500} mb={5}>
+                {label}
+            </Text>
+            {payload.map((item: any) => (
+                <Text key={item.name} c={"black"} fz="sm">
+                    Tỉ lệ vắng: {item.value}%
+                </Text>
+            ))}
+        </Paper>
+    );
+}
+
+export default function HBarChart_CourseDropOutPercentage() {
+    const colorTheme = useMantineColorScheme()
+
+    return (
+        <Group>
+            <Text mb={"20"}>Biểu đồ theo dõi nguy cơ bỏ học</Text>
+            <BarChart
+                h={800}
+                w={"96%"}
+                data={data}
+                dataKey="courseName"
+                orientation="vertical"
+                yAxisProps={{ width: 220 }}
+                xAxisProps={{ domain: [0, 100] }}
+                tooltipProps={{
+                    content: ({ label, payload }) => <ChartTooltip label={label} payload={payload} />,
+                }}
+                series={[{ name: 'dropOutPercent', color: 'orange.6', label: 'courseName' }]}
+                barProps={{
+                    label: {
+                        position: 'right',
+                        value: 'amount',
+                        fill: colorTheme.colorScheme === 'dark' ? 'gray' : 'black',
+                        // content: ({ value }) => `${value}%`,
+                    }
+                }}
+                maxBarWidth={20}
+                tickLine="x"
+                yAxisLabel="Danh sách lớp"
+                xAxisLabel="Tỉ lệ vắng (%)"
+            />
+        </Group>
+    );
+}

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

@@ -0,0 +1,77 @@
+import { BarChart } from '@mantine/charts';
+import { Group, Paper, Text, useMantineColorScheme } from '@mantine/core';
+
+const data = [
+    { courseId: 1, courseName: 'Introduction to Programming K2024', progress: 50 },
+    { courseId: 2, courseName: 'Data Structures K2024', progress: 75 },
+    { courseId: 3, courseName: 'Algorithms K2023', progress: 60 },
+    { courseId: 4, courseName: 'Operating Systems K2024', progress: 80 },
+    { courseId: 5, courseName: 'Databases K2023', progress: 90 },
+    { courseId: 6, courseName: 'Computer Networks K2024', progress: 70 },
+    { courseId: 7, courseName: 'Software Engineering K2024', progress: 85 },
+    { courseId: 8, courseName: 'Artificial Intelligence K2023', progress: 65 },
+    { courseId: 9, courseName: 'Machine Learning K2024', progress: 55 },
+    { courseId: 10, courseName: 'Human-Computer Interaction K2023', progress: 45 },
+    { courseId: 11, courseName: 'Cybersecurity K2024', progress: 75 },
+    { courseId: 12, courseName: 'Cloud Computing K2023', progress: 80 },
+    { courseId: 13, courseName: 'Big Data Analytics K2024', progress: 70 },
+    { courseId: 14, courseName: 'Internet of Things K2023', progress: 60 },
+    { courseId: 15, courseName: 'Blockchain Technology K2024', progress: 50 },
+    { courseId: 16, courseName: 'Quantum Computing K2023', progress: 40 }
+];
+
+interface ChartTooltipProps {
+    label: string;
+    payload: Record<string, any>[] | undefined;
+}
+
+function ChartTooltip({ label, payload }: ChartTooltipProps) {
+    if (!payload) return null;
+    return (
+        <Paper px="md" py="sm" withBorder shadow="md" radius="md">
+            <Text fw={500} mb={5}>
+                {label}
+            </Text>
+            {payload.map((item: any) => (
+                <Text key={item.name} c={"black"} fz="sm">
+                    Tiến độ: {item.value}%
+                </Text>
+            ))}
+        </Paper>
+    );
+}
+
+export default function HBarChart_CourseProgressPercentage() {
+    const colorTheme = useMantineColorScheme()
+
+    return (
+        <Group>
+            <Text mb={"20"}>Biểu đồ theo dõi tiến độ giảng dạy của lớp</Text>
+            <BarChart
+                h={800}
+                w={"96%"}
+                data={data}
+                dataKey="courseName"
+                orientation="vertical"
+                yAxisProps={{ width: 220 }}
+                xAxisProps={{ domain: [0, 100] }}
+                tooltipProps={{
+                    content: ({ label, payload }) => <ChartTooltip label={label} payload={payload} />,
+                }}
+                series={[{ name: 'progress', color: 'blue.6', label: 'courseName' }]}
+                barProps={{
+                    label: {
+                        position: 'right',
+                        value: 'amount',
+                        fill: colorTheme.colorScheme === 'dark' ? 'gray' : 'black',
+                        // content: ({ value }) => `${value}%`,
+                    }
+                }}
+                maxBarWidth={20}
+                tickLine="x"
+                yAxisLabel="Danh sách lớp"
+                xAxisLabel="Tiến độ hoàn thành (%)"
+            />
+        </Group>
+    );
+}

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

@@ -0,0 +1,78 @@
+import { LineChart } from '@mantine/charts';
+import { Group, Paper, Text } from '@mantine/core';
+
+const data = [
+    { month: '06/23', revenue: 79000000 },
+    { month: '03/23', revenue: 106000000 },
+    { month: '08/23', revenue: 70000000 },
+    { month: '09/23', revenue: 86000000 },
+    { month: '10/23', revenue: 93000000 },
+    { month: '11/23', revenue: 79000000 },
+    { month: '12/23', revenue: 106000000 },
+    { month: '01/24', revenue: 170000000 },
+    { month: '02/24', revenue: 135000000 },
+    { month: '03/24', revenue: 70000000 },
+    { month: '04/24', revenue: 86000000 },
+    { month: '05/24', revenue: 93000000 },
+];
+
+interface ChartTooltipProps {
+    label: string;
+    payload: Record<string, any>[] | undefined;
+}
+
+function ChartTooltip({ label, payload }: ChartTooltipProps) {
+    if (!payload) return null;
+
+    return (
+        <Paper px="md" py="sm" withBorder shadow="md" radius="md">
+            <Text fw={500} mb={5}>
+                {isNaN(Date.parse(label)) ? label : new Date(label.replace(/(\d{2})\/(\d{2})/, '20$2-$1')).toLocaleDateString('vi-VN', { month: 'long', year: 'numeric' })}
+            </Text>
+            {payload.map((item: any) => (
+                <Text key={item.name} fz="sm">
+                    Doanh thu: {formatCurrency(item.value)}
+                </Text>
+            ))}
+        </Paper>
+    );
+}
+
+let formatCurrency = (value: number): string => {
+    return value.toLocaleString('vi-VN', { style: 'currency', currency: 'VND' });
+}
+
+let formatCurrency2 = (value: number): string => {
+    if (value >= 1000000000) {
+        return `${(value / 1000000000).toFixed(1)} tỷ`;
+    } else if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)} tr`;
+    }
+    return value.toLocaleString('vi-VN', { style: 'currency', currency: 'VND' });
+}
+
+export default function LineChart_RevenueIn12Months() {
+    return (
+        <>
+            <Group>
+                <Text mb={"50"}>Biểu đồ phân tích doanh thu khóa học 12 tháng qua</Text>
+                <LineChart
+                    w={"100%"}
+                    h={200}
+                    data={data}
+                    dataKey="month"
+                    series={[
+                        { name: 'revenue', color: 'indigo.6' },
+                    ]}
+                    tooltipProps={{
+                        content: ({ label, payload }) => <ChartTooltip label={label} payload={payload} />,
+                    }}
+                    curveType="linear"
+                    yAxisLabel="Tổng doanh thu"
+                    tickLine="y"
+                    yAxisProps={{ width: 64, tickFormatter: (value: number) => formatCurrency2(value) }}
+                />
+            </Group>
+        </>
+    );
+}