[V0_FILE]typescriptreact:file="app/attendance/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/attendance/[userId]/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { ArrowLeft, CheckCircle, XCircle, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import Link from "next/link" import { useParams } from "next/navigation" interface CompletedModel { id: string name: string completed_at: number created_at: number } interface NotCompletedModel { id: string name: string completed_at: null created_at: number } interface AttendanceDetail { user_id: string total_models: number models_completed: number models_not_completed: number completed_models: CompletedModel[] not_completed_models: NotCompletedModel[] } interface DetailApiResponse { code: string message: string data: AttendanceDetail } export default function AttendanceDetailPage() { const params = useParams() const userId = params.userId as string const [detailData, setDetailData] = useState(null) const [loading, setLoading] = useState(true) const [studentName, setStudentName] = useState("") useEffect(() => { // Mock data based on the API response structure const mockDetailData: DetailApiResponse = { code: "200", message: "Lấy chi tiết điểm chuyên cần thành công", data: { user_id: userId, total_models: 3, models_completed: 1, models_not_completed: 2, completed_models: [ { id: "4ab5c373-41a6-4a11-b0cc-95adb3a43125", name: "test 4", completed_at: 1753862542, created_at: 1753323198, }, ], not_completed_models: [ { id: "46b588e8-e5ed-4d1c-ba08-aab51ad601c3", name: "093. Remove exam", completed_at: null, created_at: 1751338517, }, { id: "a2d0bdda-84cb-45c0-9f67-235f8fce53f9", name: "python", completed_at: null, created_at: 1749361006, }, ], }, } // Mock student names based on userId const studentNames: { [key: string]: string } = { "ed59abe0-e358-426e-bb4c-82402435ddb3": "Nguyễn Văn An", "c999e38e-fc87-44e7-b9bb-fc88fe80af27": "Trần Thị Bình", "a1b2c3d4-e5f6-7890-abcd-ef1234567890": "Lê Minh Cường", "b2c3d4e5-f6g7-8901-bcde-f23456789012": "Phạm Thu Dung", "c3d4e5f6-g7h8-9012-cdef-345678901234": "Hoàng Văn Em", } setTimeout(() => { setDetailData(mockDetailData.data) setStudentName(studentNames[userId] || "Sinh viên") setLoading(false) }, 1000) }, [userId]) const formatDate = (timestamp: number) => { return new Date(timestamp * 1000).toLocaleDateString("vi-VN", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", }) } const getCompletionRate = () => { if (!detailData) return 0 return Math.round((detailData.models_completed / detailData.total_models) * 100) } if (loading) { return (

Đang tải chi tiết...

) } if (!detailData) { return (

Không tìm thấy dữ liệu

) } return (

{/* Header */}

Trợ giảng AI

{/* Sidebar */}

{/* Main Content */}

{/* Student Info Header */}

{studentName}

Chi tiết điểm chuyên cần

{/* Statistics Cards */}

{detailData.total_models}

Tổng số bài

{detailData.models_completed}

Đã hoàn thành

{detailData.models_not_completed}

Chưa hoàn thành

{getCompletionRate()}%

Tỷ lệ hoàn thành

{/* Completed Models */} Bài đã hoàn thành ({detailData.models_completed})

{detailData.completed_models.map((model) => (

{model.name}

Hoàn thành: {formatDate(model.completed_at)}

Đã hoàn thành

))}

{/* Not Completed Models */} Bài chưa hoàn thành ({detailData.models_not_completed})

{detailData.not_completed_models.map((model) => (

{model.name}

Tạo lúc: {formatDate(model.created_at)}

Chưa hoàn thành

))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Hệ thống quản lý điểm chuyên cần", description: "Ứng dụng quản lý điểm chuyên cần cho sinh viên", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function HomePage() { redirect("/attendance") } [V0_FILE]typescriptreact:file="app/attendance/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Search, Edit, Trash2, ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import Link from "next/link" interface AttendanceData { user_id: string user_name: string email: string models_completed: number total_models: number attendance_points: number } interface ApiResponse { code: string message: string data: AttendanceData[] } export default function AttendancePage() { const [attendanceData, setAttendanceData] = useState([]) const [loading, setLoading] = useState(true) const [searchTerm, setSearchTerm] = useState("") const [itemsPerPage, setItemsPerPage] = useState(10) const calculateAttendancePoints = (completed: number, total: number): number => { return Math.round((completed / total) * 100) } useEffect(() => { // Mock data based on the API response structure const mockData: ApiResponse = { code: "200", message: "Lấy điểm chuyên cần thành công", data: [ { user_id: "ed59abe0-e358-426e-bb4c-82402435ddb3", user_name: "Nguyễn Văn An", email: "an.nv@student.edu.vn", models_completed: 2, total_models: 3, attendance_points: 67, // 2/3 * 100 = 66.67 ≈ 67 }, { user_id: "c999e38e-fc87-44e7-b9bb-fc88fe80af27", user_name: "Trần Thị Bình", email: "binh.tt@student.edu.vn", models_completed: 2, total_models: 3, attendance_points: 67, // 2/3 * 100 = 66.67 ≈ 67 }, { user_id: "a1b2c3d4-e5f6-7890-abcd-ef1234567890", user_name: "Lê Minh Cường", email: "cuong.lm@student.edu.vn", models_completed: 2, total_models: 3, attendance_points: 67, // 2/3 * 100 = 66.67 ≈ 67 }, { user_id: "b2c3d4e5-f6g7-8901-bcde-f23456789012", user_name: "Phạm Thu Dung", email: "dung.pt@student.edu.vn", models_completed: 1, total_models: 3, attendance_points: 33, // 1/3 * 100 = 33.33 ≈ 33 }, { user_id: "c3d4e5f6-g7h8-9012-cdef-345678901234", user_name: "Hoàng Văn Em", email: "em.hv@student.edu.vn", models_completed: 3, total_models: 3, attendance_points: 100, // 3/3 * 100 = 100 }, ], } setTimeout(() => { setAttendanceData(mockData.data) setLoading(false) }, 1000) }, []) const getStatusBadge = (points: number) => { if (points >= 80) { return Xuất sắc } else if (points >= 65) { return Tốt } else if (points >= 50) { return Trung bình } else { return Yếu } } const getClassFromEmail = (email: string) => { if (email.includes("ai") || email.includes("an") || email.includes("binh") || email.includes("em")) return "AI101" if (email.includes("cuong")) return "IT201" if (email.includes("dung")) return "PY301" return "AI101" } const getProgramFromClass = (className: string) => { switch (className) { case "AI101": return "Trí tuệ nhân tạo" case "IT201": return "Công nghệ thông tin" case "PY301": return "Lập trình Python" default: return "Trí tuệ nhân tạo" } } const filteredData = attendanceData.filter( (student) => student.user_name.toLowerCase().includes(searchTerm.toLowerCase()) || student.email.toLowerCase().includes(searchTerm.toLowerCase()), ) if (loading) { return (

Đang tải dữ liệu...

) } return (

{/* Header */}

Trợ giảng AI

setSearchTerm(e.target.value)} />

{/* Sidebar */}

{/* Main Content */}

{/* Table Header */}

SINH VIÊN

LỚP

CHƯƠNG TRÌNH ĐÀO TẠO

ĐIỂM CHUYÊN CẦN

TRẠNG THÁI

HÀNH ĐỘNG

{/* Table Body */}

{filteredData.map((student) => { const className = getClassFromEmail(student.email) const program = getProgramFromClass(className) return (

{student.user_name}

{student.email}

{className}

{program}

{calculateAttendancePoints(student.models_completed, student.total_models)}

{getStatusBadge(student.attendance_points)}

) })}

{/* Footer */}

Hoàng Trung

hoangthor2003@gmail.com

Số hàng:

Trước 1/1 Sau

) }