first steps

pages/fdo/show/[prefix]/sandbox.tsx

+import React from 'react'
+import { ErrorComponent } from '../../../../src/components/ErrorComponent';
+import { GetServerSideProps } from 'next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useShow, useTranslate, useParsed, useCustom, useApiUrl } from '@refinedev/core';
+import { Show } from '@refinedev/mui';
+import { CardContent, Typography } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
+import Link from '@mui/material/Link';
+import StorageIcon from '@mui/icons-material/Storage';
+import Paper from '@mui/material/Paper';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+import Divider from '@mui/material/Divider';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import ReportIcon from '@mui/icons-material/Report';
+import Table from '../../../../src/components/fdos/table';
+import { styled } from '@mui/material/styles';
+import Details from '../../../../src/components/fdos/details';
+
+
+const resolvePid = (pid: string) => `https://hdl.handle.net/${pid}`
+
+const ShowFDO = () => {
+  const { params } = useParsed()
+  const showId = `${params?.prefix}/${params?.suffix}`
+  const apiUrl = useApiUrl()
+  const t = useTranslate()
+  const { data, isLoading, isError, error } = useCustom({
+    url: `${apiUrl}/fdo/${showId}`,
+    method: 'get',
+    errorNotification: () => false,
+    queryOptions: {
+      retry: false
+    }
+  })
+
+  if (isError) {
+    return <ErrorComponent message={t('fdo.show.handle_not_found', 'Handle not found.')} />
+  }
+
+  const handleUrl = resolvePid(showId)
+  const dataPid = data?.data?.dataPid
+  const metadataPid = data?.data?.metadataPid
+  const profilePid = '21.T11969/141bf451b18a79d0fe66'
+  const Item = styled(Paper)(({ theme }) => ({
+    backgroundColor: '#fff',
+    ...theme.typography.body2,
+    padding: theme.spacing(1),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    ...theme.applyStyles('dark', {
+      backgroundColor: '#1A2027',
+    }),
+  }));
+
+  return (
+    <Show
+      isLoading={isLoading}
+      title={<Typography variant="h5">{ showId }{ !isLoading && (data?.data?.isFdo ? <Chip label="FDO" color="success" variant="outlined" /> : <Chip label="Not an FDO" color="error" variant="outlined" />)}</Typography>}
+    >
+      { isLoading && <Box sx={{ textAlign: 'center' }}><CircularProgress/></Box>}
+
+      <div>
+      <Stack
+        direction="row"
+        divider={<Divider orientation="vertical" flexItem />}
+        spacing={2}
+      >
+        <Item>
+      <MenuList>
+        <MenuItem>
+          <ListItemIcon>
+            <RadioButtonUncheckedIcon/>
+          </ListItemIcon>
+          <ListItemText>
+              <Link href={`${handleUrl}?noredirect`}>Handle Record</Link>
+          </ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <StorageIcon/>
+          </ListItemIcon>
+          <ListItemText>
+            <Link href={handleUrl}>To Repository</Link>
+          </ListItemText>
+        </MenuItem>
+        { data?.data?.isFdo && (<>
+          <Divider />
+          <MenuItem>
+            <ListItemIcon>
+              { dataPid
+                ? <VerifiedIcon color="success"/>
+                : <ReportIcon color="error"/>
+              }
+            </ListItemIcon>
+            <ListItemText>
+              { metadataPid
+                ? <Link href={resolvePid(dataPid)}>Data</Link>
+                : 'Data not available.'
+              }
+            </ListItemText>
+          </MenuItem>
+          <MenuItem>
+            <ListItemIcon>
+              { metadataPid
+                ? <VerifiedIcon color="success"/>
+                : <ReportIcon color="error"/>
+              }
+            </ListItemIcon>
+            <ListItemText>
+              { metadataPid
+                ? <Link href={resolvePid(metadataPid)}>Metadata</Link>
+                : 'Metadata not available.'
+              }
+            </ListItemText>
+          </MenuItem>
+          <MenuItem>
+            <ListItemIcon>
+              { profilePid
+                ? <VerifiedIcon color="success"/>
+                : <ReportIcon color="error"/>
+              }
+            </ListItemIcon>
+            <ListItemText>
+              { profilePid
+                ? <Link href={resolvePid(profilePid)}>Profile</Link>
+                : 'Profile not available.'
+              }
+            </ListItemText>
+          </MenuItem>
+        </>)}
+      </MenuList>
+    
+        </Item>
+        <Item>
+            <h2>FDO Name</h2>
+            <Details/>
+        </Item> 
+        <Item sx={{width: '30%' }}>
+        <h3>Description</h3><br/>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        </Item>
+        </Stack>
+    </div>
+         <br/>
+          <Table/>
+              
+    </Show>
+
+  )
+}
+
+export default ShowFDO
+
+export const getServerSideProps: GetServerSideProps<{}> = async (context) => {
+  const translateProps = await serverSideTranslations(context.locale ?? 'en', [
+    'common'
+  ])
+
+  return {
+    props: {
+      ...translateProps
+    }
+  }
+}

src/components/fdos/details.tsx

