dashboards

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"
+  }
+}

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"

src/deda_frontend/src/App.tsx

@@ -1,26 +1,29 @@
-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 './App.css';
-import { userState } from './state/userState';
+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";
 
 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>
+      <h1 className="text-3xl font-bold mb-6">
+        DeDa - Decentralized Data Marketplace
+      </h1>
       <Login />
-      {user.role === 'Researcher' && <AddDataRequest />}
+      {user.role === "Researcher" && <AddDataRequest />}
       <DataRequestList />
-      {user.role === 'User' && <SubmitData />}
-      {user.role === 'Validator' && (
+      {user.role === "User" && <SubmitData />}
+      {user.role === "Validator" && (
         <>
           <VerifyData />
           <StoreCleanedData />
@@ -33,7 +36,8 @@ const AppContent: React.FC = () => {
 
 const App: React.FC = () => (
   <RecoilRoot>
-    <AppContent />
+    {/* <AppContent /> */}
+    <MainPage />
   </RecoilRoot>
 );
 

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>
+  );
+}

src/deda_frontend/src/components/AddDataRequest.tsx

@@ -1,27 +1,35 @@
-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');
+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 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 [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));
+      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');
+      console.error(error);
+      setResponse("Error adding data request");
     }
   };
 
@@ -42,7 +50,10 @@ const AddDataRequest: React.FC = () => {
         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">
+      <button
+        onClick={addDataRequest}
+        className="px-4 py-2 bg-blue-500 text-white rounded"
+      >
         Add Request
       </button>
       {response && <div className="mt-4">{response}</div>}