{
  "name": "screen-contact",
  "type": "registry:page",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "breadcrumb",
    "button",
    "card",
    "https://ui.dvizh.website/r/screen-shell.json",
    "item",
    "separator",
    "sidebar"
  ],
  "files": [
    {
      "path": "screens/contact/ContactScreen.vue",
      "type": "registry:file",
      "target": "screens/contact/ContactScreen.vue",
      "content": "<script setup lang=\"ts\">\n/**\n * Карточка контакта.\n *\n * Сценарий: входящий звонок с незнакомого номера, CRM открыла карточку. У менеджера три\n * секунды понять, кто это, что мы ему продаём сейчас и чем закончился прошлый раз.\n * Поэтому связь и текущие сделки — сразу, а история переписки ниже.\n */\nimport {\n  BuildingIcon,\n  ClockIcon,\n  MailIcon,\n  MapPinIcon,\n  MessageSquareIcon,\n  PhoneIcon,\n  PlusIcon,\n} from '@lucide/vue'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/ui/breadcrumb'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from '@/components/ui/item'\nimport { Separator } from '@/components/ui/separator'\nimport { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'\nimport CrmSidebar from '../CrmSidebar.vue'\nimport { contact, contactDeals, history } from '../data'\n</script>\n\n<template>\n  <SidebarProvider>\n    <CrmSidebar section=\"Контакты\" />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 data-[orientation=vertical]:h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">Контакты</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem><BreadcrumbPage>{{ contact.name }}</BreadcrumbPage></BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"ml-auto flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"sm\">\n            <MessageSquareIcon />\n            Записать разговор\n          </Button>\n          <Button size=\"sm\">\n            <PlusIcon />\n            Задача\n          </Button>\n        </div>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4 lg:p-6\">\n        <!-- Шапка: кто звонит и как с ним связаться. -->\n        <Card>\n          <CardContent class=\"flex flex-wrap items-center gap-4\">\n            <Avatar class=\"size-14\">\n              <AvatarFallback class=\"text-lg\">{{ contact.initials }}</AvatarFallback>\n            </Avatar>\n            <div class=\"min-w-0 flex-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h1 class=\"font-heading text-2xl font-semibold tracking-tight\">\n                  {{ contact.name }}\n                </h1>\n                <Badge variant=\"secondary\">Основной контакт</Badge>\n              </div>\n              <p class=\"text-muted-foreground text-sm\">\n                {{ contact.role }} · {{ contact.company }}\n              </p>\n            </div>\n            <div class=\"flex flex-wrap gap-2\">\n              <Button variant=\"outline\" size=\"sm\">\n                <PhoneIcon />\n                {{ contact.phone }}\n              </Button>\n              <Button variant=\"outline\" size=\"sm\">\n                <MailIcon />\n                Написать\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n\n        <div class=\"grid gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]\">\n          <div class=\"space-y-4\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Сделки контакта</CardTitle>\n                <CardDescription>Две в работе, одна закрыта в прошлом году</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <ItemGroup>\n                  <Item v-for=\"row in contactDeals\" :key=\"row.id\" variant=\"outline\" class=\"mb-2\">\n                    <ItemContent>\n                      <ItemTitle>\n                        <RouterLink to=\"/screens/deal\" class=\"hover:underline\">\n                          {{ row.title }}\n                        </RouterLink>\n                      </ItemTitle>\n                      <ItemDescription>{{ row.amount }}</ItemDescription>\n                    </ItemContent>\n                    <Badge :variant=\"row.stage === 'Закрыта' ? 'outline' : 'secondary'\">\n                      {{ row.stage }}\n                    </Badge>\n                  </Item>\n                </ItemGroup>\n              </CardContent>\n            </Card>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>Последние касания</CardTitle>\n                <CardDescription>О чём говорили в прошлый раз</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <ItemGroup>\n                  <Item v-for=\"event in history.slice(0, 3)\" :key=\"event.id\" class=\"items-start\">\n                    <ItemMedia>\n                      <Avatar class=\"size-8\">\n                        <AvatarFallback>{{ event.initials }}</AvatarFallback>\n                      </Avatar>\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>{{ event.author }} · {{ event.at }}</ItemTitle>\n                      <ItemDescription>{{ event.text }}</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </ItemGroup>\n              </CardContent>\n            </Card>\n          </div>\n\n          <Card class=\"h-fit\">\n            <CardHeader>\n              <CardTitle>Реквизиты</CardTitle>\n            </CardHeader>\n            <CardContent>\n              <ItemGroup>\n                <Item size=\"sm\">\n                  <ItemMedia><MailIcon /></ItemMedia>\n                  <ItemContent>\n                    <ItemTitle class=\"break-all\">{{ contact.email }}</ItemTitle>\n                    <ItemDescription>Почта</ItemDescription>\n                  </ItemContent>\n                </Item>\n                <Item size=\"sm\">\n                  <ItemMedia><BuildingIcon /></ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>{{ contact.company }}</ItemTitle>\n                    <ItemDescription>Компания</ItemDescription>\n                  </ItemContent>\n                </Item>\n                <Item size=\"sm\">\n                  <ItemMedia><MapPinIcon /></ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>{{ contact.city }}</ItemTitle>\n                    <ItemDescription>{{ contact.since }}</ItemDescription>\n                  </ItemContent>\n                </Item>\n                <Item size=\"sm\">\n                  <ItemMedia><ClockIcon /></ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>{{ contact.channel }}</ItemTitle>\n                    <ItemDescription>Как связываться</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n"
    }
  ]
}