Patient List - Copy this React, Tailwind Component to your project
Please-create-a-mockup-of-a-"Patient-List"-page-that-displays-a-searchable,-paginated-list-of-patients-with-relevant-fields.-The-page-should-have-the-title-"Patient-Management".-At-the-top,-include-a-search-bar-with-fields-to-search-by-emr_patient_id,-last_name,-first_name,-birth_date,-mobile_phone,-email,-national_id,-and-insurance_number.-Add-a-button-labeled-"Search"-to-initiate-the-search.-Below-the-search-bar,-create-a-table-that-lists-patient-records-with-the-following-column-headers:-EMR-Patient-ID,-Title,-First-Name,-Last-Name,-Date-of-Birth,-Gender,-Mobile-Phone,-Email,-and-action-buttons-for-editing-and-deleting-each-record.-Include-sample-data-for-10-patients-and-follow-the-following-example-EMR-Patient-ID-"123456",-Title-"Dr.",-First-Name-"John",-Last-Name-"Doe",-Date-of-Birth-"1980-01-01",-Gender-"Male",-Mobile-Phone-"+4917630739654",-and-Email-"john.doe@example.com".-Add-pagination-controls-at-the-bottom-of-the-table-with-"Previous"-and-"Next"-buttons-to-navigate-between-pages,-and-show-the-current-page-number-alongside-the-total-number-of-pages,-such-as-"Page-1-of-10".-For-better-usability,-place-the-search-bar-at-the-top-of-the-page-so-users-can-easily-access-it.-Arrange-the-input-fields-in-the-search-bar-horizontally-with-labels-above-each-field-for-a-compact-design.-Make-the-table-header-sticky-when-scrolling,-so-users-can-always-see-the-column-names-even-with-long-lists.-Place-action-buttons-like-"Edit"-and-"Delete"-on-the-far-right-of-each-row-to-keep-them-consistent,-and-use-icons-on-these-buttons-for-easy-recognition.-Apply-alternating-row-colors-in-the-table-to-make-it-easier-to-scan-through-patient-records.-Consider-showing-only-essential-columns-by-default,-such-as-Name,-EMR-ID,-and-Date-of-Birth,-while-allowing-users-to-customize-which-columns-are-visible-if-they-need-more-details.
