import TableHeader from '@/components/table/table-header'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'; import DashboardLayout from '@/layouts/dashboard/layout'; import { cn } from '@/lib/utils'; import InstructorTableColumn from '@/pages/dashboard/payouts/partials/payouts-table-columns'; import AdminTableColumn from '@/pages/dashboard/payouts/partials/request-table-columns'; import { SharedData } from '@/types/global'; import { Head, Link } from '@inertiajs/react'; import { flexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'; import { BookOpen, UserCheck, UserPlus, Users, Video } from 'lucide-react'; import { ReactNode, useMemo } from 'react'; import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts'; import RevenueChart from './partials/revenue-chart'; type StatisticsType = { courses: number; lessons: number; enrollments: number; students: number; instructors: number; }; type RevenueDataType = Record; type CourseStatusDistributionType = Record; export interface DashboardProps extends SharedData { statistics: StatisticsType; revenueData: RevenueDataType; courseStatusDistribution: CourseStatusDistributionType; pendingWithdrawals: Payout[]; } const Dashboard = (props: DashboardProps) => { const { auth, system, statistics, revenueData, courseStatusDistribution, pendingWithdrawals, translate } = props; const { frontend } = translate; const isAdmin = auth.user.role === 'admin'; // Format course status data for pie chart const pieChartData = useMemo(() => { return Object.entries(courseStatusDistribution).map(([name, value]) => ({ name, value, })); }, [courseStatusDistribution]); const table = useReactTable({ data: pendingWithdrawals, columns: isAdmin ? AdminTableColumn(props.translate) : InstructorTableColumn(props.translate), getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), }); return (
{/* Statistics Cards */}
} /> } /> } /> } /> {isAdmin && } />}
{/* Revenue Chart - Full Width */} {system.sub_type === 'collaborative' && } {/* Course Status Chart */}

{frontend.course_status}

{pieChartData.map((entry, index) => ( ))} [value, frontend.courses]} />
{system.sub_type === 'collaborative' ? (

{frontend.latest_pending_withdrawal_request}

{table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} )) ) : ( {frontend.no_results} )}
) : (
)}
); }; type StatCardProps = { title: string; value: number; icon: ReactNode; }; const StatCard = ({ title, value, icon }: StatCardProps) => { return (

{title}

{value}

{icon}
 ); }; Dashboard.layout = (page: ReactNode) => ; export default Dashboard;