From fbc682b41f517b44cb0876d9336729696f810753 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Fri, 7 Mar 2025 16:13:58 +0300
Subject: [PATCH] add contacts scroller

---
 apps/web/app/(main)/orders/add/page.tsx       |  15 +++-
 .../orders/components/contacts-scroller.tsx   |  64 ++++++++++++++++++
 .../web/components/orders/components/index.ts |   1 +
 apps/web/components/orders/index.ts           |   1 +
 apps/web/components/orders/order-form.tsx     |   9 +++
 apps/web/public/avatar/avatar_placeholder.png | Bin 0 -> 2011 bytes
 6 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/orders/components/contacts-scroller.tsx
 create mode 100644 apps/web/components/orders/components/index.ts
 create mode 100644 apps/web/components/orders/index.ts
 create mode 100644 apps/web/components/orders/order-form.tsx
 create mode 100644 apps/web/public/avatar/avatar_placeholder.png

diff --git a/apps/web/app/(main)/orders/add/page.tsx b/apps/web/app/(main)/orders/add/page.tsx
index bf5b793..a917e2d 100644
--- a/apps/web/app/(main)/orders/add/page.tsx
+++ b/apps/web/app/(main)/orders/add/page.tsx
@@ -1,3 +1,14 @@
-export default function AddOrdersPage() {
-  return 'Add Orders';
+import { Container } from '@/components/layout';
+import { PageHeader } from '@/components/navigation';
+import { OrderForm } from '@/components/orders';
+
+export default async function AddOrdersPage() {
+  return (
+    <>
+      <PageHeader title="Новая запись" />
+      <Container className="px-0">
+        <OrderForm />
+      </Container>
+    </>
+  );
 }
diff --git a/apps/web/components/orders/components/contacts-scroller.tsx b/apps/web/components/orders/components/contacts-scroller.tsx
new file mode 100644
index 0000000..cd21a4a
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/web/components/orders/components/index.ts b/apps/web/components/orders/components/index.ts
new file mode 100644
index 0000000..50c9fb1
--- /dev/null
+++ b/apps/web/components/orders/components/index.ts
@@ -0,0 +1 @@
+export * from './contacts-scroller';
diff --git a/apps/web/components/orders/index.ts b/apps/web/components/orders/index.ts
new file mode 100644
index 0000000..180a379
--- /dev/null
+++ b/apps/web/components/orders/index.ts
@@ -0,0 +1 @@
+export * from './order-form';
diff --git a/apps/web/components/orders/order-form.tsx b/apps/web/components/orders/order-form.tsx
new file mode 100644
index 0000000..95656cb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/web/public/avatar/avatar_placeholder.png b/apps/web/public/avatar/avatar_placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..09892098aa943af5fe95e7dd434a07fe03e7ccd1
GIT binary patch
literal 2011
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

literal 0
HcmV?d00001