orus-dev/dockship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made the ui more mobile friendly

Browse Source
This commit is contained in:
selimaj-dev
2025-12-26 20:59:52 +01:00
parent 567a75caff
commit 225eea0861
12 changed files with 1039 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/overview/page.tsx
+27 -28
View File
@@ -117,7 +117,7 @@ export default function OverviewPage() {
return (
<DashboardLayout title="Overview" subtitle="System status and metrics">
{/* Stats Grid */}
<div className="grid grid-cols-4 gap-4 mb-6">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<StatCard
title="Applications"
value="12"
@@ -144,9 +144,10 @@ export default function OverviewPage() {
/>
</div>
<div className="grid grid-cols-3 gap-4">
{/* Applications & Deployments */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Applications Table */}
<Card className="col-span-2">
<Card className="md:col-span-2">
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle>Applications</CardTitle>
<Link href="/applications">
@@ -155,8 +156,8 @@ export default function OverviewPage() {
</Button>
</Link>
</CardHeader>
<CardContent>
<div className="space-y-0">
<CardContent className="overflow-x-auto">
<div className="space-y-0 min-w-125">
<div className="grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
<div className="col-span-4">Name</div>
<div className="col-span-2">Containers</div>
@@ -167,27 +168,23 @@ export default function OverviewPage() {
{applications.map((app) => (
<div
key={app.name}
className="grid grid-cols-12 gap-4 py-3 data-table-row items-center"
className="grid grid-cols-12 gap-4 py-3 items-center data-table-row"
>
<div className="col-span-4 font-mono text-sm">{app.name}</div>
<div className="col-span-2 text-sm text-muted-foreground">
{app.containers}
</div>
<div className="col-span-2">
<div className="flex items-center gap-2">
<Progress value={app.cpu} className="w-full" />
<span className="text-xs text-muted-foreground font-mono w-8">
{app.cpu}%
</span>
</div>
<div className="col-span-2 flex items-center gap-2">
<Progress value={app.cpu} className="w-full" />
<span className="text-xs text-muted-foreground font-mono w-8">
{app.cpu}%
</span>
</div>
<div className="col-span-2">
<div className="flex items-center gap-2">
<Progress value={app.memory} className="w-full" />
<span className="text-xs text-muted-foreground font-mono w-8">
{app.memory}%
</span>
</div>
<div className="col-span-2 flex items-center gap-2">
<Progress value={app.memory} className="w-full" />
<span className="text-xs text-muted-foreground font-mono w-8">
{app.memory}%
</span>
</div>
<div className="col-span-2">
<StatusIndicator status={app.status} showLabel />
@@ -213,7 +210,7 @@ export default function OverviewPage() {
{recentDeployments.map((dep) => (
<div
key={dep.id}
className="flex items-center justify-between py-2 border-b border-border last:border-0"
className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-2 border-b border-border last:border-0"
>
<div className="flex items-center gap-3">
<StatusIndicator status={dep.status} size="sm" />
@@ -224,9 +221,8 @@ export default function OverviewPage() {
</div>
</div>
</div>
<div className="flex items-center gap-1 text-xs text-muted-foreground">
<Clock className="w-3 h-3" />
{dep.time}
<div className="flex items-center gap-1 text-xs text-muted-foreground mt-1 sm:mt-0">
<Clock className="w-3 h-3" /> {dep.time}
</div>
</div>
))}
@@ -241,14 +237,14 @@ export default function OverviewPage() {
<CardTitle>Cluster Nodes</CardTitle>
<Badge>{nodes.length} nodes</Badge>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-4">
<CardContent className="overflow-x-auto">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 min-w-75">
{nodes.map((node) => (
<div
key={node.name}
className="border border-border p-4 bg-secondary/30"
>
<div className="flex items-center justify-between mb-3">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-3 gap-2">
<div className="flex items-center gap-2">
<StatusIndicator status={node.status} />
<span className="font-mono text-sm">{node.name}</span>
@@ -267,7 +263,10 @@ export default function OverviewPage() {
<span className="text-muted-foreground">Memory</span>
<span className="font-mono">{node.memory}%</span>
</div>
<Progress value={node.memory} className="w-full [&>div]:bg-chart-3" />
<Progress
value={node.memory}
className="w-full [&>div]:bg-chart-3"
/>
<div className="flex items-center justify-between text-xs pt-2 border-t border-border mt-2">
<span className="text-muted-foreground">Containers</span>
<span className="font-mono">{node.containers}</span>