#2608: Complete adjustments for volunteer tracking

web-ui/src/components/certifications/EarnedCertificationsTable.css

@@ -1,6 +1,4 @@
 #earned-certifications-table {
-  display: flex;
-  justify-content: center;
 
   .MuiCardHeader-root {
     padding-bottom: 0;
@@ -13,6 +11,7 @@
 
   table {
     margin: 0 auto;
+    width: 100%;
     border-collapse: collapse;
 
     img {
@@ -43,6 +42,10 @@
   tr:nth-child(odd) {
     background-color: var(--checkins-palette-background-default);
   }
+
+  .actions-th {
+    width: 6rem;
+  }
 }
 
 .earned-certifications-dialog {

web-ui/src/components/certifications/EarnedCertificationsTable.jsx

@@ -10,6 +10,7 @@ import {
 } from '@mui/icons-material';
 import {
   Autocomplete,
+  Avatar,
   Button,
   Card,
   CardContent,
@@ -370,7 +371,7 @@ const EarnedCertificationsTable = ({
     () => (
       <Card>
         <CardHeader
-          avatar={<EmojiEvents />}
+          avatar={<Avatar sx={{ mr: 1 }}><EmojiEvents /></Avatar>}
           title="Earned Certifications"
           titleTypographyProps={{ variant: 'h5', component: 'h2' }}
         />
@@ -389,7 +390,7 @@ const EarnedCertificationsTable = ({
                       {sortIndicator(column)}
                     </th>
                   ))}
-                  <th key="Actions">Actions</th>
+                  <th className="actions-th" key="Actions">Actions</th>
                 </tr>
               </thead>
               <tbody>{earnedCertifications.map(earnedCertificationRow)}</tbody>

web-ui/src/components/dialogs/OrganizationDialog.jsx

@@ -2,24 +2,33 @@ import React from 'react';
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField } from '@mui/material';
 import PropTypes from 'prop-types';
 
-const OrganizationDialog = ({ open, onClose, onSave, organization, setOrganization }) => {
+const OrganizationDialog = ({
+  open,
+  onClose,
+  onSave,
+  organization,
+  setOrganization
+}) => {
   return (
     <Dialog open={open} onClose={onClose}>
       <DialogTitle>Create New Organization</DialogTitle>
       <DialogContent>
+        {/* This section no longer includes the option to select an existing organization */}
         <TextField
-          label="Name"
+          label="Organization Name"
           fullWidth
           margin="dense"
           value={organization.name}
           onChange={e => setOrganization({ ...organization, name: e.target.value })}
+          required
         />
         <TextField
           label="Description"
           fullWidth
           margin="dense"
           value={organization.description}
           onChange={e => setOrganization({ ...organization, description: e.target.value })}
+          required
         />
         <TextField
           label="Website"
@@ -31,7 +40,7 @@ const OrganizationDialog = ({ open, onClose, onSave, organization, setOrganizati
       </DialogContent>
       <DialogActions>
         <Button onClick={onClose}>Cancel</Button>
-        <Button onClick={onSave}>Save</Button>
+        <Button onClick={onSave} disabled={!organization.name || !organization.description}>Save</Button>
       </DialogActions>
     </Dialog>
   );

web-ui/src/components/profile/Profile.jsx

@@ -1,11 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, Typography, Button, Dialog, DialogTitle, DialogContent, DialogActions, TextField } from '@mui/material';
+import { Avatar, Typography } from '@mui/material';
 import { AppContext } from '../../context/AppContext';
 import { selectProfileMap } from '../../context/selectors';
 import { getAvatarURL } from '../../api/api.js';
 import { getMember } from '../../api/member';
-import { saveNewOrganization, saveNewEvent } from '../../api/volunteer'; // Importing the functions from volunteer.js
 
 const PREFIX = 'Profile';
 
@@ -53,30 +52,28 @@ const Root = styled('div')(() => ({
   }
 }));
 
-const Profile = ({ memberId, pdlId, checkinPdlId, showButtons = true }) => { // Add showButtons prop with default as true
+const Profile = ({ memberId, pdlId, checkinPdlId }) => {
   const { state } = useContext(AppContext);
   const { csrf } = state;
   const userProfile = selectProfileMap(state)[memberId];
 
-  const { workEmail, name, title, location, supervisorid } = userProfile ? userProfile : {};
+  const { workEmail, name, title, location, supervisorid } = userProfile
+    ? userProfile
+    : {};
 
   const [pdl, setPDL] = useState('');
   const [checkinPdl, setCheckinPdl] = useState('');
   const [supervisor, setSupervisor] = useState('');
 
-  const [organizationDialogOpen, setOrganizationDialogOpen] = useState(false);
-  const [eventDialogOpen, setEventDialogOpen] = useState(false);
-  const [newOrganization, setNewOrganization] = useState({ name: '', description: '', website: '' });
-  const [newEvent, setNewEvent] = useState({ relationshipId: '', eventDate: '', hours: 0, notes: '' });
-
   const areSamePdls = checkinPdl && pdl && checkinPdl === pdl;
 
   // Get PDL's name
   useEffect(() => {
     async function getPDLName() {
       if (pdlId) {
         let res = await getMember(pdlId, csrf);
-        let pdlProfile = res.payload.data && !res.error ? res.payload.data : undefined;
+        let pdlProfile =
+          res.payload.data && !res.error ? res.payload.data : undefined;
         setPDL(pdlProfile ? pdlProfile.name : '');
       }
     }
@@ -90,7 +87,8 @@ const Profile = ({ memberId, pdlId, checkinPdlId, showButtons = true }) => { //
     async function getCheckinPDLName() {
       if (checkinPdlId) {
         let res = await getMember(checkinPdlId, csrf);
-        let checkinPdlProfile = res.payload.data && !res.error ? res.payload.data : undefined;
+        let checkinPdlProfile =
+          res.payload.data && !res.error ? res.payload.data : undefined;
         setCheckinPdl(checkinPdlProfile ? checkinPdlProfile.name : '');
       }
     }
@@ -104,7 +102,8 @@ const Profile = ({ memberId, pdlId, checkinPdlId, showButtons = true }) => { //
     async function getSupervisorName() {
       if (supervisorid) {
         let res = await getMember(supervisorid, csrf);
-        let supervisorProfile = res.payload.data && !res.error ? res.payload.data : undefined;
+        let supervisorProfile =
+          res.payload.data && !res.error ? res.payload.data : undefined;
         setSupervisor(supervisorProfile ? supervisorProfile.name : '');
       }
     }
@@ -113,24 +112,6 @@ const Profile = ({ memberId, pdlId, checkinPdlId, showButtons = true }) => { //
     }
   }, [csrf, supervisorid]);
 
-  const handleSaveNewOrganization = async () => {
-    const result = await saveNewOrganization(csrf, newOrganization); // Use the imported API call
-    if (result.error) {
-      // Handle error
-      return;
-    }
-    setOrganizationDialogOpen(false);
-  };
-
-  const handleSaveNewEvent = async () => {
-    const result = await saveNewEvent(csrf, newEvent); // Use the imported API call
-    if (result.error) {
-      // Handle error
-      return;
-    }
-    setEventDialogOpen(false);
-  };
-
   return (
     <Root className={classes.flexRow}>
       <Avatar
@@ -157,7 +138,11 @@ const Profile = ({ memberId, pdlId, checkinPdlId, showButtons = true }) => { //
             </div>
           </div>
           <Typography variant="body2" color="textSecondary" component="p">
-            <a href={`mailto:${workEmail}`} target="_blank" rel="noopener noreferrer">
+            <a
+              href={`mailto:${workEmail}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               {workEmail}
             </a>
             <br />
@@ -167,100 +152,14 @@ const Profile = ({ memberId, pdlId, checkinPdlId, showButtons = true }) => { //
             <br />
             Current PDL: {pdl}
             <br />
-            {checkinPdl && !areSamePdls && `PDL @ Time of Check-In: ${checkinPdl}`}
+            {checkinPdl &&
+              !areSamePdls &&
+              `PDL @ Time of Check-In: ${checkinPdl}`}
           </Typography>
-
-          {/* Conditionally render the buttons based on showButtons prop */}
-          {showButtons && (
-            <>
-              <Button
-                variant="contained"
-                onClick={() => setOrganizationDialogOpen(true)}
-                style={{ marginTop: '20px' }}
-                aria-label="Add New Organization"
-              >
-                Add New Organization
-              </Button>
-
-              <Button
-                variant="contained"
-                onClick={() => setEventDialogOpen(true)}
-                style={{ marginTop: '20px', marginLeft: '10px' }}
-                aria-label="Add New Event"
-              >
-                Add New Event
-              </Button>
-            </>
-          )}
         </div>
       </div>
-
-      {/* Organization Creation Dialog */}
-      <Dialog open={organizationDialogOpen} onClose={() => setOrganizationDialogOpen(false)}>
-        <DialogTitle>Create New Organization</DialogTitle>
-        <DialogContent>
-          <TextField
-            label="Name"
-            fullWidth
-            margin="dense"
-            value={newOrganization.name}
-            onChange={e => setNewOrganization({ ...newOrganization, name: e.target.value })}
-          />
-          <TextField
-            label="Description"
-            fullWidth
-            margin="dense"
-            value={newOrganization.description}
-            onChange={e => setNewOrganization({ ...newOrganization, description: e.target.value })}
-          />
-          <TextField
-            label="Website URL"
-            fullWidth
-            margin="dense"
-            value={newOrganization.website}
-            onChange={e => setNewOrganization({ ...newOrganization, website: e.target.value })}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setOrganizationDialogOpen(false)}>Cancel</Button>
-          <Button onClick={handleSaveNewOrganization}>Save</Button>
-        </DialogActions>
-      </Dialog>
-
-      {/* Event Creation Dialog */}
-      <Dialog open={eventDialogOpen} onClose={() => setEventDialogOpen(false)}>
-        <DialogTitle>Create New Event</DialogTitle>
-        <DialogContent>
-          <TextField
-            label="Event Date"
-            fullWidth
-            margin="dense"
-            value={newEvent.eventDate}
-            onChange={e => setNewEvent({ ...newEvent, eventDate: e.target.value })}
-          />
-          <TextField
-            label="Hours"
-            fullWidth
-            margin="dense"
-            type="number"
-            value={newEvent.hours}
-            onChange={e => setNewEvent({ ...newEvent, hours: e.target.value })}
-          />
-          <TextField
-            label="Notes"
-            fullWidth
-            margin="dense"
-            value={newEvent.notes}
-            onChange={e => setNewEvent({ ...newEvent, notes: e.target.value })}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setEventDialogOpen(false)}>Cancel</Button>
-          <Button onClick={handleSaveNewEvent}>Save</Button>
-        </DialogActions>
-      </Dialog>
     </Root>
   );
 };
 
-export default Profile;
+export default Profile;

web-ui/src/components/profile/__snapshots__/Profile.test.jsx.snap

@@ -56,30 +56,6 @@ exports[`renders correctly 1`] = `
           Current PDL: 
           <br />
         </p>
-        <button
-          aria-label="Add New Organization"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
-          style="margin-top: 20px;"
-          tabindex="0"
-          type="button"
-        >
-          Add New Organization
-          <span
-            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-          />
-        </button>
-        <button
-          aria-label="Add New Event"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-sghohy-MuiButtonBase-root-MuiButton-root"
-          style="margin-top: 20px; margin-left: 10px;"
-          tabindex="0"
-          type="button"
-        >
-          Add New Event
-          <span
-            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-          />
-        </button>
       </div>
     </div>
   </div>

web-ui/src/components/skills/SkillSection.css

@@ -79,7 +79,6 @@
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-end;
-  padding: 0 16px 16px 16px;
   justify-content: space-between;
 }
 

web-ui/src/components/skills/SkillSection.jsx

@@ -23,9 +23,11 @@ import { getSkill, createSkill } from '../../api/skill.js';
 import SkillSlider from './SkillSlider';
 
 import {
+  Avatar,
   Button,
   Card,
   CardActions,
+  CardContent,
   Dialog,
   DialogActions,
   DialogContent,
@@ -280,9 +282,10 @@ const SkillSection = ({ userId }) => {
       </Modal>
       <Root>
         <Card>
+          <CardContent>
           <div className="skill-card-header">
             <div className="skill-card-header-title">
-              <BuildIcon style={{ marginRight: '16px' }} />
+              <Avatar sx={{ mr: 1 }}><BuildIcon/></Avatar>
               <Typography variant="h5" component="h2">
                 Skills
               </Typography>
@@ -315,6 +318,7 @@ const SkillSection = ({ userId }) => {
                 );
               })}
           </List>
+          </CardContent>
           <CardActions>
             <div>
               <Dialog