From 0c87a287a3adccb10b1d5a0e00dc9f0db9c7c19f Mon Sep 17 00:00:00 2001
From: aramesh-site deploy <deploy@aramesh-site.local>
Date: Mon, 28 Sep 2026 10:33:05 +0000
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=D8=B5=D9=81=D8=AD=D9=87=D9=94?=
 =?UTF-8?q?=20=D8=A7=D8=AE=D8=AA=D8=B5=D8=A7=D8=B5=DB=8C=20=D9=88=DB=8C?=
 =?UTF-8?q?=D8=B1=D8=A7=DB=8C=D8=B4/=D8=B3=D8=A7=D8=AE=D8=AA=20=D9=BE?=
 =?UTF-8?q?=D8=B1=D9=88=DA=98=D9=87=20+=20=DA=AF=D8=A7=D9=84=D8=B1=DB=8C?=
 =?UTF-8?q?=20=D9=81=D9=82=D8=B7=20=D8=A8=D8=A7=20=D8=A2=D9=BE=D9=84=D9=88?=
 =?UTF-8?q?=D8=AF=20=D8=A8=D9=87=20MinIO?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- /admin/projects/new و /admin/projects/:id — همهٔ فیلدها در یک صفحه با
  ورودی دوزبانهٔ صریح (فارسی/English)، ذخیره، حذف
- GalleryField تازه: گالری چندتصویری فقط با آپلود به MinIO (حذف/جابه‌جایی/
  افزودن چندفایلی) — فیلد «هر خط یک URL» دیگر استفاده نمی‌شود
- مدادِ کارت پروژه و دکمهٔ «افزودن پروژه» به صفحهٔ اختصاصی هدایت می‌شوند؛
  دکمهٔ ویرایش روی صفحهٔ جزئیات هم لینک همان صفحه است
---
 frontend/src/App.tsx                          |   3 +
 frontend/src/admin/Editable.tsx               |   9 +
 frontend/src/admin/ProjectWritePage.tsx       | 345 ++++++++++++++++++
 .../src/components/admin/GalleryField.tsx     | 153 ++++++++
 frontend/src/pages/ProjectDetail.tsx          |  17 +-
 frontend/src/pages/Projects.tsx               |   4 +-
 6 files changed, 521 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/admin/ProjectWritePage.tsx
 create mode 100644 frontend/src/components/admin/GalleryField.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4874598..eaad8aa 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -22,6 +22,7 @@ import { AdminProvider, useAdmin } from './admin/AdminContext';
 import { AdminBar } from './admin/AdminBar';
 import { AdminLoginPage } from './admin/AdminLoginPage';
 import { ArticleWritePage } from './admin/ArticleWritePage';
+import { ProjectWritePage } from './admin/ProjectWritePage';
 import { LangProvider, useLang } from './i18n/lang';
 
 // مسیرهای عمومی یک بار تعریف می‌شوند و دو بار سرو می‌شوند: ریشه فارسی و /en انگلیسی
@@ -69,6 +70,8 @@ function AnimatedRoutes() {
           <Route path="/admin/login" element={<AdminLoginPage />} />
           <Route path="/admin/write" element={<ArticleWritePage />} />
           <Route path="/admin/write/:id" element={<ArticleWritePage />} />
+          <Route path="/admin/projects/new" element={<ProjectWritePage />} />
+          <Route path="/admin/projects/:id" element={<ProjectWritePage />} />
           {FA_ROUTES}
           <Route path="*" element={<Home />} />
           {EN_ROUTES}
diff --git a/frontend/src/admin/Editable.tsx b/frontend/src/admin/Editable.tsx
index 84fb0e1..9372f98 100644
--- a/frontend/src/admin/Editable.tsx
+++ b/frontend/src/admin/Editable.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import type { ReactNode } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { ArrowDownIcon, ArrowUpIcon, PencilIcon, PlusIcon, Trash2Icon } from 'lucide-react'
 import { Link } from 'react-router-dom'
 import Swal from 'sweetalert2'
@@ -163,12 +164,16 @@ export function AddItemButton({
   resource,
   label,
   variant = 'cell',
+  /** در صورت ارسال، پس از ساخته‌شدن رکورد به صفحهٔ ویرایش اختصاصی هدایت می‌شود (کشو باز نمی‌شود) */
+  editHrefBase,
 }: {
   resource: string
   label?: string
   variant?: 'cell' | 'button'
+  editHrefBase?: string
 }) {
   const { isAuthenticated, isEditMode, runSave } = useAdmin()
+  const navigate = useNavigate()
   const { updateSite } = useSiteData()
   const config = ENTITIES[resource]
   const [newItem, setNewItem] = useState<ItemWithId | null>(null)
@@ -183,6 +188,10 @@ export function AddItemButton({
         const list = d[config.dataKey as keyof SiteData] as unknown as ItemWithId[]
         if (Array.isArray(list)) list.push(created)
       })
+      if (editHrefBase) {
+        navigate(`${editHrefBase}/${created.id}`)
+        return
+      }
       setNewItem(created)
     })
   }
