Dashboard - overview v0

src/app/catalogue/components/ResultsPane.js

@@ -81,7 +81,7 @@ export default function ResultsPane ({
   useEffect(() => {
     window.scrollTo(0, 0, 'smooth')
     calculateItemsPerPage(currentPage, settings, data, setVcs)
-  }, [currentPage])
+  }, [currentPage, data])
 
   const totalPages = useMemo(() => calculateTotalPages(totalVcs, settings.batchSize), [totalVcs])
   const totalPagesToDisplay = totalPages

src/app/dashboard/components/Dashboard.jsx

@@ -0,0 +1,14 @@
+'use client'
+
+// import Overview from '../overview/components/Overview'
+import SidebarDashboard from './sidebar/Sidebar'
+
+function Dashboard () {
+  return (
+    <div className='flex h-full'>
+      <SidebarDashboard />
+      {/* <Overview /> */}
+    </div>
+  )
+}
+export default Dashboard

src/app/dashboard/components/sidebar/Sidebar.jsx

@@ -0,0 +1,38 @@
+import { Sidebar } from 'flowbite-react'
+import { useRouter } from 'next/navigation'
+import customTheme from './style'
+function SidebarDashboard () {
+    const router = useRouter();
+
+  const handleItemClick = (path) => {
+    router.push(`/dashboard/${path}`);
+  }
+  return (
+    <div>
+      <Sidebar className='bg-white' theme={customTheme}>
+        <Sidebar.Items>
+          <Sidebar.ItemGroup className='flex flex-col'>
+            <Sidebar.Item onClick={() => handleItemClick('overview')}>
+              <div className='flex flex-row gap-2'>
+                <svg className='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
+                  <path d='M13.5 2c-.178 0-.356.013-.492.022l-.074.005a1 1 0 0 0-.934.998V11a1 1 0 0 0 1 1h7.975a1 1 0 0 0 .998-.934l.005-.074A7.04 7.04 0 0 0 22 10.5 8.5 8.5 0 0 0 13.5 2Z' />
+                  <path d='M11 6.025a1 1 0 0 0-1.065-.998 8.5 8.5 0 1 0 9.038 9.039A1 1 0 0 0 17.975 13H11V6.025Z' />
+                </svg>
+                Overview
+              </div>
+            </Sidebar.Item>
+            <Sidebar.Item onClick={() => handleItemClick('contracts')} labelColor='dark'>
+              <div className='flex flex-row gap-2'>
+                <svg className='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
+                  <path fillRule='evenodd' d='M14 7h-4v3a1 1 0 0 1-2 0V7H6a1 1 0 0 0-.997.923l-.917 11.924A2 2 0 0 0 6.08 22h11.84a2 2 0 0 0 1.994-2.153l-.917-11.924A1 1 0 0 0 18 7h-2v3a1 1 0 1 1-2 0V7Zm-2-3a2 2 0 0 0-2 2v1H8V6a4 4 0 0 1 8 0v1h-2V6a2 2 0 0 0-2-2Z' clipRule='evenodd' />
+                </svg>
+                Contracts
+              </div>
+            </Sidebar.Item>
+          </Sidebar.ItemGroup>
+        </Sidebar.Items>
+      </Sidebar>
+    </div>
+  )
+}
+export default SidebarDashboard

src/app/dashboard/components/sidebar/style.tsx

