Add Photos onboarding step; let pending/rejected users re-edit freely

- New /onboarding/photos step (upload/delete grid, needs >=1 photo to
  continue), inserted as step 2 right after basic info.
- Pending screen gets an "edit your info" entry point into the wizard;
  Rejected screen's edit button now goes there too instead of just
  the read-only profile page.
- Step 1's back button now returns to /home instead of /login when
  the user is already onboarded (was previously always /login).
- Progress bar segments become clickable to jump directly to any step
  once the user is already onboarded.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/(main)/home/page.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { Bell, HourglassIcon, XCircle, SlidersHorizontal, Heart } from "lucide-react";
+import { Bell, HourglassIcon, XCircle, SlidersHorizontal, Heart, Pencil } from "lucide-react";
 import { EmptyState } from "@/components/ui/EmptyState";
 import { Badge } from "@/components/ui/Badge";
 import { Button } from "@/components/ui/Button";
@@ -28,6 +28,7 @@ function BrandHeader() {
 }
 
 function PendingReview() {
+  const router = useRouter();
   const { refreshUser } = useAuth();
   const [checking, setChecking] = useState(false);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -64,6 +65,14 @@ function PendingReview() {
           actionLabel={checking ? "در حال بررسی..." : "بررسی وضعیت"}
           onAction={handleCheck}
         />
+        <Button
+          variant="ghost"
+          size="sm"
+          icon={<Pencil size={14} />}
+          onClick={() => router.push("/onboarding/basic-info")}
+        >
+          هنوز وقت هست؛ اطلاعاتت رو ویرایش کن
+        </Button>
       </div>
     </div>
   );
@@ -90,7 +99,7 @@ function Rejected({ reason }: { reason?: string }) {
               <p className="text-[14px] text-(--color-content-secondary) leading-6">{reason}</p>
             )}
           </div>
-          <Button size="sm" onClick={() => router.push("/profile")}>
+          <Button size="sm" onClick={() => router.push("/onboarding/basic-info")}>
             ویرایش پروفایل
           </Button>
         </div>

src/app/onboarding/[slug]/page.tsx

@@ -7,6 +7,7 @@ import { useRequireAuth } from "@/lib/hooks";
 import { FullScreenLoader } from "@/components/ui/FullScreenLoader";
 import { OnboardingScreen } from "@/components/onboarding/OnboardingScreen";
 import { BasicInfoStep } from "@/components/onboarding/steps/BasicInfoStep";
+import { PhotosStep } from "@/components/onboarding/steps/PhotosStep";
 import { BodyInfoStep } from "@/components/onboarding/steps/BodyInfoStep";
 import { ProfileQuestionsStep } from "@/components/onboarding/steps/ProfileQuestionsStep";
 import { EducationStep } from "@/components/onboarding/steps/EducationStep";
@@ -90,12 +91,19 @@ export default function OnboardingStepPage() {
     return <FullScreenLoader />;
   }
 
