From: charleswrayjr <charleswrayjr@gmail.com>
Date: Sun, 14 Sep 2025 00:00:16 +0000 (-0500)
Subject: Cleaning up Dashboard.jsx main view.
X-Git-Url: https://git.phasecustomsoft.com/?a=commitdiff_plain;h=4bfe78e7797f6595db4b79a7f080d4ff0cc52113;p=phs-admin.git

Cleaning up Dashboard.jsx main view.
---

diff --git a/src/app/views/Dashboard/Dashboard.jsx b/src/app/views/Dashboard/Dashboard.jsx
index 2432153..3c70e51 100755
--- a/src/app/views/Dashboard/Dashboard.jsx
+++ b/src/app/views/Dashboard/Dashboard.jsx
@@ -2,177 +2,253 @@
  * @file Dashboard view with informative widgets
  */
 
-import React, { useContext, useEffect, useState } from 'react';
-import { Container, Grid, Card, CardContent, Typography, Box, Button } from '@mui/material';
-import { MaterialReactTable } from 'material-react-table';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { Box, Button, Card, CardContent, Container, Grid, Typography } from '@mui/material';
+import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
 import { useNavigate } from 'react-router-dom';
 import { useSnackbar } from 'notistack';
 import { AuthContext } from '../../components/AuthContext';
-import { MessageService, MediaService, PostService, MessageGroupService } from '../../services';
+import { MediaService, MessageGroupService, MessageService, PostService } from '../../services';
 import { getFormattedDate, truncateContent } from '../../utils';
 
+/**
+ * @typedef {Object} User
+ * @property {number} id
+ * @property {string} first_name
+ * @property {string} last_name
+ * @property {string} email
+ */
+
 const Dashboard = () => {
   const navigate = useNavigate();
   const { enqueueSnackbar } = useSnackbar();
-  const { user } = useContext(AuthContext);
-  const [recentMessages, setRecentMessages] = useState([]);
-  const [recentMedia, setRecentMedia] = useState([]);
-  const [recentPosts, setRecentPosts] = useState([]);
-  const [recentGroups, setRecentGroups] = useState([]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        // Fetch recent messages
-        const messages = await MessageService.getMessages({ limit: 5 });
-        setRecentMessages(messages.data);
-
-        // Fetch recent media (filtered by visibility for non-Admin)
-        const mediaParams = user?.roles.includes('Admin') ? { limit: 5 } : { limit: 5, visibility: ['public', 'family'] };
-        const media = await MediaService.getMedia(mediaParams);
-        setRecentMedia(media.data);
-
-        // Fetch recent posts (filtered by visibility for non-Admin)
-        const postsParams = user?.roles.includes('Admin') ? { limit: 5 } : { limit: 5, visibility: ['public', 'family'] };
-        const posts = await PostService.getPosts(postsParams);
-        setRecentPosts(posts.data);
-
-        // Fetch recent message groups
-        const groups = await MessageGroupService.getMessageGroups({ limit: 5 });
-        setRecentGroups(groups.data);
-      } catch (error) {
-        enqueueSnackbar(`Error fetching dashboard data: ${error.message}`, { variant: 'error' });
-      }
-    };
-    fetchData();
-  }, [enqueueSnackbar, user]);
+  const { user } = useContext( AuthContext );
+  const [recentMessages, setRecentMessages] = useState( [] );
+  const [recentMedia, setRecentMedia] = useState( [] );
+  const [recentPosts, setRecentPosts] = useState( [] );
+  const [recentGroups, setRecentGroups] = useState( [] );
+
+  const fetchData = useMemo( () => async () => {
+    try {
+      // Fetch recent messages
+      const messages = await MessageService.getMessages( { limit:5 } );
+      setRecentMessages( messages.data );
+
+      // Fetch recent media (filtered by visibility for non-Admin)
+      const mediaParams = user?.roles.includes( 'Admin' ) ? { limit:5 } : { limit:5, visibility:['public', 'family'] };
+      const media = await MediaService.getMedia( mediaParams );
+      setRecentMedia( media.data );
+
+      // Fetch recent posts (filtered by visibility for non-Admin)
+      const postsParams = user?.roles.includes( 'Admin' ) ? { limit:5 } : { limit:5, visibility:['public', 'family'] };
+      const posts = await PostService.getPosts( postsParams );
+      setRecentPosts( posts.data );
+
+      // Fetch recent message groups
+      const groups = await MessageGroupService.getMessageGroups( { limit:5 } );
+      setRecentGroups( groups.data );
+    } catch (error) {
+      enqueueSnackbar( `Error fetching dashboard data: ${ error.message }`, { variant:'error' } );
+    }
+  }, [enqueueSnackbar, user] );
+
+  useEffect( () => {
+    fetchData().catch();
+  }, [enqueueSnackbar, user, fetchData] );
 
   const messageColumns = [
-    { accessorKey: 'sender_id', header: 'Sender ID', size: 100 },
-    { accessorKey: 'content', header: 'Content', size: 200, Cell: ({ cell }) => cell.getValue() },
-    { accessorKey: 'created_at', header: 'Sent At', size: 150, Cell: ({ cell }) => getFormattedDate(cell.getValue()) },
+    { accessorKey:'sender_id', header:'Sender ID', size:100 },
+    { accessorKey:'content', header:'Content', size:200, Cell:( { cell } ) => truncateContent( cell.getValue(), 50 ) },
+    { accessorKey:'read', header:'Read', size:80, Cell:( { cell } ) => (cell.getValue() ? 'Yes' : 'No') },
+    { accessorKey:'created_at', header:'Sent At', size:150, Cell:( { cell } ) => getFormattedDate( cell.getValue() ) },
   ];
 
   const mediaColumns = [
-    { accessorKey: 'file_path', header: 'File Path', size: 200 },
-    { accessorKey: 'file_type', header: 'Type', size: 100 },
-    { accessorKey: 'visibility', header: 'Visibility', size: 100 },
-    { accessorKey: 'created_at', header: 'Uploaded At', size: 150, Cell: ({ cell }) => getFormattedDate(cell.getValue()) },
+    { accessorKey:'file_path', header:'File Path', size:200 },
+    { accessorKey:'file_type', header:'Type', size:100 },
+    { accessorKey:'visibility', header:'Visibility', size:100 },
+    {
+      accessorKey:'created_at',
+      header:'Uploaded At',
+      size:150,
+      Cell:( { cell } ) => getFormattedDate( cell.getValue() )
+    },
   ];
 
   const postColumns = [
-    { accessorKey: 'title', header: 'Title', size: 200 },
-    { accessorKey: 'post_type', header: 'Type', size: 100 },
-    { accessorKey: 'visibility', header: 'Visibility', size: 100 },
-    { accessorKey: 'created_at', header: 'Posted At', size: 150, Cell: ({ cell }) => getFormattedDate(cell.getValue()) },
+    { accessorKey:'title', header:'Title', size:200 },
+    { accessorKey:'post_type', header:'Type', size:100 },
+    { accessorKey:'visibility', header:'Visibility', size:100 },
+    {
+      accessorKey:'created_at',
+      header:'Posted At',
+      size:150,
+      Cell:( { cell } ) => getFormattedDate( cell.getValue() )
+    },
   ];
 
   const groupColumns = [
-    { accessorKey: 'name', header: 'Group Name', size: 200 },
-    { accessorKey: 'created_by_id', header: 'Created By', size: 100 },
-    { accessorKey: 'created_at', header: 'Created At', size: 150, Cell: ({ cell }) => getFormattedDate(cell.getValue()) },
+    { accessorKey:'name', header:'Group Name', size:200 },
+    { accessorKey:'created_by_id', header:'Created By', size:100 },
+    {
+      accessorKey:'created_at',
+      header:'Created At',
+      size:150,
+      Cell:( { cell } ) => getFormattedDate( cell.getValue() )
+    },
   ];
 
