فرانت‌اند: ویرایش زنده درجا — دوقلوی دیجیتال سایت برای ادمین

لایه ویرایش بصری روی سایت واقعی (بدون داشبورد جدا):

- ورود ادمین از مسیر پنهان /admin/login با توکن JWT (localStorage) و
  AdminContext شامل isEditMode و وضعیت ذخیره (همگام/در حال ذخیره/خطا)
- AdminBar شناور پایین صفحه (فقط برای کاربر واردشده): کلید حالت ویرایش،
  وضعیت ذخیره، خروج — حالت ویرایش در sessionStorage می‌ماند
- InlineEdit: در حالت عادی دقیقاً همان HTML قبلی (بدون تغییر چیدمان)؛
  در حالت ویرایش کادرخط‌چین + contentEditable با ذخیره خودکار در blur
  (Enter ذخیره، Esc لغو) — وایرایش‌شده روی همه متن‌های سایت: هیرو،
  تیتر بخش‌ها، هیرو صفحات، داستان، فرم تماس، خبرنامه، فوتر، منو،
  برچسب‌های وضعیت پروژه و...
- کشوی عمومی EntityDrawer با پیکربندی متمرکز برای ۱۴ مجموعه (خدمات،
  پروژه‌ها، مقالات، نظرات، سوالات، تیم، تایم‌لاین، آمار، چرا آرامش،
  مدل‌های سرمایه‌گذاری، مراحل کار، دفاتر، گالری، منو): ویرایش چندفیلدی،
  افزودن، حذف و جابه‌جایی ترتیب (▲▼) با ذخیره خودکار هر فیلد
- دکمه‌های شناور ویرایش/حذف/ترتیب فقط در حالت ویرایش روی آیتم‌ها
- کشوهای یگانه: برند و لوگو، تنظیمات هیرو، فرم تماس، خبرنامه، فوتر،
  قبل/بعد و نقل‌قول داستان — آپلود تصویر به MinIO از همان‌جا
- به‌روزرسانی خوش‌بینانه SiteContext (updateSite) پس از هر PATCH؛
  مسیرها در حالت ویرایش کلیک نمی‌شوند؛ breadcrumb محافظ beforeunload

frontend/src/admin/AdminBar.tsx

