mirror of
https://git.meshkee.com/novintrades/website.git
synced 2026-08-11 20:50:58 +04:30
Initial commit: NovinTrades website monorepo.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,14 @@
|
|||||||
|
# Copy to apps/api/.env for local development
|
||||||
|
DATABASE_URL=postgresql://novintrades:novintrades@localhost:5433/novintrades?schema=public
|
||||||
|
JWT_SECRET=change-me-in-production
|
||||||
|
PORT=3000
|
||||||
|
HOST=0.0.0.0
|
||||||
|
|
||||||
|
# ParsPack S3-compatible storage
|
||||||
|
S3_ENDPOINT=https://c287211.parspack.net
|
||||||
|
S3_ACCESS_KEY=
|
||||||
|
S3_SECRET_KEY=
|
||||||
|
S3_BUCKET=c287211
|
||||||
|
S3_REGION=us-east-1
|
||||||
|
S3_PUBLIC_BASE_URL=https://c287211.parspack.net
|
||||||
|
MAX_IMAGE_BYTES=256000
|
||||||
+30
@@ -0,0 +1,30 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
.env
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
# Prisma
|
||||||
|
apps/api/prisma/*.db
|
||||||
|
apps/api/prisma/*.db-journal
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
# NovinTrades
|
||||||
|
|
||||||
|
Monorepo for NovinTrades — API, admin dashboard, and public website.
|
||||||
|
|
||||||
|
## Apps
|
||||||
|
|
||||||
|
| App | Path | Description |
|
||||||
|
|-----|------|-------------|
|
||||||
|
| **api** | `apps/api` | Fastify REST API + PostgreSQL (Prisma) |
|
||||||
|
| **admin** | `apps/admin` | Super-admin dashboard |
|
||||||
|
| **web** | `apps/web` | Public website |
|
||||||
|
|
||||||
|
## Quick start
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Start Postgres (host port 5433 — 5432 may be used by other projects)
|
||||||
|
docker compose up -d
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Configure API env
|
||||||
|
cp .env.example apps/api/.env
|
||||||
|
|
||||||
|
# Run migrations + seed admin user
|
||||||
|
npm run db:migrate
|
||||||
|
npm run db:seed
|
||||||
|
|
||||||
|
# Dev servers
|
||||||
|
npm run dev:api # http://localhost:3000
|
||||||
|
npm run dev:admin # http://localhost:5173
|
||||||
|
npm run dev:web # http://novintrades.local:5174
|
||||||
|
```
|
||||||
|
|
||||||
|
Default admin (after seed): `admin@novintrades.com` / `admin123`
|
||||||
|
|
||||||
|
## One-VM deploy (overview)
|
||||||
|
|
||||||
|
- Postgres via Docker
|
||||||
|
- API via PM2 (or Docker)
|
||||||
|
- Admin + web as static builds behind Nginx
|
||||||
|
- Route by subdomain or path (`api.`, `admin.`, apex)
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||||
|
"plugins": ["react", "typescript", "oxc"],
|
||||||
|
"rules": {
|
||||||
|
"react/rules-of-hooks": "error",
|
||||||
|
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<title>NovinTrades Admin</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"name": "@novintrades/admin",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "oxlint",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tiptap/extension-image": "^3.28.0",
|
||||||
|
"@tiptap/extension-link": "^3.28.0",
|
||||||
|
"@tiptap/extension-placeholder": "^3.28.0",
|
||||||
|
"@tiptap/react": "^3.28.0",
|
||||||
|
"@tiptap/starter-kit": "^3.28.0",
|
||||||
|
"lucide-react": "^1.26.0",
|
||||||
|
"react": "^19.2.7",
|
||||||
|
"react-dom": "^19.2.7",
|
||||||
|
"react-easy-crop": "^6.2.2",
|
||||||
|
"react-router-dom": "^7.18.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^24.13.2",
|
||||||
|
"@types/react": "^19.2.17",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^6.0.3",
|
||||||
|
"oxlint": "^1.71.0",
|
||||||
|
"typescript": "~6.0.2",
|
||||||
|
"vite": "^8.1.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||||
|
<rect width="32" height="32" rx="4" fill="#0B1F3A"/>
|
||||||
|
<rect x="6" y="6" width="20" height="20" rx="2" fill="#1A6CF0"/>
|
||||||
|
<text x="16" y="21" text-anchor="middle" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="11" font-weight="700">NT</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 335 B |
@@ -0,0 +1,37 @@
|
|||||||
|
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
||||||
|
import { Layout } from "./components/Layout";
|
||||||
|
import { RequireAuth } from "./components/RequireAuth";
|
||||||
|
import { BlogNewPage } from "./pages/BlogNewPage";
|
||||||
|
import { BlogPage } from "./pages/BlogPage";
|
||||||
|
import { BrandNewPage } from "./pages/BrandNewPage";
|
||||||
|
import { BrandsPage } from "./pages/BrandsPage";
|
||||||
|
import { HomePage } from "./pages/HomePage";
|
||||||
|
import { LoginPage } from "./pages/LoginPage";
|
||||||
|
import { ReportageNewPage } from "./pages/ReportageNewPage";
|
||||||
|
import { ReportagePage } from "./pages/ReportagePage";
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/login" element={<LoginPage />} />
|
||||||
|
|
||||||
|
<Route element={<RequireAuth />}>
|
||||||
|
<Route element={<Layout />}>
|
||||||
|
<Route index element={<HomePage />} />
|
||||||
|
<Route path="blog" element={<BlogPage />} />
|
||||||
|
<Route path="blog/new" element={<BlogNewPage />} />
|
||||||
|
<Route path="blog/:id/edit" element={<BlogNewPage />} />
|
||||||
|
<Route path="reportage" element={<ReportagePage />} />
|
||||||
|
<Route path="reportage/new" element={<ReportageNewPage />} />
|
||||||
|
<Route path="reportage/:id/edit" element={<ReportageNewPage />} />
|
||||||
|
<Route path="brands" element={<BrandsPage />} />
|
||||||
|
<Route path="brands/new" element={<BrandNewPage />} />
|
||||||
|
<Route path="brands/:id/edit" element={<BrandNewPage />} />
|
||||||
|
<Route path="*" element={<Navigate to="/" replace />} />
|
||||||
|
</Route>
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
.contacts__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts__list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts__row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 150px 1fr auto;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts__empty {
|
||||||
|
padding: 0.9rem 1rem;
|
||||||
|
border: 1px dashed var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
color: var(--gray-600);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
background: var(--gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.contacts__row {
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts__row .field-select {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
import { Plus, Trash2 } from "lucide-react";
|
||||||
|
import { IconButton } from "./IconButton";
|
||||||
|
import "./ContactFields.css";
|
||||||
|
|
||||||
|
export type ContactType =
|
||||||
|
| "phone"
|
||||||
|
| "landline"
|
||||||
|
| "email"
|
||||||
|
| "instagram"
|
||||||
|
| "website"
|
||||||
|
| "whatsapp"
|
||||||
|
| "other";
|
||||||
|
|
||||||
|
export interface ContactItem {
|
||||||
|
id: string;
|
||||||
|
type: ContactType;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CONTACT_TYPES: { value: ContactType; label: string }[] = [
|
||||||
|
{ value: "phone", label: "Phone" },
|
||||||
|
{ value: "landline", label: "Land line" },
|
||||||
|
{ value: "email", label: "Email" },
|
||||||
|
{ value: "instagram", label: "Instagram" },
|
||||||
|
{ value: "website", label: "Website" },
|
||||||
|
{ value: "whatsapp", label: "WhatsApp" },
|
||||||
|
{ value: "other", label: "Other" },
|
||||||
|
];
|
||||||
|
|
||||||
|
interface ContactFieldsProps {
|
||||||
|
value: ContactItem[];
|
||||||
|
onChange: (value: ContactItem[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createContact(type: ContactType = "phone"): ContactItem {
|
||||||
|
return {
|
||||||
|
id: `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
|
||||||
|
type,
|
||||||
|
value: "",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ContactFields({ value, onChange }: ContactFieldsProps) {
|
||||||
|
function update(id: string, patch: Partial<ContactItem>) {
|
||||||
|
onChange(value.map((item) => (item.id === id ? { ...item, ...patch } : item)));
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove(id: string) {
|
||||||
|
onChange(value.filter((item) => item.id !== id));
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="field">
|
||||||
|
<div className="contacts__header">
|
||||||
|
<span className="field__label">Contact info</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--ghost btn--sm"
|
||||||
|
onClick={() => onChange([...value, createContact()])}
|
||||||
|
>
|
||||||
|
<Plus size={14} />
|
||||||
|
Add contact
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="contacts__list">
|
||||||
|
{value.length === 0 ? (
|
||||||
|
<p className="contacts__empty">No contacts yet. Add phone, email, Instagram, etc.</p>
|
||||||
|
) : (
|
||||||
|
value.map((item) => (
|
||||||
|
<div key={item.id} className="contacts__row">
|
||||||
|
<select
|
||||||
|
className="field-select"
|
||||||
|
value={item.type}
|
||||||
|
onChange={(e) => update(item.id, { type: e.target.value as ContactType })}
|
||||||
|
aria-label="Contact type"
|
||||||
|
>
|
||||||
|
{CONTACT_TYPES.map((type) => (
|
||||||
|
<option key={type.value} value={type.value}>
|
||||||
|
{type.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<input
|
||||||
|
className="field-input"
|
||||||
|
value={item.value}
|
||||||
|
onChange={(e) => update(item.id, { value: e.target.value })}
|
||||||
|
placeholder={
|
||||||
|
item.type === "email"
|
||||||
|
? "name@company.com"
|
||||||
|
: item.type === "instagram"
|
||||||
|
? "@brand"
|
||||||
|
: "Value"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<IconButton label="Remove contact" variant="danger" onClick={() => remove(item.id)}>
|
||||||
|
<Trash2 size={15} />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
.table-wrap {
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
min-width: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table th,
|
||||||
|
.data-table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.85rem 1rem;
|
||||||
|
border-bottom: 1px solid var(--gray-100);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table th {
|
||||||
|
background: var(--gray-50);
|
||||||
|
color: var(--gray-600);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table tbody tr:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table tbody tr:hover td {
|
||||||
|
background: var(--blue-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table td {
|
||||||
|
color: var(--gray-800);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-muted {
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.35rem;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.2rem 0.55rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
border: none;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge--clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: filter 0.15s ease, transform 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge--clickable:hover {
|
||||||
|
filter: brightness(0.96);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge--clickable:focus-visible {
|
||||||
|
outline: 2px solid var(--blue);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge--approved {
|
||||||
|
background: var(--success-soft);
|
||||||
|
color: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge--pending {
|
||||||
|
background: var(--blue-soft);
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge--rejected {
|
||||||
|
background: var(--danger-soft);
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 320px;
|
||||||
|
padding: 0.55rem 0.85rem;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--white);
|
||||||
|
color: var(--gray-800);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input:focus {
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input::placeholder {
|
||||||
|
color: var(--gray-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-select {
|
||||||
|
padding: 0.55rem 0.85rem;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--white);
|
||||||
|
color: var(--gray-800);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-select:focus {
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
padding: 3rem 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--gray-600);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state p {
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import type { ReactNode } from "react";
|
||||||
|
import "./DataTable.css";
|
||||||
|
|
||||||
|
interface Column<T> {
|
||||||
|
key: string;
|
||||||
|
header: string;
|
||||||
|
render: (row: T) => ReactNode;
|
||||||
|
width?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DataTableProps<T> {
|
||||||
|
columns: Column<T>[];
|
||||||
|
rows: T[];
|
||||||
|
rowKey: (row: T) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DataTable<T>({ columns, rows, rowKey }: DataTableProps<T>) {
|
||||||
|
return (
|
||||||
|
<div className="table-wrap">
|
||||||
|
<table className="data-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{columns.map((col) => (
|
||||||
|
<th key={col.key} style={col.width ? { width: col.width } : undefined}>
|
||||||
|
{col.header}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{rows.map((row) => (
|
||||||
|
<tr key={rowKey(row)}>
|
||||||
|
{columns.map((col) => (
|
||||||
|
<td key={col.key}>{col.render(row)}</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
.icon-btn {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
color: var(--gray-600);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
background: var(--white);
|
||||||
|
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn:hover {
|
||||||
|
background: var(--gray-100);
|
||||||
|
color: var(--dark-blue);
|
||||||
|
border-color: var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn--primary {
|
||||||
|
background: var(--blue);
|
||||||
|
border-color: var(--blue);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn--primary:hover {
|
||||||
|
background: var(--blue-hover);
|
||||||
|
border-color: var(--blue-hover);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn--danger {
|
||||||
|
border-color: transparent;
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn--danger:hover {
|
||||||
|
background: var(--danger-soft);
|
||||||
|
color: var(--danger);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn::after {
|
||||||
|
content: attr(data-tooltip);
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(100% + 6px);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(2px);
|
||||||
|
padding: 0.3rem 0.5rem;
|
||||||
|
background: var(--dark-blue);
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-radius: 4px;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.12s ease, transform 0.12s ease;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-btn:hover::after,
|
||||||
|
.icon-btn:focus-visible::after {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(-50%) translateY(0);
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import type { ReactNode } from "react";
|
||||||
|
import "./IconButton.css";
|
||||||
|
|
||||||
|
interface IconButtonProps {
|
||||||
|
label: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
variant?: "default" | "danger" | "primary";
|
||||||
|
children: ReactNode;
|
||||||
|
type?: "button" | "submit";
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function IconButton({
|
||||||
|
label,
|
||||||
|
onClick,
|
||||||
|
variant = "default",
|
||||||
|
children,
|
||||||
|
type = "button",
|
||||||
|
disabled = false,
|
||||||
|
}: IconButtonProps) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type={type}
|
||||||
|
className={`icon-btn icon-btn--${variant}`}
|
||||||
|
aria-label={label}
|
||||||
|
data-tooltip={label}
|
||||||
|
onClick={onClick}
|
||||||
|
disabled={disabled}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
.image-cropper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-cropper__upload {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
border: 1px dashed var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--gray-50);
|
||||||
|
color: var(--gray-600);
|
||||||
|
transition: border-color 0.15s ease, background 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-cropper__upload:hover {
|
||||||
|
border-color: var(--blue);
|
||||||
|
background: var(--blue-soft);
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-cropper__upload span {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-cropper__upload small {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--gray-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-cropper__preview {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-cropper__preview img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-cropper__preview-actions {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.65rem;
|
||||||
|
right: 0.65rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-modal {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: rgba(11, 31, 58, 0.55);
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-modal__panel {
|
||||||
|
width: min(720px, 100%);
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-modal__stage {
|
||||||
|
position: relative;
|
||||||
|
height: 420px;
|
||||||
|
background: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-modal__controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-modal__zoom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-600);
|
||||||
|
flex: 1;
|
||||||
|
min-width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-modal__zoom input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-modal__actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,206 @@
|
|||||||
|
import { useCallback, useRef, useState } from "react";
|
||||||
|
import Cropper, { type Area } from "react-easy-crop";
|
||||||
|
import { ImagePlus, Trash2 } from "lucide-react";
|
||||||
|
import { ApiError } from "../lib/api";
|
||||||
|
import {
|
||||||
|
canvasToJpegBlob,
|
||||||
|
maxImageLabel,
|
||||||
|
} from "../lib/image";
|
||||||
|
import { uploadImage } from "../lib/services";
|
||||||
|
import { IconButton } from "./IconButton";
|
||||||
|
import "./ImageCropper.css";
|
||||||
|
|
||||||
|
interface ImageCropperProps {
|
||||||
|
label: string;
|
||||||
|
value: string | null;
|
||||||
|
onChange: (value: string | null) => void;
|
||||||
|
aspect?: number;
|
||||||
|
folder?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createImage(url: string): Promise<HTMLImageElement> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const img = new Image();
|
||||||
|
img.addEventListener("load", () => resolve(img));
|
||||||
|
img.addEventListener("error", reject);
|
||||||
|
img.src = url;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getCroppedBlob(imageSrc: string, crop: Area): Promise<Blob> {
|
||||||
|
const image = await createImage(imageSrc);
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
if (!ctx) throw new Error("Canvas not supported");
|
||||||
|
|
||||||
|
canvas.width = crop.width;
|
||||||
|
canvas.height = crop.height;
|
||||||
|
ctx.drawImage(
|
||||||
|
image,
|
||||||
|
crop.x,
|
||||||
|
crop.y,
|
||||||
|
crop.width,
|
||||||
|
crop.height,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
crop.width,
|
||||||
|
crop.height,
|
||||||
|
);
|
||||||
|
return canvasToJpegBlob(canvas, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ImageCropper({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
aspect = 1,
|
||||||
|
folder = "uploads",
|
||||||
|
}: ImageCropperProps) {
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const [rawSrc, setRawSrc] = useState<string | null>(null);
|
||||||
|
const [crop, setCrop] = useState({ x: 0, y: 0 });
|
||||||
|
const [zoom, setZoom] = useState(1);
|
||||||
|
const [croppedArea, setCroppedArea] = useState<Area | null>(null);
|
||||||
|
const [uploading, setUploading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
|
const onCropComplete = useCallback((_: Area, croppedPixels: Area) => {
|
||||||
|
setCroppedArea(croppedPixels);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function onFileChange(file: File | undefined) {
|
||||||
|
if (!file) return;
|
||||||
|
setError("");
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = () => {
|
||||||
|
setRawSrc(String(reader.result));
|
||||||
|
setCrop({ x: 0, y: 0 });
|
||||||
|
setZoom(1);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function applyCrop() {
|
||||||
|
if (!rawSrc || !croppedArea) return;
|
||||||
|
setError("");
|
||||||
|
setUploading(true);
|
||||||
|
try {
|
||||||
|
const blob = await getCroppedBlob(rawSrc, croppedArea);
|
||||||
|
const uploaded = await uploadImage(blob, folder);
|
||||||
|
onChange(uploaded.url);
|
||||||
|
setRawSrc(null);
|
||||||
|
} catch (err) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError || err instanceof Error
|
||||||
|
? err.message
|
||||||
|
: "Upload failed",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setUploading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="field">
|
||||||
|
<span className="field__label">{label}</span>
|
||||||
|
<div className="image-cropper">
|
||||||
|
{value ? (
|
||||||
|
<div className="image-cropper__preview">
|
||||||
|
<img src={value} alt="Main preview" />
|
||||||
|
<div className="image-cropper__preview-actions">
|
||||||
|
<IconButton
|
||||||
|
label="Replace image"
|
||||||
|
onClick={() => inputRef.current?.click()}
|
||||||
|
disabled={uploading}
|
||||||
|
>
|
||||||
|
<ImagePlus size={16} />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
label="Remove image"
|
||||||
|
variant="danger"
|
||||||
|
onClick={() => onChange(null)}
|
||||||
|
disabled={uploading}
|
||||||
|
>
|
||||||
|
<Trash2 size={16} />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="image-cropper__upload"
|
||||||
|
onClick={() => inputRef.current?.click()}
|
||||||
|
disabled={uploading}
|
||||||
|
>
|
||||||
|
<ImagePlus size={22} />
|
||||||
|
<span>{uploading ? "Uploading…" : "Upload main image"}</span>
|
||||||
|
<small>JPG or PNG · max {maxImageLabel()} · crop after upload</small>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="file"
|
||||||
|
accept="image/jpeg,image/png,image/webp,image/gif"
|
||||||
|
hidden
|
||||||
|
onChange={(e) => {
|
||||||
|
onFileChange(e.target.files?.[0]);
|
||||||
|
e.target.value = "";
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? <p className="field__error">{error}</p> : null}
|
||||||
|
|
||||||
|
{rawSrc ? (
|
||||||
|
<div className="crop-modal" role="dialog" aria-modal aria-label="Crop image">
|
||||||
|
<div className="crop-modal__panel">
|
||||||
|
<div className="crop-modal__stage">
|
||||||
|
<Cropper
|
||||||
|
image={rawSrc}
|
||||||
|
crop={crop}
|
||||||
|
zoom={zoom}
|
||||||
|
aspect={aspect}
|
||||||
|
onCropChange={setCrop}
|
||||||
|
onZoomChange={setZoom}
|
||||||
|
onCropComplete={onCropComplete}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="crop-modal__controls">
|
||||||
|
<label className="crop-modal__zoom">
|
||||||
|
Zoom
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min={1}
|
||||||
|
max={3}
|
||||||
|
step={0.05}
|
||||||
|
value={zoom}
|
||||||
|
onChange={(e) => setZoom(Number(e.target.value))}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className="crop-modal__actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--ghost"
|
||||||
|
onClick={() => setRawSrc(null)}
|
||||||
|
disabled={uploading}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--primary"
|
||||||
|
onClick={() => void applyCrop()}
|
||||||
|
disabled={uploading}
|
||||||
|
>
|
||||||
|
{uploading ? "Uploading…" : "Apply & upload"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{error ? <p className="crop-modal__error">{error}</p> : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
.image-gallery {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery__item {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery__item img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery__item-actions {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.45rem;
|
||||||
|
right: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery__add {
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
border: 1px dashed var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--gray-50);
|
||||||
|
color: var(--gray-600);
|
||||||
|
padding: 0.75rem;
|
||||||
|
text-align: center;
|
||||||
|
transition: border-color 0.15s ease, background 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery__add:hover:not(:disabled) {
|
||||||
|
border-color: var(--blue);
|
||||||
|
background: var(--blue-soft);
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery__add:disabled {
|
||||||
|
opacity: 0.7;
|
||||||
|
cursor: wait;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery__add span {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-gallery__add small {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--gray-400);
|
||||||
|
}
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
import { useRef, useState } from "react";
|
||||||
|
import { ImagePlus, Trash2 } from "lucide-react";
|
||||||
|
import { ApiError } from "../lib/api";
|
||||||
|
import { maxImageLabel } from "../lib/image";
|
||||||
|
import { uploadImage } from "../lib/services";
|
||||||
|
import { IconButton } from "./IconButton";
|
||||||
|
import "./ImageGallery.css";
|
||||||
|
|
||||||
|
interface ImageGalleryProps {
|
||||||
|
label: string;
|
||||||
|
value: string[];
|
||||||
|
onChange: (value: string[]) => void;
|
||||||
|
folder?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ImageGallery({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
folder = "brands",
|
||||||
|
}: ImageGalleryProps) {
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const [uploading, setUploading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
|
async function onFilesSelected(files: FileList | null) {
|
||||||
|
if (!files?.length) return;
|
||||||
|
setError("");
|
||||||
|
setUploading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const uploadedUrls: string[] = [];
|
||||||
|
for (const file of Array.from(files)) {
|
||||||
|
const uploaded = await uploadImage(file, folder);
|
||||||
|
uploadedUrls.push(uploaded.url);
|
||||||
|
}
|
||||||
|
onChange([...value, ...uploadedUrls]);
|
||||||
|
} catch (err) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError || err instanceof Error
|
||||||
|
? err.message
|
||||||
|
: "Upload failed",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setUploading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeAt(index: number) {
|
||||||
|
onChange(value.filter((_, i) => i !== index));
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="field">
|
||||||
|
<span className="field__label">{label}</span>
|
||||||
|
<div className="image-gallery">
|
||||||
|
{value.map((url, index) => (
|
||||||
|
<div key={`${url}-${index}`} className="image-gallery__item">
|
||||||
|
<img src={url} alt={`Gallery ${index + 1}`} />
|
||||||
|
<div className="image-gallery__item-actions">
|
||||||
|
<IconButton
|
||||||
|
label="Remove image"
|
||||||
|
variant="danger"
|
||||||
|
onClick={() => removeAt(index)}
|
||||||
|
disabled={uploading}
|
||||||
|
>
|
||||||
|
<Trash2 size={15} />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="image-gallery__add"
|
||||||
|
onClick={() => inputRef.current?.click()}
|
||||||
|
disabled={uploading}
|
||||||
|
>
|
||||||
|
<ImagePlus size={20} />
|
||||||
|
<span>{uploading ? "Uploading…" : "Add images"}</span>
|
||||||
|
<small>No crop · max {maxImageLabel()} each</small>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="file"
|
||||||
|
accept="image/jpeg,image/png,image/webp,image/gif"
|
||||||
|
multiple
|
||||||
|
hidden
|
||||||
|
onChange={(e) => {
|
||||||
|
void onFilesSelected(e.target.files);
|
||||||
|
e.target.value = "";
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{error ? <p className="field__error">{error}</p> : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
.layout {
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout__main {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.9rem 1.75rem;
|
||||||
|
background: var(--white);
|
||||||
|
border-bottom: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar__label {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar__meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar__chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.3rem 0.65rem;
|
||||||
|
background: var(--blue-soft);
|
||||||
|
color: var(--blue);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout__content {
|
||||||
|
padding: 1.75rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.layout {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar,
|
||||||
|
.layout__content {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout__content {
|
||||||
|
padding-top: 1.25rem;
|
||||||
|
padding-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
import { Outlet, useNavigate } from "react-router-dom";
|
||||||
|
import { ExternalLink, LogOut } from "lucide-react";
|
||||||
|
import { getCurrentUser, logoutSession } from "../lib/auth";
|
||||||
|
import { WEB_URL } from "../lib/config";
|
||||||
|
import { IconButton } from "./IconButton";
|
||||||
|
import { Sidebar } from "./Sidebar";
|
||||||
|
import "./Layout.css";
|
||||||
|
|
||||||
|
export function Layout() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const user = getCurrentUser();
|
||||||
|
|
||||||
|
function onLogout() {
|
||||||
|
logoutSession();
|
||||||
|
navigate("/login", { replace: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="layout">
|
||||||
|
<Sidebar />
|
||||||
|
<div className="layout__main">
|
||||||
|
<header className="topbar">
|
||||||
|
<p className="topbar__label">Admin Dashboard</p>
|
||||||
|
<div className="topbar__meta">
|
||||||
|
<span className="topbar__chip">{user?.email ?? "Super Admin"}</span>
|
||||||
|
<IconButton
|
||||||
|
label="Go to website"
|
||||||
|
onClick={() => window.open(WEB_URL, "_blank", "noopener,noreferrer")}
|
||||||
|
>
|
||||||
|
<ExternalLink size={15} />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton label="Sign out" onClick={onLogout}>
|
||||||
|
<LogOut size={15} />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main className="layout__content">
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
.list-toolbar {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-toolbar .btn--primary {
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
import { Filter } from "lucide-react";
|
||||||
|
import type { Category, VerificationStatus } from "../lib/types";
|
||||||
|
import "./ListToolbar.css";
|
||||||
|
|
||||||
|
export interface ListFilterValues {
|
||||||
|
query: string;
|
||||||
|
status: "all" | VerificationStatus;
|
||||||
|
categoryId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ListToolbarProps {
|
||||||
|
draft: ListFilterValues;
|
||||||
|
onDraftChange: (next: ListFilterValues) => void;
|
||||||
|
onFilter: () => void;
|
||||||
|
categories: Category[];
|
||||||
|
searchPlaceholder?: string;
|
||||||
|
filtering?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ListToolbar({
|
||||||
|
draft,
|
||||||
|
onDraftChange,
|
||||||
|
onFilter,
|
||||||
|
categories,
|
||||||
|
searchPlaceholder = "Search…",
|
||||||
|
filtering = false,
|
||||||
|
}: ListToolbarProps) {
|
||||||
|
return (
|
||||||
|
<div className="toolbar list-toolbar">
|
||||||
|
<input
|
||||||
|
className="search-input"
|
||||||
|
type="search"
|
||||||
|
placeholder={searchPlaceholder}
|
||||||
|
value={draft.query}
|
||||||
|
onChange={(e) => onDraftChange({ ...draft, query: e.target.value })}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
e.preventDefault();
|
||||||
|
onFilter();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
className="filter-select"
|
||||||
|
value={draft.status}
|
||||||
|
onChange={(e) =>
|
||||||
|
onDraftChange({
|
||||||
|
...draft,
|
||||||
|
status: e.target.value as ListFilterValues["status"],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
aria-label="Filter by status"
|
||||||
|
>
|
||||||
|
<option value="all">All statuses</option>
|
||||||
|
<option value="PENDING">Pending</option>
|
||||||
|
<option value="APPROVED">Approved</option>
|
||||||
|
<option value="REJECTED">Rejected</option>
|
||||||
|
</select>
|
||||||
|
<select
|
||||||
|
className="filter-select"
|
||||||
|
value={draft.categoryId}
|
||||||
|
onChange={(e) =>
|
||||||
|
onDraftChange({ ...draft, categoryId: e.target.value })
|
||||||
|
}
|
||||||
|
aria-label="Filter by category"
|
||||||
|
>
|
||||||
|
<option value="">All categories</option>
|
||||||
|
{categories.map((category) => (
|
||||||
|
<option key={category.id} value={category.id}>
|
||||||
|
{category.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--primary"
|
||||||
|
onClick={onFilter}
|
||||||
|
disabled={filtering}
|
||||||
|
>
|
||||||
|
<Filter size={15} />
|
||||||
|
Filter
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,217 @@
|
|||||||
|
.field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__hint {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-input,
|
||||||
|
.field-textarea,
|
||||||
|
.field-select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.65rem 0.85rem;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--white);
|
||||||
|
color: var(--gray-800);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-input:focus,
|
||||||
|
.field-textarea:focus,
|
||||||
|
.field-select:focus {
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-textarea {
|
||||||
|
min-height: 110px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__control {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 42px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.4rem 0.65rem;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--white);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect--open .multiselect__control {
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__chips {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.35rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__placeholder {
|
||||||
|
color: var(--gray-400);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 0.2rem 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0.2rem 0.45rem;
|
||||||
|
background: var(--blue-soft);
|
||||||
|
color: var(--blue);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__chip-remove {
|
||||||
|
display: inline-flex;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__chip-remove:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__chevron {
|
||||||
|
color: var(--gray-400);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__dropdown {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 30;
|
||||||
|
top: calc(100% + 4px);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.6rem 0.75rem;
|
||||||
|
border-bottom: 1px solid var(--gray-100);
|
||||||
|
color: var(--gray-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__search input {
|
||||||
|
flex: 1;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
font: inherit;
|
||||||
|
color: var(--gray-800);
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__list {
|
||||||
|
list-style: none;
|
||||||
|
max-height: 320px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__option {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.55rem 0.85rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-800);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__option-main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__tree {
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
align-self: stretch;
|
||||||
|
display: flex;
|
||||||
|
min-height: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__tree-col {
|
||||||
|
position: relative;
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__tree-col::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 1px;
|
||||||
|
background: var(--gray-200);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__tree-col.is-branch::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 50%;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__option-label {
|
||||||
|
min-width: 0;
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__option:hover,
|
||||||
|
.multiselect__option.is-selected {
|
||||||
|
background: var(--blue-soft);
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__option:hover .multiselect__tree-col::before,
|
||||||
|
.multiselect__option:hover .multiselect__tree-col.is-branch::after,
|
||||||
|
.multiselect__option.is-selected .multiselect__tree-col::before,
|
||||||
|
.multiselect__option.is-selected .multiselect__tree-col.is-branch::after {
|
||||||
|
background: #b7c9e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiselect__empty {
|
||||||
|
padding: 0.85rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
@@ -0,0 +1,193 @@
|
|||||||
|
import { useEffect, useId, useMemo, useRef, useState } from "react";
|
||||||
|
import { Check, ChevronDown, Search, X } from "lucide-react";
|
||||||
|
import "./MultiSelect.css";
|
||||||
|
|
||||||
|
export interface SelectOption {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
depth?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MultiSelectProps {
|
||||||
|
label: string;
|
||||||
|
options: SelectOption[];
|
||||||
|
value: string[];
|
||||||
|
onChange: (value: string[]) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MultiSelect({
|
||||||
|
label,
|
||||||
|
options,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
placeholder = "Search categories…",
|
||||||
|
}: MultiSelectProps) {
|
||||||
|
const id = useId();
|
||||||
|
const rootRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
|
||||||
|
const selected = useMemo(
|
||||||
|
() => options.filter((o) => value.includes(o.value)),
|
||||||
|
[options, value],
|
||||||
|
);
|
||||||
|
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
const q = query.trim().toLowerCase();
|
||||||
|
if (!q) return options;
|
||||||
|
// Keep matches and their ancestors so hierarchy stays readable while searching
|
||||||
|
const matched = new Set(
|
||||||
|
options.filter((o) => o.label.toLowerCase().includes(q)).map((o) => o.value),
|
||||||
|
);
|
||||||
|
if (matched.size === 0) return [];
|
||||||
|
|
||||||
|
const indexByValue = new Map(options.map((o, i) => [o.value, i]));
|
||||||
|
const keep = new Set<string>(matched);
|
||||||
|
|
||||||
|
for (const option of options) {
|
||||||
|
if (!matched.has(option.value)) continue;
|
||||||
|
const depth = option.depth ?? 0;
|
||||||
|
if (depth === 0) continue;
|
||||||
|
const idx = indexByValue.get(option.value) ?? 0;
|
||||||
|
for (let i = idx - 1; i >= 0; i -= 1) {
|
||||||
|
const ancestor = options[i];
|
||||||
|
if ((ancestor.depth ?? 0) < depth) {
|
||||||
|
keep.add(ancestor.value);
|
||||||
|
if ((ancestor.depth ?? 0) === 0) break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return options.filter((o) => keep.has(o.value));
|
||||||
|
}, [options, query]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function onDocClick(e: MouseEvent) {
|
||||||
|
if (!rootRef.current?.contains(e.target as Node)) {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener("mousedown", onDocClick);
|
||||||
|
return () => document.removeEventListener("mousedown", onDocClick);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function toggle(optionValue: string) {
|
||||||
|
if (value.includes(optionValue)) {
|
||||||
|
onChange(value.filter((v) => v !== optionValue));
|
||||||
|
} else {
|
||||||
|
onChange([...value, optionValue]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove(optionValue: string) {
|
||||||
|
onChange(value.filter((v) => v !== optionValue));
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="field" ref={rootRef}>
|
||||||
|
<label className="field__label" htmlFor={id}>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
<div className={`multiselect${open ? " multiselect--open" : ""}`}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
id={id}
|
||||||
|
className="multiselect__control"
|
||||||
|
onClick={() => setOpen((v) => !v)}
|
||||||
|
aria-expanded={open}
|
||||||
|
aria-haspopup="listbox"
|
||||||
|
>
|
||||||
|
<div className="multiselect__chips">
|
||||||
|
{selected.length === 0 ? (
|
||||||
|
<span className="multiselect__placeholder">Select categories</span>
|
||||||
|
) : (
|
||||||
|
selected.map((item) => (
|
||||||
|
<span key={item.value} className="multiselect__chip">
|
||||||
|
{item.label}
|
||||||
|
<span
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
className="multiselect__chip-remove"
|
||||||
|
aria-label={`Remove ${item.label}`}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
remove(item.value);
|
||||||
|
}}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
remove(item.value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X size={12} />
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<ChevronDown size={16} className="multiselect__chevron" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{open ? (
|
||||||
|
<div className="multiselect__dropdown" role="listbox" aria-multiselectable>
|
||||||
|
<div className="multiselect__search">
|
||||||
|
<Search size={14} />
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
|
placeholder={placeholder}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ul className="multiselect__list">
|
||||||
|
{filtered.length === 0 ? (
|
||||||
|
<li className="multiselect__empty">No categories found</li>
|
||||||
|
) : (
|
||||||
|
filtered.map((option) => {
|
||||||
|
const active = value.includes(option.value);
|
||||||
|
const depth = option.depth ?? 0;
|
||||||
|
return (
|
||||||
|
<li key={option.value}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
role="option"
|
||||||
|
aria-selected={active}
|
||||||
|
className={`multiselect__option${active ? " is-selected" : ""}`}
|
||||||
|
onClick={() => toggle(option.value)}
|
||||||
|
>
|
||||||
|
<span className="multiselect__option-main">
|
||||||
|
{depth > 0 ? (
|
||||||
|
<span
|
||||||
|
className="multiselect__tree"
|
||||||
|
aria-hidden
|
||||||
|
style={{ width: `${depth * 1.35}rem` }}
|
||||||
|
>
|
||||||
|
{Array.from({ length: depth }, (_, level) => (
|
||||||
|
<span
|
||||||
|
key={level}
|
||||||
|
className={`multiselect__tree-col${level === depth - 1 ? " is-branch" : ""}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
<span className="multiselect__option-label">
|
||||||
|
{option.label}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
{active ? <Check size={14} /> : null}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header__title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header__desc {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0.55rem 1rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1;
|
||||||
|
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn__icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--primary {
|
||||||
|
background: var(--blue);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--primary:hover {
|
||||||
|
background: var(--blue-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--ghost {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--gray-600);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--ghost:hover {
|
||||||
|
background: var(--gray-100);
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--danger {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--danger);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--danger:hover {
|
||||||
|
background: var(--danger-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--sm {
|
||||||
|
padding: 0.35rem 0.65rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.page-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { Plus } from "lucide-react";
|
||||||
|
import "./PageHeader.css";
|
||||||
|
|
||||||
|
interface PageHeaderProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
actionLabel?: string;
|
||||||
|
onAction?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PageHeader({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
actionLabel,
|
||||||
|
onAction,
|
||||||
|
}: PageHeaderProps) {
|
||||||
|
return (
|
||||||
|
<header className="page-header">
|
||||||
|
<div>
|
||||||
|
<h1 className="page-header__title">{title}</h1>
|
||||||
|
<p className="page-header__desc">{description}</p>
|
||||||
|
</div>
|
||||||
|
{actionLabel && onAction ? (
|
||||||
|
<button type="button" className="btn btn--primary" onClick={onAction}>
|
||||||
|
<Plus className="btn__icon" size={16} strokeWidth={2.5} aria-hidden />
|
||||||
|
<span>{actionLabel.replace(/^\+\s*/, "")}</span>
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination__meta {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination__controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination__page {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
min-width: 5.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
import "./Pagination.css";
|
||||||
|
|
||||||
|
interface PaginationProps {
|
||||||
|
page: number;
|
||||||
|
pageSize: number;
|
||||||
|
total: number;
|
||||||
|
onPageChange: (page: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Pagination({
|
||||||
|
page,
|
||||||
|
pageSize,
|
||||||
|
total,
|
||||||
|
onPageChange,
|
||||||
|
}: PaginationProps) {
|
||||||
|
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||||
|
const safePage = Math.min(page, totalPages);
|
||||||
|
const from = total === 0 ? 0 : (safePage - 1) * pageSize + 1;
|
||||||
|
const to = Math.min(safePage * pageSize, total);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pagination">
|
||||||
|
<p className="pagination__meta">
|
||||||
|
{total === 0 ? "No results" : `Showing ${from}–${to} of ${total}`}
|
||||||
|
</p>
|
||||||
|
<div className="pagination__controls">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--ghost btn--sm"
|
||||||
|
onClick={() => onPageChange(safePage - 1)}
|
||||||
|
disabled={safePage <= 1}
|
||||||
|
aria-label="Previous page"
|
||||||
|
>
|
||||||
|
<ChevronLeft size={15} />
|
||||||
|
Prev
|
||||||
|
</button>
|
||||||
|
<span className="pagination__page">
|
||||||
|
Page {safePage} / {totalPages}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--ghost btn--sm"
|
||||||
|
onClick={() => onPageChange(safePage + 1)}
|
||||||
|
disabled={safePage >= totalPages}
|
||||||
|
aria-label="Next page"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
<ChevronRight size={15} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { Navigate, Outlet } from "react-router-dom";
|
||||||
|
import { isAuthenticated } from "../lib/auth";
|
||||||
|
|
||||||
|
export function RequireAuth() {
|
||||||
|
if (!isAuthenticated()) {
|
||||||
|
return <Navigate to="/login" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return <Outlet />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,177 @@
|
|||||||
|
.richtext {
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--white);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__toolbar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.35rem;
|
||||||
|
padding: 0.55rem;
|
||||||
|
border-bottom: 1px solid var(--gray-100);
|
||||||
|
background: var(--gray-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap {
|
||||||
|
min-height: 220px;
|
||||||
|
padding: 0.9rem 1rem;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap p.is-editor-empty:first-child::before {
|
||||||
|
content: attr(data-placeholder);
|
||||||
|
float: left;
|
||||||
|
color: var(--gray-400);
|
||||||
|
pointer-events: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap h2 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin: 0.85rem 0 0.4rem;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap p,
|
||||||
|
.richtext__editor .tiptap ul,
|
||||||
|
.richtext__editor .tiptap ol,
|
||||||
|
.richtext__editor .tiptap blockquote {
|
||||||
|
margin: 0.45rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap ul,
|
||||||
|
.richtext__editor .tiptap ol {
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap blockquote {
|
||||||
|
border-left: 3px solid var(--blue);
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-wrapper] {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
line-height: 0;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-wrapper] img {
|
||||||
|
margin: 0;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Resize chrome only when the image is selected (or actively resizing) */
|
||||||
|
.richtext__editor .tiptap [data-resize-handle] {
|
||||||
|
position: absolute;
|
||||||
|
background: var(--blue);
|
||||||
|
border: 1px solid var(--white);
|
||||||
|
border-radius: 2px;
|
||||||
|
z-index: 10;
|
||||||
|
box-shadow: 0 0 0 1px rgba(11, 31, 58, 0.15);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-container].ProseMirror-selectednode [data-resize-handle],
|
||||||
|
.richtext__editor .tiptap [data-resize-state="true"] [data-resize-handle] {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle]:hover {
|
||||||
|
background: var(--blue-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="top-left"],
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="top-right"],
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="bottom-left"],
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="bottom-right"] {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="top-left"] {
|
||||||
|
top: -4px;
|
||||||
|
left: -4px;
|
||||||
|
cursor: nwse-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="top-right"] {
|
||||||
|
top: -4px;
|
||||||
|
right: -4px;
|
||||||
|
cursor: nesw-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="bottom-left"] {
|
||||||
|
bottom: -4px;
|
||||||
|
left: -4px;
|
||||||
|
cursor: nesw-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="bottom-right"] {
|
||||||
|
bottom: -4px;
|
||||||
|
right: -4px;
|
||||||
|
cursor: nwse-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="top"],
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="bottom"] {
|
||||||
|
height: 6px;
|
||||||
|
left: 8px;
|
||||||
|
right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="top"] {
|
||||||
|
top: -3px;
|
||||||
|
cursor: ns-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="bottom"] {
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: ns-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="left"],
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="right"] {
|
||||||
|
width: 6px;
|
||||||
|
top: 8px;
|
||||||
|
bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="left"] {
|
||||||
|
left: -3px;
|
||||||
|
cursor: ew-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-handle="right"] {
|
||||||
|
right: -3px;
|
||||||
|
cursor: ew-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-container].ProseMirror-selectednode [data-resize-wrapper],
|
||||||
|
.richtext__editor .tiptap [data-resize-state="true"] [data-resize-wrapper] {
|
||||||
|
outline: 1px solid var(--blue);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap [data-resize-container].ProseMirror-selectednode {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.richtext__editor .tiptap a {
|
||||||
|
color: var(--blue);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
@@ -0,0 +1,182 @@
|
|||||||
|
import { useRef } from "react";
|
||||||
|
import { EditorContent, useEditor } from "@tiptap/react";
|
||||||
|
import StarterKit from "@tiptap/starter-kit";
|
||||||
|
import Image from "@tiptap/extension-image";
|
||||||
|
import Placeholder from "@tiptap/extension-placeholder";
|
||||||
|
import Link from "@tiptap/extension-link";
|
||||||
|
import {
|
||||||
|
Bold,
|
||||||
|
Heading2,
|
||||||
|
ImagePlus,
|
||||||
|
Italic,
|
||||||
|
Link2,
|
||||||
|
List,
|
||||||
|
ListOrdered,
|
||||||
|
Quote,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { IconButton } from "./IconButton";
|
||||||
|
import "./RichTextEditor.css";
|
||||||
|
|
||||||
|
interface RichTextEditorProps {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
onChange: (html: string) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
allowImages?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function RichTextEditor({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
placeholder = "Write content…",
|
||||||
|
allowImages = true,
|
||||||
|
}: RichTextEditorProps) {
|
||||||
|
const fileRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
const editor = useEditor({
|
||||||
|
extensions: [
|
||||||
|
StarterKit,
|
||||||
|
...(allowImages
|
||||||
|
? [
|
||||||
|
Image.configure({
|
||||||
|
allowBase64: true,
|
||||||
|
resize: {
|
||||||
|
enabled: true,
|
||||||
|
directions: [
|
||||||
|
"top",
|
||||||
|
"bottom",
|
||||||
|
"left",
|
||||||
|
"right",
|
||||||
|
"top-left",
|
||||||
|
"top-right",
|
||||||
|
"bottom-left",
|
||||||
|
"bottom-right",
|
||||||
|
],
|
||||||
|
minWidth: 48,
|
||||||
|
minHeight: 48,
|
||||||
|
alwaysPreserveAspectRatio: true,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
Link.configure({ openOnClick: false }),
|
||||||
|
Placeholder.configure({ placeholder }),
|
||||||
|
],
|
||||||
|
content: value,
|
||||||
|
immediatelyRender: false,
|
||||||
|
onUpdate: ({ editor: ed }) => onChange(ed.getHTML()),
|
||||||
|
});
|
||||||
|
|
||||||
|
function insertImage(file: File | undefined) {
|
||||||
|
if (!file || !editor || !allowImages) return;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = () => {
|
||||||
|
editor
|
||||||
|
.chain()
|
||||||
|
.focus()
|
||||||
|
.setImage({ src: String(reader.result) })
|
||||||
|
.run();
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLink() {
|
||||||
|
if (!editor) return;
|
||||||
|
const previous = editor.getAttributes("link").href as string | undefined;
|
||||||
|
const url = window.prompt("URL", previous ?? "https://");
|
||||||
|
if (url === null) return;
|
||||||
|
if (url === "") {
|
||||||
|
editor.chain().focus().extendMarkRange("link").unsetLink().run();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!editor) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="field">
|
||||||
|
<span className="field__label">{label}</span>
|
||||||
|
<div className="richtext">
|
||||||
|
<div className="richtext__toolbar">
|
||||||
|
<IconButton
|
||||||
|
label="Bold"
|
||||||
|
variant={editor.isActive("bold") ? "primary" : "default"}
|
||||||
|
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||||
|
>
|
||||||
|
<Bold size={15} />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
label="Italic"
|
||||||
|
variant={editor.isActive("italic") ? "primary" : "default"}
|
||||||
|
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||||
|
>
|
||||||
|
<Italic size={15} />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
label="Heading"
|
||||||
|
variant={editor.isActive("heading", { level: 2 }) ? "primary" : "default"}
|
||||||
|
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||||
|
>
|
||||||
|
<Heading2 size={15} />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
label="Bullet list"
|
||||||
|
variant={editor.isActive("bulletList") ? "primary" : "default"}
|
||||||
|
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||||
|
>
|
||||||
|
<List size={15} />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
label="Numbered list"
|
||||||
|
variant={editor.isActive("orderedList") ? "primary" : "default"}
|
||||||
|
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||||
|
>
|
||||||
|
<ListOrdered size={15} />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
label="Quote"
|
||||||
|
variant={editor.isActive("blockquote") ? "primary" : "default"}
|
||||||
|
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
||||||
|
>
|
||||||
|
<Quote size={15} />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
label="Link"
|
||||||
|
variant={editor.isActive("link") ? "primary" : "default"}
|
||||||
|
onClick={setLink}
|
||||||
|
>
|
||||||
|
<Link2 size={15} />
|
||||||
|
</IconButton>
|
||||||
|
{allowImages ? (
|
||||||
|
<>
|
||||||
|
<IconButton
|
||||||
|
label="Insert image"
|
||||||
|
onClick={() => fileRef.current?.click()}
|
||||||
|
>
|
||||||
|
<ImagePlus size={15} />
|
||||||
|
</IconButton>
|
||||||
|
<input
|
||||||
|
ref={fileRef}
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
hidden
|
||||||
|
onChange={(e) => {
|
||||||
|
insertImage(e.target.files?.[0]);
|
||||||
|
e.target.value = "";
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<EditorContent editor={editor} className="richtext__editor" />
|
||||||
|
</div>
|
||||||
|
<p className="field__hint">
|
||||||
|
{allowImages
|
||||||
|
? "Click an image to select it, then drag the handles to resize."
|
||||||
|
: "Images are not allowed in this text. Use the gallery below."}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { Pencil, Trash2 } from "lucide-react";
|
||||||
|
import { IconButton } from "./IconButton";
|
||||||
|
|
||||||
|
interface RowActionsProps {
|
||||||
|
onEdit?: () => void;
|
||||||
|
onDelete?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function RowActions({ onEdit, onDelete }: RowActionsProps) {
|
||||||
|
return (
|
||||||
|
<div className="row-actions">
|
||||||
|
<IconButton label="Edit" onClick={onEdit}>
|
||||||
|
<Pencil size={15} />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton label="Delete" variant="danger" onClick={onDelete}>
|
||||||
|
<Trash2 size={15} />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,146 @@
|
|||||||
|
.sidebar {
|
||||||
|
width: var(--sidebar-width);
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--dark-blue);
|
||||||
|
color: var(--white);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0 0.5rem 1.75rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__mark {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: var(--blue);
|
||||||
|
color: var(--white);
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__name {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__role {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: rgba(255, 255, 255, 0.55);
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.7rem 0.75rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background 0.15s ease, color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__link:hover {
|
||||||
|
background: var(--dark-blue-mid);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__link--active {
|
||||||
|
background: var(--blue);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__icon {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__link--active .sidebar__icon {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__footer {
|
||||||
|
padding: 1rem 0.75rem 0.25rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__footer-label {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: rgba(255, 255, 255, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__footer-user {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__footer-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 0.55rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__footer-link:hover {
|
||||||
|
color: #7eb0ff;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 100%;
|
||||||
|
min-height: auto;
|
||||||
|
position: relative;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__brand {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__nav {
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
import { Building2, FileText, Home, Newspaper } from "lucide-react";
|
||||||
|
import { getCurrentUser } from "../lib/auth";
|
||||||
|
import { WEB_URL } from "../lib/config";
|
||||||
|
import "./Sidebar.css";
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ to: "/", label: "Home", icon: Home, end: true },
|
||||||
|
{ to: "/blog", label: "Blog", icon: Newspaper },
|
||||||
|
{ to: "/reportage", label: "Reportage", icon: FileText },
|
||||||
|
{ to: "/brands", label: "Brands", icon: Building2 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Sidebar() {
|
||||||
|
const user = getCurrentUser();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="sidebar">
|
||||||
|
<div className="sidebar__brand">
|
||||||
|
<span className="sidebar__mark">NT</span>
|
||||||
|
<div>
|
||||||
|
<p className="sidebar__name">NovinTrades</p>
|
||||||
|
<p className="sidebar__role">Super Admin</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="sidebar__nav" aria-label="Main">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<NavLink
|
||||||
|
key={item.to}
|
||||||
|
to={item.to}
|
||||||
|
end={item.end}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`sidebar__link${isActive ? " sidebar__link--active" : ""}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span className="sidebar__icon" aria-hidden>
|
||||||
|
<item.icon size={14} />
|
||||||
|
</span>
|
||||||
|
{item.label}
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="sidebar__footer">
|
||||||
|
<p className="sidebar__footer-label">Signed in as</p>
|
||||||
|
<p className="sidebar__footer-user">
|
||||||
|
{user?.email ?? "admin@novintrades.com"}
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
className="sidebar__footer-link"
|
||||||
|
href={WEB_URL}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Go To Website
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import type { VerificationStatus } from "../lib/types";
|
||||||
|
import { verificationLabel } from "../lib/format";
|
||||||
|
|
||||||
|
interface StatusBadgeProps {
|
||||||
|
status: VerificationStatus;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StatusBadge({ status, onClick }: StatusBadgeProps) {
|
||||||
|
const tone = status.toLowerCase();
|
||||||
|
const label = verificationLabel(status);
|
||||||
|
|
||||||
|
if (onClick) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`badge badge--${tone} badge--clickable`}
|
||||||
|
onClick={onClick}
|
||||||
|
aria-label={`Change status (current: ${label})`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <span className={`badge badge--${tone}`}>{label}</span>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
.status-modal {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 100;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(11, 31, 58, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__panel {
|
||||||
|
width: min(440px, 100%);
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__subtitle {
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__options {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem 0.85rem;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--white);
|
||||||
|
text-align: left;
|
||||||
|
transition: border-color 0.15s ease, background 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option:hover:not(:disabled) {
|
||||||
|
border-color: var(--blue);
|
||||||
|
background: var(--blue-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option:disabled {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option.is-active {
|
||||||
|
border-color: var(--blue);
|
||||||
|
background: var(--blue-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option--approved .status-modal__option-icon {
|
||||||
|
background: var(--success-soft);
|
||||||
|
color: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option--rejected .status-modal__option-icon {
|
||||||
|
background: var(--danger-soft);
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option--pending .status-modal__option-icon {
|
||||||
|
background: var(--blue-soft);
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.1rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option-text strong {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__option-text small {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__current {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--blue);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__error {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--danger);
|
||||||
|
background: var(--danger-soft);
|
||||||
|
padding: 0.55rem 0.7rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__hint,
|
||||||
|
.status-modal__footer {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-modal__footer strong {
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
import { Check, Clock, X } from "lucide-react";
|
||||||
|
import type { VerificationStatus } from "../lib/types";
|
||||||
|
import { verificationLabel } from "../lib/format";
|
||||||
|
import "./StatusModal.css";
|
||||||
|
|
||||||
|
const OPTIONS: {
|
||||||
|
value: VerificationStatus;
|
||||||
|
label: string;
|
||||||
|
description: string;
|
||||||
|
icon: typeof Check;
|
||||||
|
}[] = [
|
||||||
|
{
|
||||||
|
value: "APPROVED",
|
||||||
|
label: "Approve",
|
||||||
|
description: "Mark as approved and visible when published.",
|
||||||
|
icon: Check,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "REJECTED",
|
||||||
|
label: "Reject",
|
||||||
|
description: "Mark as rejected.",
|
||||||
|
icon: X,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "PENDING",
|
||||||
|
label: "Pend",
|
||||||
|
description: "Keep waiting for review.",
|
||||||
|
icon: Clock,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface StatusModalProps {
|
||||||
|
title: string;
|
||||||
|
current: VerificationStatus;
|
||||||
|
saving?: boolean;
|
||||||
|
error?: string;
|
||||||
|
onSelect: (status: VerificationStatus) => void;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StatusModal({
|
||||||
|
title,
|
||||||
|
current,
|
||||||
|
saving = false,
|
||||||
|
error = "",
|
||||||
|
onSelect,
|
||||||
|
onClose,
|
||||||
|
}: StatusModalProps) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="status-modal"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal
|
||||||
|
aria-labelledby="status-modal-title"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="status-modal__panel"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<header className="status-modal__header">
|
||||||
|
<div>
|
||||||
|
<h2 id="status-modal-title" className="status-modal__title">
|
||||||
|
Change status
|
||||||
|
</h2>
|
||||||
|
<p className="status-modal__subtitle">{title}</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--ghost btn--sm"
|
||||||
|
onClick={onClose}
|
||||||
|
disabled={saving}
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="status-modal__options">
|
||||||
|
{OPTIONS.map((option) => {
|
||||||
|
const Icon = option.icon;
|
||||||
|
const active = current === option.value;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={option.value}
|
||||||
|
type="button"
|
||||||
|
className={`status-modal__option status-modal__option--${option.value.toLowerCase()}${active ? " is-active" : ""}`}
|
||||||
|
onClick={() => onSelect(option.value)}
|
||||||
|
disabled={saving || active}
|
||||||
|
>
|
||||||
|
<span className="status-modal__option-icon" aria-hidden>
|
||||||
|
<Icon size={16} />
|
||||||
|
</span>
|
||||||
|
<span className="status-modal__option-text">
|
||||||
|
<strong>{option.label}</strong>
|
||||||
|
<small>{option.description}</small>
|
||||||
|
</span>
|
||||||
|
{active ? (
|
||||||
|
<span className="status-modal__current">Current</span>
|
||||||
|
) : null}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? <p className="status-modal__error">{error}</p> : null}
|
||||||
|
{saving ? <p className="status-modal__hint">Saving…</p> : null}
|
||||||
|
|
||||||
|
<p className="status-modal__footer">
|
||||||
|
Current: <strong>{verificationLabel(current)}</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
.tag-input {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.4rem;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 42px;
|
||||||
|
padding: 0.4rem 0.55rem;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-input:focus-within {
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-input__chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0.2rem 0.45rem;
|
||||||
|
background: var(--blue-soft);
|
||||||
|
color: var(--blue);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-input__remove {
|
||||||
|
display: inline-flex;
|
||||||
|
color: inherit;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-input__remove:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-input__field {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 140px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
font: inherit;
|
||||||
|
color: var(--gray-800);
|
||||||
|
padding: 0.2rem 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-input__field::placeholder {
|
||||||
|
color: var(--gray-400);
|
||||||
|
}
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
import { useState, type KeyboardEvent } from "react";
|
||||||
|
import { X } from "lucide-react";
|
||||||
|
import "./TagInput.css";
|
||||||
|
|
||||||
|
interface TagInputProps {
|
||||||
|
label: string;
|
||||||
|
value: string[];
|
||||||
|
onChange: (value: string[]) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TagInput({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
placeholder = "Type a tag and press Enter",
|
||||||
|
}: TagInputProps) {
|
||||||
|
const [draft, setDraft] = useState("");
|
||||||
|
|
||||||
|
function addTag(raw: string) {
|
||||||
|
const tag = raw.trim().replace(/^#/, "");
|
||||||
|
if (!tag) return;
|
||||||
|
if (value.some((item) => item.toLowerCase() === tag.toLowerCase())) {
|
||||||
|
setDraft("");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onChange([...value, tag]);
|
||||||
|
setDraft("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
|
||||||
|
if (e.key === "Enter" || e.key === ",") {
|
||||||
|
e.preventDefault();
|
||||||
|
addTag(draft);
|
||||||
|
} else if (e.key === "Backspace" && !draft && value.length > 0) {
|
||||||
|
onChange(value.slice(0, -1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label">{label}</label>
|
||||||
|
<div className="tag-input">
|
||||||
|
{value.map((tag) => (
|
||||||
|
<span key={tag} className="tag-input__chip">
|
||||||
|
{tag}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="tag-input__remove"
|
||||||
|
aria-label={`Remove ${tag}`}
|
||||||
|
onClick={() => onChange(value.filter((item) => item !== tag))}
|
||||||
|
>
|
||||||
|
<X size={12} />
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
<input
|
||||||
|
className="tag-input__field"
|
||||||
|
value={draft}
|
||||||
|
onChange={(e) => setDraft(e.target.value)}
|
||||||
|
onKeyDown={onKeyDown}
|
||||||
|
onBlur={() => addTag(draft)}
|
||||||
|
placeholder={value.length === 0 ? placeholder : "Add another…"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="field__hint">Press Enter to add a tag.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
.title-preview {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
min-width: 220px;
|
||||||
|
max-width: 440px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-preview__media {
|
||||||
|
flex: 0 0 60px;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
max-height: 60px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--gray-100);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-preview__media img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 60px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-preview__placeholder {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-preview__body {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-preview__title {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
line-height: 1.35;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-preview__abstract {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1.35;
|
||||||
|
color: var(--gray-600);
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import "./TitlePreviewCell.css";
|
||||||
|
|
||||||
|
interface TitlePreviewCellProps {
|
||||||
|
title: string;
|
||||||
|
abstract?: string | null;
|
||||||
|
imageUrl?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TitlePreviewCell({
|
||||||
|
title,
|
||||||
|
abstract,
|
||||||
|
imageUrl,
|
||||||
|
}: TitlePreviewCellProps) {
|
||||||
|
return (
|
||||||
|
<div className="title-preview">
|
||||||
|
<div className="title-preview__media" aria-hidden={!imageUrl}>
|
||||||
|
{imageUrl ? (
|
||||||
|
<img src={imageUrl} alt="" />
|
||||||
|
) : (
|
||||||
|
<span className="title-preview__placeholder" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="title-preview__body">
|
||||||
|
<p className="title-preview__title">{title}</p>
|
||||||
|
<p className="title-preview__abstract">
|
||||||
|
{abstract?.trim() || "No abstract"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
export const countries = [
|
||||||
|
"Iran",
|
||||||
|
"UAE",
|
||||||
|
"Turkey",
|
||||||
|
"Saudi Arabia",
|
||||||
|
"Qatar",
|
||||||
|
"Oman",
|
||||||
|
"Germany",
|
||||||
|
"China",
|
||||||
|
"India",
|
||||||
|
"Other",
|
||||||
|
];
|
||||||
@@ -0,0 +1,160 @@
|
|||||||
|
:root {
|
||||||
|
--blue: #1a6cf0;
|
||||||
|
--blue-hover: #1558c9;
|
||||||
|
--blue-soft: #e8f0fe;
|
||||||
|
--dark-blue: #0b1f3a;
|
||||||
|
--dark-blue-mid: #132a4a;
|
||||||
|
--white: #ffffff;
|
||||||
|
--gray-50: #f5f7fa;
|
||||||
|
--gray-100: #eef1f6;
|
||||||
|
--gray-200: #dde3ec;
|
||||||
|
--gray-400: #8b97a8;
|
||||||
|
--gray-600: #5a6577;
|
||||||
|
--gray-800: #1f2937;
|
||||||
|
--danger: #d64545;
|
||||||
|
--danger-soft: #fdecec;
|
||||||
|
--success: #1f9d6c;
|
||||||
|
--success-soft: #e6f7f0;
|
||||||
|
--sidebar-width: 240px;
|
||||||
|
--radius: 6px;
|
||||||
|
--font: "Plus Jakarta Sans", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#root {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font);
|
||||||
|
background: var(--gray-50);
|
||||||
|
color: var(--gray-800);
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__hint {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-input,
|
||||||
|
.field-textarea,
|
||||||
|
.field-select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.65rem 0.85rem;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--white);
|
||||||
|
color: var(--gray-800);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-input:focus,
|
||||||
|
.field-textarea:focus,
|
||||||
|
.field-select:focus {
|
||||||
|
border-color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-textarea {
|
||||||
|
min-height: 110px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0.55rem 1rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--primary {
|
||||||
|
background: var(--blue);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--primary:hover {
|
||||||
|
background: var(--blue-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--ghost {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--gray-600);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--ghost:hover {
|
||||||
|
background: var(--gray-100);
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--danger {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--danger);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--danger:hover {
|
||||||
|
background: var(--danger-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--sm {
|
||||||
|
padding: 0.35rem 0.65rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
export class ApiError extends Error {
|
||||||
|
status: number;
|
||||||
|
|
||||||
|
constructor(status: number, message: string) {
|
||||||
|
super(message);
|
||||||
|
this.name = "ApiError";
|
||||||
|
this.status = status;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function parseError(response: Response): Promise<string> {
|
||||||
|
try {
|
||||||
|
const data = (await response.json()) as { error?: unknown };
|
||||||
|
if (typeof data.error === "string") return data.error;
|
||||||
|
return response.statusText || "Request failed";
|
||||||
|
} catch {
|
||||||
|
return response.statusText || "Request failed";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function api<T>(
|
||||||
|
path: string,
|
||||||
|
init?: RequestInit,
|
||||||
|
): Promise<T> {
|
||||||
|
const response = await fetch(path, {
|
||||||
|
...init,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
...(init?.headers ?? {}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new ApiError(response.status, await parseError(response));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (response.status === 204) {
|
||||||
|
return undefined as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (await response.json()) as T;
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import type { AuthUser } from "./types";
|
||||||
|
|
||||||
|
const AUTH_KEY = "novintrades_admin_session";
|
||||||
|
|
||||||
|
interface Session {
|
||||||
|
user: AuthUser;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSession(): Session | null {
|
||||||
|
const raw = localStorage.getItem(AUTH_KEY);
|
||||||
|
if (!raw) return null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
return JSON.parse(raw) as Session;
|
||||||
|
} catch {
|
||||||
|
localStorage.removeItem(AUTH_KEY);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isAuthenticated(): boolean {
|
||||||
|
return getSession() !== null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCurrentUser(): AuthUser | null {
|
||||||
|
return getSession()?.user ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function loginSession(user: AuthUser): void {
|
||||||
|
localStorage.setItem(AUTH_KEY, JSON.stringify({ user }));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function logoutSession(): void {
|
||||||
|
localStorage.removeItem(AUTH_KEY);
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import type { SelectOption } from "../components/MultiSelect";
|
||||||
|
import type { Category } from "./types";
|
||||||
|
|
||||||
|
/** Flatten categories into tree order with depth for indented multi-select. */
|
||||||
|
export function flattenCategoryOptions(
|
||||||
|
categories: Category[],
|
||||||
|
): SelectOption[] {
|
||||||
|
const byParent = new Map<string | null, Category[]>();
|
||||||
|
|
||||||
|
for (const category of categories) {
|
||||||
|
const key = category.parentId;
|
||||||
|
const list = byParent.get(key) ?? [];
|
||||||
|
list.push(category);
|
||||||
|
byParent.set(key, list);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const list of byParent.values()) {
|
||||||
|
list.sort((a, b) => a.name.localeCompare(b.name));
|
||||||
|
}
|
||||||
|
|
||||||
|
const options: SelectOption[] = [];
|
||||||
|
|
||||||
|
function walk(parentId: string | null, depth: number) {
|
||||||
|
for (const category of byParent.get(parentId) ?? []) {
|
||||||
|
options.push({
|
||||||
|
value: category.id,
|
||||||
|
label: category.name,
|
||||||
|
depth,
|
||||||
|
});
|
||||||
|
walk(category.id, depth + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
walk(null, 0);
|
||||||
|
return options;
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
/** Public website URL (override with VITE_WEB_URL). */
|
||||||
|
export const WEB_URL =
|
||||||
|
import.meta.env.VITE_WEB_URL ?? "http://novintrades.local:5174";
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import type { Category, VerificationStatus } from "./types";
|
||||||
|
|
||||||
|
export function formatDate(value: string | null | undefined): string {
|
||||||
|
if (!value) return "—";
|
||||||
|
const date = new Date(value);
|
||||||
|
if (Number.isNaN(date.getTime())) return "—";
|
||||||
|
const day = date.toLocaleDateString("en-CA");
|
||||||
|
const time = date.toLocaleTimeString("en-GB", {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
});
|
||||||
|
return `${day} ${time}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function categoryNames(
|
||||||
|
links: { category: Pick<Category, "name"> }[],
|
||||||
|
): string {
|
||||||
|
if (!links.length) return "—";
|
||||||
|
return links.map((link) => link.category.name).join(", ");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function verificationLabel(status: VerificationStatus): string {
|
||||||
|
switch (status) {
|
||||||
|
case "APPROVED":
|
||||||
|
return "Approved";
|
||||||
|
case "REJECTED":
|
||||||
|
return "Rejected";
|
||||||
|
default:
|
||||||
|
return "Pending";
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
export const MAX_IMAGE_BYTES = 250 * 1024;
|
||||||
|
|
||||||
|
export function maxImageLabel(): string {
|
||||||
|
return `${Math.round(MAX_IMAGE_BYTES / 1024)}KB`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function assertClientImageSize(bytes: number): void {
|
||||||
|
if (bytes > MAX_IMAGE_BYTES) {
|
||||||
|
throw new Error(`Image must be ${maxImageLabel()} or smaller`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function dataUrlToBlob(dataUrl: string): Promise<Blob> {
|
||||||
|
const response = await fetch(dataUrl);
|
||||||
|
return response.blob();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function canvasToJpegBlob(
|
||||||
|
canvas: HTMLCanvasElement,
|
||||||
|
quality = 0.85,
|
||||||
|
): Promise<Blob> {
|
||||||
|
const blob = await new Promise<Blob | null>((resolve) => {
|
||||||
|
canvas.toBlob((result) => resolve(result), "image/jpeg", quality);
|
||||||
|
});
|
||||||
|
if (!blob) throw new Error("Could not encode image");
|
||||||
|
return blob;
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
import type { ListFilterValues } from "../components/ListToolbar";
|
||||||
|
import type { VerificationStatus } from "./types";
|
||||||
|
|
||||||
|
export const PAGE_SIZE = 10;
|
||||||
|
|
||||||
|
export const emptyFilters: ListFilterValues = {
|
||||||
|
query: "",
|
||||||
|
status: "all",
|
||||||
|
categoryId: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function matchesListFilters<
|
||||||
|
T extends {
|
||||||
|
title: string;
|
||||||
|
verificationStatus: VerificationStatus;
|
||||||
|
categories: { categoryId: string }[];
|
||||||
|
},
|
||||||
|
>(
|
||||||
|
row: T,
|
||||||
|
filters: ListFilterValues,
|
||||||
|
extraSearch?: string,
|
||||||
|
): boolean {
|
||||||
|
const q = filters.query.trim().toLowerCase();
|
||||||
|
const haystack = `${row.title} ${extraSearch ?? ""}`.toLowerCase();
|
||||||
|
const matchesQuery = !q || haystack.includes(q);
|
||||||
|
const matchesStatus =
|
||||||
|
filters.status === "all" || row.verificationStatus === filters.status;
|
||||||
|
const matchesCategory =
|
||||||
|
!filters.categoryId ||
|
||||||
|
row.categories.some((link) => link.categoryId === filters.categoryId);
|
||||||
|
return matchesQuery && matchesStatus && matchesCategory;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function paginateRows<T>(rows: T[], page: number, pageSize = PAGE_SIZE) {
|
||||||
|
const total = rows.length;
|
||||||
|
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||||||
|
const safePage = Math.min(Math.max(1, page), totalPages);
|
||||||
|
const start = (safePage - 1) * pageSize;
|
||||||
|
return {
|
||||||
|
page: safePage,
|
||||||
|
total,
|
||||||
|
items: rows.slice(start, start + pageSize),
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,202 @@
|
|||||||
|
import { api, ApiError } from "./api";
|
||||||
|
import { assertClientImageSize } from "./image";
|
||||||
|
import type {
|
||||||
|
AuthUser,
|
||||||
|
Blog,
|
||||||
|
Brand,
|
||||||
|
BrandContact,
|
||||||
|
Category,
|
||||||
|
Reportage,
|
||||||
|
VerificationStatus,
|
||||||
|
} from "./types";
|
||||||
|
|
||||||
|
export function login(email: string, password: string) {
|
||||||
|
return api<{ user: AuthUser }>("/api/auth/login", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ email, password }),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function listCategories() {
|
||||||
|
return api<Category[]>("/api/categories");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function listBlogs() {
|
||||||
|
return api<Blog[]>("/api/blogs");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getBlog(id: string) {
|
||||||
|
return api<Blog>(`/api/blogs/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createBlog(input: {
|
||||||
|
title: string;
|
||||||
|
abstract?: string;
|
||||||
|
content?: string;
|
||||||
|
imageUrl?: string | null;
|
||||||
|
tags?: string[];
|
||||||
|
categoryIds?: string[];
|
||||||
|
authorId: string;
|
||||||
|
verificationStatus?: VerificationStatus;
|
||||||
|
}) {
|
||||||
|
return api<Blog>("/api/blogs", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(input),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateBlog(
|
||||||
|
id: string,
|
||||||
|
input: {
|
||||||
|
title?: string;
|
||||||
|
abstract?: string;
|
||||||
|
content?: string;
|
||||||
|
imageUrl?: string | null;
|
||||||
|
tags?: string[];
|
||||||
|
categoryIds?: string[];
|
||||||
|
verificationStatus?: VerificationStatus;
|
||||||
|
publishedAt?: string | null;
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
return api<Blog>(`/api/blogs/${id}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
body: JSON.stringify(input),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function listReportages() {
|
||||||
|
return api<Reportage[]>("/api/reportages");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getReportage(id: string) {
|
||||||
|
return api<Reportage>(`/api/reportages/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createReportage(input: {
|
||||||
|
title: string;
|
||||||
|
businessOwner: string;
|
||||||
|
abstract?: string;
|
||||||
|
content?: string;
|
||||||
|
imageUrl?: string | null;
|
||||||
|
tags?: string[];
|
||||||
|
categoryIds?: string[];
|
||||||
|
authorId: string;
|
||||||
|
verificationStatus?: VerificationStatus;
|
||||||
|
}) {
|
||||||
|
return api<Reportage>("/api/reportages", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(input),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateReportage(
|
||||||
|
id: string,
|
||||||
|
input: {
|
||||||
|
title?: string;
|
||||||
|
businessOwner?: string;
|
||||||
|
abstract?: string;
|
||||||
|
content?: string;
|
||||||
|
imageUrl?: string | null;
|
||||||
|
tags?: string[];
|
||||||
|
categoryIds?: string[];
|
||||||
|
verificationStatus?: VerificationStatus;
|
||||||
|
publishedAt?: string | null;
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
return api<Reportage>(`/api/reportages/${id}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
body: JSON.stringify(input),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function listBrands() {
|
||||||
|
return api<Brand[]>("/api/brands");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getBrand(id: string) {
|
||||||
|
return api<Brand>(`/api/brands/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createBrand(input: {
|
||||||
|
title: string;
|
||||||
|
abstract?: string;
|
||||||
|
content?: string;
|
||||||
|
imageUrl?: string | null;
|
||||||
|
galleryUrls?: string[];
|
||||||
|
tags?: string[];
|
||||||
|
country: string;
|
||||||
|
city?: string;
|
||||||
|
address?: string;
|
||||||
|
contacts?: BrandContact[];
|
||||||
|
categoryIds?: string[];
|
||||||
|
authorId: string;
|
||||||
|
verificationStatus?: VerificationStatus;
|
||||||
|
}) {
|
||||||
|
return api<Brand>("/api/brands", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(input),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateBrand(
|
||||||
|
id: string,
|
||||||
|
input: {
|
||||||
|
title?: string;
|
||||||
|
abstract?: string;
|
||||||
|
content?: string;
|
||||||
|
imageUrl?: string | null;
|
||||||
|
galleryUrls?: string[];
|
||||||
|
tags?: string[];
|
||||||
|
country?: string;
|
||||||
|
city?: string;
|
||||||
|
address?: string;
|
||||||
|
contacts?: BrandContact[];
|
||||||
|
categoryIds?: string[];
|
||||||
|
verificationStatus?: VerificationStatus;
|
||||||
|
publishedAt?: string | null;
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
return api<Brand>(`/api/brands/${id}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
body: JSON.stringify(input),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function uploadImage(
|
||||||
|
file: Blob,
|
||||||
|
folder: string,
|
||||||
|
): Promise<{ url: string; key: string; size: number }> {
|
||||||
|
assertClientImageSize(file.size);
|
||||||
|
|
||||||
|
const form = new FormData();
|
||||||
|
const filename =
|
||||||
|
file instanceof File && file.name
|
||||||
|
? file.name
|
||||||
|
: `image.${file.type.includes("png") ? "png" : "jpg"}`;
|
||||||
|
form.append("file", file, filename);
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/uploads?folder=${encodeURIComponent(folder)}`,
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
body: form,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
let message = "Upload failed";
|
||||||
|
try {
|
||||||
|
const data = (await response.json()) as { error?: string };
|
||||||
|
if (data.error) message = data.error;
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
throw new ApiError(response.status, message);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (await response.json()) as {
|
||||||
|
url: string;
|
||||||
|
key: string;
|
||||||
|
size: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
export type VerificationStatus = "PENDING" | "APPROVED" | "REJECTED";
|
||||||
|
|
||||||
|
export interface AuthUser {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
name: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Category {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
slug: string;
|
||||||
|
parentId: string | null;
|
||||||
|
children?: Category[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CategoryLink {
|
||||||
|
categoryId: string;
|
||||||
|
category: Category;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Blog {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
abstract: string | null;
|
||||||
|
content: string;
|
||||||
|
imageUrl: string | null;
|
||||||
|
tags: string[];
|
||||||
|
verificationStatus: VerificationStatus;
|
||||||
|
authorId: string;
|
||||||
|
author: AuthUser;
|
||||||
|
categories: CategoryLink[];
|
||||||
|
publishedAt: string | null;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Reportage {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
businessOwner: string;
|
||||||
|
abstract: string | null;
|
||||||
|
content: string;
|
||||||
|
imageUrl: string | null;
|
||||||
|
tags: string[];
|
||||||
|
verificationStatus: VerificationStatus;
|
||||||
|
authorId: string;
|
||||||
|
author: AuthUser;
|
||||||
|
categories: CategoryLink[];
|
||||||
|
publishedAt: string | null;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BrandContact {
|
||||||
|
type:
|
||||||
|
| "phone"
|
||||||
|
| "landline"
|
||||||
|
| "email"
|
||||||
|
| "instagram"
|
||||||
|
| "website"
|
||||||
|
| "whatsapp"
|
||||||
|
| "other";
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Brand {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
abstract: string | null;
|
||||||
|
content: string;
|
||||||
|
imageUrl: string | null;
|
||||||
|
galleryUrls: string[];
|
||||||
|
tags: string[];
|
||||||
|
country: string;
|
||||||
|
city: string | null;
|
||||||
|
address: string | null;
|
||||||
|
contacts: BrandContact[];
|
||||||
|
verificationStatus: VerificationStatus;
|
||||||
|
authorId: string;
|
||||||
|
author: AuthUser;
|
||||||
|
categories: CategoryLink[];
|
||||||
|
publishedAt: string | null;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import App from "./App";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
createRoot(document.getElementById("root")!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
@@ -0,0 +1,219 @@
|
|||||||
|
import { useEffect, useState, type FormEvent } from "react";
|
||||||
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
|
import { ImageCropper } from "../components/ImageCropper";
|
||||||
|
import { MultiSelect } from "../components/MultiSelect";
|
||||||
|
import { PageHeader } from "../components/PageHeader";
|
||||||
|
import { RichTextEditor } from "../components/RichTextEditor";
|
||||||
|
import { TagInput } from "../components/TagInput";
|
||||||
|
import { ApiError } from "../lib/api";
|
||||||
|
import { getCurrentUser } from "../lib/auth";
|
||||||
|
import { flattenCategoryOptions } from "../lib/categories";
|
||||||
|
import {
|
||||||
|
createBlog,
|
||||||
|
getBlog,
|
||||||
|
listCategories,
|
||||||
|
updateBlog,
|
||||||
|
} from "../lib/services";
|
||||||
|
import type { SelectOption } from "../components/MultiSelect";
|
||||||
|
import "../styles/forms.css";
|
||||||
|
|
||||||
|
export function BlogNewPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { id } = useParams();
|
||||||
|
const isEdit = Boolean(id);
|
||||||
|
const user = getCurrentUser();
|
||||||
|
|
||||||
|
const [categoryOptions, setCategoryOptions] = useState<SelectOption[]>([]);
|
||||||
|
const [categories, setCategories] = useState<string[]>([]);
|
||||||
|
const [title, setTitle] = useState("");
|
||||||
|
const [image, setImage] = useState<string | null>(null);
|
||||||
|
const [abstract, setAbstract] = useState("");
|
||||||
|
const [content, setContent] = useState("");
|
||||||
|
const [tags, setTags] = useState<string[]>([]);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(isEdit);
|
||||||
|
const [ready, setReady] = useState(!isEdit);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
try {
|
||||||
|
const data = await listCategories();
|
||||||
|
if (cancelled) return;
|
||||||
|
setCategoryOptions(flattenCategoryOptions(data));
|
||||||
|
|
||||||
|
if (id) {
|
||||||
|
const blog = await getBlog(id);
|
||||||
|
if (cancelled) return;
|
||||||
|
setTitle(blog.title);
|
||||||
|
setAbstract(blog.abstract ?? "");
|
||||||
|
setContent(blog.content);
|
||||||
|
setImage(blog.imageUrl);
|
||||||
|
setTags(blog.tags);
|
||||||
|
setCategories(blog.categories.map((c) => c.categoryId));
|
||||||
|
setReady(true);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (!cancelled) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError ? err.message : "Could not load post.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void load();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
async function onSubmit(e: FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setError("");
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
setError("You must be signed in.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSubmitting(true);
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
title: title.trim(),
|
||||||
|
abstract: abstract.trim() || undefined,
|
||||||
|
content,
|
||||||
|
imageUrl: image,
|
||||||
|
tags,
|
||||||
|
categoryIds: categories,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isEdit && id) {
|
||||||
|
await updateBlog(id, payload);
|
||||||
|
} else {
|
||||||
|
await createBlog({ ...payload, authorId: user.id });
|
||||||
|
}
|
||||||
|
navigate("/blog");
|
||||||
|
} catch (err) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError ? err.message : "Could not save post.",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setSubmitting(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<section className="form-page">
|
||||||
|
<PageHeader title="Edit post" description="Loading…" />
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>Loading post…</strong>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="form-page">
|
||||||
|
<PageHeader
|
||||||
|
title={isEdit ? "Edit post" : "New post"}
|
||||||
|
description={
|
||||||
|
isEdit
|
||||||
|
? "Update this blog article."
|
||||||
|
: "Create a blog article for the website."
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<form className="form-card" onSubmit={onSubmit}>
|
||||||
|
<div className="form-col-3">
|
||||||
|
<ImageCropper
|
||||||
|
label="Main image"
|
||||||
|
value={image}
|
||||||
|
onChange={setImage}
|
||||||
|
aspect={1}
|
||||||
|
folder="blogs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-9">
|
||||||
|
<div className="form-stack">
|
||||||
|
<MultiSelect
|
||||||
|
label="Category"
|
||||||
|
options={categoryOptions}
|
||||||
|
value={categories}
|
||||||
|
onChange={setCategories}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="post-title">
|
||||||
|
Title
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="post-title"
|
||||||
|
className="field-input"
|
||||||
|
value={title}
|
||||||
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
|
placeholder="Post title"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="post-abstract">
|
||||||
|
Abstract
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="post-abstract"
|
||||||
|
className="field-textarea"
|
||||||
|
value={abstract}
|
||||||
|
onChange={(e) => setAbstract(e.target.value)}
|
||||||
|
placeholder="Short summary shown in lists and previews"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-12">
|
||||||
|
{ready ? (
|
||||||
|
<RichTextEditor
|
||||||
|
key={id ?? "new"}
|
||||||
|
label="Main content"
|
||||||
|
value={content}
|
||||||
|
onChange={setContent}
|
||||||
|
placeholder="Write the full article…"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-12">
|
||||||
|
<TagInput label="Tags" value={tags} onChange={setTags} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? <p className="form-error">{error}</p> : null}
|
||||||
|
|
||||||
|
<div className="form-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--ghost"
|
||||||
|
onClick={() => navigate("/blog")}
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn--primary"
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
{submitting ? "Saving…" : isEdit ? "Update post" : "Save post"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,226 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { DataTable } from "../components/DataTable";
|
||||||
|
import {
|
||||||
|
ListToolbar,
|
||||||
|
type ListFilterValues,
|
||||||
|
} from "../components/ListToolbar";
|
||||||
|
import { PageHeader } from "../components/PageHeader";
|
||||||
|
import { Pagination } from "../components/Pagination";
|
||||||
|
import { RowActions } from "../components/RowActions";
|
||||||
|
import { StatusBadge } from "../components/StatusBadge";
|
||||||
|
import { StatusModal } from "../components/StatusModal";
|
||||||
|
import { TitlePreviewCell } from "../components/TitlePreviewCell";
|
||||||
|
import { ApiError } from "../lib/api";
|
||||||
|
import { categoryNames, formatDate } from "../lib/format";
|
||||||
|
import {
|
||||||
|
emptyFilters,
|
||||||
|
matchesListFilters,
|
||||||
|
PAGE_SIZE,
|
||||||
|
paginateRows,
|
||||||
|
} from "../lib/list";
|
||||||
|
import { listBlogs, listCategories, updateBlog } from "../lib/services";
|
||||||
|
import type { Blog, Category, VerificationStatus } from "../lib/types";
|
||||||
|
|
||||||
|
export function BlogPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [draft, setDraft] = useState<ListFilterValues>(emptyFilters);
|
||||||
|
const [applied, setApplied] = useState<ListFilterValues>(emptyFilters);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [rows, setRows] = useState<Blog[]>([]);
|
||||||
|
const [categories, setCategories] = useState<Category[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [selected, setSelected] = useState<Blog | null>(null);
|
||||||
|
const [savingStatus, setSavingStatus] = useState(false);
|
||||||
|
const [statusError, setStatusError] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
try {
|
||||||
|
const [posts, cats] = await Promise.all([
|
||||||
|
listBlogs(),
|
||||||
|
listCategories(),
|
||||||
|
]);
|
||||||
|
if (!cancelled) {
|
||||||
|
setRows(posts);
|
||||||
|
setCategories(cats);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (!cancelled) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError ? err.message : "Failed to load posts.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void load();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
return rows.filter((post) => {
|
||||||
|
const author = post.author.name ?? post.author.email;
|
||||||
|
return matchesListFilters(post, applied, author);
|
||||||
|
});
|
||||||
|
}, [applied, rows]);
|
||||||
|
|
||||||
|
const paged = useMemo(
|
||||||
|
() => paginateRows(filtered, page, PAGE_SIZE),
|
||||||
|
[filtered, page],
|
||||||
|
);
|
||||||
|
|
||||||
|
function applyFilters() {
|
||||||
|
setApplied(draft);
|
||||||
|
setPage(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function changeStatus(next: VerificationStatus) {
|
||||||
|
if (!selected || selected.verificationStatus === next) return;
|
||||||
|
setSavingStatus(true);
|
||||||
|
setStatusError("");
|
||||||
|
try {
|
||||||
|
const updated = await updateBlog(selected.id, {
|
||||||
|
verificationStatus: next,
|
||||||
|
publishedAt: next === "APPROVED" ? new Date().toISOString() : null,
|
||||||
|
});
|
||||||
|
setRows((prev) =>
|
||||||
|
prev.map((row) => (row.id === updated.id ? updated : row)),
|
||||||
|
);
|
||||||
|
setSelected(null);
|
||||||
|
} catch (err) {
|
||||||
|
setStatusError(
|
||||||
|
err instanceof ApiError ? err.message : "Failed to update status.",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setSavingStatus(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<PageHeader
|
||||||
|
title="Blog"
|
||||||
|
description="Manage articles shown on the public website."
|
||||||
|
actionLabel="New post"
|
||||||
|
onAction={() => navigate("/blog/new")}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ListToolbar
|
||||||
|
draft={draft}
|
||||||
|
onDraftChange={setDraft}
|
||||||
|
onFilter={applyFilters}
|
||||||
|
categories={categories}
|
||||||
|
searchPlaceholder="Search posts…"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>Loading posts…</strong>
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>Could not load posts</strong>
|
||||||
|
<p>{error}</p>
|
||||||
|
</div>
|
||||||
|
) : paged.total === 0 ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>No posts found</strong>
|
||||||
|
<p>Try a different filter or create a new post.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<DataTable<Blog>
|
||||||
|
rows={paged.items}
|
||||||
|
rowKey={(row) => row.id}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: "title",
|
||||||
|
header: "Title",
|
||||||
|
render: (row) => (
|
||||||
|
<TitlePreviewCell
|
||||||
|
title={row.title}
|
||||||
|
abstract={row.abstract}
|
||||||
|
imageUrl={row.imageUrl}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "author",
|
||||||
|
header: "Author",
|
||||||
|
render: (row) => (
|
||||||
|
<span className="cell-muted">
|
||||||
|
{row.author.name ?? row.author.email}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "category",
|
||||||
|
header: "Category",
|
||||||
|
render: (row) => categoryNames(row.categories),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "status",
|
||||||
|
header: "Status",
|
||||||
|
render: (row) => (
|
||||||
|
<StatusBadge
|
||||||
|
status={row.verificationStatus}
|
||||||
|
onClick={() => {
|
||||||
|
setStatusError("");
|
||||||
|
setSelected(row);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "publishedAt",
|
||||||
|
header: "Published",
|
||||||
|
render: (row) => (
|
||||||
|
<span className="cell-muted">
|
||||||
|
{formatDate(row.publishedAt)}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "actions",
|
||||||
|
header: "",
|
||||||
|
width: "100px",
|
||||||
|
render: (row) => (
|
||||||
|
<RowActions onEdit={() => navigate(`/blog/${row.id}/edit`)} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Pagination
|
||||||
|
page={paged.page}
|
||||||
|
pageSize={PAGE_SIZE}
|
||||||
|
total={paged.total}
|
||||||
|
onPageChange={setPage}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selected ? (
|
||||||
|
<StatusModal
|
||||||
|
title={selected.title}
|
||||||
|
current={selected.verificationStatus}
|
||||||
|
saving={savingStatus}
|
||||||
|
error={statusError}
|
||||||
|
onSelect={changeStatus}
|
||||||
|
onClose={() => {
|
||||||
|
if (!savingStatus) setSelected(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,324 @@
|
|||||||
|
import { useEffect, useState, type FormEvent } from "react";
|
||||||
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
ContactFields,
|
||||||
|
createContact,
|
||||||
|
type ContactItem,
|
||||||
|
} from "../components/ContactFields";
|
||||||
|
import { ImageCropper } from "../components/ImageCropper";
|
||||||
|
import { ImageGallery } from "../components/ImageGallery";
|
||||||
|
import { MultiSelect } from "../components/MultiSelect";
|
||||||
|
import { PageHeader } from "../components/PageHeader";
|
||||||
|
import { RichTextEditor } from "../components/RichTextEditor";
|
||||||
|
import { TagInput } from "../components/TagInput";
|
||||||
|
import { countries } from "../data/options";
|
||||||
|
import { ApiError } from "../lib/api";
|
||||||
|
import { getCurrentUser } from "../lib/auth";
|
||||||
|
import { flattenCategoryOptions } from "../lib/categories";
|
||||||
|
import {
|
||||||
|
createBrand,
|
||||||
|
getBrand,
|
||||||
|
listCategories,
|
||||||
|
updateBrand,
|
||||||
|
} from "../lib/services";
|
||||||
|
import type { BrandContact } from "../lib/types";
|
||||||
|
import type { SelectOption } from "../components/MultiSelect";
|
||||||
|
import "../styles/forms.css";
|
||||||
|
|
||||||
|
function toContactItems(contacts: BrandContact[]): ContactItem[] {
|
||||||
|
if (!contacts.length) {
|
||||||
|
return [createContact("phone"), createContact("email")];
|
||||||
|
}
|
||||||
|
return contacts.map((item) => ({
|
||||||
|
id: `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
|
||||||
|
type: item.type,
|
||||||
|
value: item.value,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BrandNewPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { id } = useParams();
|
||||||
|
const isEdit = Boolean(id);
|
||||||
|
const user = getCurrentUser();
|
||||||
|
|
||||||
|
const [categoryOptions, setCategoryOptions] = useState<SelectOption[]>([]);
|
||||||
|
const [categories, setCategories] = useState<string[]>([]);
|
||||||
|
const [name, setName] = useState("");
|
||||||
|
const [about, setAbout] = useState("");
|
||||||
|
const [image, setImage] = useState<string | null>(null);
|
||||||
|
const [gallery, setGallery] = useState<string[]>([]);
|
||||||
|
const [content, setContent] = useState("");
|
||||||
|
const [tags, setTags] = useState<string[]>([]);
|
||||||
|
const [country, setCountry] = useState("");
|
||||||
|
const [city, setCity] = useState("");
|
||||||
|
const [address, setAddress] = useState("");
|
||||||
|
const [contacts, setContacts] = useState<ContactItem[]>([
|
||||||
|
createContact("phone"),
|
||||||
|
createContact("email"),
|
||||||
|
]);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(isEdit);
|
||||||
|
const [ready, setReady] = useState(!isEdit);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
try {
|
||||||
|
const data = await listCategories();
|
||||||
|
if (cancelled) return;
|
||||||
|
setCategoryOptions(flattenCategoryOptions(data));
|
||||||
|
|
||||||
|
if (id) {
|
||||||
|
const brand = await getBrand(id);
|
||||||
|
if (cancelled) return;
|
||||||
|
setName(brand.title);
|
||||||
|
setAbout(brand.abstract ?? "");
|
||||||
|
setContent(brand.content);
|
||||||
|
setImage(brand.imageUrl);
|
||||||
|
setGallery(brand.galleryUrls ?? []);
|
||||||
|
setTags(brand.tags);
|
||||||
|
setCountry(brand.country);
|
||||||
|
setCity(brand.city ?? "");
|
||||||
|
setAddress(brand.address ?? "");
|
||||||
|
setContacts(toContactItems(brand.contacts ?? []));
|
||||||
|
setCategories(brand.categories.map((c) => c.categoryId));
|
||||||
|
setReady(true);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (!cancelled) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError ? err.message : "Could not load brand.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void load();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
async function onSubmit(e: FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setError("");
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
setError("You must be signed in.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSubmitting(true);
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
title: name.trim(),
|
||||||
|
abstract: about.trim() || undefined,
|
||||||
|
content,
|
||||||
|
imageUrl: image,
|
||||||
|
galleryUrls: gallery,
|
||||||
|
tags,
|
||||||
|
country,
|
||||||
|
city: city.trim() || undefined,
|
||||||
|
address: address.trim() || undefined,
|
||||||
|
contacts: contacts
|
||||||
|
.filter((item) => item.value.trim())
|
||||||
|
.map(({ type, value }) => ({ type, value: value.trim() })),
|
||||||
|
categoryIds: categories,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isEdit && id) {
|
||||||
|
await updateBrand(id, payload);
|
||||||
|
} else {
|
||||||
|
await createBrand({ ...payload, authorId: user.id });
|
||||||
|
}
|
||||||
|
navigate("/brands");
|
||||||
|
} catch (err) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError ? err.message : "Could not save brand.",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setSubmitting(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<section className="form-page">
|
||||||
|
<PageHeader title="Edit brand" description="Loading…" />
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>Loading brand…</strong>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="form-page">
|
||||||
|
<PageHeader
|
||||||
|
title={isEdit ? "Edit brand" : "New brand"}
|
||||||
|
description={
|
||||||
|
isEdit
|
||||||
|
? "Update this business profile."
|
||||||
|
: "Add a business profile to NovinTrades."
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<form className="form-card" onSubmit={onSubmit}>
|
||||||
|
<div className="form-col-3">
|
||||||
|
<ImageCropper
|
||||||
|
label="Main image"
|
||||||
|
value={image}
|
||||||
|
onChange={setImage}
|
||||||
|
aspect={1}
|
||||||
|
folder="brands"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-9">
|
||||||
|
<div className="form-stack">
|
||||||
|
<MultiSelect
|
||||||
|
label="Category"
|
||||||
|
options={categoryOptions}
|
||||||
|
value={categories}
|
||||||
|
onChange={setCategories}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="brand-name">
|
||||||
|
Title
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="brand-name"
|
||||||
|
className="field-input"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder="Brand name"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="brand-about">
|
||||||
|
Abstract
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="brand-about"
|
||||||
|
className="field-textarea"
|
||||||
|
value={about}
|
||||||
|
onChange={(e) => setAbout(e.target.value)}
|
||||||
|
placeholder="Short description of the business"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-12">
|
||||||
|
{ready ? (
|
||||||
|
<RichTextEditor
|
||||||
|
key={id ?? "new"}
|
||||||
|
label="Main content"
|
||||||
|
value={content}
|
||||||
|
onChange={setContent}
|
||||||
|
placeholder="Write the full brand story…"
|
||||||
|
allowImages={false}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-12">
|
||||||
|
<ImageGallery
|
||||||
|
label="Image gallery"
|
||||||
|
value={gallery}
|
||||||
|
onChange={setGallery}
|
||||||
|
folder="brands"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-12">
|
||||||
|
<TagInput label="Tags" value={tags} onChange={setTags} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-2">
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="brand-country">
|
||||||
|
Country
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="brand-country"
|
||||||
|
className="field-select"
|
||||||
|
value={country}
|
||||||
|
onChange={(e) => setCountry(e.target.value)}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Select country</option>
|
||||||
|
{countries.map((item) => (
|
||||||
|
<option key={item} value={item}>
|
||||||
|
{item}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-2">
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="brand-city">
|
||||||
|
City
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="brand-city"
|
||||||
|
className="field-input"
|
||||||
|
value={city}
|
||||||
|
onChange={(e) => setCity(e.target.value)}
|
||||||
|
placeholder="City"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-8">
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="brand-address">
|
||||||
|
Address
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="brand-address"
|
||||||
|
className="field-input"
|
||||||
|
value={address}
|
||||||
|
onChange={(e) => setAddress(e.target.value)}
|
||||||
|
placeholder="Street, building, unit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-12">
|
||||||
|
<ContactFields value={contacts} onChange={setContacts} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? <p className="form-error">{error}</p> : null}
|
||||||
|
|
||||||
|
<div className="form-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--ghost"
|
||||||
|
onClick={() => navigate("/brands")}
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn--primary"
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
{submitting ? "Saving…" : isEdit ? "Update brand" : "Save brand"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,241 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { DataTable } from "../components/DataTable";
|
||||||
|
import {
|
||||||
|
ListToolbar,
|
||||||
|
type ListFilterValues,
|
||||||
|
} from "../components/ListToolbar";
|
||||||
|
import { PageHeader } from "../components/PageHeader";
|
||||||
|
import { Pagination } from "../components/Pagination";
|
||||||
|
import { RowActions } from "../components/RowActions";
|
||||||
|
import { StatusBadge } from "../components/StatusBadge";
|
||||||
|
import { StatusModal } from "../components/StatusModal";
|
||||||
|
import { TitlePreviewCell } from "../components/TitlePreviewCell";
|
||||||
|
import { ApiError } from "../lib/api";
|
||||||
|
import { categoryNames, formatDate } from "../lib/format";
|
||||||
|
import {
|
||||||
|
emptyFilters,
|
||||||
|
matchesListFilters,
|
||||||
|
PAGE_SIZE,
|
||||||
|
paginateRows,
|
||||||
|
} from "../lib/list";
|
||||||
|
import { listBrands, listCategories, updateBrand } from "../lib/services";
|
||||||
|
import type { Brand, Category, VerificationStatus } from "../lib/types";
|
||||||
|
|
||||||
|
function websiteFromContacts(brand: Brand): string {
|
||||||
|
const website = brand.contacts.find((c) => c.type === "website" && c.value);
|
||||||
|
return website?.value || "—";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BrandsPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [draft, setDraft] = useState<ListFilterValues>(emptyFilters);
|
||||||
|
const [applied, setApplied] = useState<ListFilterValues>(emptyFilters);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [rows, setRows] = useState<Brand[]>([]);
|
||||||
|
const [categories, setCategories] = useState<Category[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [selected, setSelected] = useState<Brand | null>(null);
|
||||||
|
const [savingStatus, setSavingStatus] = useState(false);
|
||||||
|
const [statusError, setStatusError] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
try {
|
||||||
|
const [items, cats] = await Promise.all([
|
||||||
|
listBrands(),
|
||||||
|
listCategories(),
|
||||||
|
]);
|
||||||
|
if (!cancelled) {
|
||||||
|
setRows(items);
|
||||||
|
setCategories(cats);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (!cancelled) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError ? err.message : "Failed to load brands.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void load();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
return rows.filter((brand) =>
|
||||||
|
matchesListFilters(
|
||||||
|
brand,
|
||||||
|
applied,
|
||||||
|
`${brand.country} ${brand.city ?? ""} ${categoryNames(brand.categories)}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}, [applied, rows]);
|
||||||
|
|
||||||
|
const paged = useMemo(
|
||||||
|
() => paginateRows(filtered, page, PAGE_SIZE),
|
||||||
|
[filtered, page],
|
||||||
|
);
|
||||||
|
|
||||||
|
function applyFilters() {
|
||||||
|
setApplied(draft);
|
||||||
|
setPage(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function changeStatus(next: VerificationStatus) {
|
||||||
|
if (!selected || selected.verificationStatus === next) return;
|
||||||
|
setSavingStatus(true);
|
||||||
|
setStatusError("");
|
||||||
|
try {
|
||||||
|
const updated = await updateBrand(selected.id, {
|
||||||
|
verificationStatus: next,
|
||||||
|
publishedAt: next === "APPROVED" ? new Date().toISOString() : null,
|
||||||
|
});
|
||||||
|
setRows((prev) =>
|
||||||
|
prev.map((row) => (row.id === updated.id ? updated : row)),
|
||||||
|
);
|
||||||
|
setSelected(null);
|
||||||
|
} catch (err) {
|
||||||
|
setStatusError(
|
||||||
|
err instanceof ApiError ? err.message : "Failed to update status.",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setSavingStatus(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<PageHeader
|
||||||
|
title="Brands"
|
||||||
|
description="Business profiles listed on NovinTrades."
|
||||||
|
actionLabel="New brand"
|
||||||
|
onAction={() => navigate("/brands/new")}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ListToolbar
|
||||||
|
draft={draft}
|
||||||
|
onDraftChange={setDraft}
|
||||||
|
onFilter={applyFilters}
|
||||||
|
categories={categories}
|
||||||
|
searchPlaceholder="Search brands…"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>Loading brands…</strong>
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>Could not load brands</strong>
|
||||||
|
<p>{error}</p>
|
||||||
|
</div>
|
||||||
|
) : paged.total === 0 ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>No brands found</strong>
|
||||||
|
<p>Try a different filter or create a new brand.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<DataTable<Brand>
|
||||||
|
rows={paged.items}
|
||||||
|
rowKey={(row) => row.id}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: "name",
|
||||||
|
header: "Brand",
|
||||||
|
render: (row) => (
|
||||||
|
<TitlePreviewCell
|
||||||
|
title={row.title}
|
||||||
|
abstract={row.abstract}
|
||||||
|
imageUrl={row.imageUrl}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "category",
|
||||||
|
header: "Category",
|
||||||
|
render: (row) => categoryNames(row.categories),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "country",
|
||||||
|
header: "Country",
|
||||||
|
render: (row) => row.country,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "website",
|
||||||
|
header: "Website",
|
||||||
|
render: (row) => (
|
||||||
|
<span className="cell-muted">
|
||||||
|
{websiteFromContacts(row)}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "status",
|
||||||
|
header: "Status",
|
||||||
|
render: (row) => (
|
||||||
|
<StatusBadge
|
||||||
|
status={row.verificationStatus}
|
||||||
|
onClick={() => {
|
||||||
|
setStatusError("");
|
||||||
|
setSelected(row);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "createdAt",
|
||||||
|
header: "Created",
|
||||||
|
render: (row) => (
|
||||||
|
<span className="cell-muted">
|
||||||
|
{formatDate(row.createdAt)}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "actions",
|
||||||
|
header: "",
|
||||||
|
width: "100px",
|
||||||
|
render: (row) => (
|
||||||
|
<RowActions
|
||||||
|
onEdit={() => navigate(`/brands/${row.id}/edit`)}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Pagination
|
||||||
|
page={paged.page}
|
||||||
|
pageSize={PAGE_SIZE}
|
||||||
|
total={paged.total}
|
||||||
|
onPageChange={setPage}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selected ? (
|
||||||
|
<StatusModal
|
||||||
|
title={selected.title}
|
||||||
|
current={selected.verificationStatus}
|
||||||
|
saving={savingStatus}
|
||||||
|
error={statusError}
|
||||||
|
onSelect={changeStatus}
|
||||||
|
onClose={() => {
|
||||||
|
if (!savingStatus) setSelected(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,124 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Building2,
|
||||||
|
FileText,
|
||||||
|
Newspaper,
|
||||||
|
PenLine,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { listBlogs, listBrands, listReportages } from "../lib/services";
|
||||||
|
import "../styles/forms.css";
|
||||||
|
|
||||||
|
export function HomePage() {
|
||||||
|
const [counts, setCounts] = useState({
|
||||||
|
blog: 0,
|
||||||
|
reportage: 0,
|
||||||
|
brands: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
try {
|
||||||
|
const [blogs, reportages, brands] = await Promise.all([
|
||||||
|
listBlogs(),
|
||||||
|
listReportages(),
|
||||||
|
listBrands(),
|
||||||
|
]);
|
||||||
|
if (cancelled) return;
|
||||||
|
setCounts({
|
||||||
|
blog: blogs.length,
|
||||||
|
reportage: reportages.length,
|
||||||
|
brands: brands.length,
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
// keep zeros on failure
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void load();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const tiles = [
|
||||||
|
{
|
||||||
|
to: "/blog",
|
||||||
|
title: "Blog",
|
||||||
|
description: "Articles on the public website",
|
||||||
|
count: counts.blog,
|
||||||
|
icon: Newspaper,
|
||||||
|
createTo: "/blog/new",
|
||||||
|
createLabel: "New post",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
to: "/reportage",
|
||||||
|
title: "Reportage",
|
||||||
|
description: "Brand features and editorial pieces",
|
||||||
|
count: counts.reportage,
|
||||||
|
icon: FileText,
|
||||||
|
createTo: "/reportage/new",
|
||||||
|
createLabel: "New reportage",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
to: "/brands",
|
||||||
|
title: "Brands",
|
||||||
|
description: "Business profiles on NovinTrades",
|
||||||
|
count: counts.brands,
|
||||||
|
icon: Building2,
|
||||||
|
createTo: "/brands/new",
|
||||||
|
createLabel: "New brand",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<header className="page-header">
|
||||||
|
<div>
|
||||||
|
<h1 className="page-header__title">Dashboard</h1>
|
||||||
|
<p className="page-header__desc">
|
||||||
|
Super admin overview for content and brands.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="dashboard-grid">
|
||||||
|
{tiles.map((tile) => {
|
||||||
|
const Icon = tile.icon;
|
||||||
|
return (
|
||||||
|
<Link key={tile.to} to={tile.to} className="dash-tile">
|
||||||
|
<span className="dash-tile__icon" aria-hidden>
|
||||||
|
<Icon size={20} />
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<h2 className="dash-tile__title">{tile.title}</h2>
|
||||||
|
<p className="dash-tile__meta">{tile.description}</p>
|
||||||
|
</div>
|
||||||
|
<p className="dash-tile__count">{tile.count}</p>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="dashboard-grid dashboard-grid--actions">
|
||||||
|
{tiles.map((tile) => (
|
||||||
|
<Link
|
||||||
|
key={tile.createTo}
|
||||||
|
to={tile.createTo}
|
||||||
|
className="dash-tile dash-tile--action"
|
||||||
|
>
|
||||||
|
<span className="dash-tile__icon" aria-hidden>
|
||||||
|
<PenLine size={18} />
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<h2 className="dash-tile__title">{tile.createLabel}</h2>
|
||||||
|
<p className="dash-tile__meta">Create in {tile.title}</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
.login {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 80% 60% at 20% 10%, var(--blue-soft) 0%, transparent 55%),
|
||||||
|
radial-gradient(ellipse 70% 50% at 90% 90%, #dbe8fb 0%, transparent 50%),
|
||||||
|
linear-gradient(160deg, var(--gray-50) 0%, #e8eef7 45%, var(--blue-soft) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login__panel {
|
||||||
|
width: min(420px, 100%);
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 2rem 1.75rem 1.75rem;
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login__brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.85rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login__mark {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: var(--blue);
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 4px;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login__title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login__subtitle {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gray-600);
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login__lead {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login__form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login__error {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--danger);
|
||||||
|
background: var(--danger-soft);
|
||||||
|
padding: 0.55rem 0.7rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login__submit {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
padding: 0.7rem 1rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
import { useState, type FormEvent } from "react";
|
||||||
|
import { Navigate, useNavigate } from "react-router-dom";
|
||||||
|
import { ApiError } from "../lib/api";
|
||||||
|
import { isAuthenticated, loginSession } from "../lib/auth";
|
||||||
|
import { login } from "../lib/services";
|
||||||
|
import "./LoginPage.css";
|
||||||
|
|
||||||
|
export function LoginPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
|
||||||
|
if (isAuthenticated()) {
|
||||||
|
return <Navigate to="/" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSubmit(e: FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setError("");
|
||||||
|
|
||||||
|
if (!email.trim() || !password) {
|
||||||
|
setError("Enter email and password.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSubmitting(true);
|
||||||
|
try {
|
||||||
|
const result = await login(email.trim(), password);
|
||||||
|
loginSession(result.user);
|
||||||
|
navigate("/", { replace: true });
|
||||||
|
} catch (err) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError ? err.message : "Could not sign in. Try again.",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setSubmitting(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="login">
|
||||||
|
<div className="login__panel">
|
||||||
|
<div className="login__brand">
|
||||||
|
<span className="login__mark">NT</span>
|
||||||
|
<div>
|
||||||
|
<h1 className="login__title">NovinTrades</h1>
|
||||||
|
<p className="login__subtitle">Super Admin</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="login__lead">Sign in to the admin dashboard.</p>
|
||||||
|
|
||||||
|
<form className="login__form" onSubmit={onSubmit} noValidate>
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="login-email">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="login-email"
|
||||||
|
className="field-input"
|
||||||
|
type="email"
|
||||||
|
autoComplete="username"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
placeholder="admin@novintrades.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="login-password">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="login-password"
|
||||||
|
className="field-input"
|
||||||
|
type="password"
|
||||||
|
autoComplete="current-password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
placeholder="••••••••"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? <p className="login__error">{error}</p> : null}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn--primary login__submit"
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
{submitting ? "Signing in…" : "Sign in"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,242 @@
|
|||||||
|
import { useEffect, useState, type FormEvent } from "react";
|
||||||
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
|
import { ImageCropper } from "../components/ImageCropper";
|
||||||
|
import { MultiSelect } from "../components/MultiSelect";
|
||||||
|
import { PageHeader } from "../components/PageHeader";
|
||||||
|
import { RichTextEditor } from "../components/RichTextEditor";
|
||||||
|
import { TagInput } from "../components/TagInput";
|
||||||
|
import { ApiError } from "../lib/api";
|
||||||
|
import { getCurrentUser } from "../lib/auth";
|
||||||
|
import { flattenCategoryOptions } from "../lib/categories";
|
||||||
|
import {
|
||||||
|
createReportage,
|
||||||
|
getReportage,
|
||||||
|
listCategories,
|
||||||
|
updateReportage,
|
||||||
|
} from "../lib/services";
|
||||||
|
import type { SelectOption } from "../components/MultiSelect";
|
||||||
|
import "../styles/forms.css";
|
||||||
|
|
||||||
|
export function ReportageNewPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { id } = useParams();
|
||||||
|
const isEdit = Boolean(id);
|
||||||
|
const user = getCurrentUser();
|
||||||
|
|
||||||
|
const [categoryOptions, setCategoryOptions] = useState<SelectOption[]>([]);
|
||||||
|
const [categories, setCategories] = useState<string[]>([]);
|
||||||
|
const [title, setTitle] = useState("");
|
||||||
|
const [businessOwner, setBusinessOwner] = useState("");
|
||||||
|
const [image, setImage] = useState<string | null>(null);
|
||||||
|
const [abstract, setAbstract] = useState("");
|
||||||
|
const [content, setContent] = useState("");
|
||||||
|
const [tags, setTags] = useState<string[]>([]);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(isEdit);
|
||||||
|
const [ready, setReady] = useState(!isEdit);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
try {
|
||||||
|
const data = await listCategories();
|
||||||
|
if (cancelled) return;
|
||||||
|
setCategoryOptions(flattenCategoryOptions(data));
|
||||||
|
|
||||||
|
if (id) {
|
||||||
|
const reportage = await getReportage(id);
|
||||||
|
if (cancelled) return;
|
||||||
|
setTitle(reportage.title);
|
||||||
|
setBusinessOwner(reportage.businessOwner);
|
||||||
|
setAbstract(reportage.abstract ?? "");
|
||||||
|
setContent(reportage.content);
|
||||||
|
setImage(reportage.imageUrl);
|
||||||
|
setTags(reportage.tags);
|
||||||
|
setCategories(reportage.categories.map((c) => c.categoryId));
|
||||||
|
setReady(true);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (!cancelled) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError
|
||||||
|
? err.message
|
||||||
|
: "Could not load reportage.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void load();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
async function onSubmit(e: FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setError("");
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
setError("You must be signed in.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSubmitting(true);
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
title: title.trim(),
|
||||||
|
businessOwner: businessOwner.trim(),
|
||||||
|
abstract: abstract.trim() || undefined,
|
||||||
|
content,
|
||||||
|
imageUrl: image,
|
||||||
|
tags,
|
||||||
|
categoryIds: categories,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isEdit && id) {
|
||||||
|
await updateReportage(id, payload);
|
||||||
|
} else {
|
||||||
|
await createReportage({ ...payload, authorId: user.id });
|
||||||
|
}
|
||||||
|
navigate("/reportage");
|
||||||
|
} catch (err) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError ? err.message : "Could not save reportage.",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setSubmitting(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<section className="form-page">
|
||||||
|
<PageHeader title="Edit reportage" description="Loading…" />
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>Loading reportage…</strong>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="form-page">
|
||||||
|
<PageHeader
|
||||||
|
title={isEdit ? "Edit reportage" : "New reportage"}
|
||||||
|
description={
|
||||||
|
isEdit
|
||||||
|
? "Update this brand feature or editorial piece."
|
||||||
|
: "Create a brand feature or editorial piece."
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<form className="form-card" onSubmit={onSubmit}>
|
||||||
|
<div className="form-col-3">
|
||||||
|
<ImageCropper
|
||||||
|
label="Main image"
|
||||||
|
value={image}
|
||||||
|
onChange={setImage}
|
||||||
|
aspect={1}
|
||||||
|
folder="reportages"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-9">
|
||||||
|
<div className="form-stack">
|
||||||
|
<MultiSelect
|
||||||
|
label="Category"
|
||||||
|
options={categoryOptions}
|
||||||
|
value={categories}
|
||||||
|
onChange={setCategories}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="reportage-title">
|
||||||
|
Title
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="reportage-title"
|
||||||
|
className="field-input"
|
||||||
|
value={title}
|
||||||
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
|
placeholder="Reportage title"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="business-owner">
|
||||||
|
Business owner
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="business-owner"
|
||||||
|
className="field-input"
|
||||||
|
value={businessOwner}
|
||||||
|
onChange={(e) => setBusinessOwner(e.target.value)}
|
||||||
|
placeholder="Brand or company name"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field">
|
||||||
|
<label className="field__label" htmlFor="reportage-abstract">
|
||||||
|
Abstract
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="reportage-abstract"
|
||||||
|
className="field-textarea"
|
||||||
|
value={abstract}
|
||||||
|
onChange={(e) => setAbstract(e.target.value)}
|
||||||
|
placeholder="Short summary for listings"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-12">
|
||||||
|
{ready ? (
|
||||||
|
<RichTextEditor
|
||||||
|
key={id ?? "new"}
|
||||||
|
label="Main content"
|
||||||
|
value={content}
|
||||||
|
onChange={setContent}
|
||||||
|
placeholder="Write the full reportage…"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-col-12">
|
||||||
|
<TagInput label="Tags" value={tags} onChange={setTags} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? <p className="form-error">{error}</p> : null}
|
||||||
|
|
||||||
|
<div className="form-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn--ghost"
|
||||||
|
onClick={() => navigate("/reportage")}
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn--primary"
|
||||||
|
disabled={submitting}
|
||||||
|
>
|
||||||
|
{submitting
|
||||||
|
? "Saving…"
|
||||||
|
: isEdit
|
||||||
|
? "Update reportage"
|
||||||
|
: "Save reportage"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { DataTable } from "../components/DataTable";
|
||||||
|
import {
|
||||||
|
ListToolbar,
|
||||||
|
type ListFilterValues,
|
||||||
|
} from "../components/ListToolbar";
|
||||||
|
import { PageHeader } from "../components/PageHeader";
|
||||||
|
import { Pagination } from "../components/Pagination";
|
||||||
|
import { RowActions } from "../components/RowActions";
|
||||||
|
import { StatusBadge } from "../components/StatusBadge";
|
||||||
|
import { StatusModal } from "../components/StatusModal";
|
||||||
|
import { TitlePreviewCell } from "../components/TitlePreviewCell";
|
||||||
|
import { ApiError } from "../lib/api";
|
||||||
|
import { categoryNames, formatDate } from "../lib/format";
|
||||||
|
import {
|
||||||
|
emptyFilters,
|
||||||
|
matchesListFilters,
|
||||||
|
PAGE_SIZE,
|
||||||
|
paginateRows,
|
||||||
|
} from "../lib/list";
|
||||||
|
import {
|
||||||
|
listCategories,
|
||||||
|
listReportages,
|
||||||
|
updateReportage,
|
||||||
|
} from "../lib/services";
|
||||||
|
import type { Category, Reportage, VerificationStatus } from "../lib/types";
|
||||||
|
|
||||||
|
export function ReportagePage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [draft, setDraft] = useState<ListFilterValues>(emptyFilters);
|
||||||
|
const [applied, setApplied] = useState<ListFilterValues>(emptyFilters);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [rows, setRows] = useState<Reportage[]>([]);
|
||||||
|
const [categories, setCategories] = useState<Category[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [selected, setSelected] = useState<Reportage | null>(null);
|
||||||
|
const [savingStatus, setSavingStatus] = useState(false);
|
||||||
|
const [statusError, setStatusError] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
setLoading(true);
|
||||||
|
setError("");
|
||||||
|
try {
|
||||||
|
const [items, cats] = await Promise.all([
|
||||||
|
listReportages(),
|
||||||
|
listCategories(),
|
||||||
|
]);
|
||||||
|
if (!cancelled) {
|
||||||
|
setRows(items);
|
||||||
|
setCategories(cats);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (!cancelled) {
|
||||||
|
setError(
|
||||||
|
err instanceof ApiError
|
||||||
|
? err.message
|
||||||
|
: "Failed to load reportages.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void load();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
return rows.filter((item) => {
|
||||||
|
const author = item.author.name ?? item.author.email;
|
||||||
|
return matchesListFilters(
|
||||||
|
item,
|
||||||
|
applied,
|
||||||
|
`${item.businessOwner} ${author}`,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}, [applied, rows]);
|
||||||
|
|
||||||
|
const paged = useMemo(
|
||||||
|
() => paginateRows(filtered, page, PAGE_SIZE),
|
||||||
|
[filtered, page],
|
||||||
|
);
|
||||||
|
|
||||||
|
function applyFilters() {
|
||||||
|
setApplied(draft);
|
||||||
|
setPage(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function changeStatus(next: VerificationStatus) {
|
||||||
|
if (!selected || selected.verificationStatus === next) return;
|
||||||
|
setSavingStatus(true);
|
||||||
|
setStatusError("");
|
||||||
|
try {
|
||||||
|
const updated = await updateReportage(selected.id, {
|
||||||
|
verificationStatus: next,
|
||||||
|
publishedAt: next === "APPROVED" ? new Date().toISOString() : null,
|
||||||
|
});
|
||||||
|
setRows((prev) =>
|
||||||
|
prev.map((row) => (row.id === updated.id ? updated : row)),
|
||||||
|
);
|
||||||
|
setSelected(null);
|
||||||
|
} catch (err) {
|
||||||
|
setStatusError(
|
||||||
|
err instanceof ApiError ? err.message : "Failed to update status.",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setSavingStatus(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<PageHeader
|
||||||
|
title="Reportage"
|
||||||
|
description="Brand features and sponsored editorial pieces."
|
||||||
|
actionLabel="New reportage"
|
||||||
|
onAction={() => navigate("/reportage/new")}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ListToolbar
|
||||||
|
draft={draft}
|
||||||
|
onDraftChange={setDraft}
|
||||||
|
onFilter={applyFilters}
|
||||||
|
categories={categories}
|
||||||
|
searchPlaceholder="Search reportages…"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>Loading reportages…</strong>
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>Could not load reportages</strong>
|
||||||
|
<p>{error}</p>
|
||||||
|
</div>
|
||||||
|
) : paged.total === 0 ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<strong>No reportages found</strong>
|
||||||
|
<p>Try a different filter or create a new reportage.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<DataTable<Reportage>
|
||||||
|
rows={paged.items}
|
||||||
|
rowKey={(row) => row.id}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
key: "title",
|
||||||
|
header: "Title",
|
||||||
|
render: (row) => (
|
||||||
|
<TitlePreviewCell
|
||||||
|
title={row.title}
|
||||||
|
abstract={row.abstract}
|
||||||
|
imageUrl={row.imageUrl}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "brand",
|
||||||
|
header: "Business",
|
||||||
|
render: (row) => row.businessOwner,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "author",
|
||||||
|
header: "Author",
|
||||||
|
render: (row) => (
|
||||||
|
<span className="cell-muted">
|
||||||
|
{row.author.name ?? row.author.email}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "category",
|
||||||
|
header: "Category",
|
||||||
|
render: (row) => categoryNames(row.categories),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "status",
|
||||||
|
header: "Status",
|
||||||
|
render: (row) => (
|
||||||
|
<StatusBadge
|
||||||
|
status={row.verificationStatus}
|
||||||
|
onClick={() => {
|
||||||
|
setStatusError("");
|
||||||
|
setSelected(row);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "publishedAt",
|
||||||
|
header: "Published",
|
||||||
|
render: (row) => (
|
||||||
|
<span className="cell-muted">
|
||||||
|
{formatDate(row.publishedAt)}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "actions",
|
||||||
|
header: "",
|
||||||
|
width: "100px",
|
||||||
|
render: (row) => (
|
||||||
|
<RowActions
|
||||||
|
onEdit={() => navigate(`/reportage/${row.id}/edit`)}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<Pagination
|
||||||
|
page={paged.page}
|
||||||
|
pageSize={PAGE_SIZE}
|
||||||
|
total={paged.total}
|
||||||
|
onPageChange={setPage}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selected ? (
|
||||||
|
<StatusModal
|
||||||
|
title={selected.title}
|
||||||
|
current={selected.verificationStatus}
|
||||||
|
saving={savingStatus}
|
||||||
|
error={statusError}
|
||||||
|
onSelect={changeStatus}
|
||||||
|
onClose={() => {
|
||||||
|
if (!savingStatus) setSelected(null);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,175 @@
|
|||||||
|
.form-page {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-card {
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1.25rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||||
|
gap: 1.1rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-col-2 {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-col-3 {
|
||||||
|
grid-column: span 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-col-8 {
|
||||||
|
grid-column: span 8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-col-9 {
|
||||||
|
grid-column: span 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-col-12 {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-stack {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-stack .field-textarea {
|
||||||
|
min-height: 96px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
grid-column: span 12;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-tile {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.85rem;
|
||||||
|
padding: 1.25rem;
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--gray-200);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
transition: border-color 0.15s ease, background 0.15s ease;
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-tile:hover {
|
||||||
|
border-color: var(--blue);
|
||||||
|
background: var(--blue-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-tile__icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: var(--blue-soft);
|
||||||
|
color: var(--blue);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-tile:hover .dash-tile__icon {
|
||||||
|
background: var(--blue);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-tile__title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-tile__meta {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-tile__count {
|
||||||
|
margin-top: auto;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--blue);
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-grid--actions {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-tile--action {
|
||||||
|
min-height: 88px;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__hint {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--gray-400);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__error,
|
||||||
|
.crop-modal__error {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-modal__error {
|
||||||
|
padding: 0 1rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-error {
|
||||||
|
grid-column: span 12;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.75rem 0.9rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--danger-soft);
|
||||||
|
color: var(--danger);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
.form-col-2,
|
||||||
|
.form-col-3,
|
||||||
|
.form-col-8,
|
||||||
|
.form-col-9,
|
||||||
|
.form-col-12 {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023", "DOM"],
|
||||||
|
"module": "esnext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"allowArbitraryExtensions": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"module": "nodenext",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
host: "127.0.0.1",
|
||||||
|
port: 5173,
|
||||||
|
strictPort: true,
|
||||||
|
allowedHosts: ["novintrades.local", "novintrades.test"],
|
||||||
|
proxy: {
|
||||||
|
"/api": {
|
||||||
|
target: "http://127.0.0.1:3000",
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
"/health": {
|
||||||
|
target: "http://127.0.0.1:3000",
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"name": "@novintrades/api",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "tsx watch src/index.ts",
|
||||||
|
"build": "tsc -p tsconfig.json",
|
||||||
|
"start": "node dist/index.js",
|
||||||
|
"db:generate": "prisma generate",
|
||||||
|
"db:migrate": "prisma migrate dev",
|
||||||
|
"db:deploy": "prisma migrate deploy",
|
||||||
|
"db:seed": "tsx prisma/seed.ts",
|
||||||
|
"db:studio": "prisma studio"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@aws-sdk/client-s3": "^3.1093.0",
|
||||||
|
"@aws-sdk/s3-request-presigner": "^3.1093.0",
|
||||||
|
"@fastify/cors": "^11.1.0",
|
||||||
|
"@fastify/multipart": "^10.1.0",
|
||||||
|
"@prisma/client": "^6.16.2",
|
||||||
|
"bcryptjs": "^3.0.2",
|
||||||
|
"fastify": "^5.6.0",
|
||||||
|
"zod": "^4.1.11"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/bcryptjs": "^2.4.6",
|
||||||
|
"@types/node": "^24.13.2",
|
||||||
|
"prisma": "^6.16.2",
|
||||||
|
"tsx": "^4.20.5",
|
||||||
|
"typescript": "~5.9.2"
|
||||||
|
},
|
||||||
|
"prisma": {
|
||||||
|
"seed": "tsx prisma/seed.ts"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,169 @@
|
|||||||
|
/** Brand category tree sourced from Categories.docx (hierarchy preserved). */
|
||||||
|
export type CategoryNode = {
|
||||||
|
name: string;
|
||||||
|
children?: CategoryNode[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export const brandCategoryTree: CategoryNode[] = [
|
||||||
|
{
|
||||||
|
name: "Oil, Energy & Feedstocks",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "Oil Products",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "Fuels",
|
||||||
|
children: [
|
||||||
|
{ name: "Gasoline" },
|
||||||
|
{ name: "Diesel (EN590)" },
|
||||||
|
{ name: "Jet Fuel" },
|
||||||
|
{ name: "Kerosene" },
|
||||||
|
{ name: "LPG" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Industrial & Base Oils",
|
||||||
|
children: [
|
||||||
|
{ name: "Base Oil" },
|
||||||
|
{ name: "Engine Oil" },
|
||||||
|
{ name: "Hydraulic Oil" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Heavy & Residual Products",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "Bitumen",
|
||||||
|
children: [
|
||||||
|
{ name: "Bitumen 60/70" },
|
||||||
|
{ name: "Bitumen 80/100" },
|
||||||
|
{ name: "Bitumen 40/50" },
|
||||||
|
{ name: "VG 30" },
|
||||||
|
{ name: "VG 40" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ name: "Petroleum Coke" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Light Distillates & Solvents",
|
||||||
|
children: [
|
||||||
|
{ name: "Naphtha" },
|
||||||
|
{
|
||||||
|
name: "Solvents",
|
||||||
|
children: [
|
||||||
|
{ name: "White Spirit" },
|
||||||
|
{ name: "Industrial Solvents" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Energy Products",
|
||||||
|
children: [{ name: "Crude Oil" }, { name: "LNG" }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Industrial and Consumer Materials",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "Medical & Pharmaceutical",
|
||||||
|
children: [
|
||||||
|
{ name: "Medicines" },
|
||||||
|
{ name: "Medical Equipment" },
|
||||||
|
{ name: "Healthcare Products" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Textile & Apparel",
|
||||||
|
children: [
|
||||||
|
{ name: "Raw Textiles" },
|
||||||
|
{ name: "Fabrics" },
|
||||||
|
{ name: "Garments" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Materials & Crafted Goods",
|
||||||
|
children: [
|
||||||
|
{ name: "Titanium Dioxide" },
|
||||||
|
{ name: "Carbon Black" },
|
||||||
|
{ name: "Silica Powder" },
|
||||||
|
{ name: "Timber & Paper" },
|
||||||
|
{ name: "Leather" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ name: "Handicrafts" },
|
||||||
|
{
|
||||||
|
name: "Technology & Innovation",
|
||||||
|
children: [
|
||||||
|
{ name: "AI Solutions" },
|
||||||
|
{ name: "Smart Trade Platforms" },
|
||||||
|
{ name: "Industrial Technologies" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Chemicals & Petrochemicals",
|
||||||
|
children: [
|
||||||
|
{ name: "Urea" },
|
||||||
|
{ name: "Sulfur" },
|
||||||
|
{ name: "Methanol" },
|
||||||
|
{ name: "Paint & Coatings Materials" },
|
||||||
|
{ name: "Industrial Chemicals" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Metals, Mining & Minerals",
|
||||||
|
children: [
|
||||||
|
{ name: "Iron & Steel" },
|
||||||
|
{ name: "Non-Ferrous Metals" },
|
||||||
|
{
|
||||||
|
name: "Jewelry & Precious Stones",
|
||||||
|
children: [
|
||||||
|
{ name: "Gold Jewelry" },
|
||||||
|
{ name: "Silver Jewelry" },
|
||||||
|
{ name: "Precious Stones" },
|
||||||
|
{ name: "Semi-Precious Stones" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Minerals",
|
||||||
|
children: [
|
||||||
|
{ name: "Potash" },
|
||||||
|
{ name: "Limestone" },
|
||||||
|
{ name: "Kaolinite" },
|
||||||
|
{ name: "Feldspar" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Food Products",
|
||||||
|
children: [
|
||||||
|
{ name: "Dates" },
|
||||||
|
{ name: "Saffron" },
|
||||||
|
{ name: "Honey" },
|
||||||
|
{ name: "Fruits" },
|
||||||
|
{ name: "Palm Oil" },
|
||||||
|
{ name: "Beverages" },
|
||||||
|
{ name: "Confectionery" },
|
||||||
|
{ name: "Low Sodium Salt" },
|
||||||
|
{
|
||||||
|
name: "Seafood & Aquaculture",
|
||||||
|
children: [
|
||||||
|
{ name: "Shrimp" },
|
||||||
|
{ name: "Fish" },
|
||||||
|
{ name: "Aquaculture Products" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Building Materials",
|
||||||
|
children: [{ name: "Construction Stones" }],
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -0,0 +1,193 @@
|
|||||||
|
-- CreateEnum
|
||||||
|
CREATE TYPE "VerificationStatus" AS ENUM ('PENDING', 'APPROVED', 'REJECTED');
|
||||||
|
|
||||||
|
-- CreateEnum
|
||||||
|
CREATE TYPE "CategoryScope" AS ENUM ('CONTENT', 'BRAND');
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "User" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"email" TEXT NOT NULL,
|
||||||
|
"passwordHash" TEXT NOT NULL,
|
||||||
|
"name" TEXT,
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "User_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "Category" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"name" TEXT NOT NULL,
|
||||||
|
"slug" TEXT NOT NULL,
|
||||||
|
"scope" "CategoryScope" NOT NULL,
|
||||||
|
"parentId" TEXT,
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "Category_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "Blog" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"title" TEXT NOT NULL,
|
||||||
|
"slug" TEXT NOT NULL,
|
||||||
|
"abstract" TEXT,
|
||||||
|
"content" TEXT NOT NULL DEFAULT '',
|
||||||
|
"imageUrl" TEXT,
|
||||||
|
"tags" TEXT[] DEFAULT ARRAY[]::TEXT[],
|
||||||
|
"verificationStatus" "VerificationStatus" NOT NULL DEFAULT 'PENDING',
|
||||||
|
"authorId" TEXT NOT NULL,
|
||||||
|
"publishedAt" TIMESTAMP(3),
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "Blog_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "BlogCategory" (
|
||||||
|
"blogId" TEXT NOT NULL,
|
||||||
|
"categoryId" TEXT NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "BlogCategory_pkey" PRIMARY KEY ("blogId","categoryId")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "Reportage" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"title" TEXT NOT NULL,
|
||||||
|
"slug" TEXT NOT NULL,
|
||||||
|
"businessOwner" TEXT NOT NULL,
|
||||||
|
"abstract" TEXT,
|
||||||
|
"content" TEXT NOT NULL DEFAULT '',
|
||||||
|
"imageUrl" TEXT,
|
||||||
|
"tags" TEXT[] DEFAULT ARRAY[]::TEXT[],
|
||||||
|
"verificationStatus" "VerificationStatus" NOT NULL DEFAULT 'PENDING',
|
||||||
|
"authorId" TEXT NOT NULL,
|
||||||
|
"publishedAt" TIMESTAMP(3),
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "Reportage_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "ReportageCategory" (
|
||||||
|
"reportageId" TEXT NOT NULL,
|
||||||
|
"categoryId" TEXT NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "ReportageCategory_pkey" PRIMARY KEY ("reportageId","categoryId")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "Brand" (
|
||||||
|
"id" TEXT NOT NULL,
|
||||||
|
"title" TEXT NOT NULL,
|
||||||
|
"slug" TEXT NOT NULL,
|
||||||
|
"abstract" TEXT,
|
||||||
|
"content" TEXT NOT NULL DEFAULT '',
|
||||||
|
"imageUrl" TEXT,
|
||||||
|
"tags" TEXT[] DEFAULT ARRAY[]::TEXT[],
|
||||||
|
"country" TEXT NOT NULL,
|
||||||
|
"address" TEXT,
|
||||||
|
"contacts" JSONB NOT NULL DEFAULT '[]',
|
||||||
|
"verificationStatus" "VerificationStatus" NOT NULL DEFAULT 'PENDING',
|
||||||
|
"authorId" TEXT NOT NULL,
|
||||||
|
"publishedAt" TIMESTAMP(3),
|
||||||
|
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
"updatedAt" TIMESTAMP(3) NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "Brand_pkey" PRIMARY KEY ("id")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateTable
|
||||||
|
CREATE TABLE "BrandCategory" (
|
||||||
|
"brandId" TEXT NOT NULL,
|
||||||
|
"categoryId" TEXT NOT NULL,
|
||||||
|
|
||||||
|
CONSTRAINT "BrandCategory_pkey" PRIMARY KEY ("brandId","categoryId")
|
||||||
|
);
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Category_parentId_idx" ON "Category"("parentId");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Category_scope_idx" ON "Category"("scope");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "Category_scope_slug_key" ON "Category"("scope", "slug");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "Blog_slug_key" ON "Blog"("slug");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Blog_authorId_idx" ON "Blog"("authorId");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Blog_verificationStatus_idx" ON "Blog"("verificationStatus");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "BlogCategory_categoryId_idx" ON "BlogCategory"("categoryId");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "Reportage_slug_key" ON "Reportage"("slug");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Reportage_authorId_idx" ON "Reportage"("authorId");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Reportage_verificationStatus_idx" ON "Reportage"("verificationStatus");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "ReportageCategory_categoryId_idx" ON "ReportageCategory"("categoryId");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE UNIQUE INDEX "Brand_slug_key" ON "Brand"("slug");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Brand_authorId_idx" ON "Brand"("authorId");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Brand_verificationStatus_idx" ON "Brand"("verificationStatus");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "Brand_country_idx" ON "Brand"("country");
|
||||||
|
|
||||||
|
-- CreateIndex
|
||||||
|
CREATE INDEX "BrandCategory_categoryId_idx" ON "BrandCategory"("categoryId");
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "Category" ADD CONSTRAINT "Category_parentId_fkey" FOREIGN KEY ("parentId") REFERENCES "Category"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "Blog" ADD CONSTRAINT "Blog_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "BlogCategory" ADD CONSTRAINT "BlogCategory_blogId_fkey" FOREIGN KEY ("blogId") REFERENCES "Blog"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "BlogCategory" ADD CONSTRAINT "BlogCategory_categoryId_fkey" FOREIGN KEY ("categoryId") REFERENCES "Category"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "Reportage" ADD CONSTRAINT "Reportage_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "ReportageCategory" ADD CONSTRAINT "ReportageCategory_reportageId_fkey" FOREIGN KEY ("reportageId") REFERENCES "Reportage"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "ReportageCategory" ADD CONSTRAINT "ReportageCategory_categoryId_fkey" FOREIGN KEY ("categoryId") REFERENCES "Category"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "Brand" ADD CONSTRAINT "Brand_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "BrandCategory" ADD CONSTRAINT "BrandCategory_brandId_fkey" FOREIGN KEY ("brandId") REFERENCES "Brand"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
|
|
||||||
|
-- AddForeignKey
|
||||||
|
ALTER TABLE "BrandCategory" ADD CONSTRAINT "BrandCategory_categoryId_fkey" FOREIGN KEY ("categoryId") REFERENCES "Category"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
-- AlterTable
|
||||||
|
ALTER TABLE "Brand" ADD COLUMN "galleryUrls" TEXT[] DEFAULT ARRAY[]::TEXT[];
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
-- AlterTable
|
||||||
|
ALTER TABLE "Brand" ADD COLUMN "city" TEXT;
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
-- Merge duplicate categories that share the same slug across scopes,
|
||||||
|
-- then drop scope so one Category table serves blog, reportage, and brand.
|
||||||
|
|
||||||
|
CREATE TEMP TABLE category_keepers AS
|
||||||
|
SELECT DISTINCT ON (slug) id AS keeper_id, slug
|
||||||
|
FROM "Category"
|
||||||
|
ORDER BY slug, "createdAt" ASC, id ASC;
|
||||||
|
|
||||||
|
CREATE TEMP TABLE category_dupes AS
|
||||||
|
SELECT c.id AS dupe_id, k.keeper_id
|
||||||
|
FROM "Category" c
|
||||||
|
JOIN category_keepers k ON k.slug = c.slug
|
||||||
|
WHERE c.id <> k.keeper_id;
|
||||||
|
|
||||||
|
-- BlogCategory: remap to keeper when no conflict
|
||||||
|
UPDATE "BlogCategory" bc
|
||||||
|
SET "categoryId" = d.keeper_id
|
||||||
|
FROM category_dupes d
|
||||||
|
WHERE bc."categoryId" = d.dupe_id
|
||||||
|
AND NOT EXISTS (
|
||||||
|
SELECT 1
|
||||||
|
FROM "BlogCategory" x
|
||||||
|
WHERE x."blogId" = bc."blogId"
|
||||||
|
AND x."categoryId" = d.keeper_id
|
||||||
|
);
|
||||||
|
|
||||||
|
DELETE FROM "BlogCategory" bc
|
||||||
|
USING category_dupes d
|
||||||
|
WHERE bc."categoryId" = d.dupe_id;
|
||||||
|
|
||||||
|
-- ReportageCategory
|
||||||
|
UPDATE "ReportageCategory" rc
|
||||||
|
SET "categoryId" = d.keeper_id
|
||||||
|
FROM category_dupes d
|
||||||
|
WHERE rc."categoryId" = d.dupe_id
|
||||||
|
AND NOT EXISTS (
|
||||||
|
SELECT 1
|
||||||
|
FROM "ReportageCategory" x
|
||||||
|
WHERE x."reportageId" = rc."reportageId"
|
||||||
|
AND x."categoryId" = d.keeper_id
|
||||||
|
);
|
||||||
|
|
||||||
|
DELETE FROM "ReportageCategory" rc
|
||||||
|
USING category_dupes d
|
||||||
|
WHERE rc."categoryId" = d.dupe_id;
|
||||||
|
|
||||||
|
-- BrandCategory
|
||||||
|
UPDATE "BrandCategory" bc
|
||||||
|
SET "categoryId" = d.keeper_id
|
||||||
|
FROM category_dupes d
|
||||||
|
WHERE bc."categoryId" = d.dupe_id
|
||||||
|
AND NOT EXISTS (
|
||||||
|
SELECT 1
|
||||||
|
FROM "BrandCategory" x
|
||||||
|
WHERE x."brandId" = bc."brandId"
|
||||||
|
AND x."categoryId" = d.keeper_id
|
||||||
|
);
|
||||||
|
|
||||||
|
DELETE FROM "BrandCategory" bc
|
||||||
|
USING category_dupes d
|
||||||
|
WHERE bc."categoryId" = d.dupe_id;
|
||||||
|
|
||||||
|
-- Point children of duplicates at the keeper
|
||||||
|
UPDATE "Category" c
|
||||||
|
SET "parentId" = d.keeper_id
|
||||||
|
FROM category_dupes d
|
||||||
|
WHERE c."parentId" = d.dupe_id;
|
||||||
|
|
||||||
|
DELETE FROM "Category" c
|
||||||
|
USING category_dupes d
|
||||||
|
WHERE c.id = d.dupe_id;
|
||||||
|
|
||||||
|
DROP INDEX IF EXISTS "Category_scope_slug_key";
|
||||||
|
DROP INDEX IF EXISTS "Category_scope_idx";
|
||||||
|
|
||||||
|
ALTER TABLE "Category" DROP COLUMN "scope";
|
||||||
|
|
||||||
|
CREATE UNIQUE INDEX "Category_slug_key" ON "Category"("slug");
|
||||||
|
|
||||||
|
DROP TYPE "CategoryScope";
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# Please do not edit this file manually
|
||||||
|
# It should be added in your version-control system (e.g., Git)
|
||||||
|
provider = "postgresql"
|
||||||
@@ -0,0 +1,143 @@
|
|||||||
|
generator client {
|
||||||
|
provider = "prisma-client-js"
|
||||||
|
}
|
||||||
|
|
||||||
|
datasource db {
|
||||||
|
provider = "postgresql"
|
||||||
|
url = env("DATABASE_URL")
|
||||||
|
}
|
||||||
|
|
||||||
|
enum VerificationStatus {
|
||||||
|
PENDING
|
||||||
|
APPROVED
|
||||||
|
REJECTED
|
||||||
|
}
|
||||||
|
|
||||||
|
model User {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
email String @unique
|
||||||
|
passwordHash String
|
||||||
|
name String?
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
blogs Blog[]
|
||||||
|
reportages Reportage[]
|
||||||
|
brands Brand[]
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Shared categories for blog, reportage, and brand
|
||||||
|
model Category {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
name String
|
||||||
|
slug String @unique
|
||||||
|
parentId String?
|
||||||
|
parent Category? @relation("CategoryTree", fields: [parentId], references: [id], onDelete: SetNull)
|
||||||
|
children Category[] @relation("CategoryTree")
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
blogs BlogCategory[]
|
||||||
|
reportages ReportageCategory[]
|
||||||
|
brands BrandCategory[]
|
||||||
|
|
||||||
|
@@index([parentId])
|
||||||
|
}
|
||||||
|
|
||||||
|
model Blog {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
title String
|
||||||
|
slug String @unique
|
||||||
|
abstract String?
|
||||||
|
content String @default("")
|
||||||
|
imageUrl String?
|
||||||
|
tags String[] @default([])
|
||||||
|
verificationStatus VerificationStatus @default(PENDING)
|
||||||
|
authorId String
|
||||||
|
author User @relation(fields: [authorId], references: [id], onDelete: Restrict)
|
||||||
|
categories BlogCategory[]
|
||||||
|
publishedAt DateTime?
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
@@index([authorId])
|
||||||
|
@@index([verificationStatus])
|
||||||
|
}
|
||||||
|
|
||||||
|
model BlogCategory {
|
||||||
|
blogId String
|
||||||
|
categoryId String
|
||||||
|
blog Blog @relation(fields: [blogId], references: [id], onDelete: Cascade)
|
||||||
|
category Category @relation(fields: [categoryId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@id([blogId, categoryId])
|
||||||
|
@@index([categoryId])
|
||||||
|
}
|
||||||
|
|
||||||
|
model Reportage {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
title String
|
||||||
|
slug String @unique
|
||||||
|
businessOwner String
|
||||||
|
abstract String?
|
||||||
|
content String @default("")
|
||||||
|
imageUrl String?
|
||||||
|
tags String[] @default([])
|
||||||
|
verificationStatus VerificationStatus @default(PENDING)
|
||||||
|
authorId String
|
||||||
|
author User @relation(fields: [authorId], references: [id], onDelete: Restrict)
|
||||||
|
categories ReportageCategory[]
|
||||||
|
publishedAt DateTime?
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
@@index([authorId])
|
||||||
|
@@index([verificationStatus])
|
||||||
|
}
|
||||||
|
|
||||||
|
model ReportageCategory {
|
||||||
|
reportageId String
|
||||||
|
categoryId String
|
||||||
|
reportage Reportage @relation(fields: [reportageId], references: [id], onDelete: Cascade)
|
||||||
|
category Category @relation(fields: [categoryId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@id([reportageId, categoryId])
|
||||||
|
@@index([categoryId])
|
||||||
|
}
|
||||||
|
|
||||||
|
model Brand {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
title String
|
||||||
|
slug String @unique
|
||||||
|
abstract String?
|
||||||
|
content String @default("")
|
||||||
|
imageUrl String?
|
||||||
|
galleryUrls String[] @default([])
|
||||||
|
tags String[] @default([])
|
||||||
|
country String
|
||||||
|
city String?
|
||||||
|
address String?
|
||||||
|
/// [{ type: "phone"|"email"|..., value: string }]
|
||||||
|
contacts Json @default("[]")
|
||||||
|
verificationStatus VerificationStatus @default(PENDING)
|
||||||
|
authorId String
|
||||||
|
author User @relation(fields: [authorId], references: [id], onDelete: Restrict)
|
||||||
|
categories BrandCategory[]
|
||||||
|
publishedAt DateTime?
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
@@index([authorId])
|
||||||
|
@@index([verificationStatus])
|
||||||
|
@@index([country])
|
||||||
|
}
|
||||||
|
|
||||||
|
model BrandCategory {
|
||||||
|
brandId String
|
||||||
|
categoryId String
|
||||||
|
brand Brand @relation(fields: [brandId], references: [id], onDelete: Cascade)
|
||||||
|
category Category @relation(fields: [categoryId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@id([brandId, categoryId])
|
||||||
|
@@index([categoryId])
|
||||||
|
}
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
import { PrismaClient } from "@prisma/client";
|
||||||
|
import bcrypt from "bcryptjs";
|
||||||
|
import {
|
||||||
|
brandCategoryTree,
|
||||||
|
type CategoryNode,
|
||||||
|
} from "./data/brand-categories.js";
|
||||||
|
|
||||||
|
const prisma = new PrismaClient();
|
||||||
|
|
||||||
|
function slugify(value: string): string {
|
||||||
|
return value
|
||||||
|
.trim()
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/['"]/g, "")
|
||||||
|
.replace(/[^a-z0-9]+/g, "-")
|
||||||
|
.replace(/^-+|-+$/g, "")
|
||||||
|
.slice(0, 120);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function uniqueSlug(base: string): Promise<string> {
|
||||||
|
let slug = slugify(base) || "category";
|
||||||
|
let candidate = slug;
|
||||||
|
let i = 2;
|
||||||
|
while (await prisma.category.findUnique({ where: { slug: candidate } })) {
|
||||||
|
candidate = `${slug}-${i}`;
|
||||||
|
i += 1;
|
||||||
|
}
|
||||||
|
return candidate;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function insertTree(
|
||||||
|
nodes: CategoryNode[],
|
||||||
|
parentId: string | null = null,
|
||||||
|
): Promise<number> {
|
||||||
|
let count = 0;
|
||||||
|
for (const node of nodes) {
|
||||||
|
const slug = await uniqueSlug(node.name);
|
||||||
|
const created = await prisma.category.create({
|
||||||
|
data: {
|
||||||
|
name: node.name,
|
||||||
|
slug,
|
||||||
|
parentId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
count += 1;
|
||||||
|
if (node.children?.length) {
|
||||||
|
count += await insertTree(node.children, created.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return count;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
const passwordHash = await bcrypt.hash("admin123", 10);
|
||||||
|
|
||||||
|
const admin = await prisma.user.upsert({
|
||||||
|
where: { email: "admin@novintrades.com" },
|
||||||
|
update: {},
|
||||||
|
create: {
|
||||||
|
email: "admin@novintrades.com",
|
||||||
|
name: "Admin",
|
||||||
|
passwordHash,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await prisma.blogCategory.deleteMany();
|
||||||
|
await prisma.reportageCategory.deleteMany();
|
||||||
|
await prisma.brandCategory.deleteMany();
|
||||||
|
await prisma.category.deleteMany();
|
||||||
|
|
||||||
|
const treeCount = await insertTree(brandCategoryTree);
|
||||||
|
|
||||||
|
console.log(`Seeded admin: ${admin.email}`);
|
||||||
|
console.log(`Seeded ${treeCount} categories from Categories.docx hierarchy`);
|
||||||
|
}
|
||||||
|
|
||||||
|
main()
|
||||||
|
.catch((error) => {
|
||||||
|
console.error(error);
|
||||||
|
process.exit(1);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await prisma.$disconnect();
|
||||||
|
});
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import Fastify from "fastify";
|
||||||
|
import cors from "@fastify/cors";
|
||||||
|
import { prisma } from "./lib/prisma.js";
|
||||||
|
import { healthRoutes } from "./routes/health.js";
|
||||||
|
import { categoryRoutes } from "./routes/categories.js";
|
||||||
|
import { blogRoutes } from "./routes/blogs.js";
|
||||||
|
import { reportageRoutes } from "./routes/reportages.js";
|
||||||
|
import { brandRoutes } from "./routes/brands.js";
|
||||||
|
import { authRoutes } from "./routes/auth.js";
|
||||||
|
import { uploadRoutes } from "./routes/uploads.js";
|
||||||
|
|
||||||
|
export async function buildApp() {
|
||||||
|
const app = Fastify({
|
||||||
|
logger: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
await app.register(cors, {
|
||||||
|
origin: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
app.decorate("prisma", prisma);
|
||||||
|
|
||||||
|
await app.register(healthRoutes);
|
||||||
|
await app.register(authRoutes, { prefix: "/api/auth" });
|
||||||
|
await app.register(categoryRoutes, { prefix: "/api/categories" });
|
||||||
|
await app.register(blogRoutes, { prefix: "/api/blogs" });
|
||||||
|
await app.register(reportageRoutes, { prefix: "/api/reportages" });
|
||||||
|
await app.register(brandRoutes, { prefix: "/api/brands" });
|
||||||
|
await app.register(uploadRoutes, { prefix: "/api/uploads" });
|
||||||
|
|
||||||
|
app.addHook("onClose", async () => {
|
||||||
|
await prisma.$disconnect();
|
||||||
|
});
|
||||||
|
|
||||||
|
return app;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "fastify" {
|
||||||
|
interface FastifyInstance {
|
||||||
|
prisma: typeof prisma;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { buildApp } from "./app.js";
|
||||||
|
|
||||||
|
const port = Number(process.env.PORT ?? 3000);
|
||||||
|
const host = process.env.HOST ?? "0.0.0.0";
|
||||||
|
|
||||||
|
const app = await buildApp();
|
||||||
|
|
||||||
|
try {
|
||||||
|
await app.listen({ port, host });
|
||||||
|
} catch (error) {
|
||||||
|
app.log.error(error);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
export const MAX_IMAGE_BYTES = Number(
|
||||||
|
process.env.MAX_IMAGE_BYTES ?? 250 * 1024,
|
||||||
|
);
|
||||||
|
|
||||||
|
export function assertImageSize(bytes: number): void {
|
||||||
|
if (bytes > MAX_IMAGE_BYTES) {
|
||||||
|
const maxKb = Math.round(MAX_IMAGE_BYTES / 1024);
|
||||||
|
throw Object.assign(
|
||||||
|
new Error(`Image must be ${maxKb}KB or smaller`),
|
||||||
|
{ statusCode: 400 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
import { PrismaClient } from "@prisma/client";
|
||||||
|
|
||||||
|
export const prisma = new PrismaClient();
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
|
||||||
|
import { randomUUID } from "node:crypto";
|
||||||
|
import { assertImageSize } from "./limits.js";
|
||||||
|
|
||||||
|
function required(name: string): string {
|
||||||
|
const value = process.env[name];
|
||||||
|
if (!value) {
|
||||||
|
throw new Error(`Missing env ${name}`);
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
let client: S3Client | null = null;
|
||||||
|
|
||||||
|
function getClient(): S3Client {
|
||||||
|
if (!client) {
|
||||||
|
client = new S3Client({
|
||||||
|
region: process.env.S3_REGION ?? "us-east-1",
|
||||||
|
endpoint: required("S3_ENDPOINT"),
|
||||||
|
forcePathStyle: true,
|
||||||
|
credentials: {
|
||||||
|
accessKeyId: required("S3_ACCESS_KEY"),
|
||||||
|
secretAccessKey: required("S3_SECRET_KEY"),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return client;
|
||||||
|
}
|
||||||
|
|
||||||
|
function extensionFor(mime: string): string {
|
||||||
|
switch (mime) {
|
||||||
|
case "image/png":
|
||||||
|
return "png";
|
||||||
|
case "image/webp":
|
||||||
|
return "webp";
|
||||||
|
case "image/gif":
|
||||||
|
return "gif";
|
||||||
|
case "image/jpeg":
|
||||||
|
case "image/jpg":
|
||||||
|
default:
|
||||||
|
return "jpg";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function uploadImageBuffer(input: {
|
||||||
|
buffer: Buffer;
|
||||||
|
contentType: string;
|
||||||
|
folder?: string;
|
||||||
|
}): Promise<{ url: string; key: string; size: number }> {
|
||||||
|
assertImageSize(input.buffer.byteLength);
|
||||||
|
|
||||||
|
const allowed = new Set([
|
||||||
|
"image/jpeg",
|
||||||
|
"image/jpg",
|
||||||
|
"image/png",
|
||||||
|
"image/webp",
|
||||||
|
"image/gif",
|
||||||
|
]);
|
||||||
|
if (!allowed.has(input.contentType)) {
|
||||||
|
throw Object.assign(new Error("Only JPG, PNG, WebP, or GIF allowed"), {
|
||||||
|
statusCode: 400,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const folder = input.folder?.replace(/^\/+|\/+$/g, "") || "uploads";
|
||||||
|
const key = `${folder}/${randomUUID()}.${extensionFor(input.contentType)}`;
|
||||||
|
const bucket = required("S3_BUCKET");
|
||||||
|
const publicBase = (
|
||||||
|
process.env.S3_PUBLIC_BASE_URL ?? required("S3_ENDPOINT")
|
||||||
|
).replace(/\/+$/, "");
|
||||||
|
|
||||||
|
await getClient().send(
|
||||||
|
new PutObjectCommand({
|
||||||
|
Bucket: bucket,
|
||||||
|
Key: key,
|
||||||
|
Body: input.buffer,
|
||||||
|
ContentType: input.contentType,
|
||||||
|
ACL: "public-read",
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
key,
|
||||||
|
size: input.buffer.byteLength,
|
||||||
|
url: `${publicBase}/${key}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
export function slugify(value: string): string {
|
||||||
|
return value
|
||||||
|
.trim()
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/['"]/g, "")
|
||||||
|
.replace(/[^a-z0-9]+/g, "-")
|
||||||
|
.replace(/^-+|-+$/g, "")
|
||||||
|
.slice(0, 120);
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import type { FastifyPluginAsync } from "fastify";
|
||||||
|
import bcrypt from "bcryptjs";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
const loginSchema = z.object({
|
||||||
|
email: z.string().email(),
|
||||||
|
password: z.string().min(1),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const authRoutes: FastifyPluginAsync = async (app) => {
|
||||||
|
app.post("/login", async (request, reply) => {
|
||||||
|
const parsed = loginSchema.safeParse(request.body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return reply.status(400).send({ error: "Invalid credentials payload" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const user = await app.prisma.user.findUnique({
|
||||||
|
where: { email: parsed.data.email.toLowerCase() },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return reply.status(401).send({ error: "Invalid email or password" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const valid = await bcrypt.compare(parsed.data.password, user.passwordHash);
|
||||||
|
if (!valid) {
|
||||||
|
return reply.status(401).send({ error: "Invalid email or password" });
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
email: user.email,
|
||||||
|
name: user.name,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
import type { FastifyPluginAsync } from "fastify";
|
||||||
|
import { VerificationStatus } from "@prisma/client";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { slugify } from "../lib/slug.js";
|
||||||
|
|
||||||
|
const createSchema = z.object({
|
||||||
|
title: z.string().min(1),
|
||||||
|
slug: z.string().min(1).optional(),
|
||||||
|
abstract: z.string().optional(),
|
||||||
|
content: z.string().optional(),
|
||||||
|
imageUrl: z.string().url().nullable().optional(),
|
||||||
|
tags: z.array(z.string()).optional(),
|
||||||
|
categoryIds: z.array(z.string().cuid()).optional(),
|
||||||
|
authorId: z.string().cuid(),
|
||||||
|
verificationStatus: z.nativeEnum(VerificationStatus).optional(),
|
||||||
|
publishedAt: z.coerce.date().nullable().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const blogRoutes: FastifyPluginAsync = async (app) => {
|
||||||
|
app.get("/", async () => {
|
||||||
|
return app.prisma.blog.findMany({
|
||||||
|
orderBy: { createdAt: "desc" },
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get("/:id", async (request, reply) => {
|
||||||
|
const { id } = request.params as { id: string };
|
||||||
|
const blog = await app.prisma.blog.findUnique({
|
||||||
|
where: { id },
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!blog) {
|
||||||
|
return reply.status(404).send({ error: "Blog not found" });
|
||||||
|
}
|
||||||
|
|
||||||
|
return blog;
|
||||||
|
});
|
||||||
|
|
||||||
|
app.post("/", async (request, reply) => {
|
||||||
|
const parsed = createSchema.safeParse(request.body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return reply.status(400).send({ error: parsed.error.flatten() });
|
||||||
|
}
|
||||||
|
|
||||||
|
const slug = slugify(parsed.data.slug ?? parsed.data.title);
|
||||||
|
const categoryIds = parsed.data.categoryIds ?? [];
|
||||||
|
|
||||||
|
const blog = await app.prisma.blog.create({
|
||||||
|
data: {
|
||||||
|
title: parsed.data.title,
|
||||||
|
slug,
|
||||||
|
abstract: parsed.data.abstract,
|
||||||
|
content: parsed.data.content ?? "",
|
||||||
|
imageUrl: parsed.data.imageUrl ?? null,
|
||||||
|
tags: parsed.data.tags ?? [],
|
||||||
|
authorId: parsed.data.authorId,
|
||||||
|
verificationStatus:
|
||||||
|
parsed.data.verificationStatus ?? VerificationStatus.PENDING,
|
||||||
|
publishedAt: parsed.data.publishedAt ?? null,
|
||||||
|
categories: {
|
||||||
|
create: categoryIds.map((categoryId) => ({ categoryId })),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return reply.status(201).send(blog);
|
||||||
|
});
|
||||||
|
|
||||||
|
app.patch("/:id", async (request, reply) => {
|
||||||
|
const { id } = request.params as { id: string };
|
||||||
|
const updateSchema = createSchema.partial().omit({ authorId: true });
|
||||||
|
const parsed = updateSchema.safeParse(request.body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return reply.status(400).send({ error: parsed.error.flatten() });
|
||||||
|
}
|
||||||
|
|
||||||
|
const existing = await app.prisma.blog.findUnique({ where: { id } });
|
||||||
|
if (!existing) {
|
||||||
|
return reply.status(404).send({ error: "Blog not found" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = parsed.data;
|
||||||
|
const categoryIds = data.categoryIds;
|
||||||
|
|
||||||
|
const blog = await app.prisma.blog.update({
|
||||||
|
where: { id },
|
||||||
|
data: {
|
||||||
|
...(data.title !== undefined ? { title: data.title } : {}),
|
||||||
|
...(data.title !== undefined || data.slug !== undefined
|
||||||
|
? { slug: slugify(data.slug ?? data.title ?? existing.title) }
|
||||||
|
: {}),
|
||||||
|
...(data.abstract !== undefined ? { abstract: data.abstract } : {}),
|
||||||
|
...(data.content !== undefined ? { content: data.content } : {}),
|
||||||
|
...(data.imageUrl !== undefined ? { imageUrl: data.imageUrl } : {}),
|
||||||
|
...(data.tags !== undefined ? { tags: data.tags } : {}),
|
||||||
|
...(data.verificationStatus !== undefined
|
||||||
|
? { verificationStatus: data.verificationStatus }
|
||||||
|
: {}),
|
||||||
|
...(data.publishedAt !== undefined
|
||||||
|
? { publishedAt: data.publishedAt }
|
||||||
|
: {}),
|
||||||
|
...(categoryIds
|
||||||
|
? {
|
||||||
|
categories: {
|
||||||
|
deleteMany: {},
|
||||||
|
create: categoryIds.map((categoryId) => ({ categoryId })),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: {}),
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return blog;
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -0,0 +1,178 @@
|
|||||||
|
import type { FastifyPluginAsync } from "fastify";
|
||||||
|
import { VerificationStatus } from "@prisma/client";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { slugify } from "../lib/slug.js";
|
||||||
|
|
||||||
|
const contactSchema = z.object({
|
||||||
|
type: z.enum([
|
||||||
|
"phone",
|
||||||
|
"landline",
|
||||||
|
"email",
|
||||||
|
"instagram",
|
||||||
|
"website",
|
||||||
|
"whatsapp",
|
||||||
|
"other",
|
||||||
|
]),
|
||||||
|
value: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
const createSchema = z.object({
|
||||||
|
title: z.string().min(1),
|
||||||
|
slug: z.string().min(1).optional(),
|
||||||
|
abstract: z.string().optional(),
|
||||||
|
content: z.string().optional(),
|
||||||
|
imageUrl: z.string().url().nullable().optional(),
|
||||||
|
galleryUrls: z.array(z.string().url()).optional(),
|
||||||
|
tags: z.array(z.string()).optional(),
|
||||||
|
country: z.string().min(1),
|
||||||
|
city: z.string().optional(),
|
||||||
|
address: z.string().optional(),
|
||||||
|
contacts: z.array(contactSchema).optional(),
|
||||||
|
categoryIds: z.array(z.string().cuid()).optional(),
|
||||||
|
authorId: z.string().cuid(),
|
||||||
|
verificationStatus: z.nativeEnum(VerificationStatus).optional(),
|
||||||
|
publishedAt: z.coerce.date().nullable().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
function assertNoContentImages(content: string | undefined, reply: {
|
||||||
|
status: (code: number) => { send: (body: unknown) => unknown };
|
||||||
|
}) {
|
||||||
|
if (content && /<img\b/i.test(content)) {
|
||||||
|
return reply.status(400).send({
|
||||||
|
error: "Brand main text cannot include images. Use the gallery instead.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const brandRoutes: FastifyPluginAsync = async (app) => {
|
||||||
|
app.get("/", async () => {
|
||||||
|
return app.prisma.brand.findMany({
|
||||||
|
orderBy: { createdAt: "desc" },
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get("/:id", async (request, reply) => {
|
||||||
|
const { id } = request.params as { id: string };
|
||||||
|
const brand = await app.prisma.brand.findUnique({
|
||||||
|
where: { id },
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!brand) {
|
||||||
|
return reply.status(404).send({ error: "Brand not found" });
|
||||||
|
}
|
||||||
|
|
||||||
|
return brand;
|
||||||
|
});
|
||||||
|
|
||||||
|
app.post("/", async (request, reply) => {
|
||||||
|
const parsed = createSchema.safeParse(request.body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return reply.status(400).send({ error: parsed.error.flatten() });
|
||||||
|
}
|
||||||
|
|
||||||
|
const contentBlocked = assertNoContentImages(parsed.data.content, reply);
|
||||||
|
if (contentBlocked) return contentBlocked;
|
||||||
|
|
||||||
|
const slug = slugify(parsed.data.slug ?? parsed.data.title);
|
||||||
|
const categoryIds = parsed.data.categoryIds ?? [];
|
||||||
|
const galleryUrls = parsed.data.galleryUrls ?? [];
|
||||||
|
|
||||||
|
const brand = await app.prisma.brand.create({
|
||||||
|
data: {
|
||||||
|
title: parsed.data.title,
|
||||||
|
slug,
|
||||||
|
abstract: parsed.data.abstract,
|
||||||
|
content: parsed.data.content ?? "",
|
||||||
|
imageUrl: parsed.data.imageUrl ?? null,
|
||||||
|
galleryUrls,
|
||||||
|
tags: parsed.data.tags ?? [],
|
||||||
|
country: parsed.data.country,
|
||||||
|
city: parsed.data.city,
|
||||||
|
address: parsed.data.address,
|
||||||
|
contacts: parsed.data.contacts ?? [],
|
||||||
|
authorId: parsed.data.authorId,
|
||||||
|
verificationStatus:
|
||||||
|
parsed.data.verificationStatus ?? VerificationStatus.PENDING,
|
||||||
|
publishedAt: parsed.data.publishedAt ?? null,
|
||||||
|
categories: {
|
||||||
|
create: categoryIds.map((categoryId) => ({ categoryId })),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return reply.status(201).send(brand);
|
||||||
|
});
|
||||||
|
|
||||||
|
app.patch("/:id", async (request, reply) => {
|
||||||
|
const { id } = request.params as { id: string };
|
||||||
|
const updateSchema = createSchema.partial().omit({ authorId: true });
|
||||||
|
const parsed = updateSchema.safeParse(request.body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return reply.status(400).send({ error: parsed.error.flatten() });
|
||||||
|
}
|
||||||
|
|
||||||
|
const contentBlocked = assertNoContentImages(parsed.data.content, reply);
|
||||||
|
if (contentBlocked) return contentBlocked;
|
||||||
|
|
||||||
|
const existing = await app.prisma.brand.findUnique({ where: { id } });
|
||||||
|
if (!existing) {
|
||||||
|
return reply.status(404).send({ error: "Brand not found" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = parsed.data;
|
||||||
|
const categoryIds = data.categoryIds;
|
||||||
|
const galleryUrls = data.galleryUrls;
|
||||||
|
|
||||||
|
const brand = await app.prisma.brand.update({
|
||||||
|
where: { id },
|
||||||
|
data: {
|
||||||
|
...(data.title !== undefined ? { title: data.title } : {}),
|
||||||
|
...(data.title !== undefined || data.slug !== undefined
|
||||||
|
? { slug: slugify(data.slug ?? data.title ?? existing.title) }
|
||||||
|
: {}),
|
||||||
|
...(data.abstract !== undefined ? { abstract: data.abstract } : {}),
|
||||||
|
...(data.content !== undefined ? { content: data.content } : {}),
|
||||||
|
...(data.imageUrl !== undefined ? { imageUrl: data.imageUrl } : {}),
|
||||||
|
...(galleryUrls !== undefined ? { galleryUrls } : {}),
|
||||||
|
...(data.tags !== undefined ? { tags: data.tags } : {}),
|
||||||
|
...(data.country !== undefined ? { country: data.country } : {}),
|
||||||
|
...(data.city !== undefined ? { city: data.city } : {}),
|
||||||
|
...(data.address !== undefined ? { address: data.address } : {}),
|
||||||
|
...(data.contacts !== undefined ? { contacts: data.contacts } : {}),
|
||||||
|
...(data.verificationStatus !== undefined
|
||||||
|
? { verificationStatus: data.verificationStatus }
|
||||||
|
: {}),
|
||||||
|
...(data.publishedAt !== undefined
|
||||||
|
? { publishedAt: data.publishedAt }
|
||||||
|
: {}),
|
||||||
|
...(categoryIds
|
||||||
|
? {
|
||||||
|
categories: {
|
||||||
|
deleteMany: {},
|
||||||
|
create: categoryIds.map((categoryId) => ({ categoryId })),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: {}),
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return brand;
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
import type { FastifyPluginAsync } from "fastify";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { slugify } from "../lib/slug.js";
|
||||||
|
|
||||||
|
const createSchema = z.object({
|
||||||
|
name: z.string().min(1),
|
||||||
|
slug: z.string().min(1).optional(),
|
||||||
|
parentId: z.string().cuid().nullable().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const categoryRoutes: FastifyPluginAsync = async (app) => {
|
||||||
|
app.get("/", async () => {
|
||||||
|
return app.prisma.category.findMany({
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
include: {
|
||||||
|
children: {
|
||||||
|
orderBy: { name: "asc" },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.post("/", async (request, reply) => {
|
||||||
|
const parsed = createSchema.safeParse(request.body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return reply.status(400).send({ error: parsed.error.flatten() });
|
||||||
|
}
|
||||||
|
|
||||||
|
const slug = slugify(parsed.data.slug ?? parsed.data.name);
|
||||||
|
if (!slug) {
|
||||||
|
return reply.status(400).send({ error: "Invalid slug" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const category = await app.prisma.category.create({
|
||||||
|
data: {
|
||||||
|
name: parsed.data.name,
|
||||||
|
slug,
|
||||||
|
parentId: parsed.data.parentId ?? null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return reply.status(201).send(category);
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import type { FastifyPluginAsync } from "fastify";
|
||||||
|
|
||||||
|
export const healthRoutes: FastifyPluginAsync = async (app) => {
|
||||||
|
app.get("/health", async () => ({
|
||||||
|
ok: true,
|
||||||
|
service: "novintrades-api",
|
||||||
|
}));
|
||||||
|
};
|
||||||
@@ -0,0 +1,136 @@
|
|||||||
|
import type { FastifyPluginAsync } from "fastify";
|
||||||
|
import { VerificationStatus } from "@prisma/client";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { slugify } from "../lib/slug.js";
|
||||||
|
|
||||||
|
const createSchema = z.object({
|
||||||
|
title: z.string().min(1),
|
||||||
|
slug: z.string().min(1).optional(),
|
||||||
|
businessOwner: z.string().min(1),
|
||||||
|
abstract: z.string().optional(),
|
||||||
|
content: z.string().optional(),
|
||||||
|
imageUrl: z.string().url().nullable().optional(),
|
||||||
|
tags: z.array(z.string()).optional(),
|
||||||
|
categoryIds: z.array(z.string().cuid()).optional(),
|
||||||
|
authorId: z.string().cuid(),
|
||||||
|
verificationStatus: z.nativeEnum(VerificationStatus).optional(),
|
||||||
|
publishedAt: z.coerce.date().nullable().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const reportageRoutes: FastifyPluginAsync = async (app) => {
|
||||||
|
app.get("/", async () => {
|
||||||
|
return app.prisma.reportage.findMany({
|
||||||
|
orderBy: { createdAt: "desc" },
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.get("/:id", async (request, reply) => {
|
||||||
|
const { id } = request.params as { id: string };
|
||||||
|
const reportage = await app.prisma.reportage.findUnique({
|
||||||
|
where: { id },
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!reportage) {
|
||||||
|
return reply.status(404).send({ error: "Reportage not found" });
|
||||||
|
}
|
||||||
|
|
||||||
|
return reportage;
|
||||||
|
});
|
||||||
|
|
||||||
|
app.post("/", async (request, reply) => {
|
||||||
|
const parsed = createSchema.safeParse(request.body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return reply.status(400).send({ error: parsed.error.flatten() });
|
||||||
|
}
|
||||||
|
|
||||||
|
const slug = slugify(parsed.data.slug ?? parsed.data.title);
|
||||||
|
const categoryIds = parsed.data.categoryIds ?? [];
|
||||||
|
|
||||||
|
const reportage = await app.prisma.reportage.create({
|
||||||
|
data: {
|
||||||
|
title: parsed.data.title,
|
||||||
|
slug,
|
||||||
|
businessOwner: parsed.data.businessOwner,
|
||||||
|
abstract: parsed.data.abstract,
|
||||||
|
content: parsed.data.content ?? "",
|
||||||
|
imageUrl: parsed.data.imageUrl ?? null,
|
||||||
|
tags: parsed.data.tags ?? [],
|
||||||
|
authorId: parsed.data.authorId,
|
||||||
|
verificationStatus:
|
||||||
|
parsed.data.verificationStatus ?? VerificationStatus.PENDING,
|
||||||
|
publishedAt: parsed.data.publishedAt ?? null,
|
||||||
|
categories: {
|
||||||
|
create: categoryIds.map((categoryId) => ({ categoryId })),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return reply.status(201).send(reportage);
|
||||||
|
});
|
||||||
|
|
||||||
|
app.patch("/:id", async (request, reply) => {
|
||||||
|
const { id } = request.params as { id: string };
|
||||||
|
const updateSchema = createSchema.partial().omit({ authorId: true });
|
||||||
|
const parsed = updateSchema.safeParse(request.body);
|
||||||
|
if (!parsed.success) {
|
||||||
|
return reply.status(400).send({ error: parsed.error.flatten() });
|
||||||
|
}
|
||||||
|
|
||||||
|
const existing = await app.prisma.reportage.findUnique({ where: { id } });
|
||||||
|
if (!existing) {
|
||||||
|
return reply.status(404).send({ error: "Reportage not found" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = parsed.data;
|
||||||
|
const categoryIds = data.categoryIds;
|
||||||
|
|
||||||
|
const reportage = await app.prisma.reportage.update({
|
||||||
|
where: { id },
|
||||||
|
data: {
|
||||||
|
...(data.title !== undefined ? { title: data.title } : {}),
|
||||||
|
...(data.title !== undefined || data.slug !== undefined
|
||||||
|
? { slug: slugify(data.slug ?? data.title ?? existing.title) }
|
||||||
|
: {}),
|
||||||
|
...(data.businessOwner !== undefined
|
||||||
|
? { businessOwner: data.businessOwner }
|
||||||
|
: {}),
|
||||||
|
...(data.abstract !== undefined ? { abstract: data.abstract } : {}),
|
||||||
|
...(data.content !== undefined ? { content: data.content } : {}),
|
||||||
|
...(data.imageUrl !== undefined ? { imageUrl: data.imageUrl } : {}),
|
||||||
|
...(data.tags !== undefined ? { tags: data.tags } : {}),
|
||||||
|
...(data.verificationStatus !== undefined
|
||||||
|
? { verificationStatus: data.verificationStatus }
|
||||||
|
: {}),
|
||||||
|
...(data.publishedAt !== undefined
|
||||||
|
? { publishedAt: data.publishedAt }
|
||||||
|
: {}),
|
||||||
|
...(categoryIds
|
||||||
|
? {
|
||||||
|
categories: {
|
||||||
|
deleteMany: {},
|
||||||
|
create: categoryIds.map((categoryId) => ({ categoryId })),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: {}),
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
author: { select: { id: true, email: true, name: true } },
|
||||||
|
categories: { include: { category: true } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return reportage;
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import type { FastifyPluginAsync } from "fastify";
|
||||||
|
import multipart from "@fastify/multipart";
|
||||||
|
import { MAX_IMAGE_BYTES } from "../lib/limits.js";
|
||||||
|
import { uploadImageBuffer } from "../lib/s3.js";
|
||||||
|
|
||||||
|
export const uploadRoutes: FastifyPluginAsync = async (app) => {
|
||||||
|
await app.register(multipart, {
|
||||||
|
limits: {
|
||||||
|
fileSize: MAX_IMAGE_BYTES,
|
||||||
|
files: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
app.post("/", async (request, reply) => {
|
||||||
|
const query = request.query as { folder?: string };
|
||||||
|
const folder =
|
||||||
|
typeof query.folder === "string" && query.folder.trim()
|
||||||
|
? query.folder.trim()
|
||||||
|
: "uploads";
|
||||||
|
|
||||||
|
const file = await request.file();
|
||||||
|
if (!file) {
|
||||||
|
return reply.status(400).send({ error: "No image file provided" });
|
||||||
|
}
|
||||||
|
|
||||||
|
let buffer: Buffer;
|
||||||
|
try {
|
||||||
|
buffer = await file.toBuffer();
|
||||||
|
} catch {
|
||||||
|
return reply.status(400).send({
|
||||||
|
error: `Image must be ${Math.round(MAX_IMAGE_BYTES / 1024)}KB or smaller`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const uploaded = await uploadImageBuffer({
|
||||||
|
buffer,
|
||||||
|
contentType: file.mimetype,
|
||||||
|
folder,
|
||||||
|
});
|
||||||
|
return reply.status(201).send(uploaded);
|
||||||
|
} catch (error) {
|
||||||
|
const statusCode =
|
||||||
|
error && typeof error === "object" && "statusCode" in error
|
||||||
|
? Number((error as { statusCode: number }).statusCode)
|
||||||
|
: 500;
|
||||||
|
const message =
|
||||||
|
error instanceof Error ? error.message : "Upload failed";
|
||||||
|
return reply.status(statusCode || 500).send({ error: message });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"module": "NodeNext",
|
||||||
|
"moduleResolution": "NodeNext",
|
||||||
|
"outDir": "dist",
|
||||||
|
"rootDir": "src",
|
||||||
|
"strict": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
# Public website
|
||||||
|
|
||||||
|
English marketing site for NovinTrades.
|
||||||
|
|
||||||
|
## Dev
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev:web
|
||||||
|
```
|
||||||
|
|
||||||
|
- http://novintrades.local:5174 (requires `/etc/hosts` → `127.0.0.1 novintrades.local`)
|
||||||
|
- http://127.0.0.1:5174
|
||||||
|
|
||||||
|
## Stack
|
||||||
|
|
||||||
|
- Vite + React + TypeScript
|
||||||
|
- Montserrat
|
||||||
|
- Light gray → blue → dark blue gradient theme
|
||||||
|
|
||||||
|
## Sections / pages
|
||||||
|
|
||||||
|
Home · About · Contact · Blog list/detail · Reportage list/detail · Brand list/detail
|
||||||
|
|
||||||
|
## Routes
|
||||||
|
|
||||||
|
- `/` home
|
||||||
|
- `/about` `/contact`
|
||||||
|
- `/blog` `/blog/:slug`
|
||||||
|
- `/reportages` `/reportages/:slug`
|
||||||
|
- `/brands` `/brands/:slug`
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="NovinTrades — discover brands, insights, and trade opportunities across industries."
|
||||||
|
/>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<title>NovinTrades</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "@novintrades/web",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "oxlint",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lucide-react": "^1.26.0",
|
||||||
|
"react": "^19.2.7",
|
||||||
|
"react-dom": "^19.2.7",
|
||||||
|
"react-router-dom": "^7.18.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^24.13.2",
|
||||||
|
"@types/react": "^19.2.17",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^6.0.3",
|
||||||
|
"oxlint": "^1.71.0",
|
||||||
|
"typescript": "~6.0.2",
|
||||||
|
"vite": "^8.1.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||||
|
<rect width="32" height="32" rx="6" fill="#0B2A5B"/>
|
||||||
|
<path d="M8 22V10h3.2l4.4 7.2V10H19v12h-3.2L11.4 14.8V22H8z" fill="#E8EEF6"/>
|
||||||
|
<path d="M21 22V10h3v12h-3z" fill="#3B82C4"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 263 B |
@@ -0,0 +1,9 @@
|
|||||||
|
.app {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
||||||
|
import Layout from "./components/Layout";
|
||||||
|
import AboutPage from "./pages/AboutPage";
|
||||||
|
import BlogDetailPage from "./pages/BlogDetailPage";
|
||||||
|
import BlogListPage from "./pages/BlogListPage";
|
||||||
|
import BrandDetailPage from "./pages/BrandDetailPage";
|
||||||
|
import BrandListPage from "./pages/BrandListPage";
|
||||||
|
import ContactPage from "./pages/ContactPage";
|
||||||
|
import HomePage from "./pages/HomePage";
|
||||||
|
import ReportageDetailPage from "./pages/ReportageDetailPage";
|
||||||
|
import ReportageListPage from "./pages/ReportageListPage";
|
||||||
|
import "./App.css";
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route element={<Layout />}>
|
||||||
|
<Route index element={<HomePage />} />
|
||||||
|
<Route path="about" element={<AboutPage />} />
|
||||||
|
<Route path="contact" element={<ContactPage />} />
|
||||||
|
<Route path="blog" element={<BlogListPage />} />
|
||||||
|
<Route path="blog/:slug" element={<BlogDetailPage />} />
|
||||||
|
<Route path="reportages" element={<ReportageListPage />} />
|
||||||
|
<Route path="reportages/:slug" element={<ReportageDetailPage />} />
|
||||||
|
<Route path="brands" element={<BrandListPage />} />
|
||||||
|
<Route path="brands/:slug" element={<BrandDetailPage />} />
|
||||||
|
<Route path="*" element={<Navigate to="/" replace />} />
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
.about {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.05fr 0.95fr;
|
||||||
|
gap: 3.5rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__visual {
|
||||||
|
position: relative;
|
||||||
|
min-height: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__panel {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 0.65rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__panel--back {
|
||||||
|
inset: 12% 18% 0 0;
|
||||||
|
background: linear-gradient(145deg, var(--blue-soft), var(--blue-deep), var(--dark-blue));
|
||||||
|
transform: rotate(-2.5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__panel--front {
|
||||||
|
inset: 0 0 12% 8%;
|
||||||
|
box-shadow: 0 18px 40px rgba(11, 42, 91, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__panel--front img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__lead {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__text {
|
||||||
|
color: var(--gray-600);
|
||||||
|
margin-bottom: 1.75rem;
|
||||||
|
max-width: 34rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__cta {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.85rem 1.3rem;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
background: linear-gradient(135deg, var(--blue), var(--dark-blue));
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: transform 0.25s var(--ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__cta:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.about__layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__visual {
|
||||||
|
min-height: 300px;
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import "./AboutUs.css";
|
||||||
|
|
||||||
|
export default function AboutUs() {
|
||||||
|
return (
|
||||||
|
<section className="section about" id="about">
|
||||||
|
<div className="container about__layout">
|
||||||
|
<div className="about__visual" aria-hidden="true">
|
||||||
|
<div className="about__panel about__panel--back" />
|
||||||
|
<div className="about__panel about__panel--front">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80"
|
||||||
|
alt=""
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="about__copy">
|
||||||
|
<span className="section__eyebrow">Who we are</span>
|
||||||
|
<h2 className="section__title">About us</h2>
|
||||||
|
<p className="section__lead about__lead">
|
||||||
|
NovinTrades is a marketplace of trusted brands, industry categories,
|
||||||
|
and practical content — built to help businesses find the right
|
||||||
|
partners faster.
|
||||||
|
</p>
|
||||||
|
<p className="about__text">
|
||||||
|
We bring together verified company profiles, trade insights, and a
|
||||||
|
clear category map so buyers and suppliers can navigate opportunities
|
||||||
|
with confidence. From manufacturing floors to logistics corridors,
|
||||||
|
our platform keeps discovery simple and professional.
|
||||||
|
</p>
|
||||||
|
<Link className="about__cta" to="/about">
|
||||||
|
Learn more
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
.categories {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categories__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categories__item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.45rem;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 1.25rem 1.15rem 1.35rem;
|
||||||
|
border-radius: 0.55rem;
|
||||||
|
background: linear-gradient(
|
||||||
|
160deg,
|
||||||
|
rgba(255, 255, 255, 0.78) 0%,
|
||||||
|
rgba(232, 238, 246, 0.92) 100%
|
||||||
|
);
|
||||||
|
border: 1px solid rgba(11, 42, 91, 0.08);
|
||||||
|
transition:
|
||||||
|
transform 0.3s var(--ease),
|
||||||
|
border-color 0.25s ease,
|
||||||
|
background 0.25s ease;
|
||||||
|
animation: rise-in 0.55s var(--ease) both;
|
||||||
|
scroll-margin-top: calc(var(--header-h) + 1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.categories__item:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(31, 95, 168, 0.28);
|
||||||
|
background: linear-gradient(
|
||||||
|
160deg,
|
||||||
|
rgba(255, 255, 255, 0.95) 0%,
|
||||||
|
rgba(197, 216, 239, 0.55) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.categories__icon {
|
||||||
|
width: 2.55rem;
|
||||||
|
height: 2.55rem;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 0.45rem;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
background: linear-gradient(145deg, var(--gray-100), var(--blue-soft));
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categories__name {
|
||||||
|
font-size: 1.02rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.categories__desc {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
line-height: 1.45;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categories__status {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
color: var(--gray-600);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categories__status--error {
|
||||||
|
color: #b42318;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rise-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(14px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
.categories__grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 520px) {
|
||||||
|
.categories__grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user