Update Dataset Details and Listing Page as per HIFI designs

app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx

@@ -9,18 +9,63 @@ import {
 } from 'opub-ui';
 
 import CustomTags from '@/components/CustomTags';
+import ResourceTable from '../../../components/ResourceTable';
 
 interface AccessModelProps {
   data: any;
 }
 
+const generateColumnData = () => {
+  return [
+    {
+      accessorKey: 'resourceName',
+      header: 'Resource Name',
+    },
+
+    {
+      accessorKey: 'fields',
+      header: 'Fields',
+      isModalTrigger: true,
+      label: 'Preview',
+      table: true,
+      modalHeader: 'Fields',
+    },
+    {
+      accessorKey: 'rows',
+      header: 'Rows',
+    },
+    {
+      accessorKey: 'count',
+      header: 'Count',
+    },
+    {
+      accessorKey: 'preview',
+      header: 'Preview',
+      isModalTrigger: true,
+      label: 'Preview',
+      table: true,
+      modalHeader: 'Preview',
+    },
+  ];
+};
+
+const generateTableData = (resource: any[]) => {
+  return resource.map((item: any) => ({
+    resourceName: item.resourceName,
+    fields: item.fields,
+    preview: item.preview,
+    rows: item.rows,
+    count: item.count,
+  }));
+};
+
 const AccessModels: React.FC<AccessModelProps> = ({ data }) => {
   return (
     <>
       {data.map((item: any, index: any) => (
         <div
           key={index}
-          className="my-4 flex flex-col gap-4 bg-actionSecondaryDisabled p-4"
+          className="my-4 flex flex-col gap-4 rounded-2 p-6 shadow-basicDeep"
         >
           <div className="mb-1 flex flex-wrap justify-between gap-1 lg:gap-0">
             <div className="p2-4 lg:w-2/5">
@@ -30,10 +75,10 @@ const AccessModels: React.FC<AccessModelProps> = ({ data }) => {
               <Text>{item.description}</Text>
             </div>
           </div>
-          <div className="align-center flex flex-col justify-between gap-4 sm:flex-row">
-            <CustomTags type={item.type} icon={true} />
+          <div className="align-center flex flex-col items-center justify-between gap-4 sm:flex-row">
+            <CustomTags type={item.type} />
             <Button className="h-fit w-fit" kind="secondary">
-              Download
+              Download All Resources
             </Button>
           </div>
           <div className="flex">
@@ -43,7 +88,9 @@ const AccessModels: React.FC<AccessModelProps> = ({ data }) => {
                   {/* <div className="w-3/4 text-justify">
                     <Button kind="secondary">Download</Button>
                   </div> */}
-                  <div>See Resources</div>
+                  <div className=" text-baseBlueSolid8 hover:no-underline ">
+                    See Resources
+                  </div>
                 </AccordionTrigger>
                 <AccordionContent
                   className="flex w-full flex-col p-5"
@@ -52,11 +99,12 @@ const AccessModels: React.FC<AccessModelProps> = ({ data }) => {
                     outline: '1px solid var( --base-pure-white)',
                   }}
                 >
-                  {item.resource.map((item: any, index: any) => (
-                    <div key={index}>
-                      <Text>{item.title}</Text>
-                    </div>
-                  ))}
+                  {item.resource && item.resource.length > 0 && (
+                    <ResourceTable
+                      ColumnsData={generateColumnData()}
+                      RowsData={generateTableData(item.resource)}
+                    />
+                  )}
                 </AccordionContent>
               </AccordionItem>
             </Accordion>

app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx

@@ -17,13 +17,13 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
 
   return (
     <>
-      <div className="flex justify-between">
-        <div>
-          <Text className="underline" variant="headingMd">
+      <div className="flex items-center justify-between">
+        <div className="w-full border-y-2 border-solid border-baseGraySlateSolid4 py-6">
+          <Text variant="headingLg" className="pb-2">
             About the Dataset
           </Text>
-          <br className="sm:hidden md:hidden lg:block" />
-          <Text className="sm:pl-1 md:pl-1 lg:pl-0">(METADATA)</Text>
+          <br />
+          <Text>METADATA</Text>
         </div>
         {setOpen && (
           <div className="align-center mr-2">
@@ -33,27 +33,31 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
           </div>
         )}
       </div>
-      <div className="flex flex-col flex-wrap gap-3 pt-3">
+      <div className="flex flex-col flex-wrap gap-5 pt-6">
         {/* <div className="sm:mt-1 sm:grid sm:grid-cols-1 sm:gap-2 md:mt-1 md:grid md:grid-cols-2 md:gap-2 lg:flex lg:flex-col lg:flex-wrap lg:gap-3 lg:pt-3"> */}
-        <div>
-          <Text>Source&nbsp;:</Text>
-          <Text>&nbsp;{metadata.source}</Text>
+        <div className="flex gap-2">
+          <Text className="min-w-24 basis-1/4">Source </Text>
+          <Text> {metadata.source}</Text>
         </div>
-        <div>
-          <Text>Location&nbsp;:</Text>
-          <Text>&nbsp;{metadata.location}</Text>
+        <div className="flex gap-2">
+          <Text className="min-w-24 basis-1/4">Location </Text>
+          <Text> {metadata.location}</Text>
         </div>
-        <div>
-          <Text>Update&nbsp;:</Text>
-          <Text>&nbsp;{metadata.update}</Text>
+        <div className="flex gap-2">
+          <Text className="min-w-24 basis-1/4">Update </Text>
+          <Text>{metadata.update}</Text>
         </div>
-        <div>
-          <Text>Licence&nbsp;:</Text>
-          <Text>&nbsp;{metadata.licence}</Text>
+        <div className="flex gap-2">
+          <Text className="min-w-24 basis-1/4">Licence </Text>
+          <Text>{metadata.licence}</Text>
         </div>
-        <div>
-          <Text>Policy&nbsp;:</Text>
-          <Text>&nbsp;{metadata.policy}</Text>
+        <div className="flex gap-2">
+          <Text className="min-w-24 basis-1/4">Policy </Text>
+          <Text>{metadata.policy}</Text>
+        </div>
+        <div className="flex gap-2 ">
+          <Text className="min-w-24 basis-1/4">Organization </Text>
+          <Text>{metadata.organization}</Text>
         </div>
       </div>
     </>

app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx

@@ -11,30 +11,30 @@ const PrimaryData: React.FC<PrimaryDataProps> = ({ data }) => {
       <div>
         <Text variant="headingLg">{data.datasetTitle}</Text>
       </div>
-      <div>
-        <Text variant="bodyMd">{data.description}</Text>
-      </div>
-      <div className="flex flex-wrap items-center">
-        <Text fontWeight="bold">Categories&nbsp;:</Text>
-        <Text>&nbsp;{data.metadata.category}</Text>
-      </div>
       <div className="flex flex-wrap items-center">
-        <Text fontWeight="bold">Tags&nbsp;:&nbsp;</Text>
+        {/* <Text fontWeight="bold">Tags&nbsp;:&nbsp;</Text> */}
         <div className="flex gap-2">
           {data.metadata.tags.map((item: any, index: any) => (
             <Tag key={index}>{item.title}</Tag>
           ))}
         </div>
       </div>
-      <div className="flex flex-wrap items-center">
+      <div>
+        <Text variant="bodyMd">{data.description}</Text>
+      </div>
+      {/* <div className="flex flex-wrap items-center">
+        <Text fontWeight="bold">Categories&nbsp;:</Text>
+        <Text>&nbsp;{data.metadata.category}</Text>
+      </div> */}
+
+      {/* <div className="flex flex-wrap items-center">
         <Text fontWeight="bold">Formats&nbsp;:&nbsp;</Text>
-        {/* <Text>&nbsp;Monthly</Text> */}
         <div className="flex gap-2">
           {data.metadata.formats.map((item: any, index: any) => (
             <Tag key={index}>{item.type}</Tag>
           ))}
         </div>
-      </div>
+      </div> */}
     </>
   );
 };

app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx

@@ -1,18 +1,139 @@
+import { table } from 'console';
 import React from 'react';
-import { Text } from 'opub-ui';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Dialog,
+  Table,
+  Text,
+} from 'opub-ui';
+
+import ResourceTable from '../../../components/ResourceTable';
 
 interface ResourceProps {
   data: any;
 }
 
+const generateColumnData = () => {
+  return [
+    {
+      accessorKey: 'accessModelTitle',
+      header: 'Access Model Title',
+    },
+    {
+      accessorKey: 'accessType',
+      header: 'Access Type',
+    },
+
+    {
+      accessorKey: 'fields',
+      header: 'Fields',
+      isModalTrigger: true,
+      label: 'Preview',
+      table: true,
+      modalHeader: 'Fields',
+    },
+    {
+      accessorKey: 'rows',
+      header: 'Rows',
+    },
+    {
+      accessorKey: 'count',
+      header: 'Count',
+    },
+    {
+      accessorKey: 'preview',
+      header: 'Preview',
+      isModalTrigger: true,
+      label: 'Preview',
+      table: true,
+      modalHeader: 'Preview',
+    },
+  ];
+};
+
+const generateTableData = (accessModelData: any[]) => {
+  return accessModelData.map((accessModel: any) => ({
+    accessType: accessModel.accessType,
+    accessModelTitle: accessModel.accessModelTitle,
+    fields: accessModel.fields,
+    rows: accessModel.rows,
+    count: accessModel.count,
+    preview: accessModel.preview,
+  }));
+};
+
 const Resources: React.FC<ResourceProps> = ({ data }) => {
   return (
     <>
       {data.map((item: any, index: any) => (
-        <div key={index} className="my-4 bg-actionSecondaryDisabled p-4">
-          <div className="flex flex-col gap-1">
-            <Text variant="headingMd">{item.title}</Text>
-            <Text>{item.description}</Text>
+        <div
+          key={index}
+          className="my-4 flex flex-col gap-4 rounded-2 p-6 shadow-basicDeep"
+        >
+          <div className="mb-1 flex flex-wrap justify-between gap-1 lg:gap-0">
+            <div className="p2-4 lg:w-2/5">
+              <Text variant="headingMd">{item.title}</Text>
+            </div>
+            <div className="lg:w-3/5 lg:pl-4">
+              <Text>{item.description}</Text>
+            </div>
+          </div>
+          <div className="align-center flex flex-col justify-between gap-4 sm:flex-row">
+            <Dialog>
+              <Dialog.Trigger>
+                <Button className="h-fit w-fit" kind="secondary">
+                  View Fields
+                </Button>
+              </Dialog.Trigger>
+              <Dialog.Content title={'View Fields'}>
+                <Table
+                  columns={[
+                    {
+                      accessorKey: 'title',
+                      header: 'Title',
+                    },
+                    {
+                      accessorKey: 'description',
+                      header: 'Description',
+                    },
+                  ]}
+                  rows={[
+                    { title: 'Res 1', description: 'Desc 1' },
+                    { title: 'Res 2', description: 'Desc 2' },
+                  ]}
+                  hideFooter={true}
+                />
+              </Dialog.Content>
+            </Dialog>
+          </div>
+          <div className="flex">
+            <Accordion type="single" collapsible className="w-full">
+              <AccordionItem value={`item-${index}`}>
+                <AccordionTrigger className="flex w-full flex-wrap items-center gap-2 ">
+                  <div className=" text-baseBlueSolid8 hover:no-underline ">
+                    See Access Type
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent
+                  className="flex w-full flex-col "
+                  style={{
+                    backgroundColor: 'var( --base-pure-white)',
+                    outline: '1px solid var( --base-pure-white)',
+                  }}
+                >
+                  {item.accessModelData && item.accessModelData.length > 0 && (
+                    <ResourceTable
+                      ColumnsData={generateColumnData()}
+                      RowsData={generateTableData(item.accessModelData)}
+                    />
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
           </div>
         </div>
       ))}