fix portrait click

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

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
+          <PortraitCard key={portrait._id} {...portrait} />
-            href={portrait.status === "done" && portrait.imageUrl ? `/portraits/${portrait._id}` : "#"}
-            key={portrait._id}
-            className={portrait.status === "done" && portrait.imageUrl ? "" : styles.disabledLink}
-          >
-            <PortraitCard {...portrait} />
-          </Link>
         ))}
       </Grid>
     </Section>