@spaceinvoices/react-ui 0.4.3 → 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

@@ -25,6 +25,7 @@ interface DocumentDetailsCardProps extends ComponentTranslationProps {
   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 });
@@ -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

@@ -20,6 +20,7 @@ interface DocumentRelationsListProps extends ComponentTranslationProps {
   documentRelations?: DocumentRelation[];
   locale?: string;
   onNavigate?: (documentId: string) => void;
+  variant?: "card" | "inline";
 }
 
 function getDocumentTypeLabel(type: string, t: (key: string) => string): string {
@@ -55,6 +56,7 @@ export function DocumentRelationsList({
   documentRelations,
   locale = "en",
   onNavigate,
+  variant = "card",
   ...i18nProps
 }: DocumentRelationsListProps) {
   const t = createTranslation({ translations, locale, ...i18nProps });
@@ -65,6 +67,46 @@ export function DocumentRelationsList({
     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">
@@ -72,34 +114,7 @@ export function DocumentRelationsList({
           {t("Linked documents")} ({relations.length})
         </CardTitle>
       </CardHeader>
-      <CardContent>
-        <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>
-      </CardContent>
+      <CardContent>{bodyContent}</CardContent>
     </Card>
   );
 }