feat(admin-ui): Graph view с d3-force (Stage 3.3)

ordinis-admin-ui/src/routes/graph.tsx

@@ -1,19 +1,20 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { GitBranch } from 'lucide-react'
 import { PageHeader } from '@/ui'
-import { EmptyState } from '@/ui/components/empty-state'
+import { DictionaryGraph } from '@/components/graph/DictionaryGraph'
 
 /**
  * Граф связей справочников — d3-force network diagram.
  *
- * Stage 3.3 placeholder. Compute graph from {@code useDictionaries() +
- * useQueries(dependents)}: nodes = dicts, edges = FK refs. Layout —
- * d3-force с link/charge/center forces. Hover на node → highlight
- * incoming + outgoing. Click → navigate to dict.
+ * Render: SVG с force-directed layout. Nodes = справочники (color по bundle,
+ * size по recordCount). Edges = incoming FK refs (через useDictionaryDependents
+ * для каждого dict'а, параллельно).
  *
- * Dependency: `d3-force` (без full d3, ~30kb gz). Render через canvas
- * для 40+ nodes performance.
+ * Interactions:
+ *  - hover node → highlight node + connected edges + neighbors (dim others)
+ *  - click node → navigate /dictionaries/$name
+ *
+ * Performance: 40+ nodes SVG OK. >200 — переключать на canvas.
  */
 export const Route = createFileRoute('/graph')({
   component: GraphPage,
@@ -24,11 +25,7 @@ function GraphPage() {
   return (
     <div className="flex flex-col gap-4">
       <PageHeader title={t('graph.title')} description={t('graph.description')} />
-      <EmptyState
-        icon={<GitBranch strokeWidth={1.5} />}
-        title={t('graph.comingSoon.title')}
-        description={t('graph.comingSoon.description')}
-      />
+      <DictionaryGraph />
     </div>
   )
 }