🛠️ Admin Panel Planning

Introduction

The Admin Panel is a feature for managing jurisdictions, fiscal years, and programs within our system. It enables administrators to view, edit, delete, and manage various elements related to these entities. This document outlines the requirements, architecture, and implementation plan for building the Admin Panel using React for the frontend and NestJS for the backend.

Features

1. View Jurisdictions, Fiscal Years, and Programs
   • List jurisdictions such as Alameda County, Oakland, and Salinas.
   • Display fiscal years and associated programs for each jurisdiction.
   • Drill down into program details, including reports and status.

2. Return Reports to Draft
   • Allow administrators to revert reports to the draft status.

3. Change Report Status
   • Enable changing the status of reports to various states like Draft, Submitted, Approved, etc.

4. Delete Reports
   • Provide functionality to delete reports.

5. Disable Reports
   • Allow reports to be disabled, preventing further actions on them.

6. Generate CS Docs
   • Enable generation of CS (Contract Source) documents.

7. Generate Programs
   • Provide functionality to generate new programs.

8. Add Programs
   • Allow administrators to add new programs.

9. Edit Programs
   • Enable editing of existing programs.

10. Carry-Over Programs
    • Support the carry-over of programs from one fiscal year to another.

Architecture

• Frontend: React
  • Utilize React for building dynamic and responsive user interfaces.
  • Component-based architecture for reusability and maintainability.
  • State management using React Context or Redux.

• Backend: NestJS
  • Use NestJS for building a robust and scalable backend API.
  • RESTful API design for handling CRUD operations.
  • Database integration with TypeORM for managing data persistence.

User Interface

Wireframe

UI Components

1. Jurisdiction List
   • A list view displaying all jurisdictions.
   • Expandable sections to show fiscal years and programs.

2. Program Details
   • Detailed view of programs, including reports.
   • Actions for managing reports (e.g., change status, delete).

3. Action Menus
   • Contextual menus for actions like returning to draft, deleting, disabling, and changing status of reports.

4. Search Functionality
   • A search bar to quickly locate specific programs or reports.

Backend

Endpoints

1. Jurisdictions
   • GET /jurisdictions - Retrieve all jurisdictions.
   • GET /jurisdictions/:id - Retrieve a specific jurisdiction.

2. Fiscal Years
   • GET /fiscal-years - Retrieve all fiscal years.
   • GET /fiscal-years/:id - Retrieve a specific fiscal year.

3. Programs
   • GET /programs - Retrieve all programs.
   • GET /programs/:id - Retrieve a specific program.
   • POST /programs - Add a new program.
   • PUT /programs/:id - Edit an existing program.
   • DELETE /programs/:id - Delete a program.

4. Reports
   • GET /reports - Retrieve all reports.
   • GET /reports/:id - Retrieve a specific report.
   • PUT /reports/:id/status - Change the status of a report.
   • DELETE /reports/:id - Delete a report.

Implementation Plan

1. Frontend Development
   • Set up a new React project.
   • Create components for the jurisdiction list, program details, and action menus.
   • Implement state management and API integration.
   • Style the components using CSS or a styling framework like Material-UI.

2. Backend Development
   • Set up a new NestJS project.
   • Define entities and set up TypeORM.
   • Implement CRUD endpoints for jurisdictions, fiscal years, programs, and reports.
   • Integrate authentication and authorization if necessary.

3. Testing
   • Write unit tests for React components.
   • Write integration tests for NestJS endpoints.
   • Perform end-to-end testing to ensure the complete workflow functions as expected.

4. Deployment
   • Deploy the frontend to a web server or cloud service.
   • Deploy the backend to a server or cloud platform with a connected database.

5. Documentation and Training
   • Create user manuals and technical documentation.
   • Conduct training sessions for administrators to familiarize them with the new Admin Panel.