Feat/frontend/submissions

Frontend/grader-frontend/src/app/globals.css

@@ -135,6 +135,10 @@
   font-family: var(--font-sans);
 }
 
+.Chip{
+  @apply px-2 py-1 bg-pink-100 ring ring-primary rounded-md text-sm
+}
+
 @layer base {
   :root {
     --sidebar: oklch(0.985 0 0);
@@ -146,4 +150,8 @@
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
   }
+}
+
+button {
+  cursor: pointer;
 }

Frontend/grader-frontend/src/app/instructor/class/[class_id]/assignments/[assignment_id]/submissions/[submissions_id]/page.tsx

@@ -0,0 +1,56 @@
+'use client'
+import { NavSub } from "@/components/page/submissions/navigate"
+import { HeaderSub } from "@/components/page/submissions/header";
+import { CodeSection } from "@/components/page/submissions/codeSection";
+import { CommentScreenSection } from "@/components/page/submissions/comment/screen";
+import { FormInputComment,FeedbackFormData } from "@/components/page/submissions/comment/formInput";
+import dayjs from "dayjs";
+import { mockComments } from "@/variables/page/submissions/mockComment";
+import { useState } from "react";
+
+export default function Page({ params }: { params: Promise<{ submissions_id: string; }>; }) {
+    const [code, setCode] = useState("# Write your Python code here\nprint('Hello, World!')");
+    function DayFormat(date:number){
+        return dayjs.unix(date).format('DD MMMM YYYY HH:mm');
+    }
+    const formattedComments = mockComments.map(comment => ({
+        ...comment,
+        date: DayFormat(parseInt(comment.date))
+    }));
+
+    const ProfileData = {
+        image: 'https://i.pinimg.com/736x/f3/ec/94/f3ec94635f2365e3de3782de0aadbe76.jpg',
+        name: "Alex Chen",
+        lab:1,
+        question: "Question 1: Median of Two Sorted Arrays",
+        date: DayFormat(parseInt("1703721600")),
+        score:20,
+        maxScore: 100
+    }
+    // mock นะจะ
+    const handleFeedbackSubmit = async (data: FeedbackFormData) => {
+        console.log('Submitting feedback:', data.comment)
+        await fetch('/api/feedback', {
+            method: 'POST',
+            body: JSON.stringify(data)
+        })
+    }
+
+    return(
+        <div className={` px-4 md:px-8 py-8`}>
+            <NavSub onClickSV={() => console.log("awdwad")} />
+            <div className="divide-y divide-gray-200 divide-solid px-0 md:px-5">
+                <div className=" px-2 md:px-10 py-2">
+                    <HeaderSub
+                        data={ProfileData}
+                    />
+                </div>
+                <div className=" px-2 md:px-14 py-6 gap-10 flex flex-col">
+                    <CodeSection code={code} setCode={setCode} language="python"/>
+                    <CommentScreenSection data={formattedComments}/>
+                    <FormInputComment onSubmit={handleFeedbackSubmit}/>
+                </div>
+            </div>
+        </div>
+    )
+}

Frontend/grader-frontend/src/components/page/submissions/codeSection.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { Button } from "@/components/ui/button";
+import Editor from "@monaco-editor/react";
+
+export function CodeSection({code, setCode, language}:{code:string, setCode:(data:string) => void, language:string}) {
+    return (
+        <div className="space-y-2 w-full">
+            <div className="flex justify-end">
+                <Button size={"sm"} variant={"outline"}>
+                    {language}
+                </Button>
+            </div>
+            <div className="border rounded-lg overflow-hidden w-auto">
+                <Editor
+                    height="400px"
+                    defaultLanguage={language}
+                    value={code}
+                    onChange={(value) => setCode(value || "")}
+                    theme="light"
+                    options={{
+                        readOnly: true,
+                        minimap: { enabled: false },
+                        fontSize: 14,
+                        lineNumbers: "on",
+                        scrollBeyondLastLine: false,
+                        automaticLayout: true,
+                        wordWrap: "on",
+                    }}
+                />
+            </div>
+        </div>
+    );
+}

