From 2ed9745e7ed493a4df3610da3298f391a5243a01 Mon Sep 17 00:00:00 2001
From: nikhil <nikhil.core2@gmail.com>
Date: Sun, 27 Oct 2024 19:36:30 +0530
Subject: [PATCH 1/3] Added new Page

---
 src/deda_frontend/components.json             |  20 ++
 src/deda_frontend/package.json                |  19 +-
 src/deda_frontend/src/App.tsx                 |  62 +++---
 src/deda_frontend/src/Pages/Main/MainPage.tsx | 185 ++++++++++++++++++
 .../src/components/AddDataRequest.tsx         |  96 ++++-----
 .../Dashboards/PublisherDashBoard.tsx         |  55 ++++++
 .../Dashboards/ResearcherDashBoard.tsx        |  58 ++++++
 .../Dashboards/ValidatorDashBoard.tsx         |  82 ++++++++
 .../src/components/DataRequestList.tsx        |  92 ++++-----
 src/deda_frontend/src/components/Login.tsx    | 179 +++++++++--------
 .../src/components/PayContributors.tsx        |  80 ++++----
 .../src/components/StoreCleanedData.tsx       |  96 ++++-----
 .../src/components/SubmitData.tsx             | 114 +++++------
 .../src/components/Tasks/CompletedTasks.tsx   |  20 ++
 .../src/components/VerifyData.tsx             |  96 ++++-----
 .../src/components/ui/button.tsx              |  57 ++++++
 src/deda_frontend/src/components/ui/card.tsx  |  83 ++++++++
 src/deda_frontend/src/components/ui/input.tsx |  25 +++
 .../src/components/ui/scroll-area.tsx         |  46 +++++
 .../src/components/ui/separator.tsx           |  29 +++
 .../src/components/ui/switch.tsx              |  27 +++
 src/deda_frontend/src/components/ui/tabs.tsx  |  53 +++++
 src/deda_frontend/src/index.scss              |  65 +++++-
 src/deda_frontend/src/lib/utils.ts            |   6 +
 src/deda_frontend/tailwind.config.js          |  55 +++++-
 src/deda_frontend/tsconfig.json               |   6 +-
 src/deda_frontend/vite.config.js              |   2 +
 27 files changed, 1292 insertions(+), 416 deletions(-)
 create mode 100644 src/deda_frontend/components.json
 create mode 100644 src/deda_frontend/src/Pages/Main/MainPage.tsx
 create mode 100644 src/deda_frontend/src/components/Dashboards/PublisherDashBoard.tsx
 create mode 100644 src/deda_frontend/src/components/Dashboards/ResearcherDashBoard.tsx
 create mode 100644 src/deda_frontend/src/components/Dashboards/ValidatorDashBoard.tsx
 create mode 100644 src/deda_frontend/src/components/Tasks/CompletedTasks.tsx
 create mode 100644 src/deda_frontend/src/components/ui/button.tsx
 create mode 100644 src/deda_frontend/src/components/ui/card.tsx
 create mode 100644 src/deda_frontend/src/components/ui/input.tsx
 create mode 100644 src/deda_frontend/src/components/ui/scroll-area.tsx
 create mode 100644 src/deda_frontend/src/components/ui/separator.tsx
 create mode 100644 src/deda_frontend/src/components/ui/switch.tsx
 create mode 100644 src/deda_frontend/src/components/ui/tabs.tsx
 create mode 100644 src/deda_frontend/src/lib/utils.ts

diff --git a/src/deda_frontend/components.json b/src/deda_frontend/components.json
new file mode 100644
index 0000000..fb5b4e6
--- /dev/null
+++ b/src/deda_frontend/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.scss",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
\ No newline at end of file
diff --git a/src/deda_frontend/package.json b/src/deda_frontend/package.json
index d17f182..e978069 100644
--- a/src/deda_frontend/package.json
+++ b/src/deda_frontend/package.json
@@ -14,11 +14,22 @@
     "@dfinity/agent": "^1.4.0",
     "@dfinity/candid": "^1.4.0",
     "@dfinity/principal": "^1.4.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
     "axios": "^1.7.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "ic-auth": "^0.9.1",
+    "lucide-react": "^0.453.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@dfinity/auth-client": "^1.4.0",
@@ -27,11 +38,11 @@
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.0.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "dotenv": "^16.4.5",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.47",
     "sass": "^1.63.6",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-plugin-environment": "^1.1.3"
diff --git a/src/deda_frontend/src/App.tsx b/src/deda_frontend/src/App.tsx
index fec003e..515a337 100644
--- a/src/deda_frontend/src/App.tsx
+++ b/src/deda_frontend/src/App.tsx
@@ -1,39 +1,41 @@
-import React from 'react';
-import { RecoilRoot, useRecoilValue } from 'recoil';
-import Login from './components/Login';
-import DataRequestList from './components/DataRequestList';
-import SubmitData from './components/SubmitData';
-import VerifyData from './components/VerifyData';
-import StoreCleanedData from './components/StoreCleanedData';
-import AddDataRequest from './components/AddDataRequest';
-import PayContributors from './components/PayContributors';
+import React from "react";
+import { RecoilRoot, useRecoilValue } from "recoil";
+import MainPage from "./Pages/Main/MainPage";
+// import Login from './components/Login';
+// import DataRequestList from './components/DataRequestList';
+// import SubmitData from './components/SubmitData';
+// import VerifyData from './components/VerifyData';
+// import StoreCleanedData from './components/StoreCleanedData';
+// import AddDataRequest from './components/AddDataRequest';
+// import PayContributors from './components/PayContributors';
 //import './App.css';
-import { userState } from './state/userState';
+// import { userState } from './state/userState';
 
-const AppContent: React.FC = () => {
-  const user = useRecoilValue(userState);
+// const AppContent: React.FC = () => {
+//   const user = useRecoilValue(userState);
 
-  return (
-    <div className="App p-4">
-      <h1 className="text-3xl font-bold mb-6">DeDa - Decentralized Data Marketplace</h1>
-      <Login />
-      {user.role === 'Researcher' && <AddDataRequest />}
-      <DataRequestList />
-      {user.role === 'User' && <SubmitData />}
-      {user.role === 'Validator' && (
-        <>
-          <VerifyData />
-          <StoreCleanedData />
-        </>
-      )}
-      <PayContributors />
-    </div>
-  );
-};
+//   return (
+//     <div className="App p-4">
+//       <h1 className="text-3xl font-bold mb-6">DeDa - Decentralized Data Marketplace</h1>
+//       <Login />
+//       {user.role === 'Researcher' && <AddDataRequest />}
+//       <DataRequestList />
+//       {user.role === 'User' && <SubmitData />}
+//       {user.role === 'Validator' && (
+//         <>
+//           <VerifyData />
+//           <StoreCleanedData />
+//         </>
+//       )}
+//       <PayContributors />
+//     </div>
+//   );
+// };
 
 const App: React.FC = () => (
   <RecoilRoot>
-    <AppContent />
+    {/* <AppContent /> */}
+    <MainPage />
   </RecoilRoot>
 );
 
diff --git a/src/deda_frontend/src/Pages/Main/MainPage.tsx b/src/deda_frontend/src/Pages/Main/MainPage.tsx
new file mode 100644
index 0000000..ced5da2
--- /dev/null
+++ b/src/deda_frontend/src/Pages/Main/MainPage.tsx
@@ -0,0 +1,185 @@
+import React, { useState } from "react";
+import {
+  Bell,
+  ChevronDown,
+  Home,
+  Search,
+  Settings,
+  User,
+  Database,
+  FileCheck,
+  DollarSign,
+} from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { ScrollArea } from "../../components/ui/scroll-area";
+import { Separator } from "../../components/ui/separator";
+import { Switch } from "../../components/ui/switch";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components/ui/tabs";
+import CompletedTasks from "../../components/Tasks/CompletedTasks";
+import ResearcherDashboard from "../../components/Dashboards/ResearcherDashBoard";
+import PublisherDashboard from "../../components/Dashboards/PublisherDashBoard";
+import ValidatorDashboard from "../../components/Dashboards/ValidatorDashBoard";
+
+export default function MainPage() {
+  const [activeRole, setActiveRole] = useState("researcher");
+
+  return (
+    <div className="flex h-screen bg-gradient-to-br from-[#28AAE2] via-[#FAB13B] to-[#682683] text-white">
+      {/* Left Sidebar */}
+      <div className="w-48 bg-black bg-opacity-50 p-4 flex flex-col">
+        <div className="text-2xl font-bold mb-8">DEDA</div>
+        <nav className="space-y-2">
+          <Button
+            variant="ghost"
+            className="w-full justify-start hover:bg-[#28AAE2] hover:text-white transition-colors"
+          >
+            <Home className="mr-2 h-4 w-4" />
+            Dashboard
+          </Button>
+          <Button
+            variant="ghost"
+            className="w-full justify-start hover:bg-[#28AAE2] hover:text-white transition-colors"
+          >
+            <Database className="mr-2 h-4 w-4" />
+            Datasets
+          </Button>
+          <Button
+            variant="ghost"
+            className="w-full justify-start hover:bg-[#28AAE2] hover:text-white transition-colors"
+          >
+            <FileCheck className="mr-2 h-4 w-4" />
+            Validation
+          </Button>
+          <Button
+            variant="ghost"
+            className="w-full justify-start hover:bg-[#28AAE2] hover:text-white transition-colors"
+          >
+            <DollarSign className="mr-2 h-4 w-4" />
+            Rewards
+          </Button>
+        </nav>
+        <div className="mt-auto">
+          <Button
+            variant="ghost"
+            className="w-full justify-start hover:bg-[#28AAE2] hover:text-white transition-colors"
+          >
+            <User className="mr-2 h-4 w-4" />
+            Profile
+          </Button>
+          <Button
+            variant="ghost"
+            className="w-full justify-start hover:bg-[#28AAE2] hover:text-white transition-colors"
+          >
+            <Settings className="mr-2 h-4 w-4" />
+            Settings
+          </Button>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col bg-black bg-opacity-50">
+        {/* Top Bar */}
+        <div className="bg-black bg-opacity-50 p-4 flex items-center justify-between">
+          <div className="flex items-center space-x-4">
+            <Button
+              variant="ghost"
+              onClick={() => setActiveRole("researcher")}
+              className="hover:bg-[#28AAE2] hover:text-white transition-colors"
+            >
+              Researcher
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => setActiveRole("publisher")}
+              className="hover:bg-[#28AAE2] hover:text-white transition-colors"
+            >
+              Publisher
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => setActiveRole("validator")}
+              className="hover:bg-[#28AAE2] hover:text-white transition-colors"
+            >
+              Validator
+            </Button>
+            <Search className="h-5 w-5" />
+          </div>
+          <div className="flex items-center space-x-4">
+            <Bell className="h-5 w-5" />
+            <ChevronDown className="h-5 w-5" />
+          </div>
+        </div>
+
+        {/* Content Area */}
+        <ScrollArea className="flex-1 p-4">
+          <Tabs defaultValue="active" className="w-full">
+            <TabsList className="bg-black bg-opacity-50">
+              <TabsTrigger
+                value="active"
+                className="data-[state=active]:bg-[#28AAE2]"
+              >
+                Active
+              </TabsTrigger>
+              <TabsTrigger
+                value="completed"
+                className="data-[state=active]:bg-[#28AAE2]"
+              >
+                Completed
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="active" className="space-y-4">
+              {activeRole === "researcher" && <ResearcherDashboard />}
+              {activeRole === "publisher" && <PublisherDashboard />}
+              {activeRole === "validator" && <ValidatorDashboard />}
+            </TabsContent>
+            <TabsContent value="completed">
+              <CompletedTasks />
+            </TabsContent>
+          </Tabs>
+        </ScrollArea>
+      </div>
+
+      {/* Right Sidebar */}
+      <div className="w-64 bg-black bg-opacity-50 p-4">
+        <h2 className="text-xl font-bold mb-4">Statistics</h2>
+        <div className="space-y-4">
+          <div className="flex justify-between">
+            <span>Total Datasets</span>
+            <span className="text-[#FAB13B]">1,234</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Active Requests</span>
+            <span className="text-[#F05B24]">56</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Pending Validations</span>
+            <span className="text-[#EC1F79]">23</span>
+          </div>
+        </div>
+        <Separator className="my-4 bg-white bg-opacity-20" />
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span>Notifications</span>
+            <Switch />
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Auto-match Requests</span>
+            <Switch />
+          </div>
+        </div>
+        <Separator className="my-4 bg-white bg-opacity-20" />
+        <h3 className="text-lg font-semibold mb-2">Recent Activity</h3>
+        <div className="space-y-2 text-sm">
+          <p>New dataset submitted for NLP task</p>
+          <p>Validation completed for Image Classification data</p>
+          <p>Reward distributed for Sentiment Analysis contribution</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/deda_frontend/src/components/AddDataRequest.tsx b/src/deda_frontend/src/components/AddDataRequest.tsx
index 86e4870..858e2b4 100644
--- a/src/deda_frontend/src/components/AddDataRequest.tsx
+++ b/src/deda_frontend/src/components/AddDataRequest.tsx
@@ -1,53 +1,53 @@
-import React, { useState } from 'react';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
+// import React, { useState } from 'react';
+// import { Actor, HttpAgent } from '@dfinity/agent';
+// import { idlFactory } from '../../../declarations/deda_backend';
 
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+// const agent = new HttpAgent();
+// agent.fetchRootKey().catch(err => {
+//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
+//   console.error(err);
+// });
+// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
 
