for migration to new repo to be able to use the CICD
All checks were successful
Build and Deploy LSFE Frontend / build-and-deploy (push) Successful in 4m36s
All checks were successful
Build and Deploy LSFE Frontend / build-and-deploy (push) Successful in 4m36s
This commit is contained in:
rowell_m_soriano
commit
f568a8aa14
17
.eslintrc.json
Normal file
17
.eslintrc.json
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest",
|
||||||
|
"@typescript-eslint/recommended",
|
||||||
|
"prettier"
|
||||||
|
],
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"plugins": ["@typescript-eslint", "prettier"],
|
||||||
|
"rules": {
|
||||||
|
"prettier/prettier": "error",
|
||||||
|
"@typescript-eslint/no-unused-vars": "warn",
|
||||||
|
"@typescript-eslint/explicit-function-return-type": "off",
|
||||||
|
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||||
|
"@typescript-eslint/no-explicit-any": "warn"
|
||||||
|
}
|
||||||
|
}
|
||||||
137
.gitea/workflows/deploy.yml
Normal file
137
.gitea/workflows/deploy.yml
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
name: Build and Deploy LSFE Frontend
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [ main ]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build-and-deploy:
|
||||||
|
runs-on: lsfe-server
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Setup Node
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: "20"
|
||||||
|
|
||||||
|
- name: Clean previous build output
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
Remove-Item -Recurse -Force ".\dist" -ErrorAction SilentlyContinue
|
||||||
|
|
||||||
|
- name: Install dependencies
|
||||||
|
shell: pwsh
|
||||||
|
run: npm ci
|
||||||
|
|
||||||
|
# Uses the committed .env (e.g. .env.production) picked up automatically by Vite -
|
||||||
|
# no secrets injected at build time for this project.
|
||||||
|
- name: Build (Vite production build)
|
||||||
|
shell: pwsh
|
||||||
|
run: npm run build
|
||||||
|
|
||||||
|
- name: Verify build output exists
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
if (-not (Test-Path ".\dist\index.html")) {
|
||||||
|
throw "Vite build did not produce dist\index.html - aborting before touching live site"
|
||||||
|
}
|
||||||
|
|
||||||
|
# ---- Backup current live deployment before touching anything ----
|
||||||
|
- name: Backup current live files
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
$stamp = Get-Date -Format "yyyyMMdd-HHmmss"
|
||||||
|
New-Item -ItemType Directory -Force -Path "C:\backups-frontend\$stamp" | Out-Null
|
||||||
|
|
||||||
|
if (Test-Path "C:\inetpub\LSFE-Frontend") {
|
||||||
|
robocopy "C:\inetpub\LSFE-Frontend" "C:\backups-frontend\$stamp\frontend" /MIR /R:2 /W:3 | Out-Null
|
||||||
|
}
|
||||||
|
|
||||||
|
$stamp | Out-File -FilePath "C:\backups-frontend\latest.txt" -Encoding ascii -NoNewline
|
||||||
|
|
||||||
|
# Keep only the last 5 backups to avoid filling the disk
|
||||||
|
$all = Get-ChildItem "C:\backups-frontend" -Directory | Sort-Object Name -Descending
|
||||||
|
if ($all.Count -gt 5) {
|
||||||
|
$all | Select-Object -Skip 5 | Remove-Item -Recurse -Force
|
||||||
|
}
|
||||||
|
|
||||||
|
Write-Host "Backed up current frontend deployment to C:\backups-frontend\$stamp"
|
||||||
|
exit 0
|
||||||
|
|
||||||
|
- name: Stop app pool
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
Import-Module WebAdministration
|
||||||
|
Stop-WebAppPool -Name "LSFE-Frontend" -ErrorAction SilentlyContinue
|
||||||
|
Start-Sleep -Seconds 3
|
||||||
|
|
||||||
|
- name: Deploy frontend files
|
||||||
|
id: deploy_frontend
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
# Mirrors the built dist folder into the live IIS site path.
|
||||||
|
# No content/uploads folder to protect here (that's a backend concept) -
|
||||||
|
# if you later add one under the frontend site, add /XD <folder> here too.
|
||||||
|
robocopy ".\dist" "C:\inetpub\LSFE-Frontend" /MIR /R:3 /W:5
|
||||||
|
$rc = $LASTEXITCODE
|
||||||
|
Write-Host "ROBOCOPY EXIT CODE: $rc"
|
||||||
|
if ($rc -ge 8) {
|
||||||
|
throw "robocopy failed for frontend with exit code $rc"
|
||||||
|
}
|
||||||
|
exit 0
|
||||||
|
|
||||||
|
- name: Start app pool
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
Import-Module WebAdministration
|
||||||
|
Start-WebAppPool -Name "LSFE-Frontend"
|
||||||
|
|
||||||
|
- name: Verify app pool is running
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
Start-Sleep -Seconds 3
|
||||||
|
Import-Module WebAdministration
|
||||||
|
$fe = Get-WebAppPoolState -Name "LSFE-Frontend"
|
||||||
|
Write-Host "LSFE-Frontend: $($fe.Value)"
|
||||||
|
if ($fe.Value -ne "Started") {
|
||||||
|
throw "Frontend app pool failed to start"
|
||||||
|
}
|
||||||
|
|
||||||
|
# ---- Rollback path: only runs if any prior step in this job failed ----
|
||||||
|
- name: ROLLBACK - restore previous backup
|
||||||
|
if: failure()
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
$stamp = (Get-Content "C:\backups-frontend\latest.txt" -Raw).Trim()
|
||||||
|
$backupPath = "C:\backups-frontend\$stamp"
|
||||||
|
Write-Host "Deployment failed - rolling back to backup: $backupPath"
|
||||||
|
|
||||||
|
Import-Module WebAdministration
|
||||||
|
Stop-WebAppPool -Name "LSFE-Frontend" -ErrorAction SilentlyContinue
|
||||||
|
Start-Sleep -Seconds 3
|
||||||
|
|
||||||
|
if (Test-Path "$backupPath\frontend") {
|
||||||
|
robocopy "$backupPath\frontend" "C:\inetpub\LSFE-Frontend" /MIR /R:3 /W:5 | Out-Null
|
||||||
|
}
|
||||||
|
|
||||||
|
Start-WebAppPool -Name "LSFE-Frontend"
|
||||||
|
|
||||||
|
Write-Host "Rollback complete. Restored from $backupPath"
|
||||||
|
exit 0
|
||||||
|
|
||||||
|
- name: ROLLBACK - verify pool after restore
|
||||||
|
if: failure()
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
Start-Sleep -Seconds 3
|
||||||
|
Import-Module WebAdministration
|
||||||
|
$fe = Get-WebAppPoolState -Name "LSFE-Frontend"
|
||||||
|
|
||||||
|
Write-Host "After rollback - LSFE-Frontend: $($fe.Value)"
|
||||||
|
|
||||||
|
if ($fe.Value -ne "Started") {
|
||||||
|
Write-Host "WARNING: frontend app pool still not running after rollback. Manual intervention needed."
|
||||||
|
}
|
||||||
98
.gitignore
vendored
Normal file
98
.gitignore
vendored
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
# =========================
|
||||||
|
# Dependencies
|
||||||
|
# =========================
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Package manager logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# Build output
|
||||||
|
# =========================
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
coverage/
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# Vite
|
||||||
|
# =========================
|
||||||
|
.vite/
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# TypeScript
|
||||||
|
# =========================
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# Environment variables
|
||||||
|
# =========================
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Keep example env file
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# IDEs
|
||||||
|
# =========================
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
|
||||||
|
.idea/
|
||||||
|
*.iml
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# OS files
|
||||||
|
# =========================
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
Desktop.ini
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# Logs
|
||||||
|
# =========================
|
||||||
|
logs/
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# Temporary files
|
||||||
|
# =========================
|
||||||
|
tmp/
|
||||||
|
temp/
|
||||||
|
.cache/
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# Testing
|
||||||
|
# =========================
|
||||||
|
playwright-report/
|
||||||
|
test-results/
|
||||||
|
coverage/
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# Misc
|
||||||
|
# =========================
|
||||||
|
*.tgz
|
||||||
|
*.zip
|
||||||
|
*.7z
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# Local database files
|
||||||
|
# (if used for development)
|
||||||
|
# =========================
|
||||||
|
*.sqlite
|
||||||
|
*.sqlite3
|
||||||
|
|
||||||
|
# =========================
|
||||||
|
# Runtime PID files
|
||||||
|
# =========================
|
||||||
|
*.pid
|
||||||
|
*.pid.lock
|
||||||
8
.prettierrc
Normal file
8
.prettierrc
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"semi": true,
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 80,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"useTabs": false
|
||||||
|
}
|
||||||
20
README.md
Normal file
20
README.md
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
# Introduction
|
||||||
|
TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project.
|
||||||
|
|
||||||
|
# Getting Started
|
||||||
|
TODO: Guide users through getting your code up and running on their own system. In this section you can talk about:
|
||||||
|
1. Installation process
|
||||||
|
2. Software dependencies
|
||||||
|
3. Latest releases
|
||||||
|
4. API references
|
||||||
|
|
||||||
|
# Build and Test
|
||||||
|
TODO: Describe and show how to build your code and run the tests.
|
||||||
|
|
||||||
|
# Contribute
|
||||||
|
TODO: Explain how other users and developers can contribute to make your code better.
|
||||||
|
|
||||||
|
If you want to learn more about creating good readme files then refer the following [guidelines](https://docs.microsoft.com/en-us/azure/devops/repos/git/create-a-readme?view=azure-devops). You can also seek inspiration from the below readme files:
|
||||||
|
- [ASP.NET Core](https://github.com/aspnet/Home)
|
||||||
|
- [Visual Studio Code](https://github.com/Microsoft/vscode)
|
||||||
|
- [Chakra Core](https://github.com/Microsoft/ChakraCore)
|
||||||
23
eslint.config.js
Normal file
23
eslint.config.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs['recommended-latest'],
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
29
index.html
Normal file
29
index.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
|
||||||
|
<!-- Multiple favicon sizes for better clarity -->
|
||||||
|
<link rel="icon" id="favicon" type="image/svg+xml" href="/vamsler.svg" />
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/vamsler-32.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/vamsler-16.png" />
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/vamsler-180.png" />
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vamsler + Ultramed</title>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Alternate between logos every 3.5 seconds
|
||||||
|
let useVamsler = true;
|
||||||
|
setInterval(() => {
|
||||||
|
const favicon = document.getElementById('favicon');
|
||||||
|
favicon.href = useVamsler ? '/ultramed.svg' : '/vamsler.svg';
|
||||||
|
useVamsler = !useVamsler;
|
||||||
|
}, 3500);
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5903
package-lock.json
generated
Normal file
5903
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
61
package.json
Normal file
61
package.json
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
{
|
||||||
|
"name": "l-sfe",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"lint:fix": "eslint . --ext ts,tsx --fix",
|
||||||
|
"format": "prettier --write .",
|
||||||
|
"type-check": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@hello-pangea/dnd": "^18.0.1",
|
||||||
|
"@hookform/resolvers": "^5.2.2",
|
||||||
|
"@tailwindcss/forms": "^0.5.10",
|
||||||
|
"@tailwindcss/typography": "^0.5.18",
|
||||||
|
"@tanstack/react-query": "^5.89.0",
|
||||||
|
"@tiptap/react": "^3.4.4",
|
||||||
|
"@tiptap/starter-kit": "^3.4.4",
|
||||||
|
"axios": "^1.13.2",
|
||||||
|
"date-fns": "^4.1.0",
|
||||||
|
"framer-motion": "^12.23.16",
|
||||||
|
"lucide-react": "^0.544.0",
|
||||||
|
"react": "^19.1.1",
|
||||||
|
"react-dom": "^19.1.1",
|
||||||
|
"react-dropzone": "^14.3.8",
|
||||||
|
"react-hook-form": "^7.63.0",
|
||||||
|
"react-router-dom": "^7.9.1",
|
||||||
|
"recharts": "^3.2.1",
|
||||||
|
"yup": "^1.7.0",
|
||||||
|
"zustand": "^5.0.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.35.0",
|
||||||
|
"@types/history": "^4.7.11",
|
||||||
|
"@types/react": "^19.1.13",
|
||||||
|
"@types/react-beautiful-dnd": "^13.1.8",
|
||||||
|
"@types/react-dom": "^19.1.9",
|
||||||
|
"@types/react-router-dom": "^5.3.3",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^8.44.0",
|
||||||
|
"@typescript-eslint/parser": "^8.44.0",
|
||||||
|
"@vitejs/plugin-react": "^5.0.2",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"baseline-browser-mapping": "^2.8.31",
|
||||||
|
"eslint": "^9.36.0",
|
||||||
|
"eslint-config-prettier": "^10.1.8",
|
||||||
|
"eslint-plugin-prettier": "^5.5.4",
|
||||||
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.20",
|
||||||
|
"globals": "^16.4.0",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"prettier": "^3.6.2",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
|
"typescript": "~5.8.3",
|
||||||
|
"typescript-eslint": "^8.43.0",
|
||||||
|
"vite": "^7.1.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
865
public/favicon.svg
Normal file
865
public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 472 KiB |
392
public/ultramed.svg
Normal file
392
public/ultramed.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 273 KiB |
865
public/vamsler.svg
Normal file
865
public/vamsler.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 472 KiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
34
public/web.config
Normal file
34
public/web.config
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<configuration>
|
||||||
|
<system.webServer>
|
||||||
|
<!-- MIME types -->
|
||||||
|
<staticContent>
|
||||||
|
<remove fileExtension=".woff2" />
|
||||||
|
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
|
||||||
|
<remove fileExtension=".wasm" />
|
||||||
|
<mimeMap fileExtension=".wasm" mimeType="application/wasm" />
|
||||||
|
</staticContent>
|
||||||
|
|
||||||
|
<!-- React SPA routing -->
|
||||||
|
<rewrite>
|
||||||
|
<rules>
|
||||||
|
<rule name="ReactRouter" stopProcessing="true">
|
||||||
|
<match url=".*" />
|
||||||
|
<conditions logicalGrouping="MatchAll">
|
||||||
|
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
|
||||||
|
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
|
||||||
|
</conditions>
|
||||||
|
<action type="Rewrite" url="/index.html" />
|
||||||
|
</rule>
|
||||||
|
</rules>
|
||||||
|
</rewrite>
|
||||||
|
|
||||||
|
<!-- Default document -->
|
||||||
|
<defaultDocument>
|
||||||
|
<files>
|
||||||
|
<clear />
|
||||||
|
<add value="index.html" />
|
||||||
|
</files>
|
||||||
|
</defaultDocument>
|
||||||
|
</system.webServer>
|
||||||
|
</configuration>
|
||||||
48
src/App.css
Normal file
48
src/App.css
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
@import "tailwindcss/base";
|
||||||
|
@import "tailwindcss/components";
|
||||||
|
@import "tailwindcss/utilities";
|
||||||
|
|
||||||
|
/* Import Google Fonts */
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f5f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #cbd5e1;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth transitions for all elements */
|
||||||
|
* {
|
||||||
|
transition-property:
|
||||||
|
color, background-color, border-color, text-decoration-color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom component styles */
|
||||||
|
.glass {
|
||||||
|
background: rgba(255, 255, 255, 0.25);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-bg {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.teal-gradient {
|
||||||
|
background: linear-gradient(135deg, #0d9488 0%, #134e4a 100%);
|
||||||
|
}
|
||||||
127
src/App.tsx
Normal file
127
src/App.tsx
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
|
import { useAuth } from './hooks/useAuth';
|
||||||
|
|
||||||
|
// Import your existing components
|
||||||
|
import LoginPage from './components/features/auth/LoginPage';
|
||||||
|
import { ToastContainer } from './components/ui/Toast';
|
||||||
|
import { Layout } from './components/layout';
|
||||||
|
import { DashboardOverview, SettingsPage } from './components/dashboard';
|
||||||
|
import { PatientsPage } from './pages/doctor';
|
||||||
|
|
||||||
|
// Import your existing DoctorManagementPage
|
||||||
|
import { DoctorManagement } from './pages/doctor/DoctorManagement';
|
||||||
|
import { AppointmentManagement } from './pages/appointment/AppointmentManagement';
|
||||||
|
import { ReportsPage } from './pages/tabReports/ReportsPage';
|
||||||
|
|
||||||
|
// Protected Route Component
|
||||||
|
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||||
|
const { isAuthenticated, isLoading } = useAuth();
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600 mx-auto"></div>
|
||||||
|
<p className="mt-4 text-gray-600">Loading...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Public Route Component
|
||||||
|
const PublicRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||||
|
const { isAuthenticated, isLoading } = useAuth();
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600 mx-auto"></div>
|
||||||
|
<p className="mt-4 text-gray-600">Loading...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return isAuthenticated ? <Navigate to="/dashboard" replace /> : <>{children}</>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Main Dashboard Layout
|
||||||
|
const DashboardLayout: React.FC = () => {
|
||||||
|
const [activeTab, setActiveTab] = React.useState('dashboard');
|
||||||
|
const { user, logout } = useAuth();
|
||||||
|
|
||||||
|
const renderContent = () => {
|
||||||
|
switch (activeTab) {
|
||||||
|
case 'dashboard':
|
||||||
|
return <DashboardOverview user={user} onLogout={logout} />;
|
||||||
|
case 'doctors':
|
||||||
|
return <DoctorManagement />;
|
||||||
|
case 'patients':
|
||||||
|
return <PatientsPage />;
|
||||||
|
case 'appointments':
|
||||||
|
return <AppointmentManagement />;
|
||||||
|
case 'reports':
|
||||||
|
return <ReportsPage user={user} />;
|
||||||
|
case 'settings':
|
||||||
|
return <SettingsPage user={user} onLogout={logout} />;
|
||||||
|
default:
|
||||||
|
return <DashboardOverview user={user} onLogout={logout} />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout
|
||||||
|
activeTab={activeTab}
|
||||||
|
onTabChange={setActiveTab}
|
||||||
|
user={user}
|
||||||
|
onLogout={logout}
|
||||||
|
>
|
||||||
|
{renderContent()}
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<div className="App">
|
||||||
|
<Routes>
|
||||||
|
{/* Public Routes */}
|
||||||
|
<Route
|
||||||
|
path="/login"
|
||||||
|
element={
|
||||||
|
<PublicRoute>
|
||||||
|
<LoginPage />
|
||||||
|
</PublicRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Protected Routes */}
|
||||||
|
<Route
|
||||||
|
path="/dashboard"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<DashboardLayout />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Default redirect */}
|
||||||
|
<Route path="/" element={<Navigate to="/login" replace />} />
|
||||||
|
|
||||||
|
{/* Catch all route */}
|
||||||
|
<Route path="*" element={<Navigate to="/login" replace />} />
|
||||||
|
</Routes>
|
||||||
|
|
||||||
|
<ToastContainer />
|
||||||
|
</div>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
94
src/components/appointment/AppointmentCard.tsx
Normal file
94
src/components/appointment/AppointmentCard.tsx
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
import { Appointment } from "@/types/appointment/appointment";
|
||||||
|
import { Clock, Edit, Eye, Plus, Trash2, User } from "lucide-react";
|
||||||
|
|
||||||
|
export const AppointmentCard: React.FC<{
|
||||||
|
appointment: Appointment;
|
||||||
|
onAdd: () => void;
|
||||||
|
onView: () => void;
|
||||||
|
onEdit: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
showDelete?: boolean;
|
||||||
|
isPlanning: boolean;
|
||||||
|
showAdd?: boolean;
|
||||||
|
}> = ({ appointment, onAdd, onView, onEdit, onDelete, showDelete = false, isPlanning, showAdd = true }) => {
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
const normalized = (status || '').toLowerCase().trim();
|
||||||
|
switch (normalized) {
|
||||||
|
case 'partial': return 'bg-blue-100 text-blue-800';
|
||||||
|
case 'completed': return 'bg-green-100 text-green-800';
|
||||||
|
case 'none': return 'bg-gray-100 text-red-800';
|
||||||
|
default: return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow">
|
||||||
|
<div className="flex justify-between items-start mb-3">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Clock className="w-4 h-4 text-gray-500" />
|
||||||
|
<span className="text-sm font-medium text-gray-900">
|
||||||
|
{/* {appointment.startTime} - {appointment.endTime}*/}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(appointment.status)}`}>
|
||||||
|
{appointment.status.charAt(0).toUpperCase() + appointment.status.slice(1)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<User className="w-4 h-4 text-gray-500" />
|
||||||
|
<span className="text-sm text-gray-900">{appointment.firstName}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500">Dr. {appointment.lastName}</p>
|
||||||
|
<p className="text-xs text-gray-500">M.R. {appointment.mrFullName}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end space-x-2 mt-4 pt-3 border-t border-gray-100">
|
||||||
|
{/* Show Add button only when isPlanning is true AND showAdd is true */}
|
||||||
|
{isPlanning && showAdd && (
|
||||||
|
<button
|
||||||
|
onClick={onAdd}
|
||||||
|
className="p-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded"
|
||||||
|
title="Add Appointment"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Show View button only when isPlanning is true */}
|
||||||
|
{isPlanning && (
|
||||||
|
<button
|
||||||
|
onClick={onView}
|
||||||
|
className="p-1 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded"
|
||||||
|
title="View Details"
|
||||||
|
>
|
||||||
|
<Eye className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Show Edit and Delete buttons only when showDelete is true AND isPlanning is true */}
|
||||||
|
{showDelete && isPlanning && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={onEdit}
|
||||||
|
className="p-1 text-gray-500 hover:text-green-600 hover:bg-green-50 rounded"
|
||||||
|
title="Edit"
|
||||||
|
>
|
||||||
|
<Edit className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onDelete}
|
||||||
|
className="p-1 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded"
|
||||||
|
title="Delete"
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
854
src/components/appointment/AppointmentForm.tsx
Normal file
854
src/components/appointment/AppointmentForm.tsx
Normal file
@ -0,0 +1,854 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Button, Checkbox, Modal, RadioGroup } from "../ui/";
|
||||||
|
import { Appointment, AppointmentFormData, SelectedPromo, SelectedSample } from "@/types/appointment/appointment";
|
||||||
|
import { Input } from "../ui";
|
||||||
|
import { useProductApi } from "../../hooks/generic/useProduct";
|
||||||
|
import { useInventoryApi } from "../../hooks/generic/useInventory";
|
||||||
|
import { useToast } from '../../contexts/ToastContext';
|
||||||
|
|
||||||
|
export const AppointmentForm: React.FC<{
|
||||||
|
appointment?: Appointment;
|
||||||
|
onSubmit: (data: AppointmentFormData) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
isLoading: boolean;
|
||||||
|
mode: 'add' | 'edit' | 'view' | 'delete';
|
||||||
|
// Add these new props for existing data
|
||||||
|
existingSamples?: SelectedSample[];
|
||||||
|
existingPromos?: SelectedPromo[];
|
||||||
|
currentCalendarDate?: Date;
|
||||||
|
}> = ({
|
||||||
|
appointment,
|
||||||
|
onSubmit,
|
||||||
|
onCancel,
|
||||||
|
isLoading,
|
||||||
|
mode,
|
||||||
|
existingSamples = [],
|
||||||
|
existingPromos = [],
|
||||||
|
currentCalendarDate
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState<AppointmentFormData>({
|
||||||
|
doctorId: appointment?.doctorId || 0,
|
||||||
|
lastName: appointment?.lastName || '',
|
||||||
|
mrPlanDate: appointment?.mrPlanDate || appointment?.callDate || '',
|
||||||
|
mrRawPlanId: appointment?.mrRawPlanId || '',
|
||||||
|
callDate: appointment?.callDate || '',
|
||||||
|
productId: appointment?.productId || 0,
|
||||||
|
callType: appointment?.callType || '',
|
||||||
|
slp: appointment?.slp || '',
|
||||||
|
isLiterature: appointment?.isLiterature || false,
|
||||||
|
isJoinCall: appointment?.isJoinCall || false,
|
||||||
|
mrPlanDetailId: appointment?.mrPlanDetailId || '',
|
||||||
|
isUpdateDelete: appointment?.isUpdateDelete || 0,
|
||||||
|
firstName: appointment?.firstName || '',
|
||||||
|
middleInitial: appointment?.middleInitial || '',
|
||||||
|
mrFullName: appointment?.mrFullName || '',
|
||||||
|
specializationName: appointment?.specializationName || '',
|
||||||
|
institutionName: appointment?.institutionName || '',
|
||||||
|
divisionName: appointment?.divisionName || '',
|
||||||
|
territoryName: appointment?.territoryName || '',
|
||||||
|
maxVisit: appointment?.maxVisit || 0,
|
||||||
|
isCatchUpCall: appointment?.isCatchUpCall || false,
|
||||||
|
status: appointment?.status || 'partial'
|
||||||
|
});
|
||||||
|
|
||||||
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||||
|
|
||||||
|
const { products, setProducts, fetchProducts } = useProductApi();
|
||||||
|
const { inventory, fetchInventory } = useInventoryApi();
|
||||||
|
|
||||||
|
const { addToast } = useToast();
|
||||||
|
// Modal states
|
||||||
|
const [isSamplesModalOpen, setIsSamplesModalOpen] = useState(false);
|
||||||
|
const [isPromosModalOpen, setIsPromosModalOpen] = useState(false);
|
||||||
|
|
||||||
|
// Selected items states - Initialize with existing data
|
||||||
|
const [selectedSamples, setSelectedSamples] = useState<SelectedSample[]>(existingSamples);
|
||||||
|
const [selectedPromos, setSelectedPromos] = useState<SelectedPromo[]>(existingPromos);
|
||||||
|
|
||||||
|
// Temporary selections in modal (before clicking Add)
|
||||||
|
const [tempSelectedSampleIds, setTempSelectedSampleIds] = useState<Set<string>>(new Set());
|
||||||
|
const [tempSelectedPromoIds, setTempSelectedPromoIds] = useState<Set<number>>(new Set());
|
||||||
|
|
||||||
|
// Search states for modals
|
||||||
|
const [samplesSearchTerm, setSamplesSearchTerm] = useState('');
|
||||||
|
const [promosSearchTerm, setPromosSearchTerm] = useState('');
|
||||||
|
|
||||||
|
// Only initialize once when the form opens, not on every change
|
||||||
|
useEffect(() => {
|
||||||
|
// Only set if we haven't already initialized and we have existing data
|
||||||
|
if (mode === 'edit' && existingSamples.length > 0 && selectedSamples.length === 0) {
|
||||||
|
setSelectedSamples(existingSamples);
|
||||||
|
} else if (mode === 'add') {
|
||||||
|
// Clear for add mode
|
||||||
|
setSelectedSamples([]);
|
||||||
|
}
|
||||||
|
}, [mode]); // Only run when mode changes, NOT when existingSamples changes
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Only set if we haven't already initialized and we have existing data
|
||||||
|
if (mode === 'edit' && existingPromos.length > 0 && selectedPromos.length === 0) {
|
||||||
|
setSelectedPromos(existingPromos);
|
||||||
|
} else if (mode === 'add') {
|
||||||
|
// Clear for add mode
|
||||||
|
setSelectedPromos([]);
|
||||||
|
}
|
||||||
|
}, [mode]); // Only run when mode changes, NOT when existingPromos changes
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (appointment?.productId && appointment.productName) {
|
||||||
|
setProducts([{
|
||||||
|
productId: appointment.productId,
|
||||||
|
productName: appointment.productName,
|
||||||
|
productLink: appointment.productName,
|
||||||
|
}]);
|
||||||
|
}
|
||||||
|
}, [appointment, setProducts]);
|
||||||
|
|
||||||
|
// Get the relevant date based on mode and extract month
|
||||||
|
const getFilterMonth = (): number | null => {
|
||||||
|
const relevantDate = mode === 'edit' ? formData.mrPlanDate : formData.callDate;
|
||||||
|
if (!relevantDate) return null;
|
||||||
|
|
||||||
|
const date = new Date(relevantDate);
|
||||||
|
return date.getMonth() + 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Check if date is selected
|
||||||
|
const isDateSelected = mode === 'edit' ? !!formData.mrPlanDate : !!formData.callDate;
|
||||||
|
|
||||||
|
const updateLiterature = (value: string) => {
|
||||||
|
setFormData(prev => ({ ...prev, isLiterature: value === 'true' }));
|
||||||
|
if (errors.isLiterature) {
|
||||||
|
setErrors(prev => ({ ...prev, isLiterature: '' }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const newErrors: Record<string, string> = {};
|
||||||
|
|
||||||
|
if (!formData.callDate) {
|
||||||
|
newErrors.callDate = 'Appointment date is required';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.mrPlanDate) {
|
||||||
|
formData.mrPlanDate = formData.callDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ NEW VALIDATION: Check if callDate is valid in edit mode
|
||||||
|
if (mode === 'edit' && formData.mrPlanDate && formData.callDate) {
|
||||||
|
const validation = isValidAppointmentDate(formData.mrPlanDate, formData.callDate);
|
||||||
|
|
||||||
|
if (!validation.valid) {
|
||||||
|
newErrors.callDate = validation.message;
|
||||||
|
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'Invalid Date Selection',
|
||||||
|
message: validation.message,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const computedSLP = [
|
||||||
|
selectedSamples.length ? 'Samples' : '',
|
||||||
|
selectedPromos.length ? 'Promotional Materials' : '',
|
||||||
|
formData.isLiterature ? 'Literature' : ''
|
||||||
|
].filter(Boolean).join(', ');
|
||||||
|
|
||||||
|
if (selectedPromos.length === 0) {
|
||||||
|
newErrors.selectedPromos = '';
|
||||||
|
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'Missing Promotional Material',
|
||||||
|
message: 'Please add at least one promotional material before saving.'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (Object.keys(newErrors).length > 0) {
|
||||||
|
setErrors(newErrors);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dataToSubmit: AppointmentFormData = {
|
||||||
|
...formData,
|
||||||
|
selectedSamples,
|
||||||
|
selectedPromos,
|
||||||
|
slp: computedSLP
|
||||||
|
};
|
||||||
|
|
||||||
|
onSubmit(dataToSubmit);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateField = (field: keyof typeof formData) => (value: string | number) => {
|
||||||
|
let processedValue = value;
|
||||||
|
|
||||||
|
if (field === 'productId' || field === 'maxVisit' || field === 'isUpdateDelete') {
|
||||||
|
processedValue = Number(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[field]: processedValue
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Real-time validation for callDate in edit mode
|
||||||
|
if (field === 'callDate' && mode === 'edit' && formData.mrPlanDate && value) {
|
||||||
|
const validation = isValidAppointmentDate(formData.mrPlanDate, value as string);
|
||||||
|
|
||||||
|
if (!validation.valid) {
|
||||||
|
setErrors(prev => ({
|
||||||
|
...prev,
|
||||||
|
callDate: validation.message
|
||||||
|
}));
|
||||||
|
return; // Don't clear error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (errors[field]) {
|
||||||
|
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Samples Modal Handlers
|
||||||
|
const handleSampleCheckbox = (inventoryId: string, checked: boolean) => {
|
||||||
|
|
||||||
|
setTempSelectedSampleIds(prev => {
|
||||||
|
const newSet = new Set(prev);
|
||||||
|
if (checked) {
|
||||||
|
newSet.add(inventoryId);
|
||||||
|
} else {
|
||||||
|
newSet.delete(inventoryId);
|
||||||
|
}
|
||||||
|
return newSet;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddSamples = () => {
|
||||||
|
const newSamples = monthFilteredInventory
|
||||||
|
.filter(item => tempSelectedSampleIds.has(item.inventoryId))
|
||||||
|
.map(item => ({
|
||||||
|
inventoryId: item.inventoryId,
|
||||||
|
description: item.description,
|
||||||
|
qtyBalance: item.qtyIn - item.qtyOut,
|
||||||
|
selectedQty: 1,
|
||||||
|
maxQty: item.qtyIn - item.qtyOut, // For add mode, max = balance
|
||||||
|
originalQty: 0 // No original qty in add mode
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (newSamples.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedSamples(prev => {
|
||||||
|
const existing = prev.filter(s => !tempSelectedSampleIds.has(s.inventoryId));
|
||||||
|
return [...existing, ...newSamples];
|
||||||
|
});
|
||||||
|
|
||||||
|
setTempSelectedSampleIds(new Set());
|
||||||
|
setSamplesSearchTerm('');
|
||||||
|
setIsSamplesModalOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddPromos = () => {
|
||||||
|
|
||||||
|
const newPromos = products
|
||||||
|
.filter(item => {
|
||||||
|
const hasId = tempSelectedPromoIds.has(item.productId);
|
||||||
|
return hasId;
|
||||||
|
})
|
||||||
|
.map(item => ({
|
||||||
|
productId: item.productId,
|
||||||
|
productName: item.productName,
|
||||||
|
products: item.productName,
|
||||||
|
}));
|
||||||
|
|
||||||
|
setSelectedPromos(prev => {
|
||||||
|
const existing = prev.filter(p => !tempSelectedPromoIds.has(p.productId));
|
||||||
|
const updated = [...existing, ...newPromos];
|
||||||
|
return updated;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear temp state AFTER state update
|
||||||
|
setTimeout(() => {
|
||||||
|
setTempSelectedPromoIds(new Set());
|
||||||
|
setIsPromosModalOpen(false);
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveSample = (inventoryId: string) => {
|
||||||
|
setSelectedSamples(prev => prev.filter(s => s.inventoryId !== inventoryId));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSampleQtyChange = (inventoryId: string, qty: number) => {
|
||||||
|
setSelectedSamples(prev =>
|
||||||
|
prev.map(s => s.inventoryId === inventoryId ? { ...s, selectedQty: qty } : s)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Promos Modal Handlers
|
||||||
|
const handlePromoCheckbox = (productId: number, checked: boolean) => {
|
||||||
|
setTempSelectedPromoIds(prev => {
|
||||||
|
const newSet = new Set(prev);
|
||||||
|
if (checked) {
|
||||||
|
newSet.add(productId);
|
||||||
|
} else {
|
||||||
|
newSet.delete(productId);
|
||||||
|
}
|
||||||
|
|
||||||
|
return newSet;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemovePromo = (productId: number) => {
|
||||||
|
setSelectedPromos(prev => prev.filter(p => p.productId !== productId));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Filter inventory based on search
|
||||||
|
const filteredInventory = inventory.filter(item => {
|
||||||
|
if (!samplesSearchTerm) return true;
|
||||||
|
const searchLower = samplesSearchTerm.toLowerCase();
|
||||||
|
return item.description.toLowerCase().includes(searchLower);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter products based on search
|
||||||
|
const filteredProducts = products.filter(item => {
|
||||||
|
if (!promosSearchTerm) return true;
|
||||||
|
const searchLower = promosSearchTerm.toLowerCase();
|
||||||
|
return item.productName.toLowerCase().includes(searchLower);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter inventory by month
|
||||||
|
const monthFilteredInventory = filteredInventory.filter(item => {
|
||||||
|
const filterMonth = getFilterMonth();
|
||||||
|
if (filterMonth === null) return false;
|
||||||
|
return item.cycleMonth === filterMonth;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Updated helper function - Week starts on MONDAY
|
||||||
|
const isValidAppointmentDate = (previousDate: string, newDate: string): { valid: boolean; message: string } => {
|
||||||
|
if (!previousDate || !newDate) {
|
||||||
|
return { valid: false, message: 'Both dates are required' };
|
||||||
|
}
|
||||||
|
|
||||||
|
const prevDate = new Date(previousDate);
|
||||||
|
const callDate = new Date(newDate);
|
||||||
|
|
||||||
|
// Get the start of the week (MONDAY) for previousDate
|
||||||
|
const weekStart = new Date(prevDate);
|
||||||
|
const dayOfWeek = prevDate.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
|
||||||
|
|
||||||
|
// Calculate days to subtract to get to Monday
|
||||||
|
const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // If Sunday (0), go back 6 days; otherwise dayOfWeek - 1
|
||||||
|
|
||||||
|
weekStart.setDate(prevDate.getDate() - daysToMonday);
|
||||||
|
weekStart.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
// Get the end of the week (SUNDAY)
|
||||||
|
const weekEnd = new Date(weekStart);
|
||||||
|
weekEnd.setDate(weekStart.getDate() + 6); // Monday + 6 days = Sunday
|
||||||
|
weekEnd.setHours(23, 59, 59, 999);
|
||||||
|
|
||||||
|
// Check if newDate is within the same week
|
||||||
|
const isWithinWeek = callDate >= weekStart && callDate <= weekEnd;
|
||||||
|
|
||||||
|
if (!isWithinWeek) {
|
||||||
|
const weekStartStr = weekStart.toISOString().split('T')[0];
|
||||||
|
const weekEndStr = weekEnd.toISOString().split('T')[0];
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
message: `New appointment date must be within the same week as previous date (${weekStartStr} to ${weekEndStr})`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return { valid: true, message: '' };
|
||||||
|
};
|
||||||
|
|
||||||
|
// Calculate min and max dates based on current calendar month
|
||||||
|
const getDateConstraints = () => {
|
||||||
|
if (!currentCalendarDate) {
|
||||||
|
console.log('⚠️ getDateConstraints: currentCalendarDate is undefined!');
|
||||||
|
return { min: undefined, max: undefined };
|
||||||
|
}
|
||||||
|
|
||||||
|
const year = currentCalendarDate.getFullYear();
|
||||||
|
const month = currentCalendarDate.getMonth();
|
||||||
|
|
||||||
|
// Format as YYYY-MM-DD in local timezone
|
||||||
|
const minDateStr = `${year}-${String(month + 1).padStart(2, '0')}-01`;
|
||||||
|
|
||||||
|
// Last day of the month - get the actual last day number
|
||||||
|
const lastDay = new Date(year, month + 1, 0).getDate();
|
||||||
|
// Format as YYYY-MM-DD in local timezone
|
||||||
|
const maxDateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
|
||||||
|
|
||||||
|
return { min: minDateStr, max: maxDateStr };
|
||||||
|
};
|
||||||
|
const dateConstraints = getDateConstraints();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 border-b pb-1">
|
||||||
|
Appointment Information
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Input
|
||||||
|
label="Doctor Name"
|
||||||
|
value={`${formData.firstName} ${formData.lastName}`}
|
||||||
|
onChange={updateField('firstName')}
|
||||||
|
readOnly
|
||||||
|
required
|
||||||
|
error={errors.firstName}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Specialization"
|
||||||
|
value={formData.specializationName}
|
||||||
|
onChange={updateField('specializationName')}
|
||||||
|
readOnly
|
||||||
|
required
|
||||||
|
error={errors.specializationName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Input
|
||||||
|
label="Institution"
|
||||||
|
value={formData.institutionName}
|
||||||
|
onChange={updateField('institutionName')}
|
||||||
|
readOnly
|
||||||
|
required
|
||||||
|
error={errors.specializationName}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Territory"
|
||||||
|
value={formData.territoryName}
|
||||||
|
onChange={updateField('territoryName')}
|
||||||
|
readOnly
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Input
|
||||||
|
label="Status"
|
||||||
|
value={formData.status}
|
||||||
|
onChange={updateField('status')}
|
||||||
|
readOnly
|
||||||
|
type="text"
|
||||||
|
error={errors.status}
|
||||||
|
/>
|
||||||
|
<RadioGroup
|
||||||
|
label="Literatures"
|
||||||
|
value={formData.isLiterature}
|
||||||
|
onChange={updateLiterature}
|
||||||
|
required
|
||||||
|
error={errors.isLiterature}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
{mode === 'edit' && (
|
||||||
|
<Input
|
||||||
|
label="Previous Date"
|
||||||
|
type="date"
|
||||||
|
value={formData.mrPlanDate}
|
||||||
|
onChange={updateField('mrPlanDate')}
|
||||||
|
readOnly
|
||||||
|
error={errors.mrPlanDate}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<Input
|
||||||
|
label="Appointment Date"
|
||||||
|
type="date"
|
||||||
|
value={formData.callDate}
|
||||||
|
onChange={updateField('callDate')}
|
||||||
|
required
|
||||||
|
error={errors.callDate}
|
||||||
|
min={dateConstraints.min}
|
||||||
|
max={dateConstraints.max}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Helper message directly below Appointment Date */}
|
||||||
|
{currentCalendarDate && (
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
📅 Available dates:{' '}
|
||||||
|
<span className="font-semibold">
|
||||||
|
{new Date(currentCalendarDate.getFullYear(), currentCalendarDate.getMonth(), 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Material | Sampling Item Section */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 border-b pb-1">
|
||||||
|
Sampling & Promotional Materials
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{/* Samples Table */}
|
||||||
|
<div className="border rounded-lg p-4">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h4 className="text-sm font-medium text-gray-700">Samples</h4>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
fetchInventory();
|
||||||
|
setIsSamplesModalOpen(true);
|
||||||
|
}}
|
||||||
|
disabled={!isDateSelected}
|
||||||
|
>
|
||||||
|
+ Add Samples
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!isDateSelected && (
|
||||||
|
<p className="text-sm text-amber-600 bg-amber-50 p-2 rounded mb-2">
|
||||||
|
Please select an appointment date to add samples
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedSamples.length === 0 ? (
|
||||||
|
<p className="text-sm text-gray-500 text-center py-4">No samples selected</p>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200 text-sm">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500">Description</th>
|
||||||
|
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500">Qty</th>
|
||||||
|
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500">QtyBalance</th>
|
||||||
|
<th className="px-2 py-2 text-center text-xs font-medium text-gray-500">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{selectedSamples.map((sample) => {
|
||||||
|
// Calculate the max available (use maxQty if in edit mode, otherwise use qtyBalance)
|
||||||
|
const maxAvailable = sample.maxQty || sample.qtyBalance;
|
||||||
|
|
||||||
|
// Calculate remaining balance: maxQty - selectedQty
|
||||||
|
// This shows how much is left after the current selection
|
||||||
|
const remainingBalance = maxAvailable - sample.selectedQty;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={sample.inventoryId}>
|
||||||
|
<td className="px-2 py-2 text-gray-900">{sample.description}</td>
|
||||||
|
<td className="px-2 py-2">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max={maxAvailable}
|
||||||
|
value={sample.selectedQty}
|
||||||
|
onChange={(e) => {
|
||||||
|
const newQty = Number(e.target.value);
|
||||||
|
if (newQty > maxAvailable) {
|
||||||
|
addToast({
|
||||||
|
type: 'warning',
|
||||||
|
title: 'Invalid Quantity',
|
||||||
|
message: `Maximum available quantity is ${maxAvailable}`,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
handleSampleQtyChange(sample.inventoryId, newQty);
|
||||||
|
}}
|
||||||
|
className="w-16 px-2 py-1 border rounded text-sm"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="px-2 py-2">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
readOnly
|
||||||
|
value={remainingBalance} // Show remaining balance
|
||||||
|
className="w-16 px-2 py-1 border rounded text-sm bg-gray-50"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="px-2 py-2 text-center">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="danger"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleRemoveSample(sample.inventoryId)}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Promotional Materials Table */}
|
||||||
|
<div className={`border rounded-lg p-4 ${errors.selectedPromos ? 'border-red-400 bg-red-50' : ''}`}>
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h4 className="text-sm font-medium text-gray-700">Promotional Materials</h4>
|
||||||
|
{errors.selectedPromos && (
|
||||||
|
<p className="text-sm text-red-600 mt-2">
|
||||||
|
{errors.selectedPromos}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
fetchProducts();
|
||||||
|
setIsPromosModalOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+ Add Materials
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedPromos.length === 0 ? (
|
||||||
|
<p className="text-sm text-gray-500 text-center py-4">No materials selected</p>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200 text-sm">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-2 py-2 text-left text-xs font-medium text-gray-500">Product Name</th>
|
||||||
|
<th className="px-2 py-2 text-center text-xs font-medium text-gray-500">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{selectedPromos.map((promo) => (
|
||||||
|
<tr key={promo.productId}>
|
||||||
|
<td className="px-2 py-2 text-gray-900">{promo.productName}</td>
|
||||||
|
<td className="px-2 py-2 text-center">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="danger"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleRemovePromo(promo.productId)}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end space-x-3 pt-4">
|
||||||
|
<Button type="button" variant="outline" onClick={onCancel}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={isLoading}>
|
||||||
|
{isLoading ? 'Saving...' : appointment ? 'Update' : 'Create'} Appointment
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Samples Selection Modal */}
|
||||||
|
<Modal
|
||||||
|
isOpen={isSamplesModalOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setIsSamplesModalOpen(false);
|
||||||
|
setTempSelectedSampleIds(new Set());
|
||||||
|
setSamplesSearchTerm('');
|
||||||
|
}}
|
||||||
|
title="Select Samples"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="border-b pb-4">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search by description..."
|
||||||
|
value={samplesSearchTerm}
|
||||||
|
onChange={setSamplesSearchTerm}
|
||||||
|
/>
|
||||||
|
{samplesSearchTerm && (
|
||||||
|
<p className="text-sm text-gray-600 mt-2">
|
||||||
|
Found {monthFilteredInventory.length} items for {mode === 'edit' ? 'previous date' : 'appointment date'} month
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{!samplesSearchTerm && monthFilteredInventory.length > 0 && (
|
||||||
|
<p className="text-sm text-blue-600 mt-2">
|
||||||
|
Showing {monthFilteredInventory.length} items available for {mode === 'edit' ? 'previous date' : 'appointment date'} month
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="overflow-x-auto max-h-96">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50 sticky top-0">
|
||||||
|
<tr>
|
||||||
|
<th className="px-4 py-2 text-left w-12">
|
||||||
|
<span className="sr-only">Select</span>
|
||||||
|
</th>
|
||||||
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Description</th>
|
||||||
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Qty Balance</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{monthFilteredInventory.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={3} className="px-4 py-8 text-center text-gray-500">
|
||||||
|
{samplesSearchTerm
|
||||||
|
? `No items found matching "${samplesSearchTerm}" for the selected month`
|
||||||
|
: 'No inventory items available for the selected appointment month'}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
monthFilteredInventory.map((item) => {
|
||||||
|
const qtyBalance = item.qtyIn - item.qtyOut;
|
||||||
|
const isChecked = tempSelectedSampleIds.has(item.inventoryId);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={item.inventoryId} className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<Checkbox
|
||||||
|
checked={isChecked}
|
||||||
|
onChange={(checked) => handleSampleCheckbox(item.inventoryId, checked)}
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-900">{item.description}</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-900">{qtyBalance}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => {
|
||||||
|
setIsSamplesModalOpen(false);
|
||||||
|
setTempSelectedSampleIds(new Set());
|
||||||
|
setSamplesSearchTerm('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="primary"
|
||||||
|
onClick={handleAddSamples}
|
||||||
|
disabled={tempSelectedSampleIds.size === 0}
|
||||||
|
>
|
||||||
|
Add {tempSelectedSampleIds.size > 0 ? `(${tempSelectedSampleIds.size})` : ''} Selected
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
{/* Promotional Materials Selection Modal */}
|
||||||
|
<Modal
|
||||||
|
isOpen={isPromosModalOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setIsPromosModalOpen(false);
|
||||||
|
setTempSelectedPromoIds(new Set());
|
||||||
|
setPromosSearchTerm('');
|
||||||
|
}}
|
||||||
|
title="Select Promotional Materials"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="border-b pb-4">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search by product name..."
|
||||||
|
value={promosSearchTerm}
|
||||||
|
onChange={setPromosSearchTerm}
|
||||||
|
/>
|
||||||
|
{promosSearchTerm && (
|
||||||
|
<p className="text-sm text-gray-600 mt-2">
|
||||||
|
Found {filteredProducts.length} of {products.length} items
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="overflow-x-auto max-h-96">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50 sticky top-0">
|
||||||
|
<tr>
|
||||||
|
<th className="px-4 py-2 text-left w-12">
|
||||||
|
<span className="sr-only">Select</span>
|
||||||
|
</th>
|
||||||
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Product Name</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{filteredProducts.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={2} className="px-4 py-8 text-center text-gray-500">
|
||||||
|
{promosSearchTerm
|
||||||
|
? `No items found matching "${promosSearchTerm}"`
|
||||||
|
: 'No products available'}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
filteredProducts.map((item) => {
|
||||||
|
const isChecked = tempSelectedPromoIds.has(item.productId);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={item.productId} className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<Checkbox
|
||||||
|
checked={isChecked}
|
||||||
|
onChange={(checked) => handlePromoCheckbox(item.productId, checked)}
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-900">{item.productName}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => {
|
||||||
|
setIsPromosModalOpen(false);
|
||||||
|
setTempSelectedPromoIds(new Set());
|
||||||
|
setPromosSearchTerm('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="primary"
|
||||||
|
onClick={handleAddPromos}
|
||||||
|
disabled={tempSelectedPromoIds.size === 0}
|
||||||
|
>
|
||||||
|
Add {tempSelectedPromoIds.size > 0 ? `(${tempSelectedPromoIds.size})` : ''} Selected
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
319
src/components/appointment/MonthPlanCopy.tsx
Normal file
319
src/components/appointment/MonthPlanCopy.tsx
Normal file
@ -0,0 +1,319 @@
|
|||||||
|
import { Calendar, Copy, X, AlertTriangle } from 'lucide-react';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
interface MonthPlanCopyProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
currentDate: Date;
|
||||||
|
onConfirm: (sourceDate: string, targetDate: string) => void;
|
||||||
|
isLoading?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MonthPlanCopy: React.FC<MonthPlanCopyProps> = ({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
currentDate,
|
||||||
|
onConfirm,
|
||||||
|
isLoading = false
|
||||||
|
}) => {
|
||||||
|
const [targetMonth, setTargetMonth] = useState(
|
||||||
|
String(currentDate.getMonth() + 2 > 12 ? 1 : currentDate.getMonth() + 2).padStart(2, '0')
|
||||||
|
);
|
||||||
|
const [targetYear, setTargetYear] = useState(
|
||||||
|
String(currentDate.getMonth() + 2 > 12 ? currentDate.getFullYear() + 1 : currentDate.getFullYear())
|
||||||
|
);
|
||||||
|
const [showConfirmation, setShowConfirmation] = useState(false);
|
||||||
|
const [validationError, setValidationError] = useState<string>('');
|
||||||
|
|
||||||
|
const monthNames = [
|
||||||
|
'January', 'February', 'March', 'April', 'May', 'June',
|
||||||
|
'July', 'August', 'September', 'October', 'November', 'December'
|
||||||
|
];
|
||||||
|
|
||||||
|
const months = monthNames.map((name, index) => ({
|
||||||
|
value: String(index + 1).padStart(2, '0'),
|
||||||
|
label: name
|
||||||
|
}));
|
||||||
|
|
||||||
|
const years = Array.from({ length: 5 }, (_, i) => currentDate.getFullYear() + i);
|
||||||
|
|
||||||
|
const formatSourceDate = () => {
|
||||||
|
return `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatTargetDate = () => {
|
||||||
|
const monthIndex = parseInt(targetMonth) - 1;
|
||||||
|
return `${monthNames[monthIndex]} 1, ${targetYear}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatSourceDateForAPI = () => {
|
||||||
|
const year = currentDate.getFullYear();
|
||||||
|
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(currentDate.getDate()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatTargetDateForAPI = () => {
|
||||||
|
return `${targetYear}-${targetMonth}-01`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Validate that target date is in the future
|
||||||
|
const validateTargetDate = (): boolean => {
|
||||||
|
const sourceYear = currentDate.getFullYear();
|
||||||
|
const sourceMonth = currentDate.getMonth() + 1; // JavaScript months are 0-indexed
|
||||||
|
|
||||||
|
const targetYearNum = parseInt(targetYear);
|
||||||
|
const targetMonthNum = parseInt(targetMonth);
|
||||||
|
|
||||||
|
// Check if target is the same month and year
|
||||||
|
if (targetYearNum === sourceYear && targetMonthNum === sourceMonth) {
|
||||||
|
setValidationError('Cannot copy to the same month and year. Please select a future month.');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if target is in the past
|
||||||
|
if (targetYearNum < sourceYear ||
|
||||||
|
(targetYearNum === sourceYear && targetMonthNum < sourceMonth)) {
|
||||||
|
setValidationError('Cannot copy to a previous month. Please select a future month to avoid overwriting existing data.');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
setValidationError('');
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Validate whenever month or year changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
validateTargetDate();
|
||||||
|
}
|
||||||
|
}, [targetMonth, targetYear, isOpen]);
|
||||||
|
|
||||||
|
const handleProceed = () => {
|
||||||
|
if (validateTargetDate()) {
|
||||||
|
setShowConfirmation(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConfirmCopy = () => {
|
||||||
|
onConfirm(formatSourceDateForAPI(), formatTargetDateForAPI());
|
||||||
|
setShowConfirmation(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setShowConfirmation(false);
|
||||||
|
setValidationError('');
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Main Selection Modal */}
|
||||||
|
{!showConfirmation && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-xl shadow-2xl max-w-md w-full">
|
||||||
|
{/* Modal Header */}
|
||||||
|
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="bg-teal-100 p-2 rounded-lg">
|
||||||
|
<Copy className="w-5 h-5 text-teal-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">Copy Month Plan</h3>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleClose}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="text-gray-400 hover:text-gray-600 transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Body */}
|
||||||
|
<div className="p-6 space-y-6">
|
||||||
|
{/* Source Month (Read-only) */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Copy From (Source)
|
||||||
|
</label>
|
||||||
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3 flex items-center space-x-3">
|
||||||
|
<Calendar className="w-5 h-5 text-gray-400" />
|
||||||
|
<span className="text-gray-900 font-medium">{formatSourceDate()}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">Current calendar month</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Target Month Selection */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Copy To (Target)
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{/* Month Selector */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-600 mb-1">Month</label>
|
||||||
|
<select
|
||||||
|
value={targetMonth}
|
||||||
|
onChange={(e) => setTargetMonth(e.target.value)}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent text-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{months.map(month => (
|
||||||
|
<option key={month.value} value={month.value}>
|
||||||
|
{month.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Year Selector */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-600 mb-1">Year</label>
|
||||||
|
<select
|
||||||
|
value={targetYear}
|
||||||
|
onChange={(e) => setTargetYear(e.target.value)}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent text-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{years.map(year => (
|
||||||
|
<option key={year} value={year}>
|
||||||
|
{year}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Target Date Preview */}
|
||||||
|
<div className={`mt-3 border rounded-lg p-3 ${
|
||||||
|
validationError ? 'bg-red-50 border-red-200' : 'bg-teal-50 border-teal-200'
|
||||||
|
}`}>
|
||||||
|
<p className={`text-xs font-medium mb-1 ${
|
||||||
|
validationError ? 'text-red-700' : 'text-teal-700'
|
||||||
|
}`}>
|
||||||
|
Target Date:
|
||||||
|
</p>
|
||||||
|
<p className={`text-sm font-semibold ${
|
||||||
|
validationError ? 'text-red-900' : 'text-teal-900'
|
||||||
|
}`}>
|
||||||
|
{formatTargetDate()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Validation Error */}
|
||||||
|
{validationError && (
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-start space-x-3">
|
||||||
|
<AlertTriangle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-red-800 mb-1">Invalid Date Selection</p>
|
||||||
|
<p className="text-sm text-red-700">{validationError}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Info Box */}
|
||||||
|
{!validationError && (
|
||||||
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||||
|
<p className="text-sm text-blue-800">
|
||||||
|
<span className="font-semibold">Note:</span> All appointments from {formatSourceDate()} will be copied to {formatTargetDate()}. The target date will always start from the 1st of the selected month.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Footer */}
|
||||||
|
<div className="flex items-center justify-end space-x-3 p-6 border-t border-gray-200 bg-gray-50">
|
||||||
|
<button
|
||||||
|
onClick={handleClose}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors text-sm font-medium disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleProceed}
|
||||||
|
disabled={isLoading || !!validationError}
|
||||||
|
className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
|
||||||
|
>
|
||||||
|
<span>Next</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Confirmation Modal */}
|
||||||
|
{showConfirmation && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-xl shadow-2xl max-w-md w-full">
|
||||||
|
{/* Confirmation Header */}
|
||||||
|
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="bg-orange-100 p-2 rounded-lg">
|
||||||
|
<AlertTriangle className="w-5 h-5 text-orange-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">Confirm Copy Operation</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Confirmation Body */}
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
<p className="text-gray-700">
|
||||||
|
You are about to copy all appointment plans from:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4 space-y-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-600 font-medium mb-1">Source:</p>
|
||||||
|
<p className="text-sm font-semibold text-gray-900">{formatSourceDate()}</p>
|
||||||
|
</div>
|
||||||
|
<div className="border-t border-gray-300 pt-3">
|
||||||
|
<p className="text-xs text-gray-600 font-medium mb-1">Destination:</p>
|
||||||
|
<p className="text-sm font-semibold text-teal-700">{formatTargetDate()}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-orange-50 border border-orange-200 rounded-lg p-4">
|
||||||
|
<p className="text-sm text-orange-800">
|
||||||
|
<span className="font-semibold">Warning:</span> This action will copy all appointments, doctors, and plan details to the selected target month. Make sure this is the correct destination before proceeding.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Confirmation Footer */}
|
||||||
|
<div className="flex items-center justify-end space-x-3 p-6 border-t border-gray-200 bg-gray-50">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowConfirmation(false)}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors text-sm font-medium disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Go Back
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleConfirmCopy}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||||
|
<span>Copying...</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Copy className="w-4 h-4" />
|
||||||
|
<span>Confirm & Copy</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
3
src/components/appointment/index.ts
Normal file
3
src/components/appointment/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export * from './AppointmentCard';
|
||||||
|
export * from './AppointmentForm';
|
||||||
|
export * from './MonthPlanCopy';
|
||||||
18
src/components/common/ComingSoon.tsx
Normal file
18
src/components/common/ComingSoon.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface ComingSoonProps {
|
||||||
|
title: string;
|
||||||
|
icon: React.ComponentType<{ className?: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ComingSoon: React.FC<ComingSoonProps> = ({ title, icon: Icon }) => {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-96">
|
||||||
|
<div className="text-center">
|
||||||
|
<Icon className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
|
||||||
|
<p className="text-gray-600">This feature is coming soon!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
18
src/components/common/LoadingSpinner.tsx
Normal file
18
src/components/common/LoadingSpinner.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface LoadingSpinnerProps {
|
||||||
|
message?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
||||||
|
message = 'Loading...'
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600 mx-auto"></div>
|
||||||
|
<p className="mt-4 text-gray-600">{message}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
2
src/components/common/index.ts
Normal file
2
src/components/common/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './ComingSoon';
|
||||||
|
export * from './LoadingSpinner';
|
||||||
146
src/components/dashboard/DashboardOverview.tsx
Normal file
146
src/components/dashboard/DashboardOverview.tsx
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { DashboardAPI } from '../../services/dashboard/dashboardApi';
|
||||||
|
import { Doctor } from '@/types/dashboard/dashboard';
|
||||||
|
import { useToast } from '../../contexts/ToastContext';
|
||||||
|
import { LoadingSpinner } from '../ui';
|
||||||
|
|
||||||
|
interface DashboardOverviewProps {
|
||||||
|
user: any;
|
||||||
|
onLogout: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DashboardOverview: React.FC<DashboardOverviewProps> = ({ user }) => {
|
||||||
|
const { addToast } = useToast();
|
||||||
|
|
||||||
|
const [doctors, setDoctors] = useState<Doctor[]>([]);
|
||||||
|
const [appointments, setAppointments] = useState<number>(0);
|
||||||
|
const [reschedules, setReschedules] = useState<number>(0);
|
||||||
|
const [missed, setMissed] = useState<number>(0);
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
|
||||||
|
const loadDoctors = async () => {
|
||||||
|
const data = await DashboardAPI.getAllDoctor();
|
||||||
|
setDoctors(data || []);
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadAppointments = async () => {
|
||||||
|
const data = await DashboardAPI.getAllAppointment();
|
||||||
|
setAppointments(data?.length || 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadReschedules = async () => {
|
||||||
|
const data = await DashboardAPI.getAllReschedule();
|
||||||
|
setReschedules(data?.length || 0);
|
||||||
|
};
|
||||||
|
const loadMissed = async () => {
|
||||||
|
const data = await DashboardAPI.getAllMissed();
|
||||||
|
setMissed(data?.length || 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchAll = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
await Promise.all([
|
||||||
|
loadDoctors(),
|
||||||
|
loadAppointments(),
|
||||||
|
loadReschedules(),
|
||||||
|
loadMissed()
|
||||||
|
]);
|
||||||
|
} catch (error) {
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
message: 'Failed to load dashboard data'
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchAll();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ title: 'Total Doctors', value: doctors.length, change: '+12%', color: 'teal' },
|
||||||
|
{ title: 'Appointments Today', value: appointments, change: '+15%', color: 'green' },
|
||||||
|
{ title: 'Reschedule', value: reschedules, change: '+8%', color: 'blue' },
|
||||||
|
{ title: 'Missed call', value: missed, change: '+5%', color: 'purple' }
|
||||||
|
];
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <LoadingSpinner message="Loading please wait..." />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Welcome Section */}
|
||||||
|
<div className="bg-gradient-to-r from-teal-500 to-teal-600 rounded-xl p-6 text-white">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold mb-2">
|
||||||
|
Welcome back, {user?.userName || 'User'}! 👋
|
||||||
|
</h1>
|
||||||
|
<p className="text-teal-100">
|
||||||
|
Role: {user?.userRole || 'Medical Representative'} | Ready to make an impact today?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-3xl">🏥</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{stats.map((stat, index) => (
|
||||||
|
<div key={index}
|
||||||
|
className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-200">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||||
|
<span className="text-teal-600 text-xl">📊</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium text-teal-600 bg-teal-50 px-2 py-1 rounded-full">
|
||||||
|
{stat.change}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-sm font-medium text-gray-500 mb-1">{stat.title}</h3>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{stat.value}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-6">
|
||||||
|
Quick Actions for Medical Representative
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<button className="flex flex-col items-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-teal-300 hover:bg-teal-50 transition-colors">
|
||||||
|
<span className="text-2xl mb-2">🏥</span>
|
||||||
|
<span className="text-sm font-medium">Visit Doctor</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button className="flex flex-col items-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-teal-300 hover:bg-teal-50 transition-colors">
|
||||||
|
<span className="text-2xl mb-2">📋</span>
|
||||||
|
<span className="text-sm font-medium">Product Demo</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button className="flex flex-col items-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-teal-300 hover:bg-teal-50 transition-colors">
|
||||||
|
<span className="text-2xl mb-2">✍️</span>
|
||||||
|
<span className="text-sm font-medium">Collect Signature</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button className="flex flex-col items-center p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-teal-300 hover:bg-teal-50 transition-colors">
|
||||||
|
<span className="text-2xl mb-2">📊</span>
|
||||||
|
<span className="text-sm font-medium">View Reports</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
2
src/components/dashboard/index.ts
Normal file
2
src/components/dashboard/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './DashboardOverview';
|
||||||
|
export * from '../../pages/SettingsPage';
|
||||||
95
src/components/doctor/DoctorCard.tsx
Normal file
95
src/components/doctor/DoctorCard.tsx
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { User, Mail, Phone, Stethoscope, Eye, Edit, Trash2 } from 'lucide-react';
|
||||||
|
import { Doctor } from '../../types/doctor/doctor';
|
||||||
|
import { Button } from '../ui';
|
||||||
|
import { getStatusLabel, getStatusColor } from '../../utils/doctorStatus';
|
||||||
|
import { ApiHelpers } from '../../utils/apiHelpers';
|
||||||
|
|
||||||
|
interface DoctorCardProps {
|
||||||
|
doctor: Doctor;
|
||||||
|
onView: () => void;
|
||||||
|
onEdit: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
showDeleteButton?: boolean;
|
||||||
|
showEditButton?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DoctorCard: React.FC<DoctorCardProps> = ({
|
||||||
|
doctor,
|
||||||
|
onView,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
showDeleteButton = true,
|
||||||
|
showEditButton= true,
|
||||||
|
|
||||||
|
}) => {
|
||||||
|
const hasAnyAction = (showEditButton || showDeleteButton);
|
||||||
|
|
||||||
|
const userRole = ApiHelpers.getUserRole() || 'MEDREP';
|
||||||
|
|
||||||
|
if(userRole === 'DSM' || userRole === 'NSM')
|
||||||
|
showDeleteButton= false;
|
||||||
|
else
|
||||||
|
showDeleteButton= true;
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all duration-200 flex flex-col h-full min-h-[280px]">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="flex items-center space-x-3 flex-1 min-w-0">
|
||||||
|
<div className="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<User className="w-6 h-6 text-teal-600" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<h3 className="font-semibold text-gray-900 line-clamp-2">
|
||||||
|
Dr. {doctor.firstName} {doctor.lastName}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600 truncate">{doctor.specialization?.specializationId}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span className={`px-2 py-1 text-xs font-medium rounded-full border whitespace-nowrap ml-2 flex-shrink-0 ${getStatusColor(doctor.status)}`}>
|
||||||
|
{getStatusLabel(doctor.status)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2 mb-4 flex-grow">
|
||||||
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
|
<Mail className="w-4 h-4 mr-2 flex-shrink-0" />
|
||||||
|
<span className="truncate">{doctor.emailAddress}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
|
<Phone className="w-4 h-4 mr-2 flex-shrink-0" />
|
||||||
|
<span className="truncate">{doctor.phoneNo}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
|
<Stethoscope className="w-4 h-4 mr-2 flex-shrink-0" />
|
||||||
|
<span className="truncate">{doctor.licenseNo}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Conditionally render Actions column */}
|
||||||
|
{hasAnyAction && (
|
||||||
|
<div className="flex space-x-2 mt-auto">
|
||||||
|
<Button size="sm" variant="outline" onClick={onView}>
|
||||||
|
<Eye className="w-4 h-4 mr-1" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{showEditButton && (
|
||||||
|
<Button size="sm" variant="secondary" onClick={onEdit}>
|
||||||
|
<Edit className="w-4 h-4 mr-1" />
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showDeleteButton && (
|
||||||
|
<Button size="sm" variant="danger" onClick={onDelete}>
|
||||||
|
<Trash2 className="w-4 h-4 mr-1" />
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
74
src/components/doctor/DoctorDetailView.tsx
Normal file
74
src/components/doctor/DoctorDetailView.tsx
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { User, Mail, Phone, MapPin, Stethoscope, Calendar } from 'lucide-react';
|
||||||
|
import { Doctor } from '../../types/doctor/doctor';
|
||||||
|
import { getStatusLabel, getStatusColor } from '../../utils/doctorStatus';
|
||||||
|
|
||||||
|
interface DoctorDetailViewProps {
|
||||||
|
doctor: Doctor;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DoctorDetailView: React.FC<DoctorDetailViewProps> = ({ doctor }) => {
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
return new Date(dateString).toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center space-x-4 mb-6">
|
||||||
|
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center">
|
||||||
|
<User className="w-8 h-8 text-teal-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold text-gray-900 line-clamp-2">
|
||||||
|
Dr. {doctor.firstName} {doctor.lastName}
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600">{doctor.specialization?.specializationId}</p>
|
||||||
|
<span className={`px-2 py-1 text-xs font-medium rounded-full border ${getStatusColor(doctor.status)}`}>
|
||||||
|
{getStatusLabel(doctor.status)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">Contact Information</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Mail className="w-5 h-5 text-gray-400 mr-3" />
|
||||||
|
<span className="text-gray-700">{doctor.emailAddress}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Phone className="w-5 h-5 text-gray-400 mr-3" />
|
||||||
|
<span className="text-gray-700">{doctor.phoneNo}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start">
|
||||||
|
<MapPin className="w-5 h-5 text-gray-400 mr-3 mt-0.5" />
|
||||||
|
<span className="text-gray-700">{doctor.address}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">Professional Details</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Stethoscope className="w-5 h-5 text-gray-400 mr-3" />
|
||||||
|
<span className="text-gray-700">{doctor.licenseNo || ''}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Calendar className="w-5 h-5 text-gray-400 mr-3" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500">Date of Birth</p>
|
||||||
|
<p className="text-gray-700">{formatDate(doctor.birthDate || '')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
348
src/components/doctor/DoctorForm.tsx
Normal file
348
src/components/doctor/DoctorForm.tsx
Normal file
@ -0,0 +1,348 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { Doctor, DoctorFormData } from '../../types/doctor/doctor';
|
||||||
|
import { Input, Button, Autocomplete } from '../ui';
|
||||||
|
import { useInstitutionApi } from "../../hooks/generic/useInstitutionApi";
|
||||||
|
import { useDistrictApi } from "../../hooks/generic/useDistrict";
|
||||||
|
import { useSpecializationApi } from '../../hooks/doctor/useSpecializationApi';
|
||||||
|
import { isValidEmail } from '../../utils/constants';
|
||||||
|
|
||||||
|
interface DoctorFormProps {
|
||||||
|
doctor?: Doctor;
|
||||||
|
onSubmit: (doctor: DoctorFormData) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
isLoading?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DoctorForm: React.FC<DoctorFormProps> = ({
|
||||||
|
doctor,
|
||||||
|
onSubmit,
|
||||||
|
onCancel,
|
||||||
|
isLoading = false
|
||||||
|
}) => {
|
||||||
|
const [formData, setFormData] = useState<DoctorFormData>({
|
||||||
|
firstName: doctor?.firstName || '',
|
||||||
|
middleInitial: doctor?.middleInitial || '',
|
||||||
|
lastName: doctor?.lastName || '',
|
||||||
|
emailAddress: doctor?.emailAddress ?? '',
|
||||||
|
phoneNo: doctor?.phoneNo || '',
|
||||||
|
specializationId : doctor?.specializationId || 0,
|
||||||
|
licenseNo: doctor?.licenseNo ?? '',
|
||||||
|
address: doctor?.address || '',
|
||||||
|
institutionId: doctor?.institutionId || 0,
|
||||||
|
institutionName: doctor?.institutionName || '',
|
||||||
|
districtId: doctor?.districtId ?? null,
|
||||||
|
districtName: doctor?.districtName || '',
|
||||||
|
birthDate: doctor?.birthDate ??'',
|
||||||
|
maxVisit: doctor?.maxVisit || 0,
|
||||||
|
status: (doctor?.status as 1 | 0| 2) || 1,
|
||||||
|
medRepName: doctor?.medRepName ?? '',
|
||||||
|
isTerritorial: doctor?.isTerritorial ?? false
|
||||||
|
});
|
||||||
|
|
||||||
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||||
|
const [institutionsLoading, setInstitutionsLoading] = useState(false);
|
||||||
|
const [districtsLoading, setDistrictsLoading] = useState(false);
|
||||||
|
|
||||||
|
const { institutions, fetchInstitutions } = useInstitutionApi();
|
||||||
|
const { districts, fetchDistricts } = useDistrictApi();
|
||||||
|
const { specializations, fetchSpecializations } = useSpecializationApi();
|
||||||
|
// Load data when component mounts or when editing
|
||||||
|
useEffect(() => {
|
||||||
|
const loadInitialData = async () => {
|
||||||
|
|
||||||
|
if (doctor) {
|
||||||
|
if (doctor.institutionId) {
|
||||||
|
setInstitutionsLoading(true);
|
||||||
|
await fetchInstitutions(),fetchSpecializations();
|
||||||
|
setInstitutionsLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load districts if we have a districtId
|
||||||
|
if (doctor.districtId) {
|
||||||
|
setDistrictsLoading(true);
|
||||||
|
await fetchDistricts();
|
||||||
|
setDistrictsLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
loadInitialData();
|
||||||
|
}, [doctor?.institutionId, doctor?.districtId]);
|
||||||
|
|
||||||
|
|
||||||
|
const specializationOptions = specializations
|
||||||
|
.filter(s => s.isActive !== false)
|
||||||
|
.map(s=> ({
|
||||||
|
value: s.specializationId,
|
||||||
|
label: s.specializationName
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
const validateForm = () => {
|
||||||
|
const newErrors: Record<string, string> = {};
|
||||||
|
|
||||||
|
if (!formData.firstName.trim()) newErrors.firstName = 'First name is required';
|
||||||
|
if (!formData.lastName.trim()) newErrors.lastName = 'Last name is required';
|
||||||
|
|
||||||
|
if (formData.emailAddress && !isValidEmail(formData.emailAddress)) {
|
||||||
|
newErrors.emailAddress = 'Email address is invalid';
|
||||||
|
}
|
||||||
|
if (!formData.specializationId) newErrors.specialization = 'Specialization is required';
|
||||||
|
if (!formData.districtId) newErrors.district = 'District is required';
|
||||||
|
if (!formData.institutionId) newErrors.institution = 'Institution is required';
|
||||||
|
// if (!formData.licenseNo.trim()) newErrors.licenseNumber = 'License number is required';
|
||||||
|
|
||||||
|
if (!formData.maxVisit) {
|
||||||
|
newErrors.maxVisit = 'Max visit is required';
|
||||||
|
} else if (formData.maxVisit < 1) {
|
||||||
|
newErrors.maxVisit = 'Max visit must be at least 1';
|
||||||
|
} else if (formData.maxVisit > 4) {
|
||||||
|
newErrors.maxVisit = 'Max visit cannot exceed 4';
|
||||||
|
}
|
||||||
|
|
||||||
|
setErrors(newErrors);
|
||||||
|
return Object.keys(newErrors).length === 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (validateForm()) {
|
||||||
|
onSubmit(formData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateField = (field: keyof typeof formData) => (value: string | number) => {
|
||||||
|
setFormData(prev => ({ ...prev, [field]: value }));
|
||||||
|
|
||||||
|
if (errors[field]) {
|
||||||
|
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (field === 'maxVisit') {
|
||||||
|
const numValue = typeof value === 'number' ? value : parseInt(value);
|
||||||
|
if (value && (numValue < 1 || numValue > 4)) {
|
||||||
|
setErrors(prev => ({
|
||||||
|
...prev,
|
||||||
|
maxVisit: 'Max visit must be between 1 and 4'
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
setErrors(prev => {
|
||||||
|
const newErrors = { ...prev };
|
||||||
|
delete newErrors.maxVisit;
|
||||||
|
return newErrors;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle institution focus/load - only load if not already loaded
|
||||||
|
const handleInstitutionFocus = async () => {
|
||||||
|
if (institutions.length === 0 && !institutionsLoading) {
|
||||||
|
setInstitutionsLoading(true);
|
||||||
|
await fetchInstitutions();
|
||||||
|
setInstitutionsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle district focus/load - only load if not already loaded
|
||||||
|
const handleDistrictFocus = async () => {
|
||||||
|
if (districts.length === 0 && !districtsLoading) {
|
||||||
|
setDistrictsLoading(true);
|
||||||
|
await fetchDistricts();
|
||||||
|
setDistrictsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleSpecification = async () => {
|
||||||
|
if (districts.length === 0 && !districtsLoading) {
|
||||||
|
setDistrictsLoading(true);
|
||||||
|
await fetchSpecializations();
|
||||||
|
setDistrictsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// Prepare institution options for autocomplete
|
||||||
|
const institutionOptions = institutions.map((i) => ({
|
||||||
|
value: i.institutionId,
|
||||||
|
label: `${i.institutionCategory?.institutionCategoryCode ?? ''} - ${i.institutionName}`,
|
||||||
|
searchText: `${i.institutionCategory?.institutionCategoryCode ?? ''} ${i.institutionName} ${i.territoryName ?? ''}`.toLowerCase()
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Prepare district options for autocomplete
|
||||||
|
const districtOptions = districts.map((d) => ({
|
||||||
|
value: d.districtId,
|
||||||
|
label: d.districtName,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
|
{/* Personal Information Section */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 border-b pb-1">
|
||||||
|
Personal Information
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||||
|
<Input
|
||||||
|
label="First Name"
|
||||||
|
value={formData.firstName}
|
||||||
|
onChange={updateField('firstName')}
|
||||||
|
placeholder="First name"
|
||||||
|
required
|
||||||
|
error={errors.firstName}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Middle Initial"
|
||||||
|
value={formData.middleInitial}
|
||||||
|
onChange={updateField('middleInitial')}
|
||||||
|
placeholder="M.I."
|
||||||
|
error={errors.middleInitial}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Last Name"
|
||||||
|
value={formData.lastName}
|
||||||
|
onChange={updateField('lastName')}
|
||||||
|
placeholder="Last name"
|
||||||
|
required
|
||||||
|
error={errors.lastName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||||
|
<Input
|
||||||
|
label="Date of Birth"
|
||||||
|
type="date"
|
||||||
|
value={formData.birthDate ?? ''}
|
||||||
|
onChange={updateField('birthDate')}
|
||||||
|
error={errors.birthDate}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="License Number"
|
||||||
|
value={formData.licenseNo ?? ''}
|
||||||
|
onChange={updateField('licenseNo')}
|
||||||
|
placeholder="License #"
|
||||||
|
error={errors.licenseNumber}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Status"
|
||||||
|
value={formData.status}
|
||||||
|
onChange={updateField('status')}
|
||||||
|
readOnly
|
||||||
|
type="approvalStatus"
|
||||||
|
error={errors.status}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Information Section */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 border-b pb-1">
|
||||||
|
Contact Information
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
<Input
|
||||||
|
label="Email Address"
|
||||||
|
type="email"
|
||||||
|
value={formData.emailAddress ?? ''}
|
||||||
|
onChange={updateField('emailAddress')}
|
||||||
|
placeholder="email@example.com"
|
||||||
|
error={errors.emailAddress}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Phone Number"
|
||||||
|
value={formData.phoneNo}
|
||||||
|
onChange={updateField('phoneNo')}
|
||||||
|
placeholder="Phone number"
|
||||||
|
error={errors.phoneNo}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label="Address"
|
||||||
|
value={formData.address}
|
||||||
|
onChange={updateField('address')}
|
||||||
|
placeholder="Full address"
|
||||||
|
required
|
||||||
|
error={errors.address}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Professional Information Section */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 border-b pb-1">
|
||||||
|
Professional Information
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
<Autocomplete
|
||||||
|
label="Specialization"
|
||||||
|
value={formData.specializationId}
|
||||||
|
onChange={updateField('specializationId')}
|
||||||
|
onFocus={handleSpecification}
|
||||||
|
options={specializationOptions}
|
||||||
|
placeholder="Select specialization"
|
||||||
|
searchPlaceholder="Search by name..."
|
||||||
|
required
|
||||||
|
error={errors.specialization}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Autocomplete for Institution */}
|
||||||
|
<Autocomplete
|
||||||
|
label="Code - Institution"
|
||||||
|
value={formData.institutionId}
|
||||||
|
onChange={updateField('institutionId')}
|
||||||
|
options={institutionOptions}
|
||||||
|
onFocus={handleInstitutionFocus}
|
||||||
|
loading={institutionsLoading}
|
||||||
|
placeholder="Select institution"
|
||||||
|
searchPlaceholder="Search by code or name..."
|
||||||
|
required
|
||||||
|
error={errors.institution}
|
||||||
|
minSearchLength={0}
|
||||||
|
maxHeight="250px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
{/* Autocomplete for District */}
|
||||||
|
<Autocomplete
|
||||||
|
label="District"
|
||||||
|
value={formData.districtId}
|
||||||
|
onChange={updateField('districtId')}
|
||||||
|
options={districtOptions}
|
||||||
|
onFocus={handleDistrictFocus}
|
||||||
|
loading={districtsLoading}
|
||||||
|
placeholder="Select district"
|
||||||
|
searchPlaceholder="Search district..."
|
||||||
|
required
|
||||||
|
error={errors.district}
|
||||||
|
minSearchLength={0}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label="Frequency"
|
||||||
|
type="number"
|
||||||
|
value={formData.maxVisit}
|
||||||
|
onChange={updateField('maxVisit')}
|
||||||
|
placeholder="1-4"
|
||||||
|
required
|
||||||
|
error={errors.maxVisit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Compact Actions */}
|
||||||
|
<div className="flex justify-end gap-2 pt-3 border-t">
|
||||||
|
<Button variant="secondary" onClick={onCancel}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
variant={doctor ? 'warning' : 'primary'}
|
||||||
|
>
|
||||||
|
{isLoading ? 'Saving...' : doctor ? 'Update Doctor' : 'Add Doctor'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
3
src/components/doctor/index.ts
Normal file
3
src/components/doctor/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export * from './DoctorForm';
|
||||||
|
export * from './DoctorCard';
|
||||||
|
export * from './DoctorDetailView';
|
||||||
357
src/components/features/auth/LoginPage.tsx
Normal file
357
src/components/features/auth/LoginPage.tsx
Normal file
@ -0,0 +1,357 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Eye, EyeOff, Stethoscope, UserCheck, Lock, User, Shield } from 'lucide-react';
|
||||||
|
import { useAuth } from '../../../hooks/useAuth';
|
||||||
|
import { useApi } from '../../../hooks/useApi';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
interface FormData {
|
||||||
|
userName: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormErrors {
|
||||||
|
userName?: string;
|
||||||
|
password?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LoginResponse {
|
||||||
|
token: string;
|
||||||
|
expiration: string;
|
||||||
|
userId: string;
|
||||||
|
userName: string;
|
||||||
|
fullName: string;
|
||||||
|
company: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LoginPage = () => {
|
||||||
|
const [formData, setFormData] = useState<FormData>({
|
||||||
|
userName: '',
|
||||||
|
password: ''
|
||||||
|
});
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [errors, setErrors] = useState<FormErrors>({});
|
||||||
|
|
||||||
|
const { login } = useAuth();
|
||||||
|
const { apiCall } = useApi();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
// Clear error when user starts typing
|
||||||
|
if (errors[name as keyof FormErrors]) {
|
||||||
|
setErrors(prev => ({
|
||||||
|
...prev,
|
||||||
|
[name]: ''
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === 'Enter' && !isLoading) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSubmit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateForm = (): boolean => {
|
||||||
|
const newErrors: FormErrors = {};
|
||||||
|
|
||||||
|
if (!formData.userName) {
|
||||||
|
newErrors.userName = 'Username is required';
|
||||||
|
} else if (formData.userName.length < 3) {
|
||||||
|
newErrors.userName = 'Username must be at least 3 characters';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.password) {
|
||||||
|
newErrors.password = 'Password is required';
|
||||||
|
} else if (formData.password.length < 6) {
|
||||||
|
newErrors.password = 'Password must be at least 6 characters';
|
||||||
|
}
|
||||||
|
|
||||||
|
setErrors(newErrors);
|
||||||
|
return Object.keys(newErrors).length === 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper function to decode JWT and extract claims
|
||||||
|
const parseJwt = (token: string) => {
|
||||||
|
try {
|
||||||
|
const base64Url = token.split('.')[1];
|
||||||
|
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
||||||
|
const jsonPayload = decodeURIComponent(
|
||||||
|
atob(base64)
|
||||||
|
.split('')
|
||||||
|
.map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
|
||||||
|
.join('')
|
||||||
|
);
|
||||||
|
return JSON.parse(jsonPayload);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Error parsing JWT:', e);
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!validateForm()) return;
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const baseUrl = import.meta.env.VITE_API_BASE_URL;
|
||||||
|
const loginApiCall = async () => {
|
||||||
|
const response = await fetch(`${baseUrl}/AnonAccount/login`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
userName: formData.userName,
|
||||||
|
password: formData.password
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(errorData.message || errorData.error || 'Login failed');
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Use your reusable apiCall hook
|
||||||
|
const data: LoginResponse = await apiCall(
|
||||||
|
loginApiCall,
|
||||||
|
'Login successful! Welcome back.',
|
||||||
|
'Login failed. Please check your credentials.'
|
||||||
|
);
|
||||||
|
|
||||||
|
if (data && data.token) {
|
||||||
|
// Decode JWT to extract claims and roles
|
||||||
|
const decodedToken = parseJwt(data.token);
|
||||||
|
|
||||||
|
// Extract user role from claims
|
||||||
|
const userRole = decodedToken['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'] || 'User';
|
||||||
|
|
||||||
|
// Build user claims array from decoded token
|
||||||
|
const userClaims = Object.entries(decodedToken).map(([type, value]) => ({
|
||||||
|
type,
|
||||||
|
value: String(value)
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Store authentication data with all user information
|
||||||
|
const authData = {
|
||||||
|
userId: data.userId,
|
||||||
|
userName: data.userName,
|
||||||
|
fullName: data.fullName,
|
||||||
|
userRole: userRole,
|
||||||
|
company: data.company,
|
||||||
|
userClaims: userClaims,
|
||||||
|
token: data.token,
|
||||||
|
expiration: data.expiration,
|
||||||
|
};
|
||||||
|
|
||||||
|
// auth context
|
||||||
|
await login(authData);
|
||||||
|
|
||||||
|
// Redirect to dashboard
|
||||||
|
navigate('/dashboard');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Login error:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-teal-50 via-cyan-50 to-blue-50 flex items-center justify-center p-4">
|
||||||
|
{/* Background Pattern */}
|
||||||
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
|
<div className="absolute -top-40 -right-40 w-80 h-80 bg-teal-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse"></div>
|
||||||
|
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-cyan-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse delay-1000"></div>
|
||||||
|
<div className="absolute top-40 left-40 w-60 h-60 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-50 animate-pulse delay-2000"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative w-full max-w-md">
|
||||||
|
{/* Login Card */}
|
||||||
|
<div className="bg-white/80 backdrop-blur-lg rounded-2xl shadow-2xl border border-white/20 p-8 space-y-8">
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<div className="mx-auto w-16 h-14 bg-gradient-to-r from-teal-500 to-cyan-500 rounded-2xl flex items-center justify-center shadow-lg">
|
||||||
|
<Stethoscope className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-800 mb-1">
|
||||||
|
LLI - Sales Force
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-600 text-sm">
|
||||||
|
MD Call Management System
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Features Banner */}
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-10 h-10 bg-teal-100 rounded-lg mx-auto mb-2 flex items-center justify-center">
|
||||||
|
<UserCheck className="w-5 h-5 text-teal-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-600">Doctor Visits</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-10 h-10 bg-cyan-100 rounded-lg mx-auto mb-2 flex items-center justify-center">
|
||||||
|
<Shield className="w-5 h-5 text-cyan-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-600">E-Signatures</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-10 h-10 bg-blue-100 rounded-lg mx-auto mb-2 flex items-center justify-center">
|
||||||
|
<Stethoscope className="w-5 h-5 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-600">Product Sales</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Login Form */}
|
||||||
|
<div className="space-y-6" onKeyPress={handleKeyPress}>
|
||||||
|
|
||||||
|
{/* Username Input */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
|
||||||
|
<User className="w-4 h-4 text-teal-600" />
|
||||||
|
Username
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="userName"
|
||||||
|
value={formData.userName}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
className={`w-full px-4 py-3 rounded-xl border-2 transition-all duration-300 bg-white/50 backdrop-blur-sm
|
||||||
|
${errors.userName
|
||||||
|
? 'border-red-300 focus:border-red-500'
|
||||||
|
: 'border-gray-200 focus:border-teal-500'
|
||||||
|
}
|
||||||
|
focus:outline-none focus:ring-4 focus:ring-teal-100`}
|
||||||
|
placeholder="Enter your username"
|
||||||
|
/>
|
||||||
|
{errors.userName && (
|
||||||
|
<p className="text-red-500 text-xs mt-1">{errors.userName}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Password Input */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-gray-700 flex items-center gap-2">
|
||||||
|
<Lock className="w-4 h-4 text-teal-600" />
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
name="password"
|
||||||
|
value={formData.password}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
className={`w-full px-4 py-3 pr-12 rounded-xl border-2 transition-all duration-300 bg-white/50 backdrop-blur-sm
|
||||||
|
${errors.password
|
||||||
|
? 'border-red-300 focus:border-red-500'
|
||||||
|
: 'border-gray-200 focus:border-teal-500'
|
||||||
|
}
|
||||||
|
focus:outline-none focus:ring-4 focus:ring-teal-100`}
|
||||||
|
placeholder="Enter your password"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-teal-600 transition-colors"
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||||
|
</button>
|
||||||
|
{errors.password && (
|
||||||
|
<p className="text-red-500 text-xs mt-1">{errors.password}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Remember Me & Forgot Password */}
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="w-4 h-4 text-teal-600 bg-gray-100 border-gray-300 rounded focus:ring-teal-500 focus:ring-2"
|
||||||
|
/>
|
||||||
|
<span className="text-gray-600">Remember me</span>
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-teal-600 hover:text-teal-700 font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Forgot Password?
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Login Button */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full bg-gradient-to-r from-teal-500 to-cyan-500 text-white py-3 px-6 rounded-xl font-semibold
|
||||||
|
hover:from-teal-600 hover:to-cyan-600 transform hover:scale-[1.02] transition-all duration-300
|
||||||
|
focus:outline-none focus:ring-4 focus:ring-teal-200 disabled:opacity-50 disabled:cursor-not-allowed
|
||||||
|
shadow-lg hover:shadow-xl"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center gap-3">
|
||||||
|
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||||||
|
Signing In...
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
'Sign In'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="text-center space-y-4 pt-4 border-t border-gray-200">
|
||||||
|
<p className="text-xs text-gray-500">
|
||||||
|
Secure medical representative portal for healthcare professionals
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-center gap-4 text-xs text-gray-400">
|
||||||
|
<span>© 2025 MedRep Portal</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>Healthcare Solutions</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trust Indicators */}
|
||||||
|
<div className="mt-6 text-center">
|
||||||
|
<div className="inline-flex items-center gap-6 text-xs text-gray-500">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Shield className="w-3 h-3 text-teal-600" />
|
||||||
|
<span>256-bit SSL</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<UserCheck className="w-3 h-3 text-teal-600" />
|
||||||
|
<span>HIPAA Compliant</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Lock className="w-3 h-3 text-teal-600" />
|
||||||
|
<span>Secure Login</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoginPage;
|
||||||
1123
src/components/generic/GenericMaintenanceTab.tsx
Normal file
1123
src/components/generic/GenericMaintenanceTab.tsx
Normal file
File diff suppressed because it is too large
Load Diff
47
src/components/layout/Header.tsx
Normal file
47
src/components/layout/Header.tsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Search, Bell, Menu, User } from 'lucide-react';
|
||||||
|
|
||||||
|
interface HeaderProps {
|
||||||
|
title: string;
|
||||||
|
onSidebarToggle: () => void;
|
||||||
|
user?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Header: React.FC<HeaderProps> = ({ title, onSidebarToggle }) => {
|
||||||
|
return (
|
||||||
|
<header className="bg-white shadow-sm border-b border-gray-200">
|
||||||
|
<div className="flex items-center justify-between px-6 py-4">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<button
|
||||||
|
onClick={onSidebarToggle}
|
||||||
|
className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
<Menu className="w-6 h-6" />
|
||||||
|
</button>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-800">{title}</h2>
|
||||||
|
<p className="text-sm text-gray-600">Welcome back! Here's what's happening today.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="relative hidden md:block">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search..."
|
||||||
|
className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button className="p-2 text-gray-400 hover:text-gray-600 relative">
|
||||||
|
<Bell className="w-6 h-6" />
|
||||||
|
<span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
<div className="w-8 h-8 bg-teal-100 rounded-full flex items-center justify-center">
|
||||||
|
<User className="w-5 h-5 text-teal-600" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
71
src/components/layout/Layout.tsx
Normal file
71
src/components/layout/Layout.tsx
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
// src/components/Layout.tsx
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Sidebar } from './Sidebar';
|
||||||
|
import { Header } from './Header';
|
||||||
|
import { useNavigation } from '../../hooks/useNavigation';
|
||||||
|
|
||||||
|
interface LayoutProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
activeTab: string;
|
||||||
|
onTabChange: (tab: string) => void;
|
||||||
|
user?: any;
|
||||||
|
onLogout?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Layout: React.FC<LayoutProps> = ({
|
||||||
|
children,
|
||||||
|
activeTab,
|
||||||
|
onTabChange,
|
||||||
|
user,
|
||||||
|
onLogout
|
||||||
|
}) => {
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
const { navigationItems, isLoading, error } = useNavigation();
|
||||||
|
|
||||||
|
const getPageTitle = () => {
|
||||||
|
// Find the active navigation item
|
||||||
|
const activeItem = navigationItems.find(item => item.id === activeTab);
|
||||||
|
return activeItem?.label || 'Dashboard';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Show error if navigation fails to load
|
||||||
|
if (error && !isLoading) {
|
||||||
|
console.error('Navigation error:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen bg-gray-50">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<Sidebar
|
||||||
|
isOpen={sidebarOpen}
|
||||||
|
onToggle={() => setSidebarOpen(!sidebarOpen)}
|
||||||
|
activeTab={activeTab}
|
||||||
|
onTabChange={(tab) => {
|
||||||
|
onTabChange(tab);
|
||||||
|
setSidebarOpen(false); // Close sidebar on mobile after selection
|
||||||
|
}}
|
||||||
|
user={user}
|
||||||
|
onLogout={onLogout}
|
||||||
|
navigationItems={navigationItems}
|
||||||
|
isLoading={isLoading}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="flex-1 flex flex-col min-w-0">
|
||||||
|
{/* Header */}
|
||||||
|
<Header
|
||||||
|
title={getPageTitle()}
|
||||||
|
onSidebarToggle={() => setSidebarOpen(!sidebarOpen)}
|
||||||
|
user={user}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Content Area */}
|
||||||
|
<main className="flex-1 p-6 overflow-y-auto">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
227
src/components/layout/Sidebar.tsx
Normal file
227
src/components/layout/Sidebar.tsx
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { ChevronLeft, ChevronDown, ChevronRight, Menu, User, LogOut, Stethoscope } from 'lucide-react';
|
||||||
|
import * as LucideIcons from 'lucide-react';
|
||||||
|
import { NavigationItem } from '../../types/navigation';
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onToggle: () => void;
|
||||||
|
activeTab: string;
|
||||||
|
onTabChange: (tab: string) => void;
|
||||||
|
user?: any;
|
||||||
|
onLogout?: () => void;
|
||||||
|
navigationItems: NavigationItem[];
|
||||||
|
isLoading?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Sidebar: React.FC<SidebarProps> = ({
|
||||||
|
isOpen,
|
||||||
|
onToggle,
|
||||||
|
activeTab,
|
||||||
|
onTabChange,
|
||||||
|
user,
|
||||||
|
onLogout,
|
||||||
|
navigationItems,
|
||||||
|
isLoading = false
|
||||||
|
}) => {
|
||||||
|
const [expandedMenus, setExpandedMenus] = useState<Set<string>>(new Set());
|
||||||
|
|
||||||
|
const getIconComponent = (iconName: string) => {
|
||||||
|
const IconComponent = (LucideIcons as any)[iconName];
|
||||||
|
return IconComponent || LucideIcons.Home;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleMenu = (menuId: string, e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation(); // Prevent triggering parent click
|
||||||
|
const newExpanded = new Set(expandedMenus);
|
||||||
|
if (newExpanded.has(menuId)) {
|
||||||
|
newExpanded.delete(menuId);
|
||||||
|
} else {
|
||||||
|
newExpanded.add(menuId);
|
||||||
|
}
|
||||||
|
setExpandedMenus(newExpanded);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMenuClick = (item: NavigationItem) => {
|
||||||
|
const hasChildren = item.children && item.children.length > 0;
|
||||||
|
|
||||||
|
// If item has a route (is clickable), navigate to it
|
||||||
|
if (item.route) {
|
||||||
|
onTabChange(item.id);
|
||||||
|
// Close sidebar on mobile only when selecting a final destination
|
||||||
|
if (window.innerWidth < 1024) {
|
||||||
|
onToggle();
|
||||||
|
}
|
||||||
|
} else if (hasChildren) {
|
||||||
|
// If no route but has children, just expand/collapse
|
||||||
|
setExpandedMenus(prev => {
|
||||||
|
const newExpanded = new Set(prev);
|
||||||
|
if (newExpanded.has(item.id)) {
|
||||||
|
newExpanded.delete(item.id);
|
||||||
|
} else {
|
||||||
|
newExpanded.add(item.id);
|
||||||
|
}
|
||||||
|
return newExpanded;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderMenuItem = (item: NavigationItem, level: number = 0) => {
|
||||||
|
const isActive = activeTab === item.id;
|
||||||
|
const isExpanded = expandedMenus.has(item.id);
|
||||||
|
const hasChildren = item.children && item.children.length > 0;
|
||||||
|
const Icon = getIconComponent(item.icon);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={item.id}>
|
||||||
|
{/* Parent Menu Item */}
|
||||||
|
<div className="relative group">
|
||||||
|
<div
|
||||||
|
className={`w-full flex items-center justify-between transition-all duration-200 ${
|
||||||
|
level > 0 ? 'pl-8' : 'pl-4'
|
||||||
|
} pr-4 py-3 ${
|
||||||
|
isActive
|
||||||
|
? 'bg-teal-700 border-r-4 border-teal-300'
|
||||||
|
: 'hover:bg-teal-700/50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* Main clickable area - icon and label */}
|
||||||
|
<button
|
||||||
|
onClick={() => handleMenuClick(item)}
|
||||||
|
className={`flex items-center flex-1 text-left ${!isOpen && 'justify-center'}`}
|
||||||
|
>
|
||||||
|
<Icon className="w-5 h-5 text-white flex-shrink-0" />
|
||||||
|
{isOpen && (
|
||||||
|
<>
|
||||||
|
<span className="ml-3 font-medium">{item.label}</span>
|
||||||
|
{item.badge && !hasChildren && (
|
||||||
|
<span className="ml-auto bg-teal-600 text-xs px-2 py-1 rounded-full">
|
||||||
|
{item.badge}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Separate expand/collapse button */}
|
||||||
|
{isOpen && hasChildren && (
|
||||||
|
<button
|
||||||
|
onClick={(e) => toggleMenu(item.id, e)}
|
||||||
|
className="ml-2 p-1 hover:bg-teal-600 rounded transition-colors"
|
||||||
|
aria-label={isExpanded ? 'Collapse' : 'Expand'}
|
||||||
|
>
|
||||||
|
{isExpanded ? (
|
||||||
|
<ChevronDown className="w-4 h-4" />
|
||||||
|
) : (
|
||||||
|
<ChevronRight className="w-4 h-4" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tooltip for collapsed sidebar */}
|
||||||
|
{!isOpen && (
|
||||||
|
<div className="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap z-50 pointer-events-none">
|
||||||
|
{item.label}
|
||||||
|
{item.badge && (
|
||||||
|
<span className="ml-2 bg-teal-600 text-xs px-2 py-0.5 rounded-full">
|
||||||
|
{item.badge}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<div className="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-gray-900"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Child Menu Items */}
|
||||||
|
{hasChildren && isExpanded && isOpen && (
|
||||||
|
<div className="bg-teal-900/30">
|
||||||
|
{item.children!.map((child) => renderMenuItem(child, level + 1))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Mobile overlay */}
|
||||||
|
{isOpen && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
|
||||||
|
onClick={onToggle}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className={`fixed left-0 top-0 h-full bg-gradient-to-b from-teal-800 to-teal-900 text-white transition-all duration-300 z-50 ${
|
||||||
|
isOpen ? 'w-64' : 'w-16'
|
||||||
|
} lg:relative lg:translate-x-0 ${isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between p-4 border-b border-teal-700">
|
||||||
|
<div className={`flex items-center space-x-3 ${!isOpen && 'lg:justify-center'}`}>
|
||||||
|
<div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
|
||||||
|
<Stethoscope className="w-5 h-5 text-teal-600" />
|
||||||
|
</div>
|
||||||
|
{isOpen && (
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-bold">LLI-SFE</h1>
|
||||||
|
<p className="text-xs text-teal-200">{user?.company || 'Role'}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onToggle}
|
||||||
|
className="p-2 rounded-lg hover:bg-teal-700 transition-colors"
|
||||||
|
>
|
||||||
|
{isOpen ? <ChevronLeft className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<nav className="mt-8" style={{ maxHeight: 'calc(100vh - 200px)' }}>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="px-4 py-3">
|
||||||
|
<div className="animate-pulse space-y-2">
|
||||||
|
<div className="h-10 bg-teal-700 rounded"></div>
|
||||||
|
<div className="h-10 bg-teal-700 rounded"></div>
|
||||||
|
<div className="h-10 bg-teal-700 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : navigationItems.length === 0 ? (
|
||||||
|
<div className="px-4 py-3 text-center text-teal-200 text-sm">
|
||||||
|
No menu items available
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
navigationItems.map((item) => renderMenuItem(item))
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* User Profile */}
|
||||||
|
<div className="absolute bottom-0 w-full p-4 border-t border-teal-700">
|
||||||
|
<div className={`flex items-center ${!isOpen && 'justify-center'}`}>
|
||||||
|
<div className="w-10 h-10 bg-teal-600 rounded-full flex items-center justify-center">
|
||||||
|
<User className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
{isOpen && (
|
||||||
|
<div className="ml-3 flex-1">
|
||||||
|
<p className="text-sm font-medium">{user?.userName || 'User'}</p>
|
||||||
|
<p className="text-xs text-teal-200">{user?.userRole || 'Role'}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isOpen && onLogout && (
|
||||||
|
<button
|
||||||
|
onClick={onLogout}
|
||||||
|
className="p-2 hover:bg-teal-700 rounded-lg transition-colors"
|
||||||
|
title="Logout"
|
||||||
|
>
|
||||||
|
<LogOut className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
3
src/components/layout/index.ts
Normal file
3
src/components/layout/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export * from './Sidebar';
|
||||||
|
export * from './Header';
|
||||||
|
export * from './Layout';
|
||||||
1625
src/components/reports/ReportsTab.tsx
Normal file
1625
src/components/reports/ReportsTab.tsx
Normal file
File diff suppressed because it is too large
Load Diff
280
src/components/ui/AutocompleteOption.tsx
Normal file
280
src/components/ui/AutocompleteOption.tsx
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
||||||
|
|
||||||
|
export interface AutocompleteOption {
|
||||||
|
value: string | number;
|
||||||
|
label: string;
|
||||||
|
searchText?: string; // Optional: custom text to search against
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AutocompleteProps {
|
||||||
|
label?: string;
|
||||||
|
value: string | number | null;
|
||||||
|
onChange: (value: string | number) => void;
|
||||||
|
options: AutocompleteOption[];
|
||||||
|
placeholder?: string;
|
||||||
|
required?: boolean;
|
||||||
|
error?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
loading?: boolean;
|
||||||
|
onFocus?: () => void;
|
||||||
|
searchPlaceholder?: string;
|
||||||
|
noResultsText?: string;
|
||||||
|
emptyText?: string;
|
||||||
|
maxHeight?: string;
|
||||||
|
minSearchLength?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Autocomplete: React.FC<AutocompleteProps> = ({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
options,
|
||||||
|
placeholder = 'Select...',
|
||||||
|
required,
|
||||||
|
error,
|
||||||
|
disabled,
|
||||||
|
loading = false,
|
||||||
|
onFocus,
|
||||||
|
searchPlaceholder = 'Search...',
|
||||||
|
noResultsText = 'No results found',
|
||||||
|
emptyText = 'Start typing to search',
|
||||||
|
maxHeight = '300px',
|
||||||
|
minSearchLength = 0,
|
||||||
|
}) => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const listRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// Get selected option label
|
||||||
|
const selectedOption =
|
||||||
|
value !== null ? options.find(opt => opt.value === value) : undefined;
|
||||||
|
|
||||||
|
const displayValue = selectedOption?.label ?? '';
|
||||||
|
|
||||||
|
// Filter options based on search term
|
||||||
|
const filteredOptions = useMemo(() => {
|
||||||
|
if (!searchTerm || searchTerm.length < minSearchLength) {
|
||||||
|
return options;
|
||||||
|
}
|
||||||
|
|
||||||
|
const lowerSearch = searchTerm.toLowerCase();
|
||||||
|
return options.filter(option => {
|
||||||
|
const searchText = option.searchText || option.label;
|
||||||
|
return searchText.toLowerCase().includes(lowerSearch);
|
||||||
|
});
|
||||||
|
}, [options, searchTerm, minSearchLength]);
|
||||||
|
|
||||||
|
// Close dropdown when clicking outside
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||||
|
setIsOpen(false);
|
||||||
|
setSearchTerm('');
|
||||||
|
setHighlightedIndex(-1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Scroll highlighted item into view
|
||||||
|
useEffect(() => {
|
||||||
|
if (highlightedIndex >= 0 && listRef.current) {
|
||||||
|
const highlightedElement = listRef.current.children[highlightedIndex] as HTMLElement;
|
||||||
|
if (highlightedElement) {
|
||||||
|
highlightedElement.scrollIntoView({ block: 'nearest' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [highlightedIndex]);
|
||||||
|
|
||||||
|
const handleInputClick = () => {
|
||||||
|
if (disabled) return;
|
||||||
|
setIsOpen(true);
|
||||||
|
if (onFocus) onFocus();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setSearchTerm(e.target.value);
|
||||||
|
setHighlightedIndex(-1);
|
||||||
|
if (!isOpen) setIsOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOptionClick = (optionValue: string | number) => {
|
||||||
|
onChange(optionValue);
|
||||||
|
setIsOpen(false);
|
||||||
|
setSearchTerm('');
|
||||||
|
setHighlightedIndex(-1);
|
||||||
|
inputRef.current?.blur();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
if (disabled) return;
|
||||||
|
|
||||||
|
switch (e.key) {
|
||||||
|
case 'ArrowDown':
|
||||||
|
e.preventDefault();
|
||||||
|
setIsOpen(true);
|
||||||
|
setHighlightedIndex(prev =>
|
||||||
|
prev < filteredOptions.length - 1 ? prev + 1 : prev
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'ArrowUp':
|
||||||
|
e.preventDefault();
|
||||||
|
setHighlightedIndex(prev => (prev > 0 ? prev - 1 : 0));
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'Enter':
|
||||||
|
e.preventDefault();
|
||||||
|
if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
|
||||||
|
handleOptionClick(filteredOptions[highlightedIndex].value);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'Escape':
|
||||||
|
e.preventDefault();
|
||||||
|
setIsOpen(false);
|
||||||
|
setSearchTerm('');
|
||||||
|
setHighlightedIndex(-1);
|
||||||
|
inputRef.current?.blur();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'Tab':
|
||||||
|
setIsOpen(false);
|
||||||
|
setSearchTerm('');
|
||||||
|
setHighlightedIndex(-1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClear = (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onChange('');
|
||||||
|
setSearchTerm('');
|
||||||
|
setHighlightedIndex(-1);
|
||||||
|
inputRef.current?.focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-1" ref={containerRef}>
|
||||||
|
{label && (
|
||||||
|
<label className="block text-sm font-medium text-gray-700">
|
||||||
|
{label}
|
||||||
|
{required && <span className="text-red-500 ml-1">*</span>}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
{/* Display Input */}
|
||||||
|
<div
|
||||||
|
onClick={handleInputClick}
|
||||||
|
className={`w-full px-2.5 py-1.5 text-sm border rounded-lg cursor-pointer transition-all ${
|
||||||
|
error ? 'border-red-300 bg-red-50' : 'border-gray-300 hover:border-gray-400'
|
||||||
|
} ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} ${
|
||||||
|
isOpen ? 'ring-1 ring-teal-500 border-transparent' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className={displayValue ? 'text-gray-900' : 'text-gray-400'}>
|
||||||
|
{displayValue || placeholder}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{loading && (
|
||||||
|
<svg className="animate-spin h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
{value && !disabled && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleClear}
|
||||||
|
className="text-gray-400 hover:text-gray-600"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<svg
|
||||||
|
className={`w-4 h-4 text-gray-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dropdown */}
|
||||||
|
{isOpen && !disabled && (
|
||||||
|
<div className="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg">
|
||||||
|
{/* Search Input */}
|
||||||
|
<div className="p-2 border-b border-gray-200">
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="text"
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={handleSearchChange}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
placeholder={searchPlaceholder}
|
||||||
|
className="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-teal-500 focus:border-transparent"
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Options List */}
|
||||||
|
<div
|
||||||
|
ref={listRef}
|
||||||
|
className="overflow-y-auto"
|
||||||
|
style={{ maxHeight }}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<div className="px-3 py-8 text-center text-sm text-gray-500">
|
||||||
|
Loading options...
|
||||||
|
</div>
|
||||||
|
) : filteredOptions.length === 0 ? (
|
||||||
|
<div className="px-3 py-8 text-center text-sm text-gray-500">
|
||||||
|
{searchTerm.length < minSearchLength ? emptyText : noResultsText}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
filteredOptions.map((option, index) => (
|
||||||
|
<div
|
||||||
|
key={option.value}
|
||||||
|
onClick={() => handleOptionClick(option.value)}
|
||||||
|
className={`px-3 py-2 text-sm cursor-pointer transition-colors ${
|
||||||
|
option.value === value
|
||||||
|
? 'bg-teal-50 text-teal-700 font-medium'
|
||||||
|
: highlightedIndex === index
|
||||||
|
? 'bg-gray-100'
|
||||||
|
: 'hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Results Count */}
|
||||||
|
{!loading && filteredOptions.length > 0 && (
|
||||||
|
<div className="px-3 py-1.5 text-xs text-gray-500 border-t border-gray-200 bg-gray-50">
|
||||||
|
Showing {filteredOptions.length} of {options.length} options
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<p className="text-sm text-red-600">{error}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
51
src/components/ui/Button.tsx
Normal file
51
src/components/ui/Button.tsx
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface ButtonProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'outline' | 'warning';
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
onClick?: () => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
className?: string;
|
||||||
|
type?: 'button' | 'submit' | 'reset';
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Button: React.FC<ButtonProps> = ({
|
||||||
|
children,
|
||||||
|
variant = 'primary',
|
||||||
|
size = 'md',
|
||||||
|
onClick,
|
||||||
|
disabled,
|
||||||
|
className = '',
|
||||||
|
type = 'button'
|
||||||
|
}) => {
|
||||||
|
const baseStyles = 'font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 inline-flex items-center justify-center';
|
||||||
|
|
||||||
|
const variants = {
|
||||||
|
primary: 'bg-teal-600 hover:bg-teal-700 text-white focus:ring-teal-500 shadow-md hover:shadow-lg',
|
||||||
|
secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800 focus:ring-gray-500',
|
||||||
|
danger: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500 shadow-md hover:shadow-lg',
|
||||||
|
success: 'bg-emerald-600 hover:bg-emerald-700 text-white focus:ring-emerald-500 shadow-md hover:shadow-lg',
|
||||||
|
outline: 'border-2 border-teal-600 text-teal-600 hover:bg-teal-50 focus:ring-teal-500',
|
||||||
|
warning: 'bg-amber-500 hover:bg-amber-600 text-white focus:ring-amber-400 shadow-md hover:shadow-lg'
|
||||||
|
};
|
||||||
|
|
||||||
|
const sizes = {
|
||||||
|
sm: 'px-3 py-1.5 text-sm',
|
||||||
|
md: 'px-4 py-2 text-sm',
|
||||||
|
lg: 'px-6 py-3 text-base'
|
||||||
|
};
|
||||||
|
|
||||||
|
const disabledStyles = disabled ? 'opacity-50 cursor-not-allowed' : '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type={type}
|
||||||
|
onClick={onClick}
|
||||||
|
disabled={disabled}
|
||||||
|
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${disabledStyles} ${className}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
0
src/components/ui/Card.tsx
Normal file
0
src/components/ui/Card.tsx
Normal file
117
src/components/ui/CheckboxProps.tsx
Normal file
117
src/components/ui/CheckboxProps.tsx
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export interface CheckboxProps {
|
||||||
|
id?: string;
|
||||||
|
label?: string;
|
||||||
|
checked?: boolean;
|
||||||
|
onChange: (checked: boolean) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
error?: string;
|
||||||
|
className?: string;
|
||||||
|
labelClassName?: string;
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
variant?: 'default' | 'primary' | 'success' | 'danger';
|
||||||
|
indeterminate?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Checkbox: React.FC<CheckboxProps> = ({
|
||||||
|
id,
|
||||||
|
label,
|
||||||
|
checked = false,
|
||||||
|
onChange,
|
||||||
|
disabled = false,
|
||||||
|
error,
|
||||||
|
className = '',
|
||||||
|
labelClassName = '',
|
||||||
|
size = 'md',
|
||||||
|
variant = 'default',
|
||||||
|
indeterminate = false,
|
||||||
|
}) => {
|
||||||
|
const checkboxRef = React.useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
// Handle indeterminate state
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (checkboxRef.current) {
|
||||||
|
checkboxRef.current.indeterminate = indeterminate;
|
||||||
|
}
|
||||||
|
}, [indeterminate]);
|
||||||
|
|
||||||
|
const sizeClasses = {
|
||||||
|
sm: 'h-3 w-3',
|
||||||
|
md: 'h-4 w-4',
|
||||||
|
lg: 'h-5 w-5',
|
||||||
|
};
|
||||||
|
|
||||||
|
const variantClasses = {
|
||||||
|
default: 'text-gray-600 focus:ring-gray-500',
|
||||||
|
primary: 'text-blue-600 focus:ring-blue-500',
|
||||||
|
success: 'text-teal-600 focus:ring-teal-500',
|
||||||
|
danger: 'text-red-600 focus:ring-red-500',
|
||||||
|
};
|
||||||
|
|
||||||
|
const labelSizeClasses = {
|
||||||
|
sm: 'text-xs',
|
||||||
|
md: 'text-sm',
|
||||||
|
lg: 'text-base',
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkboxClasses = `
|
||||||
|
${sizeClasses[size]}
|
||||||
|
${variantClasses[variant]}
|
||||||
|
rounded border-gray-300
|
||||||
|
focus:ring-2 focus:ring-offset-0
|
||||||
|
disabled:cursor-not-allowed disabled:opacity-50
|
||||||
|
transition-colors
|
||||||
|
${className}
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const labelClasses = `
|
||||||
|
${labelSizeClasses[size]}
|
||||||
|
font-medium text-gray-700
|
||||||
|
${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}
|
||||||
|
${labelClassName}
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
if (!disabled) {
|
||||||
|
onChange(e.target.checked);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
ref={checkboxRef}
|
||||||
|
id={id}
|
||||||
|
type="checkbox"
|
||||||
|
checked={checked}
|
||||||
|
onChange={handleChange}
|
||||||
|
disabled={disabled}
|
||||||
|
className={checkboxClasses}
|
||||||
|
aria-invalid={error ? 'true' : 'false'}
|
||||||
|
aria-describedby={error ? `${id}-error` : undefined}
|
||||||
|
/>
|
||||||
|
{label && (
|
||||||
|
<label
|
||||||
|
htmlFor={id}
|
||||||
|
className={`ml-2 ${labelClasses}`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{error && (
|
||||||
|
<p
|
||||||
|
id={`${id}-error`}
|
||||||
|
className="mt-1 text-xs text-red-600"
|
||||||
|
>
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Export for use in forms
|
||||||
|
export default Checkbox;
|
||||||
59
src/components/ui/ConfirmModal.tsx
Normal file
59
src/components/ui/ConfirmModal.tsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Modal } from './Modal';
|
||||||
|
import { ConfirmModalProps } from '../../types/modal';
|
||||||
|
|
||||||
|
export const ConfirmModal: React.FC<ConfirmModalProps> = ({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
onConfirm,
|
||||||
|
title,
|
||||||
|
message,
|
||||||
|
type = 'danger',
|
||||||
|
confirmText = 'Confirm',
|
||||||
|
cancelText = 'Cancel',
|
||||||
|
loading = false,
|
||||||
|
}) => {
|
||||||
|
const handleConfirm = () => {
|
||||||
|
onConfirm();
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getButtonStyles = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'danger': return 'bg-red-600 hover:bg-red-700 text-white';
|
||||||
|
case 'warning': return 'bg-amber-600 hover:bg-amber-700 text-white';
|
||||||
|
case 'info': return 'bg-teal-600 hover:bg-teal-700 text-white';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} onClose={onClose} title={title} size="sm">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Loading Overlay */}
|
||||||
|
{loading && (
|
||||||
|
<div className="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-50 rounded-lg">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-teal-600 mx-auto"></div>
|
||||||
|
<p className="mt-3 text-sm text-gray-600">Processing...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<p className="text-gray-600">{message}</p>
|
||||||
|
<div className="flex space-x-3 justify-end">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-4 py-2 text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
{cancelText}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleConfirm}
|
||||||
|
className={`px-4 py-2 rounded-lg transition-colors ${getButtonStyles()}`}
|
||||||
|
>
|
||||||
|
{confirmText}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
157
src/components/ui/Input.tsx
Normal file
157
src/components/ui/Input.tsx
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Eye, EyeOff } from 'lucide-react';
|
||||||
|
import { getStatusColor, getStatusLabel } from '../../utils/doctorStatus';
|
||||||
|
|
||||||
|
interface InputProps {
|
||||||
|
label?: string;
|
||||||
|
type?: string;
|
||||||
|
value: string | number;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
required?: boolean;
|
||||||
|
error?: string;
|
||||||
|
readOnly?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
min?: string;
|
||||||
|
max?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Input: React.FC<InputProps> = ({
|
||||||
|
label,
|
||||||
|
type = 'text',
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
placeholder,
|
||||||
|
required,
|
||||||
|
error,
|
||||||
|
readOnly,
|
||||||
|
disabled,
|
||||||
|
min,
|
||||||
|
max
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
|
||||||
|
const getVisitStatusColor = (status: string) => {
|
||||||
|
const normalized = (status || '').toLowerCase().trim();
|
||||||
|
switch (normalized) {
|
||||||
|
case 'partial': return 'bg-blue-100 text-blue-800';
|
||||||
|
case 'completed': return 'bg-green-100 text-green-800';
|
||||||
|
case 'none': return 'bg-gray-100 text-orange-800';
|
||||||
|
default: return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper to extract first date from comma-separated dates
|
||||||
|
const getFirstDate = (dateString: string): string => {
|
||||||
|
if (!dateString) return '';
|
||||||
|
const dates = dateString.split(',');
|
||||||
|
const firstDate = dates[0].trim().split('T')[0].trim();
|
||||||
|
return firstDate;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get the display value for date inputs
|
||||||
|
const getDateValue = (): string => {
|
||||||
|
if (type === 'date' && typeof value === 'string') {
|
||||||
|
if (value.includes(',') || value.includes('T')) {
|
||||||
|
return getFirstDate(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return String(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Determine the actual input type (for password toggle)
|
||||||
|
const inputType = type === 'password' && showPassword ? 'text' : type;
|
||||||
|
|
||||||
|
// Toggle password visibility
|
||||||
|
const togglePasswordVisibility = () => {
|
||||||
|
setShowPassword(!showPassword);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Hidden input type
|
||||||
|
if (type === 'hidden') {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-1">
|
||||||
|
{label && (
|
||||||
|
<label className="block text-xs font-medium text-gray-700">
|
||||||
|
{label}
|
||||||
|
{required && <span className="text-red-500 ml-1">*</span>}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{readOnly && type === 'status' ? (
|
||||||
|
<span
|
||||||
|
className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${getVisitStatusColor(
|
||||||
|
String(value)
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
) : readOnly && type === 'approvalStatus' ? (
|
||||||
|
<span
|
||||||
|
className={`inline-block px-2.5 py-0.5 rounded-full border text-xs font-medium ${getStatusColor(
|
||||||
|
Number(value)
|
||||||
|
)}`}
|
||||||
|
>
|
||||||
|
{getStatusLabel(Number(value))}
|
||||||
|
</span>
|
||||||
|
) : readOnly && type === 'date' && typeof value === 'string' && value.includes(',') ? (
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{value.split(',').map((date, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="inline-block px-2 py-0.5 bg-teal-100 text-teal-800 rounded text-xs font-medium"
|
||||||
|
>
|
||||||
|
{date.trim().split('T')[0]}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type={inputType}
|
||||||
|
value={getDateValue()}
|
||||||
|
onChange={(e) => !readOnly && onChange(e.target.value)}
|
||||||
|
placeholder={placeholder}
|
||||||
|
readOnly={readOnly}
|
||||||
|
disabled={disabled}
|
||||||
|
min={min}
|
||||||
|
max={max}
|
||||||
|
className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-1 focus:ring-teal-500 focus:border-transparent transition-all ${
|
||||||
|
error ? 'border-red-300 bg-red-50' : 'border-gray-300'
|
||||||
|
} ${readOnly || disabled ? 'bg-gray-100 cursor-not-allowed' : ''} ${
|
||||||
|
type === 'password' ? 'pr-9' : ''
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Password Toggle Button */}
|
||||||
|
{type === 'password' && !readOnly && !disabled && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={togglePasswordVisibility}
|
||||||
|
className="absolute inset-y-0 right-0 flex items-center pr-2.5 text-gray-500 hover:text-gray-700 focus:outline-none"
|
||||||
|
tabIndex={-1}
|
||||||
|
>
|
||||||
|
{showPassword ? (
|
||||||
|
<EyeOff className="h-4 w-4" />
|
||||||
|
) : (
|
||||||
|
<Eye className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{error && <p className="text-xs text-red-600">{error}</p>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
45
src/components/ui/LoadingSpinnerProps.tsx
Normal file
45
src/components/ui/LoadingSpinnerProps.tsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface LoadingSpinnerProps {
|
||||||
|
message?: string;
|
||||||
|
fullScreen?: boolean;
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
color?: 'teal' | 'blue' | 'gray' | 'primary';
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
||||||
|
message = 'Loading...',
|
||||||
|
fullScreen = true,
|
||||||
|
size = 'md',
|
||||||
|
color = 'teal'
|
||||||
|
}) => {
|
||||||
|
const sizeClasses = {
|
||||||
|
sm: 'h-8 w-8',
|
||||||
|
md: 'h-12 w-12',
|
||||||
|
lg: 'h-16 w-16'
|
||||||
|
};
|
||||||
|
|
||||||
|
const colorClasses = {
|
||||||
|
teal: 'border-teal-600',
|
||||||
|
blue: 'border-blue-600',
|
||||||
|
gray: 'border-gray-600',
|
||||||
|
primary: 'border-primary-600'
|
||||||
|
};
|
||||||
|
|
||||||
|
const containerClasses = fullScreen
|
||||||
|
? 'min-h-screen bg-gray-50 flex items-center justify-center'
|
||||||
|
: 'flex items-center justify-center py-12';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={containerClasses}>
|
||||||
|
<div className="text-center">
|
||||||
|
<div
|
||||||
|
className={`animate-spin rounded-full border-b-2 mx-auto ${sizeClasses[size]} ${colorClasses[color]}`}
|
||||||
|
></div>
|
||||||
|
{message && (
|
||||||
|
<p className="mt-4 text-gray-600">{message}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
97
src/components/ui/Modal.tsx
Normal file
97
src/components/ui/Modal.tsx
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
|
||||||
|
interface ModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
title: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
|
||||||
|
static?: boolean; // Optional static backdrop
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Modal: React.FC<ModalProps> = ({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
title,
|
||||||
|
children,
|
||||||
|
size = 'md',
|
||||||
|
static: isStatic = false
|
||||||
|
}) => {
|
||||||
|
const [isShaking, setIsShaking] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.body.style.overflow = isOpen ? 'hidden' : 'unset';
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = 'unset';
|
||||||
|
};
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
// ✅ Added larger modal sizes here
|
||||||
|
const sizeClasses: Record<string, string> = {
|
||||||
|
sm: 'max-w-md',
|
||||||
|
md: 'max-w-lg',
|
||||||
|
lg: 'max-w-2xl',
|
||||||
|
xl: 'max-w-4xl',
|
||||||
|
'2xl': 'max-w-6xl',
|
||||||
|
'3xl': 'max-w-7xl',
|
||||||
|
full: 'max-w-[95vw]' // almost full width, still with padding
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackdropClick = () => {
|
||||||
|
if (isStatic) {
|
||||||
|
// Trigger shake animation if modal is static
|
||||||
|
setIsShaking(true);
|
||||||
|
setTimeout(() => setIsShaking(false), 500);
|
||||||
|
} else {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||||
|
<div className="flex items-center justify-center min-h-screen px-4">
|
||||||
|
{/* Backdrop */}
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black bg-opacity-30 transition-opacity"
|
||||||
|
onClick={handleBackdropClick}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Modal Container */}
|
||||||
|
<div
|
||||||
|
className={`relative bg-white rounded-lg shadow-xl w-full ${sizeClasses[size]} transform transition-all max-h-[100vh] overflow-y-auto ${
|
||||||
|
isShaking ? 'animate-shake' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between p-3 ml-2 border-b border-gray-200 sticky top-0 bg-white z-10">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">{title}</h3>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-6 h-6" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Body */}
|
||||||
|
<div className="p-6">{children}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inline animation */}
|
||||||
|
<style>{`
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% { transform: translateX(0); }
|
||||||
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
|
||||||
|
20%, 40%, 60%, 80% { transform: translateX(10px); }
|
||||||
|
}
|
||||||
|
.animate-shake {
|
||||||
|
animation: shake 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
66
src/components/ui/RadioOption.tsx
Normal file
66
src/components/ui/RadioOption.tsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface RadioOption {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RadioGroupProps {
|
||||||
|
label?: string;
|
||||||
|
value: boolean | string;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
options?: RadioOption[];
|
||||||
|
required?: boolean;
|
||||||
|
error?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RadioGroup: React.FC<RadioGroupProps> = ({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
options = [
|
||||||
|
{ value: 'true', label: 'Yes' },
|
||||||
|
{ value: 'false', label: 'No' }
|
||||||
|
],
|
||||||
|
required,
|
||||||
|
error,
|
||||||
|
disabled = false
|
||||||
|
}) => {
|
||||||
|
// Convert boolean to string for comparison
|
||||||
|
const stringValue = String(value);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{label && (
|
||||||
|
<label className="block text-sm font-medium text-gray-700">
|
||||||
|
{label}
|
||||||
|
{required && <span className="text-red-500 ml-1">*</span>}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-6">
|
||||||
|
{options.map((option) => (
|
||||||
|
<label
|
||||||
|
key={option.value}
|
||||||
|
className={`flex items-center space-x-2 cursor-pointer ${
|
||||||
|
disabled ? 'opacity-50 cursor-not-allowed' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
value={option.value}
|
||||||
|
checked={stringValue === option.value}
|
||||||
|
onChange={(e) => !disabled && onChange(e.target.value)}
|
||||||
|
disabled={disabled}
|
||||||
|
className="w-4 h-4 text-teal-600 border-gray-300 focus:ring-2 focus:ring-teal-500 cursor-pointer disabled:cursor-not-allowed"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-700">{option.label}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
68
src/components/ui/Select.tsx
Normal file
68
src/components/ui/Select.tsx
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface SelectOption {
|
||||||
|
value: string | number;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SelectProps {
|
||||||
|
label?: string;
|
||||||
|
value: string | number;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
options: SelectOption[];
|
||||||
|
placeholder?: string;
|
||||||
|
required?: boolean;
|
||||||
|
error?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
onFocus?: React.FocusEventHandler<HTMLSelectElement>;
|
||||||
|
onClick?: React.MouseEventHandler<HTMLSelectElement>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Select: React.FC<SelectProps> = ({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
options,
|
||||||
|
placeholder,
|
||||||
|
required,
|
||||||
|
error,
|
||||||
|
disabled,
|
||||||
|
onFocus,
|
||||||
|
onClick
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-1">
|
||||||
|
{label && (
|
||||||
|
<label className="block text-sm font-medium text-gray-700">
|
||||||
|
{label}
|
||||||
|
{required && <span className="text-red-500 ml-1">*</span>}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<select
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
onFocus={onFocus}
|
||||||
|
onClick={onClick}
|
||||||
|
disabled={disabled}
|
||||||
|
className={`w-full px-2.5 py-1.5 text-sm border rounded-lg focus:ring-1 focus:ring-teal-500 focus:border-transparent transition-all ${
|
||||||
|
error ? 'border-red-300 bg-red-50' : 'border-gray-300'
|
||||||
|
} ${disabled ? 'bg-gray-100 cursor-not-allowed' : ''}`}
|
||||||
|
>
|
||||||
|
{placeholder && (
|
||||||
|
<option value="" disabled hidden={!!value}>
|
||||||
|
{placeholder}
|
||||||
|
</option>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{options.map((option) => (
|
||||||
|
<option key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{error && (
|
||||||
|
<p className="text-sm text-red-600">{error}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
66
src/components/ui/Textarea.tsx
Normal file
66
src/components/ui/Textarea.tsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import React, { } from 'react';
|
||||||
|
|
||||||
|
interface TextareaProps {
|
||||||
|
label?: string;
|
||||||
|
value: string;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
required?: boolean;
|
||||||
|
error?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
rows?: number;
|
||||||
|
className?: string;
|
||||||
|
maxLength?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Textarea: React.FC<TextareaProps> = ({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
placeholder,
|
||||||
|
required,
|
||||||
|
error,
|
||||||
|
disabled,
|
||||||
|
rows = 3,
|
||||||
|
className = '',
|
||||||
|
maxLength
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-1">
|
||||||
|
{label && (
|
||||||
|
<label className="block text-sm font-medium text-gray-700">
|
||||||
|
{label}
|
||||||
|
{required && <span className="text-red-500 ml-1">*</span>}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
placeholder={placeholder}
|
||||||
|
required={required}
|
||||||
|
disabled={disabled}
|
||||||
|
rows={rows}
|
||||||
|
maxLength={maxLength}
|
||||||
|
className={`
|
||||||
|
w-full px-2.5 py-1.5 text-sm border rounded-lg
|
||||||
|
focus:ring-1 focus:ring-teal-500 focus:border-transparent
|
||||||
|
transition-all
|
||||||
|
resize-y overflow-auto
|
||||||
|
${error ? 'border-red-300 bg-red-50' : 'border-gray-300'}
|
||||||
|
${disabled ? 'bg-gray-100 cursor-not-allowed resize-none' : ''}
|
||||||
|
${className}
|
||||||
|
`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||||
|
{maxLength && (
|
||||||
|
<p className="text-xs text-gray-500 ml-auto">
|
||||||
|
{value.length} / {maxLength}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
60
src/components/ui/Toast.tsx
Normal file
60
src/components/ui/Toast.tsx
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Check, AlertCircle, Info, XCircle, X } from 'lucide-react';
|
||||||
|
import { ToastType } from '../../types/toast';
|
||||||
|
import { useToast } from '../../contexts/ToastContext';
|
||||||
|
|
||||||
|
interface ToastProps {
|
||||||
|
toast: ToastType;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Toast: React.FC<ToastProps> = ({ toast }) => {
|
||||||
|
const { removeToast } = useToast();
|
||||||
|
|
||||||
|
const getIcon = () => {
|
||||||
|
switch (toast.type) {
|
||||||
|
case 'success': return <Check className="w-5 h-5" />;
|
||||||
|
case 'error': return <XCircle className="w-5 h-5" />;
|
||||||
|
case 'warning': return <AlertCircle className="w-5 h-5" />;
|
||||||
|
case 'info': return <Info className="w-5 h-5" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStyles = () => {
|
||||||
|
switch (toast.type) {
|
||||||
|
case 'success': return 'bg-emerald-50 border-emerald-200 text-emerald-800';
|
||||||
|
case 'error': return 'bg-red-50 border-red-200 text-red-800';
|
||||||
|
case 'warning': return 'bg-amber-50 border-amber-200 text-amber-800';
|
||||||
|
case 'info': return 'bg-teal-50 border-teal-200 text-teal-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${getStyles()} border rounded-lg p-4 shadow-lg transition-all duration-300 transform translate-x-0`}>
|
||||||
|
<div className="flex items-start">
|
||||||
|
<div className="flex-shrink-0">{getIcon()}</div>
|
||||||
|
<div className="ml-3 flex-1">
|
||||||
|
<h3 className="font-medium">{toast.title}</h3>
|
||||||
|
{toast.message && <p className="mt-1 text-sm opacity-90">{toast.message}</p>}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => removeToast(toast.id)}
|
||||||
|
className="ml-4 flex-shrink-0 text-gray-400 hover:text-gray-600"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ToastContainer: React.FC = () => {
|
||||||
|
const { toasts } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed top-4 right-4 z-50 space-y-2">
|
||||||
|
{toasts.map(toast => (
|
||||||
|
<Toast key={toast.id} toast={toast} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
11
src/components/ui/index.ts
Normal file
11
src/components/ui/index.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
export * from './Button';
|
||||||
|
export * from './Input';
|
||||||
|
export * from './Select';
|
||||||
|
export * from './Modal';
|
||||||
|
export * from './ConfirmModal';
|
||||||
|
export * from './Toast';
|
||||||
|
export * from './RadioOption';
|
||||||
|
export * from './AutocompleteOption';
|
||||||
|
export * from './LoadingSpinnerProps';
|
||||||
|
export * from './Textarea';
|
||||||
|
export * from './CheckboxProps';
|
||||||
177
src/config/endpoints.ts
Normal file
177
src/config/endpoints.ts
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
import { DefaultEndpoints, RoleEndpoints } from "./roleEndpoints";
|
||||||
|
|
||||||
|
export const ROLE_ENDPOINTS: Record<string, RoleEndpoints> = {
|
||||||
|
MEDREP: {
|
||||||
|
doctor: {
|
||||||
|
getAll: '/DoctorMgmt/GetDoctor',
|
||||||
|
getById: '/DoctorMgmt/GetDoctor',
|
||||||
|
getSpecialization:'/Maintenance/Specialization',
|
||||||
|
create: '/DoctorMgmt/PostPutDoctor',
|
||||||
|
update: '/DoctorMgmt/PostPutDoctor',
|
||||||
|
delete: '/DoctorMgmt',
|
||||||
|
approve: '/DoctorMgmt/ApproveDoctor',
|
||||||
|
getPending: '/DoctorMgmt/GetPendingApprovals',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
DSM: {
|
||||||
|
doctor: {
|
||||||
|
getAll: '/DoctorMgmt/GetPendingApprovals',
|
||||||
|
getById: '/DoctorMgmt/GetDoctor',
|
||||||
|
getSpecialization:'/Maintenance/Specialization',
|
||||||
|
create: '/DoctorMgmt/ApproveDoctor',
|
||||||
|
update: '/DoctorMgmt/ApproveDoctor',
|
||||||
|
delete: '/DoctorMgmt',
|
||||||
|
approve: '/DoctorMgmt/ApproveDoctor',
|
||||||
|
getPending: '/DoctorMgmt/GetPendingApprovals',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
NSM: {
|
||||||
|
doctor: {
|
||||||
|
getAll: '/DoctorMgmt/GetPendingApprovals',
|
||||||
|
getById: '/DoctorMgmt/GetDoctor',
|
||||||
|
getSpecialization:'/Maintenance/Specialization',
|
||||||
|
create: '/DoctorMgmt/ApproveDoctor',
|
||||||
|
update: '/DoctorMgmt/ApproveDoctor',
|
||||||
|
delete: '/DoctorMgmt',
|
||||||
|
approve: '/DoctorMgmt/ApproveDoctor',
|
||||||
|
getPending: '/DoctorMgmt/GetPendingApprovals',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
ADMIN: {
|
||||||
|
doctor: {
|
||||||
|
getAll: '/Admin/GetAllDoctors',
|
||||||
|
getById: '/Admin/GetDoctor',
|
||||||
|
getSpecialization:'/Maintenance/Specialization',
|
||||||
|
create: '/Admin/CreateDoctor',
|
||||||
|
update: '/Admin/UpdateDoctor',
|
||||||
|
delete: '/Admin/DeleteDoctor',
|
||||||
|
approve: '/Admin/ApproveDoctor',
|
||||||
|
getPending: '/Admin/GetPendingApprovals',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// Default endpoints
|
||||||
|
export const DEFAULT_ENDPOINTS: RoleEndpoints = {
|
||||||
|
doctor: {
|
||||||
|
getAll: '/DoctorMgmt/GetDoctor',
|
||||||
|
getById: '/DoctorMgmt/GetDoctor',
|
||||||
|
getSpecialization:'/Maintenance/Specialization',
|
||||||
|
create: '/DoctorMgmt/PostPutDoctor',
|
||||||
|
update: '/DoctorMgmt/PostPutDoctor',
|
||||||
|
delete: '/DoctorMgmt',
|
||||||
|
approve: '/DoctorMgmt/ApproveDoctor',
|
||||||
|
getPending: '/DoctorMgmt/GetPendingApprovals',
|
||||||
|
}
|
||||||
|
};
|
||||||
|
export const config: DefaultEndpoints = {
|
||||||
|
institution: {
|
||||||
|
getAll: '/Maintenance/Institutions',
|
||||||
|
getById: '/Maintenance/Institutions',
|
||||||
|
create: '/Maintenance/PostPutInstitution',
|
||||||
|
update: '/Maintenance/PostPutInstitution',
|
||||||
|
delete: '/Maintenance'
|
||||||
|
},
|
||||||
|
areas: {
|
||||||
|
getAll: '/Maintenance/Areas',
|
||||||
|
getById: '/Maintenance/Areas',
|
||||||
|
create: '/Maintenance/PostPutArea',
|
||||||
|
update: '/Maintenance/PostPutArea',
|
||||||
|
delete: '/Maintenance'
|
||||||
|
},
|
||||||
|
district: {
|
||||||
|
getAll: '/Maintenance/Districts',
|
||||||
|
getById: '/Maintenance/Districts',
|
||||||
|
create: '/Maintenance/PostPutDistrict',
|
||||||
|
update: '/Maintenance/PostPutDistrict',
|
||||||
|
delete: '/Maintenance'
|
||||||
|
},
|
||||||
|
division: {
|
||||||
|
getAll: '/Maintenance/Divisions',
|
||||||
|
getById: '/Maintenance/Divisions',
|
||||||
|
create: '/Maintenance/PostPutDivision',
|
||||||
|
update: '/Maintenance/PostPutDivision',
|
||||||
|
delete: '/Maintenance'
|
||||||
|
},
|
||||||
|
territory: {
|
||||||
|
getAll: '/Maintenance/Territories',
|
||||||
|
getById: '/Maintenance/Territories',
|
||||||
|
create: '/Maintenance/PostPutTerritory',
|
||||||
|
update: '/Maintenance/PostPutTerritory',
|
||||||
|
delete: '/Maintenance'
|
||||||
|
},
|
||||||
|
product:{
|
||||||
|
getAll: '/Maintenance/Products',
|
||||||
|
getById: '/Maintenance/Products',
|
||||||
|
getFile: '/Maintenance/productFile',
|
||||||
|
create: '/Maintenance/PostPutProduct',
|
||||||
|
update: '/Maintenance/PostPutProduct',
|
||||||
|
delete: '/Maintenance'
|
||||||
|
},
|
||||||
|
inventory:{
|
||||||
|
getAll: '/Inventory/Inventory',
|
||||||
|
getById: '/Inventory/Inventory',
|
||||||
|
getFile: '/Inventory/InventoryFile',
|
||||||
|
create: '/Inventory/PostPutInventory',
|
||||||
|
update: '/Inventory/PostPutInventory',
|
||||||
|
delete: '/Inventory/DeleteInventory',
|
||||||
|
bulkDelete:'/Inventory/BulkDeleteInventory',
|
||||||
|
uploadExcel: '/Inventory/UploadExcel'
|
||||||
|
},
|
||||||
|
institutionCategory:{
|
||||||
|
getAll: '/Maintenance/InstitutionCategories',
|
||||||
|
getById: '/Maintenance/InstitutionCategories',
|
||||||
|
create: '/Maintenance/PostPutInstitutionCategory',
|
||||||
|
update: '/Maintenance/PostPutInstitutionCategory',
|
||||||
|
delete: '/Maintenance'
|
||||||
|
},
|
||||||
|
userAccount:{
|
||||||
|
getAll: '/Account/GetUsers',
|
||||||
|
getById: '/Account/GetUsers',
|
||||||
|
create: '/Account/Register',
|
||||||
|
update: '/Account/UpdateUser',
|
||||||
|
delete: '/Account'
|
||||||
|
},
|
||||||
|
department:{
|
||||||
|
getAll: '/Account/GetDepartment',
|
||||||
|
getById: '/Account/GetDepartment',
|
||||||
|
create: '/Account/PostPutDepartment',
|
||||||
|
update: '/Account/PostPutDepartment',
|
||||||
|
delete: '/Account'
|
||||||
|
},
|
||||||
|
userRole:{
|
||||||
|
getAll: '/Account/GetUserRole',
|
||||||
|
getById: '/Account/GetUserRole',
|
||||||
|
create: '/Account/PostPutUserRole',
|
||||||
|
update: '/Account/PostPutUserRole',
|
||||||
|
delete: '/Account'
|
||||||
|
},
|
||||||
|
appointment:{
|
||||||
|
getAll: '/Plan/GetDoctorWithPlan',
|
||||||
|
getById: '/Plan/GetDoctorById',
|
||||||
|
getPendingApprovals: '/Plan/GetPendingApprovals',
|
||||||
|
getProductTransaction:'/Plan/GetProductTransaction',
|
||||||
|
getSampleTransaction:'/Plan/GetSampleTransaction',
|
||||||
|
create: '/Plan/PostPutPlan',
|
||||||
|
update: '/Plan/PostPutPlan',
|
||||||
|
approve: '/Plan/ApprovePlan',
|
||||||
|
copyMonthlyMRRawPlans: '/Plan/CopyMonthlyMRRawPlans',
|
||||||
|
},
|
||||||
|
reports:{
|
||||||
|
getCallRateReport: '/Reports/GetCallRateReport',
|
||||||
|
getCallReachReport: '/Reports/GetCallReachReport',
|
||||||
|
getCatchUpCallReport: '/Reports/GetCatchUpCallReport',
|
||||||
|
getActualCoverageReport: '/Reports/GetActualCoverageReport',
|
||||||
|
getDoctorSignature: '/Reports/GetDoctorSignature',
|
||||||
|
getAttendanceLogs: '/TimeKeeping/GetAttendanceLogs',
|
||||||
|
getAttendancePhoto: '/TimeKeeping/GetAttendancePhoto',
|
||||||
|
create: '/Reports/PutMissedCall',
|
||||||
|
update: '/Reports/PutMissedCall'
|
||||||
|
},
|
||||||
|
dashboard:{
|
||||||
|
getAllDoctor: '/DoctorMgmt/GetAllDoctor',
|
||||||
|
getMyDoctor: '/DoctorMgmt/GetMyDoctor',
|
||||||
|
getAllAppointmentToday: '/Plan/GetAllAppointmentToday',
|
||||||
|
getAttendanceToday: '/TimeKeeping/GetAttendanceToday',
|
||||||
|
getAllMissReschedule:'/Plan/GetAllMissReschedule'
|
||||||
|
}
|
||||||
|
}
|
||||||
171
src/config/roleEndpoints.ts
Normal file
171
src/config/roleEndpoints.ts
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
import { DEFAULT_ENDPOINTS, ROLE_ENDPOINTS } from "./endpoints";
|
||||||
|
|
||||||
|
export interface RoleEndpoints {
|
||||||
|
doctor: {
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
getSpecialization: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
approve: string;
|
||||||
|
getPending: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export interface DefaultEndpoints {
|
||||||
|
institution:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
},
|
||||||
|
areas:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
},
|
||||||
|
district:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
},
|
||||||
|
division:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
},
|
||||||
|
product:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
getFile: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
} ,
|
||||||
|
inventory:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
getFile: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
bulkDelete:string;
|
||||||
|
uploadExcel:string;
|
||||||
|
} ,
|
||||||
|
territory: {
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
},
|
||||||
|
institutionCategory:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
},
|
||||||
|
userAccount:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
},
|
||||||
|
department:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
},
|
||||||
|
userRole:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
delete: string;
|
||||||
|
},
|
||||||
|
appointment:{
|
||||||
|
getAll: string;
|
||||||
|
getById: string;
|
||||||
|
getPendingApprovals:string;
|
||||||
|
getProductTransaction:string;
|
||||||
|
getSampleTransaction:string;
|
||||||
|
create: string;
|
||||||
|
update: string;
|
||||||
|
approve: string;
|
||||||
|
copyMonthlyMRRawPlans: string;
|
||||||
|
},
|
||||||
|
reports:{
|
||||||
|
getCallRateReport:string;
|
||||||
|
getCallReachReport: string;
|
||||||
|
getCatchUpCallReport: string;
|
||||||
|
getActualCoverageReport: string;
|
||||||
|
getDoctorSignature: string;
|
||||||
|
getAttendanceLogs:string;
|
||||||
|
getAttendancePhoto:string;
|
||||||
|
create:string;
|
||||||
|
update: string;
|
||||||
|
},
|
||||||
|
dashboard:{
|
||||||
|
getAllDoctor:string;
|
||||||
|
getMyDoctor:string;
|
||||||
|
getAllAppointmentToday:string;
|
||||||
|
getAttendanceToday:string;
|
||||||
|
getAllMissReschedule:string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
export function getDefaultEndpoint(
|
||||||
|
module: keyof DefaultEndpoints
|
||||||
|
): string {
|
||||||
|
|
||||||
|
// Get the endpoint from the module
|
||||||
|
const endpoint = module;
|
||||||
|
|
||||||
|
if (!endpoint) {
|
||||||
|
console.error(`Module "${module}" not found in role endpoints`);
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!endpoint) {
|
||||||
|
console.error(`Operation "${endpoint}" not found`);
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return endpoint;
|
||||||
|
}
|
||||||
|
export function getEndpoint(
|
||||||
|
module: keyof RoleEndpoints,
|
||||||
|
operation: string,
|
||||||
|
userRole?: string
|
||||||
|
): string {
|
||||||
|
const role = userRole || 'MEDREP'; // Default role
|
||||||
|
const roleEndpoints = ROLE_ENDPOINTS[role] || DEFAULT_ENDPOINTS;
|
||||||
|
|
||||||
|
// Get the endpoint from the module
|
||||||
|
const moduleEndpoints = roleEndpoints[module];
|
||||||
|
|
||||||
|
if (!moduleEndpoints) {
|
||||||
|
console.error(`Module "${module}" not found in role endpoints`);
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const endpoint = (moduleEndpoints as any)[operation];
|
||||||
|
|
||||||
|
if (!endpoint) {
|
||||||
|
console.error(`Operation "${operation}" not found for module "${module}" and role "${role}"`);
|
||||||
|
console.log('Available operations:', Object.keys(moduleEndpoints));
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return endpoint;
|
||||||
|
}
|
||||||
1
src/constants/index.ts
Normal file
1
src/constants/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './navigation';
|
||||||
27
src/constants/navigation.ts
Normal file
27
src/constants/navigation.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import {
|
||||||
|
Home,
|
||||||
|
Users,
|
||||||
|
Settings,
|
||||||
|
BarChart3,
|
||||||
|
User,
|
||||||
|
Calendar,
|
||||||
|
Building2
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
export interface NavigationItem {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
icon: React.ComponentType<{ className?: string }>;
|
||||||
|
badge?: string;
|
||||||
|
color?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const navigationItems: NavigationItem[] = [
|
||||||
|
{ id: 'dashboard', label: 'Dashboard', icon: Home, color: 'text-blue-600' },
|
||||||
|
{ id: 'doctors', label: 'Doctor Management', icon: Users, badge: '3', color: 'text-teal-600' },
|
||||||
|
{ id: 'patients', label: 'Patients', icon: User, badge: '156', color: 'text-purple-600' },
|
||||||
|
{ id: 'appointments', label: 'Appointments', icon: Calendar, badge: '12', color: 'text-green-600' },
|
||||||
|
{ id: 'departments', label: 'Departments', icon: Building2, color: 'text-orange-600' },
|
||||||
|
{ id: 'reports', label: 'Reports', icon: BarChart3, color: 'text-red-600' },
|
||||||
|
{ id: 'settings', label: 'Settings', icon: Settings, color: 'text-gray-600' },
|
||||||
|
];
|
||||||
91
src/contexts/AuthContext.tsx
Normal file
91
src/contexts/AuthContext.tsx
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
import React, { createContext, useState, useEffect, ReactNode } from 'react';
|
||||||
|
import { AuthContextType, AuthUser } from '../types/auth';
|
||||||
|
|
||||||
|
// Create the context
|
||||||
|
export const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
interface AuthProviderProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||||
|
const [user, setUser] = useState<AuthUser | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
const isAuthenticated = !!user && !!user.token;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Check for stored authentication data on app load
|
||||||
|
const storedAuth = localStorage.getItem('auth');
|
||||||
|
if (storedAuth) {
|
||||||
|
try {
|
||||||
|
const authData = JSON.parse(storedAuth);
|
||||||
|
|
||||||
|
// Check if token is still valid (you might want to add token expiration check)
|
||||||
|
if (authData.token && authData.userName) {
|
||||||
|
setUser(authData);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error parsing stored auth data:', error);
|
||||||
|
localStorage.removeItem('auth');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setIsLoading(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const login = async (authData: {
|
||||||
|
company: string;
|
||||||
|
token: string;
|
||||||
|
userId: string;
|
||||||
|
userName: string;
|
||||||
|
fullName: string;
|
||||||
|
userClaims: any[];
|
||||||
|
userRole: string;
|
||||||
|
expiration?: string;
|
||||||
|
}) => {
|
||||||
|
const userData: AuthUser = {
|
||||||
|
userId: authData.userId,
|
||||||
|
userName: authData.userName,
|
||||||
|
fullName: authData.fullName,
|
||||||
|
userRole: authData.userRole,
|
||||||
|
userClaims: authData.userClaims,
|
||||||
|
token: authData.token,
|
||||||
|
company: authData.company,
|
||||||
|
};
|
||||||
|
|
||||||
|
setUser(userData);
|
||||||
|
|
||||||
|
// Store authentication data in localStorage
|
||||||
|
localStorage.setItem('auth', JSON.stringify(userData));
|
||||||
|
|
||||||
|
// Set default authorization header for future API calls
|
||||||
|
// You might want to do this in your API service instead
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
// Set token for future API calls
|
||||||
|
localStorage.setItem('token', authData.token);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
setUser(null);
|
||||||
|
localStorage.removeItem('auth');
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
|
||||||
|
// Redirect to login page
|
||||||
|
window.location.href = '/login';
|
||||||
|
};
|
||||||
|
|
||||||
|
const value: AuthContextType = {
|
||||||
|
user,
|
||||||
|
isAuthenticated,
|
||||||
|
isLoading,
|
||||||
|
login,
|
||||||
|
logout
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
40
src/contexts/ToastContext.tsx
Normal file
40
src/contexts/ToastContext.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import React, { createContext, useContext, useState, ReactNode } from 'react';
|
||||||
|
import { ToastType, ToastContextType } from '../types/toast';
|
||||||
|
|
||||||
|
export const ToastContext = createContext<ToastContextType>({
|
||||||
|
toasts: [],
|
||||||
|
addToast: () => {},
|
||||||
|
removeToast: () => {},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
|
||||||
|
const [toasts, setToasts] = useState<ToastType[]>([]);
|
||||||
|
|
||||||
|
const addToast = (toast: Omit<ToastType, 'id'>) => {
|
||||||
|
const id = Math.random().toString(36).substr(2, 9);
|
||||||
|
const newToast = { ...toast, id };
|
||||||
|
setToasts(prev => [...prev, newToast]);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
removeToast(id);
|
||||||
|
}, toast.duration || 5000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeToast = (id: string) => {
|
||||||
|
setToasts(prev => prev.filter(toast => toast.id !== id));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ToastContext.Provider value={{ toasts, addToast, removeToast }}>
|
||||||
|
{children}
|
||||||
|
</ToastContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useToast = () => {
|
||||||
|
const context = useContext(ToastContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error('useToast must be used within ToastProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
1
src/contexts/index.ts
Normal file
1
src/contexts/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './ToastContext';
|
||||||
30
src/dto/planningDtos.ts
Normal file
30
src/dto/planningDtos.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
export interface PlanningDto {
|
||||||
|
SelectedSamples: SelectedSampleDto[];
|
||||||
|
SelectedPromos: SelectedPromoDto[];
|
||||||
|
MRPlanDetailId?: string | null;
|
||||||
|
MaxVisit: number;
|
||||||
|
DoctorId: number;
|
||||||
|
PlanDate: string;
|
||||||
|
UserId?: string | null;
|
||||||
|
MRRawPlanId?: string | null;
|
||||||
|
ProductId: number;
|
||||||
|
CallDate: string;
|
||||||
|
IsLiterature: boolean;
|
||||||
|
CycleId: number;
|
||||||
|
SLP?: string | null;
|
||||||
|
IsUpdateDelete: number;
|
||||||
|
MRPlanDate?: string | null;
|
||||||
|
UpdatedBy?: string | null;
|
||||||
|
}
|
||||||
|
export interface SelectedSampleDto {
|
||||||
|
InventoryId: string;
|
||||||
|
Description:string;
|
||||||
|
QtyBalance: number;
|
||||||
|
SelectedQty: number;
|
||||||
|
OriginalQty: number;
|
||||||
|
MaxQty: number;
|
||||||
|
}
|
||||||
|
interface SelectedPromoDto {
|
||||||
|
ProductId: number;
|
||||||
|
ProductName:string;
|
||||||
|
}
|
||||||
18
src/hooks/doctor/useSpecializationApi.ts
Normal file
18
src/hooks/doctor/useSpecializationApi.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { DoctorAPI } from "../../services/doctorApi";
|
||||||
|
import { Specialization } from "../../types/doctor/generic";
|
||||||
|
|
||||||
|
export const useSpecializationApi = () => {
|
||||||
|
const [specializations, setSpecializations] = useState<Specialization[]>([]);
|
||||||
|
|
||||||
|
const fetchSpecializations = async () => {
|
||||||
|
try {
|
||||||
|
const result = await DoctorAPI.getSpecialization();
|
||||||
|
setSpecializations(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching specializations", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { specializations, setSpecializations, fetchSpecializations };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useArea.ts
Normal file
18
src/hooks/generic/useArea.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Areas } from "../../types/doctor/generic";
|
||||||
|
import { AreasAPI } from "../../services/generic/areasApi";
|
||||||
|
|
||||||
|
export const useAreasApi = () => {
|
||||||
|
const [areas, setAreas] = useState<Areas[]>([]);
|
||||||
|
|
||||||
|
const fetchAreas = async () => {
|
||||||
|
try {
|
||||||
|
const result = await AreasAPI.getAll();
|
||||||
|
setAreas(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching Districts", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { areas, setAreas, fetchAreas };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useDepartment.ts
Normal file
18
src/hooks/generic/useDepartment.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Department } from "../../types/doctor/generic";
|
||||||
|
import { DepartmentAPI } from "../../services/generic/departmentApi";
|
||||||
|
|
||||||
|
export const useDepartmentApi = () => {
|
||||||
|
const [department, setDepartment] = useState<Department[]>([]);
|
||||||
|
|
||||||
|
const fetchDepartment = async () => {
|
||||||
|
try {
|
||||||
|
const result = await DepartmentAPI.getAll();
|
||||||
|
setDepartment(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching department", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { department, setDepartment, fetchDepartment };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useDistrict.ts
Normal file
18
src/hooks/generic/useDistrict.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { District } from "../../types/doctor/generic";
|
||||||
|
import { DistrictAPI } from "../../services/generic/districtApi";
|
||||||
|
|
||||||
|
export const useDistrictApi = () => {
|
||||||
|
const [districts, setDistricts] = useState<District[]>([]);
|
||||||
|
|
||||||
|
const fetchDistricts = async () => {
|
||||||
|
try {
|
||||||
|
const result = await DistrictAPI.getAll();
|
||||||
|
setDistricts(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching Districts", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { districts, setDistricts, fetchDistricts };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useDivision.ts
Normal file
18
src/hooks/generic/useDivision.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Division } from "../../types/doctor/generic";
|
||||||
|
import { DivisionAPI } from "../../services/generic/divisionApi";
|
||||||
|
|
||||||
|
export const useDivisionApi = () => {
|
||||||
|
const [divisions, setDivisions] = useState<Division[]>([]);
|
||||||
|
|
||||||
|
const fetchDivisions = async () => {
|
||||||
|
try {
|
||||||
|
const result = await DivisionAPI.getAll();
|
||||||
|
setDivisions(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching Districts", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { divisions, setDivisions, fetchDivisions };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useInstitutionApi.ts
Normal file
18
src/hooks/generic/useInstitutionApi.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Institution } from "../../types/doctor/generic";
|
||||||
|
import { InstitutionAPI } from "../../services/generic/institutionApi";
|
||||||
|
|
||||||
|
export const useInstitutionApi = () => {
|
||||||
|
const [institutions, setInstitutions] = useState<Institution[]>([]);
|
||||||
|
|
||||||
|
const fetchInstitutions = async () => {
|
||||||
|
try {
|
||||||
|
const result = await InstitutionAPI.getAll();
|
||||||
|
setInstitutions(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching institutions", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { institutions, setInstitutions, fetchInstitutions };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useInstitutionCategory.ts
Normal file
18
src/hooks/generic/useInstitutionCategory.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { InstitutionCategory } from "../../types/doctor/generic";
|
||||||
|
import { InstitutionCategoryAPI } from "../../services/generic/institutionCategoryApi";
|
||||||
|
|
||||||
|
export const useInstitutionCategoryApi = () => {
|
||||||
|
const [institutionCategory, setInstitutionCategory] = useState<InstitutionCategory[]>([]);
|
||||||
|
|
||||||
|
const fetchInstitutionCategory = async () => {
|
||||||
|
try {
|
||||||
|
const result = await InstitutionCategoryAPI.getAll();
|
||||||
|
setInstitutionCategory(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching Districts", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { institutionCategory, setInstitutionCategory, fetchInstitutionCategory };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useInventory.ts
Normal file
18
src/hooks/generic/useInventory.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Inventory } from "../../types/doctor/generic";
|
||||||
|
import { InventoryAPI } from "../../services/generic/inventoryApi";
|
||||||
|
|
||||||
|
export const useInventoryApi = () => {
|
||||||
|
const [inventory, setInventory] = useState<Inventory[]>([]);
|
||||||
|
|
||||||
|
const fetchInventory = async () => {
|
||||||
|
try {
|
||||||
|
const result = await InventoryAPI.getAll();
|
||||||
|
setInventory(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching inventory", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { inventory, setInventory, fetchInventory };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useProduct.ts
Normal file
18
src/hooks/generic/useProduct.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Product } from "../../types/doctor/generic";
|
||||||
|
import { ProductAPI } from "../../services/generic/productApi";
|
||||||
|
|
||||||
|
export const useProductApi = () => {
|
||||||
|
const [products, setProducts] = useState<Product[]>([]);
|
||||||
|
|
||||||
|
const fetchProducts = async () => {
|
||||||
|
try {
|
||||||
|
const result = await ProductAPI.getAll();
|
||||||
|
setProducts(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching Districts", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { products, setProducts, fetchProducts };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useTerritoryApi.ts
Normal file
18
src/hooks/generic/useTerritoryApi.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { TerritoryAPI } from "../../services/generic/territoryApi";
|
||||||
|
import { Territories } from "../../types/doctor/generic";
|
||||||
|
|
||||||
|
export const useTerritoryApi = () => {
|
||||||
|
const [territory, setTerritory] = useState<Territories[]>([]);
|
||||||
|
|
||||||
|
const fetchTerritory = async () => {
|
||||||
|
try {
|
||||||
|
const result = await TerritoryAPI.getAll();
|
||||||
|
setTerritory(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching Territories", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { territory, setTerritory, fetchTerritory };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useUserAccountApi.ts
Normal file
18
src/hooks/generic/useUserAccountApi.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { UserAccount } from "../../types/doctor/generic";
|
||||||
|
import { UserAccountAPI } from "../../services/generic/userAccountApi";
|
||||||
|
|
||||||
|
export const useUserAccountApi = () => {
|
||||||
|
const [userAccounts, setUserAccounts] = useState<UserAccount[]>([]);
|
||||||
|
|
||||||
|
const fetchUserAccounts = async () => {
|
||||||
|
try {
|
||||||
|
const result = await UserAccountAPI.getAll();
|
||||||
|
setUserAccounts(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching UserAccount", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { userAccounts, setUserAccounts, fetchUserAccounts };
|
||||||
|
};
|
||||||
18
src/hooks/generic/useUserRole.ts
Normal file
18
src/hooks/generic/useUserRole.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { UserRoles } from "../../types/doctor/generic";
|
||||||
|
import { UserRoleAPI } from "../../services/generic/userRoleApi";
|
||||||
|
|
||||||
|
export const useUserRoleApi = () => {
|
||||||
|
const [userRole, setUserRole] = useState<UserRoles[]>([]);
|
||||||
|
|
||||||
|
const fetchUserRole = async () => {
|
||||||
|
try {
|
||||||
|
const result = await UserRoleAPI.getAll();
|
||||||
|
setUserRole(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching userRole", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { userRole, setUserRole, fetchUserRole };
|
||||||
|
};
|
||||||
1
src/hooks/index.ts
Normal file
1
src/hooks/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './useApi';
|
||||||
18
src/hooks/reports/useCallRateApi.ts
Normal file
18
src/hooks/reports/useCallRateApi.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Institution } from "../../types/doctor/generic";
|
||||||
|
import { InstitutionAPI } from "../../services/generic/institutionApi";
|
||||||
|
|
||||||
|
export const useInstitutionApi = () => {
|
||||||
|
const [institutions, setInstitutions] = useState<Institution[]>([]);
|
||||||
|
|
||||||
|
const fetchInstitutions = async () => {
|
||||||
|
try {
|
||||||
|
const result = await InstitutionAPI.getAll();
|
||||||
|
setInstitutions(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching institutions", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { institutions, setInstitutions, fetchInstitutions };
|
||||||
|
};
|
||||||
33
src/hooks/useApi.ts
Normal file
33
src/hooks/useApi.ts
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import { useToast } from '../contexts/ToastContext';
|
||||||
|
|
||||||
|
export const useApi = () => {
|
||||||
|
const { addToast } = useToast();
|
||||||
|
|
||||||
|
const apiCall = async <T>(
|
||||||
|
apiFunction: () => Promise<T>,
|
||||||
|
successMessage?: string,
|
||||||
|
errorMessage?: string
|
||||||
|
): Promise<T | null> => {
|
||||||
|
try {
|
||||||
|
const result = await apiFunction();
|
||||||
|
if (successMessage) {
|
||||||
|
addToast({
|
||||||
|
type: 'success',
|
||||||
|
title: 'Success',
|
||||||
|
message: successMessage
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
} catch (error) {
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
message: errorMessage || 'An error occurred'
|
||||||
|
});
|
||||||
|
console.error('API Error:', error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { apiCall };
|
||||||
|
};
|
||||||
18
src/hooks/useAppointment.ts
Normal file
18
src/hooks/useAppointment.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { District } from "../types/doctor/generic";
|
||||||
|
import { DistrictAPI } from "../services/generic/districtApi";
|
||||||
|
|
||||||
|
export const useAppointmentApi = () => {
|
||||||
|
const [appointments, setDistricts] = useState<District[]>([]);
|
||||||
|
|
||||||
|
const fetchAppointments = async () => {
|
||||||
|
try {
|
||||||
|
const result = await DistrictAPI.getAll();
|
||||||
|
setDistricts(result);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching Districts", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { appointments, fetchAppointments };
|
||||||
|
};
|
||||||
13
src/hooks/useAuth.ts
Normal file
13
src/hooks/useAuth.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
import { useContext } from 'react';
|
||||||
|
import { AuthContext } from '../contexts/AuthContext';
|
||||||
|
|
||||||
|
export const useAuth = () => {
|
||||||
|
const context = useContext(AuthContext);
|
||||||
|
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useAuth must be used within an AuthProvider');
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
};
|
||||||
39
src/hooks/useNavigation.ts
Normal file
39
src/hooks/useNavigation.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { navigationService } from '../services/navigationService';
|
||||||
|
import { NavigationItem } from '../types/navigation';
|
||||||
|
|
||||||
|
export const useNavigation = () => {
|
||||||
|
const [navigationItems, setNavigationItems] = useState<NavigationItem[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchNavigation = async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const response = await navigationService.getUserNavigation();
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
setNavigationItems(response.data);
|
||||||
|
} else {
|
||||||
|
setError(response.message || 'Failed to load navigation');
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
setError(err.response?.data?.message || 'Error loading navigation');
|
||||||
|
console.error('Navigation fetch error:', err);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchNavigation();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const refetchNavigation = async () => {
|
||||||
|
await refetchNavigation();
|
||||||
|
};
|
||||||
|
|
||||||
|
return { navigationItems, isLoading, error, refetchNavigation };
|
||||||
|
};
|
||||||
11
src/hooks/useToast.ts
Normal file
11
src/hooks/useToast.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import { ToastContext } from '../contexts/ToastContext';
|
||||||
|
|
||||||
|
export const useToast = () => {
|
||||||
|
const context = useContext(ToastContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useToast must be used within a ToastProvider');
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
};
|
||||||
48
src/index.css
Normal file
48
src/index.css
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
@import 'tailwindcss/base';
|
||||||
|
@import 'tailwindcss/components';
|
||||||
|
@import 'tailwindcss/utilities';
|
||||||
|
|
||||||
|
/* Import Google Fonts */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||||
|
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f5f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #cbd5e1;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth transitions for all elements */
|
||||||
|
* {
|
||||||
|
transition-property:
|
||||||
|
color, background-color, border-color, text-decoration-color, fill, stroke,
|
||||||
|
opacity, box-shadow, transform, filter, backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom component styles */
|
||||||
|
.glass {
|
||||||
|
background: rgba(255, 255, 255, 0.25);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-bg {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.teal-gradient {
|
||||||
|
background: linear-gradient(135deg, #0d9488 0%, #134e4a 100%);
|
||||||
|
}
|
||||||
18
src/main.tsx
Normal file
18
src/main.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App.tsx';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
// Import your existing contexts
|
||||||
|
import { ToastProvider } from './contexts/ToastContext';
|
||||||
|
import { AuthProvider } from './contexts/AuthContext';
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<ToastProvider>
|
||||||
|
<AuthProvider>
|
||||||
|
<App />
|
||||||
|
</AuthProvider>
|
||||||
|
</ToastProvider>
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
161
src/pages/Dashboard.tsx
Normal file
161
src/pages/Dashboard.tsx
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Users,
|
||||||
|
User,
|
||||||
|
Calendar,
|
||||||
|
TrendingUp,
|
||||||
|
Activity,
|
||||||
|
Clock,
|
||||||
|
UserPlus,
|
||||||
|
FileText,
|
||||||
|
Award
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { useToast } from '../contexts/ToastContext';
|
||||||
|
import { Button } from '../components/ui';
|
||||||
|
|
||||||
|
export const DashboardPage: React.FC = () => {
|
||||||
|
const { addToast } = useToast();
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ title: 'Total Doctors', value: '48', change: '+12%', color: 'teal', icon: Users },
|
||||||
|
{ title: 'Appointments Today', value: '253', change: '+15%', color: 'green', icon: Calendar },
|
||||||
|
{ title: 'Reschedule', value: '255543', change: '+8%', color: 'blue', icon: User },
|
||||||
|
{ title: 'Missed call', value: '$45,291', change: '+5%', color: 'purple', icon: TrendingUp }
|
||||||
|
];
|
||||||
|
|
||||||
|
const recentActivities = [
|
||||||
|
{ id: 1, action: 'New patient registered', user: 'Sarah Johnson', time: '2 minutes ago', type: 'user' },
|
||||||
|
{ id: 2, action: 'Appointment scheduled', user: 'Dr. Smith', time: '15 minutes ago', type: 'calendar' },
|
||||||
|
{ id: 3, action: 'Lab report uploaded', user: 'Lab Tech Mike', time: '1 hour ago', type: 'file' },
|
||||||
|
{ id: 4, action: 'New doctor added', user: 'HR Manager', time: '2 hours ago', type: 'user-plus' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const upcomingAppointments = [
|
||||||
|
{ id: 1, patient: 'John Doe', doctor: 'Dr. Smith', time: '09:00 AM', status: 'confirmed' },
|
||||||
|
{ id: 2, patient: 'Jane Smith', doctor: 'Dr. Johnson', time: '10:30 AM', status: 'pending' },
|
||||||
|
{ id: 3, patient: 'Mike Brown', doctor: 'Dr. Wilson', time: '02:00 PM', status: 'confirmed' },
|
||||||
|
{ id: 4, patient: 'Lisa Davis', doctor: 'Dr. Smith', time: '03:30 PM', status: 'confirmed' },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Stats Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{stats.map((stat, index) => {
|
||||||
|
const Icon = stat.icon;
|
||||||
|
return (
|
||||||
|
<div key={index} className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all duration-200">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className={`w-12 h-12 bg-${stat.color}-100 rounded-lg flex items-center justify-center`}>
|
||||||
|
<Icon className={`w-6 h-6 text-${stat.color}-600`} />
|
||||||
|
</div>
|
||||||
|
<span className={`text-sm font-medium text-${stat.color}-600 bg-${stat.color}-50 px-2 py-1 rounded-full`}>
|
||||||
|
{stat.change}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-sm font-medium text-gray-500 mb-1">{stat.title}</h3>
|
||||||
|
<p className="text-2xl font-bold text-gray-900">{stat.value}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
{/* Recent Activities */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">Recent Activities</h3>
|
||||||
|
<Activity className="w-5 h-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{recentActivities.map((activity) => (
|
||||||
|
<div key={activity.id} className="flex items-start space-x-3">
|
||||||
|
<div className="w-8 h-8 bg-teal-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<Clock className="w-4 h-4 text-teal-600" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-medium text-gray-900">{activity.action}</p>
|
||||||
|
<p className="text-sm text-gray-500">by {activity.user}</p>
|
||||||
|
<p className="text-xs text-gray-400">{activity.time}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button className="w-full mt-4 text-sm text-teal-600 hover:text-teal-700 font-medium">
|
||||||
|
View All Activities
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Upcoming Appointments */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">Today's Appointments</h3>
|
||||||
|
<Calendar className="w-5 h-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{upcomingAppointments.map((appointment) => (
|
||||||
|
<div key={appointment.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-900">{appointment.patient}</p>
|
||||||
|
<p className="text-xs text-gray-500">{appointment.doctor}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-sm font-medium text-gray-900">{appointment.time}</p>
|
||||||
|
<span className={`text-xs px-2 py-1 rounded-full ${
|
||||||
|
appointment.status === 'confirmed'
|
||||||
|
? 'bg-green-100 text-green-800'
|
||||||
|
: 'bg-yellow-100 text-yellow-800'
|
||||||
|
}`}>
|
||||||
|
{appointment.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<button className="w-full mt-4 text-sm text-teal-600 hover:text-teal-700 font-medium">
|
||||||
|
View All Appointments
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-6">Quick Actions</h3>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => addToast({ type: 'info', title: 'Feature Coming Soon!', message: 'This feature will be available soon.' })}
|
||||||
|
className="flex flex-col items-center p-6 h-auto"
|
||||||
|
>
|
||||||
|
<UserPlus className="w-8 h-8 mb-2" />
|
||||||
|
<span>Add Patient</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => addToast({ type: 'info', title: 'Feature Coming Soon!', message: 'This feature will be available soon.' })}
|
||||||
|
className="flex flex-col items-center p-6 h-auto"
|
||||||
|
>
|
||||||
|
<Calendar className="w-8 h-8 mb-2" />
|
||||||
|
<span>Schedule</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => addToast({ type: 'info', title: 'Feature Coming Soon!', message: 'This feature will be available soon.' })}
|
||||||
|
className="flex flex-col items-center p-6 h-auto"
|
||||||
|
>
|
||||||
|
<FileText className="w-8 h-8 mb-2" />
|
||||||
|
<span>Reports</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => addToast({ type: 'info', title: 'Feature Coming Soon!', message: 'This feature will be available soon.' })}
|
||||||
|
className="flex flex-col items-center p-6 h-auto"
|
||||||
|
>
|
||||||
|
<Award className="w-8 h-8 mb-2" />
|
||||||
|
<span>Awards</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
115
src/pages/SettingsPage.tsx
Normal file
115
src/pages/SettingsPage.tsx
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { InstitutionTab } from './tabs/InstitutionTab';
|
||||||
|
import { DistrictTab } from './tabs/DistrictTab';
|
||||||
|
import { ProductTab } from './tabs/ProductTab';
|
||||||
|
import { DivisionTab } from './tabs/DivisionTab';
|
||||||
|
import { AreaTab } from './tabs/AreaTab';
|
||||||
|
import { TerritoryTab } from './tabs/TerritoryTab';
|
||||||
|
import { InstitutionCategoryTab } from './tabs/InstitutionCategoryTab';
|
||||||
|
import { UserAccountTab } from './tabs/UserAccountTab';
|
||||||
|
import { DepartmentTab } from './tabs/DepartmentTab';
|
||||||
|
import { ApiHelpers } from '../utils/apiHelpers';
|
||||||
|
import { InventoryTab } from './tabs/InventoryTab';
|
||||||
|
|
||||||
|
interface SettingsPageProps {
|
||||||
|
user: any;
|
||||||
|
onLogout: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
type TabType =
|
||||||
|
| 'account'
|
||||||
|
| 'inventory'
|
||||||
|
| 'department'
|
||||||
|
| 'institutions'
|
||||||
|
| 'districts'
|
||||||
|
| 'divisions'
|
||||||
|
| 'products'
|
||||||
|
| 'areas'
|
||||||
|
| 'territories'
|
||||||
|
| 'institutionCategory';
|
||||||
|
|
||||||
|
export const SettingsPage: React.FC<SettingsPageProps> = () => {
|
||||||
|
const userRole = (ApiHelpers.getUserRole() || 'MEDREP').toUpperCase();
|
||||||
|
|
||||||
|
const allTabs = [
|
||||||
|
{ id: 'institutionCategory' as TabType, label: 'Category', icon: '🗂️' },
|
||||||
|
{ id: 'institutions' as TabType, label: 'Institutions', icon: '🏫' },
|
||||||
|
{ id: 'districts' as TabType, label: 'Districts', icon: '📍' },
|
||||||
|
{ id: 'divisions' as TabType, label: 'Divisions', icon: '🏢' },
|
||||||
|
{ id: 'areas' as TabType, label: 'Areas', icon: '📌' },
|
||||||
|
{ id: 'territories' as TabType, label: 'Territory', icon: '🌐' },
|
||||||
|
{ id: 'products' as TabType, label: 'Products', icon: '📦' },
|
||||||
|
{ id: 'department' as TabType, label: 'Department', icon: '🧑' },
|
||||||
|
{ id: 'inventory' as TabType, label: 'Inventory', icon: '📦' },
|
||||||
|
{ id: 'account' as TabType, label: 'Account', icon: '👤' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const visibleTabs = allTabs.filter(
|
||||||
|
(tab) =>
|
||||||
|
tab.id !== 'account' ||
|
||||||
|
['ADMIN', 'NSM', 'DSM'].includes(userRole)
|
||||||
|
);
|
||||||
|
|
||||||
|
const [activeTab, setActiveTab] = useState<TabType>(
|
||||||
|
visibleTabs[0]?.id || 'institutionCategory'
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderTabContent = () => {
|
||||||
|
switch (activeTab) {
|
||||||
|
case 'account':
|
||||||
|
if (['ADMIN', 'NSM', 'DSM'].includes(userRole)) {
|
||||||
|
return <UserAccountTab />;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
case 'inventory':
|
||||||
|
return <InventoryTab />;
|
||||||
|
case 'department':
|
||||||
|
return <DepartmentTab />;
|
||||||
|
case 'institutionCategory':
|
||||||
|
return <InstitutionCategoryTab />;
|
||||||
|
case 'institutions':
|
||||||
|
return <InstitutionTab />;
|
||||||
|
case 'districts':
|
||||||
|
return <DistrictTab />;
|
||||||
|
case 'divisions':
|
||||||
|
return <DivisionTab />;
|
||||||
|
case 'products':
|
||||||
|
return <ProductTab />;
|
||||||
|
case 'areas':
|
||||||
|
return <AreaTab />;
|
||||||
|
case 'territories':
|
||||||
|
return <TerritoryTab />;
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-100">
|
||||||
|
{/* Tab Navigation */}
|
||||||
|
<div className="border-b border-gray-200">
|
||||||
|
<nav className="flex overflow-x-auto">
|
||||||
|
{visibleTabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id)}
|
||||||
|
className={`flex items-center px-6 py-4 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${
|
||||||
|
activeTab === tab.id
|
||||||
|
? 'border-blue-500 text-blue-600'
|
||||||
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="mr-2">{tab.icon}</span>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Content */}
|
||||||
|
<div className="p-6">{renderTabContent()}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
1889
src/pages/appointment/AppointmentManagement.tsx
Normal file
1889
src/pages/appointment/AppointmentManagement.tsx
Normal file
File diff suppressed because it is too large
Load Diff
388
src/pages/doctor/DoctorManagement.tsx
Normal file
388
src/pages/doctor/DoctorManagement.tsx
Normal file
@ -0,0 +1,388 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Plus, Search, Download, User} from 'lucide-react';
|
||||||
|
import { Doctor } from '../../types/doctor/doctor';
|
||||||
|
import { DoctorAPI } from '../../services/doctorApi';
|
||||||
|
import { useToast } from '../../contexts/ToastContext';
|
||||||
|
import { useApi } from '../../hooks/useApi';
|
||||||
|
import { Button, Modal, ConfirmModal, ToastContainer, LoadingSpinner } from '../../components/ui';
|
||||||
|
import { DoctorForm, DoctorCard, DoctorDetailView } from '../../components/doctor';
|
||||||
|
|
||||||
|
export const DoctorManagement: React.FC = () => {
|
||||||
|
const [doctors, setDoctors] = useState<Doctor[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [filterStatus, setFilterStatus] = useState('all');
|
||||||
|
const [sortBy, setSortBy] = useState('name');
|
||||||
|
const [selectedMedRep, setSelectedMedRep] = useState('all');
|
||||||
|
|
||||||
|
// Modal states
|
||||||
|
const [showAddModal, setShowAddModal] = useState(false);
|
||||||
|
const [showEditModal, setShowEditModal] = useState(false);
|
||||||
|
const [showViewModal, setShowViewModal] = useState(false);
|
||||||
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
|
|
||||||
|
const [selectedDoctor, setSelectedDoctor] = useState<Doctor | null>(null);
|
||||||
|
const [formLoading, setFormLoading] = useState(false);
|
||||||
|
|
||||||
|
const { addToast } = useToast();
|
||||||
|
const { apiCall } = useApi();
|
||||||
|
|
||||||
|
// Load doctors on component mount
|
||||||
|
useEffect(() => {
|
||||||
|
loadDoctors();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadDoctors = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const data = await DoctorAPI.getAll();
|
||||||
|
// console.log('data',data);
|
||||||
|
setDoctors(data);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
message: 'Failed to load doctors'
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Filter and sort doctors
|
||||||
|
const filteredDoctors = doctors
|
||||||
|
.filter((doctor) => {
|
||||||
|
const matchesSearch = `${doctor.firstName ?? ''} ${doctor.lastName ?? ''} ${doctor.emailAddress ?? ''}`
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(searchTerm.toLowerCase());
|
||||||
|
|
||||||
|
const matchesStatus =
|
||||||
|
filterStatus === 'all' || doctor.status.toString() === filterStatus;
|
||||||
|
|
||||||
|
const matchesMedRep =
|
||||||
|
selectedMedRep === 'all' || doctor.medRepName === selectedMedRep;
|
||||||
|
|
||||||
|
return matchesSearch && matchesStatus && matchesMedRep;
|
||||||
|
})
|
||||||
|
.sort((a, b) => {
|
||||||
|
switch (sortBy) {
|
||||||
|
case 'name':
|
||||||
|
return `${a.firstName ?? ''} ${a.lastName ?? ''}`.localeCompare(
|
||||||
|
`${b.firstName ?? ''} ${b.lastName ?? ''}`
|
||||||
|
);
|
||||||
|
|
||||||
|
case 'medRepName':
|
||||||
|
return (a.medRepName ?? '').localeCompare(b.medRepName ?? '');
|
||||||
|
|
||||||
|
default:
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// CRUD Operations
|
||||||
|
const handleAddDoctor = async (doctorData: Omit<Doctor, 'doctorId'>) => {
|
||||||
|
try {
|
||||||
|
setFormLoading(true);
|
||||||
|
const newDoctor = await DoctorAPI.create(doctorData);
|
||||||
|
setDoctors(prev => [...prev, newDoctor]);
|
||||||
|
setShowAddModal(false);
|
||||||
|
await loadDoctors();
|
||||||
|
addToast({
|
||||||
|
type: 'success',
|
||||||
|
title: 'Success',
|
||||||
|
message: `Dr. ${doctorData.firstName} ${doctorData.lastName} has been added successfully`
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
message: 'Failed to add doctor'
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setFormLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateDoctor = async (doctorData: Omit<Doctor, 'doctorId'>) => {
|
||||||
|
if (!selectedDoctor) return;
|
||||||
|
|
||||||
|
setFormLoading(true);
|
||||||
|
console.log('update',doctorData.status);
|
||||||
|
const updatedDoctor = await apiCall(
|
||||||
|
() => DoctorAPI.update(selectedDoctor.doctorId, doctorData),
|
||||||
|
`Dr. ${doctorData.firstName} ${doctorData.lastName} has been updated successfully`,
|
||||||
|
'Failed to update doctor'
|
||||||
|
);
|
||||||
|
|
||||||
|
if (updatedDoctor) {
|
||||||
|
await loadDoctors();
|
||||||
|
setShowEditModal(false);
|
||||||
|
setSelectedDoctor(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFormLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteDoctor = async () => {
|
||||||
|
if (!selectedDoctor) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await DoctorAPI.delete(selectedDoctor.doctorId);
|
||||||
|
setDoctors(prev => prev.filter(doc => doc.doctorId !== selectedDoctor.doctorId));
|
||||||
|
setSelectedDoctor(null);
|
||||||
|
addToast({
|
||||||
|
type: 'success',
|
||||||
|
title: 'Success',
|
||||||
|
message: `Dr. ${selectedDoctor.firstName} ${selectedDoctor.lastName} has been deleted successfully`
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'Error',
|
||||||
|
message: 'Failed to delete doctor'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Action handlers
|
||||||
|
const handleView = (doctor: Doctor) => {
|
||||||
|
setSelectedDoctor(doctor);
|
||||||
|
setShowViewModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (doctor: Doctor) => {
|
||||||
|
setSelectedDoctor(doctor);
|
||||||
|
setShowEditModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (doctor: Doctor) => {
|
||||||
|
setSelectedDoctor(doctor);
|
||||||
|
setShowDeleteModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const exportToCSV = () => {
|
||||||
|
const csvContent = [
|
||||||
|
['First Name', 'Last Name', 'Email', 'Phone', 'Specialization', 'License', 'Status'].join(','),
|
||||||
|
...filteredDoctors.map(doctor => [
|
||||||
|
doctor.firstName,
|
||||||
|
doctor.lastName,
|
||||||
|
doctor.emailAddress,
|
||||||
|
doctor.phoneNo,
|
||||||
|
doctor.specializationId,
|
||||||
|
doctor.licenseNo,
|
||||||
|
doctor.status
|
||||||
|
].join(','))
|
||||||
|
].join('\n');
|
||||||
|
|
||||||
|
const blob = new Blob([csvContent], { type: 'text/csv' });
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = 'doctors.csv';
|
||||||
|
a.click();
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
|
||||||
|
addToast({
|
||||||
|
type: 'success',
|
||||||
|
title: 'Export Successful',
|
||||||
|
message: 'Doctors data exported to CSV file'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const medRepOptions = [
|
||||||
|
...new Set(doctors.map(d => d.medRepName).filter(Boolean))
|
||||||
|
];
|
||||||
|
if (loading) {
|
||||||
|
return <LoadingSpinner message="Loading please wait..." />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-white shadow-sm border-b">
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Doctor Management</h1>
|
||||||
|
<p className="text-gray-600">Manage your medical staff efficiently</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={() => setShowAddModal(true)}>
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Add New Doctor
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters and Search */}
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-6">
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0 lg:space-x-4">
|
||||||
|
<div className="flex-1 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search doctors..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={filterStatus}
|
||||||
|
onChange={(e) => setFilterStatus(e.target.value)}
|
||||||
|
className="px-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="all">All Status</option>
|
||||||
|
<option value="0">Denied</option>
|
||||||
|
<option value="1">For DSM Approval</option>
|
||||||
|
<option value="2">For NSM Approval</option>
|
||||||
|
<option value="3">Approved</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={sortBy}
|
||||||
|
onChange={(e) => setSortBy(e.target.value)}
|
||||||
|
className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="name">Sort by Name</option>
|
||||||
|
<option value="specializationId">Sort by Specialization</option>
|
||||||
|
{/* <option value="hireDate">Sort by Hire Date</option>*/}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={selectedMedRep}
|
||||||
|
onChange={(e) => setSelectedMedRep(e.target.value)}
|
||||||
|
className="px-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="all">All MedReps</option>
|
||||||
|
|
||||||
|
{medRepOptions.map((rep) => (
|
||||||
|
<option key={rep} value={rep}>
|
||||||
|
{rep}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={exportToCSV}>
|
||||||
|
<Download className="w-4 h-4 mr-2" />
|
||||||
|
Export CSV
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Results Summary */}
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Showing {filteredDoctors.length} of {doctors.length} doctors
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Doctors Grid/List */}
|
||||||
|
{filteredDoctors.length === 0 ? (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center">
|
||||||
|
<User className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">No doctors found</h3>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
{searchTerm || filterStatus !== 'all'
|
||||||
|
? 'Try adjusting your search or filter criteria.'
|
||||||
|
: 'Get started by adding your first doctor.'}
|
||||||
|
</p>
|
||||||
|
{!searchTerm && filterStatus === 'all' && (
|
||||||
|
<Button onClick={() => setShowAddModal(true)}>
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Add First Doctor
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{filteredDoctors.map((doctor, index) => (
|
||||||
|
<DoctorCard
|
||||||
|
key={`doctor-${doctor.doctorId}-${index}`}
|
||||||
|
doctor={doctor}
|
||||||
|
onView={() => handleView(doctor)}
|
||||||
|
onEdit={() => handleEdit(doctor)}
|
||||||
|
onDelete={() => handleDelete(doctor)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modals */}
|
||||||
|
<Modal
|
||||||
|
isOpen={showAddModal}
|
||||||
|
static={true}
|
||||||
|
onClose={() => setShowAddModal(false)}
|
||||||
|
title="Add New Doctor"
|
||||||
|
size="xl"
|
||||||
|
>
|
||||||
|
<DoctorForm
|
||||||
|
onSubmit={handleAddDoctor}
|
||||||
|
onCancel={() => setShowAddModal(false)}
|
||||||
|
isLoading={formLoading}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
isOpen={showEditModal}
|
||||||
|
static={true}
|
||||||
|
onClose={() => {
|
||||||
|
setShowEditModal(false);
|
||||||
|
setSelectedDoctor(null);
|
||||||
|
}}
|
||||||
|
title="Edit Doctor"
|
||||||
|
size="xl"
|
||||||
|
>
|
||||||
|
{selectedDoctor && (
|
||||||
|
<DoctorForm
|
||||||
|
doctor={selectedDoctor}
|
||||||
|
onSubmit={handleUpdateDoctor}
|
||||||
|
onCancel={() => {
|
||||||
|
setShowEditModal(false);
|
||||||
|
setSelectedDoctor(null);
|
||||||
|
}}
|
||||||
|
isLoading={formLoading}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
isOpen={showViewModal}
|
||||||
|
static={true}
|
||||||
|
onClose={() => {
|
||||||
|
setShowViewModal(false);
|
||||||
|
setSelectedDoctor(null);
|
||||||
|
}}
|
||||||
|
title="Doctor Details"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
{selectedDoctor && <DoctorDetailView doctor={selectedDoctor} />}
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<ConfirmModal
|
||||||
|
isOpen={showDeleteModal}
|
||||||
|
onClose={() => {
|
||||||
|
setShowDeleteModal(false);
|
||||||
|
setSelectedDoctor(null);
|
||||||
|
}}
|
||||||
|
onConfirm={handleDeleteDoctor}
|
||||||
|
title="Delete Doctor"
|
||||||
|
message={`Are you sure you want to delete Dr. ${selectedDoctor?.firstName} ${selectedDoctor?.lastName}? This action cannot be undone.`}
|
||||||
|
type="danger"
|
||||||
|
confirmText="Delete"
|
||||||
|
cancelText="Cancel"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ToastContainer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
7
src/pages/doctor/Patients.tsx
Normal file
7
src/pages/doctor/Patients.tsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { User } from 'lucide-react';
|
||||||
|
import { ComingSoon } from '../../components/common';
|
||||||
|
|
||||||
|
export const PatientsPage: React.FC = () => {
|
||||||
|
return <ComingSoon title="Patient Management" icon={User} />;
|
||||||
|
};
|
||||||
9
src/pages/doctor/index.ts
Normal file
9
src/pages/doctor/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// src/pages/index.ts
|
||||||
|
export * from '../Dashboard';
|
||||||
|
export * from './DoctorManagement';
|
||||||
|
export * from './Patients';
|
||||||
|
export * from '../appointment/AppointmentManagement';
|
||||||
|
|
||||||
|
// Add these new components
|
||||||
|
export { DashboardOverview } from '../../components/dashboard/DashboardOverview';
|
||||||
|
export { SettingsPage } from '../../pages/SettingsPage';
|
||||||
160
src/pages/tabReports/ActualCoverageTab.tsx
Normal file
160
src/pages/tabReports/ActualCoverageTab.tsx
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { ReportsTab } from '../../components/reports/ReportsTab';
|
||||||
|
import { ActualCoverageAPI } from '../../services/reports/actualCoverageApi';
|
||||||
|
import { ActualCoverage } from '@/types/reports/reports';
|
||||||
|
import { formatDateTime } from '../../utils/formatDateTime';
|
||||||
|
import { Modal } from '../../components/ui';
|
||||||
|
|
||||||
|
export const ActualCoverageTab: React.FC = () => {
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [signatureModal, setSignatureModal] = useState<{ isOpen: boolean; url: string | undefined }>({
|
||||||
|
isOpen: false,
|
||||||
|
url: undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await Promise.all([]);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-4">Loading ...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
|
||||||
|
<><Modal
|
||||||
|
isOpen={signatureModal.isOpen}
|
||||||
|
onClose={() => setSignatureModal({ isOpen: false, url: undefined })}
|
||||||
|
title="Doctor Signature"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<img
|
||||||
|
src={signatureModal.url}
|
||||||
|
alt="Doctor Signature"
|
||||||
|
className="max-w-full max-h-64 object-contain"
|
||||||
|
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; } } />
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<ReportsTab<ActualCoverage, string>
|
||||||
|
title="Actual Coverage Report"
|
||||||
|
idField="mrRawPlanId"
|
||||||
|
showAddButton={false}
|
||||||
|
enableSearch={true}
|
||||||
|
searchPlaceholder="Search by name..."
|
||||||
|
showCheckbox={false}
|
||||||
|
showActions={false}
|
||||||
|
showPeriodSelector={true}
|
||||||
|
onPeriodChange={(period: any, startDate: any, endDate: any) => {
|
||||||
|
console.log('Period changed:', { period, startDate, endDate });
|
||||||
|
} }
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: 'medRepName',
|
||||||
|
label: 'MRName',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'doctorName',
|
||||||
|
label: 'DoctorName',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'territoryName',
|
||||||
|
label: 'Territory',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'company',
|
||||||
|
label: 'Company',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'callDate',
|
||||||
|
label: 'Call_Date',
|
||||||
|
searchable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'actualCallDate',
|
||||||
|
label: 'Actual_Call_Date',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'startTime',
|
||||||
|
label: 'start_Time',
|
||||||
|
searchable: true,
|
||||||
|
render: (value) => formatDateTime(value)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'endTime',
|
||||||
|
label: 'end_Time',
|
||||||
|
searchable: false,
|
||||||
|
render: (value) => formatDateTime(value)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isCatchUpCall',
|
||||||
|
label: 'Catch-Up Call',
|
||||||
|
filterable: true,
|
||||||
|
searchable: true,
|
||||||
|
render: (value) => (value ? 'Yes' : 'No'),
|
||||||
|
getFilterValue: (item) => (item.isCatchUpCall ? 'Yes' : 'No'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'missedReason',
|
||||||
|
label: 'missed_Reason',
|
||||||
|
searchable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'approvedBy',
|
||||||
|
label: 'approved_By',
|
||||||
|
searchable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'approvedDate',
|
||||||
|
label: 'approved_Date',
|
||||||
|
searchable: false,
|
||||||
|
render: (value) => formatDateTime(value)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'signatureFileName',
|
||||||
|
label: 'signature',
|
||||||
|
render: (value) => value ? (
|
||||||
|
<button
|
||||||
|
onClick={() => setSignatureModal({ isOpen: true, url: ActualCoverageAPI.getFileUrl(value) })}
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
View Signature
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-400">No Signature</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'location',
|
||||||
|
label: 'location',
|
||||||
|
searchable: false
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
api={{
|
||||||
|
getAll: (params) => ActualCoverageAPI.getAll(params),
|
||||||
|
update: (id: string, data: Partial<ActualCoverage>) => ActualCoverageAPI.update(id, data),
|
||||||
|
create: async () => {
|
||||||
|
throw new Error('Delete operation is not supported for Catch-up Calls');
|
||||||
|
},
|
||||||
|
delete: async (_id: string) => {
|
||||||
|
throw new Error('Delete operation is not supported for Catch-up Calls');
|
||||||
|
},
|
||||||
|
}} formFields={[]} /></>
|
||||||
|
);
|
||||||
|
};
|
||||||
125
src/pages/tabReports/AttendanceTab.tsx
Normal file
125
src/pages/tabReports/AttendanceTab.tsx
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { ReportsTab } from '../../components/reports/ReportsTab';
|
||||||
|
import { AttendanceAPI } from '../../services/reports/attendanceApi';
|
||||||
|
import { Attendance } from '@/types/reports/attendance';
|
||||||
|
import { formatDateTime } from '../../utils/formatDateTime';
|
||||||
|
import { Modal } from '../../components/ui';
|
||||||
|
|
||||||
|
export const AttendanceTab: React.FC = () => {
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [signatureModal, setSignatureModal] = useState<{ isOpen: boolean; url: string | undefined }>({
|
||||||
|
isOpen: false,
|
||||||
|
url: undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await Promise.all([]);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-4">Loading ...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<><Modal
|
||||||
|
isOpen={signatureModal.isOpen}
|
||||||
|
onClose={() => setSignatureModal({ isOpen: false, url: undefined })}
|
||||||
|
title="Time Logs"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<img
|
||||||
|
src={signatureModal.url}
|
||||||
|
alt="Time In & Out Photo"
|
||||||
|
className="max-w-full max-h-64 object-contain"
|
||||||
|
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; } } />
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<ReportsTab<Attendance, number>
|
||||||
|
title="Attendance Report"
|
||||||
|
idField="attendanceId"
|
||||||
|
showAddButton={false}
|
||||||
|
enableSearch={true}
|
||||||
|
searchPlaceholder="Search by name..."
|
||||||
|
showCheckbox={false}
|
||||||
|
showActions={false}
|
||||||
|
showPeriodSelector={true}
|
||||||
|
onPeriodChange={(period: any, startDate: any, endDate: any) => {
|
||||||
|
console.log('Period changed:', { period, startDate, endDate });
|
||||||
|
} }
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: 'medRepName',
|
||||||
|
label: 'MRName',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'timeIn',
|
||||||
|
label: 'TimeIn',
|
||||||
|
searchable: true,
|
||||||
|
render: (value) => formatDateTime(value)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'timeOut',
|
||||||
|
label: 'TimeOut',
|
||||||
|
searchable: false,
|
||||||
|
render: (value) => formatDateTime(value)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'timeInLocation',
|
||||||
|
label: 'Time_In_Loc',
|
||||||
|
searchable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'timeOutLocation',
|
||||||
|
label: 'Time_Out_Loc',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'signatureFileNameIn',
|
||||||
|
label: 'in_photo',
|
||||||
|
render: (value) => value ? (
|
||||||
|
<button
|
||||||
|
onClick={() => setSignatureModal({ isOpen: true, url: AttendanceAPI.getFileUrl(value) })}
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
View Time In Photo
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-400">No Time In Photo</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'signatureFileNameOut',
|
||||||
|
label: 'out_photo',
|
||||||
|
render: (value) => value ? (
|
||||||
|
<button
|
||||||
|
onClick={() => setSignatureModal({ isOpen: true, url: AttendanceAPI.getFileUrl(value) })}
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
View Time Out Photo
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-400">No Time Out Photo</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'medRepName',
|
||||||
|
label: 'MedRepName Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={AttendanceAPI} /></>
|
||||||
|
);
|
||||||
|
};
|
||||||
86
src/pages/tabReports/CallRateTab.tsx
Normal file
86
src/pages/tabReports/CallRateTab.tsx
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { ReportsTab } from '../../components/reports/ReportsTab';
|
||||||
|
import { CallRateAPI } from '../../services/reports/callRateApi';
|
||||||
|
import { CallRate } from '../../types/reports/reports';
|
||||||
|
|
||||||
|
export const CallRateTab: React.FC = () => {
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await Promise.all([]);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-4">Loading options...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ReportsTab<CallRate, number>
|
||||||
|
title="Call Rate Report"
|
||||||
|
idField="mrUserId"
|
||||||
|
showAddButton={false}
|
||||||
|
enableSearch={true}
|
||||||
|
searchPlaceholder="Search by name..."
|
||||||
|
showCheckbox={false}
|
||||||
|
showActions={false}
|
||||||
|
showPeriodSelector={true} // ✅ Enable the new period selector
|
||||||
|
onPeriodChange={(period: any, startDate: any, endDate: any) => {
|
||||||
|
console.log('Period changed:', { period, startDate, endDate });
|
||||||
|
}}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: 'medRepName',
|
||||||
|
label: 'MR Name',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'company',
|
||||||
|
label: 'Company',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'totalTargetCall',
|
||||||
|
label: 'Target Call',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'totalActualCallRate',
|
||||||
|
label: 'Actual Call Rate',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'totalMissedCall',
|
||||||
|
label: 'Missed Call',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'totalReschedule',
|
||||||
|
label: 'Reschedule',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'totalCallRatePercentage',
|
||||||
|
label: 'Call Rate (%)',
|
||||||
|
searchable: false,
|
||||||
|
render: (value: number) => `${value.toFixed(2)}%`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'medRepName',
|
||||||
|
label: 'MedRep Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={CallRateAPI}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
76
src/pages/tabReports/CallReachTab.tsx
Normal file
76
src/pages/tabReports/CallReachTab.tsx
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { ReportsTab } from '../../components/reports/ReportsTab';
|
||||||
|
import { CallReach } from '../../types/reports/reports';
|
||||||
|
import { CallReachAPI } from '../../services/reports/callReachApi';
|
||||||
|
|
||||||
|
export const CallReachTab: React.FC = () => {
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await Promise.all([]);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-4">Loading options...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ReportsTab<CallReach, number>
|
||||||
|
title="Call Reach Report"
|
||||||
|
idField="mrUserId"
|
||||||
|
showAddButton={false}
|
||||||
|
enableSearch={true}
|
||||||
|
searchPlaceholder="Search by name..."
|
||||||
|
showCheckbox={false}
|
||||||
|
showActions={false}
|
||||||
|
showPeriodSelector={true} // ✅ Enable the new period selector
|
||||||
|
onPeriodChange={(period: any, startDate: any, endDate: any) => {
|
||||||
|
console.log('Period changed:', { period, startDate, endDate });
|
||||||
|
}}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: 'medRepName',
|
||||||
|
label: 'MRName',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'company',
|
||||||
|
label: 'Company',
|
||||||
|
searchable: true ,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'totalTargetCall',
|
||||||
|
label: 'Target_Call_Reach',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'totalActualCallReach',
|
||||||
|
label: 'Actual_Call_Reach',
|
||||||
|
searchable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'totalCallReachPercentage',
|
||||||
|
label: 'Call_Reach (%)',
|
||||||
|
searchable: false,
|
||||||
|
render: (value: number) => `${value}%`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'medRepName',
|
||||||
|
label: 'MedRepName Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={CallReachAPI}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
119
src/pages/tabReports/CatchUpCallTab.tsx
Normal file
119
src/pages/tabReports/CatchUpCallTab.tsx
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { ReportsTab } from '../../components/reports/ReportsTab';
|
||||||
|
import { CatchUpCall } from '../../types/reports/reports';
|
||||||
|
import { CatchUpCallAPI } from '../../services/reports/catchUpCallApi';
|
||||||
|
import { formatDateForCSV } from '../../utils/csvExport';
|
||||||
|
|
||||||
|
export const CatchUpCallTab: React.FC = () => {
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await Promise.all([]);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-4">Loading options...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ReportsTab<CatchUpCall, string>
|
||||||
|
title="Catch-up Call"
|
||||||
|
idField="catchUpCallId"
|
||||||
|
showAddButton={false}
|
||||||
|
enableSearch={true}
|
||||||
|
searchPlaceholder="Search by name..."
|
||||||
|
showCheckbox={false}
|
||||||
|
showActions={true}
|
||||||
|
showPeriodSelector={true} // ✅ Enable the new period selector
|
||||||
|
onPeriodChange={(period: any, startDate: any, endDate: any) => {
|
||||||
|
console.log('Period changed:', { period, startDate, endDate });
|
||||||
|
}}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: 'medRepName',
|
||||||
|
label: 'MRName',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'doctorName',
|
||||||
|
label: 'DoctorName',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'company',
|
||||||
|
label: 'Company',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'originalCallDate',
|
||||||
|
label: 'Original_date',
|
||||||
|
searchable: false,
|
||||||
|
render: (value) => formatDateForCSV(value)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'catchUpCallDate',
|
||||||
|
label: 'Catch-up_date',
|
||||||
|
searchable: false,
|
||||||
|
render: (value) => formatDateForCSV(value)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'startTime',
|
||||||
|
label: 'Start_Time',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'endTime',
|
||||||
|
label: 'End_Time',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'missedReason',
|
||||||
|
label: 'reason',
|
||||||
|
searchable: false,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'medRepName',
|
||||||
|
label: 'MedRep Name',
|
||||||
|
type: 'text',
|
||||||
|
readonly: true,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'doctorName',
|
||||||
|
label: 'Doctor Name',
|
||||||
|
type: 'text',
|
||||||
|
readonly: true,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'missedReason',
|
||||||
|
label: 'Catch-up Call Reason',
|
||||||
|
type: 'textarea',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={{
|
||||||
|
getAll: (params) => CatchUpCallAPI.getAll(params),
|
||||||
|
update: (id: string, data: Partial<CatchUpCall>) => CatchUpCallAPI.update(id, data),
|
||||||
|
create: async (data: Partial<CatchUpCall>) => {
|
||||||
|
// Uses the createOrUpdate method which handles both create and update
|
||||||
|
return CatchUpCallAPI.createOrUpdate(data);
|
||||||
|
},
|
||||||
|
delete: async (_id: string) => {
|
||||||
|
// Delete is not supported for Catch-up Calls
|
||||||
|
throw new Error('Delete operation is not supported for Catch-up Calls');
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
93
src/pages/tabReports/ReportsPage.tsx
Normal file
93
src/pages/tabReports/ReportsPage.tsx
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { UserAccountTab } from './../tabs/UserAccountTab';
|
||||||
|
import { ApiHelpers } from '../../utils/apiHelpers';
|
||||||
|
import { CallRateTab } from './CallRateTab';
|
||||||
|
import { AttendanceTab } from './AttendanceTab';
|
||||||
|
import { CallReachTab } from './CallReachTab';
|
||||||
|
import { CatchUpCallTab } from './CatchUpCallTab';
|
||||||
|
import { ActualCoverageTab } from './ActualCoverageTab';
|
||||||
|
|
||||||
|
interface ReportsPageProps {
|
||||||
|
user: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
type TabType =
|
||||||
|
| 'attendance'
|
||||||
|
| 'callReach'
|
||||||
|
| 'callRate'
|
||||||
|
| 'catchUpCall'
|
||||||
|
| 'actualCoverage'
|
||||||
|
| 'missedApproval';
|
||||||
|
|
||||||
|
export const ReportsPage: React.FC<ReportsPageProps> = () => {
|
||||||
|
const userRole = (ApiHelpers.getUserRole() || 'MEDREP').toUpperCase();
|
||||||
|
|
||||||
|
const allTabs = [
|
||||||
|
{ id: 'attendance' as TabType, label: 'Attendance', icon: '📝' },
|
||||||
|
{ id: 'callReach' as TabType, label: 'CallReach', icon: '📞' },
|
||||||
|
{ id: 'callRate' as TabType, label: 'CallRate', icon: '📊' },
|
||||||
|
{ id: 'catchUpCall' as TabType, label: 'CatchUpCall', icon: '⏰' },
|
||||||
|
{ id: 'actualCoverage' as TabType, label: 'ActualCoverage', icon: '📶' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const visibleTabs = allTabs.filter(
|
||||||
|
(tab) =>
|
||||||
|
tab.id !== 'missedApproval' ||
|
||||||
|
['ADMIN', 'NSM', 'DSM'].includes(userRole)
|
||||||
|
);
|
||||||
|
|
||||||
|
const [activeTab, setActiveTab] = useState<TabType>(
|
||||||
|
visibleTabs[0]?.id || 'callReach'
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderTabContent = () => {
|
||||||
|
switch (activeTab) {
|
||||||
|
case 'missedApproval':
|
||||||
|
if (['ADMIN', 'NSM', 'DSM'].includes(userRole)) {
|
||||||
|
return <UserAccountTab />;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
case 'attendance':
|
||||||
|
return <AttendanceTab />;
|
||||||
|
case 'callReach':
|
||||||
|
return <CallReachTab />;
|
||||||
|
case 'callRate':
|
||||||
|
return <CallRateTab />;
|
||||||
|
case 'catchUpCall':
|
||||||
|
return <CatchUpCallTab />;
|
||||||
|
case 'actualCoverage':
|
||||||
|
return <ActualCoverageTab />;
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border border-gray-100">
|
||||||
|
{/* Tab Navigation */}
|
||||||
|
<div className="border-b border-gray-200">
|
||||||
|
<nav className="flex overflow-x-auto">
|
||||||
|
{visibleTabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id)}
|
||||||
|
className={`flex items-center px-6 py-4 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${
|
||||||
|
activeTab === tab.id
|
||||||
|
? 'border-blue-500 text-blue-600'
|
||||||
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="mr-2">{tab.icon}</span>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Content */}
|
||||||
|
<div className="p-6">{renderTabContent()}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
48
src/pages/tabs/AreaTab.tsx
Normal file
48
src/pages/tabs/AreaTab.tsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { GenericMaintenanceTab } from '../../components/generic/GenericMaintenanceTab';
|
||||||
|
import { Areas } from '../../types/doctor/generic';
|
||||||
|
import { AreasAPI } from '../../services/generic/areasApi';
|
||||||
|
|
||||||
|
export const AreaTab: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<GenericMaintenanceTab<Areas,number>
|
||||||
|
title="Areas"
|
||||||
|
idField="areaId"
|
||||||
|
showActions={true}
|
||||||
|
showDeleteButton={false}
|
||||||
|
columns={[
|
||||||
|
{ key: 'areaId', label: 'ID' , searchable: false },
|
||||||
|
{ key: 'areaName', label: 'Area Name' , searchable: true},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
render: (value) => (
|
||||||
|
<span className={value ? 'text-green-600' : 'text-gray-400'}>
|
||||||
|
{value ? '● Active' : '○ Inactive'}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'areaName',
|
||||||
|
label: 'Area Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Enter area name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
type: 'select',
|
||||||
|
required: false,
|
||||||
|
options: [
|
||||||
|
{ value: true, label: 'Active' },
|
||||||
|
{ value: false, label: 'Inactive' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={AreasAPI}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
56
src/pages/tabs/DepartmentTab.tsx
Normal file
56
src/pages/tabs/DepartmentTab.tsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { GenericMaintenanceTab } from '../../components/generic/GenericMaintenanceTab';
|
||||||
|
import { Department } from '../../types/doctor/generic';
|
||||||
|
import { DepartmentAPI } from '../../services/generic/departmentApi';
|
||||||
|
|
||||||
|
export const DepartmentTab: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<GenericMaintenanceTab<Department,number>
|
||||||
|
title="Departments"
|
||||||
|
idField="departmentId"
|
||||||
|
showActions={true}
|
||||||
|
showDeleteButton={false}
|
||||||
|
columns={[
|
||||||
|
{ key: 'departmentId', label: 'ID' , searchable: false },
|
||||||
|
{ key: 'departmentCode', label: 'Department Code' , searchable: true},
|
||||||
|
{ key: 'departmentName', label: 'Department Name' , searchable: true},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
render: (value) => (
|
||||||
|
<span className={value ? 'text-green-600' : 'text-gray-400'}>
|
||||||
|
{value ? '● Active' : '○ Inactive'}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'departmentCode',
|
||||||
|
label: 'Department Code',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Enter department code',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'departmentName',
|
||||||
|
label: 'Department Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Enter department name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
type: 'select',
|
||||||
|
required: false,
|
||||||
|
options: [
|
||||||
|
{ value: true, label: 'Active' },
|
||||||
|
{ value: false, label: 'Inactive' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={DepartmentAPI}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
98
src/pages/tabs/DistrictTab.tsx
Normal file
98
src/pages/tabs/DistrictTab.tsx
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { GenericMaintenanceTab } from '../../components/generic/GenericMaintenanceTab';
|
||||||
|
import { DistrictAPI } from '../../services/generic/districtApi';
|
||||||
|
import { District } from '../../types/doctor/generic';
|
||||||
|
import { useAreasApi } from '../../hooks/generic/useArea';
|
||||||
|
|
||||||
|
export const DistrictTab: React.FC = () => {
|
||||||
|
const { areas, fetchAreas } = useAreasApi();
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await Promise.all([
|
||||||
|
fetchAreas()
|
||||||
|
]);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const areaOptions = areas
|
||||||
|
.filter(a => a.isActive !== false)
|
||||||
|
.map(a => ({
|
||||||
|
value: a.areaId,
|
||||||
|
label: a.areaName ?? '(No Name)'
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-4">Loading options...</div>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<GenericMaintenanceTab<District, number>
|
||||||
|
title="Districts"
|
||||||
|
idField="districtId"
|
||||||
|
showActions={true}
|
||||||
|
showDeleteButton={false}
|
||||||
|
columns={[
|
||||||
|
{ key: 'districtId', label: 'ID' , searchable: false},
|
||||||
|
{ key: 'districtName', label: 'District Name', searchable: true},
|
||||||
|
{
|
||||||
|
key: 'areaId',
|
||||||
|
label: 'Area Name',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true, // Enable filtering by territory
|
||||||
|
filterOptions: areaOptions, // Use predefined territory options
|
||||||
|
getFilterValue: (row) => row.areas?.areaId, // Get the actual ID for filtering
|
||||||
|
render: (_value, row) => row.areas?.areaName ?? '—',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
searchable: false,
|
||||||
|
filterable: true, // Enable filtering by status
|
||||||
|
filterOptions: [
|
||||||
|
{ value: 'true', label: 'Active' },
|
||||||
|
{ value: 'false', label: 'Inactive' }
|
||||||
|
],
|
||||||
|
getFilterValue: (row) => String(row.isActive),
|
||||||
|
render: (value) => (
|
||||||
|
<span className={value ? 'text-green-600' : 'text-gray-400'}>
|
||||||
|
{value ? '● Active' : '○ Inactive'}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'districtName',
|
||||||
|
label: 'District Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Enter district name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'areaId',
|
||||||
|
label: 'Area',
|
||||||
|
type: 'select',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Select Area',
|
||||||
|
options: areaOptions
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
type: 'select',
|
||||||
|
required: false,
|
||||||
|
options: [
|
||||||
|
{ value: true, label: 'Active' },
|
||||||
|
{ value: false, label: 'Inactive' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={DistrictAPI}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
66
src/pages/tabs/DivisionTab.tsx
Normal file
66
src/pages/tabs/DivisionTab.tsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { GenericMaintenanceTab } from '../../components/generic/GenericMaintenanceTab';
|
||||||
|
import { DivisionAPI } from '../../services/generic/divisionApi';
|
||||||
|
import { Division } from '../../types/doctor/generic';
|
||||||
|
import { useDivisionApi } from '../../hooks/generic/useDivision';
|
||||||
|
|
||||||
|
export const DivisionTab: React.FC = () => {
|
||||||
|
const { fetchDivisions } = useDivisionApi();
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await Promise.all([
|
||||||
|
fetchDivisions()
|
||||||
|
]);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-4">Loading options...</div>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<GenericMaintenanceTab<Division,number>
|
||||||
|
title="Divisions"
|
||||||
|
idField="divisionId"
|
||||||
|
showActions={true}
|
||||||
|
showDeleteButton={false}
|
||||||
|
columns={[
|
||||||
|
{ key: 'divisionId', label: 'ID' , searchable: false},
|
||||||
|
{ key: 'divisionName', label: 'Division Name', searchable: true},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
render: (value) => (
|
||||||
|
<span className={value ? 'text-green-600' : 'text-gray-400'}>
|
||||||
|
{value ? '● Active' : '○ Inactive'}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'divisionName',
|
||||||
|
label: 'Division Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Enter division name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
type: 'select',
|
||||||
|
required: false,
|
||||||
|
options: [
|
||||||
|
{ value: true, label: 'Active' },
|
||||||
|
{ value: false, label: 'Inactive' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={DivisionAPI}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
77
src/pages/tabs/InstitutionCategoryTab.tsx
Normal file
77
src/pages/tabs/InstitutionCategoryTab.tsx
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { GenericMaintenanceTab } from '../../components/generic/GenericMaintenanceTab';
|
||||||
|
import { InstitutionCategory } from '../../types/doctor/generic';
|
||||||
|
import { InstitutionCategoryAPI } from '../../services/generic/institutionCategoryApi';
|
||||||
|
import { useInstitutionCategoryApi } from '../../hooks/generic/useInstitutionCategory';
|
||||||
|
|
||||||
|
export const InstitutionCategoryTab: React.FC = () => {
|
||||||
|
const { fetchInstitutionCategory } = useInstitutionCategoryApi();
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await Promise.all([
|
||||||
|
fetchInstitutionCategory()
|
||||||
|
]);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-4">Loading options...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GenericMaintenanceTab<InstitutionCategory,number>
|
||||||
|
title="Categories"
|
||||||
|
idField="institutionCategoryId"
|
||||||
|
showActions={true}
|
||||||
|
showEditButton={true}
|
||||||
|
showDeleteButton={false}
|
||||||
|
columns={[
|
||||||
|
{ key: 'institutionCategoryId', label: 'ID' ,searchable: false},
|
||||||
|
{ key: 'institutionCategoryCode', label: 'Category Code' },
|
||||||
|
{ key: 'institutionCategoryName', label: 'Category Name' },
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
render: (value) => (
|
||||||
|
<span className={value ? 'text-green-600' : 'text-gray-400'}>
|
||||||
|
{value ? '● Active' : '○ Inactive'}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'institutionCategoryCode',
|
||||||
|
label: 'Category Code',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Enter category code',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'institutionCategoryName',
|
||||||
|
label: 'Category Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Enter category name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
type: 'select',
|
||||||
|
required: false,
|
||||||
|
options: [
|
||||||
|
{ value: true, label: 'Active' },
|
||||||
|
{ value: false, label: 'Inactive' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={InstitutionCategoryAPI}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
140
src/pages/tabs/InstitutionTab.tsx
Normal file
140
src/pages/tabs/InstitutionTab.tsx
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { GenericMaintenanceTab } from '../../components/generic/GenericMaintenanceTab';
|
||||||
|
import { InstitutionAPI } from '../../services/generic/institutionApi';
|
||||||
|
import { Institution } from '../../types/doctor/generic';
|
||||||
|
import { useInstitutionCategoryApi } from '../../hooks/generic/useInstitutionCategory';
|
||||||
|
import { useTerritoryApi } from '../../hooks/generic/useTerritoryApi';
|
||||||
|
|
||||||
|
export const InstitutionTab: React.FC = () => {
|
||||||
|
const { institutionCategory, fetchInstitutionCategory } = useInstitutionCategoryApi();
|
||||||
|
const { territory, fetchTerritory } = useTerritoryApi();
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
// Load dropdown data on component mount
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
await Promise.all([
|
||||||
|
fetchInstitutionCategory(),
|
||||||
|
fetchTerritory()
|
||||||
|
]);
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Convert to dropdown options format
|
||||||
|
const territoryOptions = territory
|
||||||
|
.filter(t => t.isActive !== false)
|
||||||
|
.map(t => ({
|
||||||
|
value: t.territoryId,
|
||||||
|
label: t.territoryName
|
||||||
|
}));
|
||||||
|
|
||||||
|
const categoryOptions = institutionCategory
|
||||||
|
.filter(c => c.isActive !== false)
|
||||||
|
.map(c => ({
|
||||||
|
value: c.institutionCategoryId,
|
||||||
|
label: `${c.institutionCategoryCode} - ${c.institutionCategoryName}`
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="flex justify-center py-4">Loading options...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GenericMaintenanceTab<Institution, number>
|
||||||
|
title="Institutions"
|
||||||
|
idField="institutionId"
|
||||||
|
showActions={true}
|
||||||
|
showDeleteButton={false}
|
||||||
|
enableSearch={true}
|
||||||
|
searchPlaceholder="Search by name, territory, or category..."
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: 'institutionId',
|
||||||
|
label: 'ID',
|
||||||
|
searchable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'institutionName',
|
||||||
|
label: 'Institution Name',
|
||||||
|
searchable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'territoryId',
|
||||||
|
label: 'Territory Name',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
filterOptions: territoryOptions, // Use predefined territory options
|
||||||
|
getFilterValue: (row) => row.territories?.territoryId, // Get the actual ID for filtering
|
||||||
|
render: (_value, row) => row.territories?.territoryName ?? '—',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'institutionCategoryId',
|
||||||
|
label: 'Code - Category',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true, // Enable filtering by category
|
||||||
|
filterOptions: categoryOptions, // Use predefined category options
|
||||||
|
getFilterValue: (row) => row.institutionCategory?.institutionCategoryId,
|
||||||
|
render: (_value, row) =>
|
||||||
|
row.institutionCategory
|
||||||
|
? `${row.institutionCategory.institutionCategoryCode} - ${row.institutionCategory.institutionCategoryName}`
|
||||||
|
: '—',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
searchable: false,
|
||||||
|
filterable: true, // Enable filtering by status
|
||||||
|
filterOptions: [
|
||||||
|
{ value: 'true', label: 'Active' },
|
||||||
|
{ value: 'false', label: 'Inactive' }
|
||||||
|
],
|
||||||
|
getFilterValue: (row) => String(row.isActive),
|
||||||
|
render: (value) => (
|
||||||
|
<span className={value ? 'text-green-600' : 'text-gray-400'}>
|
||||||
|
{value ? '● Active' : '○ Inactive'}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'institutionName',
|
||||||
|
label: 'Institution Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Enter institution name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'territoryId',
|
||||||
|
label: 'Territory',
|
||||||
|
type: 'select',
|
||||||
|
required: false,
|
||||||
|
placeholder: 'Select territory',
|
||||||
|
options: territoryOptions
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'institutionCategoryId',
|
||||||
|
label: 'Code - Category',
|
||||||
|
type: 'select',
|
||||||
|
required: false,
|
||||||
|
placeholder: 'Select category',
|
||||||
|
options: categoryOptions
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
type: 'select',
|
||||||
|
required: false,
|
||||||
|
options: [
|
||||||
|
{ value: true, label: 'Active' },
|
||||||
|
{ value: false, label: 'Inactive' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={InstitutionAPI}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
292
src/pages/tabs/InventoryTab.tsx
Normal file
292
src/pages/tabs/InventoryTab.tsx
Normal file
@ -0,0 +1,292 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { GenericMaintenanceTab } from '../../components/generic/GenericMaintenanceTab';
|
||||||
|
import { Inventory } from '../../types/doctor/generic';
|
||||||
|
import { InventoryAPI, ExcelUploadResponse } from '../../services/generic/inventoryApi';
|
||||||
|
import { Button, LoadingSpinner, Modal } from '../../components/ui';
|
||||||
|
import { useToast } from '../../contexts/ToastContext';
|
||||||
|
import { useInventoryApi } from '../../hooks/generic/useInventory';
|
||||||
|
|
||||||
|
export const InventoryTab: React.FC = () => {
|
||||||
|
const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
|
||||||
|
const [uploadFile, setUploadFile] = useState<File | null>(null);
|
||||||
|
const { fetchInventory } = useInventoryApi();
|
||||||
|
const [, setRefreshKey] = useState(0);
|
||||||
|
|
||||||
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
|
const [uploadResult, setUploadResult] = useState<ExcelUploadResponse | null>(null);
|
||||||
|
const { addToast } = useToast();
|
||||||
|
|
||||||
|
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
// Validate file type
|
||||||
|
const allowedTypes = [
|
||||||
|
'application/vnd.ms-excel',
|
||||||
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||||
|
];
|
||||||
|
|
||||||
|
if (!allowedTypes.includes(file.type) && !file.name.match(/\.(xlsx|xls)$/i)) {
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'Invalid File',
|
||||||
|
message: 'Please select a valid Excel file (.xlsx or .xls)'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate file size (20MB)
|
||||||
|
if (file.size > 20 * 1024 * 1024) {
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'File Too Large',
|
||||||
|
message: 'File size must not exceed 20MB'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setUploadFile(file);
|
||||||
|
setUploadResult(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUploadExcel = async () => {
|
||||||
|
if (!uploadFile) {
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'No File',
|
||||||
|
message: 'Please select a file to upload'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setIsUploading(true);
|
||||||
|
const result = await InventoryAPI.uploadExcel(uploadFile);
|
||||||
|
|
||||||
|
setUploadResult(result);
|
||||||
|
if (result.success) {
|
||||||
|
addToast({
|
||||||
|
type: 'success',
|
||||||
|
title: 'Upload Successful',
|
||||||
|
message: `${result.processedRows} inventory records imported successfully`
|
||||||
|
});
|
||||||
|
|
||||||
|
// Refresh the table after successful upload
|
||||||
|
await fetchInventory(); // Fetch fresh data
|
||||||
|
setRefreshKey(prev => prev + 1); // Trigger re-render of GenericMaintenanceTab
|
||||||
|
} else {
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'Upload Failed',
|
||||||
|
message: result.message
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
addToast({
|
||||||
|
type: 'error',
|
||||||
|
title: 'Upload Error',
|
||||||
|
message: error.message || 'Failed to upload file'
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setIsUploading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseUploadModal = () => {
|
||||||
|
setIsUploadModalOpen(false);
|
||||||
|
setUploadFile(null);
|
||||||
|
setUploadResult(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isUploading) {
|
||||||
|
return <LoadingSpinner message="Loading please wait..." />;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<GenericMaintenanceTab<Inventory, string>
|
||||||
|
title="Inventory"
|
||||||
|
idField="inventoryId"
|
||||||
|
showCheckbox={true}
|
||||||
|
showActions={true}
|
||||||
|
showEditButton={false}
|
||||||
|
showAddButton={false}
|
||||||
|
customHeaderActions={
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
onClick={() => setIsUploadModalOpen(true)}
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||||
|
</svg>
|
||||||
|
Upload Excel Template
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: 'description',
|
||||||
|
label: 'Brand_Name',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
getFilterValue: (row) => row.description,
|
||||||
|
render: (_value, row) => row.description,
|
||||||
|
},
|
||||||
|
{ key: 'qtyIn', label: 'Qty_In', searchable: false },
|
||||||
|
{ key: 'qtyOut', label: 'Qty_Out', searchable: false },
|
||||||
|
{ key: 'cycleMonth',
|
||||||
|
label: 'Month',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
getFilterValue: (row) => row.cycleMonth, // ensures filtering uses raw value
|
||||||
|
filterOptions: Array.from({ length: 12 }, (_, i) => ({
|
||||||
|
value: i + 1,
|
||||||
|
label: [
|
||||||
|
'January', 'February', 'March', 'April', 'May', 'June',
|
||||||
|
'July', 'August', 'September', 'October', 'November', 'December'
|
||||||
|
][i]
|
||||||
|
})),
|
||||||
|
render: (value) => {
|
||||||
|
const monthNames = [
|
||||||
|
'', 'January', 'February', 'March', 'April', 'May', 'June',
|
||||||
|
'July', 'August', 'September', 'October', 'November', 'December'
|
||||||
|
];
|
||||||
|
return monthNames[value] || value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'cycleYear',
|
||||||
|
label: 'Year',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
getFilterValue: (row) => row.cycleYear,
|
||||||
|
render: (_value, row) => row.cycleYear,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'medRepName',
|
||||||
|
label: 'MedRep_Name',
|
||||||
|
searchable: true,
|
||||||
|
filterable: true,
|
||||||
|
getFilterValue: (row) => row.medRepName,
|
||||||
|
render: (_value, row) => row.medRepName,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[]}
|
||||||
|
api={InventoryAPI}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Excel Upload Modal */}
|
||||||
|
<Modal
|
||||||
|
isOpen={isUploadModalOpen}
|
||||||
|
onClose={handleCloseUploadModal}
|
||||||
|
title="Upload Inventory Excel Template"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Instructions */}
|
||||||
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||||
|
<h4 className="font-medium text-blue-900 mb-2">Template Instructions:</h4>
|
||||||
|
<ul className="text-sm text-blue-800 space-y-1 list-disc list-inside">
|
||||||
|
<li>Use the provided Excel template with fixed headers</li>
|
||||||
|
<li>Headers: BRAND, January-December, Year, Medrep_Name</li>
|
||||||
|
<li>Only rows with quantities greater than 0 will be imported</li>
|
||||||
|
<li>Each month with a non-zero value creates a separate inventory record</li>
|
||||||
|
<li>File size limit: 20MB</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* File Upload */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Select Excel File
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept=".xlsx,.xls,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||||
|
onChange={handleFileSelect}
|
||||||
|
disabled={isUploading}
|
||||||
|
className="block w-full text-sm text-gray-500
|
||||||
|
file:mr-4 file:py-2 file:px-4
|
||||||
|
file:rounded-md file:border-0
|
||||||
|
file:text-sm file:font-semibold
|
||||||
|
file:bg-blue-50 file:text-blue-700
|
||||||
|
hover:file:bg-blue-100
|
||||||
|
disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
/>
|
||||||
|
{uploadFile && (
|
||||||
|
<p className="mt-2 text-sm text-gray-600">
|
||||||
|
Selected: {uploadFile.name} ({(uploadFile.size / 1024).toFixed(2)} KB)
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Upload Result */}
|
||||||
|
{uploadResult && (
|
||||||
|
<div className={`border rounded-lg p-4 ${uploadResult.success ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'}`}>
|
||||||
|
<h4 className={`font-medium mb-2 ${uploadResult.success ? 'text-green-900' : 'text-red-900'}`}>
|
||||||
|
{uploadResult.success ? 'Upload Successful' : 'Upload Failed'}
|
||||||
|
</h4>
|
||||||
|
<div className="text-sm space-y-1">
|
||||||
|
<p>Total Rows: {uploadResult.totalRows}</p>
|
||||||
|
<p>Processed: {uploadResult.processedRows}</p>
|
||||||
|
<p>Skipped: {uploadResult.skippedRows}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{uploadResult.errors.length > 0 && (
|
||||||
|
<div className="mt-3">
|
||||||
|
<p className="text-sm font-medium text-red-900 mb-1">Errors:</p>
|
||||||
|
<ul className="text-sm text-red-800 space-y-1 max-h-40 overflow-y-auto">
|
||||||
|
{uploadResult.errors.map((error, idx) => (
|
||||||
|
<li key={idx}>• {error}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{uploadResult.insertedItems.length > 0 && (
|
||||||
|
<div className="mt-3">
|
||||||
|
<p className="text-sm font-medium text-green-900 mb-1">Imported Brands:</p>
|
||||||
|
<ul className="text-sm text-green-800 space-y-1 max-h-40 overflow-y-auto">
|
||||||
|
{uploadResult.insertedItems.map((item, idx) => (
|
||||||
|
<li key={idx}>• {item.brand} - {item.totalQty} units ({item.medRepName})</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={handleCloseUploadModal}
|
||||||
|
disabled={isUploading}
|
||||||
|
>
|
||||||
|
{uploadResult?.success ? 'Close' : 'Cancel'}
|
||||||
|
</Button>
|
||||||
|
{!uploadResult?.success && (
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
onClick={handleUploadExcel}
|
||||||
|
disabled={!uploadFile || isUploading}
|
||||||
|
>
|
||||||
|
{isUploading ? (
|
||||||
|
<span className="flex items-center">
|
||||||
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||||||
|
Uploading...
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||||
|
</svg>
|
||||||
|
Upload Excel
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
80
src/pages/tabs/ProductTab.tsx
Normal file
80
src/pages/tabs/ProductTab.tsx
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { GenericMaintenanceTab } from '../../components/generic/GenericMaintenanceTab';
|
||||||
|
import { Product } from '../../types/doctor/generic';
|
||||||
|
import { ProductAPI } from '../../services/generic/productApi';
|
||||||
|
|
||||||
|
export const ProductTab: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<GenericMaintenanceTab<Product, number>
|
||||||
|
title="Products"
|
||||||
|
idField="productId"
|
||||||
|
showActions={true}
|
||||||
|
showDeleteButton={false}
|
||||||
|
columns={[
|
||||||
|
{ key: 'productId', label: 'ID', searchable: false },
|
||||||
|
{ key: 'productName', label: 'Product Name', searchable: true },
|
||||||
|
{
|
||||||
|
key: 'productLink',
|
||||||
|
label: 'File',
|
||||||
|
render: (value) => value ? (
|
||||||
|
<a
|
||||||
|
href={ProductAPI.getFileUrl(value)}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-600 hover:underline"
|
||||||
|
>
|
||||||
|
View File
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-400">No file</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
render: (value) => (
|
||||||
|
<span className={value ? 'text-green-600' : 'text-gray-400'}>
|
||||||
|
{value ? '● Active' : '○ Inactive'}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
filterable: true,
|
||||||
|
filterOptions: [
|
||||||
|
{ value: 'true', label: 'Active' },
|
||||||
|
{ value: 'false', label: 'Inactive' }
|
||||||
|
],
|
||||||
|
getFilterValue: (item) => String(item.isActive)
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
formFields={[
|
||||||
|
{
|
||||||
|
key: 'productName',
|
||||||
|
label: 'Product Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Enter product name',
|
||||||
|
minLength: 3,
|
||||||
|
maxLength: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'productLink',
|
||||||
|
label: 'Product File',
|
||||||
|
type: 'file',
|
||||||
|
required: false,
|
||||||
|
accept: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.presentationml.presentation,image/*',
|
||||||
|
maxFileSize: 20 * 1024 * 1024, // 20MB
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'isActive',
|
||||||
|
label: 'Status',
|
||||||
|
type: 'select',
|
||||||
|
required: false,
|
||||||
|
options: [
|
||||||
|
{ value: true, label: 'Active' },
|
||||||
|
{ value: false, label: 'Inactive' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
api={ProductAPI}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user