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

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

@@ -8,16 +8,18 @@ import { DataTable } from '@/components/data-table/data-table'
 import { DataTableToolbar } from '@/components/data-table/data-table-toolbar'
 import { TaskStatusPill } from '@/components/crm/task-status-pill'
 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'
 import { Switch } from '@/components/ui/switch'
 import { Textarea } from '@/components/ui/textarea'
 import { useToast } from '@/components/ui/use-toast'
 import { useCreateTaskMutation, useTasksQuery } from '@/features/tasks/hooks'
+import { useDealsQuery } from '@/features/deals/hooks'
 import { useDebounce } from '@/hooks/use-debounce'
 import { formatDate, formatRelativeDate } from '@/lib/utils'
-import type { Task } from '@/types/crm'
+import type { Deal, Task } from '@/types/crm'
 
 const taskFormSchema = z
   .object({
@@ -63,6 +65,7 @@ const TasksPage = () => {
   }, [tasks, search])
 
   const createTask = useCreateTaskMutation()
+  const { data: deals = [], isLoading: dealsLoading } = useDealsQuery({ pageSize: 100, orderBy: 'updated_at', order: 'desc' })
 
   const columns = useMemo<ColumnDef<Task>[]>(
     () => [
@@ -129,7 +132,7 @@ const TasksPage = () => {
               className="w-[140px]"
             />
             <div className="flex items-center gap-2 rounded-lg border bg-background px-3 py-1.5 text-sm">
-              <Switch checked={onlyOpen} onCheckedChange={setOnlyOpen} id="only-open" />
+              <Switch checked={onlyOpen} onCheckedChange={(value) => setOnlyOpen(value === true)} id="only-open" />
               <label htmlFor="only-open" className="cursor-pointer">
                 Только открытые
               </label>
@@ -143,6 +146,8 @@ const TasksPage = () => {
         open={drawerOpen}
         onOpenChange={setDrawerOpen}
         isSubmitting={createTask.isPending}
+        deals={deals}
+        dealsLoading={dealsLoading}
         onSubmit={async (values) => {
           const payload = {
             deal_id: Number(values.dealId),
@@ -168,9 +173,11 @@ interface TaskDrawerProps {
   onOpenChange: (open: boolean) => void
   onSubmit: (values: TaskFormValues) => Promise<void>
   isSubmitting: boolean
+  deals: Deal[]
+  dealsLoading: boolean
 }
 
-const TaskDrawer = ({ open, onOpenChange, onSubmit, isSubmitting }: TaskDrawerProps) => {
+const TaskDrawer = ({ open, onOpenChange, onSubmit, isSubmitting, deals, dealsLoading }: TaskDrawerProps) => {
   const form = useForm<TaskFormValues>({
     resolver: zodResolver(taskFormSchema),
     defaultValues: defaultTaskValues,
@@ -208,10 +215,24 @@ const TaskDrawer = ({ open, onOpenChange, onSubmit, isSubmitting }: TaskDrawerPr
               name="dealId"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>ID сделки</FormLabel>
-                  <FormControl>
-                    <Input type="number" placeholder="201" {...field} />
-                  </FormControl>
+                  <FormLabel>Сделка</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange} disabled={dealsLoading || !deals.length}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={dealsLoading ? 'Загружаем сделки…' : 'Выберите сделку'} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {deals.map((deal) => (
+                        <SelectItem key={deal.id} value={String(deal.id)}>
+                          {deal.title} · #{deal.id}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    {deals.length ? 'Задача появится в таймлайне выбранной сделки.' : 'Сначала создайте сделку в разделе «Сделки».'}
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}