UI/UX First Phase

### 1. 🏠 **Home Page**

**Route:** `/`

**Sections:**

* Hero Section:

  * Search input: `placeholder="Search doctors, hospitals, institutions"`
* Suggested Categories (Optional): Icons or cards for Doctor, Hospital, Institution
* Recent Highlights (Optional): Latest doctors/hospitals/institutions as a horizontal scroll or grid

**Data Structure:**

```json
{
  "keyword": "cardiologist"
}
```

**UX Notes:**

* Pressing Enter/search navigates to `/search?query=...`
* Search bar is centered and full-width on mobile

---

### 2. 👨‍⚕️ **Doctor List Page**

**Route:** `/doctors`

**Sections:**

* Filter/Search Panel (Top or Sidebar):

  * Fields: Keyword, specialization, location, institution
* List of Doctor Cards:

  * Layout: Grid or vertical list
  * Card fields: Name, specialization, image, institution, location, verified badge
* Pagination

**Data Structure:**

```json
{
  "id": "doc-001",
  "name": "Dr. Fatima Noor",
  "specialization": "Dermatologist",
  "institution": "OpenCare Clinic",
  "location": "Chattogram",
  "profileImageUrl": "/images/docs/fatima.jpg",
  "isVerified": true
}
```

**UX Notes:**

* Clicking a card navigates to `/doctors/:id`
* Pagination supports page numbers or infinite scroll

---

### 3. 👤 **Doctor Details Page**

**Route:** `/doctors/:id`

**Sections:**

1. **Doctor Header Section**

   * **Profile Image** (`profile.photo`) — show default avatar if `null`
   * **Full Name** (`profile.name`)
   * **Gender** (`profile.gender`)
   * **BMDC Number** (`bmdcNo`)
   * **Verified Badge** (`isVerified`)
   * **Contact Info** (if `profile.email` or `profile.phone` available)

2. **About / Description Section**

   * Field: `description` (optional long-form bio or intro)
   * If `null`, display “No description provided.”

3. **Degrees & Specializations**

   * List of **Degrees** from `doctorDegrees` (if available)
   * List of **Specializations** from `specializations` (if available)
   * Each item as a chip or bullet

4. **Workplace Information**

   * Section Title: “Practicing At”
   * Display workplaces from `doctorWorkplaces` (hospital/institution name, address)
   * If `null`, show "No workplaces available"

5. **Location**

   * Show `profile.district`, `profile.upazila`, `profile.union`, and `profile.address` if available
   * Optional: Embed map if address is specific

---

**Expected Data Structure:**

```json
{
  "id": 1,
  "bmdcNo": "A-52508",
  "description": "Specialist in internal medicine with 15 years of experience.",
  "isVerified": true,
  "profile": {
    "name": "Dr. Md Sidur Rahman",
    "gender": "FEMALE",
    "photo": "/images/doctors/sidur.jpg",
    "email": "dr.sidur@example.com",
    "phone": "017xxxxxxxx",
    "district": "Dhaka",
    "upazila": "Dhanmondi",
    "union": null,
    "address": "House 12, Road 8, Dhanmondi"
  },
  "doctorDegrees": [
    { "degree": "MBBS", "institute": "Dhaka Medical College", "year": "2008" }
  ],
  "specializations": [
    { "name": "Cardiology" }
  ],
  "doctorWorkplaces": [
    {
      "name": "OpenCare Hospital",
      "address": "Gulshan, Dhaka"
    }
  ]
}
```

---

**UX Notes:**

* Use a clean vertical layout on mobile, split column view on desktop
* Sections should collapse or hide if corresponding data is missing
* “Contact” button can initiate email or phone call (if info is present)
* Scrollspy or anchor nav for sections if page is long

---

### 4. 🏥 **Hospital List Page**

**Route:** `/hospitals`

**Sections:**

1. **Search & Filter Panel**

   * Filters:

     * `name` (text search)
     * `district` (dropdown from district list)
     * `division` (optional, for hierarchical filtering)
     * `hospitalType.englishName` (e.g., College, Clinic)
     * `organizationType.name` (e.g., Government, Private)

2. **Hospital Card List** (grid or vertical list)

   * Card Elements:

     * `name` (English) and optionally `bnName` (Bangla)
     * `hospitalType.englishName` or `banglaName`
     * `organizationType.name` or `banglaName`
     * `district.name` or `bnName`
     * `numberOfBed` (if available)
     * `websiteUrl` as an external link (open in new tab)
     * Optional: Static map preview or location icon using `lat` and `lon`

