Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create basic administrator dashboard with dummy overview statistics #392

Open
daaimah123 opened this issue Dec 12, 2024 · 13 comments · May be fixed by #560
Open

Create basic administrator dashboard with dummy overview statistics #392

daaimah123 opened this issue Dec 12, 2024 · 13 comments · May be fixed by #560
Assignees
@themagicianking
Labels
application-automation issues related to automating the application process
Milestone
Foundation, User ...

Comments

@daaimah123
Copy link
Collaborator

daaimah123 commented Dec 12, 2024 •
edited by monikkaelyse
Loading

Problem:

Administrators need a centralized view of key platform statistics.

Implementation Details:

  1. Create a new route and view for the admin dashboard (if not already existent)
  2. Create 5 - 10 dummy (hard-coded) application data queries to fetch key statistics with each application included each of the following:
    • Total number of users
    • Total number of applications
    • Applications by status
      • application form submitted
      • initial screening passed
      • application workshop
      • pair programming with staff
      • take-home code challenge
      • staff interview
      • board interview
      • reference submitted
      • financial conversation
      • pending (requires manual review or in-progress of continue application process)
      • approved (all eligible fields present)
      • prescreen rejected (short-form ineligible categories)
      • rejected (long-form ineligible or post-application workshop ineligible fields present)
{
  "dashboard": {
    "totalUsers": 2000,
    "totalApplications": 750,
    "acceptanceRate": "6.67%",
    "rejectionRate": "26.67%",
    "percentDifferenceFromLastMonth": "+15%"
  },
  "applicationsByStatus": {
    "applicationFormSubmitted": 700,
    "initialScreeningPassed": 500,
    "applicationWorkshop": 400,
    "pairProgrammingWithStaff": 300,
    "takeHomeCodeChallenge": 250,
    "staffInterview": 200,
    "boardInterview": 150,
    "referenceSubmitted": 120,
    "financialConversation": 100,
    "pending": 80,
    "approved": 50,
    "prescreenRejected": 300,
    "rejected": 200
  }
}
  1. Design and implement a layout for the dashboard
    • Statistics view
      • Total applications
      • Pending review
      • Accepted
      • Rejected
    • Status overview section with color-coded, data visualization for the statistics (e.g., charts, graphs)
    • Applications view (each applicant has their own row)
      • Search by applicant name
      • Filter by status
        • all
        • ineligible
        • pending
        • eligible
        • manual review needed (has a warning icon that needs manual attention)
      • Name
      • Email
      • Status label (matching visual coloring as status overview)
      • Date submitted
      • Action
        • review
        • message applicant (to be connected to applicant dashboard later)
        • leave admin only note
      • Admin-only notes (this should be a dropdown field that span horizontally underneath the other applicant fields)
  2. Add visual navigation to other admin features such as review and edit
    • Review view
      - Eligibility score
      - Details (visual green checkmark for met eligibility category criteria, red "x" for ineligible, yellow warning icon for area that requires manual review, should list the provided data from applicant)
      - WPM Score (eligibility is 50+)
      - WPM Accuracy (eligibility is 80%)
      - Two References (eligibility is both references details are all submitted)
      - FreeCodeCamp Complete (warning icon, needs to be manually changed by admin user, eligibility is the complete single screenshot of all 115 problems, manual confirmation needs to be timestamped and added to admin only applicant notes with admin user or program staff role details)
      - Gender (eligibility is not cis-male)
      - Computer literate (eligibility is yes)
      - Recent bootcamp (eligibility is no)
      - Stable housing (eligibility is yes)
      - Action
      - leave admin-only note (under applicant's row)
      - edit button
      - message applicant (to be connected to applicant dashboard later)
    • Edit view (from edit button)
      - overlay popup form with option to edit populated fields
      - timestamp into admin only notes detailing which application fields were changed
    • Leave admin-only note view
      - overlay popup text edit form with option to write in a message
      - timestamp into admin only notes under applicant's row
      - this should be a dropdown field that span horizontally underneath the other applicant fields
    • Message applicant view
      - overlay popup text edit form with option to write in a message
      - timestamp into admin only notes under applicant's row, detailing the message to applicant
      Sample Dummy Data
{
  "applicants": [
    {
      "id": 1,
      "name": "Jane Doe",
      "email": "jane.doe@example.com",
      "eligibility_score": 90,
      "status": "Eligible",
      "date_submitted": "2025-01-15",
      "details": {
        "wpm_score": 55,
        "wpm_accuracy": "85%",
        "two_references": true,
        "freecodecamp_complete": true,
        "gender": "Non-binary",
        "computer_literate": "Yes",
        "recent_bootcamp": "No",
        "stable_housing": "Yes"
      },
      "admin_notes": [
        "Follow-up required after interview.",
        "Strong technical background",
        "Needs financial assistance verification"
      ]
    },
    {
      "id": 2,
      "name": "John Smith",
      "email": "john.smith@example.com",
      "eligibility_score": 75,
      "status": "Eligible",
      "date_submitted": "2025-01-12",
      "details": {
        "wpm_score": 52,
        "wpm_accuracy": "82%",
        "two_references": true,
        "freecodecamp_complete": false,
        "gender": "Woman",
        "computer_literate": "Yes",
        "recent_bootcamp": "No",
        "stable_housing": "Yes"
      },
      "admin_notes": [
        "Pending reference check.",
        "Good problem-solving skills",
        "Completed take-home challenge successfully"
      ]
    },
    {
      "id": 3,
      "name": "Alice Johnson",
      "email": "alice.johnson@example.com",
      "eligibility_score": 45,
      "status": "Ineligible",
      "date_submitted": "2025-01-10",
      "details": {
        "wpm_score": 30,
        "wpm_accuracy": "70%",
        "two_references": false,
        "freecodecamp_complete": false,
        "gender": "Woman",
        "computer_literate": "No",
        "recent_bootcamp": "Yes",
        "stable_housing": "No"
      },
      "admin_notes": [
        "Did not meet eligibility requirements.",
        "Incomplete application",
        "Short-form ineligible criteria flagged"
      ]
    },
    {
      "id": 4,
      "name": "Bob Williams",
      "email": "bob.williams@example.com",
      "eligibility_score": 60,
      "status": "Pending",
      "date_submitted": "2025-01-18",
      "details": {
        "wpm_score": 50,
        "wpm_accuracy": "80%",
        "two_references": false,
        "freecodecamp_complete": false,
        "gender": "Non-binary",
        "computer_literate": "Yes",
        "recent_bootcamp": "No",
        "stable_housing": "Yes"
      },
      "admin_notes": [
        "Awaiting staff interview.",
        "Great enthusiasm for program",
        "Awaiting final eligibility review"
      ]
    },
    {
      "id": 5,
      "name": "Chris Adams",
      "email": "chris.adams@example.com",
      "eligibility_score": 50,
      "status": "Manual Review Needed",
      "date_submitted": "2025-01-20",
      "details": {
        "wpm_score": 49,
        "wpm_accuracy": "78%",
        "two_references": false,
        "freecodecamp_complete": false,
        "gender": "Man",
        "computer_literate": "Yes",
        "recent_bootcamp": "No",
        "stable_housing": "Yes"
      },
      "admin_notes": [
        "Requires additional financial documents.",
        "Income verification pending",
        "Needs further assessment for eligibility"
      ]
    }
  ],
  "filters": [
    "All",
    "Eligible",
    "Ineligible",
    "Pending",
    "Manual Review Needed"
  ],
  "search_placeholder": "Search applicants..."
}

Technical Concepts:

  • Data aggregation and analysis
  • Data visualization libraries (e.g., Chart.js)
  • Dashboard design principles

Acceptance Criteria:

  • Dashboard displays accurate statistics about users and applications
  • Data is visualized clearly and is easy to understand
  • Dashboard is responsive and works on various screen sizes
  • Navigation to other admin features is intuitive (even if those features are not yet implemented)
  • Submit a PR that merges into the mvp branch, not develop

Example UI

Image Image Image Image
@daaimah123 daaimah123 added the application-automation issues related to automating the application process label Dec 12, 2024
@daaimah123 daaimah123 changed the title Create basic Administrator dashboard with overview statistics [5] Create basic Administrator dashboard with overview statistics Dec 13, 2024
@daaimah123 daaimah123 added the ❌ not-ready-for-work this issue is not ready to be picked up label Jan 2, 2025
@daaimah123 daaimah123 mentioned this issue Jan 21, 2025
Open
@daaimah123 daaimah123 changed the title [5] Create basic Administrator dashboard with overview statistics [5] Create basic administrator dashboard with dummy overview statistics Jan 21, 2025
@daaimah123 daaimah123 removed the ❌ not-ready-for-work this issue is not ready to be picked up label Jan 21, 2025
@daaimah123 daaimah123 changed the title [5] Create basic administrator dashboard with dummy overview statistics Create basic administrator dashboard with dummy overview statistics Jan 21, 2025
@daaimah123 daaimah123 mentioned this issue Jan 21, 2025
Open
@daaimah123
Copy link
Collaborator Author

See Starter UI Files for MVP for additional context about starter files.

@themagicianking
Copy link
Collaborator

themagicianking commented Jan 21, 2025 •
edited
Loading

Grabbing this!

@themagicianking themagicianking self-assigned this Jan 21, 2025
@themagicianking
Copy link
Collaborator

@daaimah123 I'm making good progress on this ticket but I'm honestly not sure I'll be able to complete the whole thing by the end of sprint. Currently here's what I have:

  • ~6 or 7 data queries in their own file
  • 90% of the html for the main dashboard view that does not include the graphics that need to be rendered
  • Responsive styling for the main dashboard view in its current iteration (not sure if I'll break anything by adding graphics but I am assuming I will have to at least add breakpoints for the bigger graphics)
    My main concern is mostly in how long it will take me to create a script that will add all of the dummy data dynamically and getting a search function to look nice/function correctly, especially because I have in the past accomplished these things with frameworks and I'm doing this entirely in vanilla CSS and javascript. I anticipate being able to complete, at the very least, the main dashboard view, sans the search function, and the review applicant view.
    Would it be possible for me to either incorporate a framework to make the responsive styling go faster, or narrow the primary goals of the ticket?

@daaimah123
Copy link
Collaborator Author

@themagicianking great considerations and wow fantastic work so far!

  • Can you please make sure your branch or PR is attached to this issue?
  • Which frameworks are you considering and what are the pros and cons to adding them into the website's existing stack?
  • Alternatively, if the framework isn't a possibility, you can totally cut a sub-issue to tackle the final pieces of work in the next sprint!

@themagicianking
Copy link
Collaborator

@daaimah123 Thank you! I just linked the issue; I have sent @stmcpeters a message to see what thoughts they have on this since they are working on a similar issue and mentioned using frameworks as well. I will do some research and add another comment when that is done :)

@themagicianking
Copy link
Collaborator

themagicianking commented Jan 29, 2025 •
edited
Loading

@daaimah123

Potential CSS frameworks:

Bulma

Pros:

  • Can be integrated with SASS
  • Free
  • Open source
  • Screen reader considerate

Cons:

  • Does not have icons
  • Reportedly runs slow on Internet Explorer
  • Somewhat limited number of components

Tailwind CSS

Pros:

  • Both Steph and I have familiarity
  • Wide variety of components
  • Has icons available for use
  • Screen reader considerate

Cons:

  • Not recommended for use with SASS for best experience
  • Some components are paid only

I looked at quite a few other options but honestly I don't think any of them fit as well as these two, though I'm open to suggestions!

@themagicianking themagicianking linked a pull request Jan 29, 2025 that will close this issue
392 create basic administrator dashboard #539
Closed
@themagicianking
Copy link
Collaborator

themagicianking commented Jan 30, 2025 •
edited
Loading

@daaimah123 I have a question about the "applications by status" stats. I am assuming that, for each variable, you want to display applications that have ONLY gotten up to that point and NOT applications that have gotten to that point and beyond. That is, if 50% of applications have been submitted and of those 50%, 10% have also done the application workshop, "submitted" should display 40%, not 50%. Is that correct?

Edit: upon closer inspection of the example graphics I think I may have gotten this backwards and am slightly more confused. I'm not sure if these are meant to be a guideline or not for the actual data aggregation.

@daaimah123
Copy link
Collaborator Author

daaimah123 commented Jan 30, 2025 •
edited
Loading

@themagicianking these are 100% guidelines and can be adjusted; this ticket is 100% about frontend for now and does not need to take into account the db work that will come later; leave a comment to where you land with that presentation as related to your dummy data and this issue

Let's do custom styling for now without frameworks (leverage the existing css rules where able), let me know if you'd like to cut a sub-issue for that.

@themagicianking
Copy link
Collaborator

themagicianking commented Jan 30, 2025 via email

@themagicianking
Copy link
Collaborator

@daaimah123 Just wanted to let you know that me and @kaylahrose have resolved the merge conflicts that were on this issue! I did have to create a new branch and cherry pick my old commits but it does seem to have worked correctly. I'm still unsure what exactly caused this as my develop branch is and was up to date at the time of rebasing, but it's working now. @ChasVanDav was/is having similar issues--I'm curious if anyone has any ideas on what the root issue of this could've been.

@themagicianking
Copy link
Collaborator

@daaimah123 I wanted to give you an update on progress here--I'm really, really close to being done, but I'm honestly not sure I can finish this and my knowledge check today (I was not anticipating the rebase issues).

Things I still have left to do: create the application review section & dynamically populate data instead of using hardcoded data. As of right now all aspects of the page are responsive.

@themagicianking themagicianking linked a pull request Feb 3, 2025 that will close this issue
Admin dashboard frontend #560
Draft
@daaimah123
Copy link
Collaborator Author

(Summarizing our conversation, @themagicianking )

Intended purpose of this ticket: track application status in one place, with visuals for data, and editing/updating

Sub-Issues

  • You would like to pull out the pop-up modals into their own other views/pages (all applications, individual applicant page, and edit view)
  • Propagating/calculating data within admin dashboard: clarify which numbers need to be calculated-in-formulas and dynamically generate the numbers in the appropriate areas).
    • Clarify the relationship of data that you intend to work together (please create the issue, this will not be worked on until the data is finalized - ask for clarification of how will it be communicated that an application is eligible or in a specific application status - db provided or do calculations/functions need to be created)
    • what is a successful eligibility calculation?
    • how are the various applicant statuses calculated
    • how is an applicant who has already applied, being saved? (this should be attached to application)