Frontend/grader-frontend/src/components/page/submissions/comment/formInput.tsx

@@ -0,0 +1,59 @@
+'use client'
+import { useForm } from "react-hook-form"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+
+interface FeedbackFormData {
+    comment: string
+}
+
+interface FormInputCommentProps {
+    onSubmit: (data: FeedbackFormData) => Promise<void> | void
+}
+
+export function FormInputComment({ onSubmit }: FormInputCommentProps) {
+    const { 
+        register, 
+        handleSubmit, 
+        formState: { errors, isSubmitting },
+        reset 
+    } = useForm<FeedbackFormData>()
+
+    const handleFormSubmit = async (data: FeedbackFormData) => {
+        try {
+            await onSubmit(data)
+            reset()
+        } catch (error) {
+            console.error('Error submitting feedback:', error)
+        }
+    }
+
+    return(
+        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex flex-col gap-4 items-start">
+            <span className="font-bold">Give feedback to student</span>
+            <div className="w-full md:w-100">
+                <Textarea 
+                    {...register("comment", { 
+                        required: "Feedback is required",
+                        minLength: {
+                            value: 10,
+                            message: "Feedback must be at least 10 characters"
+                        }
+                    })}
+                    className="w-full min-h-30" 
+                    placeholder="Comment..." 
+                />
+                {errors.comment && (
+                    <p className="text-sm text-red-500 mt-1">{errors.comment.message}</p>
+                )}
+            </div>
+            <div className="flex w-full justify-end md:justify-start">
+                <Button type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? "Sending..." : "Send feedback"}
+                </Button>
+            </div>
+        </form>
+    )
+}
+
+export type { FeedbackFormData }

Frontend/grader-frontend/src/components/page/submissions/comment/screen.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { Button } from "@/components/ui/button";
+import dayjs from "dayjs";
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+} from "@/components/ui/avatar"
+
+export function CommentScreenSection({data}: {data:CommentType[]}){
+    return(
+        <div className="flex gap-4 flex-col">
+            {data.map(( item, index) => (
+                <Comment key={index} data={item} />
+            ))}
+        </div>
+    )
+}
+
+interface CommentType{
+    teacher: boolean;
+    comment: string;
+    name: string;
+    date: string;
+    image: string;
+}
+
+function Comment({ data }: { data:CommentType }) {
+    return(
+        <div className={` flex flex-col gap-4 ${!data.teacher && 'items-end'}`}>
+            <div className="flex items-center gap-2">
+                <Avatar className={`ring ring-primary p-0.5 w-10 h-10 ${!data.teacher && 'order-2'}`}>
+                    <AvatarImage className="rounded-full" src={data.image} alt="Avatar" />
+                    <AvatarFallback>{data.teacher ? 'TS': "ST"}</AvatarFallback>
+                </Avatar>
+                <div className={`flex flex-col ${!data.teacher && 'items-end order-1'} `}>
+                    <span className="text-gray-700 ">{data.name}</span>
+                    <span className="text-gray-400 text-xs ">{data.date}</span>
+                </div>
+            </div>
+            <div className=" md:max-w-[60%] ring ring-gray-300 p-2  text-sm rounded-md shadow-md">
+                {data.comment}
+            </div>
+        </div>
+    )
+}

Frontend/grader-frontend/src/components/page/submissions/header.tsx

