feat: table style update

src/app/(dashboard)/project/[projectId]/(home)/layout.tsx

@@ -32,7 +32,7 @@ export default function ProjectHomeLayout({
   }));
 
   return (
-    <div className="hidden space-y-6 py-10 md:block">
+    <div className="block space-y-6 py-10">
       <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
         <aside className="lg:w-1/5">
           <SidebarNav items={items} />

src/app/(dashboard)/project/[projectId]/service/[serviceId]/advanced/DeploymentSettings.tsx

@@ -24,7 +24,7 @@ import { api } from "~/trpc/react";
 import { type RouterOutputs } from "~/trpc/shared";
 
 const formValidator = z.object({
-  replicas: z.coerce.number().int().positive(),
+  replicas: z.coerce.number().int().min(0),
   maxReplicasPerNode: z.number().int().positive().nullable(),
   deployMode: z.enum(["replicated", "global"]),
   zeroDowntime: z.boolean(),

src/app/(dashboard)/project/[projectId]/service/[serviceId]/containers/ContainersList.tsx

@@ -40,7 +40,7 @@ export default function ContainersPage({
           <TableHead>Uptime</TableHead>
           <TableHead>Node</TableHead>
           <TableHead>CPU</TableHead>
-          <TableHead>Memory</TableHead>
+          <TableHead>Memory (used/limit)</TableHead>
           <TableHead>Network (RX/TX)</TableHead>
           <TableHead className="text-right">Actions</TableHead>
         </TableRow>

src/app/(dashboard)/project/[projectId]/service/[serviceId]/containers/_components/ContainerEntry.tsx

@@ -45,7 +45,7 @@ export function ContainerEntry({
 
   return (
     <>
-      <TableRow className="!border-b-0">
+      <TableRow>
         <TableCell
           className="cursor-pointer font-mono text-sm text-muted-foreground"
           onClick={() => {
@@ -95,7 +95,7 @@ export function ContainerEntry({
 
         <TableCell>{uptimeText ?? "N/A"}</TableCell>
         <TableCell>{mainContainer?.node ?? "unknown"}</TableCell>
-        <TableCell>{mainContainer?.cpu?.toFixed(2) ?? "?"}%</TableCell>
+        <TableCell>{mainContainer?.cpu?.toFixed(2) ?? "0.00"}%</TableCell>
         <TableCell>
           {prettyBytes(mainContainer?.usedMemory ?? 0)} /{" "}
           {prettyBytes(mainContainer?.totalMemory ?? 0)}

src/app/(dashboard)/project/[projectId]/service/[serviceId]/layout.tsx

@@ -7,8 +7,10 @@ import {
   ContainerIcon,
   GlobeIcon,
   HomeIcon,
+  NetworkIcon,
   SaveAllIcon,
   ServerCogIcon,
+  TextIcon,
 } from "lucide-react";
 import { SidebarNav, type SidebarNavProps } from "~/components/SidebarNav";
 import { useProject } from "../../_context/ProjectContext";
@@ -38,6 +40,12 @@ const sidebarNavItems = [
     href: "/deployments",
     icon: CloudyIcon,
   },
+  {
+    title: "Logs",
+    description: "Logs for this service.",
+    href: "/logs",
+    icon: TextIcon,
+  },
 
   {
     type: "divider",
@@ -56,6 +64,12 @@ const sidebarNavItems = [
     href: "/domains",
     icon: GlobeIcon,
   },
+  {
+    title: "Network",
+    description: "Network settings",
+    href: "/network",
+    icon: NetworkIcon,
+  },
   {
     title: "Environment",
     description: "Environment settings",
@@ -88,7 +102,7 @@ export default function ProjectHomeLayout({
   })) as SidebarNavProps["items"];
 
   return (
-    <div className="hidden space-y-6 py-10 md:block">
+    <div className="space-y-6 py-10">
       <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
         <aside className="lg:w-1/5">
           <SidebarNav items={items} />

src/components/SidebarNav.tsx

@@ -30,7 +30,7 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
   return (
     <nav
       className={cn(
-        "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
+        "flex flex-col space-x-2 lg:space-x-0 lg:space-y-1",
         className,
       )}
       {...props}

src/components/ui/table.tsx

@@ -20,7 +20,14 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card bg-clip-border px-4 [&_tr]:border-b",
+      className,
+    )}
+    {...props}
+  />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -110,11 +117,11 @@ TableCaption.displayName = "TableCaption";
 
 export {
   Table,
-  TableHeader,
   TableBody,
+  TableCaption,
+  TableCell,
   TableFooter,
   TableHead,
+  TableHeader,
   TableRow,
-  TableCell,
-  TableCaption,
 };