@mashka818/exam-de-template 1.0.0

package/exam-project/client/src/config/images.js

@@ -0,0 +1,83 @@
+
+
+/** Базовый путь. Менять не нужно, если папка называется images */
+export const IMAGES_BASE = '/images';
+
+/**
+ * Карта картинок по страницам.
+ * Ключ (logo, homeHero…) — не трогать, менять только file и alt.
+ */
+export const IMAGES = {
+  // Шапка на всех страницах → логотип компании / портала
+  logo: {
+    file: 'logo.svg',
+    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-project/client/src/constants/services.js

@@ -0,0 +1,7 @@
+
+export const DEFAULT_SERVICE_NAMES = [
+  'Общий клининг',
+  'Генеральная уборка',
+  'Послестроительная уборка',
+  'Химчистка ковров и мебели',
+];

package/exam-project/client/src/context/AuthContext.jsx

@@ -0,0 +1,55 @@
+
+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-project/client/src/index.css

@@ -0,0 +1,54 @@
+@import 'tailwindcss';
+
+
+
+@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-project/client/src/main.jsx

@@ -0,0 +1,17 @@
+
+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-project/client/src/pages/AdminPage.jsx

@@ -0,0 +1,128 @@
+
+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>
+
+              
+              <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>
+  );
+}

package/exam-project/client/src/pages/LandingPage.jsx

@@ -0,0 +1,115 @@
+
+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-project/client/src/pages/LoginPage.jsx

@@ -0,0 +1,63 @@
+
+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>
+        
+        <p className="text-xs text-slate-500 mt-6 text-center">
+          Админ: логин <code>adminka</code>, пароль <code>password</code>
+        </p>
+      </div>
+    </Layout>
+  );
+}

package/exam-project/client/src/pages/RegisterPage.jsx

@@ -0,0 +1,97 @@
+
+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>
+  );
+}