Skip to content

Commit ff38b51

Browse files
authored
Merge branch 'main' into feat-rbac-fixes
2 parents a4501e2 + a551a6f commit ff38b51

41 files changed

Lines changed: 4646 additions & 154 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
# Patient Registration Feature
2+
3+
## Overview
4+
5+
The Patient Registration page allows receptionists to register new patients into the hospital management system with a modern, user-friendly interface.
6+
7+
## Location
8+
9+
**Route:** `/receptionist/registration`
10+
11+
**File:** `src/app/(dashboard)/receptionist/registration/page.tsx`
12+
13+
## Features
14+
15+
### 1. **Modern UI Design**
16+
17+
- Gradient backgrounds matching the landing page aesthetic (blue-themed)
18+
- Smooth animations and transitions
19+
- Responsive design for all screen sizes
20+
- Card-based layout for better organization
21+
22+
### 2. **Form Sections**
23+
24+
#### Personal Information Card
25+
26+
- First Name\* (required)
27+
- Last Name\* (required)
28+
- Gender\* (required - Radio buttons: Male, Female, Other)
29+
- Date of Birth\* (required)
30+
- Phone Number\* (required)
31+
- Email Address (optional)
32+
- Residential Address (optional)
33+
34+
#### Medical Information Card
35+
36+
- Blood Group (dropdown: A+, A-, B+, B-, O+, O-, AB+, AB-)
37+
- Emergency Contact (phone number)
38+
39+
### 3. **Form Validation**
40+
41+
- Required fields marked with red asterisk (\*)
42+
- HTML5 validation for email and phone inputs
43+
- Date picker for Date of Birth
44+
- Real-time field validation
45+
46+
### 4. **Success Feedback**
47+
48+
After successful registration:
49+
50+
- Animated success card with green theme
51+
- Display generated Patient ID (first 8 characters of UUID)
52+
- Patient details summary
53+
- Options to:
54+
- Register another patient
55+
- Return to dashboard
56+
57+
### 5. **API Integration**
58+
59+
- **Endpoint:** `POST /api/patients`
60+
- **Permissions:** Requires `patients.create` permission
61+
- **Response:** Returns complete patient object with generated ID
62+
- **Error Handling:** Toast notifications for success/failure
63+
64+
### 6. **Toast Notifications**
65+
66+
- Success message with patient details
67+
- Error handling with descriptive messages
68+
- Non-blocking UI notifications
69+
70+
## UI Components Used
71+
72+
All components follow the project's design system:
73+
74+
- `Button` - Primary actions
75+
- `Card` - Content containers
76+
- `Input` - Text inputs with icon support
77+
- `Label` - Form labels
78+
- `Select` - Dropdown selections
79+
- `RadioGroup` - Gender selection
80+
- `Textarea` - Address input
81+
- `Toast` - Notifications
82+
83+
## Color Scheme
84+
85+
Matching the landing page design:
86+
87+
- **Primary Blue:** `#2563eb` (Blue-600)
88+
- **Success Green:** `#10b981` (Emerald-500)
89+
- **Backgrounds:** Blue gradients (`from-blue-50 to-blue-100`)
90+
- **Text:** Slate shades for hierarchy
91+
92+
## Icons Used
93+
94+
From `lucide-react`:
95+
96+
- `UserPlus` - Registration header
97+
- `User` - Personal info
98+
- `Phone` - Phone inputs
99+
- `Mail` - Email input
100+
- `MapPin` - Address input
101+
- `Calendar` - Date of birth
102+
- `Droplet` - Blood group
103+
- `Save` - Submit button
104+
- `ArrowLeft` - Back navigation
105+
- `CheckCircle2` - Success state
106+
107+
## Navigation
108+
109+
- **Back Button:** Returns to `/receptionist` dashboard
110+
- **After Registration:** Options to register another or go to dashboard
111+
112+
## Receptionist Dashboard
113+
114+
Enhanced receptionist dashboard at `/receptionist`:
115+
116+
### Quick Actions
117+
118+
1. **New Registration** - Links to registration page
119+
2. **Patient List** - View all patients
120+
3. **Appointments** - Schedule appointments
121+
4. **Reports** - View daily reports
122+
123+
### Statistics Cards
124+
125+
- Today's Registrations
126+
- Appointments Scheduled
127+
- Active Patients
128+
129+
## Database Schema
130+
131+
Patient records are stored with:
132+
133+
```typescript
134+
{
135+
id: string (auto-generated UUID)
136+
firstName: string
137+
lastName: string
138+
email: string | null
139+
phone: string
140+
dateOfBirth: DateTime
141+
gender: string
142+
address: string | null
143+
bloodType: string | null
144+
emergencyContact: string | null
145+
createdAt: DateTime
146+
updatedAt: DateTime
147+
}
148+
```
149+
150+
## Installation
151+
152+
Required dependencies (already installed):
153+
154+
```bash
155+
npm install @radix-ui/react-select @radix-ui/react-radio-group @radix-ui/react-toast
156+
```
157+
158+
## Usage
159+
160+
1. Navigate to receptionist dashboard: `/receptionist`
161+
2. Click "New Registration" card
162+
3. Fill in required patient information
163+
4. Click "Register Patient" button
164+
5. View success confirmation with Patient ID
165+
6. Choose to register another patient or return to dashboard
166+
167+
## Permissions Required
168+
169+
- `patients.create` - To register new patients
170+
171+
## Future Enhancements
172+
173+
Potential improvements:
174+
175+
- Photo upload for patient profile
176+
- Insurance information capture
177+
- Medical history import
178+
- QR code generation for patient ID
179+
- Print patient card
180+
- SMS notification to patient
181+
- Integration with appointment scheduling

0 commit comments

Comments
 (0)