@spaceinvoices/react-ui 0.4.2 → 0.4.4

package/src/components/documents/view/document-activities-list.tsx

@@ -27,6 +27,7 @@ interface DocumentActivitiesListProps extends ComponentTranslationProps {
   entityId: string;
   currentUserId?: string;
   locale?: string;
+  variant?: "card" | "inline";
 }
 
 function formatActivityDate(date: string, locale: string): string {
@@ -67,6 +68,7 @@ export function DocumentActivitiesList({
   entityId,
   currentUserId,
   locale = "en",
+  variant = "card",
   ...i18nProps
 }: DocumentActivitiesListProps) {
   const t = createTranslation({ translations, locale, ...i18nProps });
@@ -107,60 +109,76 @@ export function DocumentActivitiesList({
   const hasPrev = cursors.length > 0;
   const hasNext = !!pagination?.has_more;
 
+  const paginationButtons = (hasPrev || hasNext) && (
+    <div className="flex items-center gap-1">
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handlePrevPage}
+        disabled={!hasPrev}
+        className="h-8 w-8 cursor-pointer p-0"
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handleNextPage}
+        disabled={!hasNext}
+        className="h-8 w-8 cursor-pointer p-0"
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+
+  const bodyContent = isLoading ? (
+    <div className="space-y-2">
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+  ) : activities.length === 0 ? (
+    <p className="py-4 text-center text-muted-foreground text-sm">{t("No activity")}</p>
+  ) : (
+    <div className="space-y-2">
+      {activities.map((activity) => (
+        <div key={activity.id} className="flex items-start justify-between rounded-md border p-3">
+          <div className="flex flex-col gap-0.5">
+            <span className="font-medium text-sm">{getActionLabel(activity.action, t)}</span>
+            <span className="text-muted-foreground text-xs">
+              {t("by")} {getActorLabel(activity, t, currentUserId)}
+            </span>
+          </div>
+          <span className="text-muted-foreground text-xs">{formatActivityDate(activity.created_at, locale)}</span>
+        </div>
+      ))}
+    </div>
+  );
+
+  if (variant === "inline") {
+    return (
+      <div>
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="font-medium text-sm">
+            {t("Activity")} {pagination && pagination.total > 0 && `(${pagination.total})`}
+          </h3>
+          {paginationButtons}
+        </div>
+        {bodyContent}
+      </div>
+    );
+  }
+
   return (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between pb-3">
         <CardTitle className="text-lg">
           {t("Activity")} {pagination && pagination.total > 0 && `(${pagination.total})`}
         </CardTitle>
-        {(hasPrev || hasNext) && (
-          <div className="flex items-center gap-1">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handlePrevPage}
-              disabled={!hasPrev}
-              className="h-8 w-8 cursor-pointer p-0"
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleNextPage}
-              disabled={!hasNext}
-              className="h-8 w-8 cursor-pointer p-0"
-            >
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
+        {paginationButtons}
       </CardHeader>
-      <CardContent>
-        {isLoading ? (
-          <div className="space-y-2">
-            <Skeleton className="h-10 w-full" />
-            <Skeleton className="h-10 w-full" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-        ) : activities.length === 0 ? (
-          <p className="py-4 text-center text-muted-foreground text-sm">{t("No activity")}</p>
-        ) : (
-          <div className="space-y-2">
-            {activities.map((activity) => (
-              <div key={activity.id} className="flex items-start justify-between rounded-md border p-3">
-                <div className="flex flex-col gap-0.5">
-                  <span className="font-medium text-sm">{getActionLabel(activity.action, t)}</span>
-                  <span className="text-muted-foreground text-xs">
-                    {t("by")} {getActorLabel(activity, t, currentUserId)}
-                  </span>
-                </div>
-                <span className="text-muted-foreground text-xs">{formatActivityDate(activity.created_at, locale)}</span>
-              </div>
-            ))}
-          </div>
-        )}
-      </CardContent>
+      <CardContent>{bodyContent}</CardContent>
     </Card>
   );
 }

package/src/components/documents/view/document-details-card.tsx

@@ -1,4 +1,4 @@
-import type { AdvanceInvoice, CreditNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
+import type { AdvanceInvoice, CreditNote, DeliveryNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
 import { Badge } from "@/ui/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
 import { Separator } from "@/ui/components/ui/separator";
@@ -17,14 +17,15 @@ import sl from "./locales/sl";
 const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 // Document type union
-type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
-type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice";
+type Document = Invoice | Estimate | CreditNote | AdvanceInvoice | DeliveryNote;
+type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
 
 interface DocumentDetailsCardProps extends ComponentTranslationProps {
   document: Document;
   documentType: DocumentType;
   /** Locale for date formatting */
   locale?: string;
+  variant?: "card" | "inline";
 }
 
 /**
@@ -79,7 +80,13 @@ function getPaymentStatus(
  * - Totals breakdown
  * - Payment status (for invoices/advance invoices)
  */
-export function DocumentDetailsCard({ document, documentType, locale = "en", ...i18nProps }: DocumentDetailsCardProps) {
+export function DocumentDetailsCard({
+  document,
+  documentType,
+  locale = "en",
+  variant = "card",
+  ...i18nProps
+}: DocumentDetailsCardProps) {
   const t = createTranslation({ translations, locale, ...i18nProps });
 
   const currencyCode = document.currency_code;
@@ -98,6 +105,96 @@ export function DocumentDetailsCard({ document, documentType, locale = "en", ...
   // Calculate tax total
   const taxTotal = document.total_with_tax - document.total;
 
+  const bodyContent = (
+    <>
+      {/* Document info */}
+      <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+        <div className="text-muted-foreground">{t("Number")}</div>
+        <div className="text-right font-medium">{document.number}</div>
+
+        <div className="text-muted-foreground">{t("Date")}</div>
+        <div className="text-right">{fmtDate(document.date)}</div>
+
+        {isInvoiceOrAdvance && invoiceDoc.date_due && (
+          <>
+            <div className="text-muted-foreground">{t("Due date")}</div>
+            <div className="text-right">{fmtDate(invoiceDoc.date_due)}</div>
+          </>
+        )}
+
+        {isInvoiceOrAdvance && (invoiceDoc as any).date_service && (
+          <>
+            <div className="text-muted-foreground">
+              {(invoiceDoc as any).date_service_to ? t("Service period") : t("Service date")}
+            </div>
+            <div className="text-right">
+              {(invoiceDoc as any).date_service_to
+                ? `${fmtDate((invoiceDoc as any).date_service)} - ${fmtDate((invoiceDoc as any).date_service_to)}`
+                : fmtDate((invoiceDoc as any).date_service)}
+            </div>
+          </>
+        )}
+
+        {isEstimate && estimateDoc.date_valid_till && (
+          <>
+            <div className="text-muted-foreground">{t("Valid until")}</div>
+            <div className="text-right">{fmtDate(estimateDoc.date_valid_till)}</div>
+          </>
+        )}
+
+        <div className="text-muted-foreground">{t("Customer")}</div>
+        <div className="text-right">{customerName}</div>
+      </div>
+
+      <Separator />
+
+      {/* Totals */}
+      <div className="space-y-2 text-sm">
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">{t("Subtotal")}</span>
+          <span>{fmt(document.total)}</span>
+        </div>
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">{t("Tax")}</span>
+          <span>{fmt(taxTotal)}</span>
+        </div>
+        <div className="flex justify-between font-semibold">
+          <span>{t("Total")}</span>
+          <span>{fmt(document.total_with_tax)}</span>
+        </div>
+
+        {/* Payment info for invoices/advance invoices */}
+        {isInvoiceOrAdvance && invoiceDoc.total_paid > 0 && (
+          <>
+            <Separator />
+            <div className="flex justify-between text-green-600">
+              <span>{t("Paid")}</span>
+              <span>-{fmt(invoiceDoc.total_paid)}</span>
+            </div>
+            <div className="flex justify-between font-semibold">
+              <span>{t("Due")}</span>
+              <span>{fmt(invoiceDoc.total_due)}</span>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+
+  if (variant === "inline") {
+    return (
+      <div className="space-y-3">
+        <div className="flex items-center justify-between font-medium text-sm">
+          {t("Details")}
+          {isInvoiceOrAdvance && (
+            <Badge variant={getPaymentStatus(invoiceDoc, t).variant}>{getPaymentStatus(invoiceDoc, t).label}</Badge>
+          )}
+        </div>
+        <div className="space-y-4">{bodyContent}</div>
+      </div>
+    );
+  }
+
   return (
     <Card>
       <CardHeader className="pb-3">
@@ -108,79 +205,7 @@ export function DocumentDetailsCard({ document, documentType, locale = "en", ...
           )}
         </CardTitle>
       </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Document info */}
-        <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
-          <div className="text-muted-foreground">{t("Number")}</div>
-          <div className="text-right font-medium">{document.number}</div>
-
-          <div className="text-muted-foreground">{t("Date")}</div>
-          <div className="text-right">{fmtDate(document.date)}</div>
-
-          {isInvoiceOrAdvance && (
-            <>
-              <div className="text-muted-foreground">{t("Due date")}</div>
-              <div className="text-right">{fmtDate(invoiceDoc.date_due)}</div>
-            </>
-          )}
-
-          {isInvoiceOrAdvance && (invoiceDoc as any).date_service && (
-            <>
-              <div className="text-muted-foreground">
-                {(invoiceDoc as any).date_service_to ? t("Service period") : t("Service date")}
-              </div>
-              <div className="text-right">
-                {(invoiceDoc as any).date_service_to
-                  ? `${fmtDate((invoiceDoc as any).date_service)} - ${fmtDate((invoiceDoc as any).date_service_to)}`
-                  : fmtDate((invoiceDoc as any).date_service)}
-              </div>
-            </>
-          )}
-
-          {isEstimate && estimateDoc.date_valid_till && (
-            <>
-              <div className="text-muted-foreground">{t("Valid until")}</div>
-              <div className="text-right">{fmtDate(estimateDoc.date_valid_till)}</div>
-            </>
-          )}
-
-          <div className="text-muted-foreground">{t("Customer")}</div>
-          <div className="text-right">{customerName}</div>
-        </div>
-
-        <Separator />
-
-        {/* Totals */}
-        <div className="space-y-2 text-sm">
-          <div className="flex justify-between">
-            <span className="text-muted-foreground">{t("Subtotal")}</span>
-            <span>{fmt(document.total)}</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-muted-foreground">{t("Tax")}</span>
-            <span>{fmt(taxTotal)}</span>
-          </div>
-          <div className="flex justify-between font-semibold">
-            <span>{t("Total")}</span>
-            <span>{fmt(document.total_with_tax)}</span>
-          </div>
-
-          {/* Payment info for invoices/advance invoices */}
-          {isInvoiceOrAdvance && invoiceDoc.total_paid > 0 && (
-            <>
-              <Separator />
-              <div className="flex justify-between text-green-600">
-                <span>{t("Paid")}</span>
-                <span>-{fmt(invoiceDoc.total_paid)}</span>
-              </div>
-              <div className="flex justify-between font-semibold">
-                <span>{t("Due")}</span>
-                <span>{fmt(invoiceDoc.total_due)}</span>
-              </div>
-            </>
-          )}
-        </div>
-      </CardContent>
+      <CardContent className="space-y-4">{bodyContent}</CardContent>
     </Card>
   );
 }

package/src/components/documents/view/document-payments-list.tsx

@@ -51,6 +51,7 @@ interface DocumentPaymentsListProps extends ComponentTranslationProps {
   onDeleteSuccess?: () => void;
   /** Callback on delete error */
   onDeleteError?: (error: string) => void;
+  variant?: "card" | "inline";
 }
 
 /**
@@ -94,6 +95,7 @@ export function DocumentPaymentsList({
   onEditPayment,
   onDeleteSuccess,
   onDeleteError,
+  variant = "card",
   ...i18nProps
 }: DocumentPaymentsListProps) {
   const t = createTranslation({ translations, locale, ...i18nProps });
@@ -147,9 +149,9 @@ export function DocumentPaymentsList({
     try {
       await sdk.payments.delete(paymentToDelete.id, { entity_id: entityId });
 
-      // Invalidate queries to refresh data
-      queryClient.invalidateQueries({ queryKey: ["payments"] });
-      queryClient.invalidateQueries({ queryKey: ["documents"] });
+      // Invalidate this document's payments and document view
+      queryClient.invalidateQueries({ queryKey: ["payments", documentType, documentId] });
+      queryClient.invalidateQueries({ queryKey: ["documents", documentType, documentId] });
 
       onDeleteSuccess?.();
     } catch (error) {
@@ -180,6 +182,101 @@ export function DocumentPaymentsList({
   const fmt = (amount: number) => formatCurrency(amount, currencyCode, locale);
   const fmtDate = (date: Date | string | null) => formatDate(date, locale);
 
+  const headerContent = (
+    <div
+      className={
+        variant === "inline" ? "flex items-center justify-between" : "flex flex-row items-center justify-between"
+      }
+    >
+      <h3
+        className={variant === "inline" ? "font-medium text-sm" : "font-semibold text-lg leading-none tracking-tight"}
+      >
+        {t("Payments")} {payments.length > 0 && `(${payments.length})`}
+      </h3>
+      <Button variant="outline" size="sm" onClick={onAddPayment} className="cursor-pointer">
+        <Plus className="mr-1 h-4 w-4" />
+        {t("Add payment")}
+      </Button>
+    </div>
+  );
+
+  const bodyContent = isLoading ? (
+    <div className="space-y-2">
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+  ) : payments.length === 0 ? (
+    <p className="py-4 text-center text-muted-foreground text-sm">{t("No payments")}</p>
+  ) : (
+    <div className="space-y-2">
+      {payments.map((payment) => (
+        <div key={payment.id} className="flex items-center justify-between rounded-md border p-3">
+          <div className="flex items-center gap-4">
+            <span className="text-muted-foreground text-sm">{fmtDate(payment.date)}</span>
+            <span className="font-medium">{fmt(payment.amount)}</span>
+            <span className="text-muted-foreground text-sm">{getTypeLabel(payment.type)}</span>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-8 w-8 cursor-pointer p-0">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => onEditPayment?.(payment)} className="cursor-pointer">
+                <Pencil className="mr-2 h-4 w-4" />
+                {t("Edit")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => setPaymentToDelete(payment)}
+                className="cursor-pointer text-destructive focus:text-destructive"
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                {t("Delete")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      ))}
+    </div>
+  );
+
+  const deleteDialog = (
+    <Dialog open={!!paymentToDelete} onOpenChange={() => setPaymentToDelete(null)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("Delete payment")}</DialogTitle>
+          <DialogDescription>{t("Delete payment confirmation")}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            disabled={isDeleting}
+            onClick={() => setPaymentToDelete(null)}
+            className="cursor-pointer"
+          >
+            {t("Cancel")}
+          </Button>
+          <Button variant="destructive" onClick={handleDelete} disabled={isDeleting} className="cursor-pointer">
+            {t("Delete")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+
+  if (variant === "inline") {
+    return (
+      <>
+        <div>
+          {headerContent}
+          <div className="mt-3">{bodyContent}</div>
+        </div>
+        {deleteDialog}
+      </>
+    );
+  }
+
   return (
     <>
       <Card>
@@ -192,72 +289,9 @@ export function DocumentPaymentsList({
             {t("Add payment")}
           </Button>
         </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <div className="space-y-2">
-              <Skeleton className="h-10 w-full" />
-              <Skeleton className="h-10 w-full" />
-            </div>
-          ) : payments.length === 0 ? (
-            <p className="py-4 text-center text-muted-foreground text-sm">{t("No payments")}</p>
-          ) : (
-            <div className="space-y-2">
-              {payments.map((payment) => (
-                <div key={payment.id} className="flex items-center justify-between rounded-md border p-3">
-                  <div className="flex items-center gap-4">
-                    <span className="text-muted-foreground text-sm">{fmtDate(payment.date)}</span>
-                    <span className="font-medium">{fmt(payment.amount)}</span>
-                    <span className="text-muted-foreground text-sm">{getTypeLabel(payment.type)}</span>
-                  </div>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" size="sm" className="h-8 w-8 cursor-pointer p-0">
-                        <MoreHorizontal className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuItem onClick={() => onEditPayment?.(payment)} className="cursor-pointer">
-                        <Pencil className="mr-2 h-4 w-4" />
-                        {t("Edit")}
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        onClick={() => setPaymentToDelete(payment)}
-                        className="cursor-pointer text-destructive focus:text-destructive"
-                      >
-                        <Trash2 className="mr-2 h-4 w-4" />
-                        {t("Delete")}
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
+        <CardContent>{bodyContent}</CardContent>
       </Card>
-
-      {/* Delete Confirmation Dialog */}
-      <Dialog open={!!paymentToDelete} onOpenChange={() => setPaymentToDelete(null)}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t("Delete payment")}</DialogTitle>
-            <DialogDescription>{t("Delete payment confirmation")}</DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              disabled={isDeleting}
-              onClick={() => setPaymentToDelete(null)}
-              className="cursor-pointer"
-            >
-              {t("Cancel")}
-            </Button>
-            <Button variant="destructive" onClick={handleDelete} disabled={isDeleting} className="cursor-pointer">
-              {t("Delete")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      {deleteDialog}
     </>
   );
 }

package/src/components/documents/view/document-relations-list.tsx

@@ -0,0 +1,120 @@
+import type { DocumentRelation } from "@spaceinvoices/js-sdk";
+import { Link2 } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import de from "./locales/de";
+import es from "./locales/es";
+import fr from "./locales/fr";
+import hr from "./locales/hr";
+import it from "./locales/it";
+import nl from "./locales/nl";
+import pl from "./locales/pl";
+import pt from "./locales/pt";
+import sl from "./locales/sl";
+
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
+
+interface DocumentRelationsListProps extends ComponentTranslationProps {
+  documentId: string;
+  documentRelations?: DocumentRelation[];
+  locale?: string;
+  onNavigate?: (documentId: string) => void;
+  variant?: "card" | "inline";
+}
+
+function getDocumentTypeLabel(type: string, t: (key: string) => string): string {
+  const labels: Record<string, string> = {
+    invoice: t("Invoice"),
+    estimate: t("Estimate"),
+    credit_note: t("Credit note"),
+    advance_invoice: t("Advance invoice"),
+    delivery_note: t("Delivery note"),
+  };
+  return labels[type] || type;
+}
+
+function getRelationLabel(relationType: string, t: (key: string) => string): string {
+  const labels: Record<string, string> = {
+    credit_for: t("Credit for"),
+    converted_from: t("Converted from"),
+    converted_to: t("Converted to"),
+    has_credit: t("Has credit"),
+    advance_applied: t("Advance applied"),
+    applied_to: t("Applied to"),
+    delivered_for: t("Delivered for"),
+    has_delivery: t("Has delivery"),
+    fulfills: t("Fulfills"),
+    fulfilled_by: t("Fulfilled by"),
+    references: t("References"),
+  };
+  return labels[relationType] || relationType;
+}
+
+export function DocumentRelationsList({
+  documentId,
+  documentRelations,
+  locale = "en",
+  onNavigate,
+  variant = "card",
+  ...i18nProps
+}: DocumentRelationsListProps) {
+  const t = createTranslation({ translations, locale, ...i18nProps });
+
+  const relations = documentRelations || [];
+
+  if (relations.length === 0) {
+    return null;
+  }
+
+  const bodyContent = (
+    <div className="space-y-2">
+      {relations.map((relation) => {
+        const isSource = relation.source_id === documentId;
+        const otherType = isSource ? relation.target_type : relation.source_type;
+        const otherId = isSource ? relation.target_id : relation.source_id;
+
+        return (
+          <div key={relation.id} className="flex items-center justify-between rounded-md border p-3">
+            <div className="flex flex-col gap-0.5">
+              <span className="font-medium text-sm">{getDocumentTypeLabel(otherType, t)}</span>
+              <span className="text-muted-foreground text-xs">{getRelationLabel(relation.relation_type, t)}</span>
+            </div>
+            {onNavigate ? (
+              <button
+                type="button"
+                onClick={() => onNavigate(otherId)}
+                className="flex items-center gap-1 text-primary text-sm hover:underline"
+              >
+                <Link2 className="h-3.5 w-3.5" />
+                {t("View")}
+              </button>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  if (variant === "inline") {
+    return (
+      <div>
+        <h3 className="mb-3 font-medium text-sm">
+          {t("Linked documents")} ({relations.length})
+        </h3>
+        {bodyContent}
+      </div>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">
+          {t("Linked documents")} ({relations.length})
+        </CardTitle>
+      </CardHeader>
+      <CardContent>{bodyContent}</CardContent>
+    </Card>
+  );
+}