From b97e41ed0716da80355499d99ccfe569c1df4bf6 Mon Sep 17 00:00:00 2001
From: fuomag9 <1580624+fuomag9@users.noreply.github.com>
Date: Thu, 12 Mar 2026 01:16:19 +0100
Subject: [PATCH] feat: add mobile card view to AcmeTab

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../certificates/components/AcmeTab.tsx       | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/(dashboard)/certificates/components/AcmeTab.tsx b/app/(dashboard)/certificates/components/AcmeTab.tsx
index d6107dbc..d41a01a9 100644
--- a/app/(dashboard)/certificates/components/AcmeTab.tsx
+++ b/app/(dashboard)/certificates/components/AcmeTab.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Chip, Typography } from "@mui/material";
+import { Card, Chip, Stack, Typography } from "@mui/material";
 import { DataTable } from "@/src/components/ui/DataTable";
 import type { AcmeHost, CertExpiryStatus } from "../page";
 import { RelativeTime } from "./RelativeTime";
@@ -54,6 +54,23 @@ const columns = [
   },
 ];
 
+function acmeMobileCard(r: AcmeHost) {
+  return (
+    <Card variant="outlined" sx={{ p: 2 }}>
+      <Stack spacing={0.5}>
+        <Typography variant="subtitle2" fontWeight={700}>{r.name}</Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ fontSize: "0.75rem" }}>
+          {r.domains.join(", ")}
+        </Typography>
+        <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap">
+          <RelativeTime validTo={r.certValidTo} status={r.certExpiryStatus} />
+          <Chip label={r.enabled ? "Active" : "Disabled"} color={r.enabled ? "success" : "default"} size="small" />
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}
+
 export function AcmeTab({ acmeHosts, acmePagination, search, statusFilter }: Props) {
   const filtered = acmeHosts.filter((h) => {
     if (statusFilter && h.certExpiryStatus !== statusFilter) return false;
@@ -80,6 +97,7 @@ export function AcmeTab({ acmeHosts, acmePagination, search, statusFilter }: Pro
       keyField="id"
       emptyMessage="No ACME certificates match"
       pagination={pagination}
+      mobileCard={acmeMobileCard}
     />
   );
 }