Колонки таблшицы в приличный вид

front/app.vue

@@ -3,7 +3,6 @@ const links = [[
   {
     label: 'Состояние вендотеков',
     icon: 'i-heroicons-credit-card',
-    to: '/vtk',
   },
   { label: 'Офис', to: '/vtk/office' },
   { label: 'Парк', to: '/vtk/park' },
@@ -12,7 +11,6 @@ const links = [[
   {
     label: 'Вебхуки битрикса',
     icon: 'i-heroicons-clipboard-document-list',
-    to: '/bx'
   },
   { label: 'Gitea', to: '/bx/gitea' },
   { label: 'Tg', to: '/bx/tg' },
@@ -20,14 +18,25 @@ const links = [[
 </script>
 
 <template>
-  <div class="container grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+  <div class="container grid gap-4 grid-cols-2 lg:grid-cols-4">
     <div class="col-span-4">
-      <div class="center">svs-tech.pro</div>
+      <div class="px-2 text-xl flex gap-4 align-center justify-between">
+        <h1 class="text-2xl font-extrabold">svs-tech.pro</h1>
+        <div class="flex gap-4">
+          <a href="https://git.svs-tech.pro/" label="git" target="_blank">
+            <UIcon name="i-simple-icons-git" dynamic />
+          </a>
+          <a href="https://bitwarden.svs-tech.pro/" label="bitwarden" target="_blank">
+            <UIcon name="i-simple-icons-bitwarden" dynamic />
+          </a>
+          <a href="https://crm.svs-tech.pro/" label="crm" target="_blank">Битрикс24</a>
+        </div>
+      </div>
     </div>
-    <div class="sm:col-span-4 lg:col-span-1">
+    <div class="col-span-4 lg:col-span-1">
       <UVerticalNavigation :links="links" />
     </div>
-    <div class="sm:col-span-1 lg:col-span-3">
+    <div class="col-span-4 lg:col-span-3">
       <NuxtPage />
     </div>
   </div>

front/pages/vtk/[slug].vue

@@ -13,22 +13,32 @@ const { data, pending, error, status } = await useLazyFetch<APIBody>(`${config.p
         :description="error?.data && error.data.detail ? error.data.detail : error?.statusMessage" />
 
     <UTable v-else :loading="pending" :columns="[
-        { key: 'sn', label: 'Serial Number' },
+        { key: 'status', label: 'Status' },
         { key: 'name', label: 'Name' },
         { key: 'ip', label: 'IP' },
-        { key: 'last_online', label: 'Last Online' }
+    ]" :rows="pending ? [] : data?.data" :ui="{
-    ]" :rows="pending ? [] : data?.data">
+        td: {
-        <template #last_online-data="{ row }">
+            padding: 'px-2 md:px-4 py-2 md:py-4',
-            <UIcon name="i-heroicons-check-circle" class="text-green-500 text-xl" v-if="row.last_online == -1" />
+        },
-            <span class="flex align-baseline gap-1" v-else>
+    }">
-                <UIcon name="i-heroicons-x-circle" class="text-red-500 text-xl" />
+        <template #status-data="{ row }">
-                {{ new Date(row.last_online).toLocaleTimeString('ru-RU') }}
+            <span class="flex align-baseline justify-center gap-1">
+                <UIcon name="i-heroicons-check-circle" class="text-green-500 text-xl" v-if="row.last_online == -1" />
+                <span class="flex align-baseline gap-1" v-else>
+                    <UIcon name="i-heroicons-x-circle" class="text-red-500 text-xl" />
+                    {{ new Date(row.last_online).toLocaleTimeString('ru-RU') }}
+                </span>
             </span>
         </template>
         <template #name-data="{ row }">
             <div class="text-wrap">
+                {{ row.sn }} -
                 {{ row.name }}
             </div>
         </template>
+        <template #ip-data="{ row }">
+            <span v-if="row.ip !== 'Unknown'">{{ row.ip }}</span>
+            <span v-else>-</span>
+        </template>
     </UTable>
 </template>

front/tailwind.config.js

@@ -7,6 +7,6 @@ module.exports = {
                 sm: '0.5rem',
                 lg: '2rem'
             }
-        }
+        },
     },
 };