@@ -0,0 +1,39 @@
+'use client'
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+} from "@/components/ui/avatar"
+
+interface HeaderType{
+    image:string;
+    name:string;
+    lab:number;
+    question:string;
+    date:string;
+    score:number;
+    maxScore: number;
+}
+
+export function HeaderSub({data}:{data:HeaderType}) {
+    return(
+        <div className="w-full flex flex-col gap-2 pb-6">
+            <div className="flex items-center gap-2">
+                <Avatar className="ring ring-primary p-0.5 w-10 h-10">
+                    <AvatarImage className="rounded-full" src={data.image} alt="Student_Avatar" />
+                    <AvatarFallback>ST</AvatarFallback>
+                </Avatar>
+                <span className="text-gray-700">{data.name}</span>
+            </div>
+            <div className="flex flex-col">
+                <span>Lab {data.lab} / {data.question}</span>
+                <span className="text-xs text-gray-400">Submited {data.date}</span>
+            </div>
+            <div className="flex items-center gap-2">
+                <div className=" Chip">
+                    <span className="text-sm">{data.score}/{data.maxScore}</span>
+                </div>
+            </div>
+        </div>
+    )
+}

Frontend/grader-frontend/src/components/page/submissions/navigate.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { Button } from "@/components/ui/button"
+import { CircleArrowLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+export function NavSub({ onClickSV } : {onClickSV:() => void}) {
+    const router = useRouter()
+    return(
+        <div className="w-full flex justify-between items-center">
+            <Button variant="ghost" className=" cursor-pointer *:text-primary" onClick={() => router.back()}>
+                <CircleArrowLeft />
+                <span className="underline">Back to lab</span>
+            </Button>
+            <Button variant="outline" className=" cursor-pointer *:text-primary border border-primary" onClick={onClickSV}>
+                <span>Student View</span>
+            </Button>
+        </div>
+    )
+}

Frontend/grader-frontend/src/variables/page/submissions/mockComment.ts

@@ -0,0 +1,44 @@
+export const mockComments = [
+    {
+        teacher: true,
+        comment: "Great work on your project! Your attention to detail really shows. Keep up the excellent progress.",
+        name: "Dr. Sarah Mitchell",
+        date: "1703721600",
+        image: "https://i.pinimg.com/736x/f3/ec/94/f3ec94635f2365e3de3782de0aadbe76.jpg"
+    },
+    {
+        teacher: false,
+        comment: "Thanks for the feedback! I really appreciate the guidance on the last assignment.",
+        name: "Alex Chen",
+        date: "1703808000",
+        image: "https://i.pinimg.com/736x/f3/ec/94/f3ec94635f2365e3de3782de0aadbe76.jpg"
+    },
+    {
+        teacher: true,
+        comment: "Remember to submit your homework by Friday. Also, please review chapter 5 before our next class.",
+        name: "Prof. James Wilson",
+        date: "1703894400",
+        image: "https://i.pinimg.com/736x/f3/ec/94/f3ec94635f2365e3de3782de0aadbe76.jpg"
+    },
+    {
+        teacher: false,
+        comment: "Can we schedule a meeting to discuss the upcoming exam? I have a few questions about the material.",
+        name: "Maria Rodriguez",
+        date: "1703980800",
+        image: "https://i.pinimg.com/736x/f3/ec/94/f3ec94635f2365e3de3782de0aadbe76.jpg"
+    },
+    {
+        teacher: true,
+        comment: "Your presentation was outstanding! You demonstrated excellent understanding of the concepts.",
+        name: "Dr. Emily Thompson",
+        date: "1704067200",
+        image: "https://i.pinimg.com/736x/f3/ec/94/f3ec94635f2365e3de3782de0aadbe76.jpg"
+    },
+    {
+        teacher: false,
+        comment: "I'm struggling with the lab assignment. Could you provide some additional resources?",
+        name: "David Park",
+        date: "1704153600",
+        image: "https://i.pinimg.com/736x/f3/ec/94/f3ec94635f2365e3de3782de0aadbe76.jpg"
+    }
+];

Frontend/grader-frontend/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,17 +15,28 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules", "src/lib/api/generated/**"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "src/lib/api/generated/**"
+  ]
 }