Update pnpm-lock.yaml to include new dependencies for @dnd-kit packages; enhance frontend documentation with MCP patterns and shadcn guidelines; refactor route handling for groups and services; implement new DataTableCard and KanbanBoard components for better domain and service management; add service binding functionality and improve DNS record management with new schemas and queries.

apps/web/src/routes/_auth/domains/$domainId/dns.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useMemo, useState } from 'react'
 import { useForm, Controller } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { toast } from 'sonner'
@@ -7,17 +8,10 @@ import { domainDetailQueryOptions, dnsKeys, dnsListQueryOptions, subdomainKeys }
 import { api } from '@/lib/api-client'
 import { createDnsRecordSchema, type CreateDnsRecordInput } from '@/lib/schemas'
 import { PageHeader } from '@/components/page-header'
-import { StatusBadge } from '@/components/status-badge'
 import { DataTableCard } from '@/components/data-table-card'
+import { DnsRecordsTable } from '@/components/dns-records-table'
 import { Button } from '@cfdm/ui/components/button'
 import { Input } from '@cfdm/ui/components/input'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@cfdm/ui/components/card'
 import {
   Field,
   FieldGroup,
@@ -30,19 +24,21 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@cfdm/ui/components/select'
-import { Switch } from '@cfdm/ui/components/switch'
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@cfdm/ui/components/table'
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@cfdm/ui/components/sheet'
+import { Switch } from '@cfdm/ui/components/switch'
 import { Spinner } from '@cfdm/ui/components/spinner'
 
 const DNS_TYPES = ['A', 'AAAA', 'CNAME', 'TXT', 'MX'] as const
 
+const dnsTypeItems = DNS_TYPES.map((type) => ({ label: type, value: type }))
+
 export const Route = createFileRoute('/_auth/domains/$domainId/dns')({
   loader: ({ context: { queryClient }, params }) => {
     const id = Number(params.domainId)
@@ -55,6 +51,7 @@ export const Route = createFileRoute('/_auth/domains/$domainId/dns')({
 })
 
 function DnsPage() {
+  const [sheetOpen, setSheetOpen] = useState(false)
   const { domainId } = Route.useParams()
   const id = Number(domainId)
   const queryClient = useQueryClient()
@@ -97,6 +94,7 @@ function DnsPage() {
         ttl: 1,
         proxied: false,
       })
+      setSheetOpen(false)
       toast.success('DNS-запись создана')
     },
     onError: (err) => {
@@ -119,46 +117,78 @@ function DnsPage() {
     createMutation.mutate(values)
   })
 
+  const hasRecords = useMemo(() => (records?.length ?? 0) > 0, [records])
+
   return (
-    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+    <div className="@container/main flex flex-col gap-4 py-4 md:gap-6 md:py-6">
       <PageHeader
         title={`${domain?.zone_name ?? ''} — DNS`}
         description="Управление DNS-записями зоны"
         back={{ to: '/domains', label: '← К списку доменов' }}
         actions={
-          <Button
-            onClick={() => syncMutation.mutate()}
-            disabled={syncMutation.isPending}
-          >
-            {syncMutation.isPending && (
-              <Spinner data-icon="inline-start" />
-            )}
-            {syncMutation.isPending ? 'Синхронизация…' : 'Синхронизировать с Cloudflare'}
-          </Button>
+          <>
+            <Button variant="outline" onClick={() => setSheetOpen(true)}>
+              Новая запись
+            </Button>
+            <Button
+              onClick={() => syncMutation.mutate()}
+              disabled={syncMutation.isPending}
+            >
+              {syncMutation.isPending && (
+                <Spinner data-icon="inline-start" />
+              )}
+              {syncMutation.isPending ? 'Синхронизация…' : 'Синхронизировать с Cloudflare'}
+            </Button>
+          </>
         }
       />
-      <Card>
-        <CardHeader>
-          <CardTitle>Новая запись</CardTitle>
-          <CardDescription>Добавить DNS-запись в зону</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleCreate}>
-            <FieldGroup className="grid gap-4 md:grid-cols-6">
+
+      <DataTableCard
+        title="DNS-записи"
+        description="Записи в зоне. Несколько A/AAAA с одним именем выделены фоном и разделителем"
+        emptyTitle="DNS-записи не найдены"
+        emptyDescription="Создайте запись или синхронизируйте зону с Cloudflare"
+        isEmpty={!hasRecords}
+      >
+        {hasRecords && (
+          <div className="p-4">
+            <DnsRecordsTable
+              records={records ?? []}
+              onDelete={(recordId) => deleteMutation.mutate(recordId)}
+              isDeleting={deleteMutation.isPending}
+            />
+          </div>
+        )}
+      </DataTableCard>
+
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Новая DNS-запись</SheetTitle>
+            <SheetDescription>
+              Добавить запись в зону {domain?.zone_name ?? ''}
+            </SheetDescription>
+          </SheetHeader>
+          <form onSubmit={handleCreate} className="flex flex-col gap-4 px-4">
+            <FieldGroup>
               <Field>
                 <FieldLabel htmlFor="record_type">Тип</FieldLabel>
                 <Controller
                   control={form.control}
                   name="record_type"
                   render={({ field }) => (
-                    <Select value={field.value} onValueChange={field.onChange}>
+                    <Select
+                      items={dnsTypeItems}
+                      value={field.value}
+                      onValueChange={field.onChange}
+                    >
                       <SelectTrigger id="record_type" className="w-full">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
-                        {DNS_TYPES.map((type) => (
-                          <SelectItem key={type} value={type}>
-                            {type}
+                        {dnsTypeItems.map((item) => (
+                          <SelectItem key={item.value} value={item.value}>
+                            {item.label}
                           </SelectItem>
                         ))}
                       </SelectContent>
@@ -168,11 +198,11 @@ function DnsPage() {
               </Field>
               <Field>
                 <FieldLabel htmlFor="name">Имя</FieldLabel>
-                <Input id="name" {...form.register('name')} />
+                <Input id="name" placeholder="@" {...form.register('name')} />
               </Field>
-              <Field className="md:col-span-2">
+              <Field>
                 <FieldLabel htmlFor="content">Значение</FieldLabel>
-                <Input id="content" {...form.register('content')} />
+                <Input id="content" placeholder="192.168.1.1" {...form.register('content')} />
               </Field>
               <Field>
                 <FieldLabel htmlFor="ttl">TTL</FieldLabel>
@@ -182,7 +212,7 @@ function DnsPage() {
                   {...form.register('ttl', { valueAsNumber: true })}
                 />
               </Field>
-              <Field className="flex flex-col justify-end gap-2">
+              <Field className="flex flex-row items-center justify-between gap-4">
                 <FieldLabel htmlFor="proxied">Прокси Cloudflare</FieldLabel>
                 <Controller
                   control={form.control}
@@ -196,55 +226,18 @@ function DnsPage() {
                   )}
                 />
               </Field>
-              <Field className="flex items-end">
-                <Button type="submit" disabled={createMutation.isPending}>
-                  {createMutation.isPending && (
-                    <Spinner data-icon="inline-start" />
-                  )}
-                  {createMutation.isPending ? 'Создание…' : 'Создать'}
-                </Button>
-              </Field>
             </FieldGroup>
+            <SheetFooter>
+              <Button type="submit" disabled={createMutation.isPending} className="w-full">
+                {createMutation.isPending && (
+                  <Spinner data-icon="inline-start" />
+                )}
+                {createMutation.isPending ? 'Создание…' : 'Создать'}
+              </Button>
+            </SheetFooter>
           </form>
-        </CardContent>
-      </Card>
-      <DataTableCard title="DNS-записи" description="Записи в зоне">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Тип</TableHead>
-              <TableHead>Имя</TableHead>
-              <TableHead>Значение</TableHead>
-              <TableHead>TTL</TableHead>
-              <TableHead>Синхронизация</TableHead>
-              <TableHead className="w-24" />
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {records?.map((r) => (
-              <TableRow key={r.id}>
-                <TableCell>{r.record_type}</TableCell>
-                <TableCell>{r.name}</TableCell>
-                <TableCell className="max-w-xs truncate">{r.content}</TableCell>
-                <TableCell>{r.ttl}</TableCell>
-                <TableCell>
-                  <StatusBadge status={r.sync_status} />
-                </TableCell>
-                <TableCell>
-                  <Button
-                    variant="destructive"
-                    size="sm"
-                    onClick={() => deleteMutation.mutate(r.id)}
-                    disabled={deleteMutation.isPending}
-                  >
-                    Удалить
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </DataTableCard>
+        </SheetContent>
+      </Sheet>
     </div>
   )
 }

apps/web/src/routes/_auth/domains/$domainId/index.tsx

@@ -1,9 +1,18 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
-import { domainDetailQueryOptions, domainKeys, subdomainKeys, subdomainsListQueryOptions } from '@/queries'
+import {
+  domainDetailQueryOptions,
+  domainKeys,
+  domainServiceBindingsQueryOptions,
+  subdomainKeys,
+  subdomainsListQueryOptions,
+} from '@/queries'
 import { api } from '@/lib/api-client'
 import { PageHeader } from '@/components/page-header'
+import { StatusBadge } from '@/components/status-badge'
+import { DomainBindingsCard } from '@/components/domain-bindings-card'
+import { Badge } from '@cfdm/ui/components/badge'
 import { Button } from '@cfdm/ui/components/button'
 import {
   Card,
@@ -18,6 +27,13 @@ import {
   EmptyHeader,
   EmptyTitle,
 } from '@cfdm/ui/components/empty'
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+} from '@cfdm/ui/components/item'
 import { Spinner } from '@cfdm/ui/components/spinner'
 
 export const Route = createFileRoute('/_auth/domains/$domainId/')({
@@ -26,6 +42,7 @@ export const Route = createFileRoute('/_auth/domains/$domainId/')({
     return Promise.all([
       queryClient.ensureQueryData(domainDetailQueryOptions(id)),
       queryClient.ensureQueryData(subdomainsListQueryOptions(id)),
+      queryClient.ensureQueryData(domainServiceBindingsQueryOptions(id)),
     ])
   },
   component: DomainOverviewPage,
@@ -37,12 +54,14 @@ function DomainOverviewPage() {
   const queryClient = useQueryClient()
   const { data: domain } = useQuery(domainDetailQueryOptions(id))
   const { data: subdomains } = useQuery(subdomainsListQueryOptions(id))
+  const { data: bindings } = useQuery(domainServiceBindingsQueryOptions(id))
 
   const syncMutation = useMutation({
     mutationFn: () => api.post(`/api/v1/domains/${id}/sync`),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: subdomainKeys.list(id) })
       queryClient.invalidateQueries({ queryKey: domainKeys.all })
+      queryClient.invalidateQueries({ queryKey: ['service-bindings'] })
       toast.success('Синхронизация завершена')
     },
     onError: (err) => {
@@ -82,6 +101,44 @@ function DomainOverviewPage() {
           </>
         }
       />
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Сводка</CardTitle>
+            <CardDescription>Основные параметры зоны</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3 text-sm">
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-muted-foreground">Статус</span>
+              {domain ? <StatusBadge status={domain.status} /> : '—'}
+            </div>
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-muted-foreground">Группа</span>
+              {domain?.group_id ? (
+                <Button
+                  variant="link"
+                  className="h-auto p-0"
+                  render={
+                    <Link
+                      to="/groups/$groupId"
+                      params={{ groupId: String(domain.group_id) }}
+                    />
+                  }
+                >
+                  Открыть группу
+                </Button>
+              ) : (
+                <Badge variant="outline">Без группы</Badge>
+              )}
+            </div>
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-muted-foreground">Последняя синхронизация</span>
+              <span className="font-medium">{domain?.last_synced_at ?? '—'}</span>
+            </div>
+          </CardContent>
+        </Card>
+        <DomainBindingsCard bindings={bindings ?? []} />
+      </div>
       <Card>
         <CardHeader>
           <CardTitle>Поддомены</CardTitle>
@@ -89,13 +146,18 @@ function DomainOverviewPage() {
         </CardHeader>
         <CardContent>
           {subdomains?.length ? (
-            <ul className="flex flex-col gap-1">
-              {subdomains.map((s) => (
-                <li key={s.id} className="text-sm">
-                  {s.fqdn}
-                </li>
+            <ItemGroup className="gap-0">
+              {subdomains.map((s, index) => (
+                <div key={s.id}>
+                  <Item variant="outline">
+                    <ItemContent>
+                      <ItemTitle className="font-mono font-normal">{s.fqdn}</ItemTitle>
+                    </ItemContent>
+                  </Item>
+                  {index < subdomains.length - 1 && <ItemSeparator />}
+                </div>
               ))}
-            </ul>
+            </ItemGroup>
           ) : (
             <Empty className="border border-dashed p-4">
               <EmptyHeader>

apps/web/src/routes/_auth/domains/index.tsx

@@ -6,15 +6,20 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { toast } from 'sonner'
 import { api } from '@/lib/api-client'
 import { createDomainSchema, type CreateDomainInput } from '@/lib/schemas'
-import { domainKeys, domainsListQueryOptions, groupsQueryOptions } from '@/queries'
+import { buildIpsByDomainId } from '@/lib/domain-ips'
+import {
+  domainKeys,
+  domainsListQueryOptions,
+  groupsQueryOptions,
+  serviceBindingsQueryOptions,
+} from '@/queries'
 import { PageHeader } from '@/components/page-header'
-import { StatusBadge } from '@/components/status-badge'
 import { DataTableCard } from '@/components/data-table-card'
+import { DomainsDataTable } from '@/components/domains-data-table'
 import { Button } from '@cfdm/ui/components/button'
 import { Input } from '@cfdm/ui/components/input'
 import {
   Card,
-  CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
@@ -32,13 +37,13 @@ import {
   SelectValue,
 } from '@cfdm/ui/components/select'
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@cfdm/ui/components/table'
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@cfdm/ui/components/sheet'
 import { Spinner } from '@cfdm/ui/components/spinner'
 
 export const Route = createFileRoute('/_auth/domains/')({
@@ -46,16 +51,26 @@ export const Route = createFileRoute('/_auth/domains/')({
     Promise.all([
       queryClient.ensureQueryData(domainsListQueryOptions()),
       queryClient.ensureQueryData(groupsQueryOptions()),
+      queryClient.ensureQueryData(serviceBindingsQueryOptions()),
     ]),
   component: DomainsPage,
 })
 
 function DomainsPage() {
-  const [groupId, setGroupId] = useState('')
-  const filterGroupId = groupId ? Number(groupId) : undefined
+  const [sheetOpen, setSheetOpen] = useState(false)
+  const [importGroupId, setImportGroupId] = useState('')
+  const [filterGroupId, setFilterGroupId] = useState('')
+  const listGroupId =
+    filterGroupId && filterGroupId !== 'none' ? Number(filterGroupId) : undefined
   const queryClient = useQueryClient()
-  const { data: domains } = useQuery(domainsListQueryOptions(filterGroupId))
+  const { data: domains } = useQuery(domainsListQueryOptions(listGroupId))
   const { data: groups } = useQuery(groupsQueryOptions())
+  const { data: bindings } = useQuery(serviceBindingsQueryOptions())
+
+  const ipsByDomainId = useMemo(
+    () => buildIpsByDomainId(bindings ?? []),
+    [bindings],
+  )
 
   const groupItems = useMemo(
     () => [
@@ -75,7 +90,8 @@ function DomainsPage() {
       api.post('/api/v1/domains', body),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: domainKeys.all })
-      form.reset({ zone_name: '', group_id: groupId })
+      form.reset({ zone_name: '', group_id: importGroupId })
+      setSheetOpen(false)
       toast.success('Домен импортирован')
     },
     onError: (err) => {
@@ -86,31 +102,89 @@ function DomainsPage() {
   const handleCreate = form.handleSubmit((values) => {
     createMutation.mutate({
       zone_name: values.zone_name.trim(),
-      group_id: groupId ? Number(groupId) : undefined,
+      group_id: importGroupId ? Number(importGroupId) : undefined,
     })
   })
 
-  const handleGroupChange = (value: string | null) => {
+  const handleImportGroupChange = (value: string | null) => {
     const next = value === 'none' || !value ? '' : value
-    setGroupId(next)
+    setImportGroupId(next)
     form.setValue('group_id', next)
   }
 
+  const handleFilterGroupChange = (value: string | null) => {
+    if (!value || value === 'all') {
+      setFilterGroupId('')
+      return
+    }
+    setFilterGroupId(value === 'none' ? 'none' : value)
+  }
+
+  const filteredDomains = useMemo(() => {
+    if (filterGroupId === 'none') {
+      return domains?.filter((d) => d.group_id === null) ?? []
+    }
+    return domains ?? []
+  }, [domains, filterGroupId])
+
+  const tableData = useMemo(
+    () =>
+      filteredDomains.map((domain) => ({
+        ...domain,
+        ips: ipsByDomainId.get(domain.id) ?? [],
+      })),
+    [filteredDomains, ipsByDomainId],
+  )
+
   return (
-    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+    <div className="@container/main flex flex-col gap-4 py-4 md:gap-6 md:py-6">
       <PageHeader
         title="Домены"
         description="Импорт и управление зонами Cloudflare"
+        actions={
+          <>
+            <Button variant="outline" render={<Link to="/groups" />}>
+              Канбан групп
+            </Button>
+            <Button onClick={() => setSheetOpen(true)}>Импортировать домен</Button>
+          </>
+        }
       />
-      <Card>
-        <CardHeader>
-          <CardTitle>Добавить домен</CardTitle>
-          <CardDescription>Импортировать зону из Cloudflare</CardDescription>
+
+      <Card className="border-dashed">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-base">Быстрый обзор</CardTitle>
+          <CardDescription>
+            {tableData.length} зон ·{' '}
+            {tableData.filter((d) => d.ips.length > 0).length} с IP-адресами ·{' '}
+            {tableData.reduce((sum, d) => sum + d.service_count, 0)} привязок сервисов
+          </CardDescription>
         </CardHeader>
-        <CardContent>
-          <form onSubmit={handleCreate}>
-            <FieldGroup className="flex flex-row flex-wrap items-end gap-2">
-              <Field className="max-w-xs flex-1">
+      </Card>
+
+      <DataTableCard
+        title="Список доменов"
+        description="Импортированные зоны Cloudflare"
+      >
+        <DomainsDataTable
+          data={tableData}
+          groupFilterItems={groupItems}
+          groupFilterValue={filterGroupId || 'all'}
+          onGroupFilterChange={handleFilterGroupChange}
+        />
+      </DataTableCard>
+
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Импорт домена</SheetTitle>
+            <SheetDescription>
+              Добавить зону из аккаунта Cloudflare в менеджер
+            </SheetDescription>
+          </SheetHeader>
+          <form onSubmit={handleCreate} className="flex flex-col gap-4 px-4">
+            <FieldGroup>
+              <Field>
                 <FieldLabel htmlFor="zone_name">Имя зоны</FieldLabel>
                 <Input
                   id="zone_name"
@@ -119,14 +193,14 @@ function DomainsPage() {
                   aria-invalid={!!form.formState.errors.zone_name}
                 />
               </Field>
-              <Field className="w-48">
-                <FieldLabel htmlFor="group_id">Группа</FieldLabel>
+              <Field>
+                <FieldLabel htmlFor="import_group_id">Группа</FieldLabel>
                 <Select
                   items={groupItems}
-                  value={groupId || 'none'}
-                  onValueChange={handleGroupChange}
+                  value={importGroupId || 'none'}
+                  onValueChange={handleImportGroupChange}
                 >
-                  <SelectTrigger id="group_id" className="w-full">
+                  <SelectTrigger id="import_group_id" className="w-full">
                     <SelectValue placeholder="Без группы" />
                   </SelectTrigger>
                   <SelectContent>
@@ -138,67 +212,16 @@ function DomainsPage() {
                   </SelectContent>
                 </Select>
               </Field>
-              <Button type="submit" disabled={createMutation.isPending}>
-                {createMutation.isPending && (
-                  <Spinner data-icon="inline-start" />
-                )}
+            </FieldGroup>
+            <SheetFooter>
+              <Button type="submit" disabled={createMutation.isPending} className="w-full">
+                {createMutation.isPending && <Spinner data-icon="inline-start" />}
                 {createMutation.isPending ? 'Импорт…' : 'Импортировать'}
               </Button>
-            </FieldGroup>
+            </SheetFooter>
           </form>
-        </CardContent>
-      </Card>
-      <DataTableCard title="Список доменов" description="Импортированные зоны">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Зона</TableHead>
-              <TableHead>Статус</TableHead>
-              <TableHead>Последняя синхронизация</TableHead>
-              <TableHead>Действия</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {domains?.map((d) => (
-              <TableRow key={d.id}>
-                <TableCell className="font-medium">{d.zone_name}</TableCell>
-                <TableCell>
-                  <StatusBadge status={d.status} />
-                </TableCell>
-                <TableCell>{d.last_synced_at ?? '—'}</TableCell>
-                <TableCell>
-                  <div className="flex gap-2">
-                    <Button
-                      variant="link"
-                      className="h-auto p-0"
-                      render={
-                        <Link
-                          to="/domains/$domainId"
-                          params={{ domainId: String(d.id) }}
-                        />
-                      }
-                    >
-                      Обзор
-                    </Button>
-                    <Button
-                      variant="link"
-                      className="h-auto p-0"
-                      render={
-                        <Link
-                          to="/domains/$domainId/dns"
-                          params={{ domainId: String(d.id) }}
-                        />
-                      }
-                    >
-                      DNS
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </DataTableCard>
+        </SheetContent>
+      </Sheet>
     </div>
   )
 }

apps/web/src/routes/_auth/groups.tsx

@@ -1,13 +1,22 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { toast } from 'sonner'
-import { groupsQueryOptions, groupKeys, domainKeys } from '@/queries'
+import {
+  domainKeys,
+  domainsListQueryOptions,
+  groupKeys,
+  groupsQueryOptions,
+  serviceBindingsQueryOptions,
+} from '@/queries'
 import { api } from '@/lib/api-client'
-import { createGroupSchema, type CreateGroupInput } from '@/lib/schemas'
+import { createGroupSchema, type CreateGroupInput, type DomainListItem } from '@/lib/schemas'
 import { PageHeader } from '@/components/page-header'
-import { ResourceList } from '@/components/resource-list'
+import { KanbanBoard } from '@/components/kanban-board'
+import { DomainGroupCard } from '@/components/domain-group-card'
+import { DataTableCard } from '@/components/data-table-card'
 import { Button } from '@cfdm/ui/components/button'
 import { Input } from '@cfdm/ui/components/input'
 import {
@@ -22,22 +31,92 @@ import {
   FieldGroup,
   FieldLabel,
 } from '@cfdm/ui/components/field'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@cfdm/ui/components/table'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@cfdm/ui/components/tabs'
 import { Spinner } from '@cfdm/ui/components/spinner'
 
 export const Route = createFileRoute('/_auth/groups')({
-  loader: ({ context: { queryClient } }) => queryClient.ensureQueryData(groupsQueryOptions()),
+  loader: ({ context: { queryClient } }) =>
+    Promise.all([
+      queryClient.ensureQueryData(groupsQueryOptions()),
+      queryClient.ensureQueryData(domainsListQueryOptions()),
+      queryClient.ensureQueryData(serviceBindingsQueryOptions()),
+    ]),
   component: GroupsPage,
 })
 
+const UNGROUPED_COLUMN_ID = 'ungrouped'
+
+function groupColumnId(groupId: number) {
+  return `group-${groupId}`
+}
+
+function parseGroupColumnId(columnId: string): number | null {
+  if (columnId === UNGROUPED_COLUMN_ID) return null
+  const match = columnId.match(/^group-(\d+)$/)
+  return match ? Number(match[1]) : null
+}
+
 function GroupsPage() {
   const queryClient = useQueryClient()
   const { data: groups } = useQuery(groupsQueryOptions())
+  const { data: domains } = useQuery(domainsListQueryOptions())
+  const { data: bindings } = useQuery(serviceBindingsQueryOptions())
 
   const form = useForm<CreateGroupInput>({
     resolver: zodResolver(createGroupSchema),
     defaultValues: { name: '', slug: '' },
   })
 
+  const serviceLabelsByDomain = useMemo(() => {
+    const map = new Map<number, string[]>()
+    for (const binding of bindings ?? []) {
+      const list = map.get(binding.domain_id) ?? []
+      if (!list.includes(binding.service_name)) {
+        list.push(binding.service_name)
+      }
+      map.set(binding.domain_id, list)
+    }
+    return map
+  }, [bindings])
+
+  const columns = useMemo(() => {
+    const groupColumns =
+      groups?.map((group) => ({
+        id: groupColumnId(group.id),
+        title: group.name,
+        description: group.slug,
+        href: `/groups/${group.id}`,
+        items:
+          domains?.filter((d) => d.group_id === group.id) ?? [],
+      })) ?? []
+
+    const ungrouped: DomainListItem[] =
+      domains?.filter((d) => d.group_id === null) ?? []
+
+    return [
+      ...groupColumns,
+      {
+        id: UNGROUPED_COLUMN_ID,
+        title: 'Без группы',
+        description: 'Домены без назначенной группы',
+        items: ungrouped,
+      },
+    ]
+  }, [groups, domains])
+
   const createMutation = useMutation({
     mutationFn: (body: CreateGroupInput) => api.post('/api/v1/groups', body),
     onSuccess: () => {
@@ -62,73 +141,150 @@ function GroupsPage() {
     },
   })
 
+  const moveDomainMutation = useMutation({
+    mutationFn: ({ domainId, groupId }: { domainId: number; groupId: number | null }) =>
+      api.patch(`/api/v1/domains/${domainId}`, { group_id: groupId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: domainKeys.all })
+      toast.success('Группа домена обновлена')
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : 'Не удалось переместить домен')
+    },
+  })
+
+  function handleMove(itemId: string, _fromColumnId: string, toColumnId: string) {
+    const groupId = parseGroupColumnId(toColumnId)
+    if (toColumnId !== UNGROUPED_COLUMN_ID && groupId === null) return
+    moveDomainMutation.mutate({ domainId: Number(itemId), groupId })
+  }
+
   const handleSubmit = form.handleSubmit((values) => {
     createMutation.mutate(values)
   })
 
   return (
-    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+    <div className="@container/main flex flex-col gap-4 py-4 md:gap-6 md:py-6">
       <PageHeader
         title="Группы"
-        description="Группировка доменов для удобного управления"
+        description="Канбан-доска доменов по группам и справочник групп"
       />
-      <Card>
-        <CardHeader>
-          <CardTitle>Создать группу</CardTitle>
-          <CardDescription>Добавить новую группу доменов</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <FieldGroup className="flex flex-row flex-wrap items-end gap-2">
-              <Field className="flex-1">
-                <FieldLabel htmlFor="name">Название</FieldLabel>
-                <Input
-                  id="name"
-                  placeholder="Название"
-                  {...form.register('name')}
-                  aria-invalid={!!form.formState.errors.name}
-                />
-              </Field>
-              <Field className="flex-1">
-                <FieldLabel htmlFor="slug">Slug</FieldLabel>
-                <Input
-                  id="slug"
-                  placeholder="slug"
-                  {...form.register('slug')}
-                  aria-invalid={!!form.formState.errors.slug}
-                />
-              </Field>
-              <Button type="submit" disabled={createMutation.isPending}>
-                {createMutation.isPending && (
-                  <Spinner data-icon="inline-start" />
+      <Tabs defaultValue="kanban" orientation="horizontal" className="flex w-full flex-col gap-4">
+        <TabsList>
+          <TabsTrigger value="kanban">Канбан</TabsTrigger>
+          <TabsTrigger value="catalog">Справочник</TabsTrigger>
+        </TabsList>
+        <TabsContent value="kanban">
+          <Card>
+            <CardHeader>
+              <CardTitle>Доска групп</CardTitle>
+              <CardDescription>
+                Перетащите домен в колонку группы. Нажмите на название колонки, чтобы открыть список доменов.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <KanbanBoard
+                columns={columns}
+                getItemId={(domain) => String(domain.id)}
+                renderCard={(domain) => (
+                  <DomainGroupCard
+                    domain={domain}
+                    serviceLabels={serviceLabelsByDomain.get(domain.id)}
+                  />
                 )}
-                {createMutation.isPending ? 'Создание…' : 'Создать'}
-              </Button>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-      <ResourceList
-        items={
-          groups?.map((g) => ({
-            id: g.id,
-            primary: g.name,
-            secondary: `(${g.slug})`,
-          })) ?? []
-        }
-        emptyTitle="Группы не найдены"
-        emptyDescription="Создайте первую группу в форме выше"
-        renderActions={(item) => (
-          <Button
-            variant="destructive"
-            size="sm"
-            onClick={() => deleteMutation.mutate(item.id as number)}
-            disabled={deleteMutation.isPending}
+                onMove={handleMove}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="catalog" className="flex flex-col gap-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Создать группу</CardTitle>
+              <CardDescription>Добавить новую группу доменов</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleSubmit}>
+                <FieldGroup className="flex flex-row flex-wrap items-end gap-2">
+                  <Field className="flex-1">
+                    <FieldLabel htmlFor="name">Название</FieldLabel>
+                    <Input
+                      id="name"
+                      placeholder="Название"
+                      {...form.register('name')}
+                      aria-invalid={!!form.formState.errors.name}
+                    />
+                  </Field>
+                  <Field className="flex-1">
+                    <FieldLabel htmlFor="slug">Slug</FieldLabel>
+                    <Input
+                      id="slug"
+                      placeholder="slug"
+                      {...form.register('slug')}
+                      aria-invalid={!!form.formState.errors.slug}
+                    />
+                  </Field>
+                  <Button type="submit" disabled={createMutation.isPending}>
+                    {createMutation.isPending && (
+                      <Spinner data-icon="inline-start" />
+                    )}
+                    {createMutation.isPending ? 'Создание…' : 'Создать'}
+                  </Button>
+                </FieldGroup>
+              </form>
+            </CardContent>
+          </Card>
+          <DataTableCard
+            title="Справочник групп"
+            description="Все группы доменов"
+            isEmpty={!groups?.length}
+            emptyTitle="Группы не найдены"
+            emptyDescription="Создайте первую группу в форме выше"
           >
-            Удалить
-          </Button>
-        )}
-      />
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Название</TableHead>
+                  <TableHead>Slug</TableHead>
+                  <TableHead className="text-right">Действия</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {groups?.map((group) => (
+                  <TableRow key={group.id}>
+                    <TableCell className="font-medium">{group.name}</TableCell>
+                    <TableCell className="text-muted-foreground">{group.slug}</TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          render={
+                            <Link
+                              to="/groups/$groupId"
+                              params={{ groupId: String(group.id) }}
+                            />
+                          }
+                        >
+                          Открыть
+                        </Button>
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          onClick={() => deleteMutation.mutate(group.id)}
+                          disabled={deleteMutation.isPending}
+                        >
+                          Удалить
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </DataTableCard>
+        </TabsContent>
+      </Tabs>
     </div>
   )
 }

apps/web/src/routes/_auth/groups/$groupId.tsx

@@ -0,0 +1,101 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import {
+  domainsListQueryOptions,
+  groupDetailQueryOptions,
+} from '@/queries'
+import { PageHeader } from '@/components/page-header'
+import { StatusBadge } from '@/components/status-badge'
+import { DataTableCard } from '@/components/data-table-card'
+import { Button } from '@cfdm/ui/components/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@cfdm/ui/components/table'
+
+export const Route = createFileRoute('/_auth/groups/$groupId')({
+  loader: ({ context: { queryClient }, params }) => {
+    const id = Number(params.groupId)
+    return Promise.all([
+      queryClient.ensureQueryData(groupDetailQueryOptions(id)),
+      queryClient.ensureQueryData(domainsListQueryOptions(id)),
+    ])
+  },
+  component: GroupDetailPage,
+})
+
+function GroupDetailPage() {
+  const { groupId } = Route.useParams()
+  const id = Number(groupId)
+  const { data: group } = useQuery(groupDetailQueryOptions(id))
+  const { data: domains } = useQuery(domainsListQueryOptions(id))
+
+  return (
+    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+      <PageHeader
+        title={group?.name ?? 'Группа'}
+        description={
+          group
+            ? `${group.domain_count} домен(ов) · slug: ${group.slug}`
+            : 'Домены в группе'
+        }
+        back={{ to: '/groups', label: '← К группам' }}
+        actions={
+          <Button
+            variant="outline"
+            render={<Link to="/groups" />}
+          >
+            На канбан
+          </Button>
+        }
+      />
+      <DataTableCard
+        title="Домены группы"
+        description="Список доменов, назначенных этой группе"
+        emptyTitle="В группе нет доменов"
+        emptyDescription="Перетащите домены на канбане групп или назначьте группу при импорте"
+        isEmpty={!domains?.length}
+      >
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Зона</TableHead>
+              <TableHead>Статус</TableHead>
+              <TableHead>Сервисы</TableHead>
+              <TableHead className="text-right">Действия</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {domains?.map((domain) => (
+              <TableRow key={domain.id}>
+                <TableCell className="font-medium">{domain.zone_name}</TableCell>
+                <TableCell>
+                  <StatusBadge status={domain.status} />
+                </TableCell>
+                <TableCell>{domain.service_count}</TableCell>
+                <TableCell className="text-right">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    render={
+                      <Link
+                        to="/domains/$domainId"
+                        params={{ domainId: String(domain.id) }}
+                      />
+                    }
+                  >
+                    Обзор
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </DataTableCard>
+    </div>
+  )
+}

apps/web/src/routes/_auth/services.tsx

@@ -1,13 +1,29 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { toast } from 'sonner'
-import { servicesQueryOptions, serviceKeys } from '@/queries'
+import {
+  domainKeys,
+  domainsListQueryOptions,
+  serviceBindingKeys,
+  serviceBindingsQueryOptions,
+  serviceKeys,
+  servicesQueryOptions,
+} from '@/queries'
 import { api } from '@/lib/api-client'
-import { createServiceSchema, type CreateServiceInput } from '@/lib/schemas'
+import {
+  createServiceBindingSchema,
+  createServiceSchema,
+  type CreateServiceBindingInput,
+  type CreateServiceInput,
+  type ServiceBinding,
+} from '@/lib/schemas'
 import { PageHeader } from '@/components/page-header'
-import { ResourceList } from '@/components/resource-list'
+import { DataTableCard } from '@/components/data-table-card'
+import { KanbanBoard } from '@/components/kanban-board'
+import { ServiceBindingCard } from '@/components/service-binding-card'
 import { Button } from '@cfdm/ui/components/button'
 import { Input } from '@cfdm/ui/components/input'
 import {
@@ -17,32 +33,99 @@ import {
   CardHeader,
   CardTitle,
 } from '@cfdm/ui/components/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@cfdm/ui/components/table'
 import {
   Field,
   FieldGroup,
   FieldLabel,
 } from '@cfdm/ui/components/field'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@cfdm/ui/components/select'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@cfdm/ui/components/sheet'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@cfdm/ui/components/tabs'
 import { Spinner } from '@cfdm/ui/components/spinner'
 
 export const Route = createFileRoute('/_auth/services')({
-  loader: ({ context: { queryClient } }) => queryClient.ensureQueryData(servicesQueryOptions()),
+  loader: ({ context: { queryClient } }) =>
+    Promise.all([
+      queryClient.ensureQueryData(servicesQueryOptions()),
+      queryClient.ensureQueryData(serviceBindingsQueryOptions()),
+      queryClient.ensureQueryData(domainsListQueryOptions()),
+    ]),
   component: ServicesPage,
 })
 
+function serviceColumnId(serviceId: number) {
+  return `service-${serviceId}`
+}
+
+function parseServiceColumnId(columnId: string): number | null {
+  const match = columnId.match(/^service-(\d+)$/)
+  return match ? Number(match[1]) : null
+}
+
 function ServicesPage() {
+  const [sheetOpen, setSheetOpen] = useState(false)
   const queryClient = useQueryClient()
   const { data: services } = useQuery(servicesQueryOptions())
+  const { data: bindings } = useQuery(serviceBindingsQueryOptions())
+  const { data: domains } = useQuery(domainsListQueryOptions())
 
-  const form = useForm<CreateServiceInput>({
+  const catalogForm = useForm<CreateServiceInput>({
     resolver: zodResolver(createServiceSchema),
     defaultValues: { name: '', slug: '' },
   })
 
-  const createMutation = useMutation({
+  const bindingForm = useForm<CreateServiceBindingInput>({
+    resolver: zodResolver(createServiceBindingSchema),
+    defaultValues: {
+      domain_id: '',
+      service_id: '',
+      hostname: '@',
+      target_ip: '',
+    },
+  })
+
+  const columns = useMemo(() => {
+    return (
+      services?.map((service) => ({
+        id: serviceColumnId(service.id),
+        title: service.name,
+        description: service.slug,
+        items: bindings?.filter((b) => b.service_id === service.id) ?? [],
+      })) ?? []
+    )
+  }, [services, bindings])
+
+  const createServiceMutation = useMutation({
     mutationFn: (body: CreateServiceInput) => api.post('/api/v1/services', body),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: serviceKeys.all })
-      form.reset()
+      catalogForm.reset()
       toast.success('Сервис создан')
     },
     onError: (err) => {
@@ -50,63 +133,249 @@ function ServicesPage() {
     },
   })
 
-  const handleSubmit = form.handleSubmit((values) => {
-    createMutation.mutate(values)
+  const createBindingMutation = useMutation({
+    mutationFn: (body: {
+      domain_id: number
+      service_id: number
+      hostname?: string
+      target_ip?: string
+    }) => api.post('/api/v1/service-bindings', body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: serviceBindingKeys.all })
+      queryClient.invalidateQueries({ queryKey: domainKeys.all })
+      bindingForm.reset({ domain_id: '', service_id: '', hostname: '@', target_ip: '' })
+      setSheetOpen(false)
+      toast.success('Привязка создана')
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : 'Не удалось создать привязку')
+    },
+  })
+
+  const updateBindingMutation = useMutation({
+    mutationFn: ({
+      id,
+      body,
+    }: {
+      id: number
+      body: { service_id?: number; hostname?: string; target_ip?: string }
+    }) => api.patch(`/api/v1/service-bindings/${id}`, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: serviceBindingKeys.all })
+      queryClient.invalidateQueries({ queryKey: domainKeys.all })
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : 'Не удалось обновить привязку')
+    },
+  })
+
+  function handleMove(itemId: string, _fromColumnId: string, toColumnId: string) {
+    const serviceId = parseServiceColumnId(toColumnId)
+    if (serviceId === null) return
+    updateBindingMutation.mutate({
+      id: Number(itemId),
+      body: { service_id: serviceId },
+    })
+  }
+
+  function handleIpChange(id: number, targetIp: string) {
+    updateBindingMutation.mutate({ id, body: { target_ip: targetIp } })
+  }
+
+  function handleHostnameChange(id: number, hostname: string) {
+    updateBindingMutation.mutate({ id, body: { hostname } })
+  }
+
+  const renderBindingCard = (binding: ServiceBinding) => (
+    <ServiceBindingCard
+      binding={binding}
+      onIpChange={handleIpChange}
+      onHostnameChange={handleHostnameChange}
+    />
+  )
+
+  const handleCatalogSubmit = catalogForm.handleSubmit((values) => {
+    createServiceMutation.mutate(values)
+  })
+
+  const handleBindingSubmit = bindingForm.handleSubmit((values) => {
+    createBindingMutation.mutate({
+      domain_id: Number(values.domain_id),
+      service_id: Number(values.service_id),
+      hostname: values.hostname || '@',
+      target_ip: values.target_ip || undefined,
+    })
   })
 
   return (
-    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+    <div className="@container/main flex flex-col gap-4 py-4 md:gap-6 md:py-6">
       <PageHeader
         title="Сервисы"
-        description="Справочник сервисов для привязки к доменам"
+        description="Канбан привязок доменов к сервисам с настройкой IP через DNS"
+        actions={
+          <Button onClick={() => setSheetOpen(true)}>Добавить привязку</Button>
+        }
       />
-      <Card>
-        <CardHeader>
-          <CardTitle>Создать сервис</CardTitle>
-          <CardDescription>Добавить новый сервис в справочник</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <FieldGroup className="flex flex-row flex-wrap items-end gap-2">
-              <Field className="flex-1">
-                <FieldLabel htmlFor="name">Название</FieldLabel>
-                <Input
-                  id="name"
-                  placeholder="Название"
-                  {...form.register('name')}
-                  aria-invalid={!!form.formState.errors.name}
-                />
-              </Field>
-              <Field className="flex-1">
-                <FieldLabel htmlFor="slug">Slug</FieldLabel>
-                <Input
-                  id="slug"
-                  placeholder="slug"
-                  {...form.register('slug')}
-                  aria-invalid={!!form.formState.errors.slug}
-                />
-              </Field>
-              <Button type="submit" disabled={createMutation.isPending}>
-                {createMutation.isPending && (
+      <Tabs defaultValue="kanban" orientation="horizontal" className="flex w-full flex-col gap-4">
+        <TabsList>
+          <TabsTrigger value="kanban">Канбан</TabsTrigger>
+          <TabsTrigger value="catalog">Справочник</TabsTrigger>
+        </TabsList>
+        <TabsContent value="kanban">
+          <Card>
+            <CardHeader>
+              <CardTitle>Доска сервисов</CardTitle>
+              <CardDescription>
+                Перетащите привязку между колонками или отредактируйте IP прямо на карточке
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <KanbanBoard
+                columns={columns}
+                getItemId={(binding) => String(binding.id)}
+                renderCard={renderBindingCard}
+                renderOverlay={renderBindingCard}
+                onMove={handleMove}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="catalog" className="flex flex-col gap-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Создать сервис</CardTitle>
+              <CardDescription>Добавить новый тип сервиса в справочник</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleCatalogSubmit}>
+                <FieldGroup className="flex flex-row flex-wrap items-end gap-2">
+                  <Field className="flex-1">
+                    <FieldLabel htmlFor="svc-name">Название</FieldLabel>
+                    <Input
+                      id="svc-name"
+                      placeholder="Название"
+                      {...catalogForm.register('name')}
+                      aria-invalid={!!catalogForm.formState.errors.name}
+                    />
+                  </Field>
+                  <Field className="flex-1">
+                    <FieldLabel htmlFor="svc-slug">Slug</FieldLabel>
+                    <Input
+                      id="svc-slug"
+                      placeholder="slug"
+                      {...catalogForm.register('slug')}
+                      aria-invalid={!!catalogForm.formState.errors.slug}
+                    />
+                  </Field>
+                  <Button type="submit" disabled={createServiceMutation.isPending}>
+                    {createServiceMutation.isPending && (
+                      <Spinner data-icon="inline-start" />
+                    )}
+                    {createServiceMutation.isPending ? 'Создание…' : 'Создать'}
+                  </Button>
+                </FieldGroup>
+              </form>
+            </CardContent>
+          </Card>
+          <DataTableCard
+            title="Справочник сервисов"
+            description="Типы сервисов для привязки к доменам"
+            isEmpty={!services?.length}
+            emptyTitle="Сервисы не найдены"
+            emptyDescription="Создайте первый сервис в форме выше"
+          >
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Название</TableHead>
+                  <TableHead>Slug</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {services?.map((service) => (
+                  <TableRow key={service.id}>
+                    <TableCell className="font-medium">{service.name}</TableCell>
+                    <TableCell className="text-muted-foreground">{service.slug}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </DataTableCard>
+        </TabsContent>
+      </Tabs>
+
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Новая привязка</SheetTitle>
+            <SheetDescription>
+              Свяжите домен с сервисом и укажите IP для A-записи
+            </SheetDescription>
+          </SheetHeader>
+          <form onSubmit={handleBindingSubmit} className="flex flex-col gap-4 px-4">
+            <Field>
+              <FieldLabel>Домен</FieldLabel>
+              <Select
+                value={bindingForm.watch('domain_id')}
+                onValueChange={(value) => bindingForm.setValue('domain_id', value ?? '')}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Выберите домен" />
+                </SelectTrigger>
+                <SelectContent>
+                  {domains?.map((domain) => (
+                    <SelectItem key={domain.id} value={String(domain.id)}>
+                      {domain.zone_name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field>
+              <FieldLabel>Сервис</FieldLabel>
+              <Select
+                value={bindingForm.watch('service_id')}
+                onValueChange={(value) => bindingForm.setValue('service_id', value ?? '')}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Выберите сервис" />
+                </SelectTrigger>
+                <SelectContent>
+                  {services?.map((service) => (
+                    <SelectItem key={service.id} value={String(service.id)}>
+                      {service.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="binding-hostname">Hostname</FieldLabel>
+              <Input
+                id="binding-hostname"
+                placeholder="@"
+                {...bindingForm.register('hostname')}
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="binding-ip">IPv4</FieldLabel>
+              <Input
+                id="binding-ip"
+                placeholder="192.168.1.1"
+                {...bindingForm.register('target_ip')}
+              />
+            </Field>
+            <SheetFooter>
+              <Button type="submit" disabled={createBindingMutation.isPending}>
+                {createBindingMutation.isPending && (
                   <Spinner data-icon="inline-start" />
                 )}
-                {createMutation.isPending ? 'Создание…' : 'Создать'}
+                Создать
               </Button>
-            </FieldGroup>
+            </SheetFooter>
           </form>
-        </CardContent>
-      </Card>
-      <ResourceList
-        items={
-          services?.map((s) => ({
-            id: s.id,
-            primary: s.name,
-            secondary: `(${s.slug})`,
-          })) ?? []
-        }
-        emptyTitle="Сервисы не найдены"
-        emptyDescription="Создайте первый сервис в форме выше"
-      />
+        </SheetContent>
+      </Sheet>
     </div>
   )
 }