{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "student-gradebook-table", "title": "Student Gradebook Table", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/student-gradebook-table/student-gradebook-table.component.ts", "content": "// Academic gradebook ledger with course header, weighted assignment categories, class GPA\n// and enrollment metric cards, overall percentage, letter grade badges, attendance tags, and\n// student action menus. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n CalendarCheck,\n ClipboardCheck,\n Download,\n GraduationCap,\n LucideAngularModule,\n Mail,\n MoreHorizontal,\n Pencil,\n Plus,\n User,\n Users,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type LetterGrade = 'A+' | 'A' | 'A-' | 'B+' | 'B' | 'B-'\n\nexport interface StudentGradeRecord {\n id: string\n name: string\n studentId: string\n homework: string\n midterm: string\n labProjects: string\n finalProject: string\n overallGrade: string\n letterGrade: LetterGrade\n attendanceRate: string\n absences: number\n}\n\nconst metrics = [\n {\n title: 'Class GPA',\n value: '3.62 / 4.0',\n description: '+0.18 vs departmental target',\n icon: GraduationCap,\n iconClass: 'bg-success/10 text-success',\n valueClass: 'text-success',\n },\n {\n title: 'Total Enrolled Students',\n value: '28 students',\n description: '100% active roster',\n icon: Users,\n iconClass: 'bg-info/10 text-info',\n valueClass: 'text-foreground',\n },\n {\n title: 'Assignments Graded',\n value: '12 / 14 assignments',\n description: '2 pending final submissions',\n icon: ClipboardCheck,\n iconClass: 'bg-chart-1/10 text-chart-1',\n valueClass: 'text-foreground',\n },\n {\n title: 'Class Attendance Rate',\n value: '96.2% average',\n description: '36 lectures & labs logged',\n icon: CalendarCheck,\n iconClass: 'bg-warning/10 text-warning',\n valueClass: 'text-foreground',\n },\n]\n\nconst gradeBadgeConfig: Record = {\n 'A+': { class: 'bg-success/10 text-success border-success/20 font-semibold' },\n A: { class: 'bg-success/10 text-success border-success/20 font-semibold' },\n 'A-': { class: 'bg-success/10 text-success border-success/20 font-semibold' },\n 'B+': { class: 'bg-info/10 text-info border-info/20 font-semibold' },\n B: { class: 'bg-warning/10 text-warning border-warning/20 font-semibold' },\n 'B-': { class: 'bg-warning/10 text-warning border-warning/20 font-semibold' },\n}\n\nconst students: StudentGradeRecord[] = [\n {\n id: 's1',\n name: 'Elena Rostova',\n studentId: '#STU-84920',\n homework: '95.0%',\n midterm: '92.0%',\n labProjects: '98.0%',\n finalProject: '94.0%',\n overallGrade: '94.5%',\n letterGrade: 'A',\n attendanceRate: '100%',\n absences: 0,\n },\n {\n id: 's2',\n name: 'David Chen',\n studentId: '#STU-84921',\n homework: '88.0%',\n midterm: '91.0%',\n labProjects: '86.0%',\n finalProject: '89.0%',\n overallGrade: '88.6%',\n letterGrade: 'B+',\n attendanceRate: '96%',\n absences: 1,\n },\n {\n id: 's3',\n name: 'Sarah Jenkins',\n studentId: '#STU-84922',\n homework: '98.0%',\n midterm: '96.0%',\n labProjects: '100.0%',\n finalProject: '95.0%',\n overallGrade: '97.1%',\n letterGrade: 'A',\n attendanceRate: '100%',\n absences: 0,\n },\n {\n id: 's4',\n name: 'Marcus Vance',\n studentId: '#STU-84923',\n homework: '82.0%',\n midterm: '79.0%',\n labProjects: '85.0%',\n finalProject: '80.0%',\n overallGrade: '81.4%',\n letterGrade: 'B',\n attendanceRate: '92%',\n absences: 2,\n },\n {\n id: 's5',\n name: 'Sofia Rossi',\n studentId: '#STU-84924',\n homework: '91.0%',\n midterm: '88.0%',\n labProjects: '94.0%',\n finalProject: '90.0%',\n overallGrade: '90.6%',\n letterGrade: 'A-',\n attendanceRate: '98%',\n absences: 1,\n },\n {\n id: 's6',\n name: 'Alex Rivera',\n studentId: '#STU-84925',\n homework: '84.0%',\n midterm: '86.0%',\n labProjects: '82.0%',\n finalProject: '85.0%',\n overallGrade: '84.3%',\n letterGrade: 'B',\n attendanceRate: '94%',\n absences: 2,\n },\n]\n\nfunction initials(name: string): string {\n return name\n .split(' ')\n .map((part) => part[0])\n .slice(0, 2)\n .join('')\n .toUpperCase()\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-student-gradebook-table, [ui-student-gradebook-table]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n

CS 301: Advanced Software Systems & Compilers

\n CS-301-B\n
\n
\n Fall 2026 · Section B\n \n Class Average: 88.4% · Grade B+\n \n
\n
\n
\n \n \n
\n
\n\n \n
\n @for (metric of metrics; track metric.title) {\n
\n
\n
\n

{{ metric.title }}

\n
\n \n
\n
\n
\n

{{ metric.value }}

\n

{{ metric.description }}

\n
\n
\n
\n }\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (student of students; track student.id) {\n \n \n \n \n \n \n \n \n \n \n \n }\n \n
StudentHomework (25%)Midterm (30%)Lab Projects (25%)Final Project (20%)Overall GradeLetter GradeAttendance\n Actions\n
\n
\n \n {{ initials(student.name) }}\n \n
\n

{{ student.name }}

\n

{{ student.studentId }}

\n
\n
\n 		{{ student.homework }}{{ student.midterm }}{{ student.labProjects }}{{ student.finalProject }}\n {{ student.overallGrade }}\n \n \n {{ student.letterGrade }}\n \n \n
\n \n {{ student.attendanceRate }}\n · {{ absenceLabel(student.absences) }}\n
\n 		\n \n \n \n Open actions for {{ student.name }}\n \n \n \n \n Edit Grades\n \n \n \n View Student Profile\n \n \n \n \n Send Email Alert\n \n \n \n
\n
\n\n \n
\n

\n Showing 6 of\n 28 enrolled students\n

\n
\n \n \n
\n
\n
\n `,\n})\nexport class UiStudentGradebookTableComponent {\n protected readonly Download = Download\n protected readonly Mail = Mail\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Pencil = Pencil\n protected readonly Plus = Plus\n protected readonly User = User\n\n protected readonly metrics = metrics\n protected readonly students = students\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n metricIconClass(iconClass: string): string {\n return cn('flex size-8 items-center justify-center rounded-md', iconClass)\n }\n\n metricValueClass(valueClass: string): string {\n return cn('text-2xl font-bold tracking-tight tabular-nums', valueClass)\n }\n\n gradeBadgeClass(grade: LetterGrade): string {\n return cn('font-semibold', gradeBadgeConfig[grade].class)\n }\n\n attendanceDotClass(absences: number): string {\n return cn('inline-block size-1.5 rounded-full', absences === 0 ? 'bg-success' : 'bg-warning')\n }\n\n absenceLabel(absences: number): string {\n if (absences === 0) return '0 absences'\n return `${absences} absence${absences > 1 ? 's' : ''}`\n }\n\n initials(name: string): string {\n return initials(name)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/student-gradebook-table/student-gradebook-table.component.ts" }, { "path": "packages/registry-angular/blocks/student-gradebook-table/index.ts", "content": "export {\n UiStudentGradebookTableComponent,\n type LetterGrade,\n type StudentGradeRecord,\n} from './student-gradebook-table.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/student-gradebook-table/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Academic gradebook ledger with course header, weighted assignment categories (homework, midterm, labs, final project), class GPA & enrollment metric cards, overall percentage, letter grade badges, attendance tags, and student action menus.", "categories": [ "education", "app", "data", "dashboard" ] }