@@ -0,0 +1,80 @@
+import { FlowbiteSidebarTheme } from 'flowbite-react'
+const customTheme: FlowbiteSidebarTheme = {
+  "root": {
+    "base": "h-full",
+    "collapsed": {
+      "on": "w-16",
+      "off": "w-64"
+    },
+    "inner": "h-full overflow-y-auto overflow-x-hidden rounded bg-white px-3 py-4"
+  },
+  "collapse": {
+    "button": "group flex w-full items-center rounded-lg p-2 text-base font-normal text-gray-900 transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
+    "icon": {
+      "base": "h-6 w-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white",
+      "open": {
+        "off": "",
+        "on": "text-gray-900"
+      }
+    },
+    "label": {
+      "base": "ml-3 flex-1 whitespace-nowrap text-left",
+      "icon": {
+        "base": "h-6 w-6 transition delay-0 ease-in-out",
+        "open": {
+          "on": "rotate-180",
+          "off": ""
+        }
+      }
+    },
+    "list": "space-y-2 py-2"
+  },
+  "cta": {
+    "base": "mt-6 rounded-lg bg-gray-100 p-4 dark:bg-gray-700",
+    "color": {
+      "blue": "bg-cyan-50 dark:bg-cyan-900",
+      "dark": "bg-dark-50 dark:bg-dark-900",
+      "failure": "bg-red-50 dark:bg-red-900",
+      "gray": "bg-alternative-50 dark:bg-alternative-900",
+      "green": "bg-green-50 dark:bg-green-900",
+      "light": "bg-light-50 dark:bg-light-900",
+      "red": "bg-red-50 dark:bg-red-900",
+      "purple": "bg-purple-50 dark:bg-purple-900",
+      "success": "bg-green-50 dark:bg-green-900",
+      "yellow": "bg-yellow-50 dark:bg-yellow-900",
+      "warning": "bg-yellow-50 dark:bg-yellow-900"
+    }
+  },
+  "item": {
+    "base": "flex items-center justify-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
+    "active": "bg-gray-100 dark:bg-gray-700",
+    "collapsed": {
+      "insideCollapse": "group w-full pl-8 transition duration-75",
+      "noIcon": "font-bold"
+    },
+    "content": {
+      "base": "flex-1 whitespace-nowrap px-3"
+    },
+    "icon": {
+      "base": "h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white",
+      "active": "text-gray-700 dark:text-gray-100"
+    },
+    "label": "",
+    "listItem": ""
+  },
+  "items": {
+    "base": ""
+  },
+  "itemGroup": {
+    "base": "mt-4 space-y-2 border-t border-gray-200 pt-4 first:mt-0 first:border-t-0 first:pt-0 dark:border-gray-700"
+  },
+  "logo": {
+    "base": "mb-5 flex items-center pl-2.5",
+    "collapsed": {
+      "on": "hidden",
+      "off": "self-center whitespace-nowrap text-xl font-semibold dark:text-white"
+    },
+    "img": "mr-3 h-6 sm:h-7"
+  }
+}
+export default customTheme

src/app/dashboard/overview/components/BannerStats.jsx

