make results editable

package.json

@@ -30,7 +30,7 @@
     "next-themes": "^0.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.2",
+    "react-hook-form": "^7.54.0",
     "recharts": "^2.14.1",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.5",

src/components/results/result-form-row.tsx

@@ -0,0 +1,132 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { resultSchema, type Result } from "@/schemas/result-schema"
+import { Trash2 } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+interface ResultFormRowProps {
+  defaultValues?: Result
+  onDelete?: () => void
+  onChange?: (values: Result) => void
+}
+
+export function ResultFormRow({ defaultValues, onDelete, onChange }: ResultFormRowProps) {
+  const form = useForm<Result>({
+    resolver: zodResolver(resultSchema),
+    defaultValues: defaultValues || {
+      unitCode: "",
+      creditPoints: 0,
+      mark: 0,
+      grade: "N",
+    },
+  })
+
+  const handleChange = form.handleSubmit((values) => {
+    onChange?.(values)
+  })
+
+  return (
+    <Form {...form}>
+      <form onChange={handleChange} className="border-b transition-colors hover:bg-muted/50">
+        <div className="grid grid-cols-[2fr,1fr,1fr,1fr,auto] px-1 md:px-2 py-2 md:py-3 items-start">
+          <FormField
+            control={form.control}
+            name="unitCode"
+            render={({ field }) => (
+              <FormItem className="px-1">
+                <FormControl>
+                  <Input placeholder="ENG...." {...field} className="text-sm md:text-base" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="creditPoints"
+            render={({ field }) => (
+              <FormItem className="px-1">
+                <FormControl>
+                  <Input 
+                    type="number" 
+                    {...field}
+                    onChange={e => field.onChange(Number(e.target.value))}
+                    className="text-sm md:text-base" 
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="mark"
+            render={({ field }) => (
+              <FormItem className="px-1">
+                <FormControl>
+                <Input 
+                  type="number" 
+                  {...field}
+                  onChange={e => field.onChange(Number(e.target.value))}
+                  className="text-sm md:text-base" 
+                />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="grade"
+            render={({ field }) => (
+              <FormItem className="px-1">
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger className="text-sm md:text-base">
+                      <SelectValue />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="HD">HD</SelectItem>
+                    <SelectItem value="D">D</SelectItem>
+                    <SelectItem value="C">C</SelectItem>
+                    <SelectItem value="P">P</SelectItem>
+                    <SelectItem value="N">N</SelectItem>
+                    <SelectItem value="NH">NH</SelectItem>
+                    <SelectItem value="NSR">NSR</SelectItem>
+                    <SelectItem value="SFR">SFR</SelectItem>
+                    <SelectItem value="WN">WN</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormItem>
+            )}
+          />
+          <Button 
+            type="button" 
+            variant="ghost" 
+            onClick={onDelete}
+            className="h-8 px-2 md:h-10 md:px-3"
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}

src/components/results/result-table.tsx

@@ -0,0 +1,36 @@
+import { ResultFormRow } from "@/components/results/result-form-row"
+import { Result } from "@/schemas/result-schema"
+
+interface ResultTableProps {
+  data: Result[]
+  onResultUpdate: (index: number, values: Result) => void
+  onResultDelete: (index: number) => void
+}
+
+export function ResultTable({ data, onResultUpdate, onResultDelete }: ResultTableProps) {
+  return (
+    <div className="relative w-full overflow-auto">
+      <div className="w-full border rounded-md">
+        <div className="h-10 md:h-12 border-b">
+          <div className="grid grid-cols-[2fr,1fr,1fr,1fr,auto] px-1 md:px-2 h-full items-center">
+            <div className="px-2 text-sm md:text-base font-medium text-muted-foreground">Unit Code</div>
+            <div className="px-2 text-sm md:text-base font-medium text-muted-foreground">Credit <span className="hidden md:inline">Points</span></div>
+            <div className="px-2 text-sm md:text-base font-medium text-muted-foreground">Mark</div>
+            <div className="px-2 text-sm md:text-base font-medium text-muted-foreground">Grade</div>
+            <div className="px-2 w-8 md:w-10"></div>
+          </div>
+        </div>
+        <div className="[&>*:last-child]:border-0">
+          {data.map((result) => (
+            <ResultFormRow
+              key={result.id}
+              defaultValues={result}
+              onChange={(values) => onResultUpdate(result.id, values)}
+              onDelete={() => onResultDelete(result.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/lib/calculate.ts

@@ -1,4 +1,4 @@
-import { Result } from "@/components/results/columns"
+import { Result } from "@/schemas/result-schema"
 
 function calculateWAM(results: Result[]): number {
   const excludedGrades = [