Release

.gitignore

@@ -36,4 +36,10 @@ yarn-error.log*
 next-env.d.ts
 
 # vscode
-.vscode
+.vscode
+
+# idea
+.idea
+
+# pnpm-lock
+pnpm-lock.yaml

README.md

@@ -5,7 +5,7 @@
 ## Team Member
 
 | Name        | Roles                               |
-|-------------|-------------------------------------|
+| ----------- | ----------------------------------- |
 | Aaron Lee   | Technical Officer/Client Liaison    |
 | Emily Zhang | Project Manager/Front-end Developer |
 | Yilin Lyu   | Scrum Mater/Front-end Developer     |
@@ -19,14 +19,25 @@
 
 # Technologies Used
 
-- react
-- typescript
-- nextjs
-- tailwind css
-- shadcn
-- zustand
-- jest
-- husky
+- React (^18) - JavaScript library for building user interfaces
+- TypeScript (^5) - Typed superset of JavaScript
+- Next.js (14.2.5) - React framework for production applications
+- Tailwind CSS (^3.4.1) - Utility-first CSS framework
+- shadcn/ui - Re-usable components built using Radix UI and Tailwind CSS
+- Zustand (^4.5.4) - Small, fast, and scalable state management
+- Jest (^29.7.0) - JavaScript testing framework
+- Husky (^9.1.4) - Git hooks made easy
+- @mdi/js: ^7.4.47 - Material Design Icons JavaScript library
+- @mdi/react: ^1.6.1 - Material Design Icons React components
+- lucide: ^0.439.0 - Beautiful & consistent icon toolkit
+- lucide-react: ^0.427.0 - Lucide icons for React
+- react-icons: ^5.3.0 - Popular icon libraries for React
+
+Icons
+
+Lucide (lucide ^0.439.0, lucide-react ^0.427.0) - Beautiful & consistent icon toolkit
+MDI (@mdi/js ^7.4.47, @mdi/react ^1.6.1) - Material Design Icons
+React Icons (react-icons ^5.3.0) - Popular icon libraries including support for Iconfont
 
 # Environment and Tools
 

app/ClientTourProvider.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import { TourProvider } from "@reactour/tour";
+import { TourStepWatcher } from "./TourStepWatcher";
+import { TourSyncWatcher } from "./TourSyncWatcher";
+import { CloseTourOnRouteChange } from "@/hooks/CloseTourOnRouteChange";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import { X } from "lucide-react";
+
+interface ClientTourProviderProps {
+  readonly children: React.ReactNode;
+}
+
+/**
+ * ClientTourProvider wraps the application with the Reactour TourProvider.
+ */
+export default function ClientTourProvider({
+  children,
+}: ClientTourProviderProps) {
+  const disableBody = (target: any) => disableBodyScroll(target);
+  const enableBody = (target: any) => enableBodyScroll(target);
+  return (
+    <TourProvider
+      steps={[]}
+      showNavigation={false}
+      showDots={false}
+      disableInteraction={true}
+      disableKeyboardNavigation={["esc", "right", "left"]}
+      onClickClose={({ setIsOpen }) => setIsOpen(false)}
+      onClickMask={() => {}}
+      styles={{
+        popover: (base) => ({ ...base, borderRadius: "12px" }),
+      }}
+      scrollSmooth={true}
+      afterOpen={disableBody}
+      beforeClose={enableBody}
+      components={{
+        Close: ({ onClick }) => (
+          <button
+            onClick={onClick}
+            className="absolute top-2 right-2 text-gray-700 hover:text-gray-900 bg-white rounded-full p-2 shadow-md"
+            aria-label="Close"
+          >
+            <X size={18} />
+          </button>
+        ),
+      }}
+    >
+      <CloseTourOnRouteChange />
+      <TourSyncWatcher />
+      <TourStepWatcher />
+      {children}
+    </TourProvider>
+  );
+}

app/TourStepWatcher.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import { useTour } from "@reactour/tour";
+import { expandTreeLayerByLayer } from "@/utils/treeActions";
+
+/**
+ * Defines side effects associated with specific tour steps.
+ * When a tour step is reached, the corresponding effect (if defined) will be triggered.
+ */
+const stepEffects: Record<number, () => void> = {
+  6: () => {
+    expandTreeLayerByLayer();
+  },
+};
+
+/**
+ * TourStepWatcher
+ * A non-visual component that watches the current tour step and
+ * triggers any side effects mapped in `stepEffects`.
+ */
+export const TourStepWatcher = () => {
+  const { currentStep } = useTour();
+
+  useEffect(() => {
+    const effect = stepEffects[currentStep];
+    if (effect) effect();
+  }, [currentStep]);
+
+  return null;
+};

app/TourSyncWatcher.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useEffect } from "react";
+import { useTour, StepType } from "@reactour/tour";
+import { useFileDataStore } from "@/store/fileData";
+import { getCandidateNumber } from "@/app/explain-assertions/components/explain-process";
+import { getSteps } from "@/app/steps";
+
+export const TourSyncWatcher = () => {
+  const fileData = useFileDataStore((state) => state.fileData);
+  const { setSteps, setCurrentStep } = useTour();
+
+  useEffect(() => {
+    if (!fileData) return;
+
+    const count = getCandidateNumber(fileData);
+    if (typeof count === "number") {
+      const newSteps = getSteps(count);
+      setSteps?.(newSteps as StepType[]);
+      setCurrentStep?.(0); // Reset to the first step
+    }
+  }, [fileData, setSteps]);
+
+  return null;
+};

