@mashka818/exam-de-template 1.0.0

package/exam-guides/commented-code/client/src/components/landing/LandingLayout.jsx

@@ -0,0 +1,76 @@
+/**
+ * =============================================================================
+ * LandingLayout.jsx — ШАПКА ЛЕНДИНГА (без Layout.jsx)
+ * =============================================================================
+ * Отдельная шапка для главной / — не путать с Layout на /register, /login…
+ * Клик по логотипу → всегда / (даже если пользователь вошёл).
+ *
+ * Гость: кнопки «Вход» / «Регистрация»
+ * user: ссылка в кабинет (/requests или /admin) + «Выйти»
+ *
+ * ЗАМЕНИТЕ: brandName, cabinetLabel («Мои заявки» → «Личный кабинет»)
+ * БАНКЕТАМ.НЕТ: brandName = 'Банкетам.Нет'
+ *
+ * GUIDE_PAGES.md §5 (лендинг)
+ * =============================================================================
+ */
+import { Link } from 'react-router-dom';
+import PageImage from '../PageImage.jsx';
+import { useAuth } from '../../context/AuthContext.jsx';
+
+const brandName = 'Мой Не Сам'; // БАНКЕТАМ.НЕТ: 'Банкетам.Нет'
+
+export default function LandingLayout({ children }) {
+  const { user, logout } = useAuth();
+
+  const cabinetPath = user?.role === 'admin' ? '/admin' : '/requests';
+  const cabinetLabel = user?.role === 'admin' ? 'Панель админа' : 'Мои заявки';
+
+  return (
+    <div className="min-h-screen flex flex-col bg-slate-50">
+      <header className="bg-white border-b border-slate-200 shadow-sm sticky top-0 z-40">
+        <div className="mx-auto w-full max-w-lg lg:max-w-5xl px-4 lg:px-8 py-3 flex items-center justify-between gap-3">
+          <Link to="/" className="flex items-center gap-2 min-w-0">
+            <PageImage imageKey="logo" className="h-9 lg:h-11 w-auto shrink-0" />
+            <span className="font-semibold text-lg text-teal-900 truncate">{brandName}</span>
+          </Link>
+
+          {user ? (
+            <div className="flex items-center gap-2 shrink-0 text-sm">
+              <Link
+                to={cabinetPath}
+                className="px-3 py-1.5 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition"
+              >
+                {cabinetLabel}
+              </Link>
+              <button
+                type="button"
+                onClick={logout}
+                className="px-3 py-1.5 rounded-lg text-slate-600 hover:bg-slate-100 transition"
+              >
+                Выйти
+              </button>
+            </div>
+          ) : (
+            <div className="flex gap-2 shrink-0 text-sm">
+              <Link
+                to="/login"
+                className="px-3 py-1.5 rounded-lg text-slate-700 hover:bg-slate-100 transition"
+              >
+                Вход
+              </Link>
+              <Link
+                to="/register"
+                className="px-3 py-1.5 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition"
+              >
+                Регистрация
+              </Link>
+            </div>
+          )}
+        </div>
+      </header>
+
+      <div className="flex-1 w-full">{children}</div>
+    </div>
+  );
+}

package/exam-guides/commented-code/client/src/components/landing/SiteFooter.jsx

