118 lines
5.0 KiB
TypeScript
118 lines
5.0 KiB
TypeScript
import DynamicCertificate from '@/components/dynamic-certificate';
|
|
import DynamicMarksheet from '@/components/dynamic-marksheet';
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { StudentExamProps } from '@/types/page';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { format } from 'date-fns';
|
|
import { Award, ClipboardList, Lock } from 'lucide-react';
|
|
|
|
const ExamCertificate = () => {
|
|
const { props } = usePage<StudentExamProps>();
|
|
const { exam, bestAttempt, certificateTemplate, marksheetTemplate, studentMarks, auth } = props;
|
|
|
|
// Check if exam is passed
|
|
const isPassed = bestAttempt?.is_passed || false;
|
|
const hasCompletedAttempt = bestAttempt?.status === 'completed';
|
|
|
|
if (!hasCompletedAttempt) {
|
|
return (
|
|
<Alert>
|
|
<Lock className="h-4 w-4" />
|
|
<AlertTitle>Certificate & Marksheet Locked</AlertTitle>
|
|
<AlertDescription>Complete at least one exam attempt to unlock your certificate and marksheet.</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|
|
|
|
if (!isPassed) {
|
|
return (
|
|
<Alert>
|
|
<Lock className="h-4 w-4" />
|
|
<AlertTitle>Certificate & Marksheet Locked</AlertTitle>
|
|
<AlertDescription>You need to pass the exam to unlock your certificate and marksheet.</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|
|
|
|
const completionDate = bestAttempt?.end_time ? format(new Date(bestAttempt.end_time), 'MMMM d, yyyy') : format(new Date(), 'MMMM d, yyyy');
|
|
|
|
// Check if both are unavailable
|
|
if (!certificateTemplate && !marksheetTemplate) {
|
|
return (
|
|
<div className="p-6">
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center justify-center p-12 text-center">
|
|
<Award className="text-muted-foreground mb-4 h-16 w-16" />
|
|
<h3 className="mb-2 text-xl font-semibold">No Certificate or Marksheet Available</h3>
|
|
<p className="text-muted-foreground">The instructor hasn't set up certificates or marksheets for this exam yet.</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Tabs defaultValue="certificate" className="w-full">
|
|
<TabsList className="mb-6 grid h-11 w-full grid-cols-2">
|
|
<TabsTrigger value="certificate" className="flex h-9 cursor-pointer items-center gap-2">
|
|
<Award className="h-4 w-4" />
|
|
Certificate
|
|
</TabsTrigger>
|
|
<TabsTrigger disabled value="" className="flex h-9 cursor-pointer items-center gap-2">
|
|
<ClipboardList className="h-4 w-4" />
|
|
Marksheet
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="certificate">
|
|
{!certificateTemplate ? (
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center justify-center p-12 text-center">
|
|
<Award className="text-muted-foreground mb-4 h-16 w-16" />
|
|
<h3 className="mb-2 text-xl font-semibold">No Certificate Available</h3>
|
|
<p className="text-muted-foreground">The instructor hasn't set up certificates for this exam yet.</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<DynamicCertificate
|
|
template={certificateTemplate}
|
|
courseName={exam.title}
|
|
studentName={auth.user.name}
|
|
completionDate={completionDate}
|
|
/>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="marksheet">
|
|
{!marksheetTemplate || !studentMarks ? (
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center justify-center p-12 text-center">
|
|
<ClipboardList className="text-muted-foreground mb-4 h-16 w-16" />
|
|
<h3 className="mb-2 text-xl font-semibold">No Marksheet Available</h3>
|
|
<p className="text-muted-foreground">
|
|
{!marksheetTemplate
|
|
? "The instructor hasn't set up marksheets for this exam yet."
|
|
: 'No marks data available. Complete exam attempts to view your marksheet.'}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<DynamicMarksheet
|
|
template={marksheetTemplate}
|
|
courseName={exam.title}
|
|
studentName={auth.user.name}
|
|
completionDate={completionDate}
|
|
studentMarks={studentMarks}
|
|
/>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExamCertificate;
|