feat: enhance forms with improved select components and data handling for contacts and deals

frontend/src/pages/contacts/contacts-page.tsx

@@ -8,7 +8,7 @@ import { z } from 'zod'
 import { DataTable } from '@/components/data-table/data-table'
 import { DataTableToolbar } from '@/components/data-table/data-table-toolbar'
 import { Button } from '@/components/ui/button'
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet'
@@ -50,7 +50,7 @@ const ContactsPage = () => {
   const deleteContact = useDeleteContactMutation()
   const { toast } = useToast()
 
-  const ownerOptions = useMemo(() => {
+  const ownerIds = useMemo(() => {
     const ids = new Set<number>()
     contacts.forEach((contact) => {
       if (contact.owner_id) ids.add(contact.owner_id)
@@ -58,6 +58,8 @@ const ContactsPage = () => {
     return Array.from(ids).sort((a, b) => a - b)
   }, [contacts])
 
+  const ownerSelectOptions = useMemo(() => ownerIds.map((ownerId) => ({ value: String(ownerId), label: `Сотрудник #${ownerId}` })), [ownerIds])
+
   const openCreateDrawer = () => {
     setEditingContact(null)
     setDrawerOpen(true)
@@ -151,14 +153,14 @@ const ContactsPage = () => {
               </Button>
             }
           >
-            {ownerOptions.length ? (
+            {ownerIds.length ? (
               <Select value={ownerFilter} onValueChange={setOwnerFilter}>
                 <SelectTrigger className="w-[200px] bg-background">
                   <SelectValue placeholder="Все владельцы" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="all">Все владельцы</SelectItem>
-                  {ownerOptions.map((ownerId) => (
+                  {ownerIds.map((ownerId) => (
                     <SelectItem key={ownerId} value={String(ownerId)}>
                       Сотрудник #{ownerId}
                     </SelectItem>
@@ -174,6 +176,7 @@ const ContactsPage = () => {
         onOpenChange={setDrawerOpen}
         contact={editingContact}
         isSubmitting={createContact.isPending || updateContact.isPending}
+        ownerOptions={ownerSelectOptions}
         onSubmit={async (values) => {
           const payload = {
             name: values.name,
@@ -206,9 +209,10 @@ interface ContactFormDrawerProps {
   contact: Contact | null
   onSubmit: (values: ContactFormValues) => Promise<void>
   isSubmitting: boolean
+  ownerOptions: Array<{ value: string; label: string }>
 }
 
-const ContactFormDrawer = ({ open, onOpenChange, contact, onSubmit, isSubmitting }: ContactFormDrawerProps) => {
+const ContactFormDrawer = ({ open, onOpenChange, contact, onSubmit, isSubmitting, ownerOptions }: ContactFormDrawerProps) => {
   const form = useForm<ContactFormValues>({
     resolver: zodResolver(contactFormSchema),
     defaultValues,
@@ -285,10 +289,23 @@ const ContactFormDrawer = ({ open, onOpenChange, contact, onSubmit, isSubmitting
               name="ownerId"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>ID владельца (необязательно)</FormLabel>
-                  <FormControl>
-                    <Input type="number" min={1} placeholder="Например, 42" {...field} />
-                  </FormControl>
+                  <FormLabel>Владелец</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange} disabled={!ownerOptions.length}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={ownerOptions.length ? 'Выберите владельца' : 'Назначение недоступно'} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="">Назначить меня</SelectItem>
+                      {ownerOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>Выберите руководителя из списка или оставьте поле пустым, чтобы назначить себя.</FormDescription>
                   <FormMessage />
                 </FormItem>
               )}