feat: Complete layout of Termix dashboard

src/ui/Desktop/Apps/Dashboard/Apps/UpdateLog.tsx

@@ -96,11 +96,10 @@ export function UpdateLog({ loggedIn }: UpdateLogProps) {
     <>
       <Button
         variant="outline"
-        size="lg"
+        size="sm"
-        className="text-sm border-2 border-dark-border text-gray-300 hover:text-white hover:bg-dark-bg-darker transition-colors"
+        className="ml-2 text-sm border-1 border-dark-border text-muted-foreground"
         onClick={() => setIsOpen(true)}
       >
-        <BookOpen className="w-4 h-4 mr-2" />
         {t("common.updatesAndReleases")}
       </Button>
 
@@ -109,7 +108,6 @@ export function UpdateLog({ loggedIn }: UpdateLogProps) {
           side="right"
           className="w-[500px] bg-dark-bg border-l-2 border-dark-border text-white sm:max-w-[500px] p-0 flex flex-col [&>button]:hidden"
         >
-          {/* Header */}
           <div className="flex items-center justify-between p-4 border-b border-dark-border">
             <h2 className="text-lg font-semibold text-white">
               {t("common.updatesAndReleases")}
@@ -125,7 +123,6 @@ export function UpdateLog({ loggedIn }: UpdateLogProps) {
             </Button>
           </div>
 
-          {/* Content */}
           <div className="flex-1 overflow-y-auto p-4">
             {versionInfo && versionInfo.status === "requires_update" && (
               <Alert className="bg-dark-bg-darker border-dark-border text-white mb-3">

src/ui/Desktop/Apps/Dashboard/Dashboard.tsx

@@ -6,8 +6,21 @@ import { Button } from "@/components/ui/button.tsx";
 import { getUserInfo, getDatabaseHealth, getCookie } from "@/ui/main-axios.ts";
 import { useSidebar } from "@/components/ui/sidebar.tsx";
 import { Separator } from "@/components/ui/separator.tsx";
-import { ChartLine, History } from "lucide-react";
+import {
+  ChartLine,
+  Clock,
+  Database,
+  FastForward,
+  History,
+  Key,
+  Network,
+  Server,
+  UserPlus,
+  Settings,
+  User,
+} from "lucide-react";
 import { Status } from "@/components/ui/shadcn-io/status";
+import { BsLightning } from "react-icons/bs";
 
 interface DashboardProps {
   onSelectView: (view: string) => void;
@@ -168,29 +181,215 @@ export function Dashboard({
             <Separator className="mt-3 p-0.25" />
 
             <div className="flex flex-col h-screen my-5 mx-5 gap-4">
-              <div className="flex flex-row flex-1 gap-4">
+              <div className="flex flex-row flex-1 gap-4 min-h-0">
-                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker">
+                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
-                  <div className="flex flex-col mx-3 my-2">
+                  <div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden">
-                    <p className="text-xl font-semibold mb-3 flex flex-row">
+                    <p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
-                      <ChartLine className="mr-3" />
+                      <Server className="mr-3" />
-                      Server Status
+                      Server Overview
                     </p>
-                    <div className="flex flex-row items-center">
+                    <div className="bg-dark-bg w-full h-auto border-2 border-dark-border rounded-md px-3 py-3">
-                      <History color="#7393B3" />
+                      <div className="flex flex-row items-center justify-between mb-3">
-                      <p className="ml-3">Version</p>
+                        <div className="flex flex-row items-center">
+                          <History
+                            size={20}
+                            color="#FFFFFF"
+                            className="shrink-0"
+                          />
+                          <p className="ml-2 leading-none">Version</p>
+                        </div>
+
+                        <div className="flex flex-row items-center">
+                          <p className="leading-none text-muted-foreground">
+                            v1.8.0
+                          </p>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="ml-2 text-sm border-1 text-green-400 border-dark-border"
+                          >
+                            Up to Date
+                          </Button>
+                          <UpdateLog loggedIn={loggedIn} />
+                        </div>
+                      </div>
+
+                      <div className="flex flex-row items-center justify-between mb-5">
+                        <div className="flex flex-row items-center">
+                          <Clock
+                            size={20}
+                            color="#FFFFFF"
+                            className="shrink-0"
+                          />
+                          <p className="ml-2 leading-none">Uptime</p>
+                        </div>
+
+                        <div className="flex flex-row items-center">
+                          <p className="leading-none text-muted-foreground">
+                            0d 0h 7m
+                          </p>
+                        </div>
+                      </div>
+
+                      <div className="flex flex-row items-center justify-between">
+                        <div className="flex flex-row items-center">
+                          <Database
+                            size={20}
+                            color="#FFFFFF"
+                            className="shrink-0"
+                          />
+                          <p className="ml-2 leading-none">Database</p>
+                        </div>
+
+                        <div className="flex flex-row items-center">
+                          <p className="leading-none text-muted-foreground">
+                            healthy
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex flex-col grid grid-cols-2 gap-2 mt-2">
+                      <div className="flex flex-row items-center bg-dark-bg w-full h-auto mt-3 border-2 border-dark-border rounded-md px-3 py-3">
+                        <Server
+                          size={16}
+                          color="#FFFFFF"
+                          className="mr-3 shrink-0"
+                        />
+                        <p className="m-0 leading-none">Total Servers</p>
+                      </div>
+                      <div className="flex flex-row items-center bg-dark-bg w-full h-auto mt-3 border-2 border-dark-border rounded-md px-3 py-3">
+                        <Network
+                          size={16}
+                          color="#FFFFFF"
+                          className="mr-3 shrink-0"
+                        />
+                        <p className="m-0 leading-none">Total Tunnels</p>
+                      </div>
+                    </div>
+                    <div className="flex flex-col grid grid-cols-2 gap-2 mt-2">
+                      <div className="flex flex-row items-center bg-dark-bg w-full h-auto mt-3 border-2 border-dark-border rounded-md px-3 py-3">
+                        <Key
+                          size={16}
+                          color="#FFFFFF"
+                          className="mr-3 shrink-0"
+                        />
+                        <p className="m-0 leading-none">Total Credentials</p>
+                      </div>
                     </div>
                   </div>
                 </div>
-                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker">
+                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
-                  test
+                  <div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
+                    <div className="flex flex-row items-center justify-between mb-3 mt-1">
+                      <p className="text-xl font-semibold flex flex-row items-center">
+                        <Clock className="mr-3" />
+                        Recent Activity
+                      </p>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="border-2 !border-dark-border h-7"
+                      >
+                        Reset
+                      </Button>
+                    </div>
+                    <div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-y-auto overflow-x-hidden">
+                      <Button
+                        variant="outline"
+                        className="border-2 !border-dark-border bg-dark-bg"
+                      >
+                        <Server size={20} className="shrink-0" />
+                        <p className="truncate ml-2">Server #1</p>
+                      </Button>
+                    </div>
+                  </div>
                 </div>
               </div>
-              <div className="flex flex-row flex-1 gap-4">
+              <div className="flex flex-row flex-1 gap-4 min-h-0">
-                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker">
+                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
-                  test
+                  <div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden">
+                    <p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
+                      <FastForward className="mr-3" />
+                      Quick Actions
+                    </p>
+                    <div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-y-auto overflow-x-hidden">
+                      <Button
+                        variant="outline"
+                        className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3"
+                      >
+                        <Server
+                          className="shrink-0"
+                          style={{ width: "40px", height: "40px" }}
+                        />
+                        <span className="font-semibold text-sm mt-2">
+                          Add Host
+                        </span>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3"
+                      >
+                        <Key
+                          className="shrink-0"
+                          style={{ width: "40px", height: "40px" }}
+                        />
+                        <span className="font-semibold text-sm mt-2">
+                          Add Credential
+                        </span>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3"
+                      >
+                        <Settings
+                          className="shrink-0"
+                          style={{ width: "40px", height: "40px" }}
+                        />
+                        <span className="font-semibold text-sm mt-2">
+                          Admin Settings
+                        </span>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3"
+                      >
+                        <User
+                          className="shrink-0"
+                          style={{ width: "40px", height: "40px" }}
+                        />
+                        <span className="font-semibold text-sm mt-2">
+                          User Profile
+                        </span>
+                      </Button>
+                    </div>
+                  </div>
                 </div>
-                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker">
+                <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
-                  test
+                  <div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
+                    <p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
+                      <ChartLine className="mr-3" />
+                      Server Stats
+                    </p>
+                    <div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-y-auto overflow-x-hidden">
+                      <Button
+                        variant="outline"
+                        className="border-2 !border-dark-border bg-dark-bg h-auto p-3"
+                      >
+                        <div className="flex flex-col w-full">
+                          <div className="flex flex-row items-center mb-2">
+                            <Server size={20} className="shrink-0" />
+                            <p className="truncate ml-2 font-semibold">
+                              Server #1
+                            </p>
+                          </div>
+                          <div className="flex flex-row justify-between text-xs text-muted-foreground">
+                            <span>CPU: 45%</span>
+                            <span>RAM: 62%</span>
+                          </div>
+                        </div>
+                      </Button>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>