Refactor: Remove legacy components and migrate to TypeScript

.env.example

@@ -0,0 +1,3 @@
+VITE_ECR_BASE_URL=http://localhost:8081
+VITE_BYPASS_AUTH=false
+VITE_REFRESH_TIME=60000

.gitignore

@@ -21,5 +21,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.eslintcache
-.env

Dockerfile

@@ -0,0 +1,27 @@
+# Step 1: Build the app
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+COPY tsconfig.json ./
+COPY vite.config.ts ./
+COPY ./src ./src
+COPY ./public ./public
+
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# Step 2: Serve with Nginx
+FROM nginx:stable-alpine as production
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Optional: Replace default Nginx config (recommended)
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,72 +1,232 @@
+# eCRNow-UI
+
+A modern web-based Electronic Case Reporting (eCR) management application built with React, TypeScript, and Vite. This application provides a user interface for configuring and managing electronic case reporting systems in healthcare settings.
+
+## Overview
+
+eCRNow-UI enables healthcare providers to:
+- Configure Electronic Health Record (EHR) client integrations
+- Manage healthcare facility settings
+- Set up Knowledge Artifact Repositories (KAR)
+- Configure Public Health Authority (PHA) endpoints
+- Handle OAuth2/FHIR integration with various EHR systems
+
+## Technology Stack
+
+- **Frontend Framework:** React 18.3.1 with TypeScript 5.8.3
+- **Build Tool:** Vite 7.0.5
+- **UI Libraries:** React Bootstrap, Material-UI (MUI), Emotion
+- **Routing:** React Router DOM 7.1.1
+- **HTTP Client:** Axios 1.7.9
+- **Testing:** Vitest 3.2.4 with React Testing Library
+- **Styling:** Bootstrap 5.3.3, CSS-in-JS (Emotion)
+
 ## Pre-Requisites
 
-The following technologies should have been installed on your machine where you will build, test and deploy your applications.
+The following technologies should be installed on your machine:
 
-* NodeJS 12.4.1 or above
-* git tool
+- **Node.js:** 18.0.0 or above (recommended: LTS version)
+- **npm:** 9.0.0 or above
+- **git:** Latest stable version
 
-## Steps to Build and Run the App: ##
+## Installation
+
+### Clone the Repository
+
+```bash
+git clone https://github.com/drajer-health/eCRNow-UI.git
+cd eCRNow-UI
+```
+
+### Install Dependencies
+
+```bash
+npm install
+```
 
-### Clone the repository
+This command will download all the required dependencies specified in package.json.
 
-```git clone https://github.com/drajer-health/eCRNow-UI.git```
+## Configuration
 
-### Build and Run the Application
+### Environment Variables
 
-To run the eCRNow-UI application, from the project directory, run the below commands:
+Create a `.env` file in the project root by copying the example file:
 
-```npm install```
+```bash
+cp .env.example .env
+```
 
-This command will download all the required dependencies.Run the below command once the above command is successfully executed.
+Configure the following environment variables in your `.env` file:
 
-```npm start```
+```env
+VITE_ECR_BASE_URL=http://localhost:8081
+VITE_BYPASS_AUTH=false
+VITE_REFRESH_TIME=60000
+```
 
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+**Environment Variables Explained:**
+- `VITE_ECR_BASE_URL`: Backend API URL for the eCRNow service
+- `VITE_BYPASS_AUTH`: Skip authentication for development (set to `true` only in dev)
+- `VITE_REFRESH_TIME`: JWT token refresh interval in milliseconds (default: 60000ms = 1 minute)
 
-The page will reload if you make edits.<br>
-You will also see any lint errors in the console.
+## Available Commands
 
-### Configuration Changes: 
+### Development
 
-File: .env
+Start the development server with hot module replacement:
 
-Change the REACT_APP_ECR_BASE_URL value to use the eCRNow backend service base URL. 
+```bash
+npm run dev
+```
 