Clarification / Discussion

  • Please see Monikka’s suggested data blurbs that can be used to for data propagation, because you have not been provided with a database yet, please utilize the values provided to work with the data dynamically; You have expressed that you would like any calculations between these data points provided to you, please see sub-issues section of comment
  • Please intentionally leave notes (in comments and/or on the issue itself) about where you foresee things being connected to a backend/database if outside of frontend/dummy-data scope, so that your incoming sub-issues will have this context
  • High level overview and adjustment to step 2: admin high level of viewing of application status and call to action and language from “such as” has been changed to “including each”
  • With discussion around splitting up “pending” status into categories (admin-action, applicant action, maybe some to-dos), please adjust your dummy data properties as well as be considerate of that change as it will affect work with filter by categories
  • Edit view should allow an admin to correct applicant data, leave an admin note, or change an application status. Changing applicant status after specific stage that require review or any editing should populate a timestamp and included any fields changed or the admin note

@daaimah123
Copy link
Collaborator Author

@themagicianking can you give a status update on this related work? I see draft PR: Admin dashboard frontend and have attached it to this issue

@daaimah123 daaimah123 mentioned this issue Feb 18, 2025
Open
This was referenced Feb 18, 2025
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@themagicianking themagicianking

Labels
application-automation issues related to automating the application process
Projects
None yet
Milestone
Foundation, User Interface, and Basic...
2 participants
@daaimah123 @themagicianking