-const AddDataRequest: React.FC = () => {
-  const [description, setDescription] = useState<string>('');
-  const [reward, setReward] = useState<string>('');
-  const [response, setResponse] = useState<string>('');
+// const AddDataRequest: React.FC = () => {
+//   const [description, setDescription] = useState<string>('');
+//   const [reward, setReward] = useState<string>('');
+//   const [response, setResponse] = useState<string>('');
 
-  const addDataRequest = async () => {
-    try {
-      const requestId = await backend.add_data_request(description, BigInt(reward));
-      console.log(requestId);
-      setResponse(`Data request added successfully with ID: ${requestId}`);
-    } catch (error) {
-      console.error(error)
-      setResponse('Error adding data request');
-    }
-  };
+//   const addDataRequest = async () => {
+//     try {
+//       const requestId = await backend.add_data_request(description, BigInt(reward));
+//       console.log(requestId);
+//       setResponse(`Data request added successfully with ID: ${requestId}`);
+//     } catch (error) {
+//       console.error(error)
+//       setResponse('Error adding data request');
+//     }
+//   };
 
-  return (
-    <div className="p-4">
-      <h2 className="text-2xl font-bold mb-4">Add Data Request</h2>
-      <input
-        type="text"
-        placeholder="Description"
-        value={description}
-        onChange={(e) => setDescription(e.target.value)}
-        className="p-2 border rounded mb-2"
-      />
-      <input
-        type="number"
-        placeholder="Reward"
-        value={reward}
-        onChange={(e) => setReward(e.target.value)}
-        className="p-2 border rounded mb-2"
-      />
-      <button onClick={addDataRequest} className="px-4 py-2 bg-blue-500 text-white rounded">
-        Add Request
-      </button>
-      {response && <div className="mt-4">{response}</div>}
-    </div>
-  );
-};
+//   return (
+//     <div className="p-4">
+//       <h2 className="text-2xl font-bold mb-4">Add Data Request</h2>
+//       <input
+//         type="text"
+//         placeholder="Description"
+//         value={description}
+//         onChange={(e) => setDescription(e.target.value)}
+//         className="p-2 border rounded mb-2"
+//       />
+//       <input
+//         type="number"
+//         placeholder="Reward"
+//         value={reward}
+//         onChange={(e) => setReward(e.target.value)}
+//         className="p-2 border rounded mb-2"
+//       />
+//       <button onClick={addDataRequest} className="px-4 py-2 bg-blue-500 text-white rounded">
+//         Add Request
+//       </button>
+//       {response && <div className="mt-4">{response}</div>}
+//     </div>
+//   );
+// };
 
