@mashka818/exam-de-template 1.0.0

package/exam-guides/commented-code/client/src/pages/LandingPage.jsx

@@ -0,0 +1,131 @@
+/**
+ * =============================================================================
+ * ЛЕНДИНГ (/) — главная для гостей
+ * =============================================================================
+ * Слайдер, о клининге, услуги, футер с фото-заглушками.
+ * Картинки: config/images.js → public/images/
+ * БАНКЕТАМ.НЕТ: тексты про банкеты; perks и «Наши услуги» = 4 помещения;
+ * LandingLayout brandName → Банкетам.Нет; слайдер 4×3 сек (HeroSlider).
+ *
+ * СТРУКТУРА: LandingLayout → HeroSlider → секции → SiteFooter
+ * perks[] — карточки преимуществ (массив строк, менять под тему)
+ * DEFAULT_SERVICE_NAMES — подписи на лендинге (дубль seed.sql; синхронизировать)
+ * cabinetPath — куда ведёт CTA для вошедшего пользователя
+ *
+ * GUIDE_PAGES.md §5 | config/images.js (aboutCleaning, homeHero…)
+ * =============================================================================
+ */
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext.jsx';
+import LandingLayout from '../components/landing/LandingLayout.jsx';
+import HeroSlider from '../components/landing/HeroSlider.jsx';
+import SiteFooter from '../components/landing/SiteFooter.jsx';
+import PageImage from '../components/PageImage.jsx';
+import { DEFAULT_SERVICE_NAMES } from '../constants/services.js';
+
+const perks = [
+  'Опытные клинеры и проверенные средства',
+  'Удобная подача заявки онлайн',
+  'Наличные или карта — как вам удобнее',
+  'Жилые и производственные помещения',
+];
+
+export default function LandingPage() {
+  const { user } = useAuth();
+  const cabinetPath = user?.role === 'admin' ? '/admin' : '/requests';
+
+  return (
+    <LandingLayout>
+      <HeroSlider />
+
+      <section className="mx-auto max-w-lg lg:max-w-5xl px-4 lg:px-8 py-10 lg:py-14">
+        <div className="lg:grid lg:grid-cols-2 lg:gap-10 lg:items-center animate-fade-up">
+          <PageImage
+            imageKey="aboutCleaning"
+            className="w-full h-48 lg:h-64 object-cover rounded-2xl shadow mb-6 lg:mb-0"
+          />
+          <div>
+            <h2 className="text-2xl font-bold text-teal-900 mb-3">О нашем клининге</h2>
+            <p className="text-slate-600 text-sm leading-relaxed mb-4">
+              «Мой Не Сам» — портал для заказа уборки жилых и производственных помещений.
+              Вы регистрируетесь, оформляете заявку с адресом и видом услуги, выбираете дату и
+              способ оплаты — мы берём задачу в работу.
+            </p>
+            <p className="text-slate-600 text-sm leading-relaxed">
+              Работаем аккуратно, с соблюдением сроков и прозрачными статусами заявки в личном
+              кабинете.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-teal-50 border-y border-teal-100 py-10 lg:py-14">
+        <div className="mx-auto max-w-lg lg:max-w-5xl px-4 lg:px-8">
+          <h2 className="text-xl font-bold text-teal-900 mb-6 text-center">Наши услуги</h2>
+          <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {DEFAULT_SERVICE_NAMES.map((name) => (
+              <li
+                key={name}
+                className="bg-white rounded-xl p-4 shadow-sm border border-teal-100 text-center text-sm font-medium text-slate-700 hover:shadow-md transition"
+              >
+                {name}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-lg lg:max-w-5xl px-4 lg:px-8 py-10">
+        <h2 className="text-xl font-bold text-slate-800 mb-4">Почему выбирают нас</h2>
+        <ul className="space-y-3">
+          {perks.map((p) => (
+            <li key={p} className="flex gap-3 text-sm text-slate-600">
+              <span className="text-teal-600 font-bold">✓</span>
+              {p}
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section className="mx-auto max-w-lg lg:max-w-5xl px-4 lg:px-8 pb-12">
+        <div className="rounded-2xl bg-gradient-to-br from-teal-600 to-cyan-700 p-8 text-center text-white shadow-lg animate-fade-up">
+          <h2 className="text-xl font-bold mb-2">
+            {user ? 'Добро пожаловать!' : 'Готовы заказать уборку?'}
+          </h2>
+          <p className="text-teal-100 text-sm mb-6">
+            {user
+              ? 'Перейдите в кабинет, чтобы посмотреть заявки или оформить новую.'
+              : 'Зарегистрируйтесь за минуту и оформите первую заявку.'}
+          </p>
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            {user ? (
+              <Link
+                to={cabinetPath}
+                className="rounded-xl bg-white text-teal-800 py-3 px-6 font-semibold hover:bg-teal-50 transition"
+              >
+                {user.role === 'admin' ? 'Панель администратора' : 'Мои заявки'}
+              </Link>
+            ) : (
+              <>
+                <Link
+                  to="/register"
+                  className="rounded-xl bg-white text-teal-800 py-3 px-6 font-semibold hover:bg-teal-50 transition"
+                >
+                  Зарегистрироваться
+                </Link>
+                <Link
+                  to="/login"
+                  className="rounded-xl border border-white/50 py-3 px-6 font-medium hover:bg-white/10 transition"
+                >
+                  Уже есть аккаунт
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+      </section>
+
+      <SiteFooter />
+    </LandingLayout>
+  );
+}

package/exam-guides/commented-code/client/src/pages/LoginPage.jsx

@@ -0,0 +1,81 @@
+/**
+ * =============================================================================
+ * АВТОРИЗАЦИЯ (/login) — п.2 задания ДЭ
+ * =============================================================================
+ * ЗАМЕНИТЕ:
+ *   сообщения об ошибке — уже есть «Неверный логин или пароль»
+ *   adminka/password — заданы в server/db/init.js (не на этой странице)
+ *   картинку — login-banner в public/images/
+ * Отличительная черта: тёмная шапка (variant="login")
+ * БАНКЕТАМ.НЕТ (п.2): ссылка «Еще не зарегистрированы? Регистрация» (сейчас «Создать аккаунт»).
+ * БАНКЕТАМ.НЕТ: подсказка админа Admin26 / Demo20 внизу формы.
+ *
+ * ПОТОК: login({ login, password }) → JWT в localStorage
+ *        user.role === 'admin' → /admin, иначе → /requests
+ * Админ создаётся в server/db/init.js (не на этой странице)
+ *
+ * GUIDE_PAGES.md §2.2 | server/db/init.js (adminka / Admin26)
+ * =============================================================================
+ */
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Layout from '../components/Layout.jsx';
+import FormField from '../components/FormField.jsx';
+import PageImage from '../components/PageImage.jsx';
+import { useAuth } from '../context/AuthContext.jsx';
+
+const inputClass =
+  'w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-slate-400';
+
+export default function LoginPage() {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const [loginVal, setLoginVal] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError('');
+    if (!loginVal.trim() || !password) {
+      setError('Введите логин и пароль');
+      return;
+    }
+    try {
+      const user = await login({ login: loginVal, password });
+      navigate(user.role === 'admin' ? '/admin' : '/requests');
+    } catch (err) {
+      setError(err.data?.message || 'Неверный логин или пароль');
+    }
+  };
+
+  return (
+    <Layout variant="login">
+      <PageImage imageKey="loginBanner" className="w-full h-24 object-cover rounded-xl mb-4" />
+
+      <div className="bg-slate-100 rounded-2xl p-6 shadow animate-slide-in">
+        <h2 className="text-xl font-bold text-slate-800 mb-6">Вход в систему</h2>
+        <form onSubmit={submit}>
+          <FormField label="Логин">
+            <input className={inputClass} value={loginVal} onChange={(e) => setLoginVal(e.target.value)} autoComplete="username" />
+          </FormField>
+          <FormField label="Пароль">
+            <input type="password" className={inputClass} value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
+          </FormField>
+          {error && <p className="field-error mb-4 bg-red-50 border border-red-200 rounded-lg px-3 py-2">{error}</p>}
+          <button type="submit" className="w-full rounded-xl bg-slate-800 text-white py-3 font-semibold hover:bg-slate-900 transition">
+            Войти
+          </button>
+        </form>
+        {/* БАНКЕТАМ.НЕТ: текст ссылки → «Еще не зарегистрированы? Регистрация» */}
+        <p className="text-center text-sm mt-4">
+          <Link to="/register" className="text-teal-700 underline">Создать аккаунт</Link>
+        </p>
+        {/* БАНКЕТАМ.НЕТ: Admin26 / Demo20 */}
+        <p className="text-xs text-slate-500 mt-6 text-center">
+          Админ: логин <code>adminka</code>, пароль <code>password</code>
+        </p>
+      </div>
+    </Layout>
+  );
+}

package/exam-guides/commented-code/client/src/pages/RegisterPage.jsx

@@ -0,0 +1,117 @@
+/**
+ * =============================================================================
+ * РЕГИСТРАЦИЯ (/register) — п.1 задания ДЭ
+ * =============================================================================
+ * ЗАМЕНИТЕ:
+ *   label полей — если в теме другие данные пользователя (не ФИО, а «Название фирмы»)
+ *   валидацию — utils/validation.js (сервер + клиент)
+ *   API-тело — те же поля уходят в POST /api/auth/register
+ *   картинку — register-banner в public/images/
+ * Отличительная черта: бирюзовая шапка (variant="register")
+ * БАНКЕТАМ.НЕТ (п.1): логин латиница+цифры ≥6, пароль ≥8; ссылка «Уже есть аккаунт? Вход».
+ * БАНКЕТАМ.НЕТ: brand в Layout → «Банкетам.Нет».
+ *
+ * ПОТОК: form state → validateRegistration → register() из AuthContext
+ *        → POST /api/auth/register → navigate('/requests')
+ * Ошибки: errors.xxx под полями; serverError — общая строка сверху
+ * inputClass — стиль полей; при ошибке добавьте className input-error
+ *
+ * GUIDE_PAGES.md §2.1 | server/routes/auth.js
+ * =============================================================================
+ */
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Layout from '../components/Layout.jsx';
+import FormField from '../components/FormField.jsx';
+import PageImage from '../components/PageImage.jsx';
+import { useAuth } from '../context/AuthContext.jsx';
+import { formatPhoneInput, validateRegistration } from '../utils/validation.js';
+
+const inputClass =
+  'w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-400';
+
+export default function RegisterPage() {
+  const { register } = useAuth();
+  const navigate = useNavigate();
+
+  // --- Состояние формы: имена полей = ключи для API (login, fullName…) ---
+  const [form, setForm] = useState({
+    login: '',
+    password: '',
+    fullName: '',
+    phone: '',
+    email: '',
+  });
+  const [errors, setErrors] = useState({});
+  const [serverError, setServerError] = useState('');
+
+  const set = (field) => (e) => {
+    let value = e.target.value;
+    if (field === 'phone') value = formatPhoneInput(value);
+    setForm((f) => ({ ...f, [field]: value }));
+    setErrors((err) => ({ ...err, [field]: undefined }));
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setServerError('');
+    const localErrors = validateRegistration(form);
+    if (Object.keys(localErrors).length) {
+      setErrors(localErrors);
+      return;
+    }
+    try {
+      const user = await register({
+        login: form.login,
+        password: form.password,
+        fullName: form.fullName,
+        phone: form.phone,
+        email: form.email,
+      });
+      navigate(user.role === 'admin' ? '/admin' : '/requests');
+    } catch (err) {
+      if (err.data?.errors) setErrors(err.data.errors);
+      else setServerError(err.data?.message || err.message);
+    }
+  };
+
+  return (
+    <Layout variant="register">
+      <PageImage imageKey="registerBanner" className="w-full h-24 object-cover rounded-xl mb-4" />
+
+      <div className="bg-white rounded-2xl shadow-lg p-6 animate-fade-up border border-teal-100">
+        <h2 className="text-xl font-bold text-teal-900 mb-1">Регистрация</h2>
+        <p className="text-sm text-slate-500 mb-6">Все поля обязательны</p>
+
+        <form onSubmit={submit} noValidate>
+          <FormField label="Логин" error={errors.login}>
+            <input className={`${inputClass} ${errors.login ? 'input-error' : ''}`} value={form.login} onChange={set('login')} />
+          </FormField>
+          <FormField label="Пароль (от 6 символов)" error={errors.password}>
+            <input type="password" className={`${inputClass} ${errors.password ? 'input-error' : ''}`} value={form.password} onChange={set('password')} />
+          </FormField>
+          <FormField label="ФИО" error={errors.fullName}>
+            <input className={`${inputClass} ${errors.fullName ? 'input-error' : ''}`} value={form.fullName} onChange={set('fullName')} />
+          </FormField>
+          <FormField label="Телефон" error={errors.phone}>
+            <input placeholder="+7(999)-123-45-67" className={`${inputClass} ${errors.phone ? 'input-error' : ''}`} value={form.phone} onChange={set('phone')} />
+          </FormField>
+          <FormField label="Email" error={errors.email}>
+            <input type="email" className={`${inputClass} ${errors.email ? 'input-error' : ''}`} value={form.email} onChange={set('email')} />
+          </FormField>
+
+          {serverError && <p className="field-error mb-3">{serverError}</p>}
+
+          <button type="submit" className="w-full rounded-xl bg-teal-600 text-white py-3 font-semibold hover:bg-teal-700 transition">
+            Зарегистрироваться
+          </button>
+        </form>
+
+        {/* БАНКЕТАМ.НЕТ: на странице регистрации — ссылка «Уже зарегистрированы? Вход» (сейчас «Уже есть аккаунт?») */}
+        <p className="text-center text-sm mt-4 text-slate-600">
+          Уже есть аккаунт? <Link to="/login" className="text-teal-700 underline">Войти</Link>
+        </p>
+      </div>
+    </Layout>
+  );
+}

package/exam-guides/commented-code/client/src/pages/RequestFormPage.jsx

@@ -0,0 +1,196 @@
+/**
+ * =============================================================================
+ * п.4 ЗАДАНИЯ — «Страница формирования заявки»  (/requests/form)
+ * =============================================================================
+ * Поля: адрес, контактные данные (телефон), дата/время, вид услуги, оплата.
+ * «Иная услуга» — чекбокс + текст (модуль ПУ).
+ * После отправки — редирект на п.3 (/requests).
+ * БАНКЕТАМ.НЕТ (п.4): select помещение; дата type="text" placeholder ДД.ММ.ГГГГ (не datetime-local).
+ * БАНКЕТАМ.НЕТ: убрать блок «Иная услуга» (isCustomService).
+ * БАНКЕТАМ.НЕТ: заголовок «Оформление бронирования», label «Помещение».
+ *
+ * services: api.getServices() → select option (id, name) из service_types
+ * submit: validateRequestForm → api.createRequest(form) → navigate('/requests')
+ * paymentType: 'cash' | 'card' — значения как в schema CHECK
+ * isCustomService — модуль ПУ; для Банкетам.Нет удалить блок и поля в API
+ *
+ * GUIDE_PAGES.md §2.4 | server/routes/requests.js POST /
+ * =============================================================================
+ */
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Layout from '../components/Layout.jsx';
+import FormField from '../components/FormField.jsx';
+import PageImage from '../components/PageImage.jsx';
+import { api } from '../api.js';
+import { formatPhoneInput, validateRequestForm } from '../utils/validation.js';
+
+const inputClass =
+  'w-full rounded-lg border border-slate-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-400';
+
+export default function RequestFormPage() {
+  const navigate = useNavigate();
+  const [services, setServices] = useState([]);
+  const [form, setForm] = useState({
+    address: '',
+    contactPhone: '',
+    scheduledAt: '',
+    paymentType: '',
+    serviceTypeId: '',
+    isCustomService: false,
+    customService: '',
+  });
+  const [errors, setErrors] = useState({});
+  const [serverError, setServerError] = useState('');
+
+  useEffect(() => {
+    api.getServices().then(setServices).catch(() => {});
+  }, []);
+
+  const set = (field) => (e) => {
+    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
+    let v = value;
+    if (field === 'contactPhone') v = formatPhoneInput(value);
+    setForm((f) => ({ ...f, [field]: v }));
+    setErrors((err) => ({ ...err, [field]: undefined }));
+  };
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setServerError('');
+    const localErrors = validateRequestForm(form);
+    if (Object.keys(localErrors).length) {
+      setErrors(localErrors);
+      return;
+    }
+    try {
+      await api.createRequest({
+        address: form.address,
+        contactPhone: form.contactPhone,
+        scheduledAt: new Date(form.scheduledAt).toISOString(),
+        paymentType: form.paymentType,
+        serviceTypeId: form.isCustomService ? null : Number(form.serviceTypeId),
+        isCustomService: form.isCustomService,
+        customService: form.isCustomService ? form.customService : null,
+      });
+      navigate('/requests');
+    } catch (err) {
+      if (err.data?.errors) setErrors(err.data.errors);
+      else setServerError(err.data?.message || err.message);
+    }
+  };
+
+  return (
+    <Layout variant="dashboard">
+      <p className="text-white/70 text-xs mb-2">Пункт 4 задания</p>
+      <PageImage imageKey="newRequestBanner" className="w-full h-20 object-cover rounded-xl mb-4" />
+
+      <Link
+        to="/requests"
+        className="inline-block text-sm text-white/90 underline mb-4 hover:text-white"
+      >
+        ← Назад к истории заявок (п.3)
+      </Link>
+
+      <form
+        onSubmit={submit}
+        className="bg-white rounded-2xl shadow-lg p-6 animate-fade-up border border-cyan-100"
+        noValidate
+      >
+        {/* БАНКЕТАМ.НЕТ: «Оформление бронирования» */}
+        <h1 className="text-xl font-bold text-cyan-900 mb-1">Формирование заявки</h1>
+        <p className="text-sm text-slate-500 mb-6">Все поля обязательны</p>
+
+        <FormField label="Адрес" error={errors.address}>
+          <input
+            className={`${inputClass} ${errors.address ? 'input-error' : ''}`}
+            value={form.address}
+            onChange={set('address')}
+            placeholder="Адрес выполнения услуги"
+          />
+        </FormField>
+
+        <FormField label="Контактные данные (телефон)" error={errors.contactPhone}>
+          <input
+            placeholder="+7(999)-123-45-67"
+            className={`${inputClass} ${errors.contactPhone ? 'input-error' : ''}`}
+            value={form.contactPhone}
+            onChange={set('contactPhone')}
+          />
+        </FormField>
+
+        <FormField label="Желаемая дата и время получения услуги" error={errors.scheduledAt}>
+          <input
+            type="datetime-local"
+            className={`${inputClass} ${errors.scheduledAt ? 'input-error' : ''}`}
+            value={form.scheduledAt}
+            onChange={set('scheduledAt')}
+          />
+        </FormField>
+
+        {!form.isCustomService && (
+          <FormField label="Вид услуги" error={errors.serviceTypeId}>
+            <select
+              className={`${inputClass} ${errors.serviceTypeId ? 'input-error' : ''}`}
+              value={form.serviceTypeId}
+              onChange={set('serviceTypeId')}
+            >
+              <option value="">— выберите из списка —</option>
+              {services.map((s) => (
+                <option key={s.id} value={s.id}>
+                  {s.name}
+                </option>
+              ))}
+            </select>
+            <p className="text-xs text-slate-400 mt-1">
+              Из задания: общий клининг, генеральная, послестроительная, химчистка
+            </p>
+          </FormField>
+        )}
+
+        {/* БАНКЕТАМ.НЕТ: удалить весь блок «Иная услуга» — в задании только select помещений */}
+        <label className="flex items-center gap-2 mb-4 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={form.isCustomService}
+            onChange={set('isCustomService')}
+            className="rounded border-slate-300 text-cyan-600"
+          />
+          <span className="text-sm">Иная услуга</span>
+        </label>
+
+        {form.isCustomService && (
+          <FormField label="Опишите, какая услуга вам необходима" error={errors.customService}>
+            <textarea
+              rows={3}
+              className={`${inputClass} ${errors.customService ? 'input-error' : ''}`}
+              value={form.customService}
+              onChange={set('customService')}
+            />
+          </FormField>
+        )}
+
+        <FormField label="Предпочтительный тип оплаты" error={errors.paymentType}>
+          <select
+            className={`${inputClass} ${errors.paymentType ? 'input-error' : ''}`}
+            value={form.paymentType}
+            onChange={set('paymentType')}
+          >
+            <option value="">— выберите —</option>
+            <option value="cash">Наличные</option>
+            <option value="card">Банковская карта</option>
+          </select>
+        </FormField>
+
+        {serverError && <p className="field-error mb-3">{serverError}</p>}
+
+        <button
+          type="submit"
+          className="w-full rounded-xl bg-cyan-600 text-white py-3 font-semibold hover:bg-cyan-700 transition"
+        >
+          Отправить заявку
+        </button>
+      </form>
+    </Layout>
+  );
+}

package/exam-guides/commented-code/client/src/pages/RequestsPage.jsx

@@ -0,0 +1,112 @@
+/**
+ * =============================================================================
+ * п.3 ЗАДАНИЯ — «Страница создания заявки»  (/requests)
+ * =============================================================================
+ * История заявок + кнопка перехода на /requests/form (п.4)
+ * БАНКЕТАМ.НЕТ (п.3): «Личный кабинет» — история бронирований + слайдер (HeroSlider).
+ * БАНКЕТАМ.НЕТ: блок отзыва под заявкой, если status !== 'new' (после админа).
+ * БАНКЕТАМ.НЕТ: statusColors — подписи «Банкет назначен» / «Банкет завершен».
+ *
+ * ДАННЫЕ: useEffect → api.getMyRequests() → GET /api/requests/mine
+ * statusLabel приходит с сервера (requests.js STATUS_LABELS)
+ * Кнопка «Новая заявка» → Link to="/requests/form" (п.4)
+ *
+ * БАНКЕТАМ.НЕТ (отзывы): под карточкой textarea + кнопка, если status !== 'new'
+ *   → api.postReview + route на сервере + таблица reviews в schema.sql
+ *
+ * GUIDE_PAGES.md §2.3 | THEME_BANQUETAM_NET.md
+ * =============================================================================
+ */
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import Layout from '../components/Layout.jsx';
+import PageImage from '../components/PageImage.jsx';
+import { api } from '../api.js';
+
+const statusColors = {
+  new: 'bg-amber-100 text-amber-800',
+  in_progress: 'bg-blue-100 text-blue-800',
+  completed: 'bg-emerald-100 text-emerald-800',
+  cancelled: 'bg-red-100 text-red-800',
+};
+
+export default function RequestsPage() {
+  const [requests, setRequests] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    api
+      .getMyRequests()
+      .then(setRequests)
+      .catch((e) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <Layout variant="dashboard">
+      <div className="animate-fade-up">
+        <p className="text-white/70 text-xs mb-1">Пункт 3 задания</p>
+        <PageImage imageKey="requestsBanner" className="w-full h-20 object-cover rounded-xl mb-4" />
+
+        {/* БАНКЕТАМ.НЕТ: заголовок «Личный кабинет» */}
+        <h1 className="text-xl font-bold text-white drop-shadow mb-1">Создание заявки</h1>
+        <p className="text-white/80 text-sm mb-6">
+          История ваших заявок и переход к оформлению новой
+        </p>
+
+        <Link
+          to="/requests/form"
+          className="block mb-8 rounded-2xl bg-white p-5 shadow-lg border-2 border-teal-400 hover:border-teal-500 transition group"
+        >
+          <div className="flex items-center justify-between gap-3">
+            <div className="text-left">
+              <p className="font-bold text-teal-800 text-lg">Оставить новую заявку</p>
+              <p className="text-slate-600 text-sm mt-1">
+                Страница формирования заявки: адрес, контакты, услуга, дата, оплата
+              </p>
+            </div>
+            <span className="text-3xl text-teal-600 group-hover:translate-x-1 transition">→</span>
+          </div>
+        </Link>
+
+        <h2 className="text-lg font-semibold text-white mb-3">История заявок</h2>
+
+        {loading && <p className="text-white/80">Загрузка…</p>}
+        {error && <p className="text-red-200">{error}</p>}
+
+        {!loading && requests.length === 0 && (
+          <div className="bg-white rounded-xl p-6 text-center text-slate-600 shadow">
+            <PageImage imageKey="emptyRequests" className="w-32 h-auto mx-auto mb-3 opacity-80" />
+            Заявок пока нет. Нажмите «Оставить новую заявку» выше.
+          </div>
+        )}
+
+        <ul className="space-y-3">
+          {requests.map((r, i) => (
+            <li
+              key={r.id}
+              className="bg-white rounded-xl p-4 shadow animate-slide-in border-l-4 border-teal-500"
+              style={{ animationDelay: `${i * 0.05}s` }}
+            >
+              <div className="flex justify-between items-start gap-2 mb-2">
+                <span className="font-medium text-slate-800">{r.serviceName}</span>
+                <span className={`text-xs px-2 py-0.5 rounded-full ${statusColors[r.status]}`}>
+                  {r.statusLabel}
+                </span>
+              </div>
+              <p className="text-sm text-slate-600">Адрес: {r.address}</p>
+              <p className="text-sm text-slate-600">Контакты: {r.contactPhone}</p>
+              <p className="text-xs text-slate-500 mt-1">
+                {new Date(r.scheduledAt).toLocaleString('ru-RU')} · {r.paymentLabel}
+              </p>
+              {r.cancelReason && (
+                <p className="text-xs text-red-600 mt-2">Причина отмены: {r.cancelReason}</p>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Layout>
+  );
+}