first commit

src/components/shared/PaymentBadge.tsx

@@ -0,0 +1,20 @@
+import { getPaymentVisualStyle } from "@/lib/finance/paymentVisualStyle";
+import type { CalendarEventType, PaymentSourceType } from "@/types/finance";
+
+export function PaymentBadge({
+  sourceType,
+  status,
+  children,
+}: {
+  sourceType: PaymentSourceType | CalendarEventType | "income";
+  status?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <span
+      className={`inline-flex rounded-full border px-2 py-1 text-xs ${getPaymentVisualStyle(sourceType, status).badge}`}
+    >
+      {children}
+    </span>
+  );
+}