From 3c1cbfa57114a10b0d96235ad459f50c9b5224a5 Mon Sep 17 00:00:00 2001
From: "dev.daminik00" <dev.daminik00@gmail.com>
Date: Thu, 9 Oct 2025 19:57:38 +0200
Subject: [PATCH] fix portrait click

---
 .../cards/PortraitCard/PortraitCard.tsx         | 17 +++++++++++++++--
 .../PortraitsSection/PortraitsSection.tsx       | 10 +---------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/domains/dashboard/cards/PortraitCard/PortraitCard.tsx b/src/components/domains/dashboard/cards/PortraitCard/PortraitCard.tsx
index ba1b7ba..cd7c3cc 100644
--- a/src/components/domains/dashboard/cards/PortraitCard/PortraitCard.tsx
+++ b/src/components/domains/dashboard/cards/PortraitCard/PortraitCard.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 
 import { Card, Icon, IconName, Typography } from "@/components/ui";
 import { PartnerPortrait } from "@/entities/dashboard/types";
@@ -35,7 +36,7 @@ const getStatusConfig = (status: PartnerPortrait["status"]) => {
     case "processing":
       return {
         icon: <Icon name={IconName.Loader} className={styles.iconProcessing} size={{ width: 16, height: 16 }} />,
-        text: "Generating...",
+        text: "Processing...",
         showCheckmark: false,
         className: styles.statusProcessing,
       };
@@ -62,6 +63,8 @@ export default function PortraitCard({
   status: initialStatus,
   imageUrl: initialImageUrl,
 }: PortraitCardProps) {
+  const router = useRouter();
+
   // Use polling hook to update status in real-time
   const { status, imageUrl: polledImageUrl } = useGenerationStatus(_id, initialStatus);
 
@@ -71,8 +74,18 @@ export default function PortraitCard({
   const statusConfig = getStatusConfig(status as PartnerPortrait["status"]);
   const isReady = status === "done" && imageUrl;
 
+  const handleClick = () => {
+    if (isReady) {
+      router.push(`/portraits/${_id}`);
+    }
+  };
+
   return (
-    <Card className={`${styles.card} ${!isReady ? styles.disabled : ""}`}>
+    <Card
+      className={`${styles.card} ${!isReady ? styles.disabled : ""}`}
+      onClick={handleClick}
+      style={{ cursor: isReady ? 'pointer' : 'default' }}
+    >
       <div className={styles.imageContainer}>
         {imageUrl ? (
           <Image
diff --git a/src/components/domains/dashboard/sections/PortraitsSection/PortraitsSection.tsx b/src/components/domains/dashboard/sections/PortraitsSection/PortraitsSection.tsx
index d3c0e71..ccd27b5 100644
--- a/src/components/domains/dashboard/sections/PortraitsSection/PortraitsSection.tsx
+++ b/src/components/domains/dashboard/sections/PortraitsSection/PortraitsSection.tsx
@@ -1,5 +1,3 @@
-import Link from "next/link";
-
 import { Grid, Section } from "@/components/ui";
 import { PartnerPortrait } from "@/entities/dashboard/types";
 
@@ -20,13 +18,7 @@ export default function PortraitsSection({ portraits }: PortraitsSectionProps) {
     <Section title="Portraits" contentClassName={styles.sectionContent}>
       <Grid columns={portraits.length} className={styles.grid}>
         {portraits.map(portrait => (
-          <Link
-            href={portrait.status === "done" && portrait.imageUrl ? `/portraits/${portrait._id}` : "#"}
-            key={portrait._id}
-            className={portrait.status === "done" && portrait.imageUrl ? "" : styles.disabledLink}
-          >
-            <PortraitCard {...portrait} />
-          </Link>
+          <PortraitCard key={portrait._id} {...portrait} />
         ))}
       </Grid>
     </Section>