diff --git a/frontend/src/admin/ProjectWritePage.tsx b/frontend/src/admin/ProjectWritePage.tsx
new file mode 100644
index 0000000..d7e5032
--- /dev/null
+++ b/frontend/src/admin/ProjectWritePage.tsx
@@ -0,0 +1,345 @@
+import { useEffect, useState } from 'react'
+import { Link, Navigate, useNavigate, useParams } from 'react-router-dom'
+import { ArrowRightIcon, Trash2Icon } from 'lucide-react'
+import Swal from 'sweetalert2'
+import { useSiteData } from '../api'
+import { useAdmin } from './AdminContext'
+import { adminApi } from './adminClient'
+import { ImageField } from '../components/admin/ImageField'
+import { GalleryField } from '../components/admin/GalleryField'
+
+type ProjectDraft = {
+  id: number
+  slug: string
+  title: string
+  title_en: string
+  location: string
+  location_en: string
+  year: string
+  year_en: string
+  status: 'done' | 'progress'
+  project_type: string
+  project_type_en: string
+  usage: string
+  usage_en: string
+  area: string
+  area_en: string
+  floors: string
+  floors_en: string
+  units: string
+  units_en: string
+  client: string
+  client_en: string
+  summary: string
+  summary_en: string
+  body: string[]
+  body_en: string[]
+  image: string
+  gallery: string[]
+}
+
+const EMPTY: ProjectDraft = {
+  id: 0,
+  slug: `project-${Date.now()}`,
+  title: '', title_en: '',
+  location: '', location_en: '',
+  year: '', year_en: '',
+  status: 'done',
+  project_type: '', project_type_en: '',
+  usage: '', usage_en: '',
+  area: '', area_en: '',
+  floors: '', floors_en: '',
+  units: '', units_en: '',
+  client: '', client_en: '',
+  summary: '', summary_en: '',
+  body: [], body_en: [],
+  image: '', gallery: [],
+}
+
+const INPUT =
+  'w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none'
+
+/** جفت دوزبانه — فارسی و English همیشه هر دو دیده می‌شوند و با یک ذخیره ثبت می‌شوند */
+function Pair({
+  label,
+  fa,
+  en,
+  textarea = false,
+}: {
+  label: string
+  fa: { value: string; onChange: (v: string) => void }
+  en: { value: string; onChange: (v: string) => void }
+  textarea?: boolean
+}) {
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{label}</p>
+      <div className="mt-1.5 grid gap-3 sm:grid-cols-2">
+        <div>
+          <span className="text-[10px] font-light text-ivory/40">فارسی</span>
+          {textarea ? (
+            <textarea dir="rtl" rows={4} className={`${INPUT} mt-1 leading-8`} {...fa} />
+          ) : (
+            <input dir="rtl" type="text" className={`${INPUT} mt-1`} {...fa} />
+          )}
+        </div>
+        <div>
+          <span className="text-[10px] font-light text-ivory/40">English</span>
+          {textarea ? (
+            <textarea dir="ltr" rows={4} className={`${INPUT} mt-1 leading-8`} {...en} />
+          ) : (
+            <input dir="ltr" type="text" className={`${INPUT} mt-1`} {...en} />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** صفحهٔ اختصاصی ویرایش/ساخت پروژه — به‌جای کشو؛ تصاویر فقط با آپلود به MinIO */
+export function ProjectWritePage() {
+  const { id } = useParams<{ id: string }>()
+  const isNew = !id || id === 'new'
+  const numericId = Number(id)
+  const navigate = useNavigate()
+  const { data, updateSite } = useSiteData()
+  const { isAuthenticated, runSave } = useAdmin()
+
+  const existing = !isNew && data?.projects.find((p) => p.id === numericId)
+  const [fetched, setFetched] = useState<ProjectDraft | null>(null)
+  const [draft, setDraft] = useState<ProjectDraft>(EMPTY)
+  const [saving, setSaving] = useState(false)
+
+  // اگر پروژه در دادهٔ سایت نبود (پیش‌نویس تازه و… ) مستقیم از مسیر مدیریتی خوانده می‌شود
+  useEffect(() => {
+    if (isNew || existing) return
+    let cancelled = false
+    adminApi
+      .get<ProjectDraft>('projects', numericId)
+      .then((p) => {
+        if (!cancelled) setFetched(p)
+      })
+      .catch(() => {
+        /* پروژه در دادهٔ سایت نبود — از مسیر مدیریتی خوانده می‌شود */
+      })
+    return () => {
+      cancelled = true
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, existing])
+
+  const project = existing ?? fetched
+
+  useEffect(() => {
+    if (!project) return
+    setDraft({ ...EMPTY, ...(project as unknown as ProjectDraft) })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(project as unknown as ProjectDraft | undefined)?.id])
+
+  if (!isAuthenticated) return <Navigate to="/admin/login" replace />
+
+  const set = <K extends keyof ProjectDraft>(key: K, value: ProjectDraft[K]) =>
+    setDraft((d) => ({ ...d, [key]: value }))
+
+  const fa = (key: keyof ProjectDraft) => ({
+    value: String(draft[key] ?? ''),
+    onChange: (v: string) => set(key, v as ProjectDraft[typeof key]),
+  })
+  const en = (key: keyof ProjectDraft) => ({
+    value: String(draft[`${String(key)}_en` as keyof ProjectDraft] ?? ''),
+    onChange: (v: string) => set(`${String(key)}_en` as keyof ProjectDraft, v as ProjectDraft[typeof key]),
+  })
+
+  const doSave = async () => {
+    if (!draft.title.trim() || !draft.slug.trim()) {
+      void Swal.fire({
+        icon: 'warning',
+        title: 'عنوان و نشانی (slug) لازم است',
+        background: '#1e1a16',
+        color: '#F5F3EF',
+        confirmButtonText: 'باشه',
+        buttonsStyling: false,
+        customClass: { popup: 'font-pinar border border-ivory/10' },
+      })
+      return
+    }
+    setSaving(true)
+    await runSave(async () => {
+      if (isNew || draft.id === 0) {
+        const created = await adminApi.create<ProjectDraft>('projects', { ...draft })
+        updateSite((d) => {
+          const list = d.projects as unknown as ProjectDraft[]
+          if (Array.isArray(list)) list.push(created)
+        })
+        navigate(`/admin/projects/${created.id}`, { replace: true })
+      } else {
+        await adminApi.patch('projects', draft.id, { ...draft })
+        updateSite((d) => {
+          const list = d.projects as unknown as ProjectDraft[]
+          const index = list.findIndex((x) => x.id === draft.id)
+          if (index >= 0) list[index] = { ...list[index], ...draft }
+        })
+      }
+    })
+    setSaving(false)
+  }
+
+  const doDelete = async () => {
+    if (isNew || draft.id === 0) return
+    const result = await Swal.fire({
+      icon: 'warning',
+      title: 'حذف پروژه',
+      text: `«${draft.title}» برای همیشه حذف شود؟`,
+      background: '#1e1a16',
+      color: '#F5F3EF',
+      iconColor: '#d5874c',
+      showCancelButton: true,
+      confirmButtonText: 'حذف',
+      cancelButtonText: 'انصراف',
+      buttonsStyling: false,
+      customClass: {
+        popup: 'font-pinar border border-ivory/10',
+        confirmButton: 'bg-red-500 text-white font-bold px-8 py-2.5 mx-2',
+        cancelButton: 'border border-ivory/30 text-ivory font-light px-8 py-2.5 mx-2',
+      },
+    })
+    if (!result.isConfirmed) return
+    await runSave(async () => {
+      await adminApi.remove('projects', draft.id)
+      updateSite((d) => {
+        const list = d.projects as unknown as ProjectDraft[]
+        const index = list.findIndex((x) => x.id === draft.id)
+        if (index >= 0) list.splice(index, 1)
+      })
+      navigate('/projects', { replace: true })
+    })
+  }
+
+  /** تصویر شاخص و گالری بلافاصله ذخیره می‌شوند (پروژهٔ موجود)؛ در پروژهٔ تازه تا اولین ذخیره در فرم می‌مانند */
+  const persistImage = async (url: string) => {
+    setDraft((d) => ({ ...d, image: url }))
+    if (!isNew && draft.id !== 0) {
+      await adminApi.patch('projects', draft.id, { image: url })
+    }
+    return true
+  }
+  const persistGallery = async (urls: string[]) => {
+    setDraft((d) => ({ ...d, gallery: urls }))
+    if (!isNew && draft.id !== 0) {
+      await adminApi.patch('projects', draft.id, { gallery: urls })
+    }
+    return true
+  }
+
+  return (
+    <div dir="rtl" className="min-h-screen bg-ink pb-24 pt-24">
+      <div className="mx-auto max-w-4xl px-6 lg:px-10">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <Link
+              to="/projects"
+              data-admin-link
+              className="inline-flex items-center gap-2 text-xs font-light text-ivory/50 transition-colors hover:text-copper"
+            >
+              <ArrowRightIcon className="h-3.5 w-3.5" />
+              بازگشت به پروژه‌ها
+            </Link>
+            <h1 className="mt-3 text-3xl font-bold text-ivory">
+              {isNew ? 'پروژهٔ جدید' : `ویرایش «${draft.title}»`}
+            </h1>
+          </div>
+          <div className="flex items-center gap-3">
+            {!isNew && draft.id !== 0 && (
+              <button
+                type="button"
+                onClick={() => void doDelete()}
+                className="flex items-center gap-2 border border-red-400/40 px-5 py-2.5 text-sm font-light text-red-300 transition-colors duration-200 hover:bg-red-500/20"
+              >
+                <Trash2Icon className="h-4 w-4" />
+                حذف پروژه
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => void doSave()}
+              disabled={saving}
+              className="flex items-center gap-2 bg-copper px-8 py-2.5 text-sm font-bold text-char transition-transform duration-200 hover:scale-105 disabled:opacity-60"
+            >
+              ذخیرهٔ پروژه
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-10 space-y-8">
+          <Pair label="عنوان پروژه" fa={fa('title')} en={en('title')} />
+
+          <div className="grid gap-6 sm:grid-cols-2">
+            <div>
+              <p className="text-xs font-bold text-ivory/80">
+                نشانی (slug) <span className="font-light text-ivory/40">— در نشانی صفحه: /projects/…</span>
+              </p>
+              <input
+                dir="ltr"
+                type="text"
+                className={`${INPUT} mt-1.5`}
+                value={draft.slug}
+                onChange={(e) => set('slug', e.target.value)}
+              />
+            </div>
+            <div>
+              <p className="text-xs font-bold text-ivory/80">وضعیت</p>
+              <select
+                className={`${INPUT} mt-1.5`}
+                value={draft.status}
+                onChange={(e) => set('status', e.target.value as ProjectDraft['status'])}
+              >
+                <option value="done">انجام‌شده (done)</option>
+                <option value="progress">در حال اجرا (progress)</option>
+              </select>
+            </div>
+          </div>
+
+          <Pair label="موقعیت" fa={fa('location')} en={en('location')} />
+          <Pair label="سال" fa={fa('year')} en={en('year')} />
+          <Pair label="نوع پروژه" fa={fa('project_type')} en={en('project_type')} />
+          <Pair label="کاربری" fa={fa('usage')} en={en('usage')} />
+          <Pair label="زیربنا" fa={fa('area')} en={en('area')} />
+          <Pair label="تعداد طبقات" fa={fa('floors')} en={en('floors')} />
+          <Pair label="واحدها" fa={fa('units')} en={en('units')} />
+          <Pair label="کارفرما" fa={fa('client')} en={en('client')} />
+          <Pair label="خلاصه" fa={fa('summary')} en={en('summary')} textarea />
+          <Pair
+            label="متن پروژه — هر پاراگراف یک خط"
+            fa={{
+              value: draft.body.join('\n'),
+              onChange: (v) => set('body', v.split('\n')),
+            }}
+            en={{
+              value: draft.body_en.join('\n'),
+              onChange: (v) => set('body_en', v.split('\n')),
+            }}
+            textarea
+          />
+
+          <div className="border-t border-ivory/10 pt-8">
+            <ImageField
+              label="تصویر شاخص"
+              value={draft.image}
+              onSave={persistImage}
+              altFallback={`پروژه ${draft.title}`}
+            />
+          </div>
+
+          <div className="border-t border-ivory/10 pt-8">
+            <GalleryField
+              label="گالری تصاویر پروژه — فقط آپلود به MinIO"
+              value={draft.gallery}
+              onSave={persistGallery}
+              namePrefix={draft.slug || 'project'}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/admin/GalleryField.tsx b/frontend/src/components/admin/GalleryField.tsx
new file mode 100644
index 0000000..17ea93a
--- /dev/null
+++ b/frontend/src/components/admin/GalleryField.tsx
@@ -0,0 +1,153 @@
+import { useRef, useState } from 'react'
+import { ArrowDownIcon, ArrowUpIcon, ImagePlusIcon, Loader2Icon, XIcon } from 'lucide-react'
+import { adminApi } from '../../admin/adminClient'
+
+type GalleryFieldProps = {
+  label: string
+  value: string[]
+  /** فهرست کامل نشانی‌ها را ذخیره می‌کند — همه از MinIO */
+  onSave: (urls: string[]) => Promise<boolean>
+  /** پیشوند نام ذخیره‌سازی فایل‌ها — مثلاً اسلاگ پروژه */
+  namePrefix?: string
+}
+
+/**
+ * گالری چندتصویری — فقط آپلود به MinIO.
+ * هیچ ورودی URL وجود ندارد؛ نشانی‌ها فقط از آپلود ساخته می‌شوند.
+ * هر تصویر: حذف، جابه‌جایی بالا/پایین. چند فایل همزمان قابل آپلود است.
+ */
+export function GalleryField({ label, value, onSave, namePrefix = 'image' }: GalleryFieldProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [uploading, setUploading] = useState(0)
+  const [error, setError] = useState('')
+
+  const commit = async (urls: string[]) => {
+    if (!(await onSave(urls))) setError('ذخیرهٔ گالری ناموفق بود — دوباره تلاش کنید')
+  }
+
+  const addFiles = async (files: FileList | null) => {
+    if (!files || files.length === 0) return
+    setError('')
+    setUploading(files.length)
+    const next = [...value]
+    try {
+      let i = 0
+      for (const file of Array.from(files)) {
+        i += 1
+        const base = file.name.replace(/\.[^.]+$/, '')
+        const name = `${namePrefix}-${Date.now()}-${i}`
+        try {
+          const { url } = await adminApi.upload(file, `${name}-${base}`)
+          next.push(url)
+        } catch {
+          setError(`آپلود «${file.name}» ناموفق بود`)
+        } finally {
+          setUploading((n) => n - 1)
+        }
+      }
+      if (next.length !== value.length) await commit(next)
+    } finally {
+      setUploading(0)
+      if (inputRef.current) inputRef.current.value = ''
+    }
+  }
+
+  const removeAt = async (index: number) => {
+    const next = value.filter((_, i) => i !== index)
+    await commit(next)
+  }
+
+  const move = async (index: number, delta: number) => {
+    const target = index + delta
+    if (target < 0 || target >= value.length) return
+    const next = [...value]
+    ;[next[index], next[target]] = [next[target], next[index]]
+    await commit(next)
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{label}</p>
+
+      {value.length === 0 ? (
+        <div className="mt-2 flex h-24 w-full flex-col items-center justify-center gap-1 border border-dashed border-ivory/20 text-ivory/30">
+          <ImagePlusIcon className="h-5 w-5" aria-hidden="true" />
+          <span className="text-[11px] font-light">تصویری در گالری نیست</span>
+        </div>
+      ) : (
+        <ul className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-3">
+          {value.map((url, index) => (
+            <li key={`${url}-${index}`} className="group relative overflow-hidden rounded-lg border border-ivory/15 bg-char">
+              <img src={url} alt="" className="h-24 w-full object-cover" />
+              <div className="absolute inset-x-0 bottom-0 flex items-center justify-between bg-char/80 px-1.5 py-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+                <div className="flex gap-1">
+                  <button
+                    type="button"
+                    aria-label="انتقال به قبل"
+                    title="انتقال به قبل"
+                    disabled={index === 0}
+                    onClick={() => void move(index, -1)}
+                    className="flex h-6 w-6 items-center justify-center border border-copper/50 bg-ink/90 text-copper hover:bg-copper hover:text-char disabled:opacity-40"
+                  >
+                    <ArrowUpIcon className="h-3 w-3" />
+                  </button>
+                  <button
+                    type="button"
+                    aria-label="انتقال به بعد"
+                    title="انتقال به بعد"
+                    disabled={index === value.length - 1}
+                    onClick={() => void move(index, 1)}
+                    className="flex h-6 w-6 items-center justify-center border border-copper/50 bg-ink/90 text-copper hover:bg-copper hover:text-char disabled:opacity-40"
+                  >
+                    <ArrowDownIcon className="h-3 w-3" />
+                  </button>
+                </div>
+                <button
+                  type="button"
+                  aria-label="حذف تصویر"
+                  title="حذف تصویر"
+                  onClick={() => void removeAt(index)}
+                  className="flex h-6 w-6 items-center justify-center border border-red-400/40 bg-ink/90 text-red-300 hover:bg-red-500/20"
+                >
+                  <XIcon className="h-3 w-3" />
+                </button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <button
+        type="button"
+        onClick={() => inputRef.current?.click()}
+        disabled={uploading > 0}
+        className="mt-3 flex items-center gap-2 border border-ivory/20 px-4 py-2 text-xs font-light text-ivory/80 transition-colors duration-200 hover:border-copper hover:text-copper disabled:opacity-50"
+      >
+        {uploading > 0 ? (
+          <>
+            <Loader2Icon className="h-3.5 w-3.5 animate-spin" />
+            در حال آپلود {uploading} تصویر…
+          </>
+        ) : (
+          <>
+            <ImagePlusIcon className="h-3.5 w-3.5" />
+            افزودن تصویر به گالری (آپلود به MinIO)
+          </>
+        )}
+      </button>
+
+      {error && <p className="mt-2 text-xs text-red-300">{error}</p>}
+
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
+        className="hidden"
+        onChange={(event) => {
+          void addFiles(event.target.files)
+        }}
+      />
+    </div>
+  )
+}
diff --git a/frontend/src/pages/ProjectDetail.tsx b/frontend/src/pages/ProjectDetail.tsx
index 5798f89..62c0ab5 100644
--- a/frontend/src/pages/ProjectDetail.tsx
+++ b/frontend/src/pages/ProjectDetail.tsx
@@ -10,7 +10,6 @@ import { useEffect } from 'react';
 import { useSite, useStatusLabel } from '../api';
 import { useLang } from '../i18n/lang';
 import { applySeo } from '../seo';
-import { SingletonPill } from '../admin/Editable';
 
 export function ProjectDetail() {
   const { slug } = useParams<{ slug: string }>()
@@ -86,13 +85,15 @@ export function ProjectDetail() {
           </nav>
           <h1 className="mt-5 max-w-[700px] text-hero font-bold text-ivory">{project.title}</h1>
           <p className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/70">{project.summary}</p>
-          {/* ویرایش این پروژه — فقط در حالت ویرایش ادمین */}
-          <div className="mt-5 flex items-start gap-3 [&>div]:!mt-0">
-            <SingletonPill
-              resource="projects"
-              label="ویرایش این پروژه (عنوان، مشخصات، گالری، متن)"
-              select={(d) => d.projects.find((p) => p.slug === slug)}
-            />
+          {/* ویرایش این پروژه — صفحهٔ اختصاصی ویرایش */}
+          <div className="mt-5">
+            <Link
+              to={`/admin/projects/${project.id}`}
+              data-admin-link
+              className="inline-flex items-center gap-2 rounded-full border border-copper/50 bg-ink/90 px-4 py-2 text-xs font-light text-copper backdrop-blur-sm transition-colors duration-200 hover:bg-copper hover:text-char"
+            >
+              ویرایش این پروژه (عنوان، مشخصات، گالری، متن)
+            </Link>
           </div>
         </div>
       </section>
diff --git a/frontend/src/pages/Projects.tsx b/frontend/src/pages/Projects.tsx
index e7b1899..1b89cc1 100644
--- a/frontend/src/pages/Projects.tsx
+++ b/frontend/src/pages/Projects.tsx
@@ -160,7 +160,7 @@ export function Projects() {
               return (
                 <Reveal key={project.id} delay={0.05 * (index % itemsPerPage)} className="h-full">
                   {fromDb ? (
-                    <EditableItem resource="projects" item={project} className="h-full">
+                    <EditableItem resource="projects" item={project} editHref={`/admin/projects/${project.id}`} className="h-full">
                       {card}
                     </EditableItem>
                   ) : (
@@ -169,7 +169,7 @@ export function Projects() {
                 </Reveal>
               );
             })}
-            {fromDb && <AddItemButton resource="projects" />}
+            {fromDb && <AddItemButton resource="projects" editHrefBase="/admin/projects" />}
           </div>
           
           {/* Load More Button */}