@@ -0,0 +1,64 @@
+import { useAdmin } from './AdminContext'
+
+const STATUS_TEXT: Record<string, string> = {
+  idle: 'همگام‌سازی شد',
+  saving: 'در حال ذخیره…',
+  error: 'خطا در ذخیره',
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  idle: 'bg-emerald-400',
+  saving: 'bg-copper animate-pulse',
+  error: 'bg-red-400',
+}
+
+/** نوار شناور ادمین — فقط برای کاربر واردشده رندر می‌شود */
+export function AdminBar() {
+  const { isEditMode, toggleEditMode, saveStatus, logout } = useAdmin()
+
+  return (
+    <div
+      dir="rtl"
+      className="fixed bottom-4 right-1/2 z-[90] flex translate-x-1/2 items-center gap-5 border border-ivory/15 bg-ink/95 py-2.5 pl-6 pr-5 shadow-2xl backdrop-blur-md"
+    >
+      <span className="flex items-center gap-2 text-xs font-bold text-copper">
+        <span className="flex h-2 w-2 rounded-full bg-copper" />
+        حالت مدیریت
+      </span>
+
+      <button
+        type="button"
+        role="switch"
+        aria-checked={isEditMode}
+        onClick={toggleEditMode}
+        className="group flex items-center gap-3 text-sm font-light text-ivory/80"
+      >
+        <span
+          className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors duration-200 ${
+            isEditMode ? 'border-copper bg-copper/30' : 'border-ivory/25 bg-char'
+          }`}
+        >
+          <span
+            className={`absolute h-4 w-4 rounded-full transition-all duration-200 ${
+              isEditMode ? 'right-1 bg-copper' : 'right-6 bg-ivory/50'
+            }`}
+          />
+        </span>
+        {isEditMode ? 'حالت ویرایش فعال' : 'حالت ویرایش خاموش'}
+      </button>
+
+      <span className="flex items-center gap-2 border-r border-ivory/10 pr-5 text-xs font-light text-ivory/60">
+        <span className={`h-1.5 w-1.5 rounded-full ${STATUS_COLOR[saveStatus]}`} aria-hidden="true" />
+        {STATUS_TEXT[saveStatus]}
+      </span>
+
+      <button
+        type="button"
+        onClick={logout}
+        className="border border-ivory/20 px-3 py-1.5 text-xs font-light text-ivory/70 transition-colors duration-200 hover:border-copper hover:text-copper"
+      >
+        خروج
+      </button>
+    </div>
+  )
+}

frontend/src/admin/AdminContext.tsx

@@ -0,0 +1,157 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import Swal from 'sweetalert2'
+import type { SiteData } from '../api'
+import { useSiteData } from '../api'
+import { adminApi, getToken, HttpError, setToken } from './adminClient'
+
+export type SaveStatus = 'idle' | 'saving' | 'error'
+
+interface AdminContextValue {
+  isAuthenticated: boolean
+  isEditMode: boolean
+  toggleEditMode: () => void
+  login: (username: string, password: string) => Promise<void>
+  logout: () => void
+  saveStatus: SaveStatus
+  /** اجرای یک عملیات ذخیره — وضعیت نوار ادمین را به‌روز می‌کند و خطاها را با دکمه تلاش دوباره نشان می‌دهد */
+  runSave: (action: () => Promise<void>) => Promise<boolean>
+}
+
+const AdminContext = createContext<AdminContextValue | null>(null)
+
+export function useAdmin(): AdminContextValue {
+  const ctx = useContext(AdminContext)
+  if (!ctx) throw new Error('useAdmin باید داخل AdminProvider استفاده شود')
+  return ctx
+}
+
+function showSaveError(error: unknown): void {
+  const message =
+    error instanceof HttpError ? error.message : 'ارتباط با سرور برقرار نشد — اتصال اینترنت را بررسی کنید'
+  Swal.fire({
+    icon: 'error',
+    title: 'ذخیره نشد',
+    text: message,
+    background: '#1e1a16',
+    color: '#F5F3EF',
+    iconColor: '#d5874c',
+    confirmButtonText: 'باشه',
+    timer: 4000,
+    timerProgressBar: true,
+    buttonsStyling: false,
+    customClass: {
+      popup: 'font-pinar border border-ivory/10 rounded-none',
+      title: 'font-pinar font-bold text-lg text-ivory',
+      htmlContainer: 'font-pinar font-light text-sm text-ivory/70',
+      confirmButton: 'bg-copper text-char font-bold px-8 py-2.5',
+    },
+  })
+}
+
+export function AdminProvider({ children }: { children: ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(() => !!getToken())
+  const [isEditMode, setIsEditMode] = useState<boolean>(
+    () => sessionStorage.getItem('aramesh_edit_mode') === '1',
+  )
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
+  const { reload } = useSiteData()
+
+  const toggleEditMode = useCallback(() => {
+    setIsEditMode((v) => {
+      sessionStorage.setItem('aramesh_edit_mode', v ? '0' : '1')
+      return !v
+    })
+  }, [])
+
+  const login = useCallback(async (username: string, password: string) => {
+    await adminApi.login(username, password)
+    setIsAuthenticated(true)
+  }, [])
+
+  const logout = useCallback(() => {
+    setToken(null)
+    setIsAuthenticated(false)
+    setIsEditMode(false)
+    sessionStorage.removeItem('aramesh_edit_mode')
+  }, [])
+
+  const runSave = useCallback(
+    async (action: () => Promise<void>): Promise<boolean> => {
+      setSaveStatus('saving')
+      try {
+        await action()
+        setSaveStatus('idle')
+        return true
+      } catch (error) {
+        setSaveStatus('error')
+        showSaveError(error)
+        if (error instanceof HttpError && error.status === 401) {
+          logout()
+          reload()
+        }
+        return false
+      }
+    },
+    [logout, reload],
+  )
+
+  // در حالت ویرایش، کلیک روی لینک‌ها مسیریابی نمی‌کند تا ویرایش متن ممکن باشد
+  useEffect(() => {
+    if (!isEditMode) return
+    const onClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null
+      if (target?.closest('a')) e.preventDefault()
+    }
+    document.addEventListener('click', onClick, true)
+    return () => document.removeEventListener('click', onClick, true)
+  }, [isEditMode])
+
+  // در حین ذخیره‌سازی، از بسته‌شدن تصادفی صفحه جلوگیری می‌شود
+  useEffect(() => {
+    if (saveStatus !== 'saving') return
+    const guard = (e: BeforeUnloadEvent) => {
+      e.preventDefault()
+    }
+    window.addEventListener('beforeunload', guard)
+    return () => window.removeEventListener('beforeunload', guard)
+  }, [saveStatus])
+
+  const value = useMemo<AdminContextValue>(
+    () => ({
+      isAuthenticated,
+      isEditMode,
+      toggleEditMode,
+      login,
+      logout,
+      saveStatus,
+      runSave,
+    }),
+    [isAuthenticated, isEditMode, toggleEditMode, login, logout, saveStatus, runSave],
+  )
+
+  return <AdminContext.Provider value={value}>{children}</AdminContext.Provider>
+}
+
+/**
+ * پرکاربردترین کمک‌ساز ویرایش: یک فیلد واحد را PATCH می‌کند و پس از موفقیت
+ * همان تغییر را به‌صورت خوش‌بینانه در درخت داده سایت اعمال می‌کند.
+ */
+export function useFieldSaver() {
+  const { runSave } = useAdmin()
+  const { updateSite } = useSiteData()
+
+  return useCallback(
+    (
+      resource: string,
+      id: number,
+      changes: Record<string, unknown>,
+      apply: (data: SiteData) => void,
+    ): Promise<boolean> =>
+      runSave(async () => {
+        await adminApi.patch(resource, id, changes)
+        updateSite(apply)
+      }),
+    [runSave, updateSite],
+  )
+}

frontend/src/admin/AdminLoginPage.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { Navigate, useNavigate } from 'react-router-dom'
+import { useAdmin } from './AdminContext'
+
+/** صفحه ورود ادمین — مسیر پنهان /admin/login */
+export function AdminLoginPage() {
+  const { isAuthenticated, login } = useAdmin()
+  const navigate = useNavigate()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  if (isAuthenticated) return <Navigate to="/" replace />
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault()
+    if (submitting) return
+    setError('')
+    setSubmitting(true)
+    try {
+      await login(username.trim(), password)
+      navigate('/')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'ورود ناموفق بود')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <section className="flex min-h-screen flex-col items-center justify-center bg-ink px-6" dir="rtl">
+      <div className="w-full max-w-sm border border-ivory/10 bg-char p-10">
+        <h1 className="text-xl font-bold text-ivory">ورود مدیریت</h1>
+        <p className="mt-3 text-sm font-light leading-7 text-ivory/55">
+          برای فعال‌سازی حالت ویرایش زنده سایت وارد شوید.
+        </p>
+
+        <form onSubmit={submit} className="mt-8 grid gap-5" noValidate>
+          <div>
+            <label htmlFor="admin-username" className="block text-sm font-bold text-ivory/90">
+              نام کاربری
+            </label>
+            <input
+              id="admin-username"
+              type="text"
+              dir="ltr"
+              autoComplete="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="mt-2 w-full border border-ivory/20 bg-ink/50 px-4 py-3 text-sm text-ivory transition-colors duration-200 focus:border-copper focus:outline-none"
+            />
+          </div>
+          <div>
+            <label htmlFor="admin-password" className="block text-sm font-bold text-ivory/90">
+              رمز عبور
+            </label>
+            <input
+              id="admin-password"
+              type="password"
+              dir="ltr"
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="mt-2 w-full border border-ivory/20 bg-ink/50 px-4 py-3 text-sm text-ivory transition-colors duration-200 focus:border-copper focus:outline-none"
+            />
+          </div>
+
+          {error && (
+            <p className="border-r-2 border-red-400/70 pr-3 text-xs font-light leading-6 text-red-300">{error}</p>
+          )}
+
+          <button
+            type="submit"
+            disabled={submitting}
+            className="mt-2 bg-copper px-8 py-3 text-sm font-bold text-char transition-transform duration-200 hover:scale-[1.02] disabled:opacity-50"
+          >
+            {submitting ? 'در حال ورود…' : 'ورود'}
+          </button>
+        </form>
+      </div>
+    </section>
+  )
+}

frontend/src/admin/Editable.tsx

@@ -0,0 +1,208 @@
+import { useState } from 'react'
+import type { ReactNode } from 'react'
+import { ArrowDownIcon, ArrowUpIcon, PencilIcon, PlusIcon, Trash2Icon } from 'lucide-react'
+import Swal from 'sweetalert2'
+import { useSiteData } from '../api'
+import { useAdmin } from './AdminContext'
+import { adminApi } from './adminClient'
+import { ENTITIES } from './entities'
+import { EntityDrawer } from './EntityDrawer'
+
+type ItemWithId = Record<string, unknown> & { id: number }
+
+function useEntityList(resource: string): ItemWithId[] {
+  const { data } = useSiteData()
+  const config = ENTITIES[resource]
+  if (!config) throw new Error(`منبع ناشناخته: ${resource}`)
+  return (data?.[config.dataKey as keyof NonNullable<typeof data>] ?? []) as ItemWithId[]
+}
+
+function PillButton({
+  onClick,
+  label,
+  children,
+  danger = false,
+}: {
+  onClick: () => void
+  label: string
+  children: ReactNode
+  danger?: boolean
+}) {
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        onClick()
+      }}
+      className={`flex h-7 w-7 items-center justify-center border backdrop-blur-sm transition-colors duration-150 ${
+        danger
+          ? 'border-red-400/40 bg-ink/90 text-red-300 hover:bg-red-500/20'
+          : 'border-copper/50 bg-ink/90 text-copper hover:bg-copper hover:text-char'
+      }`}
+    >
+      {children}
+    </button>
+  )
+}
+
+/**
+ * بسته‌بندی آیتم‌های مجموعه‌ها — فقط در حالت ویرایش ادمین، دکمه‌های شناور
+ * (ویرایش / بالا / پایین / حذف) روی آیتم نشان می‌دهد؛ در حالت عادی خروجی یکسان است.
+ */
+export function EditableItem({
+  resource,
+  item,
+  children,
+  className = '',
+}: {
+  resource: string
+  item: ItemWithId
+  children: ReactNode
+  className?: string
+}) {
+  const { isAuthenticated, isEditMode, runSave } = useAdmin()
+  const { reload } = useSiteData()
+  const config = ENTITIES[resource]
+  const list = useEntityList(resource)
+  const [drawerOpen, setDrawerOpen] = useState(false)
+
+  if (!config) return <>{children}</>
+  if (!isAuthenticated || !isEditMode) return <>{children}</>
+
+  const index = list.findIndex((x) => x.id === item.id)
+
+  const move = (delta: number) => {
+    const target = index + delta
+    if (target < 0 || target >= list.length) return
+    const ids = list.map((x) => x.id)
+    ;[ids[index], ids[target]] = [ids[target], ids[index]]
+    void runSave(async () => {
+      await adminApi.reorder(config.resource, ids)
+      reload()
+    })
+  }
+
+  const remove = async () => {
+    const result = await Swal.fire({
+      icon: 'warning',
+      title: 'حذف رکورد',
+      text: `«${String(item[config.titleKey] ?? '')}» برای همیشه حذف شود؟`,
+      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
+    void runSave(async () => {
+      await adminApi.remove(config.resource, item.id)
+      reload()
+    })
+  }
+
+  return (
+    <div className={`relative group/editable ${className}`}>
+      <div className="absolute left-2 top-2 z-30 flex flex-col gap-1.5 opacity-0 transition-opacity duration-150 group-hover/editable:opacity-100">
+        <PillButton onClick={() => setDrawerOpen(true)} label="ویرایش">
+          <PencilIcon className="h-3.5 w-3.5" />
+        </PillButton>
+        {index > 0 && (
+          <PillButton onClick={() => move(-1)} label="انتقال به قبل">
+            <ArrowUpIcon className="h-3.5 w-3.5" />
+          </PillButton>
+        )}
+        {index < list.length - 1 && (
+          <PillButton onClick={() => move(1)} label="انتقال به بعد">
+            <ArrowDownIcon className="h-3.5 w-3.5" />
+          </PillButton>
+        )}
+        <PillButton onClick={remove} label="حذف" danger>
+          <Trash2Icon className="h-3.5 w-3.5" />
+        </PillButton>
+      </div>
+
+      {children}
+
+      {drawerOpen && (
+        <EntityDrawer config={config} item={item} deletable onClose={() => setDrawerOpen(false)} />
+      )}
+    </div>
+  )
+}
+
+/** دکمه افزودن آیتم جدید به یک مجموعه — فقط در حالت ویرایش */
+export function AddItemButton({ resource }: { resource: string }) {
+  const { isAuthenticated, isEditMode, runSave } = useAdmin()
+  const { reload } = useSiteData()
+  const config = ENTITIES[resource]
+  const [newItem, setNewItem] = useState<ItemWithId | null>(null)
+
+  if (!config || !isAuthenticated || !isEditMode) return null
+
+  const create = () => {
+    void runSave(async () => {
+      const created = await adminApi.create<ItemWithId>(config.resource, config.defaults)
+      reload()
+      setNewItem(created)
+    })
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={create}
+        className="flex min-h-40 w-full flex-col items-center justify-center gap-2 border border-dashed border-copper/40 bg-copper/5 text-copper transition-colors duration-200 hover:bg-copper/10"
+      >
+        <PlusIcon className="h-6 w-6" />
+        <span className="text-sm font-light">افزودن {config.title}</span>
+      </button>
+
+      {newItem && (
+        <EntityDrawer config={config} item={newItem} deletable onClose={() => setNewItem(null)} />
+      )}
+    </>
+  )
+}
+
+/** دکمه شناور بازکردن کشوی یک رکورد یگانه (برند، هیرو، فرم تماس و...) — فقط در حالت ویرایش */
+export function SingletonPill({
+  resource,
+  label,
+  className = '',
+}: {
+  resource: string
+  label: string
+  className?: string
+}) {
+  const { isAuthenticated, isEditMode } = useAdmin()
+  const config = ENTITIES[resource]
+  const { data } = useSiteData()
+  const [drawerOpen, setDrawerOpen] = useState(false)
+
+  if (!config || !isAuthenticated || !isEditMode) return null
+  const item = data?.[config.dataKey as keyof NonNullable<typeof data>] as ItemWithId | undefined
+  if (!item) return null
+
+  return (
+    <>
+      <span className={className}>
+        <PillButton onClick={() => setDrawerOpen(true)} label={label}>
+          <PencilIcon className="h-3.5 w-3.5" />
+        </PillButton>
+      </span>
+      {drawerOpen && <EntityDrawer config={config} item={item} onClose={() => setDrawerOpen(false)} />}
+    </>
+  )
+}

frontend/src/admin/EntityDrawer.tsx

@@ -0,0 +1,250 @@
+import { useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { PlusIcon, Trash2Icon, XIcon } from 'lucide-react'
+import Swal from 'sweetalert2'
+import { useSiteData } from '../api'
+import { useAdmin, useFieldSaver } from './AdminContext'
+import { adminApi } from './adminClient'
+import type { EntityConfig, FieldConfig } from './entities'
+import { ImageField } from '../components/admin/ImageField'
+
+type EntityDrawerProps = {
+  config: EntityConfig
+  /** رکورد یگانه یا آیتم مجموعه — باید id داشته باشد */
+  item: Record<string, unknown> & { id: number }
+  onClose: () => void
+  /** فقط برای مجموعه‌ها: حذف آیتم */
+  deletable?: boolean
+}
+
+export function EntityDrawer({ config, item, onClose, deletable = false }: EntityDrawerProps) {
+  const save = useFieldSaver()
+  const { runSave } = useAdmin()
+  const { reload } = useSiteData()
+  const [deleting, setDeleting] = useState(false)
+
+  const saveField = (name: string, value: unknown) =>
+    save(config.resource, item.id, { [name]: value }, (d) => {
+      const target = d[config.dataKey as keyof typeof d] as unknown
+      const node =
+        config.kind === 'singleton'
+          ? (target as Record<string, unknown>)
+          : (target as { id: number }[]).find((x) => x.id === item.id)
+      if (node) (node as Record<string, unknown>)[name] = value
+    })
+
+  const remove = async () => {
+    const result = await Swal.fire({
+      icon: 'warning',
+      title: 'حذف رکورد',
+      text: `«${String(item[config.titleKey] ?? '')}» برای همیشه حذف شود؟`,
+      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
+    setDeleting(true)
+    await runSave(async () => {
+      await adminApi.remove(config.resource, item.id)
+      reload()
+      onClose()
+    })
+    setDeleting(false)
+  }
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        key="backdrop"
+        className="fixed inset-0 z-[95] bg-char/70 backdrop-blur-sm"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <motion.aside
+        key="drawer"
+        dir="rtl"
+        role="dialog"
+        aria-label={`ویرایش ${config.title}`}
+        className="fixed inset-y-0 left-0 z-[96] flex w-full max-w-md flex-col border-e border-ivory/10 bg-ink shadow-2xl"
+        initial={{ x: '-100%' }}
+        animate={{ x: 0 }}
+        exit={{ x: '-100%' }}
+        transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}
+      >
+        <header className="flex items-center justify-between border-b border-ivory/10 px-6 py-4">
+          <div>
+            <p className="text-xs font-light text-copper">
+              {config.kind === 'singleton' ? 'تنظیمات بخش' : 'ویرایش رکورد'}
+            </p>
+            <h2 className="mt-1 text-lg font-bold text-ivory">{config.title}</h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="بستن"
+            className="flex h-9 w-9 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors hover:border-copper hover:text-copper"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </header>
+
+        <div className="flex-1 overflow-y-auto px-6 py-6">
+          <div className="grid gap-6">
+            {config.fields.map((field) => (
+              <FieldControl
+                key={field.name}
+                field={field}
+                value={item[field.name]}
+                onSave={(value) => saveField(field.name, value)}
+              />
+            ))}
+          </div>
+        </div>
+
+        {deletable && (
+          <footer className="border-t border-ivory/10 px-6 py-4">
+            <button
+              type="button"
+              onClick={remove}
+              disabled={deleting}
+              className="flex items-center gap-2 border border-red-400/40 px-4 py-2 text-xs font-light text-red-300 transition-colors hover:bg-red-500/10 disabled:opacity-50"
+            >
+              <Trash2Icon className="h-3.5 w-3.5" />
+              حذف این رکورد
+            </button>
+          </footer>
+        )}
+      </motion.aside>
+    </AnimatePresence>
+  )
+}
+
+function FieldControl({
+  field,
+  value,
+  onSave,
+}: {
+  field: FieldConfig
+  value: unknown
+  onSave: (value: unknown) => Promise<boolean>
+}) {
+  const [text, setText] = useState<string>(String(value ?? ''))
+
+  const commitText = async () => {
+    const next = field.type === 'number' ? Number(text) || 0 : text
+    if (String(value ?? '') === String(next)) return
+    await onSave(next)
+  }
+
+  if (field.type === 'image') {
+    return <ImageField label={field.label} value={String(value ?? '')} onSave={(url) => onSave(url)} />
+  }
+
+  if (field.type === 'list') {
+    return <ListField field={field} value={value} onSave={onSave} />
+  }
+
+  if (field.type === 'textarea') {
+    return (
+      <div>
+        <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+        <textarea
+          dir="auto"
+          rows={4}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onBlur={commitText}
+          className="mt-2 w-full resize-y border border-ivory/15 bg-char px-3 py-2 text-sm font-light leading-8 text-ivory focus:border-copper focus:outline-none"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+      {field.hint && <p className="mt-1 text-[10px] font-light text-ivory/40">{field.hint}</p>}
+      <input
+        dir={field.type === 'number' ? 'ltr' : 'auto'}
+        type={field.type === 'number' ? 'number' : 'text'}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onBlur={commitText}
+        className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
+      />
+    </div>
+  )
+}
+
+/** ویرایش آرایه خطی (پاراگراف‌ها، گالری، نکات) — هر تغییر ذخیره می‌شود */
+function ListField({
+  field,
+  value,
+  onSave,
+}: {
+  field: FieldConfig
+  value: unknown
+  onSave: (value: unknown) => Promise<boolean>
+}) {
+  const [lines, setLines] = useState<string[]>(Array.isArray(value) ? (value as string[]) : [])
+
+  const update = (next: string[]) => {
+    setLines(next)
+    void onSave(next)
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+      {field.hint && <p className="mt-1 text-[10px] font-light text-ivory/40">{field.hint}</p>}
+      <div className="mt-2 grid gap-2">
+        {lines.map((line, i) => (
+          <div key={i} className="flex items-start gap-2">
+            <textarea
+              dir="auto"
+              rows={line.length > 60 ? 3 : 1}
+              value={line}
+              onChange={(e) => {
+                const next = [...lines]
+                next[i] = e.target.value
+                setLines(next)
+              }}
+              onBlur={() => {
+                if (line !== (value as string[])[i]) update(lines)
+              }}
+              className="flex-1 resize-y border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
+            />
+            <button
+              type="button"
+              aria-label="حذف خط"
+              onClick={() => update(lines.filter((_, j) => j !== i))}
+              className="mt-1 text-ivory/40 transition-colors hover:text-red-300"
+            >
+              <XIcon className="h-4 w-4" />
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={() => update([...lines, ''])}
+          className="flex w-fit items-center gap-1.5 border border-dashed border-ivory/25 px-3 py-1.5 text-xs font-light text-ivory/60 transition-colors hover:border-copper hover:text-copper"
+        >
+          <PlusIcon className="h-3 w-3" />
+          افزودن خط
+        </button>
+      </div>
+    </div>
+  )
+}

frontend/src/admin/adminClient.ts

@@ -0,0 +1,86 @@
+// لایه تماس ادمین — همه درخواست‌ها با توکن Bearer و مدیریت خطای یکسان
+import { API_URL } from '../config'
+
+const TOKEN_KEY = 'aramesh_admin_token'
+
+export const getToken = (): string | null => localStorage.getItem(TOKEN_KEY)
+export const setToken = (token: string | null): void => {
+  if (token) localStorage.setItem(TOKEN_KEY, token)
+  else localStorage.removeItem(TOKEN_KEY)
+}
+
+export class HttpError extends Error {
+  constructor(
+    public status: number,
+    message: string,
+  ) {
+    super(message)
+  }
+}
+
+async function authFetch<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const token = getToken()
+  const isFormData = options.body instanceof FormData
+  const res = await fetch(`${API_URL}${path}`, {
+    ...options,
+    headers: {
+      ...(options.headers ?? {}),
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...(options.body && !isFormData ? { 'Content-Type': 'application/json' } : {}),
+    },
+  })
+
+  if (res.status === 401) {
+    setToken(null)
+    throw new HttpError(401, 'نشست شما منقضی شده — دوباره وارد شوید')
+  }
+  if (!res.ok) {
+    const data = (await res.json().catch(() => null)) as { detail?: unknown } | null
+    const detail =
+      typeof data?.detail === 'string'
+        ? data.detail
+        : res.status === 409
+          ? 'رکوردی با این مقدار تکراری وجود دارد'
+          : 'خطا در ذخیره‌سازی — دوباره تلاش کنید'
+    throw new HttpError(res.status, detail)
+  }
+  return res.status === 204 ? (null as T) : ((await res.json()) as T)
+}
+
+export const adminApi = {
+  login: async (username: string, password: string): Promise<string> => {
+    const res = await fetch(`${API_URL}/api/auth/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username, password }),
+    })
+    if (!res.ok) {
+      const data = (await res.json().catch(() => null)) as { detail?: unknown } | null
+      throw new HttpError(
+        res.status,
+        typeof data?.detail === 'string' ? data.detail : 'ورود ناموفق بود',
+      )
+    }
+    const data = (await res.json()) as { access_token: string }
+    setToken(data.access_token)
+    return data.access_token
+  },
+
+  patch: <T = unknown>(resource: string, id: number, partial: Record<string, unknown>) =>
+    authFetch<T>(`/api/admin/${resource}/${id}`, { method: 'PATCH', body: JSON.stringify(partial) }),
+
+  create: <T = unknown>(resource: string, data: Record<string, unknown>) =>
+    authFetch<T>(`/api/admin/${resource}`, { method: 'POST', body: JSON.stringify(data) }),
+
+  remove: (resource: string, id: number) =>
+    authFetch<null>(`/api/admin/${resource}/${id}`, { method: 'DELETE' }),
+
+  reorder: <T = unknown>(resource: string, ids: number[]) =>
+    authFetch<T[]>(`/api/admin/${resource}/reorder`, { method: 'POST', body: JSON.stringify({ ids }) }),
+
+  upload: async (file: File): Promise<{ url: string; key: string }> => {
+    const fd = new FormData()
+    fd.append('file', file)
+    return authFetch('/api/admin/upload', { method: 'POST', body: fd })
+  },
+}

