Angular Medical Service Project – Detailed Description 🔷 Project Overview: This is a modern Angular web application designed to provide an intuitive healthcare platform for patients. The goal is to connect users with qualified doctors, allow appointment bookings, showcase services and prices, and offer a seamless healthcare experience online. The UI uses a clean, responsive healthcare theme with modern CSS styling (soft blue/green tones, minimal UI, rounded elements, and icons).

🔷 Key Features (Patient Side):

1. Authentication: User Registration Page:

Fields: Full name, email, password, gender, date of birth, phone number.

Optional: Profile image upload.

Login Page:

Email + password fields.

Validation with error display.

JWT-based token authentication.

2. Home Page: Purpose: Encourage users to trust and use the platform.

Includes:

Welcome hero section with a healthcare-themed image or video.

Highlight cards: "Book trusted doctors", "Affordable services", "24/7 Support".

Testimonials or stats: “Over 5,000 happy patients”.

CTA buttons: "Find a Doctor", "Book Appointment".

3. Doctor Listing Page: List of all registered doctors.

Each card includes:

Name, specialty, profile picture, experience.

Star rating system (based on patient reviews).

"Book Appointment" button.

Filters: Specialty, rating, location (optional).

4. Service List Page: Grid or table of medical services provided.

Each item shows:

Service title (e.g., "General Checkup", "Dental Cleaning").

Description.

Price.

Optional filters: price range, category.

5. Appointment Booking Page: Form to book an appointment:

Select doctor.

Select service.

Choose date/time.

Optional message field.

Only authenticated users can book.

6. User Dashboard (optional): View upcoming and past appointments.

Edit profile.

Submit reviews for doctors.

🔷 Technologies & Tools: Frontend: Angular (v15+), TypeScript, RxJS.

Styling: SCSS / Tailwind CSS / Bootstrap 5 (choose one depending on design preference).

Icons & UI: FontAwesome or Material Icons.

State Management: Optional use of NgRx or simple service-based state.

🔷 Styling Guidelines: Color palette: Healthcare tones (e.g., #3f8efc, #72c7d3, #f5f8fb).

Typography: Clean and legible (e.g., Roboto, Open Sans).

Use card-based design for lists.

Responsive design: Mobile-first approach.

Smooth animations/transitions for interactions.

🧩 Component Suggestions: RegisterComponent

LoginComponent

HomeComponent

DoctorListComponent

ServiceListComponent

AppointmentComponent

UserDashboardComponent

develop this angular application I will give you mu backend models using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; using DocLink.Entities;

namespace DocLink.Models {

public enum AppointmentStatus
{
    Pending,
    Confirmed,
    Cancelled,
    Completed
}       
public class Appointment
{
    [Key]
    public int Id { get; set; }

    [Required]
    [DataType(DataType.DateTime)]
    public DateTime Date { get; set; }

    [Required]
    [ForeignKey("Patient")]
    public int PatientId { get; set; }
    public User Patient { get; set; }

    [Required]
    [ForeignKey("Doctor")]
    public int DoctorId { get; set; }
    public User Doctor { get; set; }

    [Required]
    public AppointmentStatus Status { get; set; }

    [Required]
    [StringLength(1000)]
    public string Description { get; set; }

    public PaymentTransaction? Payment { get; set; }
}

} using DocLink.Entities;

namespace DocLink.Models { public class DoctorAvailability { public int Id { get; set; } public int DoctorId { get; set; } public User Doctor { get; set; }

    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public DayOfWeek Day { get; set; }
}

} using System; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; using DocLink.Entities;

namespace DocLink.Models { public class DoctorReview { [Key] public int Id { get; set; }

    [Required]
    [ForeignKey("Patient")]
    public int PatientId { get; set; }
    public User Patient { get; set; }

    [Required]
    [ForeignKey("Doctor")]
    public int DoctorId { get; set; }
    public User Doctor { get; set; }

    [Required]
    [Range(1, 5)]
    public int Stars { get; set; }

    [Required]
    [StringLength(1000)]
    public string Comment { get; set; }

    [Required]
    [DataType(DataType.DateTime)]
    public DateTime DatePosted { get; set; } = DateTime.UtcNow;
}

} using DocLink.Entities;

namespace DocLink.Models { public class HealthcareService { public int Id { get; set; } public int DoctorId { get; set; } public User Doctor { get; set; }

    public string Name { get; set; }
    public string Description { get; set; }
    public string Category { get; set; } 
    public string ImageUrl { get; set; }
    public decimal? Price { get; set; }
    public int DurationMinutes { get; set; }
}

} using DocLink.Entities;

namespace DocLink.Models { public class MedicalClinic {

    public int Id { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public string Phone { get; set; }
    public string? WebsiteUrl { get; set; }
    public string City { get; set; }
    public string Country { get; set; }

    public ICollection<User>? Doctors { get; set; }
}

} using DocLink.Entities;

namespace DocLink.Models { public class PatientMedicalRecord { public int Id { get; set; } public int PatientId { get; set; } public User Patient { get; set; }

    public DateTime CreatedAt { get; set; }
    public string RecordDetails { get; set; }
}

} using System; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; using DocLink.Entities;

namespace DocLink.Models { public enum PaymentStatus { Pending, Paid, Failed }

public class PaymentTransaction
{
    [Key]
    public int Id { get; set; }

    [Required]
    [ForeignKey("Appointment")]
    public int AppointmentId { get; set; }
    public Appointment Appointment { get; set; }

    [Required]
    [Column(TypeName = "decimal(18,2)")]
    public decimal Amount { get; set; }

    [Required]
    [DataType(DataType.DateTime)]
    public DateTime PaymentDate { get; set; }

    [Required]
    public PaymentStatus Status { get; set; }

    [Required]
    [ForeignKey("User")]
    public int UserId { get; set; }
    public User User { get; set; }
}

}

namespace DocLink.Models { public class AppointmentTimeSlot { public int Id { get; set; } public TimeSpan Time { get; set; } public string Display { get; set; }

}

} using DocLink.Models;

namespace DocLink.Entities { public enum UserRole { Patient, Doctor, Admin } public class User { public int Id { get; set; } public string Username { get; set; } = string.Empty; public string PasswordHash { get; set; } = string.Empty; public UserRole Role { get; set; } = UserRole.Patient; public string? RefreshToken { get; set; } public DateTime? RefreshTokenExpiryTime { get; set; } public string? FirstName { get; set; } public string? LastName { get; set; } public string? PhoneNumber { get; set; } public string? Email { get; set; }

    public string? Speciality { get; set; }
    public string? Description { get; set; }

    public string? Diploma { get; set; }
    public string? ProfilePhotoUrl { get; set; }

    public bool IsProfileComplete { get; set; } = false;

    public int? ClinicId { get; set; }
    public MedicalClinic? Clinic { get; set; }

    public ICollection<DoctorAvailability>? Availabilities { get; set; }
    public ICollection<DoctorReview>? ReviewsReceived { get; set; }  // As doctor
    public ICollection<DoctorReview>? ReviewsWritten { get; set; }   // As patient
    public ICollection<HealthcareService>? ServicesOffered { get; set; }
    public ICollection<Appointment>? DoctorAppointments { get; set; }
    public ICollection<Appointment>? PatientAppointments { get; set; }
    public ICollection<PaymentTransaction>? PaymentTransactions { get; set; }
}

} use fake data for now but keep it so I can integrate my backend later keep the code simple and clean I am using standalone:false so all the modules are declared in app.module give me the full project code in angular