feat(backend): 管理画面に提出状況詳細画面を実装

frontend/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@monaco-editor/react": "4.6.0",
     "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",

frontend/src/components/ui/label.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    className={cn(labelVariants(), className)}
+    ref={ref}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

frontend/src/components/ui/table.tsx

@@ -0,0 +1,116 @@
+import { cn } from "@/lib/utils"
+import * as React from "react"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      className={cn("w-full caption-bottom text-sm", className)}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead className={cn("[&_tr]:border-b", className)} ref={ref} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    className={cn("[&_tr:last-child]:border-0", className)}
+    ref={ref}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    ref={ref}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    ref={ref}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+}

frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils"
+import * as React from "react"
+
+export type TextareaProps =
+  {} & React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

frontend/src/route-tree.gen.ts

@@ -17,6 +17,7 @@ import { createFileRoute } from "@tanstack/react-router"
 // Import Routes
 
 import { Route as rootRoute } from "./routes/__root"
+import { Route as SubmissionsSubmissionIdRouteImport } from "./routes/submissions/$submissionId/route"
 import { Route as ProblemsProblemIdRouteImport } from "./routes/problems/$problemId/route"
 
 // Create Virtual Routes
@@ -40,6 +41,13 @@ const ProblemsIndexLazyRoute = ProblemsIndexLazyImport.update({
   import("./routes/problems/index.lazy").then((d) => d.Route),
 )
 
+const SubmissionsSubmissionIdRouteRoute =
+  SubmissionsSubmissionIdRouteImport.update({
+    id: "/submissions/$submissionId",
+    path: "/submissions/$submissionId",
+    getParentRoute: () => rootRoute,
+  } as any)
+
 const ProblemsProblemIdRouteRoute = ProblemsProblemIdRouteImport.update({
   id: "/problems/$problemId",
   path: "/problems/$problemId",
@@ -66,6 +74,13 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof ProblemsProblemIdRouteImport
       parentRoute: typeof rootRoute
     }
+    "/submissions/$submissionId": {
+      id: "/submissions/$submissionId"
+      path: "/submissions/$submissionId"
+      fullPath: "/submissions/$submissionId"
+      preLoaderRoute: typeof SubmissionsSubmissionIdRouteImport
+      parentRoute: typeof rootRoute
+    }
     "/problems/": {
       id: "/problems/"
       path: "/problems"
@@ -81,40 +96,54 @@ declare module "@tanstack/react-router" {
 export interface FileRoutesByFullPath {
   "/": typeof IndexLazyRoute
   "/problems/$problemId": typeof ProblemsProblemIdRouteRoute
+  "/submissions/$submissionId": typeof SubmissionsSubmissionIdRouteRoute
   "/problems": typeof ProblemsIndexLazyRoute
 }
 
 export interface FileRoutesByTo {
   "/": typeof IndexLazyRoute
   "/problems/$problemId": typeof ProblemsProblemIdRouteRoute
+  "/submissions/$submissionId": typeof SubmissionsSubmissionIdRouteRoute
   "/problems": typeof ProblemsIndexLazyRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   "/": typeof IndexLazyRoute
   "/problems/$problemId": typeof ProblemsProblemIdRouteRoute
+  "/submissions/$submissionId": typeof SubmissionsSubmissionIdRouteRoute
   "/problems/": typeof ProblemsIndexLazyRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: "/" | "/problems/$problemId" | "/problems"
+  fullPaths:
+    | "/"
+    | "/problems/$problemId"
+    | "/submissions/$submissionId"
+    | "/problems"
   fileRoutesByTo: FileRoutesByTo
-  to: "/" | "/problems/$problemId" | "/problems"
-  id: "__root__" | "/" | "/problems/$problemId" | "/problems/"
+  to: "/" | "/problems/$problemId" | "/submissions/$submissionId" | "/problems"
+  id:
+    | "__root__"
+    | "/"
+    | "/problems/$problemId"
+    | "/submissions/$submissionId"
+    | "/problems/"
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexLazyRoute: typeof IndexLazyRoute
   ProblemsProblemIdRouteRoute: typeof ProblemsProblemIdRouteRoute
+  SubmissionsSubmissionIdRouteRoute: typeof SubmissionsSubmissionIdRouteRoute
   ProblemsIndexLazyRoute: typeof ProblemsIndexLazyRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexLazyRoute: IndexLazyRoute,
   ProblemsProblemIdRouteRoute: ProblemsProblemIdRouteRoute,
+  SubmissionsSubmissionIdRouteRoute: SubmissionsSubmissionIdRouteRoute,
   ProblemsIndexLazyRoute: ProblemsIndexLazyRoute,
 }
 
@@ -130,6 +159,7 @@ export const routeTree = rootRoute
       "children": [
         "/",
         "/problems/$problemId",
+        "/submissions/$submissionId",
         "/problems/"
       ]
     },
@@ -139,6 +169,9 @@ export const routeTree = rootRoute
     "/problems/$problemId": {
       "filePath": "problems/$problemId/route.tsx"
     },
+    "/submissions/$submissionId": {
+      "filePath": "submissions/$submissionId/route.tsx"
+    },
     "/problems/": {
       "filePath": "problems/index.lazy.tsx"
     }