@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/resources/ProviderCard.tsx

@@ -0,0 +1,272 @@
+/**
+ * ProviderCard — Compact cost card for a single provider
+ *
+ * Variants:
+ * - Allowance-based (Cloudflare, GitHub): progress bar + overage
+ * - Pay-as-you-go (OpenAI, Anthropic, Gemini, Apify, Resend): total spend + key metric
+ * - Subscription + PAYG (Minimax): subscription cost + API usage
+ */
+
+// =============================================================================
+// TYPES (match /api/costs/overview response)
+// =============================================================================
+
+export interface ModelUsage {
+  model: string;
+  inputTokens: number;
+  outputTokens: number;
+}
+
+export interface ProviderCostSummary {
+  provider: string;
+  displayName: string;
+  type: 'allowance' | 'pay-as-you-go' | 'subscription-payg' | 'balance';
+  totalCostUsd: number;
+  subscriptionCostUsd?: number;
+  allowanceUsagePct?: number;
+  keyMetric?: { label: string; value: string };
+  status: 'ok' | 'warning' | 'critical' | 'incomplete';
+  lastUpdated: string;
+  resources?: ProviderResource[];
+  modelBreakdown?: ModelUsage[];
+}
+
+export interface ProviderResource {
+  name: string;
+  label: string;
+  used: number;
+  allowance?: number;
+  pctUsed?: number;
+  overageCost?: number;
+  costUsd: number;
+  unit: string;
+  category?: string;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const PROVIDER_ICONS: Record<string, string> = {
+  cloudflare: '☁️',
+  github: '🐙',
+  openai: '🤖',
+  anthropic: '🧠',
+  apify: '🕷️',
+  resend: '✉️',
+  minimax: '🎯',
+  gemini: '💎',
+};
+
+const PROVIDER_GRADIENTS: Record<string, string> = {
+  cloudflare: 'from-orange-500 to-amber-600',
+  github: 'from-gray-700 to-gray-900',
+  openai: 'from-green-500 to-emerald-600',
+  anthropic: 'from-orange-500 to-amber-600',
+  apify: 'from-teal-500 to-green-600',
+  resend: 'from-violet-500 to-purple-600',
+  minimax: 'from-indigo-500 to-blue-600',
+  gemini: 'from-blue-400 to-indigo-500',
+};
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function formatCompact(n: number): string {
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`;
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toFixed(0);
+}
+
+function barColour(pct: number): string {
+  if (pct >= 100) return 'bg-red-500';
+  if (pct >= 75) return 'bg-amber-500';
+  if (pct >= 50) return 'bg-yellow-400';
+  return 'bg-emerald-500';
+}
+
+function statusBadge(status: string): { label: string; cls: string } | null {
+  if (status === 'critical') return { label: 'OVERAGE', cls: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300' };
+  if (status === 'warning') return { label: 'HIGH', cls: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300' };
+  if (status === 'incomplete') return { label: 'PARTIAL', cls: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400' };
+  return null;
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+interface Props {
+  provider: ProviderCostSummary;
+  selected: boolean;
+  onClick: () => void;
+}
+
+export function ProviderCard({ provider, selected, onClick }: Props) {
+  const icon = PROVIDER_ICONS[provider.provider] ?? '📦';
+  const gradient = PROVIDER_GRADIENTS[provider.provider] ?? 'from-gray-500 to-gray-600';
+  const badge = statusBadge(provider.status);
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`
+        w-full text-left bg-white dark:bg-gray-800 rounded-lg border overflow-hidden
+        transition-all duration-150 cursor-pointer
+        ${selected
+          ? 'border-blue-500 ring-2 ring-blue-500/30 shadow-md'
+          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-sm'
+        }
+      `}
+    >
+      {/* Gradient header */}
+      <div className={`bg-gradient-to-r ${gradient} px-3 py-2.5 text-white`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-1.5 min-w-0">
+            <span className="text-lg flex-shrink-0">{icon}</span>
+            <span className="text-sm font-semibold truncate">{provider.displayName}</span>
+            {badge && (
+              <span className={`ml-1 inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold ${badge.cls}`}>
+                {badge.label}
+              </span>
+            )}
+          </div>
+          <div className="text-right flex-shrink-0 ml-2">
+            {provider.type === 'allowance' && provider.subscriptionCostUsd != null && provider.subscriptionCostUsd > 0 ? (
+              <div>
+                <span className="text-base font-bold">${provider.subscriptionCostUsd.toFixed(2)}</span>
+                <span className="text-[9px] opacity-75 block">
+                  {provider.totalCostUsd > 0 ? `+$${provider.totalCostUsd.toFixed(2)} overage` : '/mo'}
+                </span>
+              </div>
+            ) : (
+              <span className="text-base font-bold">${provider.totalCostUsd.toFixed(2)}</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Card body */}
+      <div className="px-3 py-2.5 space-y-2">
+        {provider.type === 'allowance' && <AllowanceBody provider={provider} />}
+        {provider.type === 'pay-as-you-go' && <PayAsYouGoBody provider={provider} />}
+        {provider.type === 'subscription-payg' && <SubscriptionBody provider={provider} />}
+        {provider.type === 'balance' && <BalanceBody provider={provider} />}
+
+        {/* Footer */}
+        <div className="text-[9px] text-gray-400 dark:text-gray-500 pt-1">
+          Updated {provider.lastUpdated}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// =============================================================================
+// BODY VARIANTS
+// =============================================================================
+
+function AllowanceBody({ provider }: { provider: ProviderCostSummary }) {
+  const pct = provider.allowanceUsagePct ?? 0;
+  const clampedPct = Math.min(pct, 100);
+
+  return (
+    <>
+      {/* Subscription line */}
+      {provider.subscriptionCostUsd != null && provider.subscriptionCostUsd > 0 && (
+        <div className="flex justify-between text-[10px]">
+          <span className="text-gray-500 dark:text-gray-400">
+            {provider.provider === 'cloudflare' ? 'Workers Paid plan' : 'License'}
+          </span>
+          <span className="text-gray-600 dark:text-gray-300 font-medium">
+            ${provider.subscriptionCostUsd.toFixed(2)}/mo
+          </span>
+        </div>
+      )}
+
+      {/* Progress bar */}
+      <div>
+        <div className="flex justify-between text-[10px] mb-0.5">
+          <span className="text-gray-500 dark:text-gray-400">Allowance usage</span>
+          <span className="text-gray-700 dark:text-gray-300 font-medium">
+            {pct >= 1000 ? '999+%' : `${Math.round(pct)}%`}
+          </span>
+        </div>
+        <div className="w-full h-1.5 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
+          <div
+            className={`h-full rounded-full transition-all ${barColour(pct)}`}
+            style={{ width: `${clampedPct}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Key metric */}
+      {provider.keyMetric && (
+        <div className="flex justify-between text-[10px]">
+          <span className="text-gray-500 dark:text-gray-400">{provider.keyMetric.label}</span>
+          <span className="text-gray-700 dark:text-gray-300 font-medium">{provider.keyMetric.value}</span>
+        </div>
+      )}
+    </>
+  );
+}
+
+function PayAsYouGoBody({ provider }: { provider: ProviderCostSummary }) {
+  return (
+    <>
+      {provider.keyMetric && (
+        <div className="flex justify-between text-[10px]">
+          <span className="text-gray-500 dark:text-gray-400">{provider.keyMetric.label}</span>
+          <span className="text-gray-700 dark:text-gray-300 font-medium">{provider.keyMetric.value}</span>
+        </div>
+      )}
+      {/* Show top resources compactly */}
+      {provider.resources && provider.resources.length > 0 && (
+        <div className="space-y-0.5">
+          {provider.resources.slice(0, 3).map(r => (
+            <div key={r.name} className="flex justify-between text-[9px] text-gray-400 dark:text-gray-500">
+              <span className="truncate mr-1">{r.label}</span>
+              <span className="flex-shrink-0">{formatCompact(r.used)} {r.unit === 'dollars' ? '' : r.unit}</span>
+            </div>
+          ))}
+          {provider.resources.length > 3 && (
+            <span className="text-[9px] text-gray-400">+{provider.resources.length - 3} more</span>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+
+function SubscriptionBody({ provider }: { provider: ProviderCostSummary }) {
+  return (
+    <>
+      {provider.keyMetric && (
+        <div className="flex justify-between text-[10px]">
+          <span className="text-gray-500 dark:text-gray-400">{provider.keyMetric.label}</span>
+          <span className="text-gray-700 dark:text-gray-300 font-medium">{provider.keyMetric.value}</span>
+        </div>
+      )}
+      <div className="flex justify-between text-[10px]">
+        <span className="text-gray-500 dark:text-gray-400">Type</span>
+        <span className="text-indigo-600 dark:text-indigo-400 font-medium text-[9px]">Subscription + API</span>
+      </div>
+    </>
+  );
+}
+
+function BalanceBody({ provider }: { provider: ProviderCostSummary }) {
+  return (
+    <>
+      {provider.keyMetric && (
+        <div className="flex justify-between text-[10px]">
+          <span className="text-gray-500 dark:text-gray-400">{provider.keyMetric.label}</span>
+          <span className="text-gray-700 dark:text-gray-300 font-medium">{provider.keyMetric.value}</span>
+        </div>
+      )}
+    </>
+  );
+}

package/templates/shared/dashboard/src/components/resources/ProviderDetail.tsx

@@ -0,0 +1,293 @@
+/**
+ * ProviderDetail — Expandable detail panel for a selected provider
+ *
+ * Shows per-service/resource breakdown with:
+ * - Cloudflare: allowance bars per service (D1, KV, R2, DO, etc.)
+ * - GitHub: subscription vs usage overage breakdown
+ * - Others: resource-level detail with usage values and costs
+ */
+import type { ProviderCostSummary, ProviderResource, ModelUsage } from './ProviderCard';
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function formatCompact(n: number): string {
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`;
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toFixed(0);
+}
+
+function barColour(pct: number): string {
+  if (pct >= 100) return 'bg-red-500';
+  if (pct >= 75) return 'bg-amber-500';
+  if (pct >= 50) return 'bg-yellow-400';
+  return 'bg-emerald-500';
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+interface Props {
+  provider: ProviderCostSummary;
+}
+
+export function ProviderDetail({ provider }: Props) {
+  if (!provider.resources || provider.resources.length === 0) {
+    return (
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          No detailed resource data available for {provider.displayName}.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 animate-in slide-in-from-top-2">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          {provider.displayName} — Service Breakdown
+        </h3>
+        <div className="flex items-center gap-3 text-xs font-medium text-gray-500 dark:text-gray-400">
+          {provider.subscriptionCostUsd != null && provider.subscriptionCostUsd > 0 && (
+            <span>License: ${provider.subscriptionCostUsd.toFixed(2)}/mo</span>
+          )}
+          {provider.totalCostUsd > 0 && (
+            <span className="text-red-600 dark:text-red-400">Overage: ${provider.totalCostUsd.toFixed(2)}</span>
+          )}
+          {provider.totalCostUsd === 0 && !provider.subscriptionCostUsd && (
+            <span>$0.00</span>
+          )}
+        </div>
+      </div>
+
+      {provider.type === 'allowance' && provider.provider === 'cloudflare' && (
+        <CloudflareDetail resources={provider.resources} />
+      )}
+      {provider.provider === 'github' && (
+        <GitHubDetail resources={provider.resources} subscriptionCost={provider.subscriptionCostUsd} />
+      )}
+      {provider.type === 'pay-as-you-go' && provider.provider !== 'github' && (
+        <GenericDetail resources={provider.resources} modelBreakdown={provider.modelBreakdown} />
+      )}
+      {provider.type === 'subscription-payg' && (
+        <GenericDetail resources={provider.resources} modelBreakdown={provider.modelBreakdown} />
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// CLOUDFLARE DETAIL — Allowance bars per service
+// =============================================================================
+
+function CloudflareDetail({ resources }: { resources: ProviderResource[] }) {
+  return (
+    <div className="space-y-3">
+      {resources.map(r => {
+        const hasAllowance = r.allowance != null && r.allowance > 0;
+        const pct = r.pctUsed ?? 0;
+        const clampedPct = Math.min(pct, 100);
+
+        return (
+          <div key={r.name}>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs font-medium text-gray-700 dark:text-gray-300">{r.label}</span>
+              <div className="flex items-center gap-2">
+                {hasAllowance && (
+                  <span className="text-[10px] text-gray-500 dark:text-gray-400">
+                    {formatCompact(r.used)} / {formatCompact(r.allowance!)}
+                  </span>
+                )}
+                {r.overageCost != null && r.overageCost > 0 ? (
+                  <span className="text-[10px] font-medium text-red-600 dark:text-red-400">
+                    +${r.overageCost.toFixed(2)}
+                  </span>
+                ) : (
+                  <span className="text-[10px] text-emerald-500">$0.00</span>
+                )}
+              </div>
+            </div>
+            {hasAllowance && (
+              <div className="w-full h-1.5 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div
+                  className={`h-full rounded-full transition-all ${barColour(pct)}`}
+                  style={{ width: `${clampedPct}%` }}
+                />
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// =============================================================================
+// GITHUB DETAIL — Subscription vs usage
+// =============================================================================
+
+function GitHubDetail({ resources, subscriptionCost }: { resources: ProviderResource[]; subscriptionCost?: number }) {
+  const subs = resources.filter(r => r.category === 'subscription');
+  const usage = resources.filter(r => r.category === 'usage');
+
+  return (
+    <div className="space-y-4">
+      {/* Usage vs allowance section (like Cloudflare) */}
+      {usage.length > 0 && (
+        <div>
+          <p className="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1.5">
+            Usage vs Enterprise Allowances
+          </p>
+          <div className="space-y-3">
+            {usage.map(r => {
+              const hasAllowance = r.allowance != null && r.allowance > 0;
+              const pct = r.pctUsed ?? 0;
+              const clampedPct = Math.min(pct, 100);
+
+              return (
+                <div key={r.name}>
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">{r.label}</span>
+                    <div className="flex items-center gap-2">
+                      {hasAllowance && (
+                        <span className="text-[10px] text-gray-500 dark:text-gray-400">
+                          {formatCompact(r.used)} / {formatCompact(r.allowance!)} {r.unit}
+                        </span>
+                      )}
+                      {r.overageCost != null && r.overageCost > 0 ? (
+                        <span className="text-[10px] font-medium text-red-600 dark:text-red-400">
+                          +${r.overageCost.toFixed(2)}
+                        </span>
+                      ) : (
+                        <span className="text-[10px] text-emerald-500">Within allowance</span>
+                      )}
+                    </div>
+                  </div>
+                  {hasAllowance && (
+                    <div className="w-full h-1.5 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
+                      <div
+                        className={`h-full rounded-full transition-all ${barColour(pct)}`}
+                        style={{ width: `${clampedPct}%` }}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Subscription section */}
+      {subs.length > 0 && (
+        <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
+          <div className="flex justify-between items-center mb-1.5">
+            <p className="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+              Subscriptions (fixed monthly)
+            </p>
+            {subscriptionCost != null && subscriptionCost > 0 && (
+              <span className="text-[10px] text-gray-500 dark:text-gray-400 font-medium">
+                ${subscriptionCost.toFixed(2)}/mo
+              </span>
+            )}
+          </div>
+          <div className="space-y-1.5">
+            {subs.map(r => (
+              <ResourceRow key={r.name} resource={r} showLicenseBadge />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// GENERIC DETAIL — Simple resource list
+// =============================================================================
+
+function GenericDetail({ resources, modelBreakdown }: { resources: ProviderResource[]; modelBreakdown?: ModelUsage[] }) {
+  return (
+    <div className="space-y-1.5">
+      {resources.map(r => (
+        <ResourceRow key={r.name} resource={r} />
+      ))}
+      {modelBreakdown && modelBreakdown.length > 0 && (
+        <ModelBreakdownSection models={modelBreakdown} />
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// MODEL BREAKDOWN — Per-model token usage table
+// =============================================================================
+
+function ModelBreakdownSection({ models }: { models: ModelUsage[] }) {
+  return (
+    <div className="pt-2 mt-1 border-t border-gray-200 dark:border-gray-700">
+      <p className="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1.5">
+        Model Breakdown
+      </p>
+      <div className="space-y-1">
+        {/* Header */}
+        <div className="flex text-[9px] text-gray-400 dark:text-gray-500 font-medium">
+          <span className="flex-1">Model</span>
+          <span className="w-16 text-right">Input</span>
+          <span className="w-16 text-right">Output</span>
+          <span className="w-16 text-right">Total</span>
+        </div>
+        {/* Rows */}
+        {models.map(m => (
+          <div key={m.model} className="flex text-[10px] items-center">
+            <span className="flex-1 text-gray-700 dark:text-gray-300 font-medium truncate mr-1">
+              {m.model}
+            </span>
+            <span className="w-16 text-right text-gray-500 dark:text-gray-400">
+              {formatCompact(m.inputTokens)}
+            </span>
+            <span className="w-16 text-right text-gray-500 dark:text-gray-400">
+              {formatCompact(m.outputTokens)}
+            </span>
+            <span className="w-16 text-right text-gray-700 dark:text-gray-300 font-medium">
+              {formatCompact(m.inputTokens + m.outputTokens)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// =============================================================================
+// RESOURCE ROW
+// =============================================================================
+
+function ResourceRow({ resource, showLicenseBadge }: { resource: ProviderResource; showLicenseBadge?: boolean }) {
+  return (
+    <div className="flex justify-between items-center text-xs py-1">
+      <span className="text-gray-600 dark:text-gray-400 truncate mr-2 flex items-center gap-1.5">
+        {showLicenseBadge && (
+          <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-medium bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300">
+            LICENSE
+          </span>
+        )}
+        {resource.label}
+      </span>
+      <div className="flex items-center gap-2 whitespace-nowrap">
+        <span className="text-gray-900 dark:text-white font-medium">
+          {formatCompact(resource.used)} {resource.unit !== 'dollars' ? resource.unit : ''}
+        </span>
+        {resource.costUsd > 0 && (
+          <span className="text-gray-400 dark:text-gray-500 text-[10px]">
+            (${resource.costUsd.toFixed(2)})
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/settings/SettingsCard.astro

@@ -0,0 +1,102 @@
+---
+/**
+ * SettingsCard.astro
+ * Reusable card component for settings sections
+ *
+ * @created 2026-02-03
+ * @task task-303.4
+ */
+
+interface Props {
+  title: string;
+  description: string;
+  icon: string;
+  href: string;
+  badge?: string;
+  badgeColor?: 'blue' | 'green' | 'yellow' | 'red' | 'gray' | 'purple';
+  external?: boolean;
+}
+
+const {
+  title,
+  description,
+  icon,
+  href,
+  badge,
+  badgeColor = 'gray',
+  external = false,
+} = Astro.props;
+
+const badgeColors = {
+  blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+  green: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+  yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
+  red: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
+  gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400',
+  purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400',
+};
+---
+
+<a
+  href={href}
+  class="group block p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-md transition-all"
+  target={external ? '_blank' : undefined}
+  rel={external ? 'noopener noreferrer' : undefined}
+>
+  <div class="flex items-start gap-4">
+    <!-- Icon -->
+    <div
+      class="flex-shrink-0 w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-2xl"
+    >
+      {icon}
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2 mb-1">
+        <h3
+          class="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"
+        >
+          {title}
+        </h3>
+        {
+          badge && (
+            <span class={`text-xs font-medium px-2 py-0.5 rounded-full ${badgeColors[badgeColor]}`}>
+              {badge}
+            </span>
+          )
+        }
+        {
+          external && (
+            <svg
+              class="w-4 h-4 text-gray-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+              />
+            </svg>
+          )
+        }
+      </div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        {description}
+      </p>
+    </div>
+
+    <!-- Arrow -->
+    <div
+      class="flex-shrink-0 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
+    >
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"
+        ></path>
+      </svg>
+    </div>
+  </div>
+</a>