+  const messageTable = useMaterialReactTable( {
+    columns:messageColumns,
+    data:recentMessages,
+    enableColumnActions:false,
+    enableColumnFilters:false,
+    enablePagination:false,
+    enableSorting:false,
+    muiTablePaperProps:{
+      className:'shadow-none',
+    },
+    muiTableHeadCellProps:{
+      className:'table-header',
+    },
+    muiTableBodyCellProps:{
+      className:'table-row',
+    }
+  } );
+
+  const mediaTable = useMaterialReactTable( {
+    columns:mediaColumns,
+    data:recentMedia,
+    enableColumnActions:false,
+    enableColumnFilters:false,
+    enablePagination:false,
+    enableSorting:false,
+    muiTablePaperProps:{
+      className:'shadow-none',
+    },
+    muiTableHeadCellProps:{
+      className:'table-header',
+    },
+    muiTableBodyCellProps:{
+      className:'table-row',
+    }
+  } );
+
+  const postTable = useMaterialReactTable( {
+    columns:postColumns,
+    data:recentPosts,
+    enableColumnActions:false,
+    enableColumnFilters:false,
+    enablePagination:false,
+    enableSorting:false,
+    muiTablePaperProps:{
+      className:'shadow-none',
+    },
+    muiTableHeadCellProps:{
+      className:'table-header',
+    },
+    muiTableBodyCellProps:{
+      className:'table-row',
+    }
+  } );
+
+  const groupTable = useMaterialReactTable( {
+    columns:groupColumns,
+    data:recentGroups,
+    enableColumnActions:false,
+    enableColumnFilters:false,
+    enablePagination:false,
+    enableSorting:false,
+    muiTablePaperProps:{
+      className:'shadow-none',
+    },
+    muiTableHeadCellProps:{
+      className:'table-header',
+    },
+    muiTableBodyCellProps:{
+      className:'table-row',
+    }
+  } );
+
   return (
-    <Container maxWidth="xl" className="container">
-      <Typography variant="h4" className="text-3xl font-bold mb-6 mt-4">
-        Welcome to PHS Admin{user ? `, ${user.first_name || 'User ' + user.id}` : ''}
+    <Container maxWidth="xxl">
+      <Typography variant="h4"
+                  className="text-3xl font-bold mb-6 mt-4">
+        Welcome to PHS Admin{ user ? `, ${ user.first_name || 'User ' + user.id }` : '' }
       </Typography>
-      <Grid container spacing={3}>
-        <Grid item xs={12} md={6}>
-          <Card className="shadow-md rounded-lg">
+      <Grid container
+            spacing={ 2 }
+            className="w-full">
+        <Grid item
+              size={ { xs:12, md:6 } }>
+          <Card className="shadow-md rounded-lg w-full">
             <CardContent>
-              <Typography variant="h6" className="font-semibold mb-2">
+              <Typography variant="h6"
+                          className="font-semibold mb-2">
                 Recent Messages
               </Typography>
-              <MaterialReactTable
-                columns={messageColumns}
-                data={recentMessages}
-                enableColumnActions={false}
-                enableColumnFilters={false}
-                enablePagination={false}
-                enableSorting={false}
-                muiTablePaperProps={{ className: 'shadow-none' }}
-                muiTableHeadCellProps={{ className: 'table-header' }}
-                muiTableBodyCellProps={{ className: 'table-row' }}
-              />
-              <Box mt={2}>
-                <Button variant="contained" color="primary" onClick={() => navigate('/messages')}>
+              <MaterialReactTable table={ messageTable }/>
+              <Box mt={ 2 }>
+                <Button variant="contained"
+                        color="primary"
+                        onClick={ () => navigate( '/messages' ) }>
                   View All Messages
                 </Button>
               </Box>
             </CardContent>
           </Card>
         </Grid>
-        <Grid item xs={12} md={6}>
+        <Grid item
+              size={ { xs:12, md:6 } }>
           <Card className="shadow-md rounded-lg">
             <CardContent>
-              <Typography variant="h6" className="font-semibold mb-2">
+              <Typography variant="h6"
+                          className="font-semibold mb-2">
                 Recent Media
               </Typography>
-              <MaterialReactTable
-                columns={mediaColumns}
-                data={recentMedia}
-                enableColumnActions={false}
-                enableColumnFilters={false}
-                enablePagination={false}
-                enableSorting={false}
-                muiTablePaperProps={{ className: 'shadow-none' }}
-                muiTableHeadCellProps={{ className: 'table-header' }}
-                muiTableBodyCellProps={{ className: 'table-row' }}
-              />
-              <Box mt={2}>
-                <Button variant="contained" color="primary" onClick={() => navigate('/media')}>
+              <MaterialReactTable table={ mediaTable }/>
+              <Box mt={ 2 }>
+                <Button variant="contained"
+                        color="primary"
+                        onClick={ () => navigate( '/media' ) }>
                   View All Media
                 </Button>
               </Box>
             </CardContent>
           </Card>
         </Grid>
-        <Grid item xs={12} md={6}>
+        <Grid item
+              size={ { xs:12, md:6 } }>
           <Card className="shadow-md rounded-lg">
             <CardContent>
-              <Typography variant="h6" className="font-semibold mb-2">
+              <Typography variant="h6"
+                          className="font-semibold mb-2">
                 Recent Posts
               </Typography>
-              <MaterialReactTable
-                columns={postColumns}
-                data={recentPosts}
-                enableColumnActions={false}
-                enableColumnFilters={false}
-                enablePagination={false}
-                enableSorting={false}
-                muiTablePaperProps={{ className: 'shadow-none' }}
-                muiTableHeadCellProps={{ className: 'table-header' }}
-                muiTableBodyCellProps={{ className: 'table-row' }}
-              />
-              <Box mt={2}>
-                <Button variant="contained" color="primary" onClick={() => navigate('/posts')}>
+              <MaterialReactTable table={ postTable }/>
+              <Box mt={ 2 }>
+                <Button variant="contained"
+                        color="primary"
+                        onClick={ () => navigate( '/posts' ) }>
                   View All Posts
                 </Button>
               </Box>
             </CardContent>
           </Card>
         </Grid>
-        <Grid item xs={12} md={6}>
+        <Grid item
+              size={ { xs:12, md:6 } }>
           <Card className="shadow-md rounded-lg">
             <CardContent>
-              <Typography variant="h6" className="font-semibold mb-2">
+              <Typography variant="h6"
+                          className="font-semibold mb-2">
                 Recent Message Groups
               </Typography>
-              <MaterialReactTable
-                columns={groupColumns}
-                data={recentGroups}
-                enableColumnActions={false}
-                enableColumnFilters={false}
-                enablePagination={false}
-                enableSorting={false}
-                muiTablePaperProps={{ className: 'shadow-none' }}
-                muiTableHeadCellProps={{ className: 'table-header' }}
-                muiTableBodyCellProps={{ className: 'table-row' }}
-              />
-              <Box mt={2}>
-                <Button variant="contained" color="primary" onClick={() => navigate('/message-groups')}>
+              <MaterialReactTable table={ groupTable }/>
+              <Box mt={ 2 }>
+                <Button variant="contained"
+                        color="primary"
+                        onClick={ () => navigate( '/message-groups' ) }>
                   View All Groups
                 </Button>
               </Box>