قالب صفحهٔ ورود (AuthPage)

app/layout.tsx              ← html، body و Toaster؛ بی قاب
app/(app)/layout.tsx        ← <Frame>{children}</Frame>
app/(app)/mentions/page.tsx
app/(auth)/login/page.tsx   ← metadata و <Login />
app/(auth)/login/login.tsx  ← 'use client': <LoginScreen onSignedIn={() => router.push('/')} />
app/not-found.tsx           ← <Frame><UtilityPage kind="404" …/></Frame> (بیرون از هر گروه، پس قاب را خودش دارد)

'use client'
import * as React from 'react'
import Link from 'next/link'
import { useForm } from 'react-hook-form'
import { Button, Input } from '@partodata/ui'
import { Form, FormField } from '@partodata/ui/form'
import { AuthPage, FormRow } from '@partodata/ui/templates'

type SignIn = { email: string; password: string }

async function signIn(values: SignIn): Promise<void> {
  const response = await fetch('/api/session', { method: 'POST', body: JSON.stringify(values) })
  if (!response.ok) throw new Error(`session: ${response.status}`)
}

export function LoginScreen({ onSignedIn }: { onSignedIn: () => void }) {
  const form = useForm<SignIn>({ defaultValues: { email: '', password: '' } })
  const submit = form.handleSubmit(async (values) => {
    try {
      await signIn(values)
      onSignedIn()
    } catch {
      form.setError('root', { message: 'ایمیل یا گذرواژه درست نیست' })
    }
  })
  return (
    <Form {...form}>
      <AuthPage
        product={{ name: 'پایش منشن' }}
        title="ورود به حساب"
        description="با ایمیل سازمانی خود وارد شوید."
        onSubmit={submit}
        submitLabel="ورود"
        submitting={form.formState.isSubmitting}
        error={form.formState.errors.root?.message}
        links={
          <Button variant="link" asChild>
            <Link href="/reset">فراموشی گذرواژه</Link>
          </Button>
        }
      >
        <FormField
          control={form.control}
          name="email"
          rules={{ required: 'ایمیل را وارد کنید' }}
          render={({ field, fieldState }) => (
            <FormRow label="ایمیل" required error={fieldState.error?.message}>
              <Input kind="email" {...field} />
            </FormRow>
          )}
        />
        <FormField
          control={form.control}
          name="password"
          rules={{ required: 'گذرواژه را وارد کنید' }}
          render={({ field, fieldState }) => (
            <FormRow label="گذرواژه" required error={fieldState.error?.message}>
              <Input kind="password" {...field} />
            </FormRow>
          )}
        />
      </AuthPage>
    </Form>
  )
}