Styled Form Control - Copy this React, Mui Component to your project

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.import-{-Dialog,-DialogContent,-DialogHeader,-DialogTitle-}-from-"@/components/ui/dialog";-import-{-Select,-SelectContent,-SelectItem,-SelectTrigger,-SelectValue-}-from-"@/components/ui/select";-import-{-Textarea-}-from-"@/components/ui/textarea";-import-{-Button-}-from-"@/components/ui/button";-export-function-MoveDialog({-isOpen,-onClose,-selectedProviders-})-{-return-(-<Dialog-open={isOpen}-onOpenChange={onClose}>-<DialogContent>-<DialogHeader>-<DialogTitle>Move-Service-Providers</DialogTitle>-</DialogHeader>-<div-className="space-y-4">-<Select>-<SelectTrigger>-<SelectValue-placeholder="Select-Vetting-Status"-/>-</SelectTrigger>-<SelectContent>-<SelectItem-value="document-verification">Document-Verification</SelectItem>-<SelectItem-value="guarantee-medical">Guarantee-and-Medical</SelectItem>-<SelectItem-value="interview">Interview</SelectItem>-<SelectItem-value="get-exam">Get-Exam</SelectItem>-<SelectItem-value="re-examination">Re-examination</SelectItem>-</SelectContent>-</Select>-<Textarea-placeholder="Additional-Note-(Optional)"-/>-<div-className="flex-justify-end-space-x-2">-<Button-variant="outline"-onClick={onClose}>Cancel</Button>-<Button>Confirm</Button>-</div>-</div>-</DialogContent>-</Dialog>-);-}