feat: implemented teacher profile button and popup

[daniel-su1]

Notion ticket link

Teacher Profile Popup Frontend

Implementation description

-implemented teacher popup on the right side of CalendarHeader, created ProfileMenu component

Steps to test

1. go to main calendar page and click on it, it should be there 💀

What should reviewers focus on?

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sistema	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 3, 2025 9:50am

[ChinemeremChigbo]

I have listed some suggested changed. I also think you should remove the profile.tsx file. I have made a PR that implements the changes I would like here: . If you agree, please squash these changes into your branch and re-request a review

[ChinemeremChigbo]

The month text should be left aligned and I would remove unnecessary comments:

import React from 'react';
import {
  Menu,
  MenuButton,
  IconButton,
  MenuList,
  Text,
  Avatar,
  Button,
  useColorModeValue,
} from '@chakra-ui/react';
import { signOut } from 'next-auth/react';

// Helper to color-code the "X/Y Absences Taken"
function getAbsenceColor(usedAbsences: number) {
  if (usedAbsences <= 6) return 'green.500';
  if (usedAbsences <= 8) return 'yellow.500';
  return 'red.500';
}

// Same interface as used in CalendarHeader, or define your own
interface UserData {
  name: string;
  email: string;
  image?: string;
  usedAbsences: number;
  numOfAbsences: number;
}

interface ProfileMenuProps {
  userData?: UserData;
}

const ProfileMenu: React.FC<ProfileMenuProps> = ({ userData }) => {
  const absenceColor = userData
    ? getAbsenceColor(userData.usedAbsences)
    : 'gray.500';

  return (
    <Menu>
      <MenuButton
        as={IconButton}
        icon={
          <Avatar
            name={userData?.name ?? 'User'}
            src={userData?.image}
            size="sm"
          />
        }
        variant="ghost"
        aria-label="Open profile menu"
        _hover={{ bg: useColorModeValue('gray.100', 'gray.700') }}
      />
      <MenuList
        minW="280px" // Make the pop-up larger
        p="2rem" // Add some padding
        textAlign="center"
        boxShadow="lg"
        borderRadius="md"
      >
        {/* Title: "Hi, [Name]!" in 2xl */}
        <Text fontSize="2xl" fontWeight="semibold" mb={1}>
          Hi, {userData?.name}!
        </Text>
        {/* Email below the title */}
        <Text fontSize="sm" color="gray.500" mb={3}>
          {userData?.email}
        </Text>
        {/* Larger avatar below the email */}
        <Avatar
          name={userData?.name ?? 'User'}
          src={userData?.image}
          size="xl"
          mx="auto"
          mb={3}
        />
        {/* Absences Taken: e.g. "4/10" in color */}
        <Text fontSize="md" mb={4}>
          <Text as="span" fontWeight="bold" color={absenceColor}>
            {userData?.usedAbsences}/{userData?.numOfAbsences}
          </Text>{' '}
          Absences Taken
        </Text>
        {/* Log Out button: white background, gray border */}
        <Button
          onClick={() => signOut()}
          variant="outline"
          borderColor="gray.300"
          borderRadius="md"
          size="md"
          width="100%"
          _hover={{ bg: useColorModeValue('gray.100', 'gray.700') }}
        >
          Log Out
        </Button>
      </MenuList>
    </Menu>
  );
};

export default ProfileMenu;

[ChinemeremChigbo]

I would use const instead of function

[ChinemeremChigbo]

Hmm, not sure why but sometimes I need to navigate to the /profile page, and then navigate back to the calendar to get the image to show up. I assume it works on the profile page since it uses a use effect to make sure the data is available whereas this does not? Not quite sure, but would be nice if the image / other data was useeffected for this component.

[ChinemeremChigbo]

Should be:

[ChinemeremChigbo]

Remove

[ChinemeremChigbo]

I would remove comments for things that feel obvious and make some changes to the spacing. Here are some of my suggestions:

import React from 'react';
import {
  Menu,
  MenuButton,
  IconButton,
  MenuList,
  Text,
  Avatar,
  Button,
  useColorModeValue,
} from '@chakra-ui/react';
import { signOut } from 'next-auth/react';

const getAbsenceColor = (usedAbsences: number) => {
  if (usedAbsences <= 6) return 'green.500';
  if (usedAbsences <= 8) return 'yellow.500';
  return 'red.500';
};

interface UserData {
  name: string;
  email: string;
  image?: string;
  usedAbsences: number;
  numOfAbsences: number;
}

interface ProfileMenuProps {
  userData?: UserData;
}

const ProfileMenu: React.FC<ProfileMenuProps> = ({ userData }) => {
  const absenceColor = userData
    ? getAbsenceColor(userData.usedAbsences)
    : 'gray.500';

  return (
    <Menu>
      <MenuButton
        as={IconButton}
        icon={
          <Avatar
            name={userData?.name ?? 'User'}
            src={userData?.image}
            size="sm"
          />
        }
        variant="ghost"
        aria-label="Open profile menu"
        _hover={{ bg: useColorModeValue('gray.100', 'gray.700') }}
      />
      <MenuList
        minW="280px"
        maxW="320px"
        p="3rem"
        textAlign="center"
        boxShadow="lg"
        borderRadius="md"
      >
        <Text
          fontSize="2xl"
          fontWeight="semibold"
          mb={2}
          whiteSpace="normal"
          wordBreak="break-word"
        >
          Hi, {userData?.name}!
        </Text>
        <Text fontSize="sm" color="gray.500" mb={4}>
          {userData?.email}
        </Text>
        <Avatar
          name={userData?.name ?? 'User'}
          src={userData?.image}
          size="xl"
          mx="auto"
          mb={4}
        />
        <Text fontSize="md" mb={5}>
          <Text as="span" fontWeight="bold" color={absenceColor}>
            {userData?.usedAbsences}/{userData?.numOfAbsences}
          </Text>{' '}
          Absences Taken
        </Text>
        <Button
          onClick={() => signOut()}
          variant="outline"
          borderColor="gray.300"
          borderRadius="md"
          size="md"
          width="100%"
          _hover={{ bg: useColorModeValue('gray.100', 'gray.700') }}
        >
          Log Out
        </Button>
      </MenuList>
    </Menu>
  );
};

export default ProfileMenu;

[135ze]

note: interfaces may be moved to a types.ts file to be shared globally. mentioning just in case my PR gets merged before yours

https://github.com/uwblueprint/sistema/pull/49/files#diff-11e9171ff36dfa6e6b396909ac6b924cf79337d5f05a7eaa15f78a9b2e2eded6

[135ze]

sorry lol looks like I was merged in first, please import from latest in main: d3663c8 for this file and ProfileMenu.tsx