From a74606dfba65b916fc99e8a7b61600811b835575 Mon Sep 17 00:00:00 2001
From: Jeevant Verma <jverma_be23@thapar.edu>
Date: Tue, 25 Jun 2024 17:24:24 +0530
Subject: [PATCH] approvals component in admin page added

---
 .../src/Adminpagecomponents/Approvals.jsx     | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 frontend/src/Adminpagecomponents/Approvals.jsx

diff --git a/frontend/src/Adminpagecomponents/Approvals.jsx b/frontend/src/Adminpagecomponents/Approvals.jsx
new file mode 100644
index 0000000..b4c77b8
--- /dev/null
+++ b/frontend/src/Adminpagecomponents/Approvals.jsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react'; // Import useEffect
+import { DataGrid } from '@mui/x-data-grid';
+import { Grid, Avatar, Button, Dialog, DialogTitle, DialogContent, DialogActions, IconButton } from '@mui/material';
+import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
+import data from '../data/approvals.json';
+
+const columns = [
+  {
+    field: 'avatar',
+    headerName: 'Avatar',
+    width: 80,
+    disableColumnMenu: true,
+    renderCell: (params) => {
+      const firstInitial = params.row.username.charAt(0).toUpperCase();
+      return (
+        <Grid container alignItems="center" justifyContent="left" sx={{ display: 'flex', width: '100%', height: '100%' }}>
+          <Avatar sx={{ bgcolor: 'primary.main' }}>
+            {firstInitial}
+          </Avatar>
+        </Grid>
+      );
+    },
+    sortable: false,
+    filterable: false,
+  },
+  { field: 'username', headerName: 'From', width: 200 },
+  { field: 'websiteAlias', headerName: 'Website Alias', width: 200 },
+  { field: 'date', headerName: 'Submitted', width: 200, sortable: false, filterable: false },
+  {
+    field: 'actions',
+    headerName: 'Link and Actions',
+    width: 150,
+    disableColumnMenu: true,
+    renderCell: (params) => {
+      const [openLink, setOpenLink] = useState(false);
+
+      const handleClickOpen = () => {
+        setOpenLink(true);
+      };
+
+      const handleApprove = () => {
+        console.log('Approve link:', params.row.link);
+      };
+
+      const handleDeny = () => {
+        console.log('Deny link:', params.row.link);
+      };
+
+      return (
+        <>
+          <IconButton onClick={handleClickOpen}>
+            <OpenInNewRoundedIcon />
+          </IconButton>
+          <Dialog open={openLink} onClose={() => setOpenLink(false)}>
+            <DialogTitle>Open Link</DialogTitle>
+            <DialogContent>
+              <a href={params.row.link} target="_blank" rel="noreferrer noopener">
+                {params.row.link}
+              </a>
+            </DialogContent>
+            <DialogActions>
+              <Button variant="contained" color="primary" onClick={handleApprove}>
+                Approve
+              </Button>
+              <Button variant="contained" color="error" onClick={handleDeny}>
+                Deny
+              </Button>
+            </DialogActions>
+          </Dialog>
+        </>
+      );
+    },
+    sortable: false,
+    filterable: false,
+  },
+];
+
+const Approvals = () => {
+  const [rows, setRows] = useState([]);
+
+  useEffect(() => {
+    setRows(data);
+  }, []);
+
+  return (
+    <DataGrid rows={rows} columns={columns} disableColumnSelector={true} />
+  );
+};
+
+export default Approvals;
\ No newline at end of file