Update milestones docs

docs/milestones/architecture.md

@@ -8,17 +8,23 @@ sidebar_position: 2
 
 ### Frontend
 
-- **TypeScript** (v5.2.2) - Primary programming language
-- **React** (v18.2.0) - UI framework
-- **React Router Dom** (v6.22.3) - Client-side routing
-- **Tailwind CSS** (v3.4.3) - Utility-first CSS framework
-- **Vite** - Build tool and development server
+- **TypeScript** (v5.2.2) - Primary programming language; ensures consistent typing and modern JavaScript features
+- **React** (v18.2.0) - UI framework for building reusable and dynamic interfaces
+- **React Router Dom** (v6.22.3) - Client-side routing and navigation
+- **Tailwind CSS** (v3.4.3) - Utility-first CSS framework for rapid UI development
+- **Vite** - Build tool and development server for fast builds
 
 ### Backend
 
-- **Node.js** (v20.13.0) - Runtime environment
-- **Express.js** (v4.16.1) - Web application framework
-- **MySQL** (v2.18.1) - Database management system
+- **Node.js** (v20.13.0) - JavaScript runtime environment for server-side logic
+- **Express.js** (v4.16.1) - Light web application framework for building API endpoints
+- **MySQL** (v2.18.1) - Relational database management system
+
+### Additional tools
+- Plotly.js - For creating interactive data visualisations
+- Axios - For handling HTTP requests on the frontend
+- Font Awesome - For graphics
+- dotenv - For managing environment variables securely
 
 ### Project Structure
 
@@ -35,36 +41,59 @@ sidebar_position: 2
 
 ### Database Schema
 
-The database follows a hierarchical structure:
+The database follows a hierarchical structure to reflect program objectives and targets:
 
 - focus_objectives: Main program objectives
-  - id
-  - name
-    subtitle
-    key_areas: Specific areas under each focus objective
-    id
-    focus_objectives_id
-    - name
-- targets: Specific measurable goals
-  - id
-  - key_area_id
-  - indicator
-  - description
-  - annual_target
-  - program_target
-    Quarterly progress columns (Q1-Q4)
+  - id (int)
+  - name (varchar(255))
+  - management (varchar(255))
+
+- key_areas: Specific areas under each focus objective
+  - id (int)
+  - focus_objectives_id (int)
+  - name (varchar(255))
+  - management (varchar(255))
+
+- targets: Specific measurable goals under each key area
+  - id (int)
+  - key_area_id (int)
+  - expected_result_id (varchar(255))
+  - expected_result (varchar(255))
+  - inidcator (varchar(255))
+  - target_description (varchar(255))
+  - result_to_date (int)
+  - program_target (int)
+  - priority (varchar(255))
+  - target_timeframe (varchar(255))
+  - timeframe_frequency (varchar(255))
+
+- targets details: Information specific to the completion of each target
+  - id (int)
+  - target_id (varchar(100))
+  - detail_1 (text)
+  - detail_2 (text)
+  - etc.
 
 ### Frontend Components
 
 Built with React and TypeScript, featuring:
 
-- Modern UI with Tailwind CSS
-- React Router for navigation
+- Modern UI with Tailwind CSS for fast development and a consistent look
+  - `client/tailwind.config.js` file includes built-in, reusable theme colors to remain on brand
+- React Router DOM for navigation between pages
 - Plotly.js for data visualisation
+- Resuable components located in the `client/src/components/` directory for modularity
+- Interactive pages to filter and visualise data, located in the `client/src/pages/` directory
+  - *Homepage* displays focus objectives
+  - *Key Areas* displays key area data filtered by focus objective
+  - *Targets* displays targets data filtered by focus objective and key area
+  - *Page 404* shows the user the page cannot be found
 
 ### API Endpoints
 
-- GET /targets: Fetch all targets
-- POST /targets: Create a new target
-- PUT /targets/`:id`: Update an existing target
-- DELETE /targets/`:id`: Delete a target
+The backend uses RESTful API endpoints to manage targets data and fetch progress data:
+
+- GET `api/targets/`: Fetch all targets data
+- GET `api/targets/focus_objective/:focus_objective_id`: Fetch targets data filtered by focus objective
+- GET `api/targets/focus_objective/:focus_objective_id/key_area/:key_area_id`: Fetch data filtered by focus objective and key area
+- GET `api/targets/health-check`: Check the status of the server

docs/milestones/deployment.md

@@ -8,7 +8,7 @@ sidebar_position: 4
 
 - Deployment is handled through Render
 - Connected to AWS production database
-- Staging environment available for testing before production deployment accessible at the link [here](https://milestones-dashboard-staging.onrender.com)
+- Staging environment available for testing before production deployment accessible at the link [here](https://eufmd-targets.onrender.com/)
 
 ### Production:
 

docs/milestones/environment-setup.md

@@ -73,7 +73,7 @@ Create a `.env` file in the root directory of the project and fill in the necess
   cp .env.example .env
 ```
 
-2. Create a folder in your root named dump-files. Export a MySQL dump file from the production database and move it to your dump-files folder.
+2. Create a folder in your root named dump-files. Export a MySQL dump file from the production database (or request a current dump file from the team lead) and move it to your dump-files folder.
 
 3. Connect to MySQL and create a new local database.
 
@@ -87,5 +87,6 @@ Create a `.env` file in the root directory of the project and fill in the necess
 
 #### 7. Development
 
-- Run `npm start` in the project directory to start the Express server on port 5000
+- For development, run `npm run dev` in the project directory to start the Express server on port 5000 using nodemon. Nodemon will watch the server for changes, so the server updates without having to restart each time a change is made.
+- For production, run `npm start` to start the server on port 5000 using node.
 - Type `cd client` in a new terminal and run `npm run dev` to start the client server in development mode with hot reloading in port 5173.

docs/milestones/overview.md

@@ -6,15 +6,24 @@ sidebar_position: 1
 
 The Milestones Dashboard is an open-source application designed to track the completion of yearly EuFMD Program Targets until 2027. It provides a visual interface for monitoring progress across various focus objectives, key areas, and expected results.
 
+## Purpose
+This dashboard provides a centralized tool to monitor program milestones. It helps stakeholders track and identify areas in the EuFMD Program that may need attention to help with timely achievement of the program's objectives.
+
 ## Target Audience
 
-The dashboard is built for internal stakeholders to track the progress of the EuFMD Program achieving its targets.
+The dashboard is built for internal stakeholders, including program managers and other decision-makers within the program.
 
 ## Features
 
 1. Tracking of EuFMD Program targets
 2. Interactive dashboard interface
-3. Visual representation of milestone progress
+3. Visual representation of targets progress
 4. Data entry for manual targets
 
+## Data Sources
+The Milestones Dashboard pulls data from internal program records and manual entries.
+
+## Limitations
+While some of the data for the EuFMD Program milestone progress can be extracted automatically, some details will require manual input.
+
 This documentation provides a comprehensive overview of the EuFMD Milestones Dashboard. For specific implementation details or additional information, please refer to the individual source files or reach out to the development team.