frontend/src/admin/entities.ts

@@ -0,0 +1,187 @@
+import type { SiteData } from '../api'
+
+export type FieldType = 'text' | 'textarea' | 'number' | 'image' | 'list'
+
+export type FieldConfig = {
+  name: string
+  label: string
+  type: FieldType
+  hint?: string
+}
+
+export type EntityConfig = {
+  /** مسیر منبع در پنل مدیریت، مثل services یا why-us */
+  resource: string
+  /** کلید همان منبع در پاسخ GET /api/site */
+  dataKey: string
+  title: string
+  /** مجموعه یا رکورد یگانه */
+  kind: 'collection' | 'singleton'
+  /** فیلدی که عنوان آیتم را نشان می‌دهد */
+  titleKey: string
+  fields: FieldConfig[]
+  /** مقادیر پیش‌فرض برای «افزودن» */
+  defaults: Record<string, unknown>
+}
+
+const F = (name: string, label: string, type: FieldType = 'text', hint?: string): FieldConfig => ({
+  name,
+  label,
+  type,
+  hint,
+})
+
+/** پیکربندی همه منابع قابل ویرایش — هم مجموعه‌ها و هم رکوردهای یگانه */
+export const ENTITIES: Record<string, EntityConfig> = {
+  services: {
+    resource: 'services', dataKey: 'services', title: 'خدمات', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('desc', 'توضیح', 'textarea'), F('icon', 'آیکون', 'text', 'draft / tower / mall / villa / renew / manage / invest / landscape')],
+    defaults: { title: 'خدمت جدید', desc: '', icon: 'draft' },
+  },
+  projects: {
+    resource: 'projects', dataKey: 'projects', title: 'پروژه‌ها', kind: 'collection',
+    titleKey: 'title',
+    fields: [
+      F('title', 'عنوان'), F('slug', 'نشانی (slug)'), F('location', 'موقعیت'),
+      F('year', 'سال'), F('status', 'وضعیت', 'text', 'done یا progress'),
+      F('image', 'تصویر شاخص', 'image'), F('gallery', 'گالری (هر خط یک URL)', 'list'),
+      F('area', 'زیربنا'), F('floors', 'طبقات'), F('units', 'واحدها'), F('client', 'کارفرما'),
+      F('summary', 'خلاصه', 'textarea'), F('body', 'متن پروژه (هر پاراگراف یک خط)', 'list'),
+    ],
+    defaults: { title: 'پروژه جدید', slug: `project-${Date.now()}`, location: '', year: '', status: 'done', image: '', gallery: [], area: '', floors: '', units: '', client: '', summary: '', body: [] },
+  },
+  articles: {
+    resource: 'articles', dataKey: 'articles', title: 'مقالات', kind: 'collection',
+    titleKey: 'title',
+    fields: [
+      F('title', 'عنوان'), F('slug', 'نشانی (slug)'), F('date', 'تاریخ'), F('category', 'دسته'),
+      F('image', 'تصویر شاخص', 'image'), F('read', 'زمان مطالعه'), F('excerpt', 'چکیده', 'textarea'),
+      F('body', 'متن مقاله (هر پاراگراف یک خط)', 'list'),
+    ],
+    defaults: { title: 'مقاله جدید', slug: `article-${Date.now()}`, date: '', category: '', image: '', read: '', excerpt: '', body: [] },
+  },
+  testimonials: {
+    resource: 'testimonials', dataKey: 'testimonials', title: 'نظرات مشتریان', kind: 'collection',
+    titleKey: 'name',
+    fields: [F('name', 'نام'), F('role', 'سمت'), F('quote', 'متن نظر', 'textarea')],
+    defaults: { name: 'نظر جدید', role: '', quote: '' },
+  },
+  faqs: {
+    resource: 'faqs', dataKey: 'faqs', title: 'سوالات متداول', kind: 'collection',
+    titleKey: 'question',
+    fields: [F('question', 'سوال'), F('answer', 'پاسخ', 'textarea')],
+    defaults: { question: 'سوال جدید', answer: '' },
+  },
+  team: {
+    resource: 'team', dataKey: 'team', title: 'تیم', kind: 'collection',
+    titleKey: 'name',
+    fields: [F('name', 'نام'), F('role', 'سمت'), F('bio', 'معرفی', 'textarea')],
+    defaults: { name: 'عضو جدید', role: '', bio: '' },
+  },
+  timeline: {
+    resource: 'timeline', dataKey: 'timeline', title: 'تایم‌لاین', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('year', 'سال'), F('title', 'عنوان'), F('desc', 'توضیح', 'textarea'), F('image', 'تصویر', 'image')],
+    defaults: { year: '۱۴۰۰', title: 'رویداد جدید', desc: '', image: '' },
+  },
+  stats: {
+    resource: 'stats', dataKey: 'stats', title: 'آمار', kind: 'collection',
+    titleKey: 'label',
+    fields: [F('label', 'برچسب'), F('value', 'عدد', 'number'), F('suffix', 'پسوند (مثل + یا هزار)')],
+    defaults: { label: 'شاخص جدید', value: 0, suffix: '' },
+  },
+  why_us: {
+    resource: 'why-us', dataKey: 'why_us', title: 'چرا آرامش', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('desc', 'توضیح', 'textarea')],
+    defaults: { title: 'مورد جدید', desc: '' },
+  },
+  investment_models: {
+    resource: 'investment-models', dataKey: 'investment_models', title: 'مدل‌های سرمایه‌گذاری', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('desc', 'توضیح', 'textarea'), F('points', 'نکات (هر خط یک مورد)', 'list')],
+    defaults: { title: 'مدل جدید', desc: '', points: [] },
+  },
+  process_steps: {
+    resource: 'process-steps', dataKey: 'process_steps', title: 'مراحل فرآیند کار', kind: 'collection',
+    titleKey: 'title',
+    fields: [F('step', 'شماره مرحله'), F('title', 'عنوان'), F('desc', 'توضیح', 'textarea')],
+    defaults: { step: '۰۱', title: 'مرحله جدید', desc: '' },
+  },
+  offices: {
+    resource: 'offices', dataKey: 'offices', title: 'دفاتر', kind: 'collection',
+    titleKey: 'city',
+    fields: [F('city', 'شهر'), F('address', 'نشانی', 'textarea'), F('hours', 'ساعات کاری')],
+    defaults: { city: 'شهر جدید', address: '', hours: '' },
+  },
+  gallery: {
+    resource: 'gallery', dataKey: 'gallery', title: 'گالری تصاویر', kind: 'collection',
+    titleKey: 'alt',
+    fields: [F('src', 'تصویر', 'image'), F('alt', 'متن جایگزین')],
+    defaults: { src: '', alt: 'تصویر گالری' },
+  },
+  nav: {
+    resource: 'nav', dataKey: 'nav', title: 'منوی ناوبری', kind: 'collection',
+    titleKey: 'label',
+    fields: [F('label', 'عنوان'), F('href', 'مسیر (مثل /about)')],
+    defaults: { label: 'آیتم جدید', href: '/' },
+  },
+
+  // ---------- رکوردهای یگانه ----------
+  brand: {
+    resource: 'brand', dataKey: 'brand', title: 'برند و تماس', kind: 'singleton',
+    titleKey: 'name',
+    fields: [F('name', 'نام برند'), F('logo', 'لوگو', 'image'), F('hero', 'تصویر هیرو', 'image'), F('contact_bg', 'پس‌زمینه بخش تماس', 'image'), F('phone', 'تلفن نمایشی'), F('phone_href', 'لینک تلفن'), F('email', 'ایمیل'), F('address', 'نشانی', 'textarea')],
+    defaults: {},
+  },
+  hero: {
+    resource: 'hero', dataKey: 'hero', title: 'تنظیمات هیرو', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('title_highlight', 'واژه مسیِ تیتر'), F('badge_value', 'عدد کارت کنار'), F('badge_label', 'متن کارت کنار', 'textarea'), F('cta_primary_label', 'متن دکمه اصلی'), F('cta_primary_href', 'لینک دکمه اصلی'), F('cta_secondary_label', 'متن دکمه دوم'), F('cta_secondary_href', 'لینک دکمه دوم'), F('scroll_label', 'متن اسکرول'), F('kicker', 'متن بالای تیتر', 'textarea')],
+    defaults: {},
+  },
+  story: {
+    resource: 'story', dataKey: 'story', title: 'تصاویر بخش درباره ما', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('quote', 'نقل‌قول مدیرعامل', 'textarea'), F('quote_author', 'استناد نقل‌قول'), F('stat1_value', 'آمار ۱ — عدد'), F('stat1_label', 'آمار ۱ — برچسب'), F('stat2_value', 'آمار ۲ — عدد'), F('stat2_label', 'آمار ۲ — برچسب'), F('link_label', 'متن دکمه'), F('link_href', 'لینک دکمه')],
+    defaults: {},
+  },
+  before_after: {
+    resource: 'before-after', dataKey: 'before_after', title: 'بخش قبل/بعد', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('lead', 'توضیح', 'textarea'), F('before', 'تصویر قبل', 'image'), F('after', 'تصویر بعد', 'image'), F('before_label', 'برچسب قبل'), F('after_label', 'برچسب بعد')],
+    defaults: {},
+  },
+  contact_section: {
+    resource: 'contact-section', dataKey: 'contact_section', title: 'فرم تماس', kind: 'singleton',
+    titleKey: 'title',
+    fields: [
+      F('label', 'برچسب بالا'), F('title', 'عنوان'), F('lead', 'توضیح', 'textarea'),
+      F('address_label', 'برچسب نشانی'), F('phone_label', 'برچسب تلفن'), F('email_label', 'برچسب ایمیل'),
+      F('name_label', 'برچسب نام'), F('name_placeholder', 'جای‌نگهدار نام'),
+      F('phone_field_label', 'برچسب تلفن (فرم)'), F('phone_placeholder', 'جای‌نگهدار تلفن'),
+      F('note_label', 'برچسب توضیحات'), F('note_optional_label', 'برچسب اختیاری'), F('note_placeholder', 'جای‌نگهدار توضیحات'),
+      F('submit_label', 'متن دکمه ارسال'), F('sending_label', 'متن در حال ارسال'),
+      F('success_title', 'عنوان پیام موفقیت'), F('success_text', 'متن پیام موفقیت', 'textarea'), F('success_button_label', 'دکمه پیام موفقیت'),
+    ],
+    defaults: {},
+  },
+  newsletter: {
+    resource: 'newsletter', dataKey: 'newsletter', title: 'خبرنامه', kind: 'singleton',
+    titleKey: 'title',
+    fields: [F('title', 'عنوان'), F('lead', 'توضیح', 'textarea'), F('placeholder', 'جای‌نگهدار ایمیل'), F('button_label', 'متن دکمه'), F('sending_label', 'متن در حال ارسال'), F('success_text', 'پیام موفقیت')],
+    defaults: {},
+  },
+  footer: {
+    resource: 'footer', dataKey: 'footer', title: 'فوتر', kind: 'singleton',
+    titleKey: 'pages_heading',
+    fields: [F('about_text', 'متن معرفی', 'textarea'), F('pages_heading', 'تیتر ستون صفحات'), F('services_heading', 'تیتر ستون خدمات'), F('contact_heading', 'تیتر ستون تماس'), F('copyright', 'متن کپی‌رایت'), F('tagline', 'شعار پایین')],
+    defaults: {},
+  },
+}
+
+/** دسترسی به آرایه/شیء منبع از درخت داده سایت */
+export function getEntityData(data: SiteData, config: EntityConfig): Record<string, unknown> & { id: number }[] | (Record<string, unknown> & { id: number }) {
+  return data[config.dataKey as keyof SiteData] as never
+}