Merge pull request #31 from BU-Spark/admin

Feat: updated documentations, added attendance page, and fix bugs.

bu_arts_admin/.eslintrc

@@ -0,0 +1,23 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 12,
+      "sourceType": "module"
+    },
+    "plugins": ["@typescript-eslint"],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "prettier"
+    ],
+
+    "rules": {
+      "@typescript-eslint/no-unused-vars": "error",
+      "@typescript-eslint/consistent-type-definitions": ["error", "type"]
+    },
+
+    "env": {
+      "browser": false,
+      "es2021": true
+    }
+  }

bu_arts_admin/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "singleQuote": true,
+    "tabWidth": 4,
+    "semi": true,
+    "trailingComma": "all",
+    "useTabs": false
+}

bu_arts_admin/README.md

@@ -1,13 +1,58 @@
-# BU Art Initiative Admindashboard
+# BU Art Initiative Admin Dashboard
 
-## 1. Get Started
+Through Fall 2024, our teams have been building **BU Art Initiative Admin Dashboard**. We look forward to its continued
+development, ensuring that admins can view the platform statistics and manage events and users efficiently and effectively.
 
-1. Go to the terminal and make sure you are in `se-bu-passport-arts/bu_arts_admin`
+## Descriptions
+
+**BU Art Initiative Admin Dashboard** is a web-based application designed to help administrators manage and oversee various aspects of the BU Art Initiative. The dashboard provides tools for viewing platform statistics, managing events, and handling user information.
+
+## Functionalities
+
+### 1) Sidebard and OAuth
+
+- [x] Page routing.
+- [x] Active page UI highlight.
+- [x] Integration to Clerk OAuth.
+
+### 2) Dashboard
+
+- [x] Line chart for monthly new user counts.
+- [x] Counter widget for the current month event number.
+
+### 3) Event
+
+- [x] Event searching based on event titles and event descriptions.
+- [x] Update all fields of the upcoming event.
+- [x] View past event details and its attendance.
+
+### 4) Student
+
+- [x] Student searching based on student name and BUID.
+- [x] Student profile viewing, supporting both registered events and attended events.
+
+## Technical Architecture
+
+![image](./structure.png)
+
+## Tech Satck
+
+- Frontend: React.ts, Tailwind CSS, TypeScript
+- Database: Firebase
+- Authorization: Clerk
+- DevOps Tools: Git
+
+## Get Started
+
+1. Go to the terminal and make sure you are in `se-bu-passport-arts/bu_arts_admin`.
 2. Download dependencies:
+
    ```bash
     $ pnpm i
    ```
+
 3. Create `.env` file under `se-bu-passport-arts/bu_arts_admin` and add the following varaibles:
+
     ```text
     PUBLIC_URL="/"
     VITE_GOOGLE_MAPS_API_KEY="key"
@@ -20,4 +65,76 @@
     VITE_FIREBASE_APP_ID="id"
     VITE_CLERK_PUBLISHABLE_KEY="key"
     ```
-4. Run `pnpm run dev` and you should be ready to go
+
+4. Run `pnpm run dev` and you should be ready to go.
+
+## File Structure
+
+```shell
+se-bu-passport-arts/bu_arts_admin
+.
+├── README.md              # Project documentation and information
+├── dist/                   # Compiled output directory
+├── index.html             # Main HTML file for the application
+├── public/                 # Public assets directory
+├── src/                    # Source code directory
+```
+
+```shell
+se-bu-passport-arts/bu_arts_admin/src
+.
+├── App.tsx                # Main application component that sets up routing and layout
+├── assets/                 # Directory for static assets like images, fonts, etc.
+├── components/             # Reusable React components used throughout the application
+├── firebase/               # Firebase configuration and service files
+├── index.css              # Global CSS styles for the application
+├── interfaces/             # TypeScript interfaces and types used in the application
+├── main.tsx               # Entry point for the React application
+├── pages/                  # React components representing different pages/routes
+├── utils/                  # Utility functions and helper modules
+└── vite-env.d.ts          # TypeScript declaration file for Vite environment variables
+```
+
+## Known Bugs and Issues
+
+- **View Attendance Profile**: When clicking "going back" button, the admin is redirected to the View Students Page, instead of the Event Detail Page.
+
+## Future Work
+
+### 1) Past Event Attendance
+
+In the current implementation of the database. There is no clear difference between the user saved events and user registered events. Thus, how to calculate the number of the registered users of an event in the `PastEventDetailPage` remains further discussion. Meanwhile, in the `AttendancePage.tsx`, there is not an efficient way to determine absent users due to the same issue.
+
+### 2) Student Profile
+
+The ranking in the `ViewStudentsPage.tsx` is correctly a placeholder. The value remains further discussion with the client. For `StudentProfilePage.tsx`, how to determine the user's upcoming events is unclear due to the same reason in 3.1.
+
+### 3) Dashboard
+
+The current dashboard supports a line chart for new user count in different time range and a widget of the current month event counter. The additional statistics requires further discussion with the UI/UX team and the client.
+
+### 4) Download History
+
+The Download history page is not yet implemented. We still need to discuss with the client on the format
+and the data fields and types in the download file in different cases. Meanwhile, the functionality of logging
+the admin's download history is easy, but too keep allow the admin to re-download the file could introduce extra
+overhead to the database.
+
+### 5) OAuth
+
+Currently, there is no restriction on who can login to its admin dashboard. An middleware should be implemented to ensure only the authorized user can log in.
+
+### 6) Todo Page
+
+Both UI and SE teams should design and implement a Todo Page. Since some newly scraped events may have missing info issues, such as zero points, incorrect geolocations, missing event categories. By engineering a Todo Page can remind admins to complete these missing info before hand.
+
+### 7) Admin Management Page
+
+It is suggested to have a super admin, who can add/delete admin (and set access scope if needed).
+
+## Team
+
+- Jida Li - [[email protected]](mailto:[email protected])
+- Yadi He - [[email protected]](mailto:[email protected])
+- Jaimey Frank - [[email protected]](mailto:[email protected])
+

bu_arts_admin/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg" href="/bu.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>BU AI Admin Dashboard</title>
   </head>
   <body>
     <div id="root"></div>

bu_arts_admin/package.json

@@ -11,14 +11,21 @@
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.14.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.7",
+    "@mui/styled-engine-sc": "^6.1.7",
+    "@mui/x-charts": "^7.22.2",
     "@tailwindcss/typography": "^0.5.15",
     "@vis.gl/react-google-maps": "^1.4.0",
     "firebase": "^11.0.1",
     "luxon": "^3.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.27.0"
+    "react-router-dom": "^6.27.0",
+    "styled-components": "^6.1.13",
+    "x-charts": "link:@mui/x-charts"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
@@ -27,15 +34,19 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.13.0",
+    "eslint": "^9.14.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
     "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
     "tailwindcss": "^3.4.14",
-    "typescript": "~5.6.2",
+    "typescript": "~5.6.3",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10"
   }