+import * as React from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Divider from '@mui/material/Divider';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+
+export default function AlignItemsList() {
+  return (
+    
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
+      <ListItem alignItems="flex-start">
+        <ListItemAvatar>
+          <Avatar alt="LinkAhead Logo" src="/linkahead_icon_256.png" />
+        </ListItemAvatar>
+        <ListItemText
+          primary="Repository: LinkAhead XX"
+          secondary={
+            <React.Fragment>
+              <Typography
+                component="span"
+                variant="body2"
+                sx={{ color: 'text.primary', display: 'inline' }}
+              >
+                Further Information: 
+              </Typography>
+              {"Lorem ipsum dolor sit amet."}
+            </React.Fragment>
+          }
+        />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+      <ListItem alignItems="flex-start">
+        
+        <ListItemText
+          primary="Dataspace: RWTH"
+          secondary={
+            <React.Fragment>
+              <Typography
+                component="span"
+                variant="body2"
+                sx={{ color: 'text.primary', display: 'inline' }}
+              >
+                Further Information: 
+              </Typography>
+              {"Lorem ipsum dolor sit amet."}
+            </React.Fragment>
+          }
+        />
+        <ListItemAvatar>
+        <Avatar alt="Text" src="" />
+        </ListItemAvatar>
+      </ListItem>
+      <Divider variant="inset" component="li" />
+      <ListItem alignItems="flex-start">
+        <ListItemAvatar>
+        <Avatar alt="Text" src="" />
+        </ListItemAvatar>
+        <ListItemText
+          primary="Technology: EDC"
+          secondary={
+            <React.Fragment>
+              <Typography
+                component="span"
+                variant="body2"
+                sx={{ color: 'text.primary', display: 'inline' }}
+              >
+                Further Information: 
+              </Typography>
+              {"Lorem ipsum dolor sit amet."}
+            </React.Fragment>
+          }
+        />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+      <ListItem alignItems="flex-start">
+        <ListItemAvatar>
+        <Avatar alt="Text" src="" />
+        </ListItemAvatar>
+        <ListItemText
+          primary="Type: CETTS"
+          secondary={
+            <React.Fragment>
+              <Typography
+                component="span"
+                variant="body2"
+                sx={{ color: 'text.primary', display: 'inline' }}
+              >
+                Further Information: 
+              </Typography>
+              {"Lorem ipsum dolor sit amet."}
+            </React.Fragment>
+          }
+        />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+      <ListItem alignItems="flex-start">
+        <ListItemAvatar>
+        <Avatar alt="Text" src="" />
+        </ListItemAvatar>
+        <ListItemText
+          primary="Display Name: "
+          secondary={
+            <React.Fragment>
+              <Typography
+                component="span"
+                variant="body2"
+                sx={{ color: 'text.primary', display: 'inline' }}
+              >
+                Further Information: 
+              </Typography>
+              {"Lorem ipsum dolor sit amet."}
+            </React.Fragment>
+          }
+        />
+      </ListItem>
+    </List>
+  );
+}
\ No newline at end of file

src/components/fdos/table.tsx

+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+import IconButton from '@mui/material/IconButton';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+
+function createData(
+  name: string,
+  type: string,
+  dataspace: string,
+) {
+  return {
+    name,
+    type,
+    dataspace,
+    details: [
+      {
+        update: '2020-01-05',
+        customerId: '11091700',
+        amount: 'ASS',
+      },
+      {
+        update: '2020-01-02',
+        customerId: '23987003',
+        amount: 'LinkAhead',
+      },
+    ],
+  };
+}
+
+function Row(props: { row: ReturnType<typeof createData> }) {
+  const { row } = props;
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+        <TableCell>
+          <IconButton
+            aria-label="expand row"
+            size="small"
+            onClick={() => setOpen(!open)}
+          >
+            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+          </IconButton>
+        </TableCell>
+        <TableCell component="th" scope="row">
+          {row.name}
+        </TableCell>
+        <TableCell align="right">{row.type}</TableCell>
+        <TableCell align="right">{row.dataspace}</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Box sx={{ margin: 1 }}>
+              <Typography variant="h6" gutterBottom component="div">
+                Details
+              </Typography>
+              <Table size="small" aria-label="purchases">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>UPDATE</TableCell>
+                    <TableCell>CUSTOMER-ID</TableCell>
+                    <TableCell align="right">DATASPACE</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {row.details.map((detailsRow) => (
+                    <TableRow key={detailsRow.update}>
+                      <TableCell component="th" scope="row">
+                        {detailsRow.update}
+                      </TableCell>
+                      <TableCell>{detailsRow.customerId}</TableCell>
+                      <TableCell component="th" scope="row">
+                      </TableCell>
+                      <TableCell>{detailsRow.amount}</TableCell>
+                      <TableCell component="th" scope="row">
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </Box>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </React.Fragment>
+  );
+}
+const rows = [
+  createData('CETTS-D2-2024-07-08', '159', '6.0'),
+  createData('CETTS-D2-2024-06-24', '237', '9.0'),
+  createData('CETTS-XD2-2024-06-03', '262', '16.0'),
+  createData('CETTS-L2a-2024-05-08', '305', '3.7'),
+  createData('CETTS-XD3a-2024-03-11', '356', '16.0'),
+];
+export default function CollapsibleTable() {
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="collapsible table">
+        <TableHead>
+          <TableRow>
+            <TableCell />
+            <TableCell>Name & Date</TableCell>
+            <TableCell align="right">Time</TableCell>
+            <TableCell align="right">Device</TableCell>
+            <TableCell align="right">Status</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <Row key={row.name} row={row} />
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
\ No newline at end of file