Frontend for admin-facing matching screens (#85)

## Notion ticket link
<!-- Please replace with your ticket's URL -->
[Admin Dashboard Matching
Pages](https://www.notion.so/uwblueprintexecs/Admin-Dash-Matching-Pages-27210f3fb1dc800aa962c0bb5c09ba15)


<!-- Give a quick summary of the implementation details, provide design
justifications if necessary -->
## Implementation description
* Added API clients to send in matches along with fetching rankings for
a user
* Added description to the existing taskAPIClient to add notes
* Added profile + notes modals
* Added component for scrollable table


<!-- What should the reviewer do to verify your changes? Describe
expected results and include screenshots when appropriate -->
## Steps to test
1. Log in as admin
2. Go to directory
3. Click on a participant and click matching
4. Should see full matching table sorted by matching score decreasing


<!-- Draw attention to the substantial parts of your PR or anything
you'd like a second opinion on -->
## What should reviewers focus on?
* Verify the matching is accurate and the styling is nice

TODO:
- Add a way to sort asc/desc on each column
- Make scrollbar light

## 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

---------

Co-authored-by: YashK2005 <[email protected]>

Author: richieb21

frontend/src/APIClients/matchAPIClient.ts

@@ -0,0 +1,37 @@
+/**
+ * API Client for match endpoints
+ */
+
+import baseAPIClient from './baseAPIClient';
+
+export interface MatchCreateRequest {
+  participantId: string;
+  volunteerIds: string[];
+  matchStatus?: string;
+}
+
+export interface MatchResponse {
+  id: number;
+  participantId: string;
+  volunteerId: string;
+  matchStatus: string;
+  chosenTimeBlockId?: number | null;
+  createdAt: string;
+  updatedAt?: string | null;
+}
+
+export interface MatchCreateResponse {
+  matches: MatchResponse[];
+}
+
+export const matchAPIClient = {
+  /**
+   * Create matches between a participant and volunteers
+   * @param request Match creation request
+   * @returns Created matches
+   */
+  createMatches: async (request: MatchCreateRequest): Promise<MatchCreateResponse> => {
+    const response = await baseAPIClient.post<MatchCreateResponse>('/matches/', request);
+    return response.data;
+  },
+};

frontend/src/APIClients/matchingAPIClient.ts

@@ -0,0 +1,36 @@
+/**
+ * API Client for matching endpoints
+ */
+
+import baseAPIClient from './baseAPIClient';
+
+export interface AdminMatchCandidate {
+  volunteerId: string;
+  firstName: string | null;
+  lastName: string | null;
+  email: string;
+  timezone: string | null;
+  age: number | null;
+  diagnosis: string | null;
+  treatments: string[];
+  experiences: string[];
+  matchScore: number;
+}
+
+export interface AdminMatchesResponse {
+  matches: AdminMatchCandidate[];
+}
+
+export const matchingAPIClient = {
+  /**
+   * Get potential volunteer matches for a participant (admin only)
+   * @param participantId Participant user ID
+   * @returns List of volunteer matches with full details and scores
+   */
+  getAdminMatches: async (participantId: string): Promise<AdminMatchesResponse> => {
+    const response = await baseAPIClient.get<AdminMatchesResponse>(
+      `/matching/admin/${participantId}`,
+    );
+    return response.data;
+  },
+};

frontend/src/APIClients/rankingAPIClient.ts

@@ -0,0 +1,34 @@
+/**
+ * API Client for ranking endpoints
+ */
+
+import baseAPIClient from './baseAPIClient';
+
+export interface RankingPreference {
+  kind: 'quality' | 'treatment' | 'experience';
+  id: number;
+  scope: 'self' | 'loved_one';
+  rank: number;
+  name: string;
+}
+
+export const rankingAPIClient = {
+  /**
+   * Get ranking preferences for a user (admin only)
+   * @param userId User ID
+   * @param target Target role ('patient' or 'caregiver')
+   * @returns List of ranking preferences
+   */
+  getPreferences: async (
+    userId: string,
+    target: 'patient' | 'caregiver',
+  ): Promise<RankingPreference[]> => {
+    const response = await baseAPIClient.get<RankingPreference[]>(
+      `/ranking/preferences/${userId}`,
+      {
+        params: { target },
+      },
+    );
+    return response.data;
+  },
+};