decompose structure

src/features/edges-dashboard/EdgesDashboard.tsx

@@ -0,0 +1,162 @@
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { ArrowRight, Clock3, Gauge, LogOut, RefreshCw, Search, ShieldAlert, Wrench } from 'lucide-react';
+import edgeImage from '../../assets/edge.png';
+import { getEdges } from '../../entities/edge/api';
+import type { EdgeItem } from '../../entities/edge/types';
+import { useAuth } from '../../auth/authContext';
+
+type EdgesDashboardProps = {
+  onOpenEdge: (edgeId: string) => void;
+  onOpenEquipment: (edgeId: string) => void;
+};
+
+function getEdgeTitle(edge: EdgeItem): string {
+  return edge.name && edge.name !== edge.id ? edge.name : edge.id;
+}
+
+function filterEdges(edges: EdgeItem[], search: string): EdgeItem[] {
+  const query = search.trim().toLowerCase();
+  return query ? edges.filter((edge) => `${edge.id} ${edge.name}`.toLowerCase().includes(query)) : edges;
+}
+
+/** Отображает список буровых без расчетов по текущим значениям. */
+export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardProps) {
+  const [search, setSearch] = useState('');
+  const auth = useAuth();
+  const edges = useQuery({
+    queryKey: ['edge'],
+    queryFn: getEdges,
+    refetchInterval: false,
+  });
+
+  const filteredEdges = useMemo(() => filterEdges(edges.data?.items ?? [], search), [edges.data?.items, search]);
+
+  return (
+    <main className="dashboard-shell">
+      <header className="dashboard-header">
+        <div>
+          <span className="page-kicker">Drill Cloud v3</span>
+          <h1>Буровые установки</h1>
+        </div>
+        <div className="dashboard-actions">
+          <label className="search-box dashboard-search">
+            <Search size={16} />
+            <input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Поиск буровой" />
+          </label>
+          <button type="button" className="icon-button" onClick={() => edges.refetch()} title="Обновить список">
+            <RefreshCw size={18} />
+          </button>
+          {auth.enabled ? (
+            <button type="button" className="ghost-button" onClick={() => void auth.logout()}>
+              <LogOut size={17} />
+              Выйти
+            </button>
+          ) : null}
+        </div>
+      </header>
+
+      <section className="dashboard-stats" aria-label="Статистика буровых">
+        <StatBlock label="Всего установок" value={edges.data?.items.length ?? 0} tone="neutral" />
+        <StatBlock label="Найдено" value={filteredEdges.length} tone="accent" />
+      </section>
+
+      {edges.isError ? (
+        <div className="empty-panel">Не удалось загрузить список буровых: {String(edges.error)}</div>
+      ) : (
+        <section className="edge-card-grid" aria-label="Буровые установки">
+          {filteredEdges.map((edge) => (
+            <EdgeCard
+              key={edge.id}
+              edge={edge}
+              onOpenEdge={onOpenEdge}
+              onOpenEquipment={onOpenEquipment}
+            />
+          ))}
+        </section>
+      )}
+
+      {!edges.isPending && !filteredEdges.length && !edges.isError ? (
+        <div className="empty-panel">В cloud-v3 пока нет буровых</div>
+      ) : null}
+    </main>
+  );
+}
+
+function StatBlock({
+  label,
+  value,
+  tone,
+}: {
+  label: string;
+  value: number;
+  tone: 'neutral' | 'success' | 'danger' | 'warning' | 'accent';
+}) {
+  return (
+    <article className={`dashboard-stat dashboard-stat--${tone}`}>
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </article>
+  );
+}
+
+function EdgeCard({
+  edge,
+  onOpenEdge,
+  onOpenEquipment,
+}: {
+  edge: EdgeItem;
+  onOpenEdge: (edgeId: string) => void;
+  onOpenEquipment: (edgeId: string) => void;
+}) {
+  const title = getEdgeTitle(edge);
+
+  return (
+    <article className="edge-card">
+      <header className="edge-card__header">
+        <div className="edge-card__logo">
+          <img src={edgeImage} alt="" />
+        </div>
+        <div className="edge-card__title">
+          <h2>{title}</h2>
+          <span>{edge.id}</span>
+        </div>
+      </header>
+
+      <div className="edge-card__actions" aria-label={`Разделы ${title}`}>
+        <button type="button" onClick={() => onOpenEquipment(edge.id)}>
+          <Wrench size={15} />
+          Оборудование
+        </button>
+        <button type="button">
+          <Gauge size={15} />
+          Состояние байпасов
+        </button>
+        <button type="button">
+          <ShieldAlert size={15} />
+          Аварии приводов
+        </button>
+        <button type="button">
+          <Clock3 size={15} />
+          Техническое обслуживание
+        </button>
+      </div>
+
+      <section className="edge-card__maintenance" aria-label="Техническое обслуживание">
+        <span>Техническое обслуживание</span>
+        <div>
+          <button type="button">Ежедневное</button>
+          <button type="button">Еженедельное</button>
+          <button type="button">Ежемесячное</button>
+          <button type="button">Полугодовое</button>
+          <button type="button">Годовое</button>
+        </div>
+      </section>
+
+      <button type="button" className="edge-card__details" onClick={() => onOpenEdge(edge.id)}>
+        <span>Подробнее</span>
+        <ArrowRight size={18} />
+      </button>
+    </article>
+  );
+}