Apps, web, i18n, UI, partners, payouts, backoffice, bariki, prod infra

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

apps/miniapp-client/src/screens/Orders.tsx

@@ -0,0 +1,44 @@
+import { useQuery } from '@tanstack/react-query';
+import { Center, LinkButton, Segmented, Spinner } from '@barev/ui';
+import { useI18n, useTRPC } from '@barev/web';
+import { useState } from 'react';
+import { OrderRow, PageHead } from '../lib.tsx';
+
+export function Orders() {
+  const { t } = useI18n();
+  const trpc = useTRPC();
+  const orders = useQuery({ ...trpc.client.orders.list.queryOptions(), refetchInterval: 20_000 });
+  const [tab, setTab] = useState<'active' | 'history'>('active');
+  if (!orders.data)
+    return (
+      <Center>
+        <Spinner />
+      </Center>
+    );
+  const list = orders.data[tab];
+  return (
+    <main className="app">
+      <PageHead title={t('client.orders.title')} />
+      <Segmented
+        value={tab}
+        onChange={setTab}
+        options={[
+          { value: 'active', label: `${t('client.orders.active')} · ${orders.data.active.length}` },
+          { value: 'history', label: t('client.orders.history') },
+        ]}
+      />
+      {list.length === 0 ? (
+        <div className="bc-stack" style={{ alignItems: 'center', padding: 24 }}>
+          <p className="bc-muted">{t(tab === 'active' ? 'client.home.noOrders' : 'client.orders.noHistory')}</p>
+          <LinkButton href="#/services">{t('client.orders.order')}</LinkButton>
+        </div>
+      ) : (
+        <div className="bc-stack" style={{ gap: 8 }}>
+          {list.map((o) => (
+            <OrderRow key={o.id} o={o} />
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}