@spaceinvoices/react-ui 0.3.0 → 0.4.0

package/cli/dist/index.js

@@ -870,7 +870,7 @@ async function list(options = {}) {
 
 // cli/src/index.ts
 var program = new Command();
-program.name("spaceinvoices-ui").description("CLI for adding Space Invoices React UI components to your project").version("0.3.0");
+program.name("spaceinvoices-ui").description("CLI for adding Space Invoices React UI components to your project").version("0.4.0");
 program.option("--local <path>", "Use local registry from specified path (for development)");
 program.command("init").description("Initialize Space Invoices UI in your project").option("-y, --yes", "Skip prompts and use defaults").option("-f, --force", "Overwrite existing configuration").option("--cwd <path>", "Working directory (defaults to current directory)").action(async (options) => {
   const globalOpts = program.opts();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spaceinvoices/react-ui",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": false,
   "license": "MIT",
   "description": "Space Invoices UI components - copy-paste distribution with CLI support",

package/registry.json

@@ -518,248 +518,47 @@
       "providers": ["sdk-provider"],
       "utils": ["translation"]
     },
-    "dashboard/collection-rate-card": {
-      "name": "Collection Rate Card",
+    "invoices/fiscalization-status-card": {
+      "name": "Fiscalization Status Card",
       "category": "feature",
       "files": [
-        "components/dashboard/collection-rate-card/collection-rate-card.tsx",
-        "components/dashboard/collection-rate-card/use-collection-rate.ts",
-        "components/dashboard/collection-rate-card/locales/sl.ts",
-        "components/dashboard/collection-rate-card/index.ts"
+        "components/invoices/view/fiscalization-status-card.tsx"
       ],
-      "dependencies": ["ui/card", "dashboard/loading-card"],
+      "dependencies": ["ui/card", "ui/badge", "ui/button"],
       "providers": ["sdk-provider"],
       "utils": ["translation"]
     },
-    "dashboard/tax-collected-card": {
-      "name": "Tax Collected Card",
-      "category": "feature",
-      "files": [
-        "components/dashboard/tax-collected-card/tax-collected-card.tsx",
-        "components/dashboard/tax-collected-card/use-tax-collected.ts",
-        "components/dashboard/tax-collected-card/index.ts"
-      ],
-      "dependencies": ["ui/card", "dashboard/loading-card"],
-      "providers": ["sdk-provider"]
-    },
-    "advance-invoices/create-advance-invoice-form": {
-      "name": "Create Advance Invoice Form",
-      "category": "feature",
-      "files": [
-        "components/advance-invoices/create/create-advance-invoice-form.tsx",
-        "components/advance-invoices/create/prepare-advance-invoice-submission.ts",
-        "components/advance-invoices/create/locales/de.ts",
-        "components/advance-invoices/create/locales/sl.ts",
-        "components/advance-invoices/advance-invoices.hooks.ts"
-      ],
-      "dependencies": [
-        "form/form-input",
-        "ui/form",
-        "ui/card",
-        "ui/button",
-        "ui/calendar",
-        "ui/popover",
-        "customers/customer-combobox"
-      ],
-      "providers": ["sdk-provider", "entities-provider"],
-      "utils": ["translation", "hooks"],
-      "schemas": ["createAdvanceInvoiceSchema"]
-    },
-    "advance-invoices/advance-invoice-list-table": {
-      "name": "Advance Invoice List Table",
-      "category": "feature",
-      "files": [
-        "components/advance-invoices/list/list-table.tsx",
-        "components/advance-invoices/list/list-row-actions.tsx",
-        "components/advance-invoices/list/use-advance-invoice-download.ts",
-        "components/advance-invoices/list/index.ts",
-        "components/advance-invoices/advance-invoices.hooks.ts"
-      ],
-      "dependencies": ["table/data-table", "ui/dropdown-menu", "ui/button", "ui/badge"],
-      "providers": ["sdk-provider"],
-      "utils": ["translation", "hooks"]
-    },
-    "activities/activity-timeline": {
-      "name": "Activity Timeline",
+    "documents/document-activities-list": {
+      "name": "Document Activities List",
       "category": "feature",
       "files": [
-        "components/activities/activity-timeline.tsx",
-        "components/activities/locales/de.ts",
-        "components/activities/locales/sl.ts",
-        "components/activities/index.ts"
+        "components/documents/view/document-activities-list.tsx",
+        "components/documents/view/locales/de.ts",
+        "components/documents/view/locales/es.ts",
+        "components/documents/view/locales/fr.ts",
+        "components/documents/view/locales/hr.ts",
+        "components/documents/view/locales/it.ts",
+        "components/documents/view/locales/nl.ts",
+        "components/documents/view/locales/pl.ts",
+        "components/documents/view/locales/pt.ts",
+        "components/documents/view/locales/sl.ts"
       ],
-      "dependencies": ["ui/badge"],
+      "dependencies": ["ui/card", "ui/badge", "ui/button"],
       "providers": ["sdk-provider"],
       "utils": ["translation"]
     },
-    "export/document-export-form": {
-      "name": "Document Export Form",
-      "category": "feature",
-      "files": [
-        "components/export/document-export-form.tsx",
-        "components/export/index.ts"
-      ],
-      "dependencies": ["ui/form", "ui/button", "ui/select", "ui/calendar", "ui/popover"],
-      "providers": ["sdk-provider", "entities-provider"],
-      "utils": ["translation"]
-    },
-    "tax-reports/kir-export-form": {
-      "name": "KIR Export Form",
-      "category": "feature",
-      "files": [
-        "components/tax-reports/kir-export-form.tsx",
-        "components/tax-reports/index.ts"
-      ],
-      "dependencies": ["ui/form", "ui/button", "ui/select", "ui/calendar", "ui/popover"],
-      "providers": ["sdk-provider", "entities-provider"],
-      "utils": ["translation"]
-    },
-    "company-registry/company-registry-autocomplete": {
-      "name": "Company Registry Autocomplete",
+    "dashboard/collection-rate-card": {
+      "name": "Collection Rate Card",
       "category": "feature",
       "files": [
-        "components/company-registry/company-registry-autocomplete.tsx",
-        "components/company-registry/company-registry.hooks.ts",
-        "components/company-registry/index.ts"
+        "components/dashboard/collection-rate-card/collection-rate-card.tsx",
+        "components/dashboard/collection-rate-card/use-collection-rate.ts",
+        "components/dashboard/collection-rate-card/locales/sl.ts",
+        "components/dashboard/collection-rate-card/index.ts"
       ],
-      "dependencies": ["ui/command", "ui/popover", "ui/button"],
+      "dependencies": ["ui/card", "dashboard/loading-card"],
       "providers": ["sdk-provider"],
       "utils": ["translation"]
-    },
-    "request-logs/request-logs-page": {
-      "name": "Request Logs Page",
-      "category": "feature",
-      "files": [
-        "components/request-logs/request-logs-page.tsx",
-        "components/request-logs/request-log-list-table.tsx",
-        "components/request-logs/request-log-detail.tsx",
-        "components/request-logs/index.ts"
-      ],
-      "dependencies": ["table/data-table", "ui/card", "ui/badge"],
-      "providers": ["sdk-provider"]
-    },
-    "customers/edit-customer-form": {
-      "name": "Edit Customer Form",
-      "category": "feature",
-      "files": [
-        "components/customers/edit-customer-form/edit-customer-form.tsx",
-        "components/customers/edit-customer-form/locales/de.ts",
-        "components/customers/edit-customer-form/locales/sl.ts",
-        "components/customers/customers.hooks.ts"
-      ],
-      "dependencies": ["form/form-input", "ui/form"],
-      "providers": ["sdk-provider"],
-      "utils": ["translation", "hooks"]
-    },
-    "items/edit-item-form": {
-      "name": "Edit Item Form",
-      "category": "feature",
-      "files": [
-        "components/items/edit-item-form/edit-item-form.tsx",
-        "components/items/edit-item-form/locales/de.ts",
-        "components/items/edit-item-form/locales/sl.ts",
-        "components/items/items.hooks.ts"
-      ],
-      "dependencies": ["form/form-input", "ui/form"],
-      "providers": ["sdk-provider"],
-      "utils": ["translation", "hooks"]
-    },
-    "taxes/edit-tax-form": {
-      "name": "Edit Tax Form",
-      "category": "feature",
-      "files": [
-        "components/taxes/edit-tax-form/edit-tax-form.tsx",
-        "components/taxes/edit-tax-form/locales/de.ts",
-        "components/taxes/edit-tax-form/locales/sl.ts",
-        "components/taxes/taxes.hooks.ts"
-      ],
-      "dependencies": ["form/form-input", "ui/form"],
-      "providers": ["sdk-provider"],
-      "utils": ["translation", "hooks"]
-    },
-    "payments/edit-payment-form": {
-      "name": "Edit Payment Form",
-      "category": "feature",
-      "files": [
-        "components/payments/edit-payment-form/edit-payment-form.tsx",
-        "components/payments/edit-payment-form/locales/de.ts",
-        "components/payments/edit-payment-form/locales/sl.ts",
-        "components/payments/edit-payment-form/index.ts",
-        "components/payments/payments.hooks.ts"
-      ],
-      "dependencies": ["form/form-input", "ui/form", "ui/select"],
-      "providers": ["sdk-provider"],
-      "utils": ["translation", "hooks"]
-    },
-    "payments/payment-list-table": {
-      "name": "Payment List Table",
-      "category": "feature",
-      "files": [
-        "components/payments/list/list-table.tsx",
-        "components/payments/list/list-row-actions.tsx",
-        "components/payments/list/index.ts",
-        "components/payments/payments.hooks.ts"
-      ],
-      "dependencies": ["table/data-table", "ui/dropdown-menu", "ui/button"],
-      "providers": ["sdk-provider"],
-      "utils": ["translation", "hooks"]
-    },
-    "entities/furs-settings-form": {
-      "name": "FURS Settings Form",
-      "category": "feature",
-      "files": [
-        "components/entities/furs-settings-form/furs-settings-form.tsx",
-        "components/entities/furs-settings-form/furs-settings.hooks.ts",
-        "components/entities/furs-settings-form/sections/general-settings-section.tsx",
-        "components/entities/furs-settings-form/sections/certificate-settings-section.tsx",
-        "components/entities/furs-settings-form/sections/enable-fiscalization-section.tsx",
-        "components/entities/furs-settings-form/sections/premises-management-section.tsx",
-        "components/entities/furs-settings-form/sections/register-premise-dialog.tsx",
-        "components/entities/furs-settings-form/locales/de.ts",
-        "components/entities/furs-settings-form/locales/sl.ts",
-        "components/entities/furs-settings-form/index.ts"
-      ],
-      "dependencies": ["ui/form", "ui/button", "ui/card", "ui/switch", "ui/alert", "form/form-input"],
-      "providers": ["sdk-provider", "entities-provider"],
-      "utils": ["translation", "hooks"]
-    },
-    "entities/fina-settings-form": {
-      "name": "FINA Settings Form",
-      "category": "feature",
-      "files": [
-        "components/entities/fina-settings-form/fina-settings-form.tsx",
-        "components/entities/fina-settings-form/fina-settings.hooks.ts",
-        "components/entities/fina-settings-form/sections/certificate-settings-section.tsx",
-        "components/entities/fina-settings-form/sections/premises-management-section.tsx",
-        "components/entities/fina-settings-form/sections/register-premise-dialog.tsx",
-        "components/entities/fina-settings-form/locales/de.ts",
-        "components/entities/fina-settings-form/locales/sl.ts",
-        "components/entities/fina-settings-form/index.ts"
-      ],
-      "dependencies": ["ui/form", "ui/button", "ui/card", "ui/switch", "ui/alert", "form/form-input"],
-      "providers": ["sdk-provider", "entities-provider"],
-      "utils": ["translation", "hooks"]
-    },
-    "entities/entity-settings": {
-      "name": "Entity Settings",
-      "category": "feature",
-      "files": [
-        "components/entities/settings/company-settings-form.tsx",
-        "components/entities/settings/email-settings-form.tsx",
-        "components/entities/settings/branding-settings-form.tsx",
-        "components/entities/settings/defaults-settings-form.tsx",
-        "components/entities/settings/number-format-settings-form.tsx",
-        "components/entities/settings/tax-rules-settings-form.tsx",
-        "components/entities/settings/eslog-settings-form.tsx",
-        "components/entities/settings/settings-footer.tsx",
-        "components/entities/settings/index.ts",
-        "components/entities/settings/pdf-template-selector/pdf-template-cards.tsx",
-        "components/entities/settings/pdf-template-selector/demo-invoice-data.ts",
-        "components/entities/settings/pdf-template-selector/index.ts"
-      ],
-      "dependencies": ["ui/form", "ui/button", "ui/card", "ui/select", "ui/switch", "ui/tabs", "form/form-input"],
-      "providers": ["sdk-provider", "entities-provider"],
-      "utils": ["translation", "hooks"]
     }
   }
 }

package/src/components/advance-invoices/advance-invoices.hooks.ts

@@ -1,4 +1,4 @@
-import type { CreateAdvanceInvoice201, CreateAdvanceInvoiceBody } from "@spaceinvoices/js-sdk";
+import type { AdvanceInvoice, CreateAdvanceInvoiceBody } from "@spaceinvoices/js-sdk";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { NEXT_DOCUMENT_NUMBER_CACHE_KEY } from "@/ui/hooks/use-next-document-number";
 import { useSDK } from "@/ui/providers/sdk-provider";
@@ -12,7 +12,7 @@ export const ADVANCE_INVOICES_CACHE_KEY = "advance-invoices";
 
 type UseCreateAdvanceInvoiceOptions = {
   entityId: string;
-  onSuccess?: (data: CreateAdvanceInvoice201) => void;
+  onSuccess?: (data: AdvanceInvoice) => void;
   onError?: (error: unknown) => void;
 };
 

package/src/components/documents/documents.hooks.ts

@@ -1,6 +1,5 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { AUTH_COOKIES } from "@/ui/lib/auth";
-import { getCookie } from "@/ui/lib/browser-cookies";
+import { useSDK } from "@/ui/providers/sdk-provider";
 
 // Document type union for API calls
 export type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice";
@@ -13,44 +12,6 @@ const CACHE_KEYS: Record<DocumentType, string> = {
   advance_invoice: "advance-invoices",
 };
 
-/**
- * Get API base URL from environment
- */
-function getApiBaseUrl(): string {
-  if (typeof window === "undefined") return "";
-  return (import.meta.env?.VITE_API_URL || import.meta.env?.BUN_PUBLIC_API_URL || "") as string;
-}
-
-/**
- * Make authenticated API request
- */
-async function apiRequest<T>(path: string, options: RequestInit & { entityId: string }): Promise<T> {
-  const token = getCookie(AUTH_COOKIES.TOKEN);
-  const baseUrl = getApiBaseUrl();
-
-  const response = await fetch(`${baseUrl}${path}`, {
-    ...options,
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
-      "x-entity-id": options.entityId,
-      ...options.headers,
-    },
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(errorData.message || `Request failed with status ${response.status}`);
-  }
-
-  // DELETE returns 204 No Content
-  if (response.status === 204) {
-    return undefined as T;
-  }
-
-  return response.json();
-}
-
 // ============================================================================
 // Finalize Document Hook
 // ============================================================================
@@ -71,14 +32,12 @@ type FinalizeDocumentVariables = {
  * Assigns a document number and runs fiscalization (if applicable)
  */
 export function useFinalizeDocument(options: FinalizeDocumentOptions) {
+  const { sdk } = useSDK();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async ({ documentId, documentType }: FinalizeDocumentVariables) => {
-      return apiRequest(`/documents/${documentId}/finalize?type=${documentType}`, {
-        method: "POST",
-        entityId: options.entityId,
-      });
+      return sdk.documents.finalizeDocument(documentId, { type: documentType });
     },
     onSuccess: (data, variables) => {
       // Invalidate list cache
@@ -118,14 +77,12 @@ type DeleteDraftDocumentVariables = {
  * Only draft documents can be deleted
  */
 export function useDeleteDraftDocument(options: DeleteDraftDocumentOptions) {
+  const { sdk } = useSDK();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async ({ documentId, documentType }: DeleteDraftDocumentVariables) => {
-      return apiRequest(`/documents/${documentId}?type=${documentType}`, {
-        method: "DELETE",
-        entityId: options.entityId,
-      });
+      return sdk.documents.delete(documentId, { type: documentType });
     },
     onSuccess: (_, variables) => {
       // Invalidate list cache

package/src/components/documents/shared/document-preview-display.tsx

@@ -63,6 +63,7 @@ export function DocumentPreviewDisplay({
 
   const { containerRef, contentRef, scale, contentHeight, A4_WIDTH_PX } = useA4Scaling(previewHtml);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: document.updated_at intentionally triggers re-fetch when document changes server-side (e.g. after payment)
   useEffect(() => {
     const fetchPreview = async () => {
       // For public view, use per-type shareable HTML endpoint
@@ -113,7 +114,17 @@ export function DocumentPreviewDisplay({
     };
 
     fetchPreview();
-  }, [document?.id, activeEntity?.id, template, apiBaseUrl, locale, isPublicView, shareableId, sdk]);
+  }, [
+    document?.id,
+    document?.updated_at,
+    activeEntity?.id,
+    template,
+    apiBaseUrl,
+    locale,
+    isPublicView,
+    shareableId,
+    sdk,
+  ]);
 
   return (
     <div ref={containerRef} className={cn("relative h-full", className)}>

package/src/components/documents/view/document-actions-bar.tsx

@@ -42,13 +42,17 @@ const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
 
-const PDF_LOCALES = [
-  { code: "en-US", label: "English" },
-  { code: "de-DE", label: "Deutsch" },
-  { code: "es-ES", label: "Español" },
-  { code: "fr-FR", label: "Français" },
-  { code: "it-IT", label: "Italiano" },
-  { code: "sl-SI", label: "Slovenščina" },
+const PDF_LOCALE_CODES = [
+  { label: "English", code: "en-US" },
+  { label: "German", code: "de-DE" },
+  { label: "Slovenian", code: "sl-SI" },
+  { label: "Italian", code: "it-IT" },
+  { label: "French", code: "fr-FR" },
+  { label: "Spanish", code: "es-ES" },
+  { label: "Portuguese", code: "pt-PT" },
+  { label: "Dutch", code: "nl-NL" },
+  { label: "Polish", code: "pl-PL" },
+  { label: "Croatian", code: "hr-HR" },
 ] as const;
 
 interface DocumentActionsBarProps extends ComponentTranslationProps {
@@ -89,11 +93,15 @@ interface DocumentActionsBarProps extends ComponentTranslationProps {
 function getApiLocale(uiLanguage: string): string {
   const localeMap: Record<string, string> = {
     en: "en-US",
-    sl: "sl-SI",
     de: "de-DE",
-    es: "es-ES",
-    fr: "fr-FR",
+    sl: "sl-SI",
     it: "it-IT",
+    fr: "fr-FR",
+    es: "es-ES",
+    pt: "pt-PT",
+    nl: "nl-NL",
+    pl: "pl-PL",
+    hr: "hr-HR",
   };
   return localeMap[uiLanguage] || "en-US";
 }
@@ -185,13 +193,13 @@ export function DocumentActionsBar({
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            {PDF_LOCALES.map((locale) => (
+            {PDF_LOCALE_CODES.map((locale) => (
               <DropdownMenuItem
                 key={locale.code}
                 onClick={() => handleDownloadPdf(locale.code)}
                 className="cursor-pointer"
               >
-                {locale.label}
+                {t(locale.label)}
               </DropdownMenuItem>
             ))}
           </DropdownMenuContent>

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

@@ -0,0 +1,166 @@
+import type { GetActivities200DataItem } from "@spaceinvoices/js-sdk";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/ui/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import { Skeleton } from "@/ui/components/ui/skeleton";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useSDK } from "@/ui/providers/sdk-provider";
+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;
+
+const PAGE_SIZE = 5;
+
+interface DocumentActivitiesListProps extends ComponentTranslationProps {
+  documentId: string;
+  entityId: string;
+  currentUserId?: string;
+  locale?: string;
+}
+
+function formatActivityDate(date: string, locale: string): string {
+  const d = new Date(date);
+  return new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(d);
+}
+
+function getActionLabel(action: string, t: (key: string) => string): string {
+  const labels: Record<string, string> = {
+    created: t("Created"),
+    updated: t("Updated"),
+    voided: t("Voided"),
+    sent: t("Sent"),
+    deleted: t("Deleted"),
+  };
+  return labels[action] || action;
+}
+
+function getActorLabel(activity: GetActivities200DataItem, t: (key: string) => string, currentUserId?: string): string {
+  if (currentUserId && activity.actor_id === currentUserId) return t("me");
+  if (activity.actor_label) return activity.actor_label;
+  const typeLabels: Record<string, string> = {
+    system: t("System"),
+    api_key: "API",
+    cron: t("Scheduled"),
+    webhook: "Webhook",
+  };
+  return typeLabels[activity.actor_type] || activity.actor_type;
+}
+
+export function DocumentActivitiesList({
+  documentId,
+  entityId,
+  currentUserId,
+  locale = "en",
+  ...i18nProps
+}: DocumentActivitiesListProps) {
+  const t = createTranslation({ translations, locale, ...i18nProps });
+  const { sdk } = useSDK();
+
+  const [cursors, setCursors] = useState<string[]>([]);
+  const currentCursor = cursors.length > 0 ? cursors[cursors.length - 1] : undefined;
+
+  const { data: activitiesData, isLoading } = useQuery({
+    queryKey: ["activities", documentId, entityId, currentCursor],
+    queryFn: async () => {
+      if (!sdk) throw new Error("SDK not initialized");
+
+      return sdk.activities.list({
+        entity_id: entityId,
+        resource_id: documentId,
+        order_by: "-created_at",
+        limit: PAGE_SIZE,
+        next_cursor: currentCursor,
+      });
+    },
+    enabled: !!sdk && !!entityId && !!documentId,
+  });
+
+  const activities = activitiesData?.data || [];
+  const pagination = activitiesData?.pagination;
+
+  const handleNextPage = () => {
+    if (pagination?.next_cursor) {
+      setCursors((prev) => [...prev, pagination.next_cursor!]);
+    }
+  };
+
+  const handlePrevPage = () => {
+    setCursors((prev) => prev.slice(0, -1));
+  };
+
+  const hasPrev = cursors.length > 0;
+  const hasNext = !!pagination?.has_more;
+
+  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>
+        )}
+      </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>
+    </Card>
+  );
+}