@@ -0,0 +1,74 @@
+/**
+ * =============================================================================
+ * SiteFooter.jsx — ПОДВАЛ ЛЕНДИНГА
+ * =============================================================================
+ * Три круглых фото: imageKey footerPhoto1, footerPhoto2, footerPhoto3
+ *   → PNG в client/public/images/ → записи в config/images.js
+ *
+ * footerLinks — якоря (сейчас все на /; можно сделать id секций на LandingPage)
+ * ЗАМЕНИТЕ: название компании, описание, copyright год
+ *
+ * БАНКЕТАМ.НЕТ: «Банкетам.Нет», текст про банкетные залы
+ * GUIDE_PAGES.md §5.3
+ * =============================================================================
+ */
+import { Link } from 'react-router-dom';
+import PageImage from '../PageImage.jsx';
+
+const footerLinks = [
+  { label: 'О компании', to: '/' },
+  { label: 'Услуги', to: '/' },
+  { label: 'Контакты', to: '/' },
+];
+
+export default function SiteFooter() {
+  return (
+    <footer className="bg-slate-900 text-slate-300 mt-auto">
+      <div className="mx-auto max-w-lg lg:max-w-5xl px-4 lg:px-8 py-10">
+        <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
+          <div>
+            <p className="text-white font-semibold text-lg mb-2">Мой Не Сам</p>
+            <p className="text-sm leading-relaxed max-w-sm">
+              Портал заявок на клининговые услуги. Профессиональная уборка жилых и
+              производственных помещений — вы отдыхаете, мы наводим порядок.
+            </p>
+          </div>
+
+          {/* Фото в футере — замените PNG в public/images/footer-photo-*.png */}
+          <div className="flex gap-4 justify-center lg:justify-end">
+            <PageImage
+              imageKey="footerPhoto1"
+              className="w-20 h-20 lg:w-24 lg:h-24 rounded-full object-cover border-2 border-teal-600"
+            />
+            <PageImage
+              imageKey="footerPhoto2"
+              className="w-20 h-20 lg:w-24 lg:h-24 rounded-full object-cover border-2 border-teal-600"
+            />
+            <PageImage
+              imageKey="footerPhoto3"
+              className="w-20 h-20 lg:w-24 lg:h-24 rounded-full object-cover border-2 border-teal-600"
+            />
+          </div>
+        </div>
+
+        <nav className="flex flex-wrap gap-4 justify-center lg:justify-start mt-8 text-sm">
+          {footerLinks.map((l) => (
+            <Link key={l.label} to={l.to} className="hover:text-white transition">
+              {l.label}
+            </Link>
+          ))}
+          <Link to="/register" className="hover:text-teal-400 transition">
+            Регистрация
+          </Link>
+          <Link to="/login" className="hover:text-teal-400 transition">
+            Вход
+          </Link>
+        </nav>
+
+        <p className="text-center lg:text-left text-xs text-slate-500 mt-8 border-t border-slate-700 pt-6">
+          © {new Date().getFullYear()} Мой Не Сам · Шаблон для ДЭ
+        </p>
+      </div>
+    </footer>
+  );
+}

package/exam-guides/commented-code/client/src/config/images.js

@@ -0,0 +1,104 @@
+/**
+ * =============================================================================
+ * КОНФИГУРАЦИЯ ИЗОБРАЖЕНИЙ
+ * =============================================================================
+ * Все картинки лежат в: client/public/images/
+ * В коде подключаются через URL: /images/имя-файла
+ *
+ * НА ЭКЗАМЕНЕ:
+ * 1) Экспорт из Figma → PNG в public/images/
+ * 2) Если имя файла другое — поменяйте только этот файл
+ * 3) alt — для доступности; замените текст под новую тему
+ * БАНКЕТАМ.НЕТ: slide4; alt про банкеты/залы; logo «Банкетам.Нет»
+ *
+ * Ключ (logo, slide1…) — НЕ переименовывайте без правки PageImage imageKey на страницах
+ * file — имя файла в public/images/
+ * imageUrl('logo') / imageAlt('logo') — если нужен прямой доступ без PageImage
+ *
+ * Слайды: slide-1.png … slide-4.png | Футер: footer-photo-1.png …
+ *
+ * GUIDE_PAGES.md §3 | PageImage.jsx
+ * =============================================================================
+ */
+
+/** Базовый путь. Менять не нужно, если папка называется images */
+export const IMAGES_BASE = '/images';
+
+/**
+ * Карта картинок по страницам.
+ * Ключ (logo, homeHero…) — не трогать, менять только file и alt.
+ */
+export const IMAGES = {
+  // Шапка на всех страницах → логотип компании / портала
+  logo: {
+    file: 'logo.svg', // ЗАМЕНИТЕ на logo.png после экспорта из Figma
+    alt: 'Логотип «Мой Не Сам»', // → название вашей организации
+  },
+
+  // Главная (/) — иллюстрация услуги
+  homeHero: {
+    file: 'home-hero.svg',
+    alt: 'Клининговые услуги на дому',
+  },
+
+  // Регистрация (/register)
+  registerBanner: {
+    file: 'register-banner.svg',
+    alt: 'Регистрация нового заказчика',
+  },
+
+  // Вход (/login)
+  loginBanner: {
+    file: 'login-banner.svg',
+    alt: 'Вход в личный кабинет',
+  },
+
+  // Список заявок (/requests)
+  requestsBanner: {
+    file: 'requests-banner.svg',
+    alt: 'История заявок на уборку',
+  },
+
+  // Новая заявка (/requests/new)
+  newRequestBanner: {
+    file: 'new-request-banner.svg',
+    alt: 'Оформление заявки на услугу',
+  },
+
+  // Админ-панель (/admin)
+  adminBanner: {
+    file: 'admin-banner.svg',
+    alt: 'Панель администратора',
+  },
+
+  // Пустой список заявок
+  emptyRequests: {
+    file: 'empty-requests.svg',
+    alt: 'Заявок пока нет',
+  },
+
+  // --- Лендинг: слайдер (HeroSlider.jsx) ---
+  slide1: { file: 'slide-1.svg', alt: 'Общий клининг' },
+  slide2: { file: 'slide-2.svg', alt: 'Генеральная уборка' },
+  slide3: { file: 'slide-3.svg', alt: 'Химчистка ковров и мебели' },
+
+  // Лендинг: блок «О клининге»
+  aboutCleaning: { file: 'about-cleaning.svg', alt: 'Профессиональный клининг' },
+
+  // Лендинг: футер — 3 фото (команда / офис / работы)
+  footerPhoto1: { file: 'footer-photo-1.svg', alt: 'Сотрудник 1' },
+  footerPhoto2: { file: 'footer-photo-2.svg', alt: 'Сотрудник 2' },
+  footerPhoto3: { file: 'footer-photo-3.svg', alt: 'Сотрудник 3' },
+};
+
+/** Собрать полный URL для тега <img src="..."> */
+export function imageUrl(imageKey) {
+  const item = IMAGES[imageKey];
+  if (!item) return '';
+  return `${IMAGES_BASE}/${item.file}`;
+}
+
+/** Текст alt по ключу */
+export function imageAlt(imageKey) {
+  return IMAGES[imageKey]?.alt ?? '';
+}

