feat: implement add member

src/components/Dashboard/TeamDashboard.tsx

@@ -12,6 +12,7 @@ import { DashboardCardLink } from './DashboardCardLink';
 import { PencilRuler } from 'lucide-react';
 import { DashboardTeamRoadmaps } from './DashboardTeamRoadmaps';
 import type { BuiltInRoadmap } from './PersonalDashboard';
+import { InviteMemberPopup } from '../TeamMembers/InviteMemberPopup';
 
 type TeamDashboardProps = {
   builtInRoleRoadmaps: BuiltInRoadmap[];
@@ -27,6 +28,7 @@ export function TeamDashboard(props: TeamDashboardProps) {
 
   const [isLoading, setIsLoading] = useState(true);
   const [teamMembers, setTeamMembers] = useState<TeamMember[]>([]);
+  const [isInvitingMember, setIsInvitingMember] = useState(false);
 
   async function getTeamProgress() {
     const { response, error } = await httpGet<TeamMember[]>(
@@ -90,6 +92,19 @@ export function TeamDashboard(props: TeamDashboardProps) {
 
   return (
     <section className="mt-8">
+      {isInvitingMember && (
+        <InviteMemberPopup
+          onInvited={() => {
+            toast.success('Invite sent');
+            getTeamProgress().finally(() => null);
+            setIsInvitingMember(false);
+          }}
+          onClose={() => {
+            setIsInvitingMember(false);
+          }}
+        />
+      )}
+
       <DashboardTeamRoadmaps
         isLoading={isLoading}
         teamId={teamId}
@@ -125,6 +140,20 @@ export function TeamDashboard(props: TeamDashboardProps) {
               </span>
             );
           })}
+
+          {canManageCurrentTeam && (
+            <button
+              className="group relative"
+              onClick={() => setIsInvitingMember(true)}
+            >
+              <span className="relative flex aspect-square size-8 items-center justify-center overflow-hidden rounded-md border border-dashed bg-gray-100">
+                +
+              </span>
+              <Tooltip position="top-center" additionalClass="text-sm">
+                Add Member
+              </Tooltip>
+            </button>
+          )}
         </div>
       )}
 

src/components/TeamMembers/InviteMemberPopup.tsx

@@ -7,10 +7,11 @@ import { type AllowedRoles, RoleDropdown } from '../CreateTeam/RoleDropdown';
 type InviteMemberPopupProps = {
   onInvited: () => void;
   onClose: () => void;
+  teamId?: string;
 };
 
 export function InviteMemberPopup(props: InviteMemberPopupProps) {
-  const { onClose, onInvited } = props;
+  const { onClose, onInvited, teamId: defaultTeamId } = props;
 
   const popupBodyRef = useRef<HTMLDivElement>(null);
   const emailRef = useRef<HTMLInputElement>(null);
@@ -18,7 +19,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
   const [email, setEmail] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
-  const { teamId } = useTeamId();
+  const { teamId = defaultTeamId } = useTeamId();
 
   useEffect(() => {
     emailRef?.current?.focus();
@@ -31,7 +32,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
 
     const { response, error } = await httpPost(
       `${import.meta.env.PUBLIC_API_URL}/v1-invite-member/${teamId}`,
-      { email, role: selectedRole }
+      { email, role: selectedRole },
     );
 
     if (error || !response) {
@@ -92,7 +93,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
               </div>
 
               {error && (
-                <p className=" rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-700">
+                <p className="rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-700">
                   {error}
                 </p>
               )}