-### Additional Configuration Changes:
+The application will be available at [http://localhost:5173](http://localhost:5173)
 
-To build and deploy the application in Production environment or to any Tomcat web server. The detailed instructions are documented and present in this repository. File Name: Steps to Run eCRNow-UI.docx
+The development server includes:
+- Hot Module Replacement (HMR) for instant updates
+- API proxy configured to forward `/api` requests to `http://localhost:8081`
+- TypeScript type checking
+- Fast refresh for React components
 
-## Setup and Usage full docker mode
+### Production Build
 
-### Build the Docker Image
-Run the following command to build the Docker image:
+Build the application for production:
 
-```sh
-docker build --build-arg REACT_APP_ECR_BASE_URL=http://localhost:8081 \
-             --build-arg REACT_APP_BYPASS_AUTH=true \
-             -t ecrnow-ui:latest \
-             -f docker/Dockerfile .
+```bash
+npm run build
 ```
 
-### Run the Container
-Use this command to start the container:
+This command:
+- Compiles TypeScript to JavaScript
+- Bundles and optimizes all assets
+- Outputs production-ready files to the `dist/` directory
+- Performs tree-shaking to remove unused code
 
-```sh
-docker run -d -p 3000:80 --name ecrnow-ui ecrnow-ui:latest
+### Preview Production Build
+
+Preview the production build locally:
+
+```bash
+npm run preview
 ```
 
-### Access the Application
-Once the container is running, open your browser and go to:
+This serves the built application from the `dist/` directory to test the production build before deployment.
+
+### Testing
+
+Run all tests:
+
+```bash
+npm test
 ```
-http://localhost:3000
+
+Run tests in watch mode (re-runs tests on file changes):
+
+```bash
+npm run test:watch
 ```
 
-### Stop and Remove the Container
-```sh
-docker stop ecrnow-ui && docker rm ecrnow-ui
+Generate test coverage report:
+
+```bash
+npm run coverage
 ```
 
-## Notes
-- Ensure that the `nginx.conf` file is correctly set up inside the `docker` directory.
-- If using `docker-compose`, update the paths accordingly.
+Coverage reports will be generated in:
+- Console output (text format)
+- HTML report in `coverage/` directory
+
+## Project Structure
+
+```
+eCRNow-UI/
+├── src/
+│   ├── App.tsx                      # Main app router and authentication
+│   ├── main.tsx                     # Application entry point
+│   ├── setupTests.ts                # Test configuration
+│   ├── Components/                  # Page components
+│   │   ├── Authorizations/          # OAuth2 authorization handling
+│   │   ├── ClientDetails/           # EHR client configuration
+│   │   ├── HealthCareSettings/      # Healthcare settings management
+│   │   ├── KAR/                     # Knowledge Artifact Repositories
+│   │   ├── LoginPage/               # User authentication
+│   │   ├── PublicHealthAuthority/   # PHA endpoint configuration
+│   │   └── ...
+│   ├── Models/                      # TypeScript interfaces and types
+│   ├── ReUsables/                   # Shared form components
+│   ├── Services/                    # API services and HTTP client
+│   │   └── AxiosConfig.ts           # Axios instance with JWT handling
+│   ├── Shared/                      # Layout components
+│   │   ├── Header/
+│   │   └── HeaderMenu/
+│   └── index.css                    # Global styles
+├── vite.config.ts                   # Vite configuration
+├── tsconfig.json                    # TypeScript configuration
+├── package.json                     # Dependencies and scripts
+└── .env.example                     # Environment variables template
+```
+
+## Key Features
+
+### Authentication & Authorization
+- JWT-based authentication with automatic token refresh
+- OAuth2 authorization flows with FHIR servers
+- Secure session management with cookie-based tokens
+
+### Client Details Management
+- Configure EHR client integrations
+- Support for multiple launch types (Provider, System, User Account)
+- FHIR server URL configuration
+
+### Healthcare Settings
+- FHIR configuration (auth types, scopes, endpoints)
+- Transport configuration (Direct, XDR, REST API)
+- Application settings (encounter thresholds, debug logging)
+- Organization defaults
+- Response options and document reference handling
+
+### Knowledge Artifact Repositories
+- Search and register FHIR-based KAR repositories
+- Support for multiple output formats (CDA_R11, CDA_R30, CDA_R31, FHIR)
+
+### Public Health Authority Management
+- Configure PHA endpoints for case reporting
+- Manage multiple PHA configurations
+
+## Vite Configuration
+
+The project uses Vite for fast development and optimized builds. Key configuration features:
+
+- **Path Alias:** `@` resolves to `src/` directory for cleaner imports
+- **API Proxy:** Development server proxies `/api` requests to backend
+- **React Fast Refresh:** Instant component updates during development
+- **Vitest Integration:** Test configuration with jsdom environment
+
+## Backend Integration
+
+The application communicates with the eCRNow backend service (default: `http://localhost:8081`).
+
+Ensure the backend service is running before starting the frontend application.
+
+## Browser Support
+
+Modern browsers with ES6+ support:
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/your-feature-name`
+3. Commit your changes: `git commit -m 'Add some feature'`
+4. Push to the branch: `git push origin feature/your-feature-name`
+5. Submit a pull request
+
+## License
+
+This project is part of the eCRNow system for Electronic Case Reporting.
+
+## Support
+
+For issues and questions, please refer to the project documentation or contact the development team.

db.json

@@ -0,0 +1,19 @@
+{
+  "posts": [
+    {
+      "id": 1,
+      "title": "json-server",
+      "author": "typicode"
+    }
+  ],
+  "comments": [
+    {
+      "id": 1,
+      "body": "some comment",
+      "postId": 1
+    }
+  ],
+  "profile": {
+    "name": "typicode"
+  }
+}