3. **Pagination**

   * Based on `totalItems` (if present)
   * Support for page navigation or infinite scroll

---

**Expected Data Structure:**

```json
{
  "id": 1,
  "name": "Dhaka Medical College Hospital",
  "bnName": "ঢাকা মেডিকেল কলেজ হাসপাতাল",
  "numberOfBed": 1700,
  "district": {
    "name": "Dhaka",
    "bnName": "ঢাকা"
  },
  "hospitalType": {
    "englishName": "College",
    "banglaName": "কলেজ"
  },
  "organizationType": {
    "name": "Government",
    "banglaName": "সরকারি"
  },
  "lat": "23.72611495235723",
  "lon": "90.39758820237896",
  "websiteUrl": "https://dmch.gov.bd/"
}
```

---

**UX Notes:**

* Clicking a hospital card opens `/hospitals/:id`
* Show badge-style labels for type and organization (e.g., "College", "Government")
* If no beds or map info, hide gracefully
* Use link icon or "Visit Website" button for `websiteUrl`
* Search and filters should debounce and update result list without full page reload
* Responsive card layout: 1 column on mobile, 2–3 on tablet/desktop

---

### 5. 🏥 **Hospital Details Page**

**Route:** `/hospitals/:id`

**Sections:**

1. **Header Section**

   * **Hospital Name**: `name` (English), optionally `bnName` (Bangla)
   * **Type & Ownership**:

     * `hospitalType.englishName` (e.g., "College")
     * `organizationType.name` (e.g., "Government")
   * **Verified Badge** (optional if policy applies)
   * **Website Link**: `websiteUrl` with button “Visit Website”

2. **Basic Information Block**

   * **Number of Beds**: `numberOfBed`
   * **Location Info**:

     * `district.name` + `division.name` (in both English & Bangla if needed)
     * `district.url` and `division.url` as external links
   * **Map Preview**:

     * Use `lat` and `lon` to show hospital location on embedded or static map

3. **Organization Description**

   * `organizationType.description` as a paragraph or info box

4. **Optional Location Hierarchy**

   * `district`, `upazila`, `union` if available

---

**Expected Data Structure:**

```json
{
  "id": 1,
  "name": "Dhaka Medical College Hospital",
  "bnName": "ঢাকা মেডিকেল কলেজ হাসপাতাল",
  "numberOfBed": 1700,
  "hospitalType": {
    "englishName": "College",
    "banglaName": "কলেজ"
  },
  "organizationType": {
    "name": "Government",
    "banglaName": "সরকারি",
    "description": "Government Description"
  },
  "district": {
    "name": "Dhaka",
    "bnName": "ঢাকা",
    "url": "www.dhaka.gov.bd",
    "division": {
      "name": "Dhaka",
      "bnName": "ঢাকা",
      "url": "www.dhakadiv.gov.bd"
    }
  },
  "lat": "23.72611495235723",
  "lon": "90.39758820237896",
  "websiteUrl": "https://dmch.gov.bd/"
}
```

---

**UX Notes:**

* Use breadcrumb nav: Home > Hospitals > `Hospital Name`
* External links (`websiteUrl`, district/division URLs) open in a new tab
* If `numberOfBed` is `null`, hide the field
* Use a map component to visually show the hospital’s location
* Responsive layout:

  * Top info block + sidebar map on desktop
  * Stacked layout on mobile

---

### 6. 🏛 **Institution List Page**

**Route:** `/institutions`

**Sections:**

1. **Search & Filter Panel**

   * Filters:

     * `name` (text input)
     * `district` or `division` (dropdowns)
     * `hospitalType.englishName` (e.g., College, Clinic)
     * `organizationType.name` (e.g., Government, Private)
     * `establishedYear` (range or from/to year optional)

2. **Institution Card List** (grid or vertical list)

   * Card Elements:

     * `acronym` (e.g., DMC, SSMC)
     * `name` and `bnName` (both English & Bangla if available)
     * `establishedYear`
     * `enroll` (number of enrolled students)
     * `district.name` + `division.name`
     * `hospitalType.englishName`
     * `organizationType.name`
     * `websiteUrl` as an external link (optional)
     * Optional: Map preview if `lat` and `lon` are available

