From d6e46d30b79d5fe1107a668f7331e880d38a0bc0 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 4 Sep 2026 15:48:29 +0700
Subject: [PATCH] fix(ui): update node role labels and location display in
 nodes page

- Changed role labels to be more user-friendly (e.g., 'hub' to 'Hub').
- Enhanced location display to show city names and country flags instead of location codes.
- Removed unused MapPinIcon from the UI for cleaner presentation.
---
 apps/web/src/routes/_auth/nodes.tsx | 49 ++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/routes/_auth/nodes.tsx b/apps/web/src/routes/_auth/nodes.tsx
index da1f9e3..6fa4f1e 100644
--- a/apps/web/src/routes/_auth/nodes.tsx
+++ b/apps/web/src/routes/_auth/nodes.tsx
@@ -8,7 +8,6 @@ import type { ColumnDef } from '@tanstack/react-table'
 import type { Filter, FilterFieldConfig } from '@/components/reui/filters'
 import {
   CloudIcon,
-  MapPinIcon,
   PlusIcon,
   RefreshCwIcon,
   ServerIcon,
@@ -75,12 +74,16 @@ const formSchema = z.object({
 type FormValues = z.infer<typeof formSchema>
 
 const ROLES: { value: NodeRole; label: string }[] = [
-  { value: 'hub', label: 'hub' },
-  { value: 'gw', label: 'gw' },
-  { value: 'edge', label: 'edge' },
-  { value: 'ix', label: 'ix' },
+  { value: 'hub', label: 'Hub' },
+  { value: 'gw', label: 'Gateway' },
+  { value: 'edge', label: 'Edge' },
+  { value: 'ix', label: 'IX' },
 ]
 
+const ROLE_LABEL: Record<NodeRole, string> = Object.fromEntries(
+  ROLES.map((r) => [r.value, r.label]),
+) as Record<NodeRole, string>
+
 function NodesPage() {
   const qc = useQueryClient()
   const { data: nodes = [], isLoading, isError, error, refetch } = useQuery(
@@ -302,7 +305,10 @@ function NodesPage() {
         key: 'locationCode',
         label: 'Локация',
         type: 'select',
-        options: locations.map((l) => ({ value: l.code, label: l.code })),
+        options: locations.map((l) => ({
+          value: l.code,
+          label: l.name,
+        })),
       },
       {
         key: 'role',
@@ -340,16 +346,35 @@ function NodesPage() {
     {
       accessorKey: 'locationCode',
       header: 'Локация',
-      cell: ({ row }) => (
-        <span className="flex items-center gap-1.5 text-sm">
-          <MapPinIcon className="size-3.5" />
-          {row.original.locationCode ?? '—'}
-        </span>
-      ),
+      cell: ({ row }) => {
+        const n = row.original
+        const loc = locations.find((l) => l.id === n.locationId)
+        const city = n.locationName ?? loc?.name ?? n.locationCode ?? '—'
+        const countryCode = loc?.country ?? undefined
+        return (
+          <span className="flex items-center gap-2 text-sm">
+            <CountryFlag code={countryCode ?? undefined} country={countryNameFromCode(countryCode)} />
+            <span className="font-medium">{city}</span>
+            {n.locationCode ? (
+              <span className="text-muted-foreground font-mono text-xs">
+                {n.locationCode}
+              </span>
+            ) : null}
+          </span>
+        )
+      },
     },
     {
       accessorKey: 'role',
       header: 'Роль',
+      cell: ({ row }) => {
+        const role = row.original.role as NodeRole
+        return (
+          <span className="text-sm">
+            {ROLE_LABEL[role] ?? row.original.role}
+          </span>
+        )
+      },
     },
     {
       id: 'ip',