setShowNewOrder(false)}
onSaved={() => setShowNewOrder(false)}
/>
)}
);
};
export default KanbanBoard;
```
- [ ] **Step 4: Verify Kanban renders**
```bash
npm run dev
```
Log in → http://localhost:5173/admin/kanban. Should see 5 empty columns. Clicking «+ Заявка» in header will fail until OrderModal is built (next task). Console should be clean.
- [ ] **Step 5: Commit**
```bash
git add src/admin/orders/OrderCard.jsx src/admin/orders/KanbanColumn.jsx src/admin/orders/KanbanBoard.jsx
git commit -m "feat: add Kanban board with drag-and-drop columns and cards"
```
---
## Task 9: OrderModal
**Files:**
- Create: `src/admin/orders/OrderModal.jsx`
- [ ] **Step 1: Create src/admin/orders/OrderModal.jsx**
```jsx
import React, { useState, useEffect } from 'react';
import { X, Save } from 'lucide-react';
import { supabase } from '../../lib/supabase';
import { useAuth } from '../auth/useAuth';
const STATUSES = ['новая', 'замер', 'согласование', 'монтаж', 'закрыт'];
const OBJECT_TYPES = [
{ value: 'industrial', label: 'Промышленный объект' },
{ value: 'commercial', label: 'Коммерческая штаб-квартира' },
{ value: 'infrastructure', label: 'Критическая инфраструктура' },
{ value: 'residential', label: 'Частная резиденция' },
{ value: 'other', label: 'Другое' },
];
const inputStyle = {
width: '100%', padding: '10px 12px',
background: 'var(--bg-lighter)',
border: '1.5px solid var(--border-light)',
borderRadius: '6px',
color: 'var(--text-main)', fontSize: '0.92rem',
outline: 'none', fontFamily: 'var(--font-body)',
boxSizing: 'border-box',
};
const labelStyle = {
display: 'block', marginBottom: '5px',
fontSize: '0.75rem', fontWeight: 700,
color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.4px',
};
const OrderModal = ({ order, onClose, onSaved, mode = 'edit' }) => {
const { session } = useAuth();
const [form, setForm] = useState({
name: order?.name || '',
phone: order?.phone || '',
object_type: order?.object_type || '',
area_sqm: order?.area_sqm ?? '',
film_thickness: order?.film_thickness ?? 200,
estimated_cost: order?.estimated_cost ?? '',
final_cost: order?.final_cost ?? '',
notes: order?.notes || '',
assigned_to: order?.assigned_to || '',
status: order?.status || 'новая',
});
const [events, setEvents] = useState([]);
const [saving, setSaving] = useState(false);
const [error, setError] = useState('');
useEffect(() => {
if (order?.id) {
supabase
.from('order_events')
.select('*')
.eq('order_id', order.id)
.order('created_at', { ascending: false })
.then(({ data }) => setEvents(data || []));
}
}, [order?.id]);
const set = (e) => setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
const handleSave = async () => {
if (!form.name.trim() || !form.phone.trim()) {
setError('Имя и телефон обязательны');
return;
}
setSaving(true);
setError('');
const userEmail = session?.user?.email;
if (mode === 'create') {
const { error } = await supabase
.from('orders')
.insert({ ...form, source: 'manual' });
if (error) { setError(error.message); setSaving(false); return; }
// Realtime in KanbanBoard will pick up the new row automatically
} else {
const statusChanged = form.status !== order.status;
const updates = { ...form };
if (statusChanged && form.status === 'закрыт') updates.closed_at = new Date().toISOString();
const { error } = await supabase.from('orders').update(updates).eq('id', order.id);
if (error) { setError(error.message); setSaving(false); return; }
await supabase.from('order_events').insert({
order_id: order.id,
created_by: userEmail,
event_type: statusChanged ? 'status_change' : 'edit',
description: statusChanged
? `Статус изменён: ${order.status} → ${form.status}`
: 'Данные заказа обновлены',
});
}
onSaved?.();
onClose();
};
return (
e.stopPropagation()}
>
{/* Header */}
{mode === 'create' ? 'Новая заявка' : order?.name}
{/* Fields */}
Заметки
{error &&
{error}
}
{/* Event log */}
{mode === 'edit' && events.length > 0 && (
История изменений
{events.map((e) => (
{new Date(e.created_at).toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}
{e.description}
{e.created_by && (
{e.created_by}
)}
))}
)}
);
};
export default OrderModal;
```
- [ ] **Step 2: Test end-to-end**
```bash
npm run dev
```
1. Open http://localhost:5173/admin/kanban
2. Click «+ Заявка» in header → modal appears
3. Fill name + phone + status, click «Сохранить» → card appears in the correct column automatically (Realtime)
4. Click a card → modal opens in edit mode with all fields populated
5. Change status via dropdown, save → card moves to new column
- [ ] **Step 3: Commit**
```bash
git add src/admin/orders/OrderModal.jsx
git commit -m "feat: add OrderModal for create/edit with event log"
```
---
## Task 10: useAnalytics hook
**Files:**
- Create: `src/admin/analytics/useAnalytics.js`
- Create: `src/admin/analytics/__tests__/useAnalytics.test.js`
- [ ] **Step 1: Create the test file**
```js
// src/admin/analytics/__tests__/useAnalytics.test.js
import { renderHook, act } from '@testing-library/react';
import { vi, describe, it, expect, beforeEach } from 'vitest';
vi.mock('../../../lib/supabase', () => ({
supabase: {
from: vi.fn(),
},
}));
import { useAnalytics } from '../useAnalytics';
import { supabase } from '../../../lib/supabase';
const FROM = '2026-01-01T00:00:00.000Z';
const TO = '2026-12-31T23:59:59.999Z';
describe('useAnalytics', () => {
beforeEach(() => vi.clearAllMocks());
it('returns loading=true initially', () => {
supabase.from.mockReturnValue({
select: vi.fn().mockReturnThis(),
gte: vi.fn().mockReturnThis(),
lte: vi.fn().mockReturnThis(),
eq: vi.fn().mockReturnThis(),
in: vi.fn().mockReturnThis(),
order: vi.fn().mockReturnValue(new Promise(() => {})),
});
const { result } = renderHook(() => useAnalytics(FROM, TO));
expect(result.current.loading).toBe(true);
});
it('computes totalOrders, closedOrders, conversionRate correctly', async () => {
const orders = [
{ id: '1', status: 'новая', object_type: 'industrial', created_at: '2026-03-01', final_cost: null, closed_at: null },
{ id: '2', status: 'закрыт', object_type: 'commercial', created_at: '2026-03-02', final_cost: 50000, closed_at: '2026-03-10' },
{ id: '3', status: 'закрыт', object_type: 'industrial', created_at: '2026-04-01', final_cost: 80000, closed_at: '2026-04-15' },
];
const events = [];
supabase.from.mockImplementation((table) => {
if (table === 'orders') {
return {
select: vi.fn().mockReturnThis(),
gte: vi.fn().mockReturnThis(),
lte: vi.fn().mockResolvedValue({ data: orders, error: null }),
};
}
return {
select: vi.fn().mockReturnThis(),
eq: vi.fn().mockReturnThis(),
gte: vi.fn().mockReturnThis(),
in: vi.fn().mockReturnThis(),
order: vi.fn().mockResolvedValue({ data: events, error: null }),
};
});
const { result } = renderHook(() => useAnalytics(FROM, TO));
await act(async () => {});
expect(result.current.totalOrders).toBe(3);
expect(result.current.closedOrders).toBe(2);
expect(result.current.conversionRate).toBe(67);
expect(result.current.totalRevenue).toBe(130000);
expect(result.current.avgDeal).toBe(65000);
expect(result.current.loading).toBe(false);
});
it('builds byObjectType counts', async () => {
const orders = [
{ id: '1', status: 'новая', object_type: 'industrial', created_at: '2026-03-01', final_cost: null, closed_at: null },
{ id: '2', status: 'новая', object_type: 'industrial', created_at: '2026-03-02', final_cost: null, closed_at: null },
{ id: '3', status: 'новая', object_type: 'commercial', created_at: '2026-03-03', final_cost: null, closed_at: null },
];
supabase.from.mockImplementation((table) => {
if (table === 'orders') {
return { select: vi.fn().mockReturnThis(), gte: vi.fn().mockReturnThis(), lte: vi.fn().mockResolvedValue({ data: orders, error: null }) };
}
return { select: vi.fn().mockReturnThis(), eq: vi.fn().mockReturnThis(), gte: vi.fn().mockReturnThis(), in: vi.fn().mockReturnThis(), order: vi.fn().mockResolvedValue({ data: [], error: null }) };
});
const { result } = renderHook(() => useAnalytics(FROM, TO));
await act(async () => {});
const industrial = result.current.byObjectType.find((x) => x.type === 'industrial');
expect(industrial?.count).toBe(2);
});
});
```
- [ ] **Step 2: Run tests — expect FAIL**
```bash
npm run test:run -- src/admin/analytics/__tests__/useAnalytics.test.js
```
Expected: FAIL with `Cannot find module '../useAnalytics'`
- [ ] **Step 3: Create src/admin/analytics/useAnalytics.js**
```js
import { useState, useEffect, useCallback } from 'react';
import { supabase } from '../../lib/supabase';
const STATUSES = ['новая', 'замер', 'согласование', 'монтаж', 'закрыт'];
export function useAnalytics(dateFrom, dateTo) {
const [analytics, setAnalytics] = useState({
totalOrders: 0, closedOrders: 0, conversionRate: 0,
totalRevenue: 0, avgDeal: 0,
funnelData: STATUSES.map((s) => ({ status: s, count: 0 })),
revenueByMonth: [], byObjectType: [], avgTimeData: [],
});
const [loading, setLoading] = useState(true);
const fetch = useCallback(async () => {
setLoading(true);
const { data: orders } = await supabase
.from('orders')
.select('*')
.gte('created_at', dateFrom)
.lte('created_at', dateTo);
const safeOrders = orders || [];
const orderIds = safeOrders.map((o) => o.id);
const { data: rawEvents } = orderIds.length > 0
? await supabase
.from('order_events')
.select('*')
.eq('event_type', 'status_change')
.in('order_id', orderIds)
.order('created_at', { ascending: true })
: { data: [] };
const events = rawEvents || [];
const closed = safeOrders.filter((o) => o.status === 'закрыт');
const totalRevenue = closed.reduce((s, o) => s + (Number(o.final_cost) || 0), 0);
const avgDeal = closed.length > 0 ? Math.round(totalRevenue / closed.length) : 0;
// Funnel: current count per stage
const funnelData = STATUSES.map((status) => ({
status,
count: safeOrders.filter((o) => o.status === status).length,
}));
// Revenue by month
const revMap = {};
closed.forEach((o) => {
const key = new Date(o.closed_at || o.created_at)
.toLocaleString('ru-RU', { month: 'short', year: '2-digit' });
revMap[key] = (revMap[key] || 0) + (Number(o.final_cost) || 0);
});
const revenueByMonth = Object.entries(revMap).map(([month, revenue]) => ({ month, revenue }));
// By object type
const typeMap = {};
safeOrders.forEach((o) => {
const type = o.object_type || 'other';
typeMap[type] = (typeMap[type] || 0) + 1;
});
const byObjectType = Object.entries(typeMap).map(([type, count]) => ({ type, count }));
// Avg time per stage (from status_change events)
const timeMap = Object.fromEntries(STATUSES.slice(0, -1).map((s) => [s, []]));
safeOrders.forEach((order) => {
const oEvents = events.filter((e) => e.order_id === order.id);
let prevTime = new Date(order.created_at);
let prevStatus = 'новая';
oEvents.forEach((e) => {
const match = e.description?.match(/→ (.+)$/);
if (match) {
const days = (new Date(e.created_at) - prevTime) / 86400000;
if (timeMap[prevStatus]) timeMap[prevStatus].push(days);
prevStatus = match[1].trim();
prevTime = new Date(e.created_at);
}
});
});
const avgTimeData = STATUSES.slice(0, -1).map((status) => ({
status,
avgDays: timeMap[status].length > 0
? Math.round((timeMap[status].reduce((a, b) => a + b, 0) / timeMap[status].length) * 10) / 10
: 0,
}));
setAnalytics({
totalOrders: safeOrders.length,
closedOrders: closed.length,
conversionRate: safeOrders.length > 0 ? Math.round((closed.length / safeOrders.length) * 100) : 0,
totalRevenue, avgDeal, funnelData, revenueByMonth, byObjectType, avgTimeData,
});
setLoading(false);
}, [dateFrom, dateTo]);
useEffect(() => { fetch(); }, [fetch]);
return { ...analytics, loading };
}
```
- [ ] **Step 4: Run tests — expect PASS**
```bash
npm run test:run -- src/admin/analytics/__tests__/useAnalytics.test.js
```
Expected: `3 passed`
- [ ] **Step 5: Commit**
```bash
git add src/admin/analytics/useAnalytics.js src/admin/analytics/__tests__/useAnalytics.test.js
git commit -m "feat: add useAnalytics hook with KPI and chart data aggregation"
```
---
## Task 11: Analytics charts
**Files:**
- Create: `src/admin/analytics/charts/FunnelChart.jsx`
- Create: `src/admin/analytics/charts/RevenueChart.jsx`
- Create: `src/admin/analytics/charts/ObjectTypeChart.jsx`
- Create: `src/admin/analytics/charts/AvgTimeChart.jsx`
- [ ] **Step 1: Create src/admin/analytics/charts/FunnelChart.jsx**
```jsx
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
const COLORS = ['#f59e0b', '#0ea5e9', '#8b5cf6', '#f97316', '#22c55e'];
const FunnelChart = ({ data }) => (
Воронка по стадиям
{data.every((d) => d.count === 0) ? (
Нет данных
) : (
[`${v} заказов`]} />
{data.map((entry, i) => | )}
)}
);
export default FunnelChart;
```
- [ ] **Step 2: Create src/admin/analytics/charts/RevenueChart.jsx**
```jsx
import React from 'react';
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from 'recharts';
const RevenueChart = ({ data }) => (
Выручка по месяцам (₽)
{data.length === 0 ? (
Нет закрытых заказов
) : (
`${(v / 1000).toFixed(0)}к`} />
[`${v.toLocaleString('ru-RU')} ₽`, 'Выручка']} />
)}
);
export default RevenueChart;
```
- [ ] **Step 3: Create src/admin/analytics/charts/ObjectTypeChart.jsx**
```jsx
import React from 'react';
import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';
const COLORS = ['#0ea5e9', '#f59e0b', '#8b5cf6', '#22c55e', '#f97316'];
const TYPE_LABELS = {
industrial: 'Промышленный', commercial: 'Коммерческий',
infrastructure: 'Инфраструктура', residential: 'Частный', other: 'Другое',
};
const ObjectTypeChart = ({ data }) => (
Типы объектов
{data.length === 0 ? (
Нет данных
) : (
{data.map((entry, i) => | )}
[v, TYPE_LABELS[name] || name]} />
TYPE_LABELS[v] || v} iconSize={10} />
)}
);
export default ObjectTypeChart;
```
- [ ] **Step 4: Create src/admin/analytics/charts/AvgTimeChart.jsx**
```jsx
import React from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
const COLORS = ['#f59e0b', '#0ea5e9', '#8b5cf6', '#f97316'];
const AvgTimeChart = ({ data }) => (
Среднее время в стадии (дни)
{data.every((d) => d.avgDays === 0) ? (
Недостаточно данных
) : (
[`${v} дней`]} />
{data.map((entry, i) => | )}
)}
);
export default AvgTimeChart;
```
- [ ] **Step 5: Commit**
```bash
git add src/admin/analytics/charts/
git commit -m "feat: add FunnelChart, RevenueChart, ObjectTypeChart, AvgTimeChart"
```
---
## Task 12: AnalyticsDashboard
**Files:**
- Create: `src/admin/analytics/AnalyticsDashboard.jsx`
- [ ] **Step 1: Create src/admin/analytics/AnalyticsDashboard.jsx**
```jsx
import React, { useState } from 'react';
import { useAnalytics } from './useAnalytics';
import FunnelChart from './charts/FunnelChart';
import RevenueChart from './charts/RevenueChart';
import ObjectTypeChart from './charts/ObjectTypeChart';
import AvgTimeChart from './charts/AvgTimeChart';
const PERIODS = [
{ label: '7 дней', days: 7 },
{ label: '30 дней', days: 30 },
{ label: '90 дней', days: 90 },
{ label: '365 дней', days: 365 },
];
function getRange(days) {
const to = new Date();
const from = new Date();
from.setDate(from.getDate() - days);
return { from: from.toISOString(), to: to.toISOString() };
}
const KpiCard = ({ label, value, sub }) => (
{label}
{value}
{sub &&
{sub}
}
);
const AnalyticsDashboard = () => {
const [activeDays, setActiveDays] = useState(30);
const { from, to } = getRange(activeDays);
const {
totalOrders, closedOrders, conversionRate,
totalRevenue, avgDeal,
funnelData, revenueByMonth, byObjectType, avgTimeData,
loading,
} = useAnalytics(from, to);
return (
{/* Period selector */}
{PERIODS.map(({ label, days }) => (
setActiveDays(days)}
style={{
padding: '7px 16px', borderRadius: '50px',
border: `1.5px solid ${activeDays === days ? 'var(--accent-blue)' : 'var(--border-light)'}`,
background: activeDays === days ? 'rgba(14, 165, 233, 0.08)' : '#fff',
color: activeDays === days ? 'var(--accent-blue)' : 'var(--text-muted)',
fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.82rem',
cursor: 'pointer', transition: 'all 0.15s',
}}
>
{label}
))}
{loading ? (
Загрузка...
) : (
<>
{/* KPI row */}
0 ? `${avgDeal.toLocaleString('ru-RU')} ₽` : '—'} />
{/* Charts grid */}
)}
handleSort(field)}
style={{
padding: '12px 16px', textAlign: 'left', cursor: 'pointer',
fontSize: '0.75rem', fontWeight: 700, color: 'var(--text-muted)',
textTransform: 'uppercase', letterSpacing: '0.4px', userSelect: 'none',
borderBottom: '2px solid var(--border-light)', whiteSpace: 'nowrap',
}}
>
{label}{sortKey === field ? (sortDir === 'asc' ? ' ↑' : ' ↓') : ''}
);
if (loading) return Загрузка...
;
return (
Завершено: {orders.length}
e.currentTarget.style.borderColor = 'var(--accent-blue)'}
onMouseLeave={(e) => e.currentTarget.style.borderColor = 'var(--border-light)'}
>
{sorted.length === 0 ? (
Нет завершённых заказов
) : sorted.map((o) => (
{o.closed_at ? new Date(o.closed_at).toLocaleDateString('ru-RU') : '—'}
{o.name}
{TYPE_LABELS[o.object_type] || o.object_type || '—'}
{o.area_sqm ? `${o.area_sqm} м²` : '—'}
{o.final_cost ? `${Number(o.final_cost).toLocaleString('ru-RU')} ₽` : '—'}
{o.assigned_to || '—'}
))}
);
};
export default CompletedOrdersTable;
```
- [ ] **Step 2: Test CSV export**
Create a test order and move it to «Закрыт». Navigate to http://localhost:5173/admin/completed. Click «Экспорт CSV» — a `.csv` file should download with correct Russian headers and UTF-8 BOM (opens correctly in Excel).
- [ ] **Step 3: Commit**
```bash
git add src/admin/analytics/CompletedOrdersTable.jsx
git commit -m "feat: add CompletedOrdersTable with sort and CSV export"
```
---
## Task 14: LeadForm Supabase integration
**Files:**
- Modify: `src/components/LeadForm.jsx`
- [ ] **Step 1: Add Supabase import to LeadForm.jsx**
At the top of `src/components/LeadForm.jsx`, add:
```js
import { supabase } from '../lib/supabase';
```
- [ ] **Step 2: Add Supabase insert inside handleSubmit**
Inside `handleSubmit`, replace the `if (response.ok) { ... }` block with:
```js
if (response.ok) {
// Write to Supabase (non-blocking — Telegram already succeeded)
try {
await supabase.from('orders').insert({
name: formData.name,
phone: formData.phone,
object_type: formData.objectType,
status: 'новая',
source: 'form',
});
} catch (dbErr) {
console.error('Supabase insert failed:', dbErr);
}
alert("Заявка успешно отправлена! Наши специалисты свяжутся с вами в ближайшее время для согласования замера.");
setFormData({ name: '', phone: '', objectType: '' });
} else {
alert("Произошла ошибка при отправке заявки. Пожалуйста, попробуйте позже или позвоните нам напрямую.");
}
```
- [ ] **Step 3: Test end-to-end**
1. Open http://localhost:5173
2. Fill in the contact form and submit
3. Open http://localhost:5173/admin/kanban
4. A new card should appear in the «Новая» column
- [ ] **Step 4: Commit**
```bash
git add src/components/LeadForm.jsx
git commit -m "feat: insert order to Supabase on lead form submit"
```
---
## Task 15: Estimator — remove unused windows slider
**Files:**
- Modify: `src/components/Estimator.jsx`
- [ ] **Step 1: Remove windows state and slider from Estimator.jsx**
Remove line 8: `const [windows, setWindows] = useState(5);`
Remove the entire `` block for the windows slider (lines 56–70, the block with `label` "Количество окон" and the range input).
The file should now only have `area` and `thickness` sliders. The cost calculation `estimatedCost = area * costPerSqM` is unchanged.
- [ ] **Step 2: Verify calculator still works**
```bash
npm run dev
```
Open http://localhost:5173 → scroll to calculator. Only two controls should be visible: «Толщина плёнки» and «Общая площадь». Estimated cost updates correctly. No console errors.
- [ ] **Step 3: Commit**
```bash
git add src/components/Estimator.jsx
git commit -m "fix: remove windows slider from Estimator (unused in cost formula)"
```
---
## Task 16: Run full test suite and update Obsidian docs
**Files:**
- Modify: `docs/superpowers/specs/2026-05-07-admin-panel-design.md` (update status)
- Modify: `glass-admin/` in Obsidian vault
- [ ] **Step 1: Run all tests**
```bash
npm run test:run
```
Expected: all tests pass (no failures). If any fail, fix before proceeding.
- [ ] **Step 2: Run linter**
```bash
npm run lint
```
Fix any errors.
- [ ] **Step 3: Update spec status**
In `docs/superpowers/specs/2026-05-07-admin-panel-design.md`, change:
```
**Статус:** Approved
```
to:
```
**Статус:** Implemented
```
- [ ] **Step 4: Update Obsidian note**
In `/Users/houseassassin/My Projects/claude/projects/glass-admin/2026-05-07-admin-panel-design.md`, append:
```markdown
---
## Статус реализации
**Завершено:** 2026-05-07
Все 16 задач выполнены. Приложение задеплоено локально.
### Что сделано
- Supabase: таблицы `orders` + `order_events`, RLS, Realtime
- Auth: Supabase email+password, ProtectedRoute
- Канбан: 5 колонок, drag-and-drop (@dnd-kit), Realtime sync
- OrderModal: create/edit + история изменений
- Аналитика: 4 KPI + 4 графика (recharts), фильтр по периоду
- Завершённые: таблица с сортировкой + экспорт CSV
- LeadForm интегрирован с Supabase
- Estimator: удалён неиспользуемый слайдер окон
- Тесты: Vitest + @testing-library/react, 13 тестов
```
- [ ] **Step 5: Final commit**
```bash
git add docs/superpowers/specs/2026-05-07-admin-panel-design.md
git commit -m "docs: mark admin panel spec as implemented"
```