-export default AddDataRequest;
+// export default AddDataRequest;
diff --git a/src/deda_frontend/src/components/Dashboards/PublisherDashBoard.tsx b/src/deda_frontend/src/components/Dashboards/PublisherDashBoard.tsx
new file mode 100644
index 0000000..761691c
--- /dev/null
+++ b/src/deda_frontend/src/components/Dashboards/PublisherDashBoard.tsx
@@ -0,0 +1,55 @@
+import { Button } from "../ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+
+function PublisherDashboard() {
+  return (
+    <div className="space-y-4">
+      <Card className="bg-white bg-opacity-50 border-none">
+        <CardHeader>
+          <CardTitle>Available Data Requests</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ul className="space-y-2">
+            <li>
+              <div className="flex justify-between">
+                <span>Large Language Model Training Data</span>
+                <span className="text-[#FAB13B]">50 ICP</span>
+              </div>
+              <Button
+                size="sm"
+                className="mt-2 bg-[#F05B24] hover:bg-[#28AAE2] transition-colors"
+              >
+                Submit Data
+              </Button>
+            </li>
+            <li>
+              <div className="flex justify-between">
+                <span>Computer Vision Dataset</span>
+                <span className="text-[#FAB13B]">30 ICP</span>
+              </div>
+              <Button
+                size="sm"
+                className="mt-2 bg-[#F05B24] hover:bg-[#28AAE2] transition-colors"
+              >
+                Submit Data
+              </Button>
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+      <Card className="bg-white bg-opacity-50 border-none">
+        <CardHeader>
+          <CardTitle>Your Submitted Datasets</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ul className="space-y-2">
+            <li>Sentiment Analysis Corpus - Under Validation</li>
+            <li>Time Series Data - Validated, Reward Pending</li>
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default PublisherDashboard;
diff --git a/src/deda_frontend/src/components/Dashboards/ResearcherDashBoard.tsx b/src/deda_frontend/src/components/Dashboards/ResearcherDashBoard.tsx
new file mode 100644
index 0000000..45252ee
--- /dev/null
+++ b/src/deda_frontend/src/components/Dashboards/ResearcherDashBoard.tsx
@@ -0,0 +1,58 @@
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+
+function ResearcherDashboard() {
+  return (
+    <div className="space-y-4">
+      <Card className="bg-white bg-opacity-50 border-none">
+        <CardHeader>
+          <CardTitle>Request New Dataset</CardTitle>
+          <CardDescription>
+            Specify your data requirements and set a reward
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form className="space-y-4 bg-grey">
+            <Input
+              placeholder="Dataset Title"
+              className="bg-grey bg-opacity-10 border-none"
+            />
+            <Input
+              placeholder="Description"
+              className="bg-grey bg-opacity-10 border-none"
+            />
+            <Input
+              placeholder="Reward Amount (ICP)"
+              type="number"
+              className="bg-grey bg-opacity-10 border-none"
+            />
+            <Button className="bg-[#F05B24] hover:bg-[#28AAE2] transition-colors">
+              Submit Request
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+      <Card className="bg-white bg-opacity-50 border-none">
+        <CardHeader>
+          <CardTitle>Your Active Requests</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ul className="space-y-2">
+            <li>Machine Learning Dataset - Pending Validation</li>
+            <li>NLP Corpus - Data Submitted</li>
+            <li>Image Recognition Set - Awaiting Data</li>
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default ResearcherDashboard;
diff --git a/src/deda_frontend/src/components/Dashboards/ValidatorDashBoard.tsx b/src/deda_frontend/src/components/Dashboards/ValidatorDashBoard.tsx
new file mode 100644
index 0000000..b839e3c
--- /dev/null
+++ b/src/deda_frontend/src/components/Dashboards/ValidatorDashBoard.tsx
@@ -0,0 +1,82 @@
+import { Button } from "../ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+
+function ValidatorDashboard() {
+  return (
+    <div className="space-y-4">
+      <Card className="bg-white bg-opacity-50 border-none">
+        <CardHeader>
+          <CardTitle>Datasets Pending Validation</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ul className="space-y-2">
+            <li>
+              <div>Machine Learning Dataset</div>
+              <div className="flex space-x-2 mt-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="hover:bg-[#28AAE2] hover:text-white transition-colors"
+                >
+                  Review
+                </Button>
+                <Button
+                  size="sm"
+                  className="bg-[#F05B24] hover:bg-[#28AAE2] transition-colors"
+                >
+                  Validate
+                </Button>
+                <Button
+                  size="sm"
+                  variant="destructive"
+                  className="hover:bg-[#28AAE2] transition-colors"
+                >
+                  Reject
+                </Button>
+              </div>
+            </li>
+            <li>
+              <div>NLP Corpus</div>
+              <div className="flex space-x-2 mt-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="hover:bg-[#28AAE2] hover:text-white transition-colors"
+                >
+                  Review
+                </Button>
+                <Button
+                  size="sm"
+                  className="bg-[#F05B24] hover:bg-[#28AAE2] transition-colors"
+                >
+                  Validate
+                </Button>
+                <Button
+                  size="sm"
+                  variant="destructive"
+                  className="hover:bg-[#28AAE2] transition-colors"
+                >
+                  Reject
+                </Button>
+              </div>
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+      <Card className="bg-white bg-opacity-50 border-none">
+        <CardHeader>
+          <CardTitle>Your Validation History</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ul className="space-y-2">
+            <li>Image Recognition Set - Validated</li>
+            <li>Time Series Data - Validated</li>
+            <li>Sentiment Analysis Corpus - Rejected (Low Quality)</li>
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default ValidatorDashboard;
diff --git a/src/deda_frontend/src/components/DataRequestList.tsx b/src/deda_frontend/src/components/DataRequestList.tsx
index f57cb2f..ac1743d 100644
--- a/src/deda_frontend/src/components/DataRequestList.tsx
+++ b/src/deda_frontend/src/components/DataRequestList.tsx
@@ -1,52 +1,52 @@
-import React, { useEffect, useState } from 'react';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
-import { DataRequest } from '../types';
+// import React, { useEffect, useState } from 'react';
+// import { Actor, HttpAgent } from '@dfinity/agent';
+// import { idlFactory } from '../../../declarations/deda_backend';
+// import { DataRequest } from '../types';
 
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
-console.log(backend)
+// const agent = new HttpAgent();
+// agent.fetchRootKey().catch(err => {
+//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
+//   console.error(err);
+// });
+// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+// console.log(backend)
 
-const DataRequestList: React.FC = () => {
-  const [dataRequests, setDataRequests] = useState<DataRequest[]>([]);
+// const DataRequestList: React.FC = () => {
+//   const [dataRequests, setDataRequests] = useState<DataRequest[]>([]);
 
-  useEffect(() => {
-    const fetchDataRequests = async () => {
-      const requests = await backend.get_data_requests() as unknown as DataRequest[];
-      console.log(requests)
-      setDataRequests(requests);
-    };
+//   useEffect(() => {
+//     const fetchDataRequests = async () => {
+//       const requests = await backend.get_data_requests() as unknown as DataRequest[];
+//       console.log(requests)
+//       setDataRequests(requests);
+//     };
 
-    fetchDataRequests();
-  }, []);
+//     fetchDataRequests();
+//   }, []);
 
-  return (
-    <div className="p-4">
-      <h2 className="text-2xl font-bold mb-4">Data Requests</h2>
-      <table className="table-auto w-full border-collapse border border-gray-300">
-        <thead>
-          <tr className="bg-gray-200">
-            <th className="border border-gray-300 px-4 py-2">Request ID</th>
-            <th className="border border-gray-300 px-4 py-2">Description</th>
-            <th className="border border-gray-300 px-4 py-2">Reward</th>
-          </tr>
-        </thead>
-        <tbody>
-          {dataRequests.map((request) => (
-            <tr key={request.id} className="text-left">
-              <td className="border border-gray-300 px-4 py-2">{request.id.toString()}</td>
-              <td className="border border-gray-300 px-4 py-2 whitespace-normal break-words">{request.description}</td>
-              <td className="border border-gray-300 px-4 py-2">{request.reward.toString()}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};
+//   return (
+//     <div className="p-4">
+//       <h2 className="text-2xl font-bold mb-4">Data Requests</h2>
+//       <table className="table-auto w-full border-collapse border border-gray-300">
+//         <thead>
+//           <tr className="bg-gray-200">
+//             <th className="border border-gray-300 px-4 py-2">Request ID</th>
+//             <th className="border border-gray-300 px-4 py-2">Description</th>
+//             <th className="border border-gray-300 px-4 py-2">Reward</th>
+//           </tr>
+//         </thead>
+//         <tbody>
+//           {dataRequests.map((request) => (
+//             <tr key={request.id} className="text-left">
+//               <td className="border border-gray-300 px-4 py-2">{request.id.toString()}</td>
+//               <td className="border border-gray-300 px-4 py-2 whitespace-normal break-words">{request.description}</td>
+//               <td className="border border-gray-300 px-4 py-2">{request.reward.toString()}</td>
+//             </tr>
+//           ))}
+//         </tbody>
+//       </table>
+//     </div>
+//   );
+// };
 
-export default DataRequestList;
+// export default DataRequestList;
diff --git a/src/deda_frontend/src/components/Login.tsx b/src/deda_frontend/src/components/Login.tsx
index 7fc2170..1597907 100644
--- a/src/deda_frontend/src/components/Login.tsx
+++ b/src/deda_frontend/src/components/Login.tsx
@@ -1,96 +1,95 @@
-import React, { useState } from 'react';
-import { useRecoilState } from 'recoil';
-import { userState } from '../state/userState';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory as deda_backend_idl } from '../../../declarations/deda_backend';
-import { Principal } from '@dfinity/principal';
-import { AuthClient } from '@dfinity/auth-client';
+// import React, { useState } from 'react';
+// import { useRecoilState } from 'recoil';
+// import { userState } from '../state/userState';
+// import { Actor, HttpAgent } from '@dfinity/agent';
+// import { idlFactory as deda_backend_idl } from '../../../declarations/deda_backend';
+// import { Principal } from '@dfinity/principal';
+// import { AuthClient } from '@dfinity/auth-client';
 
-const canisterId = process.env.CANISTER_ID_DEDA_BACKEND as string;
+// const canisterId = process.env.CANISTER_ID_DEDA_BACKEND as string;
 
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(deda_backend_idl as any, { agent, canisterId: canisterId });
-console.log(backend);
+// const agent = new HttpAgent();
+// agent.fetchRootKey().catch(err => {
+//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
+//   console.error(err);
+// });
+// const backend = Actor.createActor(deda_backend_idl as any, { agent, canisterId: canisterId });
+// console.log(backend);
 
-const Login: React.FC = () => {
-  const [user, setUser] = useRecoilState(userState);
-  const [loading, setLoading] = useState(false);
-  const [role, setRole] = useState<'User' | 'Validator' | 'Researcher'>('User');
+// const Login: React.FC = () => {
+//   const [user, setUser] = useRecoilState(userState);
+//   const [loading, setLoading] = useState(false);
+//   const [role, setRole] = useState<'User' | 'Validator' | 'Researcher'>('User');
 
-  const login = async () => {
-    setLoading(true);
-    try {
-      console.log('Role: ', role);
-      let authClient = await AuthClient.create({
-        idleOptions: {
-          idleTimeout: 1000 * 60 * 60
-        }
-      });
-      await authClient.login({
-        //identityProvider: `http://127.0.0.1:4943/?canisterId=${process.env.CANISTER_ID_INTERNET_IDENTITY}`,
-        identityProvider: `http://${process.env.CANISTER_ID_INTERNET_IDENTITY}.localhost:4943/`,
-        onSuccess: async() => {
-          console.log("Login successful");
-          const identity = authClient.getIdentity().getPrincipal().toString();  
-          console.log(identity)
-          const principal = Principal.fromText(identity);
-          console.log(principal)
-          try {
-            const balance = (await backend.get_balance(principal)) as unknown as number;
-            console.log(balance)
-            const result = await backend.login(principal, role);
-            console.log(result);
-            setUser({ id: principal, balance, role });
-          } catch (e) {
-            console.error('Error fetching balance or logging in:', e);
-          }
-          
-        },
-      });
-      /*if (await authClient.isAuthenticated()) {
-        
-        
-      }*/
-      /*if ('Err' in result) {
-        throw new Error(result.Err);
-      }*/
-      
-    } catch (err) {
-      console.error('Error logging in:', err);
-    }
-    setLoading(false);
-  };
+//   const login = async () => {
+//     setLoading(true);
+//     try {
+//       console.log('Role: ', role);
+//       let authClient = await AuthClient.create({
+//         idleOptions: {
+//           idleTimeout: 1000 * 60 * 60
+//         }
+//       });
+//       await authClient.login({
+//         //identityProvider: `http://127.0.0.1:4943/?canisterId=${process.env.CANISTER_ID_INTERNET_IDENTITY}`,
+//         identityProvider: `http://${process.env.CANISTER_ID_INTERNET_IDENTITY}.localhost:4943/`,
+//         onSuccess: async() => {
+//           console.log("Login successful");
+//           const identity = authClient.getIdentity().getPrincipal().toString();
+//           console.log(identity)
+//           const principal = Principal.fromText(identity);
+//           console.log(principal)
+//           try {
+//             const balance = (await backend.get_balance(principal)) as unknown as number;
+//             console.log(balance)
+//             const result = await backend.login(principal, role);
+//             console.log(result);
+//             setUser({ id: principal, balance, role });
+//           } catch (e) {
+//             console.error('Error fetching balance or logging in:', e);
+//           }
 
-  return (
-    <div className="p-4">
-      <select 
-        value={role} 
-        onChange={(e) => setRole(e.target.value as 'User' | 'Validator' | 'Researcher')}
-        className="p-2 border rounded mb-2"
-      >
-        <option value="User">User</option>
-        <option value="Validator">Validator</option>
-        <option value="Researcher">Researcher</option>
-      </select>
-      <button 
-        onClick={login} 
-        disabled={loading} 
-        className="px-4 py-2 bg-blue-500 text-white rounded">
-        {loading ? 'Logging in...' : 'Login'}
-      </button>
-      {user.id && (
-        <div className="mt-4">
-          Logged in as: {user.id.toString()} <br />
-          Role: {user.role} <br />
-          Balance: {user.balance.toString()}
-        </div>
-      )}
-    </div>
-  );
-};
+//         },
+//       });
+//       /*if (await authClient.isAuthenticated()) {
 
-export default Login;
+//       }*/
+//       /*if ('Err' in result) {
+//         throw new Error(result.Err);
+//       }*/
+
+//     } catch (err) {
+//       console.error('Error logging in:', err);
+//     }
+//     setLoading(false);
+//   };
+
+//   return (
+//     <div className="p-4">
+//       <select
+//         value={role}
+//         onChange={(e) => setRole(e.target.value as 'User' | 'Validator' | 'Researcher')}
+//         className="p-2 border rounded mb-2"
+//       >
+//         <option value="User">User</option>
+//         <option value="Validator">Validator</option>
+//         <option value="Researcher">Researcher</option>
+//       </select>
+//       <button
+//         onClick={login}
+//         disabled={loading}
+//         className="px-4 py-2 bg-blue-500 text-white rounded">
+//         {loading ? 'Logging in...' : 'Login'}
+//       </button>
+//       {user.id && (
+//         <div className="mt-4">
+//           Logged in as: {user.id.toString()} <br />
+//           Role: {user.role} <br />
+//           Balance: {user.balance.toString()}
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default Login;
diff --git a/src/deda_frontend/src/components/PayContributors.tsx b/src/deda_frontend/src/components/PayContributors.tsx
index a3ed4eb..f200248 100644
--- a/src/deda_frontend/src/components/PayContributors.tsx
+++ b/src/deda_frontend/src/components/PayContributors.tsx
@@ -1,45 +1,45 @@
-import React, { useState } from 'react';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
-import * as dotenv from 'dotenv';
-//dotenv.config()
+// import React, { useState } from 'react';
+// import { Actor, HttpAgent } from '@dfinity/agent';
+// import { idlFactory } from '../../../declarations/deda_backend';
+// // import * as dotenv from 'dotenv';
+// //dotenv.config()
 
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+// const agent = new HttpAgent();
+// agent.fetchRootKey().catch(err => {
+//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
+//   console.error(err);
+// });
+// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
 
-const PayContributors: React.FC = () => {
-  const [submissionId, setSubmissionId] = useState<string>('');
-  const [response, setResponse] = useState<string>('');
+// const PayContributors: React.FC = () => {
+//   const [submissionId, setSubmissionId] = useState<string>('');
+//   const [response, setResponse] = useState<string>('');
 
-  const payContributors = async () => {
-    try {
-      await backend.pay_contributors(Number(submissionId)); // pay_contributors function invoked
-      setResponse('Contributors paid successfully');
-    } catch (error) {
-      setResponse('Error paying contributors');
-    }
-  };
+//   const payContributors = async () => {
+//     try {
+//       await backend.pay_contributors(Number(submissionId)); // pay_contributors function invoked
+//       setResponse('Contributors paid successfully');
+//     } catch (error) {
+//       setResponse('Error paying contributors');
+//     }
+//   };
 
-  return (
-    <div className="p-4">
-      <h2 className="text-2xl font-bold mb-4">Pay Contributors</h2>
-      <input
-        type="number"
-        placeholder="Submission ID"
-        value={submissionId}
-        onChange={(e) => setSubmissionId(e.target.value)}
-        className="p-2 border rounded mb-2"
-      />
-      <button onClick={payContributors} className="px-4 py-2 bg-purple-500 text-white rounded">
-        Pay
-      </button>
-      {response && <div className="mt-4">{response}</div>}
-    </div>
-  );
-};
+//   return (
+//     <div className="p-4">
+//       <h2 className="text-2xl font-bold mb-4">Pay Contributors</h2>
+//       <input
+//         type="number"
+//         placeholder="Submission ID"
+//         value={submissionId}
+//         onChange={(e) => setSubmissionId(e.target.value)}
+//         className="p-2 border rounded mb-2"
+//       />
+//       <button onClick={payContributors} className="px-4 py-2 bg-purple-500 text-white rounded">
+//         Pay
+//       </button>
+//       {response && <div className="mt-4">{response}</div>}
+//     </div>
+//   );
+// };
 
-export default PayContributors;
+// export default PayContributors;
diff --git a/src/deda_frontend/src/components/StoreCleanedData.tsx b/src/deda_frontend/src/components/StoreCleanedData.tsx
index 68b91f1..fb63135 100644
--- a/src/deda_frontend/src/components/StoreCleanedData.tsx
+++ b/src/deda_frontend/src/components/StoreCleanedData.tsx
@@ -1,53 +1,53 @@
-import React, { useState } from 'react';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
-import * as dotenv from 'dotenv';
-//dotenv.config()
+// import React, { useState } from 'react';
+// import { Actor, HttpAgent } from '@dfinity/agent';
+// import { idlFactory } from '../../../declarations/deda_backend';
+// import * as dotenv from 'dotenv';
+// //dotenv.config()
 
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+// const agent = new HttpAgent();
+// agent.fetchRootKey().catch(err => {
+//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
+//   console.error(err);
+// });
+// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
 
-const StoreCleanedData: React.FC = () => {
-  const [requestId, setRequestId] = useState<string>('');
-  const [location, setLocation] = useState<string>('');
-  const [response, setResponse] = useState<string>('');
+// const StoreCleanedData: React.FC = () => {
+//   const [requestId, setRequestId] = useState<string>('');
+//   const [location, setLocation] = useState<string>('');
+//   const [response, setResponse] = useState<string>('');
 
-  const storeCleanedData = async () => {
-    try {
-      await backend.store_cleaned_data(Number(requestId), location);
-      setResponse('Cleaned data stored successfully');
-    } catch (error) {
-      setResponse('Error storing cleaned data');
-    }
-  };
+//   const storeCleanedData = async () => {
+//     try {
+//       await backend.store_cleaned_data(Number(requestId), location);
+//       setResponse('Cleaned data stored successfully');
+//     } catch (error) {
+//       setResponse('Error storing cleaned data');
+//     }
+//   };
 
-  return (
-    <div className="p-4">
-      <h2 className="text-2xl font-bold mb-4">Store Cleaned Data</h2>
-      <input
-        type="number"
-        placeholder="Request ID"
-        value={requestId}
-        onChange={(e) => setRequestId(e.target.value)}
-        className="p-2 border rounded mb-2"
-      />
-      <input
-        type="text"
-        placeholder="Data Location"
-        value={location}
-        onChange={(e) => setLocation(e.target.value)}
-        className="p-2 border rounded mb-2"
-      />
-      <button onClick={storeCleanedData} className="px-4 py-2 bg-green-500 text-white rounded">
-        Store Data
-      </button>
-      {response && <div className="mt-4">{response}</div>}
-    </div>
-  );
-};
+//   return (
+//     <div className="p-4">
+//       <h2 className="text-2xl font-bold mb-4">Store Cleaned Data</h2>
+//       <input
+//         type="number"
+//         placeholder="Request ID"
+//         value={requestId}
+//         onChange={(e) => setRequestId(e.target.value)}
+//         className="p-2 border rounded mb-2"
+//       />
+//       <input
+//         type="text"
+//         placeholder="Data Location"
+//         value={location}
+//         onChange={(e) => setLocation(e.target.value)}
+//         className="p-2 border rounded mb-2"
+//       />
+//       <button onClick={storeCleanedData} className="px-4 py-2 bg-green-500 text-white rounded">
+//         Store Data
+//       </button>
+//       {response && <div className="mt-4">{response}</div>}
+//     </div>
+//   );
+// };
 
-export default StoreCleanedData;
+// export default StoreCleanedData;
diff --git a/src/deda_frontend/src/components/SubmitData.tsx b/src/deda_frontend/src/components/SubmitData.tsx
index 257070b..ff2fb39 100644
--- a/src/deda_frontend/src/components/SubmitData.tsx
+++ b/src/deda_frontend/src/components/SubmitData.tsx
@@ -1,62 +1,62 @@
-import React, { useState } from 'react';
-import { useRecoilValue } from 'recoil';
-import { userState } from '../state/userState';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
+// import React, { useState } from 'react';
+// import { useRecoilValue } from 'recoil';
+// import { userState } from '../state/userState';
+// import { Actor, HttpAgent } from '@dfinity/agent';
+// import { idlFactory } from '../../../declarations/deda_backend';
 
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+// const agent = new HttpAgent();
+// agent.fetchRootKey().catch(err => {
+//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
+//   console.error(err);
+// });
+// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
 
-const SubmitData: React.FC = () => {
-  const user = useRecoilValue(userState);
-  const [requestId, setRequestId] = useState<string>('');
-  const [location, setLocation] = useState<string>('');
-  const [response, setResponse] = useState<string>('');
+// const SubmitData: React.FC = () => {
+//   const user = useRecoilValue(userState);
+//   const [requestId, setRequestId] = useState<string>('');
+//   const [location, setLocation] = useState<string>('');
+//   const [response, setResponse] = useState<string>('');
 
-  const submitData = async () => {
-    try {
-      const principal = user.id;
-      const result: any= await backend.submit_data(principal, Number(requestId), location);
-      console.log(result)
-      if ('Ok' in result) {
-        const submissionId = result.Ok;
-        console.log(submissionId);
-        setResponse(`Data submitted successfully with ID: ${submissionId}`);
-      } else if ('Err' in result) {
-        setResponse(`Error submitting data: ${result.Err}`);
-      }
-    } catch (error) {
-      setResponse('Error submitting data');
-    }
-  };
+//   const submitData = async () => {
+//     try {
+//       const principal = user.id;
+//       const result: any= await backend.submit_data(principal, Number(requestId), location);
+//       console.log(result)
+//       if ('Ok' in result) {
+//         const submissionId = result.Ok;
+//         console.log(submissionId);
+//         setResponse(`Data submitted successfully with ID: ${submissionId}`);
+//       } else if ('Err' in result) {
+//         setResponse(`Error submitting data: ${result.Err}`);
+//       }
+//     } catch (error) {
+//       setResponse('Error submitting data');
+//     }
+//   };
 
-  return (
-    <div className="p-4">
-      <h2 className="text-2xl font-bold mb-4">Submit Data</h2>
-      <input
-        type="number"
-        placeholder="Request ID"
-        value={requestId}
-        onChange={(e) => setRequestId(e.target.value)}
-        className="p-2 border rounded mb-2"
-      />
-      <input
-        type="text"
-        placeholder="Data Location"
-        value={location}
-        onChange={(e) => setLocation(e.target.value)}
-        className="p-2 border rounded mb-2"
-      />
-      <button onClick={submitData} className="px-4 py-2 bg-green-500 text-white rounded">
-        Submit
-      </button>
-      {response && <div className="mt-4">{response}</div>}
-    </div>
-  );
-};
+//   return (
+//     <div className="p-4">
+//       <h2 className="text-2xl font-bold mb-4">Submit Data</h2>
+//       <input
+//         type="number"
+//         placeholder="Request ID"
+//         value={requestId}
+//         onChange={(e) => setRequestId(e.target.value)}
+//         className="p-2 border rounded mb-2"
+//       />
+//       <input
+//         type="text"
+//         placeholder="Data Location"
+//         value={location}
+//         onChange={(e) => setLocation(e.target.value)}
+//         className="p-2 border rounded mb-2"
+//       />
+//       <button onClick={submitData} className="px-4 py-2 bg-green-500 text-white rounded">
+//         Submit
+//       </button>
+//       {response && <div className="mt-4">{response}</div>}
+//     </div>
+//   );
+// };
 
-export default SubmitData;
+// export default SubmitData;
diff --git a/src/deda_frontend/src/components/Tasks/CompletedTasks.tsx b/src/deda_frontend/src/components/Tasks/CompletedTasks.tsx
new file mode 100644
index 0000000..1ec1258
--- /dev/null
+++ b/src/deda_frontend/src/components/Tasks/CompletedTasks.tsx
@@ -0,0 +1,20 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+
+function CompletedTasks() {
+  return (
+    <Card className="bg-black bg-opacity-50 border-none">
+      <CardHeader>
+        <CardTitle>Completed Tasks</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ul className="space-y-2">
+          <li>NLP Dataset - Completed on 2023-10-15</li>
+          <li>Image Classification Data - Completed on 2023-10-10</li>
+          <li>Time Series Analysis Set - Completed on 2023-10-05</li>
+        </ul>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default CompletedTasks;
diff --git a/src/deda_frontend/src/components/VerifyData.tsx b/src/deda_frontend/src/components/VerifyData.tsx
index b77d40f..d052049 100644
--- a/src/deda_frontend/src/components/VerifyData.tsx
+++ b/src/deda_frontend/src/components/VerifyData.tsx
@@ -1,53 +1,53 @@
-import React, { useState } from 'react';
-import { useRecoilValue } from 'recoil';
-import { userState } from '../state/userState';
-import { Actor, HttpAgent } from '@dfinity/agent';
-import { idlFactory } from '../../../declarations/deda_backend';
-import * as dotenv from 'dotenv';
-//dotenv.config()
+// import React, { useState } from 'react';
+// import { useRecoilValue } from 'recoil';
+// import { userState } from '../state/userState';
+// import { Actor, HttpAgent } from '@dfinity/agent';
+// import { idlFactory } from '../../../declarations/deda_backend';
+// import * as dotenv from 'dotenv';
+// //dotenv.config()
 
-const agent = new HttpAgent();
-agent.fetchRootKey().catch(err => {
-  console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-  console.error(err);
-});
-const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+// const agent = new HttpAgent();
+// agent.fetchRootKey().catch(err => {
+//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
+//   console.error(err);
+// });
+// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
 
-const VerifyData: React.FC = () => {
-  const user = useRecoilValue(userState);
-  const [submissionId, setSubmissionId] = useState<string>('');
-  const [response, setResponse] = useState<string>('');
+// const VerifyData: React.FC = () => {
+//   const user = useRecoilValue(userState);
+//   const [submissionId, setSubmissionId] = useState<string>('');
+//   const [response, setResponse] = useState<string>('');
 
-  const verifyData = async () => {
-    try {
-      const principal = user.id;
-      const result: any = await backend.verify_data(principal, Number(submissionId));
-      if ('Ok' in result) {
-        setResponse('Data verified successfully');
-      } else {
-        setResponse('Error verifying data: ' + result.Err);
-      }
-    } catch (error) {
-      setResponse('Error verifying data');
-    }
-  };
+//   const verifyData = async () => {
+//     try {
+//       const principal = user.id;
+//       const result: any = await backend.verify_data(principal, Number(submissionId));
+//       if ('Ok' in result) {
+//         setResponse('Data verified successfully');
+//       } else {
+//         setResponse('Error verifying data: ' + result.Err);
+//       }
+//     } catch (error) {
+//       setResponse('Error verifying data');
+//     }
+//   };
 
-  return (
-    <div className="p-4">
-      <h2 className="text-2xl font-bold mb-4">Verify Data</h2>
-      <input
-        type="number"
-        placeholder="Submission ID"
-        value={submissionId}
-        onChange={(e) => setSubmissionId(e.target.value)}
-        className="p-2 border rounded mb-2"
-      />
-      <button onClick={verifyData} className="px-4 py-2 bg-yellow-500 text-white rounded">
-        Verify
-      </button>
-      {response && <div className="mt-4">{response}</div>}
-    </div>
-  );
-};
+//   return (
+//     <div className="p-4">
+//       <h2 className="text-2xl font-bold mb-4">Verify Data</h2>
+//       <input
+//         type="number"
+//         placeholder="Submission ID"
+//         value={submissionId}
+//         onChange={(e) => setSubmissionId(e.target.value)}
+//         className="p-2 border rounded mb-2"
+//       />
+//       <button onClick={verifyData} className="px-4 py-2 bg-yellow-500 text-white rounded">
+//         Verify
+//       </button>
+//       {response && <div className="mt-4">{response}</div>}
+//     </div>
+//   );
+// };
 
-export default VerifyData;
+// export default VerifyData;
diff --git a/src/deda_frontend/src/components/ui/button.tsx b/src/deda_frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000..385418c
--- /dev/null
+++ b/src/deda_frontend/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/src/deda_frontend/src/components/ui/card.tsx b/src/deda_frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..54b4985
--- /dev/null
+++ b/src/deda_frontend/src/components/ui/card.tsx
@@ -0,0 +1,83 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/src/deda_frontend/src/components/ui/input.tsx b/src/deda_frontend/src/components/ui/input.tsx
new file mode 100644
index 0000000..bfd682c
--- /dev/null
+++ b/src/deda_frontend/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/src/deda_frontend/src/components/ui/scroll-area.tsx b/src/deda_frontend/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..847fca2
--- /dev/null
+++ b/src/deda_frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "../../lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/src/deda_frontend/src/components/ui/separator.tsx b/src/deda_frontend/src/components/ui/separator.tsx
new file mode 100644
index 0000000..e3eb575
--- /dev/null
+++ b/src/deda_frontend/src/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "../../lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/src/deda_frontend/src/components/ui/switch.tsx b/src/deda_frontend/src/components/ui/switch.tsx
new file mode 100644
index 0000000..7614f32
--- /dev/null
+++ b/src/deda_frontend/src/components/ui/switch.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "../../lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/src/deda_frontend/src/components/ui/tabs.tsx b/src/deda_frontend/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..52d563a
--- /dev/null
+++ b/src/deda_frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "../../lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/deda_frontend/src/index.scss b/src/deda_frontend/src/index.scss
index bd6213e..46947be 100644
--- a/src/deda_frontend/src/index.scss
+++ b/src/deda_frontend/src/index.scss
@@ -1,3 +1,66 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
\ No newline at end of file
diff --git a/src/deda_frontend/src/lib/utils.ts b/src/deda_frontend/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/deda_frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/src/deda_frontend/tailwind.config.js b/src/deda_frontend/tailwind.config.js
index 2c0dcca..7ff9e42 100644
--- a/src/deda_frontend/tailwind.config.js
+++ b/src/deda_frontend/tailwind.config.js
@@ -1,7 +1,56 @@
 module.exports = {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+    darkMode: ['class'],
+    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+  	extend: {
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		}
+  	}
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 }
diff --git a/src/deda_frontend/tsconfig.json b/src/deda_frontend/tsconfig.json
index 39a545e..3e3ad29 100644
--- a/src/deda_frontend/tsconfig.json
+++ b/src/deda_frontend/tsconfig.json
@@ -15,7 +15,11 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vite/client"]
+    "types": ["vite/client"],
+     "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }
diff --git a/src/deda_frontend/vite.config.js b/src/deda_frontend/vite.config.js
index 670b034..6d39414 100644
--- a/src/deda_frontend/vite.config.js
+++ b/src/deda_frontend/vite.config.js
@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import environment from 'vite-plugin-environment';
 import dotenv from 'dotenv';
+import path from "path"
 
 dotenv.config({ path: '../../.env' });
 
@@ -34,6 +35,7 @@ export default defineConfig({
     alias: [
       {
         find: "declarations",
+        "@": path.resolve(__dirname, "./src"),
         replacement: fileURLToPath(
           new URL("../declarations", import.meta.url)
         ),

From baab9ea409c2747492b12ea7579a25d6ca68d957 Mon Sep 17 00:00:00 2001
From: nikhil <nikhil.core2@gmail.com>
Date: Sun, 27 Oct 2024 20:15:25 +0530
Subject: [PATCH 2/3] task

---
 src/deda_frontend/src/components/Tasks/CompletedTasks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/deda_frontend/src/components/Tasks/CompletedTasks.tsx b/src/deda_frontend/src/components/Tasks/CompletedTasks.tsx
index 1ec1258..4f251c8 100644
--- a/src/deda_frontend/src/components/Tasks/CompletedTasks.tsx
+++ b/src/deda_frontend/src/components/Tasks/CompletedTasks.tsx
@@ -2,7 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
 
 function CompletedTasks() {
   return (
-    <Card className="bg-black bg-opacity-50 border-none">
+    <Card className="bg-white bg-opacity-50 border-none">
       <CardHeader>
         <CardTitle>Completed Tasks</CardTitle>
       </CardHeader>

From 0113b19eb13455f22d264049afe9ca9fcca43262 Mon Sep 17 00:00:00 2001
From: nikhil <nikhil.core2@gmail.com>
Date: Sun, 10 Nov 2024 16:06:49 +0530
Subject: [PATCH 3/3] update: uncomment

---
 src/deda_frontend/src/App.tsx                 |  58 +++---
 .../src/components/AddDataRequest.tsx         | 107 +++++-----
 .../src/components/DataRequestList.tsx        | 104 +++++-----
 src/deda_frontend/src/components/Login.tsx    | 184 +++++++++---------
 .../src/components/PayContributors.tsx        |  88 +++++----
 .../src/components/StoreCleanedData.tsx       | 104 +++++-----
 .../src/components/SubmitData.tsx             | 126 ++++++------
 .../src/components/VerifyData.tsx             | 107 +++++-----
 8 files changed, 475 insertions(+), 403 deletions(-)

diff --git a/src/deda_frontend/src/App.tsx b/src/deda_frontend/src/App.tsx
index 515a337..cea524a 100644
--- a/src/deda_frontend/src/App.tsx
+++ b/src/deda_frontend/src/App.tsx
@@ -1,36 +1,38 @@
 import React from "react";
 import { RecoilRoot, useRecoilValue } from "recoil";
 import MainPage from "./Pages/Main/MainPage";
-// import Login from './components/Login';
-// import DataRequestList from './components/DataRequestList';
-// import SubmitData from './components/SubmitData';
-// import VerifyData from './components/VerifyData';
-// import StoreCleanedData from './components/StoreCleanedData';
-// import AddDataRequest from './components/AddDataRequest';
-// import PayContributors from './components/PayContributors';
-//import './App.css';
-// import { userState } from './state/userState';
+import Login from "./components/Login";
+import DataRequestList from "./components/DataRequestList";
+import SubmitData from "./components/SubmitData";
+import VerifyData from "./components/VerifyData";
+import StoreCleanedData from "./components/StoreCleanedData";
+import AddDataRequest from "./components/AddDataRequest";
+import PayContributors from "./components/PayContributors";
+import "./App.css";
+import { userState } from "./state/userState";
 
-// const AppContent: React.FC = () => {
-//   const user = useRecoilValue(userState);
+const AppContent: React.FC = () => {
+  const user = useRecoilValue(userState);
 
-//   return (
-//     <div className="App p-4">
-//       <h1 className="text-3xl font-bold mb-6">DeDa - Decentralized Data Marketplace</h1>
-//       <Login />
-//       {user.role === 'Researcher' && <AddDataRequest />}
-//       <DataRequestList />
-//       {user.role === 'User' && <SubmitData />}
-//       {user.role === 'Validator' && (
-//         <>
-//           <VerifyData />
-//           <StoreCleanedData />
-//         </>
-//       )}
-//       <PayContributors />
-//     </div>
-//   );
-// };
+  return (
+    <div className="App p-4">
+      <h1 className="text-3xl font-bold mb-6">
+        DeDa - Decentralized Data Marketplace
+      </h1>
+      <Login />
+      {user.role === "Researcher" && <AddDataRequest />}
+      <DataRequestList />
+      {user.role === "User" && <SubmitData />}
+      {user.role === "Validator" && (
+        <>
+          <VerifyData />
+          <StoreCleanedData />
+        </>
+      )}
+      <PayContributors />
+    </div>
+  );
+};
 
 const App: React.FC = () => (
   <RecoilRoot>
diff --git a/src/deda_frontend/src/components/AddDataRequest.tsx b/src/deda_frontend/src/components/AddDataRequest.tsx
index 858e2b4..2c5c19b 100644
--- a/src/deda_frontend/src/components/AddDataRequest.tsx
+++ b/src/deda_frontend/src/components/AddDataRequest.tsx
@@ -1,53 +1,64 @@
-// import React, { useState } from 'react';
-// import { Actor, HttpAgent } from '@dfinity/agent';
-// import { idlFactory } from '../../../declarations/deda_backend';
+import React, { useState } from "react";
+import { Actor, HttpAgent } from "@dfinity/agent";
+import { idlFactory } from "../../../declarations/deda_backend";
 
-// const agent = new HttpAgent();
-// agent.fetchRootKey().catch(err => {
-//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-//   console.error(err);
-// });
-// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+const agent = new HttpAgent();
+agent.fetchRootKey().catch((err) => {
+  console.warn(
+    "Unable to fetch root key. Check to ensure that your local replica is running"
+  );
+  console.error(err);
+});
+const backend = Actor.createActor(idlFactory as any, {
+  agent,
+  canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string,
+});
 
-// const AddDataRequest: React.FC = () => {
-//   const [description, setDescription] = useState<string>('');
-//   const [reward, setReward] = useState<string>('');
-//   const [response, setResponse] = useState<string>('');
+const AddDataRequest: React.FC = () => {
+  const [description, setDescription] = useState<string>("");
+  const [reward, setReward] = useState<string>("");
+  const [response, setResponse] = useState<string>("");
 
-//   const addDataRequest = async () => {
-//     try {
-//       const requestId = await backend.add_data_request(description, BigInt(reward));
-//       console.log(requestId);
-//       setResponse(`Data request added successfully with ID: ${requestId}`);
-//     } catch (error) {
-//       console.error(error)
-//       setResponse('Error adding data request');
-//     }
-//   };
+  const addDataRequest = async () => {
+    try {
+      const requestId = await backend.add_data_request(
+        description,
+        BigInt(reward)
+      );
+      console.log(requestId);
+      setResponse(`Data request added successfully with ID: ${requestId}`);
+    } catch (error) {
+      console.error(error);
+      setResponse("Error adding data request");
+    }
+  };
 
-//   return (
-//     <div className="p-4">
-//       <h2 className="text-2xl font-bold mb-4">Add Data Request</h2>
-//       <input
-//         type="text"
-//         placeholder="Description"
-//         value={description}
-//         onChange={(e) => setDescription(e.target.value)}
-//         className="p-2 border rounded mb-2"
-//       />
-//       <input
-//         type="number"
-//         placeholder="Reward"
-//         value={reward}
-//         onChange={(e) => setReward(e.target.value)}
-//         className="p-2 border rounded mb-2"
-//       />
-//       <button onClick={addDataRequest} className="px-4 py-2 bg-blue-500 text-white rounded">
-//         Add Request
-//       </button>
-//       {response && <div className="mt-4">{response}</div>}
-//     </div>
-//   );
-// };
+  return (
+    <div className="p-4">
+      <h2 className="text-2xl font-bold mb-4">Add Data Request</h2>
+      <input
+        type="text"
+        placeholder="Description"
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        className="p-2 border rounded mb-2"
+      />
+      <input
+        type="number"
+        placeholder="Reward"
+        value={reward}
+        onChange={(e) => setReward(e.target.value)}
+        className="p-2 border rounded mb-2"
+      />
+      <button
+        onClick={addDataRequest}
+        className="px-4 py-2 bg-blue-500 text-white rounded"
+      >
+        Add Request
+      </button>
+      {response && <div className="mt-4">{response}</div>}
+    </div>
+  );
+};
 
-// export default AddDataRequest;
+export default AddDataRequest;
diff --git a/src/deda_frontend/src/components/DataRequestList.tsx b/src/deda_frontend/src/components/DataRequestList.tsx
index ac1743d..5687cd9 100644
--- a/src/deda_frontend/src/components/DataRequestList.tsx
+++ b/src/deda_frontend/src/components/DataRequestList.tsx
@@ -1,52 +1,64 @@
-// import React, { useEffect, useState } from 'react';
-// import { Actor, HttpAgent } from '@dfinity/agent';
-// import { idlFactory } from '../../../declarations/deda_backend';
-// import { DataRequest } from '../types';
+import React, { useEffect, useState } from "react";
+import { Actor, HttpAgent } from "@dfinity/agent";
+import { idlFactory } from "../../../declarations/deda_backend";
+import { DataRequest } from "../types";
 
-// const agent = new HttpAgent();
-// agent.fetchRootKey().catch(err => {
-//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-//   console.error(err);
-// });
-// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
-// console.log(backend)
+const agent = new HttpAgent();
+agent.fetchRootKey().catch((err) => {
+  console.warn(
+    "Unable to fetch root key. Check to ensure that your local replica is running"
+  );
+  console.error(err);
+});
+const backend = Actor.createActor(idlFactory as any, {
+  agent,
+  canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string,
+});
+console.log(backend);
 
-// const DataRequestList: React.FC = () => {
-//   const [dataRequests, setDataRequests] = useState<DataRequest[]>([]);
+const DataRequestList: React.FC = () => {
+  const [dataRequests, setDataRequests] = useState<DataRequest[]>([]);
 
-//   useEffect(() => {
-//     const fetchDataRequests = async () => {
-//       const requests = await backend.get_data_requests() as unknown as DataRequest[];
-//       console.log(requests)
-//       setDataRequests(requests);
-//     };
+  useEffect(() => {
+    const fetchDataRequests = async () => {
+      const requests =
+        (await backend.get_data_requests()) as unknown as DataRequest[];
+      console.log(requests);
+      setDataRequests(requests);
+    };
 
-//     fetchDataRequests();
-//   }, []);
+    fetchDataRequests();
+  }, []);
 
-//   return (
-//     <div className="p-4">
-//       <h2 className="text-2xl font-bold mb-4">Data Requests</h2>
-//       <table className="table-auto w-full border-collapse border border-gray-300">
-//         <thead>
-//           <tr className="bg-gray-200">
-//             <th className="border border-gray-300 px-4 py-2">Request ID</th>
-//             <th className="border border-gray-300 px-4 py-2">Description</th>
-//             <th className="border border-gray-300 px-4 py-2">Reward</th>
-//           </tr>
-//         </thead>
-//         <tbody>
-//           {dataRequests.map((request) => (
-//             <tr key={request.id} className="text-left">
-//               <td className="border border-gray-300 px-4 py-2">{request.id.toString()}</td>
-//               <td className="border border-gray-300 px-4 py-2 whitespace-normal break-words">{request.description}</td>
-//               <td className="border border-gray-300 px-4 py-2">{request.reward.toString()}</td>
-//             </tr>
-//           ))}
-//         </tbody>
-//       </table>
-//     </div>
-//   );
-// };
+  return (
+    <div className="p-4">
+      <h2 className="text-2xl font-bold mb-4">Data Requests</h2>
+      <table className="table-auto w-full border-collapse border border-gray-300">
+        <thead>
+          <tr className="bg-gray-200">
+            <th className="border border-gray-300 px-4 py-2">Request ID</th>
+            <th className="border border-gray-300 px-4 py-2">Description</th>
+            <th className="border border-gray-300 px-4 py-2">Reward</th>
+          </tr>
+        </thead>
+        <tbody>
+          {dataRequests.map((request) => (
+            <tr key={request.id} className="text-left">
+              <td className="border border-gray-300 px-4 py-2">
+                {request.id.toString()}
+              </td>
+              <td className="border border-gray-300 px-4 py-2 whitespace-normal break-words">
+                {request.description}
+              </td>
+              <td className="border border-gray-300 px-4 py-2">
+                {request.reward.toString()}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
 
-// export default DataRequestList;
+export default DataRequestList;
diff --git a/src/deda_frontend/src/components/Login.tsx b/src/deda_frontend/src/components/Login.tsx
index 1597907..42cac12 100644
--- a/src/deda_frontend/src/components/Login.tsx
+++ b/src/deda_frontend/src/components/Login.tsx
@@ -1,95 +1,103 @@
-// import React, { useState } from 'react';
-// import { useRecoilState } from 'recoil';
-// import { userState } from '../state/userState';
-// import { Actor, HttpAgent } from '@dfinity/agent';
-// import { idlFactory as deda_backend_idl } from '../../../declarations/deda_backend';
-// import { Principal } from '@dfinity/principal';
-// import { AuthClient } from '@dfinity/auth-client';
+import React, { useState } from "react";
+import { useRecoilState } from "recoil";
+import { userState } from "../state/userState";
+import { Actor, HttpAgent } from "@dfinity/agent";
+import { idlFactory as deda_backend_idl } from "../../../declarations/deda_backend";
+import { Principal } from "@dfinity/principal";
+import { AuthClient } from "@dfinity/auth-client";
 
-// const canisterId = process.env.CANISTER_ID_DEDA_BACKEND as string;
+const canisterId = process.env.CANISTER_ID_DEDA_BACKEND as string;
 
-// const agent = new HttpAgent();
-// agent.fetchRootKey().catch(err => {
-//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-//   console.error(err);
-// });
-// const backend = Actor.createActor(deda_backend_idl as any, { agent, canisterId: canisterId });
-// console.log(backend);
+const agent = new HttpAgent();
+agent.fetchRootKey().catch((err) => {
+  console.warn(
+    "Unable to fetch root key. Check to ensure that your local replica is running"
+  );
+  console.error(err);
+});
+const backend = Actor.createActor(deda_backend_idl as any, {
+  agent,
+  canisterId: canisterId,
+});
+console.log(backend);
 
-// const Login: React.FC = () => {
-//   const [user, setUser] = useRecoilState(userState);
-//   const [loading, setLoading] = useState(false);
-//   const [role, setRole] = useState<'User' | 'Validator' | 'Researcher'>('User');
+const Login: React.FC = () => {
+  const [user, setUser] = useRecoilState(userState);
+  const [loading, setLoading] = useState(false);
+  const [role, setRole] = useState<"User" | "Validator" | "Researcher">("User");
 
-//   const login = async () => {
-//     setLoading(true);
-//     try {
-//       console.log('Role: ', role);
-//       let authClient = await AuthClient.create({
-//         idleOptions: {
-//           idleTimeout: 1000 * 60 * 60
-//         }
-//       });
-//       await authClient.login({
-//         //identityProvider: `http://127.0.0.1:4943/?canisterId=${process.env.CANISTER_ID_INTERNET_IDENTITY}`,
-//         identityProvider: `http://${process.env.CANISTER_ID_INTERNET_IDENTITY}.localhost:4943/`,
-//         onSuccess: async() => {
-//           console.log("Login successful");
-//           const identity = authClient.getIdentity().getPrincipal().toString();
-//           console.log(identity)
-//           const principal = Principal.fromText(identity);
-//           console.log(principal)
-//           try {
-//             const balance = (await backend.get_balance(principal)) as unknown as number;
-//             console.log(balance)
-//             const result = await backend.login(principal, role);
-//             console.log(result);
-//             setUser({ id: principal, balance, role });
-//           } catch (e) {
-//             console.error('Error fetching balance or logging in:', e);
-//           }
+  const login = async () => {
+    setLoading(true);
+    try {
+      console.log("Role: ", role);
+      let authClient = await AuthClient.create({
+        idleOptions: {
+          idleTimeout: 1000 * 60 * 60,
+        },
+      });
+      await authClient.login({
+        //identityProvider: `http://127.0.0.1:4943/?canisterId=${process.env.CANISTER_ID_INTERNET_IDENTITY}`,
+        identityProvider: `http://${process.env.CANISTER_ID_INTERNET_IDENTITY}.localhost:4943/`,
+        onSuccess: async () => {
+          console.log("Login successful");
+          const identity = authClient.getIdentity().getPrincipal().toString();
+          console.log(identity);
+          const principal = Principal.fromText(identity);
+          console.log(principal);
+          try {
+            const balance = (await backend.get_balance(
+              principal
+            )) as unknown as number;
+            console.log(balance);
+            const result = await backend.login(principal, role);
+            console.log(result);
+            setUser({ id: principal, balance, role });
+          } catch (e) {
+            console.error("Error fetching balance or logging in:", e);
+          }
+        },
+      });
+      /*if (await authClient.isAuthenticated()) {
 
-//         },
-//       });
-//       /*if (await authClient.isAuthenticated()) {
+      }*/
+      /*if ('Err' in result) {
+        throw new Error(result.Err);
+      }*/
+    } catch (err) {
+      console.error("Error logging in:", err);
+    }
+    setLoading(false);
+  };
 
-//       }*/
-//       /*if ('Err' in result) {
-//         throw new Error(result.Err);
-//       }*/
+  return (
+    <div className="p-4">
+      <select
+        value={role}
+        onChange={(e) =>
+          setRole(e.target.value as "User" | "Validator" | "Researcher")
+        }
+        className="p-2 border rounded mb-2"
+      >
+        <option value="User">User</option>
+        <option value="Validator">Validator</option>
+        <option value="Researcher">Researcher</option>
+      </select>
+      <button
+        onClick={login}
+        disabled={loading}
+        className="px-4 py-2 bg-blue-500 text-white rounded"
+      >
+        {loading ? "Logging in..." : "Login"}
+      </button>
+      {user.id && (
+        <div className="mt-4">
+          Logged in as: {user.id.toString()} <br />
+          Role: {user.role} <br />
+          Balance: {user.balance.toString()}
+        </div>
+      )}
+    </div>
+  );
+};
 
-//     } catch (err) {
-//       console.error('Error logging in:', err);
-//     }
-//     setLoading(false);
-//   };
-
-//   return (
-//     <div className="p-4">
-//       <select
-//         value={role}
-//         onChange={(e) => setRole(e.target.value as 'User' | 'Validator' | 'Researcher')}
-//         className="p-2 border rounded mb-2"
-//       >
-//         <option value="User">User</option>
-//         <option value="Validator">Validator</option>
-//         <option value="Researcher">Researcher</option>
-//       </select>
-//       <button
-//         onClick={login}
-//         disabled={loading}
-//         className="px-4 py-2 bg-blue-500 text-white rounded">
-//         {loading ? 'Logging in...' : 'Login'}
-//       </button>
-//       {user.id && (
-//         <div className="mt-4">
-//           Logged in as: {user.id.toString()} <br />
-//           Role: {user.role} <br />
-//           Balance: {user.balance.toString()}
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
-
-// export default Login;
+export default Login;
diff --git a/src/deda_frontend/src/components/PayContributors.tsx b/src/deda_frontend/src/components/PayContributors.tsx
index f200248..3c42c4f 100644
--- a/src/deda_frontend/src/components/PayContributors.tsx
+++ b/src/deda_frontend/src/components/PayContributors.tsx
@@ -1,45 +1,53 @@
-// import React, { useState } from 'react';
-// import { Actor, HttpAgent } from '@dfinity/agent';
-// import { idlFactory } from '../../../declarations/deda_backend';
-// // import * as dotenv from 'dotenv';
-// //dotenv.config()
+import React, { useState } from "react";
+import { Actor, HttpAgent } from "@dfinity/agent";
+import { idlFactory } from "../../../declarations/deda_backend";
+// import * as dotenv from 'dotenv';
+//dotenv.config()
 
-// const agent = new HttpAgent();
-// agent.fetchRootKey().catch(err => {
-//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-//   console.error(err);
-// });
-// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+const agent = new HttpAgent();
+agent.fetchRootKey().catch((err) => {
+  console.warn(
+    "Unable to fetch root key. Check to ensure that your local replica is running"
+  );
+  console.error(err);
+});
+const backend = Actor.createActor(idlFactory as any, {
+  agent,
+  canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string,
+});
 
-// const PayContributors: React.FC = () => {
-//   const [submissionId, setSubmissionId] = useState<string>('');
-//   const [response, setResponse] = useState<string>('');
+const PayContributors: React.FC = () => {
+  const [submissionId, setSubmissionId] = useState<string>("");
+  const [response, setResponse] = useState<string>("");
 
-//   const payContributors = async () => {
-//     try {
-//       await backend.pay_contributors(Number(submissionId)); // pay_contributors function invoked
-//       setResponse('Contributors paid successfully');
-//     } catch (error) {
-//       setResponse('Error paying contributors');
-//     }
-//   };
+  const payContributors = async () => {
+    try {
+      await backend.pay_contributors(Number(submissionId)); // pay_contributors function invoked
+      setResponse("Contributors paid successfully");
+    } catch (error) {
+      setResponse("Error paying contributors");
+    }
+  };
 
-//   return (
-//     <div className="p-4">
-//       <h2 className="text-2xl font-bold mb-4">Pay Contributors</h2>
-//       <input
-//         type="number"
-//         placeholder="Submission ID"
-//         value={submissionId}
-//         onChange={(e) => setSubmissionId(e.target.value)}
-//         className="p-2 border rounded mb-2"
-//       />
-//       <button onClick={payContributors} className="px-4 py-2 bg-purple-500 text-white rounded">
-//         Pay
-//       </button>
-//       {response && <div className="mt-4">{response}</div>}
-//     </div>
-//   );
-// };
+  return (
+    <div className="p-4">
+      <h2 className="text-2xl font-bold mb-4">Pay Contributors</h2>
+      <input
+        type="number"
+        placeholder="Submission ID"
+        value={submissionId}
+        onChange={(e) => setSubmissionId(e.target.value)}
+        className="p-2 border rounded mb-2"
+      />
+      <button
+        onClick={payContributors}
+        className="px-4 py-2 bg-purple-500 text-white rounded"
+      >
+        Pay
+      </button>
+      {response && <div className="mt-4">{response}</div>}
+    </div>
+  );
+};
 
-// export default PayContributors;
+export default PayContributors;
diff --git a/src/deda_frontend/src/components/StoreCleanedData.tsx b/src/deda_frontend/src/components/StoreCleanedData.tsx
index fb63135..0f94d29 100644
--- a/src/deda_frontend/src/components/StoreCleanedData.tsx
+++ b/src/deda_frontend/src/components/StoreCleanedData.tsx
@@ -1,53 +1,61 @@
-// import React, { useState } from 'react';
-// import { Actor, HttpAgent } from '@dfinity/agent';
-// import { idlFactory } from '../../../declarations/deda_backend';
-// import * as dotenv from 'dotenv';
-// //dotenv.config()
+import React, { useState } from "react";
+import { Actor, HttpAgent } from "@dfinity/agent";
+import { idlFactory } from "../../../declarations/deda_backend";
+import * as dotenv from "dotenv";
+//dotenv.config()
 
-// const agent = new HttpAgent();
-// agent.fetchRootKey().catch(err => {
-//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-//   console.error(err);
-// });
-// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+const agent = new HttpAgent();
+agent.fetchRootKey().catch((err) => {
+  console.warn(
+    "Unable to fetch root key. Check to ensure that your local replica is running"
+  );
+  console.error(err);
+});
+const backend = Actor.createActor(idlFactory as any, {
+  agent,
+  canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string,
+});
 
-// const StoreCleanedData: React.FC = () => {
-//   const [requestId, setRequestId] = useState<string>('');
-//   const [location, setLocation] = useState<string>('');
-//   const [response, setResponse] = useState<string>('');
+const StoreCleanedData: React.FC = () => {
+  const [requestId, setRequestId] = useState<string>("");
+  const [location, setLocation] = useState<string>("");
+  const [response, setResponse] = useState<string>("");
 
-//   const storeCleanedData = async () => {
-//     try {
-//       await backend.store_cleaned_data(Number(requestId), location);
-//       setResponse('Cleaned data stored successfully');
-//     } catch (error) {
-//       setResponse('Error storing cleaned data');
-//     }
-//   };
+  const storeCleanedData = async () => {
+    try {
+      await backend.store_cleaned_data(Number(requestId), location);
+      setResponse("Cleaned data stored successfully");
+    } catch (error) {
+      setResponse("Error storing cleaned data");
+    }
+  };
 
-//   return (
-//     <div className="p-4">
-//       <h2 className="text-2xl font-bold mb-4">Store Cleaned Data</h2>
-//       <input
-//         type="number"
-//         placeholder="Request ID"
-//         value={requestId}
-//         onChange={(e) => setRequestId(e.target.value)}
-//         className="p-2 border rounded mb-2"
-//       />
-//       <input
-//         type="text"
-//         placeholder="Data Location"
-//         value={location}
-//         onChange={(e) => setLocation(e.target.value)}
-//         className="p-2 border rounded mb-2"
-//       />
-//       <button onClick={storeCleanedData} className="px-4 py-2 bg-green-500 text-white rounded">
-//         Store Data
-//       </button>
-//       {response && <div className="mt-4">{response}</div>}
-//     </div>
-//   );
-// };
+  return (
+    <div className="p-4">
+      <h2 className="text-2xl font-bold mb-4">Store Cleaned Data</h2>
+      <input
+        type="number"
+        placeholder="Request ID"
+        value={requestId}
+        onChange={(e) => setRequestId(e.target.value)}
+        className="p-2 border rounded mb-2"
+      />
+      <input
+        type="text"
+        placeholder="Data Location"
+        value={location}
+        onChange={(e) => setLocation(e.target.value)}
+        className="p-2 border rounded mb-2"
+      />
+      <button
+        onClick={storeCleanedData}
+        className="px-4 py-2 bg-green-500 text-white rounded"
+      >
+        Store Data
+      </button>
+      {response && <div className="mt-4">{response}</div>}
+    </div>
+  );
+};
 
-// export default StoreCleanedData;
+export default StoreCleanedData;
diff --git a/src/deda_frontend/src/components/SubmitData.tsx b/src/deda_frontend/src/components/SubmitData.tsx
index ff2fb39..c37c5ab 100644
--- a/src/deda_frontend/src/components/SubmitData.tsx
+++ b/src/deda_frontend/src/components/SubmitData.tsx
@@ -1,62 +1,74 @@
-// import React, { useState } from 'react';
-// import { useRecoilValue } from 'recoil';
-// import { userState } from '../state/userState';
-// import { Actor, HttpAgent } from '@dfinity/agent';
-// import { idlFactory } from '../../../declarations/deda_backend';
+import React, { useState } from "react";
+import { useRecoilValue } from "recoil";
+import { userState } from "../state/userState";
+import { Actor, HttpAgent } from "@dfinity/agent";
+import { idlFactory } from "../../../declarations/deda_backend";
 
-// const agent = new HttpAgent();
-// agent.fetchRootKey().catch(err => {
-//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-//   console.error(err);
-// });
-// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+const agent = new HttpAgent();
+agent.fetchRootKey().catch((err) => {
+  console.warn(
+    "Unable to fetch root key. Check to ensure that your local replica is running"
+  );
+  console.error(err);
+});
+const backend = Actor.createActor(idlFactory as any, {
+  agent,
+  canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string,
+});
 
-// const SubmitData: React.FC = () => {
-//   const user = useRecoilValue(userState);
-//   const [requestId, setRequestId] = useState<string>('');
-//   const [location, setLocation] = useState<string>('');
-//   const [response, setResponse] = useState<string>('');
+const SubmitData: React.FC = () => {
+  const user = useRecoilValue(userState);
+  const [requestId, setRequestId] = useState<string>("");
+  const [location, setLocation] = useState<string>("");
+  const [response, setResponse] = useState<string>("");
 
-//   const submitData = async () => {
-//     try {
-//       const principal = user.id;
-//       const result: any= await backend.submit_data(principal, Number(requestId), location);
-//       console.log(result)
-//       if ('Ok' in result) {
-//         const submissionId = result.Ok;
-//         console.log(submissionId);
-//         setResponse(`Data submitted successfully with ID: ${submissionId}`);
-//       } else if ('Err' in result) {
-//         setResponse(`Error submitting data: ${result.Err}`);
-//       }
-//     } catch (error) {
-//       setResponse('Error submitting data');
-//     }
-//   };
+  const submitData = async () => {
+    try {
+      const principal = user.id;
+      const result: any = await backend.submit_data(
+        principal,
+        Number(requestId),
+        location
+      );
+      console.log(result);
+      if ("Ok" in result) {
+        const submissionId = result.Ok;
+        console.log(submissionId);
+        setResponse(`Data submitted successfully with ID: ${submissionId}`);
+      } else if ("Err" in result) {
+        setResponse(`Error submitting data: ${result.Err}`);
+      }
+    } catch (error) {
+      setResponse("Error submitting data");
+    }
+  };
 
-//   return (
-//     <div className="p-4">
-//       <h2 className="text-2xl font-bold mb-4">Submit Data</h2>
-//       <input
-//         type="number"
-//         placeholder="Request ID"
-//         value={requestId}
-//         onChange={(e) => setRequestId(e.target.value)}
-//         className="p-2 border rounded mb-2"
-//       />
-//       <input
-//         type="text"
-//         placeholder="Data Location"
-//         value={location}
-//         onChange={(e) => setLocation(e.target.value)}
-//         className="p-2 border rounded mb-2"
-//       />
-//       <button onClick={submitData} className="px-4 py-2 bg-green-500 text-white rounded">
-//         Submit
-//       </button>
-//       {response && <div className="mt-4">{response}</div>}
-//     </div>
-//   );
-// };
+  return (
+    <div className="p-4">
+      <h2 className="text-2xl font-bold mb-4">Submit Data</h2>
+      <input
+        type="number"
+        placeholder="Request ID"
+        value={requestId}
+        onChange={(e) => setRequestId(e.target.value)}
+        className="p-2 border rounded mb-2"
+      />
+      <input
+        type="text"
+        placeholder="Data Location"
+        value={location}
+        onChange={(e) => setLocation(e.target.value)}
+        className="p-2 border rounded mb-2"
+      />
+      <button
+        onClick={submitData}
+        className="px-4 py-2 bg-green-500 text-white rounded"
+      >
+        Submit
+      </button>
+      {response && <div className="mt-4">{response}</div>}
+    </div>
+  );
+};
 
-// export default SubmitData;
+export default SubmitData;
diff --git a/src/deda_frontend/src/components/VerifyData.tsx b/src/deda_frontend/src/components/VerifyData.tsx
index d052049..ee02216 100644
--- a/src/deda_frontend/src/components/VerifyData.tsx
+++ b/src/deda_frontend/src/components/VerifyData.tsx
@@ -1,53 +1,64 @@
-// import React, { useState } from 'react';
-// import { useRecoilValue } from 'recoil';
-// import { userState } from '../state/userState';
-// import { Actor, HttpAgent } from '@dfinity/agent';
-// import { idlFactory } from '../../../declarations/deda_backend';
-// import * as dotenv from 'dotenv';
-// //dotenv.config()
+import React, { useState } from "react";
+import { useRecoilValue } from "recoil";
+import { userState } from "../state/userState";
+import { Actor, HttpAgent } from "@dfinity/agent";
+import { idlFactory } from "../../../declarations/deda_backend";
+import * as dotenv from "dotenv";
+//dotenv.config()
 
-// const agent = new HttpAgent();
-// agent.fetchRootKey().catch(err => {
-//   console.warn('Unable to fetch root key. Check to ensure that your local replica is running');
-//   console.error(err);
-// });
-// const backend = Actor.createActor(idlFactory as any, { agent, canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string });
+const agent = new HttpAgent();
+agent.fetchRootKey().catch((err) => {
+  console.warn(
+    "Unable to fetch root key. Check to ensure that your local replica is running"
+  );
+  console.error(err);
+});
+const backend = Actor.createActor(idlFactory as any, {
+  agent,
+  canisterId: process.env.CANISTER_ID_DEDA_BACKEND as string,
+});
 
-// const VerifyData: React.FC = () => {
-//   const user = useRecoilValue(userState);
-//   const [submissionId, setSubmissionId] = useState<string>('');
-//   const [response, setResponse] = useState<string>('');
+const VerifyData: React.FC = () => {
+  const user = useRecoilValue(userState);
+  const [submissionId, setSubmissionId] = useState<string>("");
+  const [response, setResponse] = useState<string>("");
 
-//   const verifyData = async () => {
-//     try {
-//       const principal = user.id;
-//       const result: any = await backend.verify_data(principal, Number(submissionId));
-//       if ('Ok' in result) {
-//         setResponse('Data verified successfully');
-//       } else {
-//         setResponse('Error verifying data: ' + result.Err);
-//       }
-//     } catch (error) {
-//       setResponse('Error verifying data');
-//     }
-//   };
+  const verifyData = async () => {
+    try {
+      const principal = user.id;
+      const result: any = await backend.verify_data(
+        principal,
+        Number(submissionId)
+      );
+      if ("Ok" in result) {
+        setResponse("Data verified successfully");
+      } else {
+        setResponse("Error verifying data: " + result.Err);
+      }
+    } catch (error) {
+      setResponse("Error verifying data");
+    }
+  };
 
-//   return (
-//     <div className="p-4">
-//       <h2 className="text-2xl font-bold mb-4">Verify Data</h2>
-//       <input
-//         type="number"
-//         placeholder="Submission ID"
-//         value={submissionId}
-//         onChange={(e) => setSubmissionId(e.target.value)}
-//         className="p-2 border rounded mb-2"
-//       />
-//       <button onClick={verifyData} className="px-4 py-2 bg-yellow-500 text-white rounded">
-//         Verify
-//       </button>
-//       {response && <div className="mt-4">{response}</div>}
-//     </div>
-//   );
-// };
+  return (
+    <div className="p-4">
+      <h2 className="text-2xl font-bold mb-4">Verify Data</h2>
+      <input
+        type="number"
+        placeholder="Submission ID"
+        value={submissionId}
+        onChange={(e) => setSubmissionId(e.target.value)}
+        className="p-2 border rounded mb-2"
+      />
+      <button
+        onClick={verifyData}
+        className="px-4 py-2 bg-yellow-500 text-white rounded"
+      >
+        Verify
+      </button>
+      {response && <div className="mt-4">{response}</div>}
+    </div>
+  );
+};
 
-// export default VerifyData;
+export default VerifyData;