app/dashboard/components/Information-icon-text.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from "@/components/ui/tooltip";
+import { FaInfoCircle } from "react-icons/fa";
+import Link from "next/link";
+
+interface TooltipWithIconProps {
+  title: string;
+  linkText: string;
+  linkHref: string;
+  description: string;
+}
+
+const TooltipWithIcon: React.FC<TooltipWithIconProps> = ({
+  title,
+  linkText,
+  linkHref,
+  description,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleMouseEnter = () => {
+    setIsOpen(true);
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        disableHoverableContent={false}
+      >
+        <TooltipTrigger asChild>
+          <span
+            className="ml-2 relative"
+            onClick={handleClick}
+            onMouseEnter={handleMouseEnter}
+          >
+            {/* Information Icon */}
+            <FaInfoCircle className="text-primary cursor-pointer" size={18} />
+          </span>
+        </TooltipTrigger>
+
+        <TooltipContent
+          side="right"
+          align="center"
+          className="bg-background text-primary rounded-lg shadow-lg p-4 w-64"
+        >
+          <div className="font-bold mb-2">{title}</div>
+          <div className="font-normal">
+            {description}{" "}
+            <Link
+              href={linkHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-500 hover:underline"
+            >
+              {linkText}
+            </Link>
+            .
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default TooltipWithIcon;

app/dashboard/components/assertion-table.tsx

@@ -0,0 +1,151 @@
+import React, { useState, useRef } from "react";
+import { Avatar } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import AuditProgressAnimation from "./audit-progress-animation";
+
+interface Assertion {
+  index: number;
+  content: string;
+  type: string;
+  winner: number; // It should be the winner's candidate id
+  name: string; // candidate name
+}
+
+interface AssertionTableProps {
+  assertions: Assertion[];
+  winnerName: string;
+  isValid: boolean;
+}
+
+const pageSize = 4;
+
+const AssertionTable: React.FC<AssertionTableProps> = ({
+  assertions,
+  winnerName,
+  isValid,
+}) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = Math.ceil(assertions.length / pageSize);
+  const tableRef = useRef<HTMLDivElement>(null);
+  const paginationRef = useRef<HTMLDivElement>(null);
+
+  const animationSpacerRef = useRef<HTMLDivElement>(null);
+
+  const paged = assertions.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize,
+  );
+
+  const handlePageChange = (page: number) => {
+    if (page >= 1 && page <= totalPages) {
+      setCurrentPage(page);
+      tableRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+
+  const [showAnimation, setShowAnimation] = useState(true);
+
+  return (
+    <div className="flex flex-col h-full">
+      <div ref={tableRef} className="flex-1 overflow-y-auto border rounded-lg">
+        <table className="min-w-full table-auto">
+          <thead className="sticky top-0 bg-background z-10">
+            <tr>
+              <th className="px-4 py-2 border-b">Index</th>
+              <th className="px-4 py-2 border-b">Content</th>
+              <th className="px-4 py-2 border-b">Type</th>
+            </tr>
+          </thead>
+          <tbody>
+            {paged.map((a) => (
+              <tr key={a.index} className="h-[48px]">
+                <td className="px-4 py-2 text-center border-b">{a.index}</td>
+                <td className="px-4 py-2 text-left border-b">
+                  <div className="flex items-center">
+                    <Avatar candidateId={a.winner} className="mr-2" />
+                    <span>{a.content}</span>
+                  </div>
+                </td>
+                <td className="px-4 py-2 text-center border-b">{a.type}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div ref={paginationRef} className="mt-2 pt-2 border-t">
+        <div className="flex justify-center items-center gap-2 flex-wrap">
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={currentPage === 1}
+            onClick={() => handlePageChange(currentPage - 1)}
+          >
+            Prev
+          </Button>
+
+          <div className="flex items-center gap-1 text-sm text-gray-700">
+            Page
+            <select
+              value={currentPage}
+              onChange={(e) => handlePageChange(Number(e.target.value))}
+              className="border border-gray-300 rounded px-2 py-1 text-sm"
+            >
+              {(() => {
+                const rangeSize = 5;
+                const half = Math.floor(rangeSize / 2);
+                let start = Math.max(1, currentPage - half);
+                let end = Math.min(totalPages, start + rangeSize - 1);
+
+                if (end - start + 1 < rangeSize && start > 1) {
+                  start = Math.max(1, end - rangeSize + 1);
+                }
+
+                return Array.from(
+                  { length: end - start + 1 },
+                  (_, i) => start + i,
+                ).map((page) => (
+                  <option key={page} value={page}>
+                    {page}
+                  </option>
+                ));
+              })()}
+            </select>
+            of {totalPages}
+          </div>
+
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={currentPage === totalPages}
+            onClick={() => handlePageChange(currentPage + 1)}
+          >
+            Next
+          </Button>
+        </div>
+
+        {showAnimation && (
+          <div className="mt-2">
+            <AuditProgressAnimation
+              championName={winnerName}
+              isValid={isValid}
+              onClose={() => {
+                setShowAnimation(false);
+                setTimeout(() => {
+                  animationSpacerRef.current?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                  });
+                }, 100);
+              }}
+            />
+          </div>
+        )}
+
+        <div ref={animationSpacerRef} className="h-1" />
+      </div>
+    </div>
+  );
+};
+
+export default AssertionTable;