package/exam-guides/commented-code/client/src/constants/services.js

@@ -0,0 +1,19 @@
+/**
+ * =============================================================================
+ * constants/services.js — НАЗВАНИЯ УСЛУГ НА ЛЕНДИНГЕ (только отображение)
+ * =============================================================================
+ * Реальный список для формы п.4 берётся из API GET /api/services (seed.sql).
+ * Этот массив — для блока «Наши услуги» на LandingPage.jsx.
+ *
+ * При смене темы: обновите И seed.sql И этот файл одинаковым списком.
+ * БАНКЕТАМ.НЕТ: четыре помещения (зал, ресторан, веранды)
+ *
+ * GUIDE_PAGES.md §5.2 | server/db/seed.sql
+ * =============================================================================
+ */
+export const DEFAULT_SERVICE_NAMES = [
+  'Общий клининг', // БАНКЕТАМ.НЕТ: заменить весь массив на 4 помещения
+  'Генеральная уборка',
+  'Послестроительная уборка',
+  'Химчистка ковров и мебели',
+];

package/exam-guides/commented-code/client/src/context/AuthContext.jsx

@@ -0,0 +1,72 @@
+/**
+ * =============================================================================
+ * КОНТЕКСТ АВТОРИЗАЦИИ — user, login, register, logout
+ * =============================================================================
+ * Хранит JWT в localStorage (api.js setToken).
+ * При смене темы логика не меняется; поля user приходят с сервера (fullName, role…).
+ *
+ * КАК РАБОТАЕТ:
+ *   login/register → api.js → setToken в localStorage → setUser
+ *   logout → очистка токена → редирект на /login (на странице)
+ *   user.role: 'user' | 'admin' — после входа Admin26 попадёт в /admin (см. LoginPage navigate)
+ *
+ * useAuth() на страницах: const { user, login, register, logout } = useAuth();
+ * БАНКЕТАМ.НЕТ: без изменений, если структура users та же.
+ *
+ * GUIDE_PAGES.md §7 | api.js
+ * =============================================================================
+ */
+import { createContext, useContext, useEffect, useState } from 'react';
+import { api, getToken, setToken } from '../api.js';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  // При загрузке приложения — проверить сохранённый токен
+  useEffect(() => {
+    const token = getToken();
+    if (!token) {
+      setLoading(false);
+      return;
+    }
+    api
+      .me()
+      .then(({ user: u }) => setUser(u))
+      .catch(() => setToken(null))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const login = async (credentials) => {
+    const { user: u, token } = await api.login(credentials);
+    setToken(token);
+    setUser(u);
+    return u;
+  };
+
+  const register = async (data) => {
+    const { user: u, token } = await api.register(data);
+    setToken(token);
+    setUser(u);
+    return u;
+  };
+
+  const logout = () => {
+    setToken(null);
+    setUser(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth вне AuthProvider');
+  return ctx;
+}

package/exam-guides/commented-code/client/src/index.css

@@ -0,0 +1,73 @@
+@import 'tailwindcss';
+
+/**
+ * =============================================================================
+ * ГЛОБАЛЬНЫЕ СТИЛИ
+ * =============================================================================
+ * @theme — цвета бренда (ЗАМЕНИТЕ --color-brand под новую тему)
+ * .animate-* — анимации для модуля №3
+ * .field-error / .input-error — ошибки валидации на формах
+ *
+ * АДАПТИВ: ширина колонки задаётся в Layout.jsx (max-w-lg + lg:max-w-5xl).
+ * Подробная инструкция — файл RESPONSIVE.md в корне проекта.
+ * БАНКЕТАМ.НЕТ (М3): микроанимации уже есть; цвета @theme можно сменить на «банкетную» палитру.
+ *
+ * КАК ПОДКЛЮЧИТЬ К СТРАНИЦЕ:
+ *   animate-fade-up на блоках (Layout header, карточки)
+ *   .field-error на <p> под полем; .input-error на <input> при ошибке
+ *   className="input-error" — см. RegisterPage inputClass + errors
+ *
+ * GUIDE_PAGES.md §3.3 | COMMENTS_GUIDE.md
+ * =============================================================================
+ */
+
+@theme {
+  --color-brand: #0d9488;
+  --color-brand-dark: #0f766e;
+  --font-sans: 'Segoe UI', system-ui, sans-serif;
+}
+
+@layer base {
+  body {
+    @apply min-h-screen bg-slate-50 text-slate-800 antialiased;
+    font-family: var(--font-sans);
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-fade-up {
+  animation: fade-up 0.45s ease-out both;
+}
+
+.animate-slide-in {
+  animation: slide-in 0.35s ease-out both;
+}
+
+.field-error {
+  @apply mt-1 text-sm text-red-600;
+}
+
+.input-error {
+  @apply border-red-400 ring-red-100;
+}

package/exam-guides/commented-code/client/src/main.jsx

@@ -0,0 +1,28 @@
+/**
+ * =============================================================================
+ * main.jsx — ТОЧКА ВХОДА REACT (запуск приложения в браузере)
+ * =============================================================================
+ * Обычно НЕ МЕНЯЮТ при смене темы.
+ *
+ * Цепочка: index.html (#root) → main.jsx → AuthProvider → App.jsx (маршруты).
+ *
+ * Если добавили глобальный контекст (тема, язык) — оберните <App /> ещё одним Provider.
+ * Подробнее: GUIDE_PAGES.md §6 (новая страница — маршрут всё равно в App.jsx).
+ * =============================================================================
+ */
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import { AuthProvider } from './context/AuthContext.jsx';
+import './index.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </StrictMode>
+);

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

@@ -0,0 +1,151 @@
+/**
+ * =============================================================================
+ * АДМИН-ПАНЕЛЬ (/admin) — п.5 задания ДЭ
+ * =============================================================================
+ * ЗАМЕНИТЕ:
+ *   логин/пароль админа — server/db/init.js (seedAdmin)
+ *   кнопки статусов — должны совпадать с CHECK в schema.sql
+ *   API — PATCH /api/admin/requests/:id/status
+ *   картинку — admin-banner
+ * Отличительная черта: фиолетовая шапка (variant="admin")
+ * БАНКЕТАМ.НЕТ (п.5): кнопки только «Банкет назначен» / «Банкет завершен»; без «Отменить».
+ * БАНКЕТАМ.НЕТ (М2): useState filterStatus, sortBy, page — select + table + «Страница 1 из N».
+ * БАНКЕТАМ.НЕТ: toast/alert при успешной смене статуса (message уже есть).
+ *
+ * load(): adminGetRequests() — таблица всех заявок
+ * updateStatus(id, status): PATCH /api/admin/requests/:id/status
+ * cancelled + cancelReason — для клининга; БАНКЕТАМ.НЕТ убрать кнопку «Отменить»
+ *
+ * ФИЛЬТР/СОРТ/СТРАНИЦЫ (М2): готовый пример кода — GUIDE_PAGES.md §8.4
+ *   filterStatus state → query ?status= на сервере → admin.js WHERE
+ *
+ * GUIDE_PAGES.md §2.5 | server/routes/admin.js
+ * =============================================================================
+ */
+import { useEffect, useState } from 'react';
+import Layout from '../components/Layout.jsx';
+import PageImage from '../components/PageImage.jsx';
+import { api } from '../api.js';
+
+export default function AdminPage() {
+  const [requests, setRequests] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [cancelReasons, setCancelReasons] = useState({});
+  const [message, setMessage] = useState('');
+
+  const load = () => {
+    setLoading(true);
+    api
+      .adminGetRequests()
+      .then(setRequests)
+      .catch((e) => setMessage(e.message))
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const updateStatus = async (id, status) => {
+    setMessage('');
+    const cancelReason = cancelReasons[id];
+    if (status === 'cancelled' && !cancelReason?.trim()) {
+      setMessage('Для отмены укажите причину в поле под заявкой');
+      return;
+    }
+    try {
+      await api.adminUpdateStatus(id, { status, cancelReason });
+      load();
+    } catch (e) {
+      setMessage(e.data?.message || e.message);
+    }
+  };
+
+  return (
+    <Layout variant="admin">
+      <div className="animate-fade-up">
+        <PageImage imageKey="adminBanner" className="w-full h-20 object-cover rounded-xl mb-4" />
+
+        {/* БАНКЕТАМ.НЕТ: фильтр/сортировка/пагинация — см. комментарий в шапке файла */}
+        <h2 className="text-xl font-bold text-white mb-4">Панель администратора</h2>
+        {message && <p className="text-amber-200 text-sm mb-3">{message}</p>}
+        {loading && <p className="text-white/70">Загрузка…</p>}
+
+        <div className="space-y-4">
+          {requests.map((r) => (
+            <article
+              key={r.id}
+              className="bg-white rounded-xl p-4 shadow text-sm animate-slide-in"
+            >
+              <div className="flex justify-between gap-2 mb-2">
+                <strong className="text-violet-900">#{r.id}</strong>
+                <span className="text-xs bg-slate-100 px-2 py-0.5 rounded">{r.statusLabel}</span>
+              </div>
+              <p>
+                <span className="text-slate-500">Заказчик:</span> {r.userFullName}
+              </p>
+              <p>
+                <span className="text-slate-500">Контакты:</span> {r.contactPhone}, {r.userEmail}
+              </p>
+              <p>
+                <span className="text-slate-500">Адрес:</span> {r.address}
+              </p>
+              <p>
+                <span className="text-slate-500">Услуга:</span> {r.serviceName}
+              </p>
+              <p>
+                <span className="text-slate-500">Когда:</span>{' '}
+                {new Date(r.scheduledAt).toLocaleString('ru-RU')} · {r.paymentLabel}
+              </p>
+
+              {/* БАНКЕТАМ.НЕТ: кнопки «Банкет назначен» (in_progress) и «Банкет завершен» (completed); убрать «Отменить» */}
+              <div className="mt-3 flex flex-wrap gap-2">
+                {r.status === 'new' && (
+                  <button
+                    type="button"
+                    onClick={() => updateStatus(r.id, 'in_progress')}
+                    className="px-3 py-1.5 rounded-lg bg-blue-600 text-white text-xs hover:bg-blue-700"
+                  >
+                    В работе
+                  </button>
+                )}
+                {r.status !== 'completed' && r.status !== 'cancelled' && (
+                  <button
+                    type="button"
+                    onClick={() => updateStatus(r.id, 'completed')}
+                    className="px-3 py-1.5 rounded-lg bg-emerald-600 text-white text-xs hover:bg-emerald-700"
+                  >
+                    Выполнено
+                  </button>
+                )}
+                {r.status !== 'cancelled' && (
+                  <button
+                    type="button"
+                    onClick={() => updateStatus(r.id, 'cancelled')}
+                    className="px-3 py-1.5 rounded-lg bg-red-600 text-white text-xs hover:bg-red-700"
+                  >
+                    Отменить
+                  </button>
+                )}
+              </div>
+
+              {r.status !== 'cancelled' && (
+                <input
+                  placeholder="Причина отмены (обязательно при отмене)"
+                  className="mt-2 w-full text-xs border rounded px-2 py-1"
+                  value={cancelReasons[r.id] || ''}
+                  onChange={(e) =>
+                    setCancelReasons((prev) => ({ ...prev, [r.id]: e.target.value }))
+                  }
+                />
+              )}
+              {r.cancelReason && (
+                <p className="text-red-600 text-xs mt-1">Отмена: {r.cancelReason}</p>
+              )}
+            </article>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+}