@@ -0,0 +1,68 @@
+function BannerStats ({ overview }) {
+  const transformKey = (key) => {
+    return key
+      .replace(/_/g, ' ')
+      .split(' ')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  }
+  const icon = (key) => {
+    switch (key) {
+      case 'assets_published':
+        return (
+          <svg className='w-16 h-16 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
+            <path fillRule='evenodd' d='M9 7V2.221a2 2 0 0 0-.5.365L4.586 6.5a2 2 0 0 0-.365.5H9Zm2 0V2h7a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9h5a2 2 0 0 0 2-2Zm-1 9a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2Zm2-5a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Zm4 4a1 1 0 1 0-2 0v3a1 1 0 1 0 2 0v-3Z' clipRule='evenodd' />
+          </svg>
+        )
+      case 'contracts_agreements':
+        return (
+          <svg className='w-16 h-16 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
+            <path fillRule='evenodd' d='M4 4a1 1 0 0 1 1-1h1.5a1 1 0 0 1 .979.796L7.939 6H19a1 1 0 0 1 .979 1.204l-1.25 6a1 1 0 0 1-.979.796H9.605l.208 1H17a3 3 0 1 1-2.83 2h-2.34a3 3 0 1 1-4.009-1.76L5.686 5H5a1 1 0 0 1-1-1Z' clipRule='evenodd' />
+          </svg>
+        )
+      case 'datasets_downloaded':
+        return (
+          <svg className='w-16 h-16 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
+            <path fillRule='evenodd' d='M13 11.15V4a1 1 0 1 0-2 0v7.15L8.78 8.374a1 1 0 1 0-1.56 1.25l4 5a1 1 0 0 0 1.56 0l4-5a1 1 0 1 0-1.56-1.25L13 11.15Z' clipRule='evenodd' />
+            <path fillRule='evenodd' d='M9.657 15.874 7.358 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-2.358l-2.3 2.874a3 3 0 0 1-4.685 0ZM17 16a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H17Z' clipRule='evenodd' />
+          </svg>
+        )
+      case 'transfers_out':
+        return (
+          <svg className='w-16 h-16 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
+            <path fillRule='evenodd' d='M12 3a1 1 0 0 1 .78.375l4 5a1 1 0 1 1-1.56 1.25L13 6.85V14a1 1 0 1 1-2 0V6.85L8.78 9.626a1 1 0 1 1-1.56-1.25l4-5A1 1 0 0 1 12 3ZM9 14v-1H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-4v1a3 3 0 1 1-6 0Zm8 2a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H17Z' clipRule='evenodd' />
+          </svg>
+        )
+      default:
+        return (
+          <svg className='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'>
+            <path stroke='currentColor' strokeLinecap='round' strokeWidth='2' d='M5 7h14M5 12h14M5 17h10' />
+          </svg>
+        )
+    }
+  }
+  return (
+    <div className='m-10'>
+      <div className='flex flex-row gap-5'>
+        {Object.keys(overview).map((key, index) => {
+          return (
+            <div className='flex flex-col items-center gap-3 bg-white rounded-lg shadow-lg w-36 h-36 text-center p-2' key={index}>
+              <div className='max-h-16'>
+                {icon(key)}
+              </div>
+              <div>
+                <span className='pr-1 font-medium text-black text-base'>
+                  {overview[key]}
+                </span>
+                <span className='font-medium text-black text-base'>
+                  {transformKey(key)}
+                </span>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+export default BannerStats

src/app/dashboard/overview/components/Overview.jsx

@@ -0,0 +1,19 @@
+'use client'
+import BannerStats from './BannerStats'
+import TransferHistory from './TransferHistory'
+import SidebarDashboard from '../../components/sidebar/Sidebar'
+import mockTransferHistory from '@/utils/data/mockTransfershistory.json'
+import mockOverview from '@/utils/data/mockOverview.json'
+
+function Overview () {
+  return (
+    <div className='flex flex row'>
+      <SidebarDashboard />
+    <div className='flex flex-col bg-sedimark-light-blue w-full '>
+      <BannerStats overview={mockOverview.overview} />
+      <TransferHistory history={mockTransferHistory.transfer_history} />
+    </div>
+    </div>
+  )
+}
+export default Overview

src/app/dashboard/overview/components/TransferHistory.jsx

@@ -0,0 +1,70 @@
+import { Table, Accordion } from 'flowbite-react'
+
+function TransferHistory ({ history }) {
+  const historyData = ['', 'Asset', 'Counterparty ID', 'Status', 'Date']
+  return (
+    <Accordion className='mt-5 mb-5 p-10 pt-0 border-none'>
+      <Accordion.Panel>
+        <Accordion.Title>
+          <div className='flex flex-row gap-2'>
+            <svg className='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'>
+              <path stroke='currentColor' strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' />
+            </svg>Transfer history
+          </div>
+        </Accordion.Title>
+        <Accordion.Content className='bg-white max-h-56 overflow-y-auto'>
+          <div className='overflow-x-auto'>
+            <Table>
+              <Table.Head>
+                {historyData.map((nameColumn, index) => {
+                  return (<Table.HeadCell className='bg-white p-0 pl-6' key={`${nameColumn}-${index}`}>{nameColumn}</Table.HeadCell>)
+                })}
+              </Table.Head>
+              <Table.Body className='divide-y'>
+                {history.map((asset, index) => {
+                  return (
+                    // Icons
+                    <Table.Row className='bg-white dark:border-gray-700 dark:bg-gray-800' key={`${asset.asset}-${index}`}>
+                      {asset.transfer_in &&
+                        <Table.Cell className='max-w-fit'>
+                          <svg className='w-5 h-5 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
+                            <path fillRule='evenodd' d='M13 11.15V4a1 1 0 1 0-2 0v7.15L8.78 8.374a1 1 0 1 0-1.56 1.25l4 5a1 1 0 0 0 1.56 0l4-5a1 1 0 1 0-1.56-1.25L13 11.15Z' clipRule='evenodd' />
+                            <path fillRule='evenodd' d='M9.657 15.874 7.358 13H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-2.358l-2.3 2.874a3 3 0 0 1-4.685 0ZM17 16a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H17Z' clipRule='evenodd' />
+                          </svg>
+                        </Table.Cell>}
+                      {asset.transfer_out &&
+                        <Table.Cell className='max-w-fit'>
+                          <svg className='w-5 h-5 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
+                            <path fillRule='evenodd' d='M12 3a1 1 0 0 1 .78.375l4 5a1 1 0 1 1-1.56 1.25L13 6.85V14a1 1 0 1 1-2 0V6.85L8.78 9.626a1 1 0 1 1-1.56-1.25l4-5A1 1 0 0 1 12 3ZM9 14v-1H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-4v1a3 3 0 1 1-6 0Zm8 2a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H17Z' clipRule='evenodd' />
+                          </svg>
+                        </Table.Cell>}
+                      {!asset.transfer_out && !asset.transfer_in && asset.status === 'Pending' &&
+                        <Table.Cell className='max-w-fit'>
+                          <svg className='w-5 h-5 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'>
+                            <path stroke='currentColor' strokeLinecap='round' strokeWidth='2' d='M6 12h.01m6 0h.01m5.99 0h.01' />
+                          </svg>
+                        </Table.Cell>}
+                      {!asset.transfer_out && !asset.transfer_in && asset.status === 'Failed' &&
+                        <Table.Cell className='max-w-fit'>
+                          <svg className='w-5 h-5 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>
+                            <path fillRule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0V8Zm-1 7a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H12Z' clipRule='evenodd' />
+                          </svg>
+                        </Table.Cell>}
+                      <Table.Cell className='whitespace-nowrap font-normal text-black dark:text-white flex flex-row gap-2 ml-0'>
+                        {asset.asset}
+                      </Table.Cell>
+                      <Table.Cell className='whitespace-nowrap font-normal text-black dark:text-white'>{asset.counterpart_id}</Table.Cell>
+                      <Table.Cell className='whitespace-nowrap font-normal text-black dark:text-white'>{asset.status}</Table.Cell>
+                      <Table.Cell className='whitespace-nowrap font-normal text-black dark:text-white'>{asset.date}</Table.Cell>
+                    </Table.Row>
+                  )
+                })}
+              </Table.Body>
+            </Table>
+          </div>
+        </Accordion.Content>
+      </Accordion.Panel>
+    </Accordion>
+  )
+}
+export default TransferHistory

src/app/dashboard/overview/page.js

@@ -0,0 +1,9 @@
+import Overview from './components/Overview'
+
+export default function Page () {
+  return (
+    <div>
+      <Overview />
+    </div>
+  )
+}

src/app/dashboard/page.js

@@ -0,0 +1,7 @@
+import Dashboard from './components/Dashboard'
+
+export default function Page () {
+  return (
+    <Dashboard />
+  )
+}

src/components/nav/NavItems.jsx

@@ -7,7 +7,7 @@ export const NavItems = () => {
     // THESE TWO SHOULD BE PROTECTED, ONLY ACCESSED BY REGISTERED USERS
     // @TODO: Implement Metamask plugin + a session provider to show only if logged in.
     { href: '/publish', label: 'Publish' },
-    { href: '/', label: 'Dashboard' }
+    { href: '/dashboard', label: 'Dashboard' }
   ]
 
   return (

src/utils/data/mockOverview.json

@@ -0,0 +1,8 @@
+{
+  "overview": {
+    "assets_published": 3,
+    "contracts_agreements": 7,
+    "datasets_downloaded": 5,
+    "transfers_out": 3
+  }
+}

src/utils/data/mockTransfershistory.json

@@ -0,0 +1,52 @@
+{
+  "transfer_history": [
+    {
+      "asset": "2022 EU EV charging data",
+      "counterpart_id": "University of Cantabria",
+      "status": "Completed",
+      "date": "Yesterday at 6:31 pm",
+      "transfer_in": true,
+      "transfer_out": false
+    },
+    {
+      "asset": "Helsinki EV stations metering",
+      "counterpart_id": "Forum Virium Helsinki",
+      "status": "Completed",
+      "date": "2023-11-29 at 6:31 pm",
+      "transfer_in": false,
+      "transfer_out": true
+    },
+    {
+      "asset": "Paris Water Purity",
+      "counterpart_id": "EGM     ",
+      "status": "In progress",
+      "date": "2023-11-21 at 5:24 am",
+      "transfer_in": true,
+      "transfer_out": false
+    },
+    {
+      "asset": "Berlin Air Quality Data",
+      "counterpart_id": "Technische Universität Berlin",
+      "status": "Pending",
+      "date": "2023-11-30 at 10:00 am",
+      "transfer_in": false,
+      "transfer_out": false
+    },
+    {
+      "asset": "London Traffic Flow Data",
+      "counterpart_id": "Transport for London",
+      "status": "Completed",
+      "date": "2023-11-28 at 3:45 pm",
+      "transfer_in": true,
+      "transfer_out": false
+    },
+    {
+      "asset": "Madrid Energy Consumption",
+      "counterpart_id": "Universidad Politécnica de Madrid",
+      "status": "Failed",
+      "date": "2023-11-25 at 8:15 am",
+      "transfer_in": false,
+      "transfer_out": false
+    }
+  ]
+}