add archived questions view and integrate restore question endpoint

Author: songgthu

backend/question-service/src/controllers/questionController.js

@@ -417,12 +417,12 @@ module.exports = {
     fetchAllQuestions,
     getAllActiveQuestions: async (req, res) => {
         // convenience wrapper
-        req.query.status = 'Active'
-        return fetchAllQuestions(req, res)
+         const newReq = { ...req, query: { ...req.query, status: 'Active' } }
+        return fetchAllQuestions(newReq, res)
     },
     getAllArchivedQuestions: async (req, res) => {
-        req.query.status = 'Archived'
-        return fetchAllQuestions(req, res)
+        const newReq = { ...req, query: { ...req.query, status: 'Archived' } }
+        return fetchAllQuestions(newReq, res)
     },
     pickQuestion,
     getQuestionById,

frontend/src/app/practice/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRouter, useParams } from "next/navigation";
 import dynamic from "next/dynamic";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
@@ -12,6 +12,11 @@ import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { useCollaborationState, useCollaborationActions } from "@/stores/collaboration-store";
 import ProtectedRoute from "@/components/auth/protected-route";
+import { SolutionView } from "@/components/question/solution-view";
+import { Tabs, TabsList, TabsContent, TabsTrigger } from "@/components/ui/tabs";
+import { LanguageSelector } from "@/components/question/language-selector";
+import { Language } from "@/types/solution";
+import { CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 
 const CodeEditorPanel = dynamic(() => import("@/components/practice/code-editor-panel"), {
   ssr: false,
@@ -22,8 +27,9 @@ export default function PracticePage() {
   const router = useRouter();
   const params = useParams();
   const roomId = params?.id as string;
+  const [selectedLang, setSelectedLang] = useState<Language>("Python");
 
-  const { roomDetails, isLoading, error } = useCollaborationState();
+  const { roomDetails, isLoading, error, questionDetails } = useCollaborationState();
   const { fetchRoomDetails, fetchQuestionDetails, reset } = useCollaborationActions();
 
   // Fetch room details on mount
@@ -101,7 +107,31 @@ export default function PracticePage() {
               {/* Left Panel */}
               <ResizablePanel>
                 <div className="h-full overflow-y-auto">
-                  <QuestionPanel />
+                  <Tabs defaultValue="question">
+                    <TabsList className="flex justify-center items-center gap-4 mx-auto w-auto">
+                      <TabsTrigger value="question">Question</TabsTrigger>
+                      <TabsTrigger value="solution">Solution</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="question">
+                      <QuestionPanel />
+                    </TabsContent>
+                    <TabsContent value="solution">
+                      <CardHeader>
+                        <CardTitle>Solutions</CardTitle>
+                        <LanguageSelector selectedLang={selectedLang} onChange={setSelectedLang} />
+                      </CardHeader>
+                      <CardContent>
+                        {questionDetails ? (
+                          <SolutionView
+                            questionId={questionDetails.questionID}
+                            selectedLang={selectedLang}
+                          />
+                        ) : (
+                          <div>Loading question…</div>
+                        )}
+                      </CardContent>
+                    </TabsContent>
+                  </Tabs>
                 </div>
               </ResizablePanel>
 

frontend/src/components/question/columns.tsx

@@ -2,12 +2,12 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 import { Button } from "@/components/ui/button";
-import { Eye, Archive } from "lucide-react";
+import { Eye, Archive, ArchiveRestore } from "lucide-react";
 import { Question } from "@/lib/api-client";
 import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { archiveQuestion } from "@/hooks/use-question";
+import { archiveQuestion, restoreQuestion } from "@/hooks/use-question";
 
 function ActionCell({ question }: { question: Question }) {
   const router = useRouter();
@@ -48,6 +48,28 @@ function ActionCell({ question }: { question: Question }) {
   );
 }
 
+function RestoreActionCell({ question }: { question: Question }) {
+  const handleRestore = () => {
+    restoreQuestion(question._id);
+    window.location.reload();
+  };
+
+  return (
+    <div className="flex space-x-4">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button className="w-15" variant="default" size="sm" onClick={handleRestore}>
+            <ArchiveRestore className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Restore</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
+
 const difficultyOrder: Record<string, number> = {
   Easy: 0,
   Medium: 1,
@@ -103,3 +125,53 @@ export const columns: ColumnDef<Question>[] = [
     cell: ({ row }) => <ActionCell question={row.original} />,
   },
 ];
+
+export const restoreColumns: ColumnDef<Question>[] = [
+  {
+    id: "index",
+    header: "No.",
+    cell: ({ row }) => <span>{row.index + 1}</span>,
+    enableSorting: false,
+    enableHiding: false,
+    size: 50,
+  },
+  {
+    accessorKey: "title",
+    header: "Question Title",
+    enableSorting: true,
+  },
+  {
+    accessorKey: "topic",
+    header: "Topic",
+    enableSorting: true,
+  },
+  {
+    accessorKey: "difficulty",
+    header: "Difficulty",
+    enableSorting: true,
+    sortingFn: (rowA, rowB, columnId) => {
+      const a = String(rowA.getValue(columnId));
+      const b = String(rowB.getValue(columnId));
+      const ai = difficultyOrder[a] ?? Number.POSITIVE_INFINITY;
+      const bi = difficultyOrder[b] ?? Number.POSITIVE_INFINITY;
+      return ai - bi;
+    },
+    cell: ({ getValue }) => {
+      const difficulty = getValue() as Question["difficulty"];
+
+      const colorClass = clsx("px-2 py-1 rounded-full text-center font-medium w-fit", {
+        "bg-green-100 text-green-800": difficulty === "Easy",
+        "bg-yellow-100 text-yellow-800": difficulty === "Medium",
+        "bg-red-100 text-red-800": difficulty === "Hard",
+      });
+
+      return <span className={colorClass}>{difficulty}</span>;
+    },
+  },
+  {
+    accessorKey: "actions",
+    header: "Actions",
+    enableSorting: false,
+    cell: ({ row }) => <RestoreActionCell question={row.original} />,
+  },
+];

frontend/src/components/question/language-selector.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Language } from "@/types/solution";
+
+type SelectLanguageProps = {
+  selectedLang: Language;
+  onChange: (lang: Language) => void;
+};
+
+export function LanguageSelector({ selectedLang, onChange }: SelectLanguageProps) {
+  return (
+    <div className="mt-4 flex items-center gap-3">
+      <Label htmlFor="language-select" className="whitespace-nowrap">
+        Language
+      </Label>
+      <Select value={selectedLang} onValueChange={(v) => onChange(v as Language)}>
+        <SelectTrigger id="language-select" className="w-56">
+          <SelectValue placeholder="Select language" />
+        </SelectTrigger>
+        <SelectContent>
+          {(["JavaScript", "Python", "C++", "Java"] as Language[]).map((lang) => (
+            <SelectItem key={lang} value={lang}>
+              {lang}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}