+  const alreadyOnboarded = !!onboardingStatus?.is_onboarded;
+
   return (
     <OnboardingScreen
       order={meta.order}
       title={meta.title}
       emoji={meta.emoji}
-      onBack={meta.order === 1 ? () => router.push("/login") : undefined}
+      onBack={
+        meta.order === 1
+          ? () => router.push(alreadyOnboarded ? "/home" : "/login")
+          : undefined
+      }
+      onJumpToStep={alreadyOnboarded ? (s) => router.push(`/onboarding/${s}`) : undefined}
     >
       {renderStep(slug, profile, goNext)}
     </OnboardingScreen>
@@ -106,6 +114,8 @@ function renderStep(slug: string, profile: FullProfile | null, onNext: () => voi
   switch (slug) {
     case "basic-info":
       return <BasicInfoStep initialProfile={profile} onNext={onNext} />;
+    case "photos":
+      return <PhotosStep initialProfile={profile} onNext={onNext} />;
     case "body-info":
       return <BodyInfoStep initialProfile={profile} onNext={onNext} />;
     case "profile-questions":

src/components/onboarding/OnboardingScreen.tsx

@@ -12,6 +12,9 @@ interface OnboardingScreenProps {
   description?: string;
   children: ReactNode;
   onBack?: () => void;
+  // وقتی پروفایل قبلاً کامل شده (در انتظار بررسی یا ردشده)، کاربر می‌تونه
+  // مستقیم روی هر بخش از نوار پیشرفت بزنه و بین مراحل جابه‌جا بشه
+  onJumpToStep?: (slug: string) => void;
 }
 
 export function OnboardingScreen({
@@ -21,6 +24,7 @@ export function OnboardingScreen({
   description,
   children,
   onBack,
+  onJumpToStep,
 }: OnboardingScreenProps) {
   const router = useRouter();
   const total = ONBOARDING_STEPS.length;
@@ -36,14 +40,25 @@ export function OnboardingScreen({
           <ChevronRight size={20} className="text-(--color-content-secondary)" />
         </button>
         <div className="flex-1 flex gap-1.5">
-          {ONBOARDING_STEPS.map((s) => (
+          {ONBOARDING_STEPS.map((s) =>
-            <div
+            onJumpToStep ? (
-              key={s.key}
+              <button
-              className={`h-1.5 flex-1 rounded-(--radius-full) transition-colors duration-300 ${
+                key={s.key}
-                s.order <= order ? "bg-(--color-brand-500)" : "bg-(--color-bg-tertiary)"
+                onClick={() => onJumpToStep(s.slug)}
-              }`}
+                aria-label={s.title}
-            />
+                className={`h-1.5 flex-1 rounded-(--radius-full) transition-colors duration-300 cursor-pointer ${
-          ))}
+                  s.order <= order ? "bg-(--color-brand-500)" : "bg-(--color-bg-tertiary)"
+                }`}
+              />
+            ) : (
+              <div
+                key={s.key}
+                className={`h-1.5 flex-1 rounded-(--radius-full) transition-colors duration-300 ${
+                  s.order <= order ? "bg-(--color-brand-500)" : "bg-(--color-bg-tertiary)"
+                }`}
+              />
+            )
+          )}
         </div>
         <span className="text-[11px] font-bold text-(--color-content-tertiary) shrink-0">
           {order}/{total}

src/components/onboarding/steps/PhotosStep.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { Plus, X } from "lucide-react";
+import { Button } from "@/components/ui/Button";
+import { ErrorBanner } from "@/components/ui/ErrorBanner";
+import { confirmPhotosStep, uploadPhoto, deletePhoto, photoUrl, FullProfile, Photo } from "@/lib/api";
+import { formatApiError } from "@/lib/hooks";
+
+const MAX_PHOTOS = 6;
+
+export function PhotosStep({
+  initialProfile,
+  onNext,
+}: {
+  initialProfile: FullProfile | null;
+  onNext: () => void;
+}) {
+  const [photos, setPhotos] = useState<Photo[]>(initialProfile?.photos ?? []);
+  const [uploading, setUploading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  async function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    setUploading(true);
+    setError(null);
+    try {
+      const photo = await uploadPhoto(file);
+      setPhotos((prev) => [...prev, photo]);
+    } catch (err) {
+      setError(formatApiError(err));
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  async function handleDelete(id: number) {
+    setError(null);
+    try {
+      await deletePhoto(id);
+      setPhotos((prev) => prev.filter((p) => p.id !== id));
+    } catch (err) {
+      setError(formatApiError(err));
+    }
+  }
+
+  async function handleNext() {
+    if (photos.length === 0) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await confirmPhotosStep();
+      onNext();
+    } catch (err) {
+      setError(formatApiError(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <p className="text-[13px] font-semibold text-(--color-content-secondary)">
+        حداقل ۱ عکس لازمه؛ هرچی بیشتر بذاری، شانس دیده شدنت بیشتره ({photos.length}/{MAX_PHOTOS})
+      </p>
+
+      <div className="grid grid-cols-3 gap-2.5">
+        {photos.map((p) => (
+          <div key={p.id} className="relative aspect-square rounded-(--radius-md) overflow-hidden">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={photoUrl(p.url)} alt="" className="w-full h-full object-cover" />
+            <button
+              onClick={() => handleDelete(p.id)}
+              className="absolute top-1 left-1 w-6 h-6 rounded-full bg-black/50 flex items-center justify-center text-white"
+              aria-label="حذف عکس"
+            >
+              <X size={13} />
+            </button>
+          </div>
+        ))}
+        {photos.length < MAX_PHOTOS && (
+          <button
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploading}
+            className="aspect-square rounded-(--radius-md) border-2 border-dashed border-(--color-border-default) flex items-center justify-center text-(--color-content-tertiary) disabled:opacity-50"
+          >
+            <Plus size={22} />
+          </button>
+        )}
+      </div>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/webp"
+        className="hidden"
+        onChange={handleFile}
+      />
+
+      <ErrorBanner message={error} />
+
+      <Button size="lg" isBlock disabled={photos.length === 0} isLoading={loading} onClick={handleNext}>
+        بریم مرحله بعد
+      </Button>
+    </div>
+  );
+}

src/lib/api.ts

@@ -342,6 +342,11 @@ export function submitBasicInfo(payload: {
   });
 }
 
+// خودِ عکس‌ها با uploadPhoto/deletePhoto آپلود می‌شن؛ این فقط مرحله رو تایید/رد می‌کنه
+export function confirmPhotosStep() {
+  return authRequest<OnboardingStatus>("/onboarding/photos", { method: "POST" });
+}
+
 export function submitBodyInfo(payload: { height_cm: number; weight_kg: number }) {
   return authRequest<OnboardingStatus>("/onboarding/body-info", {
     method: "POST",

src/lib/onboarding-steps.ts

@@ -9,19 +9,20 @@ export interface StepMeta {
 // همون ترتیب و کلیدهایی که بک‌اند در models.OnboardingStepOrder برمی‌گردونه
 export const ONBOARDING_STEPS: StepMeta[] = [
   { key: "basic_info", slug: "basic-info", order: 1, title: "خب اول بگو کی هستی", emoji: "👋" },
-  { key: "body_info", slug: "body-info", order: 2, title: "قد و وزنت چقدره؟", emoji: "📏" },
+  { key: "photos", slug: "photos", order: 2, title: "چندتا عکس از خودت بذار", emoji: "📸" },
-  { key: "profile_questions", slug: "profile-questions", order: 3, title: "یکم از خودت بگو", emoji: "💬" },
+  { key: "body_info", slug: "body-info", order: 3, title: "قد و وزنت چقدره؟", emoji: "📏" },
-  { key: "education", slug: "education", order: 4, title: "تحصیلاتت چیه؟", emoji: "🎓" },
+  { key: "profile_questions", slug: "profile-questions", order: 4, title: "یکم از خودت بگو", emoji: "💬" },
-  { key: "occupations", slug: "occupations", order: 5, title: "چیکار می‌کنی؟", emoji: "💼" },
+  { key: "education", slug: "education", order: 5, title: "تحصیلاتت چیه؟", emoji: "🎓" },
+  { key: "occupations", slug: "occupations", order: 6, title: "چیکار می‌کنی؟", emoji: "💼" },
   {
     key: "relationship_importance",
     slug: "relationship-importance",
-    order: 6,
+    order: 7,
     title: "توی رابطه چی برات مهمه؟",
     emoji: "❤️",
   },
-  { key: "interests", slug: "interests", order: 7, title: "به چی علاقه داری؟", emoji: "✨" },
+  { key: "interests", slug: "interests", order: 8, title: "به چی علاقه داری؟", emoji: "✨" },
-  { key: "looking_for", slug: "looking-for", order: 8, title: "دنبال چی می‌گردی؟", emoji: "🔍" },
+  { key: "looking_for", slug: "looking-for", order: 9, title: "دنبال چی می‌گردی؟", emoji: "🔍" },
 ];
 
 export function stepBySlug(slug: string) {