feat: enhance dashboard and canvas components with credit management features

- Integrated CreditOverview and RecentTransactions components into the dashboard for better credit visibility.
- Updated canvas toolbar to display current credit balance using CreditDisplay.
- Improved AI image and prompt nodes to show credit costs and handle credit availability checks during image generation.
- Added new queries for fetching recent transactions and monthly usage statistics to support dashboard features.
- Refactored existing code to streamline credit-related functionalities across components.

components/canvas/nodes/ai-image-node.tsx

@@ -8,12 +8,12 @@ import type { Id } from "@/convex/_generated/dataModel";
 import BaseNodeWrapper from "./base-node-wrapper";
 import { DEFAULT_MODEL_ID, getModel } from "@/lib/ai-models";
 import { DEFAULT_ASPECT_RATIO } from "@/lib/image-formats";
-import { cn, formatEurFromCents } from "@/lib/utils";
 import {
   Loader2,
   AlertCircle,
   RefreshCw,
   ImageIcon,
+  Coins,
 } from "lucide-react";
 
 type AiImageNodeData = {
@@ -21,6 +21,7 @@ type AiImageNodeData = {
   url?: string;
   prompt?: string;
   model?: string;
+  modelLabel?: string;
   modelTier?: string;
   generatedAt?: number;
   /** Gebuchte Credits in Euro-Cent (PRD: nach Commit) */
@@ -123,8 +124,9 @@ export default function AiImageNode({
       />
 
       <div className="shrink-0 border-b border-border px-3 py-2">
-        <div className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
-          🖼️ AI Image
+        <div className="flex items-center gap-1.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
+          <ImageIcon className="h-3.5 w-3.5" />
+          AI Image
         </div>
       </div>
 
@@ -186,24 +188,9 @@ export default function AiImageNode({
           />
         )}
 
-        {nodeData.creditCost != null &&
-          nodeData.url &&
-          !isLoading &&
-          status !== "error" && (
-            <div
-              className="pointer-events-none absolute bottom-2 right-2 z-[15] rounded-md border border-border/80 bg-background/85 px-1.5 py-0.5 text-[10px] tabular-nums text-muted-foreground shadow-sm backdrop-blur-sm"
-              title="Gebuchte Credits (Cent) für diese Generierung"
-            >
-              {formatEurFromCents(nodeData.creditCost)}
-            </div>
-          )}
-
         {status === "done" && nodeData.url && !isLoading && (
           <div
-            className={cn(
-              "absolute right-2 z-20 opacity-0 transition-opacity group-hover:opacity-100",
-              nodeData.creditCost != null ? "bottom-12" : "bottom-2",
-            )}
+            className="absolute right-2 bottom-2 z-20 opacity-0 transition-opacity group-hover:opacity-100"
           >
             <button
               type="button"
@@ -222,9 +209,25 @@ export default function AiImageNode({
           <p className="line-clamp-2 text-[10px] text-muted-foreground">
             {nodeData.prompt}
           </p>
-          <p className="mt-0.5 text-[10px] text-muted-foreground/60">
-            {modelName} · {nodeData.aspectRatio ?? DEFAULT_ASPECT_RATIO}
-          </p>
+          {status === "done" && nodeData.creditCost != null ? (
+            <div className="mt-0.5 flex items-center justify-between gap-2 text-[10px] text-muted-foreground">
+              <span
+                className="min-w-0 truncate"
+                title={nodeData.model ?? DEFAULT_MODEL_ID}
+              >
+                {nodeData.modelLabel ?? modelName} ·{" "}
+                {nodeData.aspectRatio ?? DEFAULT_ASPECT_RATIO}
+              </span>
+              <span className="inline-flex shrink-0 items-center gap-1 tabular-nums">
+                <Coins className="h-3 w-3" />
+                {nodeData.creditCost} Cr
+              </span>
+            </div>
+          ) : (
+            <p className="mt-0.5 text-[10px] text-muted-foreground/60">
+              {modelName} · {nodeData.aspectRatio ?? DEFAULT_ASPECT_RATIO}
+            </p>
+          )}
         </div>
       )}
 

components/canvas/nodes/prompt-node.tsx

@@ -9,13 +9,13 @@ import {
   type NodeProps,
   type Node,
 } from "@xyflow/react";
-import { useMutation, useAction } from "convex/react";
+import { useMutation, useAction, useQuery } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
 import BaseNodeWrapper from "./base-node-wrapper";
 import { useCanvasPlacement } from "@/components/canvas/canvas-placement-context";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
-import { DEFAULT_MODEL_ID } from "@/lib/ai-models";
+import { DEFAULT_MODEL_ID, getModel } from "@/lib/ai-models";
 import {
   DEFAULT_ASPECT_RATIO,
   getAiImageNodeOuterSize,
@@ -33,7 +33,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Sparkles, Loader2 } from "lucide-react";
+import { Sparkles, Loader2, Coins } from "lucide-react";
 
 type PromptNodeData = {
   prompt?: string;
@@ -104,6 +104,14 @@ export default function PromptNode({
   const dataRef = useRef(data);
   dataRef.current = data;
 
+  const balance = useQuery(api.credits.getBalance);
+  const creditCost = getModel(DEFAULT_MODEL_ID)?.creditCost ?? 4;
+
+  const availableCredits =
+    balance !== undefined ? balance.balance - balance.reserved : null;
+  const hasEnoughCredits =
+    availableCredits !== null && availableCredits >= creditCost;
+
   const updateData = useMutation(api.nodes.updateData);
   const createEdge = useMutation(api.edges.create);
   const generateImage = useAction(api.ai.generateImage);
@@ -248,8 +256,9 @@ export default function PromptNode({
       />
 
       <div className="flex flex-col gap-2 p-3">
-        <div className="text-xs font-medium text-violet-600 dark:text-violet-400">
-          ✨ Eingabe
+        <div className="flex items-center gap-1.5 text-xs font-medium text-violet-600 dark:text-violet-400">
+          <Sparkles className="h-3.5 w-3.5" />
+          Eingabe
         </div>
         {inputMeta.hasTextInput ? (
           <div className="rounded-md border border-violet-500/30 bg-violet-500/5 px-3 py-2">
@@ -313,24 +322,45 @@ export default function PromptNode({
           <p className="text-xs text-destructive">{error}</p>
         )}
 
-        <button
-          type="button"
-          onClick={() => void handleGenerate()}
-          disabled={!effectivePrompt.trim() || isGenerating}
-          className="nodrag flex items-center justify-center gap-2 rounded-md bg-violet-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-violet-700 disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          {isGenerating ? (
-            <>
-              <Loader2 className="h-4 w-4 animate-spin" />
-              Generiere…
-            </>
-          ) : (
-            <>
-              <Sparkles className="h-4 w-4" />
-              Bild generieren
-            </>
+        <div className="flex flex-col gap-1">
+          <button
+            type="button"
+            onClick={() => void handleGenerate()}
+            disabled={
+              !effectivePrompt.trim() ||
+              isGenerating ||
+              balance === undefined ||
+              (availableCredits !== null && !hasEnoughCredits)
+            }
+            className={`nodrag flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed ${
+              availableCredits !== null && !hasEnoughCredits
+                ? "bg-muted text-muted-foreground"
+                : "bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
+            }`}
+          >
+            {isGenerating ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Generiere…
+              </>
+            ) : (
+              <>
+                <Sparkles className="h-4 w-4" />
+                Bild generieren
+                <span className="inline-flex items-center gap-1 text-xs opacity-90">
+                  <Coins className="h-3 w-3" />
+                  {creditCost} Cr
+                </span>
+              </>
+            )}
+          </button>
+          {availableCredits !== null && !hasEnoughCredits && (
+            <p className="text-center text-xs text-destructive">
+              Not enough credits ({availableCredits} available, {creditCost}{" "}
+              needed)
+            </p>
           )}
-        </button>
+        </div>
       </div>
 
       <Handle