List user in collaborators

ui/src/components/custom/search/matrixExplorer.tsx

@@ -387,7 +387,6 @@ const MatrixExplorer: React.FC = () => {
           <MiniMatrixCard
             key={matrix.matrixId}
             title={matrix.name}
-            description={matrix.description}
             onSelectMatrix={() => handleMatrixSelect(matrix.matrixId)}
             titleColor="#ffffff"
           />

ui/src/components/custom/search/miniMatrixCard.tsx

@@ -3,14 +3,12 @@ import { Typography, Paper } from "@mui/material";
 
 interface MiniMatrixCardProps {
   title: string;
-  description: string;
   onSelectMatrix: () => void;
   titleColor?: string;
 }
 
 const MiniMatrixCard: React.FC<MiniMatrixCardProps> = ({
   title,
-  description,
   onSelectMatrix,
   titleColor = "#ffffff",
 }) => {
@@ -31,10 +29,10 @@ const MiniMatrixCard: React.FC<MiniMatrixCardProps> = ({
           transform: "translateY(-2px)",
           boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)",
         },
-        minHeight: "80px",
+        minHeight: "60px",
         display: 'flex',
         flexDirection: 'column',
-        gap: 1,
+        justifyContent: 'center',
         boxSizing: 'border-box',
       }}
       onClick={onSelectMatrix}
@@ -52,21 +50,6 @@ const MiniMatrixCard: React.FC<MiniMatrixCardProps> = ({
       >
         {title || ""}
       </Typography>
-      <Typography 
-        variant="caption" 
-        sx={{ 
-          display: "-webkit-box",
-          WebkitLineClamp: 3,
-          WebkitBoxOrient: "vertical",
-          overflow: "hidden",
-          fontSize: "0.8rem",
-          lineHeight: 1.4,
-          color: "rgba(255, 255, 255, 0.7)",
-          flex: 1,
-        }}
-      >
-        {description || ""}
-      </Typography>
     </Paper>
   );
 };

ui/src/pages/CreateMatrix.tsx

@@ -23,7 +23,7 @@ import {
   Modal,
   IconButton,
 } from "@mui/material";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { whoamiUpsert, createMatrix } from "./apiService";
 import SendIcon from "@mui/icons-material/Send";
@@ -68,6 +68,27 @@ export const CreateMatrix: React.FC = () => {
 
   const [multipliers, setMultipliers] = useState(initialMultipliers);
 
+  // Fetch the current user's email when the component loads
+  useEffect(() => {
+    const fetchUserEmail = async () => {
+      try {
+        const whoamiUpsertResponse = await whoamiUpsert();
+        const rawData = whoamiUpsertResponse.data;
+        const firstObjectEnd = rawData.indexOf("}") + 1;
+        const firstObjectStr = rawData.substring(0, firstObjectEnd);
+        const parsedFirstObject = JSON.parse(firstObjectStr);
+        const { email } = parsedFirstObject;
+
+        // Initialize the participants list with the current user as a host
+        setParticipantsData([{ email: email, role: "Host" }]);
+      } catch (error) {
+        console.error("Error fetching user email:", error);
+      }
+    };
+
+    fetchUserEmail();
+  }, []);
+
   const carverOrder = [
     { key: "Criticality", header: "C" },
     { key: "Accessibility", header: "A" },
@@ -296,7 +317,7 @@ export const CreateMatrix: React.FC = () => {
       const firstObjectEnd = rawData.indexOf("}") + 1;
       const firstObjectStr = rawData.substring(0, firstObjectEnd);
       const parsedFirstObject = JSON.parse(firstObjectStr);
-      const { userId, email } = parsedFirstObject;
+      const { userId } = parsedFirstObject;
 
       const items = targets.map((target, index) => ({
         itemName: target,
@@ -308,15 +329,15 @@ export const CreateMatrix: React.FC = () => {
         recognizability: {},
         images: targetImages[index] || []
       }));
-      const hosts = [
-        email,
-        ...participantsData
-          .map((p) =>
-            p.role === "Host" || p.role === "Host and Participant" ? p.email : null
-          )
-          .filter((email): email is string => email !== null),
-      ];
 
+      // Get hosts from the participants list
+      const hosts = participantsData
+        .map((p) =>
+          p.role === "Host" || p.role === "Host and Participant" ? p.email : null
+        )
+        .filter((email): email is string => email !== null);
+
+      // Get participants from the participants list
       const participantEmails = participantsData
         .map((p) =>
           p.role === "Participant" || p.role === "Host and Participant" ? p.email : null

ui/src/pages/Profile.tsx

@@ -6,8 +6,10 @@ import {
   Grid,
   Divider,
   Skeleton,
+  Button,
 } from '@mui/material';
 import axios from 'axios';
+import SettingsIcon from '@mui/icons-material/Settings';
 
 interface UserData {
   userId: number;
@@ -79,6 +81,10 @@ const Profile: React.FC = () => {
     </Grid>
   );
 
+  const handleAdvancedSettings = () => {
+    window.open('https://keycloak.zeus.socom.dev/realms/zeus-apps/account/', '_blank');
+  };
+
   return (
     <Box
       sx={{
@@ -159,6 +165,28 @@ const Profile: React.FC = () => {
                 label="Member Since"
                 value={new Date(userData.createdAt).toLocaleDateString()}
               />
+
+              <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center' }}>
+                <Button
+                  variant="outlined"
+                  startIcon={<SettingsIcon />}
+                  onClick={handleAdvancedSettings}
+                  sx={{
+                    color: '#ffffff',
+                    borderColor: 'rgba(255, 255, 255, 0.3)',
+                    '&:hover': {
+                      borderColor: '#014093',
+                      backgroundColor: 'rgba(1, 64, 147, 0.1)',
+                    },
+                    textTransform: 'uppercase',
+                    fontWeight: 'bold',
+                    letterSpacing: '0.5px',
+                    padding: '8px 24px',
+                  }}
+                >
+                  Advanced Settings
+                </Button>
+              </Box>
             </Box>
           )
         )}