3. **Pagination**

   * Supports numbered navigation or infinite scroll

---

**Expected Data Structure:**

```json
{
  "id": 1,
  "acronym": "DMC",
  "name": "Dhaka Medical College",
  "bnName": "ঢাকা মেডিকেল কলেজ",
  "establishedYear": 1946,
  "enroll": 230,
  "district": {
    "name": "Dhaka",
    "bnName": "ঢাকা",
    "division": {
      "name": "Dhaka",
      "bnName": "ঢাকা"
    }
  },
  "hospitalType": {
    "englishName": "College"
  },
  "organizationType": {
    "name": "Government"
  },
  "lat": "23.725983288480617",
  "lon": "90.39573371854017",
  "websiteUrl": "http://dmc.edu.bd"
}
```

---

**UX Notes:**

* Clicking a card opens `/institutions/:id`
* Cards should be responsive, with 1–3 columns depending on screen width
* If `lat` and `lon` present, show map icon or preview
* “Visit Website” button for `websiteUrl` (open in new tab)
* If any field is missing (e.g., `lat`, `enroll`, `websiteUrl`), hide it gracefully
* Search and filters should dynamically update list (AJAX or debounce)

---

### 7. 🎓 **Institution Details Page**

**Route:** `/institutions/:id`

**Sections:**

1. **Header Section**

   * **Institution Name**: `name` (English) and optionally `bnName` (Bangla)
   * **Acronym**: Display `acronym` (e.g., DMC)
   * **Ownership & Type**:

     * `organizationType.name` (e.g., "Government")
     * `hospitalType.englishName` (e.g., "College") — use a better label like "Institution Type" if needed
   * **Website Button**: `websiteUrl` shown with a button “Visit Website” that opens in a new tab

2. **Basic Information Block**

   * **Established Year**: `establishedYear`
   * **Enrolled Students**: `enroll`
   * **Location Info**:

     * `district.name` + `division.name` (and optionally `bnName` for both)
     * `district.url` and `division.url` shown as external links
   * **Map Preview**:

     * Use `lat` and `lon` to show institution’s location via embedded or static map

3. **Organization Description**

   * `organizationType.description` shown in an info box or as a paragraph

4. **Optional Hierarchy Info**

   * Show `district`, optionally `upazila`, and `union` if future data includes them

---

**Expected Data Structure:**

```json
{
  "id": 1,
  "acronym": "DMC",
  "name": "Dhaka Medical College",
  "bnName": "ঢাকা মেডিকেল কলেজ",
  "establishedYear": 1946,
  "enroll": 230,
  "hospitalType": {
    "englishName": "College",
    "banglaName": "কলেজ"
  },
  "organizationType": {
    "name": "Government",
    "banglaName": "সরকারি",
    "description": "Government Description"
  },
  "district": {
    "name": "Dhaka",
    "bnName": "ঢাকা",
    "url": "www.dhaka.gov.bd",
    "division": {
      "name": "Dhaka",
      "bnName": "ঢাকা",
      "url": "www.dhakadiv.gov.bd"
    }
  },
  "lat": "23.725983288480617",
  "lon": "90.39573371854017",
  "websiteUrl": "http://dmc.edu.bd"
}
```

---

**UX Notes:**

* Use breadcrumb: `Home > Institutions > Institution Name`
* External links (e.g., website, district, division) open in a new tab
* Hide fields like `enroll`, `establishedYear` if `null`
* Responsive design:

  * Header + sidebar map on desktop
  * Stacked layout for mobile
* Make `acronym` stand out visually near the title

---

### 8. 📖 **Our Story Page**

**Route:** `/our-story`

As it is only content.

https://opencarebd.com/our-story

---


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI/UX First Phase #63

1. 🏠 Home Page

2. 👨‍⚕️ Doctor List Page

3. 👤 Doctor Details Page

4. 🏥 Hospital List Page

5. 🏥 Hospital Details Page

6. 🏛 Institution List Page

7. 🎓 Institution Details Page

8. 📖 Our Story Page

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

UI/UX First Phase #63

Description

1. 🏠 Home Page

2. 👨‍⚕️ Doctor List Page

3. 👤 Doctor Details Page

4. 🏥 Hospital List Page

5. 🏥 Hospital Details Page

6. 🏛 Institution List Page

7. 🎓 Institution Details Page

8. 📖 Our Story Page

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions