Merge pull request #94 from DemocracyDevelopers/feature/sample-dashbo…

…ard-page

Feature/sample dashboard page

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

@@ -0,0 +1,57 @@
+import { useState } from "react";
+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 [isTooltipVisible, setTooltipVisible] = useState(false);
+
+  return (
+    <span
+      className="ml-2 relative"
+      onMouseEnter={() => setTooltipVisible(true)}
+      onMouseLeave={() => setTooltipVisible(true)} // Keep tooltip open
+    >
+      {/* Information Icon */}
+      <FaInfoCircle className="text-black cursor-pointer" size={18} />
+
+      {/* Tooltip Box */}
+      {isTooltipVisible && (
+        <div className="absolute bg-white text-black text-sm rounded-lg shadow-lg py-3 px-5 left-full ml-2 w-64">
+          <div className="font-bold mb-2">{title}</div>
+          <div className="font-normal">
+            {description}{" "}
+            <Link
+              href="/tutorial"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-500 hover:underline"
+            >
+              Tutorial
+            </Link>
+            .
+          </div>
+          <button
+            className="mt-4 text-gray-500 hover:text-gray-700"
+            onClick={() => setTooltipVisible(false)}
+          >
+            Hide
+          </button>
+        </div>
+      )}
+    </span>
+  );
+};
+
+export default TooltipWithIcon;

app/dashboard/components/AssertionsDetailsModal.tsx → app/dashboard/components/assertions-details-modal.tsx

@@ -1,5 +1,8 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Avatar } from "@/components/ui/avatar";
+import { FaInfoCircle } from "react-icons/fa";
+import Link from "next/link";
+import TooltipWithIcon from "@/app/dashboard/components/Information-icon-text";
 
 // 更新 Assertion 接口，添加 candidateId 字段
 interface Assertion {
@@ -26,6 +29,7 @@ const AssertionsDetailsModal: React.FC<AssertionsDetailsModalProps> = ({
   maxDifficulty,
   minMargin,
 }) => {
+  const [isTooltipVisible, setTooltipVisible] = useState(false);
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
@@ -61,7 +65,15 @@ const AssertionsDetailsModal: React.FC<AssertionsDetailsModalProps> = ({
           </svg>
         </button>
 
-        <h2 className="text-2xl font-bold mb-4">Assertions Details</h2>
+        <h2 className="text-2xl font-bold mb-4 flex items-center relative">
+          Assertions Details
+          <TooltipWithIcon
+            title="Need Help?"
+            description="For detailed guidance on understanding the assertion attributes, please refer to our"
+            linkText="Tutorial"
+            linkHref="/tutorial"
+          />
+        </h2>
         <div className="mb-4">
           <p className="text-gray-700 font-bold">
             <span className="font-semibold">Maximum Difficulty:</span>{" "}

app/dashboard/components/AvatarAssignColor.tsx → app/dashboard/components/avatar-assign-color.tsx

@@ -1,4 +1,4 @@
-//AvatarAssignColor.tsx
+//avatar-assign-color.tsx
 import React, { useEffect, useMemo, useState } from "react";
 import useMultiWinnerDataStore from "@/store/MultiWinnerData";
 import { AvatarColor } from "@/utils/avatarColor";

app/dashboard/components/elimination-tree/demo.ts

@@ -1,4 +1,4 @@
-import { TreeNode } from "@/components/Tree/helper";
+import { TreeNode } from "@/components/tree/helper";
 
 type demoType = {
   winnerInfo: {

app/dashboard/components/elimination-tree/index.tsx

@@ -3,11 +3,12 @@ import CandidateListBar from "@/app/dashboard/components/elimination-tree/candid
 import Dropdown from "@/app/dashboard/components/elimination-tree/dropdown";
 import StepByStep from "@/app/dashboard/components/elimination-tree/step-by-step";
 // import { demoFromCore } from "@/app/dashboard/components/elimination-tree/demo";
-import Tree from "@/components/Tree";
+import Tree from "../../../../components/tree";
 import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import useMultiWinnerDataStore from "@/store/MultiWinnerData";
+import TooltipWithIcon from "@/app/dashboard/components/Information-icon-text";
 
 function EliminationTree() {
   const { multiWinner } = useMultiWinnerDataStore();
@@ -81,8 +82,18 @@ function EliminationTree() {
 
   return (
     <div className="border border-gray-300 rounded-lg p-6 h-auto flex flex-col justify-between pl-10">
-      <div className="flex justify-between">
-        <h3 className="text-2xl font-bold">Elimination Tree</h3>
+      <div className="flex items-center justify-between">
+        {/* Elimination Tree title and Tooltip with Icon */}
+        <div className="flex items-center">
+          <h3 className="text-2xl font-bold">Elimination Tree</h3>
+          <TooltipWithIcon
+            title="Need Help?"
+            description="For detailed guidance on the elimination tree process, please refer to our"
+            linkText="Tutorial"
+            linkHref="/tutorial"
+          />
+        </div>
+
         <Dropdown />
       </div>
       <div>

app/dashboard/page.tsx

@@ -1,15 +1,15 @@
 "use client";
 import React, { useState } from "react";
 import Card from "./components/card";
-import AssertionTable from "./components/assertionTable";
-import AssertionsDetailsModal from "./components/AssertionsDetailsModal";
+import AssertionTable from "./components/assertion-table";
+import AssertionsDetailsModal from "./components/assertions-details-modal";
 import { FaUserFriends, FaTrophy, FaList } from "react-icons/fa";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { ChevronRight, FilePenLine } from "lucide-react";
 
 import EliminationTree from "./components/elimination-tree";
-import AvatarAssignColor from "./components/AvatarAssignColor"; // 引入 Avatar 组件
+import AvatarAssignColor from "./components/avatar-assign-color"; // 引入 Avatar 组件
 import useMultiWinnerDataStore from "@/store/MultiWinnerData";
 import multiWinnerData from "@/store/MultiWinnerData"; // 引入 zustand store
 

app/explain-assertions/components/DescribeRaireResult.tsx → app/explain-assertions/components/describe-raire-result.tsx

@@ -1,4 +1,4 @@
-// components/DescribeRaireResult.tsx
+// components/describe-raire-result.tsx
 
 import React from "react";
 import {

app/explain-assertions/page.tsx

@@ -2,7 +2,7 @@
 // pages/explain-assertions.tsx
 
 import React, { useState } from "react";
-import { explainAssertions } from "./components/explain_process";
+import { explainAssertions } from "./components/explain-process";
 
 const ExplainAssertionsPage = () => {
   const [inputText, setInputText] = useState("");

app/sample/components/sampleSelector.tsx → app/sample/components/sample-selector.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Image from "next/image";
 import useMultiWinnerDataStore from "../../../store/MultiWinnerData";
 import { AvatarColor } from "@/utils/avatarColor";
-import { explainAssertions } from "../../explain-assertions/components/explain_process";
+import { explainAssertions } from "../../explain-assertions/components/explain-process";
 import { useRouter } from "next/navigation";
 
 type SampleFile = {

app/sample/page.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import React from "react";
-import SampleSelector from "./components/sampleSelector";
+import SampleSelector from "./components/sample-selector";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import TermsAndPrivacy from "@/app/upload/components/terms-and-privacy";
+import TutorialLink from "@/app/upload/components/tutorial-link";
 
 const Sample = () => {
   const router = useRouter();
@@ -21,6 +23,7 @@ const Sample = () => {
         </div>
         <div className="border border-gray-300 shadow-md rounded-lg p-6 flex flex-col flex-grow">
           <SampleSelector />
+          <TermsAndPrivacy />
         </div>
         <div className="mt-8">
           <button
@@ -30,25 +33,7 @@ const Sample = () => {
             ← Back
           </button>
         </div>
-
-        <p className="text-sm text-gray-500 text-center mt-4">
-          By sharing your files or using our service, you agree to our{" "}
-          <Link href="#" className="underline hover:text-gray-800">
-            Terms of Service
-          </Link>{" "}
-          and{" "}
-          <Link href="#" className="underline hover:text-gray-800">
-            Privacy Policy
-          </Link>
-          .
-        </p>
-        <p className="text-center text-lg text-gray-600 my-4">
-          Need help? Click{" "}
-          <Link href="/tutorial" className="text-blue-600 hover:underline">
-            here
-          </Link>{" "}
-          for a tutorial.
-        </p>
+        <TutorialLink linkText="here" linkHref="/tutorial" />
       </main>
     </div>
   );

app/tutorial/assertion/page.tsx

@@ -2,7 +2,7 @@
 "use client";
 
 import React, { useState } from "react";
-import AssertionContent from "../components/AssertionContent"; // Adjust the path if necessary
+import AssertionContent from "../components/assertion-content"; // Adjust the path if necessary
 import SidebarWithSearch from "../components/SidebarWithSearch"; // Import the SidebarWithSearch component
 
 const AssertionPage: React.FC = () => {

app/tutorial/components/SidebarWithSearch.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { contentData } from "./dataContent";
+import { contentData } from "./data-content";
 
 // 定义Props类型
 interface SidebarProps {

app/tutorial/components/dataContent.js → app/tutorial/components/data-content.js

@@ -1,4 +1,4 @@
-// app/tutorial/components/dataContent.js
+// app/tutorial/components/data-content.js
 
 export const contentData = [
   {

app/tutorial/components/TutorialContent.tsx → app/tutorial/components/tutorial-content.tsx

@@ -1,4 +1,4 @@
-// components/TutorialContent.tsx
+// components/tutorial-content.tsx
 
 import React from "react";
 import Link from "next/link";

app/tutorial/components/UsingAssertionsContent.tsx → app/tutorial/components/using-assertions-content.tsx

@@ -1,4 +1,4 @@
-// tutorial/components/UsingAssertionsContent.tsx
+// tutorial/components/using-assertions-content.tsx
 
 import React from "react";
 import Link from "next/link";

app/tutorial/introduction/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
-import IntroductionContent from "../components/IntroductionContent";
+import IntroductionContent from "../components/introduction-content";
 import SidebarWithSearch from "../components/SidebarWithSearch";
 
 const IntroductionPage: React.FC = () => {

app/tutorial/outcomes/page.tsx

@@ -2,7 +2,7 @@
 "use client";
 
 import React, { useState } from "react";
-import OutcomesContent from "../components/OutcomesContent"; // Adjust the import path as needed
+import OutcomesContent from "../components/outcomes-content"; // Adjust the import path as needed
 import SidebarWithSearch from "../components/SidebarWithSearch"; // Import the SidebarWithSearch component
 
 const OutcomesPage: React.FC = () => {

app/tutorial/page.tsx

@@ -3,7 +3,7 @@
 "use client";
 
 import React, { useState } from "react";
-import TutorialContent from "./components/TutorialContent";
+import TutorialContent from "./components/tutorial-content";
 import SidebarWithSearch from "./components/SidebarWithSearch";
 
 const Tutorial: React.FC = () => {

app/tutorial/risk/page.tsx

@@ -3,7 +3,7 @@
 "use client";
 
 import React, { useState } from "react";
-import RiskContent from "../components/RiskContent";
+import RiskContent from "../components/risk-content";
 import SidebarWithSearch from "../components/SidebarWithSearch";
 
 const RiskPage: React.FC = () => {

app/tutorial/usingassertion/page.tsx

@@ -3,7 +3,7 @@
 "use client";
 
 import React, { useState } from "react";
-import UsingAssertionsContent from "../components/UsingAssertionsContent";
+import UsingAssertionsContent from "../components/using-assertions-content";
 import SidebarWithSearch from "../components/SidebarWithSearch";
 
 const UsingAssertionsPage: React.FC = () => {

app/upload/components/terms-and-privacy.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+const TermsAndPrivacy: React.FC = () => {
+  return (
+    <p className="text-sm text-gray-500 text-center mt-4">
+      By sharing your files or using our service, you agree to our{" "}
+      <Link href="#" className="underline hover:text-gray-800">
+        Terms of Service
+      </Link>{" "}
+      and{" "}
+      <Link href="#" className="underline hover:text-gray-800">
+        Privacy Policy
+      </Link>
+      .
+    </p>
+  );
+};
+
+export default TermsAndPrivacy;

app/upload/components/tutorial-link.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+
+interface HelpLinkProps {
+  linkText: string;
+  linkHref: string;
+}
+
+const TutorialLink: React.FC<HelpLinkProps> = ({ linkText, linkHref }) => {
+  return (
+    <p className="text-center text-lg text-gray-600 my-4">
+      Need help? Click{" "}
+      <Link href={linkHref} className="text-blue-600 hover:underline">
+        {linkText}
+      </Link>{" "}
+      for a tutorial.
+    </p>
+  );
+};
+
+export default TutorialLink;

app/upload/components/uploader.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { CloudUpload, File, ArrowLeft, Link } from "lucide-react";
-import CustomAlertDialog from "./alertDialog";
+import CustomAlertDialog from "./alert-dialog";
 import UploadProgress from "./progress";
 import useMultiWinnerDataStore from "../../../store/MultiWinnerData";
-import { explainAssertions } from "../../explain-assertions/components/explain_process";
+import { explainAssertions } from "../../explain-assertions/components/explain-process";
 import { useRouter } from "next/navigation";
 import { AvatarColor } from "@/utils/avatarColor";