A
Anonymous

Mock Service Providers - Copy this React, Tailwind Component to your project

###-Prompt-for-User-Interface-Builder-----**Title:**-Detailed-Functionalities-and-User-Interface-for-Service-Provider-Vetting-System-**Objective:**-Create-a-comprehensive-user-interface-and-functionality-for-a-service-provider-vetting-system.-The-system-should-allow-users-to-manage-service-providers-through-various-stages-of-vetting,-view-detailed-information,-and-perform-actions-like-onboarding,-rejecting,-moving,-and-sending-emails.-The-UI-should-be-intuitive,-responsive,-and-built-using-React-with-Tailwind-CSS-for-styling.-----###-**Functionalities-and-User-Interface-Requirements**-####-**1.-Service-Provider-Details-Dialog-(`components_vetting_service-provider-details-dialog.jsx`)**---**Purpose:**-Display-detailed-information-about-a-selected-service-provider.---**Components:**---**Dialog:**-A-modal-dialog-that-opens-when-a-user-clicks-on-a-service-provider.---**Tabs:**---**Linked-Services:**-Display-a-list-of-services-linked-to-the-service-provider.---**Bio:**-Show-background-details-of-the-service-provider.---**History:**-Show-the-history-of-the-service-provider's-vetting-process.---**Close-Button:**-A-button-to-close-the-dialog.---**UI-Details:**---The-dialog-should-be-centered-on-the-screen-with-a-max-width-of-`4xl`.---Use-tabs-for-organizing-the-content-(Linked-Services,-Bio,-History).---Each-tab-should-contain-a-card-with-a-title-and-content-area.---The-close-button-should-be-positioned-at-the-bottom-right-of-the-dialog.-----####-**2.-Service-Provider-Card-(`components_vetting_service-provider-card.jsx`)**---**Purpose:**-Display-a-summary-of-a-service-provider's-information-in-a-card-format.---**Components:**---**Checkbox:**-Allows-the-user-to-select-the-service-provider-for-bulk-actions.---**Profile-Icon:**-A-placeholder-icon-representing-the-service-provider.---**Details:**---Name---Email---Phone-Number-(if-available)---Registration-Date---**UI-Details:**---The-card-should-have-a-white-background-with-rounded-corners-and-a-shadow.---The-checkbox-should-be-positioned-at-the-top-right-corner.---The-profile-icon-should-be-a-small-circle-with-a-user-icon-inside.---The-details-should-be-displayed-in-a-vertical-list-with-a-small-gap-between-each-item.-----####-**3.-Send-Email-Dialog-(`components_vetting_send-email-dialog.jsx`)**---**Purpose:**-Allow-users-to-send-an-email-to-selected-service-providers.---**Components:**---**Dialog:**-A-modal-dialog-for-composing-and-sending-emails.---**Textarea:**---Main-email-message-(rows:-6)---Additional-note-(optional)---**Buttons:**---Cancel:-Closes-the-dialog-without-sending-the-email.---Send:-Sends-the-email-to-the-selected-providers.---**UI-Details:**---The-dialog-should-have-a-simple-layout-with-two-textareas-and-two-buttons-at-the-bottom.---The-textareas-should-be-stacked-vertically-with-a-small-gap-between-them.---The-buttons-should-be-aligned-to-the-right-side-of-the-dialog.-----####-**4.-Reject-Dialog-(`components_vetting_reject-dialog.jsx`)**---**Purpose:**-Allow-users-to-reject-selected-service-providers-with-a-reason.---**Components:**---**Dialog:**-A-modal-dialog-for-confirming-rejection.---**Text:**-Warning-message-about-the-irreversible-nature-of-the-action.---**Textarea:**-Reason-for-rejection-(required).---**Buttons:**---Cancel:-Closes-the-dialog-without-rejecting.---Reject:-Confirms-the-rejection-with-the-provided-reason.---**UI-Details:**---The-dialog-should-have-a-warning-message-at-the-top.---The-text-area-for-the-reason-should-be-required-and-clearly-labeled.---The-buttons-should-be-aligned-to-the-right-side-of-the-dialog.-----####-**5.-Onboard-Dialog-(`components_vetting_onboard-dialog.jsx`)**---**Purpose:**-Allow-users-to-onboard-selected-service-providers.---**Components:**---**Dialog:**-A-modal-dialog-for-confirming-onboarding.---**Text:**-Confirmation-message-about-moving-candidates-to-the-service-providers-list.---**Select-Dropdowns:**---Service-Types-(e.g.,-Child-Care,-Health-Advisor,-Home-Care)---Employment-Type-(e.g.,-Gig,-Full-Time,-Part-Time)---**Textarea:**-Optional-note-for-onboarding.---**Buttons:**---Cancel:-Closes-the-dialog-without-onboarding.---Confirm:-Confirms-the-onboarding-with-the-selected-options.---**UI-Details:**---The-dialog-should-have-a-confirmation-message-at-the-top.---The-select-dropdowns-should-allow-users-to-choose-service-types-and-employment-types.---The-text-area-for-the-note-should-be-optional.---The-buttons-should-be-aligned-to-the-right-side-of-the-dialog.-----####-**6.-Move-Dialog-(`components_vetting_move-dialog.jsx`)**---**Purpose:**-Allow-users-to-move-selected-service-providers-to-a-different-vetting-stage.---**Components:**---**Dialog:**-A-modal-dialog-for-confirming-the-move.---**Select-Dropdown:**-Vetting-status-(e.g.,-Document-Verification,-Guarantee-and-Medical,-Interview,-etc.).---**Textarea:**-Optional-note-for-the-move.---**Buttons:**---Cancel:-Closes-the-dialog-without-moving.---Confirm:-Confirms-the-move-with-the-selected-options.---**UI-Details:**---The-dialog-should-have-a-select-dropdown-for-choosing-the-new-vetting-stage.---The-text-area-for-the-note-should-be-optional.---The-buttons-should-be-aligned-to-the-right-side-of-the-dialog.-----####-**7.-Kanban-Board-(`components_vetting_kanban-board.jsx`)**---**Purpose:**-Display-the-vetting-process-as-a-drag-and-drop-Kanban-board.---**Components:**---**Columns:**-Each-column-represents-a-stage-in-the-vetting-process-(e.g.,-Application-Submitted,-Document-Verification,-Interview,-etc.).---**Cards:**-Each-card-represents-a-service-provider-and-contains-a-`ServiceProviderCard`.---**Drag-and-Drop:**-Users-can-drag-cards-between-columns-to-move-service-providers-through-the-vetting-process.---**Double-Click:**-Double-clicking-a-card-opens-the-`ServiceProviderDetailsDialog`.---**UI-Details:**---The-board-should-be-horizontally-scrollable-with-a-fixed-height.---Each-column-should-have-a-title-and-a-count-of-items-in-that-column.---The-background-color-of-each-column-should-vary-based-on-the-stage-(e.g.,-blue-for-Application-Submitted,-green-for-Document-Verification,-etc.).---Cards-should-be-draggable-and-droppable-within-and-between-columns.-----####-**8.-Vetting-Page-(`app_vetting_page.jsx`)**---**Purpose:**-The-main-page-for-managing-service-providers-through-the-vetting-process.---**Components:**---**Header:**-Displays-the-title-"Vetting-Applicants"-and-a-search-bar.---**View-Mode-Toggle:**-Allows-users-to-switch-between-a-Kanban-board-view-and-a-table-view.---**Vetting-Process-Selector:**-Allows-users-to-choose-between-different-vetting-processes-(e.g.,-Process-1,-Process-2).---**Filter-Section:**---Category-Filter---Status-Filter---Step-Filter---Date-Filter---**Action-Buttons:**---Move:-Opens-the-`MoveDialog`.---Onboard:-Opens-the-`OnboardDialog`.---Reject:-Opens-the-`RejectDialog`.---Send-Email:-Opens-the-`SendEmailDialog`.---**Kanban-Board-or-Table:**-Displays-the-service-providers-in-either-a-Kanban-board-or-a-table-format.---**UI-Details:**---The-page-should-have-a-clear-layout-with-the-header,-filters,-and-action-buttons-at-the-top.---The-Kanban-board-or-table-should-be-the-main-content-area,-taking-up-most-of-the-screen.---The-filters-should-be-collapsible-and-expandable.---The-action-buttons-should-be-clearly-labeled-with-icons.-----###-**Additional-Notes:**---**Responsiveness:**-The-UI-should-be-fully-responsive-and-work-well-on-both-desktop-and-mobile-devices.---**Styling:**-Use-Tailwind-CSS-for-styling-to-ensure-consistency-and-ease-of-customization.---**Interactivity:**-Ensure-all-interactive-elements-(buttons,-checkboxes,-dropdowns,-etc.)-have-hover,-focus,-and-active-states-for-better-user-experience.---**Accessibility:**-Ensure-the-UI-is-accessible,-with-proper-ARIA-labels-and-keyboard-navigation.-----###-**Expected-Output:**---A-fully-functional-and-visually-appealing-user-interface-for-managing-service-providers-through-the-vetting-process.---The-UI-should-include-all-the-components-and-functionalities-described-above,-with-a-focus-on-usability-and-responsiveness.-----This-prompt-should-provide-a-detailed-and-comprehensive-guide-for-generating-the-UI-and-functionalities-for-the-service-provider-vetting-system.

Prompt
Component Preview

About

mockServiceProviders - Manage service providers with detailed dialogs, onboarding, and rejection features, built with React and Tailwin. Copy template now!

Share

Last updated 1 month ago