Admin Tasks Frontend (#63)

## Notion ticket link
[Admin task
page](https://www.notion.so/uwblueprintexecs/Admin-Dash-Tasks-Pages-27210f3fb1dc80a2a08ef9f3693429c8?v=27210f3fb1dc8133a6e1000cf4eabc81)

## Implementation description
This implements the complete frontend for the admin task page, which is
connected to the backend:
- All colors and styling were copied exactly from the figma. 
- We created a task page and multiple other components such as the popup
modal.
- Common colors, styles and helpers were extracted into appropriate
files
- A task api client was added and the auth api client was modified. 
- Two new dependencies were added, datepicker (for calendar) and dnd-kit
(for drag and drop)

## Steps to test
Here's a video: 


https://github.com/user-attachments/assets/70e4e1e0-ea0c-4778-8a83-01a52a017176

Testing steps: 
1. Run the database locally with `docker-compose up db`. Run the
frontend and backend locally
2. Seed this database with many tasks as there are no tasks currently
3. Seed the database and firebase with fake admin accounts
4. Go to the frontend and login using the path /admin-login. You can
modify the login to redirect to admin/tasks, or you can navigate there
manually.

## 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: richieb21 <[email protected]>

Author: e1011

.gitignore

@@ -8,4 +8,5 @@
 **/.DS_Store
 **/*.cache
 **/*.egg-info
-**/test.db
+**/test.db
+.cursor/

frontend/package-lock.json

@@ -10,20 +10,26 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^3.13.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "axios": "^1.11.0",
     "firebase": "^11.10.0",
     "humps": "^2.0.1",
     "jwt-decode": "^4.0.0",
     "next": "^14.2.24",
     "next-themes": "^0.4.6",
     "react": "^18",
+    "react-datepicker": "^8.7.0",
     "react-dom": "^18",
     "react-hook-form": "^7.57.0",
     "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.13",

frontend/package.json

@@ -386,3 +386,36 @@ export const refresh = async (): Promise<boolean> => {
     return false;
   }
 };
+
+// User types for admin and user management
+export interface UserResponse {
+  id: string;
+  firstName: string | null;
+  lastName: string | null;
+  email: string;
+  roleId: number;
+  authId: string;
+  approved: boolean;
+  formStatus: string;
+}
+
+export interface UserListResponse {
+  users: UserResponse[];
+  total: number;
+}
+
+/**
+ * Get all admin users
+ */
+export const getAdmins = async (): Promise<UserListResponse> => {
+  const response = await baseAPIClient.get<UserListResponse>('/users?admin=true');
+  return response.data;
+};
+
+/**
+ * Get user by ID
+ */
+export const getUserById = async (userId: string): Promise<UserResponse> => {
+  const response = await baseAPIClient.get<UserResponse>(`/users/${userId}`);
+  return response.data;
+};