add contacts scroller

apps/web/app/(main)/orders/add/page.tsx

@@ -1,3 +1,14 @@
-export default function AddOrdersPage() {
+import { Container } from '@/components/layout';
-  return 'Add Orders';
+import { PageHeader } from '@/components/navigation';
+import { OrderForm } from '@/components/orders';
+
+export default async function AddOrdersPage() {
+  return (
+    <>
+      <PageHeader title="Новая запись" />
+      <Container className="px-0">
+        <OrderForm />
+      </Container>
+    </>
+  );
 }

apps/web/components/orders/components/contacts-scroller.tsx

@@ -0,0 +1,64 @@
+'use client';
+import { LoadingSpinner } from '../../common/spinner';
+import { useCustomerContacts } from '@/hooks/contacts';
+// eslint-disable-next-line import/extensions
+import AvatarPlaceholder from '@/public/avatar/avatar_placeholder.png';
+import { Label } from '@repo/ui/components/ui/label';
+import { cn } from '@repo/ui/lib/utils';
+import Image from 'next/image';
+import { useState } from 'react';
+
+export function ContactsScroller() {
+  const [selected, setSelected] = useState<null | string>(null);
+  const { contacts, isLoading } = useCustomerContacts();
+
+  if (isLoading) return <LoadingSpinner />;
+
+  return (
+    <div className="flex flex-col rounded-lg bg-transparent px-4">
+      <div className="relative w-full overflow-x-auto pb-2">
+        <div className="flex w-max space-x-4 px-4">
+          {contacts.map((contact) => {
+            if (!contact) return null;
+
+            return (
+              <Label
+                className="flex cursor-pointer flex-col items-center"
+                key={contact?.documentId}
+                onClick={() => setSelected(contact?.documentId)}
+              >
+                <input
+                  checked={selected === contact?.documentId}
+                  className="hidden"
+                  name="user"
+                  onChange={() => setSelected(contact?.documentId)}
+                  type="radio"
+                  value={contact?.documentId}
+                />
+                <div
+                  className={cn(
+                    'w-20 h-20 rounded-full border-2 transition-all duration-75',
+                    selected === contact?.documentId ? 'border-primary' : 'border-transparent',
+                  )}
+                >
+                  <div className="size-full border-4 border-transparent">
+                    <Image
+                      alt={contact?.name}
+                      className="size-full rounded-full object-cover"
+                      height={80}
+                      src={contact?.photoUrl || AvatarPlaceholder}
+                      width={80}
+                    />
+                  </div>
+                </div>
+                <span className="mt-2 max-w-20 break-words text-center text-sm font-medium">
+                  {contact?.name}
+                </span>
+              </Label>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/orders/components/index.ts

@@ -0,0 +1 @@
+export * from './contacts-scroller';

apps/web/components/orders/index.ts

@@ -0,0 +1 @@
+export * from './order-form';

apps/web/components/orders/order-form.tsx

@@ -0,0 +1,9 @@
+import { ContactsScroller } from './components';
+
+export function OrderForm() {
+  return (
+    <div className="space-y-2">
+      <ContactsScroller />
+    </div>
+  );
+}