Browse Source
feat(frontend): implement React + Vite dashboard SPA with custom styling and API connection
master
feat(frontend): implement React + Vite dashboard SPA with custom styling and API connection
master
PouyaKhajavi
2 days ago
17 changed files with 3480 additions and 5 deletions
-
10checklist.md
-
24frontend/.gitignore
-
8frontend/.oxlintrc.json
-
16frontend/README.md
-
15frontend/index.html
-
1582frontend/package-lock.json
-
25frontend/package.json
-
1frontend/public/favicon.svg
-
24frontend/public/icons.svg
-
1frontend/src/App.css
-
761frontend/src/App.jsx
-
BINfrontend/src/assets/hero.png
-
1frontend/src/assets/react.svg
-
1frontend/src/assets/vite.svg
-
991frontend/src/index.css
-
10frontend/src/main.jsx
-
15frontend/vite.config.js
@ -0,0 +1,24 @@ |
|||
# Logs |
|||
logs |
|||
*.log |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
pnpm-debug.log* |
|||
lerna-debug.log* |
|||
|
|||
node_modules |
|||
dist |
|||
dist-ssr |
|||
*.local |
|||
|
|||
# Editor directories and files |
|||
.vscode/* |
|||
!.vscode/extensions.json |
|||
.idea |
|||
.DS_Store |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
@ -0,0 +1,8 @@ |
|||
{ |
|||
"$schema": "./node_modules/oxlint/configuration_schema.json", |
|||
"plugins": ["react", "oxc"], |
|||
"rules": { |
|||
"react/rules-of-hooks": "error", |
|||
"react/only-export-components": ["warn", { "allowConstantExport": true }] |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
# React + Vite |
|||
|
|||
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules. |
|||
|
|||
Currently, two official plugins are available: |
|||
|
|||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) |
|||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) |
|||
|
|||
## React Compiler |
|||
|
|||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). |
|||
|
|||
## Expanding the Oxlint configuration |
|||
|
|||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and Oxlint's TypeScript related rules in your project. |
|||
@ -0,0 +1,15 @@ |
|||
<!doctype html> |
|||
<html lang="fa" dir="rtl"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>دیدبان دیوار - سامانه کرالر هوشمند</title> |
|||
<!-- Fonts: Vazirmatn for Persian, Inter for English --> |
|||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Vazirmatn:wght@300;400;500;700;800&display=swap" rel="stylesheet" /> |
|||
</head> |
|||
<body> |
|||
<div id="root"></div> |
|||
<script type="module" src="/src/main.jsx"></script> |
|||
</body> |
|||
</html> |
|||
1582
frontend/package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,25 @@ |
|||
{ |
|||
"name": "frontend", |
|||
"private": true, |
|||
"version": "0.0.0", |
|||
"type": "module", |
|||
"scripts": { |
|||
"dev": "vite", |
|||
"build": "vite build", |
|||
"lint": "oxlint", |
|||
"preview": "vite preview" |
|||
}, |
|||
"dependencies": { |
|||
"axios": "^1.19.0", |
|||
"lucide-react": "^1.30.0", |
|||
"react": "^19.2.8", |
|||
"react-dom": "^19.2.8" |
|||
}, |
|||
"devDependencies": { |
|||
"@types/react": "^19.2.17", |
|||
"@types/react-dom": "^19.2.3", |
|||
"@vitejs/plugin-react": "^6.0.4", |
|||
"oxlint": "^1.75.0", |
|||
"vite": "^8.2.0" |
|||
} |
|||
} |
|||
1
frontend/public/favicon.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,24 @@ |
|||
<svg xmlns="http://www.w3.org/2000/svg"> |
|||
<symbol id="bluesky-icon" viewBox="0 0 16 17"> |
|||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g> |
|||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs> |
|||
</symbol> |
|||
<symbol id="discord-icon" viewBox="0 0 20 19"> |
|||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/> |
|||
</symbol> |
|||
<symbol id="documentation-icon" viewBox="0 0 21 20"> |
|||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/> |
|||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/> |
|||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/> |
|||
</symbol> |
|||
<symbol id="github-icon" viewBox="0 0 19 19"> |
|||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/> |
|||
</symbol> |
|||
<symbol id="social-icon" viewBox="0 0 20 20"> |
|||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/> |
|||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/> |
|||
</symbol> |
|||
<symbol id="x-icon" viewBox="0 0 19 19"> |
|||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/> |
|||
</symbol> |
|||
</svg> |
|||
@ -0,0 +1 @@ |
|||
/* App-specific styles have been moved to index.css */ |
|||
@ -0,0 +1,761 @@ |
|||
import React, { useState, useEffect } from 'react'; |
|||
import axios from 'axios'; |
|||
import { |
|||
ShieldAlert, |
|||
Layers, |
|||
Newspaper, |
|||
History, |
|||
Plus, |
|||
Search, |
|||
Trash2, |
|||
Edit2, |
|||
Play, |
|||
X, |
|||
AlertTriangle, |
|||
RefreshCw, |
|||
ExternalLink, |
|||
Info |
|||
} from 'lucide-react'; |
|||
|
|||
function App() { |
|||
const [activeTab, setActiveTab] = useState('crawlers'); |
|||
const [crawlers, setCrawlers] = useState([]); |
|||
const [ads, setAds] = useState([]); |
|||
const [logs, setLogs] = useState([]); |
|||
const [health, setHealth] = useState({ database: 'loading', redis: 'loading' }); |
|||
|
|||
// Loading states |
|||
const [loadingCrawlers, setLoadingCrawlers] = useState(true); |
|||
const [loadingAds, setLoadingAds] = useState(true); |
|||
const [loadingLogs, setLoadingLogs] = useState(true); |
|||
|
|||
// Filters |
|||
const [filterTaskId, setFilterTaskId] = useState(''); |
|||
const [filterOnlyFlagged, setFilterOnlyFlagged] = useState(false); |
|||
const [searchTerm, setSearchTerm] = useState(''); |
|||
|
|||
// Modal states |
|||
const [modalOpen, setModalOpen] = useState(false); |
|||
const [editingCrawler, setEditingCrawler] = useState(null); |
|||
|
|||
// Form state |
|||
const [formTitle, setFormTitle] = useState(''); |
|||
const [formUrl, setFormUrl] = useState(''); |
|||
const [formPrompt, setFormPrompt] = useState(''); |
|||
const [formInterval, setFormInterval] = useState('15'); |
|||
const [formTelegram, setFormTelegram] = useState(''); |
|||
const [formStartHour, setFormStartHour] = useState('08:00'); |
|||
const [formEndHour, setFormEndHour] = useState('23:00'); |
|||
const [formIsActive, setFormIsActive] = useState(true); |
|||
const [formError, setFormError] = useState(''); |
|||
|
|||
// Toast alert |
|||
const [toast, setToast] = useState(null); |
|||
|
|||
const showToast = (message, type = 'info') => { |
|||
setToast({ message, type }); |
|||
setTimeout(() => { |
|||
setToast(null); |
|||
}, 4000); |
|||
}; |
|||
|
|||
// Initial Fetch & Health Check Polling |
|||
useEffect(() => { |
|||
fetchHealth(); |
|||
fetchCrawlers(); |
|||
|
|||
const healthInterval = setInterval(fetchHealth, 15000); |
|||
return () => clearInterval(healthInterval); |
|||
}, []); |
|||
|
|||
// Fetch ads and logs based on active tab and filtering criteria |
|||
useEffect(() => { |
|||
if (activeTab === 'ads') { |
|||
fetchAds(); |
|||
} else if (activeTab === 'logs') { |
|||
fetchLogs(); |
|||
} |
|||
}, [activeTab, filterTaskId, filterOnlyFlagged]); |
|||
|
|||
// Dynamic status polling for active logs |
|||
useEffect(() => { |
|||
let logsInterval = null; |
|||
if (activeTab === 'logs' && logs.some(l => l.status === 'RUNNING')) { |
|||
logsInterval = setInterval(fetchLogs, 5000); |
|||
} |
|||
return () => { |
|||
if (logsInterval) clearInterval(logsInterval); |
|||
}; |
|||
}, [activeTab, logs]); |
|||
|
|||
const fetchHealth = async () => { |
|||
try { |
|||
const res = await axios.get('/api/health/'); |
|||
setHealth({ |
|||
database: res.data.database === 'healthy' ? 'healthy' : 'unhealthy', |
|||
redis: res.data.redis === 'healthy' ? 'healthy' : 'unhealthy' |
|||
}); |
|||
} catch (err) { |
|||
setHealth({ |
|||
database: err.response?.data?.database === 'healthy' ? 'healthy' : 'unhealthy', |
|||
redis: err.response?.data?.redis === 'healthy' ? 'healthy' : 'unhealthy' |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
const fetchCrawlers = async () => { |
|||
setLoadingCrawlers(true); |
|||
try { |
|||
const res = await axios.get('/api/crawlers/'); |
|||
setCrawlers(res.data); |
|||
} catch (err) { |
|||
showToast('خطا در دریافت لیست کرالرها', 'danger'); |
|||
console.error(err); |
|||
} finally { |
|||
setLoadingCrawlers(false); |
|||
} |
|||
}; |
|||
|
|||
const fetchAds = async () => { |
|||
setLoadingAds(true); |
|||
try { |
|||
let url = '/api/ads/'; |
|||
const params = {}; |
|||
if (filterTaskId) params.crawl_task = filterTaskId; |
|||
if (filterOnlyFlagged) params.is_flagged = 'true'; |
|||
|
|||
const res = await axios.get(url, { params }); |
|||
setAds(res.data); |
|||
} catch (err) { |
|||
showToast('خطا در دریافت لیست آگهیها', 'danger'); |
|||
console.error(err); |
|||
} finally { |
|||
setLoadingAds(false); |
|||
} |
|||
}; |
|||
|
|||
const fetchLogs = async () => { |
|||
setLoadingLogs(true); |
|||
try { |
|||
// In Django REST, runs are queried per-crawler. We fetch all crawlers, |
|||
// then request runs for each and merge/sort them. |
|||
const crawlersList = crawlers.length > 0 ? crawlers : (await axios.get('/api/crawlers/')).data; |
|||
const promises = crawlersList.map(async (c) => { |
|||
try { |
|||
const res = await axios.get(`/api/crawlers/${c.id}/runs/`); |
|||
return res.data.map(run => ({ ...run, crawler_title: c.title })); |
|||
} catch (e) { |
|||
return []; |
|||
} |
|||
}); |
|||
const results = await Promise.all(promises); |
|||
const merged = results.flat().sort((a, b) => new Date(b.started_at) - new Date(a.started_at)); |
|||
setLogs(merged); |
|||
} catch (err) { |
|||
showToast('خطا در دریافت تاریخچه اجرا', 'danger'); |
|||
console.error(err); |
|||
} finally { |
|||
setLoadingLogs(false); |
|||
} |
|||
}; |
|||
|
|||
// Switch tabs |
|||
const switchTab = (tab) => { |
|||
setActiveTab(tab); |
|||
}; |
|||
|
|||
// Open Edit/Create Modal |
|||
const openCrawlerModal = (crawler = null) => { |
|||
setEditingCrawler(crawler); |
|||
setFormError(''); |
|||
if (crawler) { |
|||
setFormTitle(crawler.title); |
|||
setFormUrl(crawler.divar_url); |
|||
setFormPrompt(crawler.detection_prompt); |
|||
setFormInterval(String(crawler.interval_minutes)); |
|||
setFormTelegram(crawler.telegram_channel_id || ''); |
|||
setFormStartHour(crawler.start_hour.substring(0, 5)); |
|||
setFormEndHour(crawler.end_hour.substring(0, 5)); |
|||
setFormIsActive(crawler.is_active); |
|||
} else { |
|||
setFormTitle(''); |
|||
setFormUrl(''); |
|||
setFormPrompt(''); |
|||
setFormInterval('15'); |
|||
setFormTelegram(''); |
|||
setFormStartHour('08:00'); |
|||
setFormEndHour('23:00'); |
|||
setFormIsActive(true); |
|||
} |
|||
setModalOpen(true); |
|||
}; |
|||
|
|||
const closeCrawlerModal = () => { |
|||
setModalOpen(false); |
|||
setEditingCrawler(null); |
|||
}; |
|||
|
|||
const handleFormSubmit = async (e) => { |
|||
e.preventDefault(); |
|||
setFormError(''); |
|||
|
|||
if (!formUrl.startsWith('https://divar.ir/s/')) { |
|||
setFormError("لینک دیوار باید با 'https://divar.ir/s/' شروع شود"); |
|||
return; |
|||
} |
|||
|
|||
const payload = { |
|||
title: formTitle, |
|||
divar_url: formUrl, |
|||
detection_prompt: formPrompt, |
|||
interval_minutes: parseInt(formInterval), |
|||
start_hour: `${formStartHour}:00`, |
|||
end_hour: `${formEndHour}:00`, |
|||
telegram_channel_id: formTelegram || null, |
|||
is_active: formIsActive |
|||
}; |
|||
|
|||
try { |
|||
if (editingCrawler) { |
|||
await axios.put(`/api/crawlers/${editingCrawler.id}/`, payload); |
|||
showToast('کرالر با موفقیت ویرایش شد', 'success'); |
|||
} else { |
|||
await axios.post('/api/crawlers/', payload); |
|||
showToast('کرالر جدید با موفقیت ایجاد شد', 'success'); |
|||
} |
|||
closeCrawlerModal(); |
|||
fetchCrawlers(); |
|||
} catch (err) { |
|||
const errorDetail = err.response?.data ? JSON.stringify(err.response.data) : 'خطا در ثبت اطلاعات'; |
|||
setFormError(errorDetail); |
|||
} |
|||
}; |
|||
|
|||
const toggleCrawlerActive = async (crawler) => { |
|||
try { |
|||
await axios.patch(`/api/crawlers/${crawler.id}/`, { |
|||
is_active: !crawler.is_active |
|||
}); |
|||
showToast(`کرالر ${!crawler.is_active ? 'فعال' : 'غیرفعال'} شد`, 'info'); |
|||
fetchCrawlers(); |
|||
} catch (err) { |
|||
showToast('خطا در تغییر وضعیت کرالر', 'danger'); |
|||
} |
|||
}; |
|||
|
|||
const deleteCrawler = async (id) => { |
|||
if (!confirm('آیا از حذف این کرالر اطمینان دارید؟')) return; |
|||
try { |
|||
await axios.delete(`/api/crawlers/${id}/`); |
|||
showToast('کرالر با موفقیت حذف شد', 'success'); |
|||
fetchCrawlers(); |
|||
} catch (err) { |
|||
showToast('خطا در حذف کرالر', 'danger'); |
|||
} |
|||
}; |
|||
|
|||
const triggerCrawler = async (id) => { |
|||
try { |
|||
const res = await axios.post(`/api/crawlers/${id}/trigger/`); |
|||
showToast('درخواست اجرای کرالر با موفقیت ارسال شد', 'success'); |
|||
if (activeTab === 'logs') { |
|||
fetchLogs(); |
|||
} |
|||
} catch (err) { |
|||
showToast('خطا در اجرای کرالر', 'danger'); |
|||
} |
|||
}; |
|||
|
|||
// Format date helper |
|||
const formatDate = (isoStr) => { |
|||
if (!isoStr) return '-'; |
|||
const date = new Date(isoStr); |
|||
return date.toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' }) + ' ' + |
|||
date.toLocaleDateString('fa-IR', { month: '2-digit', day: '2-digit' }); |
|||
}; |
|||
|
|||
// Filter ads on client side based on Search Term |
|||
const getFilteredAds = () => { |
|||
if (!searchTerm) return ads; |
|||
const term = searchTerm.toLowerCase(); |
|||
return ads.filter(adEval => { |
|||
const ad = adEval.ad; |
|||
return ( |
|||
ad.title?.toLowerCase().includes(term) || |
|||
ad.description?.toLowerCase().includes(term) || |
|||
adEval.reason?.toLowerCase().includes(term) |
|||
); |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<div className="app-container"> |
|||
|
|||
{/* Toast Notification */} |
|||
{toast && ( |
|||
<div style={{ |
|||
position: 'fixed', |
|||
top: '20px', |
|||
left: '20px', |
|||
backgroundColor: toast.type === 'success' ? 'var(--success)' : toast.type === 'danger' ? 'var(--danger)' : 'var(--accent)', |
|||
color: 'white', |
|||
padding: '10px 20px', |
|||
borderRadius: '8px', |
|||
zIndex: 9999, |
|||
boxShadow: '0 4px 12px rgba(0,0,0,0.3)', |
|||
direction: 'rtl', |
|||
animation: 'fadeIn 0.2s ease' |
|||
}}> |
|||
{toast.message} |
|||
</div> |
|||
)} |
|||
|
|||
{/* Sidebar */} |
|||
<aside class="sidebar"> |
|||
<div class="sidebar-brand"> |
|||
<div class="brand-logo"> |
|||
<ShieldAlert className="brand-icon" /> |
|||
</div> |
|||
<div class="brand-info"> |
|||
<h1>دیدبان دیوار</h1> |
|||
<span>کرال هوشمند با AI</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<nav class="sidebar-nav"> |
|||
<button |
|||
className={`nav-item ${activeTab === 'crawlers' ? 'active' : ''}`} |
|||
onClick={() => switchTab('crawlers')} |
|||
> |
|||
<Layers /> |
|||
<span>مدیریت کرالرها</span> |
|||
</button> |
|||
<button |
|||
className={`nav-item ${activeTab === 'ads' ? 'active' : ''}`} |
|||
onClick={() => switchTab('ads')} |
|||
> |
|||
<Newspaper /> |
|||
<span>فید آگهیها</span> |
|||
</button> |
|||
<button |
|||
className={`nav-item ${activeTab === 'logs' ? 'active' : ''}`} |
|||
onClick={() => switchTab('logs')} |
|||
> |
|||
<History /> |
|||
<span>تاریخچه اجرا</span> |
|||
</button> |
|||
</nav> |
|||
|
|||
<div class="sidebar-footer"> |
|||
<span class="version-label">نسخه ۱.۰.۰ (MVP)</span> |
|||
</div> |
|||
</aside> |
|||
|
|||
{/* Main Content */} |
|||
<div className="main-content"> |
|||
|
|||
{/* Header */} |
|||
<header className="app-header"> |
|||
<div className="header-title"> |
|||
<h2> |
|||
{activeTab === 'crawlers' && 'مدیریت کرالرها'} |
|||
{activeTab === 'ads' && 'فید آگهیهای دیوار'} |
|||
{activeTab === 'logs' && 'تاریخچه اجرای کرالرها'} |
|||
</h2> |
|||
</div> |
|||
|
|||
<div className="header-actions"> |
|||
<div className="system-health"> |
|||
<div className="health-item"> |
|||
<span className={`dot ${health.database === 'healthy' ? 'green' : 'red'}`}></span> |
|||
<span>دیتابیس</span> |
|||
</div> |
|||
<div className="health-item"> |
|||
<span className={`dot ${health.redis === 'healthy' ? 'green' : 'red'}`}></span> |
|||
<span>ردیس</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
|
|||
{/* Viewport */} |
|||
<main className="view-viewport"> |
|||
|
|||
{/* TAB 1: Crawlers View */} |
|||
{activeTab === 'crawlers' && ( |
|||
<div className="tab-view active"> |
|||
<div className="view-actions-bar"> |
|||
<button className="btn btn-primary" onClick={() => openCrawlerModal()}> |
|||
<Plus /> |
|||
<span>تعریف کرالر جدید</span> |
|||
</button> |
|||
</div> |
|||
|
|||
{loadingCrawlers ? ( |
|||
<div className="loading-state"> |
|||
<div className="spinner"></div> |
|||
<p>در حال بارگذاری کرالرها...</p> |
|||
</div> |
|||
) : crawlers.length === 0 ? ( |
|||
<div className="empty-state"> |
|||
<AlertTriangle /> |
|||
<p>هیچ کرالری تعریف نشده است. جهت پایش دیوار، یک کرالر جدید ایجاد کنید.</p> |
|||
</div> |
|||
) : ( |
|||
<div className="crawlers-grid"> |
|||
{crawlers.map(c => ( |
|||
<div className="card" key={c.id}> |
|||
<div className="card-header"> |
|||
<h4 className="card-title" title={c.title}>{c.title}</h4> |
|||
<div className="toggle-group"> |
|||
<label className="switch-container"> |
|||
<input |
|||
type="checkbox" |
|||
checked={c.is_active} |
|||
onChange={() => toggleCrawlerActive(c)} |
|||
/> |
|||
<span className="switch-slider"></span> |
|||
</label> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="card-body"> |
|||
<div className="card-field"> |
|||
<span className="card-field-label">لینک فیلتر دیوار</span> |
|||
<span className="card-field-value url" title={c.divar_url}>{c.divar_url}</span> |
|||
</div> |
|||
<div className="card-field"> |
|||
<span className="card-field-label">پرامپت ارزیابی AI</span> |
|||
<span className="card-field-value prompt" title={c.detection_prompt}>{c.detection_prompt}</span> |
|||
</div> |
|||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}> |
|||
<div className="card-field"> |
|||
<span className="card-field-label">فاصله زمانی پایش</span> |
|||
<span className="card-field-value arabic-num-font">{c.interval_minutes} دقیقه</span> |
|||
</div> |
|||
<div className="card-field"> |
|||
<span className="card-field-label">بازه زمانی مجاز</span> |
|||
<span className="card-field-value arabic-num-font">{c.start_hour.substring(0,5)} الی {c.end_hour.substring(0,5)}</span> |
|||
</div> |
|||
</div> |
|||
{c.telegram_channel_id && ( |
|||
<div className="card-field"> |
|||
<span className="card-field-label">کانال اعلانات تلگرام</span> |
|||
<span className="card-field-value font-mono">{c.telegram_channel_id}</span> |
|||
</div> |
|||
)} |
|||
</div> |
|||
|
|||
<div className="card-footer"> |
|||
<button className="btn btn-secondary btn-icon-only" title="اجرای فوری" onClick={() => triggerCrawler(c.id)}> |
|||
<Play style={{ fill: 'currentColor' }} /> |
|||
</button> |
|||
|
|||
<div className="card-actions"> |
|||
<button className="btn btn-secondary btn-icon-only" title="ویرایش" onClick={() => openCrawlerModal(c)}> |
|||
<Edit2 /> |
|||
</button> |
|||
<button className="btn btn-danger btn-icon-only" title="حذف" onClick={() => deleteCrawler(c.id)}> |
|||
<Trash2 /> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
))} |
|||
</div> |
|||
)} |
|||
</div> |
|||
)} |
|||
|
|||
{/* TAB 2: Ads View */} |
|||
{activeTab === 'ads' && ( |
|||
<div className="tab-view active"> |
|||
<div className="ads-filters-bar"> |
|||
<div className="search-box"> |
|||
<Search className="search-icon" /> |
|||
<input |
|||
type="text" |
|||
placeholder="جستجو در فید آگهیها..." |
|||
value={searchTerm} |
|||
onChange={(e) => setSearchTerm(e.target.value)} |
|||
/> |
|||
</div> |
|||
|
|||
<div className="filters-group"> |
|||
<div className="filter-item"> |
|||
<label>فیلتر کرالر:</label> |
|||
<select value={filterTaskId} onChange={(e) => setFilterTaskId(e.target.value)}> |
|||
<option value="">همه کرالرها</option> |
|||
{crawlers.map(c => ( |
|||
<option key={c.id} value={c.id}>{c.title}</option> |
|||
))} |
|||
</select> |
|||
</div> |
|||
|
|||
<div className="filter-item toggle-filter"> |
|||
<label className="switch-container"> |
|||
<input |
|||
type="checkbox" |
|||
checked={filterOnlyFlagged} |
|||
onChange={(e) => setFilterOnlyFlagged(e.target.checked)} |
|||
/> |
|||
<span class="switch-slider"></span> |
|||
</label> |
|||
<span className="toggle-label">فقط پرچمگذاری شده (AI)</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
{loadingAds ? ( |
|||
<div className="loading-state"> |
|||
<div className="spinner"></div> |
|||
<p>در حال بارگذاری آگهیها...</p> |
|||
</div> |
|||
) : getFilteredAds().length === 0 ? ( |
|||
<div className="empty-state"> |
|||
<AlertTriangle /> |
|||
<p>هیچ آگهی با معیارهای فیلتر یافت نشد.</p> |
|||
</div> |
|||
) : ( |
|||
<div className="ads-grid"> |
|||
{getFilteredAds().map(adEval => ( |
|||
<div className={`card ad-card ${adEval.is_flagged ? 'flagged' : ''}`} key={adEval.id}> |
|||
<div className="ad-meta-top"> |
|||
<span className="ad-published-at">{formatDate(adEval.evaluated_at)}</span> |
|||
{adEval.ad.price && ( |
|||
<span className="ad-price">{adEval.ad.price}</span> |
|||
)} |
|||
</div> |
|||
|
|||
<h4 className="card-title" style={{ maxWidth: '100%', marginBottom: '0.5rem' }}> |
|||
{adEval.ad.title} |
|||
</h4> |
|||
|
|||
<p className="ad-desc">{adEval.ad.description}</p> |
|||
|
|||
{adEval.is_flagged && ( |
|||
<div className="ai-flag-box"> |
|||
<div className="ai-flag-header"> |
|||
<span>تحلیل هوش مصنوعی (پرچمگذاری شده)</span> |
|||
{adEval.confidence && ( |
|||
<span className="ai-confidence-badge">اطمینان: {Math.round(adEval.confidence * 100)}٪</span> |
|||
)} |
|||
</div> |
|||
<p className="ai-flag-reason">{adEval.reason}</p> |
|||
</div> |
|||
)} |
|||
|
|||
<div className="ad-tag-list"> |
|||
<span className="ad-tag">توکن: {adEval.ad.divar_token}</span> |
|||
{adEval.ad.category && ( |
|||
<span className="ad-tag">{adEval.ad.category}</span> |
|||
)} |
|||
</div> |
|||
|
|||
<div className="card-footer" style={{ borderTop: '1px solid var(--border-color)', paddingTop: '1rem', marginTop: 'auto' }}> |
|||
<a href={adEval.ad.url} target="_blank" rel="noopener noreferrer" className="btn btn-secondary btn-icon-only" title="مشاهده در دیوار" style={{ color: 'var(--info)' }}> |
|||
<ExternalLink /> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
))} |
|||
</div> |
|||
)} |
|||
</div> |
|||
)} |
|||
|
|||
{/* TAB 3: Logs View */} |
|||
{activeTab === 'logs' && ( |
|||
<div className="tab-view active"> |
|||
{loadingLogs ? ( |
|||
<div className="loading-state"> |
|||
<div className="spinner"></div> |
|||
<p>در حال دریافت تاریخچه اجرا...</p> |
|||
</div> |
|||
) : logs.length === 0 ? ( |
|||
<div className="empty-state"> |
|||
<AlertTriangle /> |
|||
<p>هیچ لاگ تاریخی ثبت نشده است.</p> |
|||
</div> |
|||
) : ( |
|||
<div className="table-container"> |
|||
<table className="data-table"> |
|||
<thead> |
|||
<tr> |
|||
<th>کرالر</th> |
|||
<th>شروع اجرا</th> |
|||
<th>پایان اجرا</th> |
|||
<th>وضعیت</th> |
|||
<th>آگهی یافت شده</th> |
|||
<th>پردازش AI</th> |
|||
<th>پرچمگذاری شده</th> |
|||
<th>لاگ خطا</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{logs.map(run => ( |
|||
<tr key={run.id}> |
|||
<td style={{ fontWeight: 600 }}>{run.crawler_title}</td> |
|||
<td className="arabic-num-font">{formatDate(run.started_at)}</td> |
|||
<td className="arabic-num-font">{formatDate(run.finished_at)}</td> |
|||
<td> |
|||
<span className={`badge-status ${run.status.toLowerCase()}`}> |
|||
{run.status === 'RUNNING' && 'در حال اجرا'} |
|||
{run.status === 'SUCCESS' && 'موفق'} |
|||
{run.status === 'FAILED' && 'ناموفق'} |
|||
</span> |
|||
</td> |
|||
<td className="arabic-num-font">{run.ads_fetched_count}</td> |
|||
<td className="arabic-num-font">{run.ads_evaluated_count}</td> |
|||
<td className="arabic-num-font" style={{ color: run.ads_flagged_count > 0 ? 'var(--accent)' : 'inherit', fontWeight: run.ads_flagged_count > 0 ? 700 : 'normal' }}> |
|||
{run.ads_flagged_count} |
|||
</td> |
|||
<td style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={run.error_log}> |
|||
{run.error_log || '-'} |
|||
</td> |
|||
</tr> |
|||
))} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
)} |
|||
</div> |
|||
)} |
|||
|
|||
</main> |
|||
</div> |
|||
|
|||
{/* Form Dialog Modal */} |
|||
<div className={`modal-overlay ${modalOpen ? 'open' : ''}`}> |
|||
<div className="modal-card"> |
|||
<div className="modal-header"> |
|||
<h3>{editingCrawler ? 'ویرایش کرالر' : 'تعریف کرالر جدید'}</h3> |
|||
<button className="close-btn" onClick={closeCrawlerModal}> |
|||
<X /> |
|||
</button> |
|||
</div> |
|||
|
|||
<form onSubmit={handleFormSubmit}> |
|||
<div className="modal-body"> |
|||
{formError && ( |
|||
<div style={{ |
|||
backgroundColor: 'rgba(239, 68, 68, 0.1)', |
|||
border: '1px solid var(--danger)', |
|||
padding: '10px', |
|||
borderRadius: '6px', |
|||
fontSize: '0.85rem', |
|||
color: '#fca5a5' |
|||
}}> |
|||
{formError} |
|||
</div> |
|||
)} |
|||
|
|||
<div className="form-group"> |
|||
<label>عنوان کرالر</label> |
|||
<input |
|||
type="text" |
|||
value={formTitle} |
|||
onChange={(e) => setFormTitle(e.target.value)} |
|||
placeholder="مثال: رهن کامل فوری نیاوران" |
|||
required |
|||
/> |
|||
</div> |
|||
|
|||
<div className="form-group"> |
|||
<label>لینک فیلتر دیوار (باید با https://divar.ir/s/ شروع شود)</label> |
|||
<input |
|||
type="url" |
|||
value={formUrl} |
|||
onChange={(e) => setFormUrl(e.target.value)} |
|||
placeholder="https://divar.ir/s/tehran/rent-apartment/niavaran?..." |
|||
required |
|||
/> |
|||
</div> |
|||
|
|||
<div className="form-group"> |
|||
<label>پرامپت ارزیابی هوش مصنوعی (AI)</label> |
|||
<textarea |
|||
value={formPrompt} |
|||
onChange={(e) => setFormPrompt(e.target.value)} |
|||
placeholder="بررسی کن آیا آگهی پول لازم و رهن کامل است یا خیر..." |
|||
rows={3} |
|||
required |
|||
/> |
|||
</div> |
|||
|
|||
<div className="form-row"> |
|||
<div className="form-group"> |
|||
<label>بازه زمانی پایش</label> |
|||
<select value={formInterval} onChange={(e) => setFormInterval(e.target.value)}> |
|||
<option value="5">۵ دقیقه</option> |
|||
<option value="15">۱۵ دقیقه</option> |
|||
<option value="30">۳۰ دقیقه</option> |
|||
<option value="60">۱ ساعت</option> |
|||
<option value="120">۲ ساعت</option> |
|||
<option value="180">۳ ساعت</option> |
|||
<option value="240">۴ ساعت</option> |
|||
<option value="300">۵ ساعت</option> |
|||
<option value="360">۶ ساعت</option> |
|||
</select> |
|||
</div> |
|||
|
|||
<div className="form-group"> |
|||
<label>آیدی کانال تلگرام (اختیاری)</label> |
|||
<input |
|||
type="text" |
|||
value={formTelegram} |
|||
onChange={(e) => setFormTelegram(e.target.value)} |
|||
placeholder="مثال: @my_alerts" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="form-row"> |
|||
<div className="form-group"> |
|||
<label>ساعت شروع پنجره مجاز</label> |
|||
<input |
|||
type="time" |
|||
value={formStartHour} |
|||
onChange={(e) => setFormStartHour(e.target.value)} |
|||
required |
|||
/> |
|||
</div> |
|||
|
|||
<div className="form-group"> |
|||
<label>ساعت پایان پنجره مجاز</label> |
|||
<input |
|||
type="time" |
|||
value={formEndHour} |
|||
onChange={(e) => setFormEndHour(e.target.value)} |
|||
required |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="form-group toggle-group"> |
|||
<span className="toggle-label" style={{ fontSize: '0.85rem' }}>کرالر فعال باشد</span> |
|||
<label className="switch-container"> |
|||
<input |
|||
type="checkbox" |
|||
checked={formIsActive} |
|||
onChange={(e) => setFormIsActive(e.target.checked)} |
|||
/> |
|||
<span class="switch-slider"></span> |
|||
</label> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div className="modal-footer"> |
|||
<button type="button" className="btn btn-secondary" onClick={closeCrawlerModal}>انصراف</button> |
|||
<button type="submit" className="btn btn-primary">ذخیره</button> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default App; |
|||
|
After Width: 343 | Height: 361 | Size: 13 KiB |
@ -0,0 +1 @@ |
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg> |
|||
1
frontend/src/assets/vite.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,991 @@ |
|||
/* Core Styling & Design System - Divar Watcher Dashboard */ |
|||
|
|||
:root { |
|||
/* Font Variables */ |
|||
--font-fa: 'Vazirmatn', system-ui, -apple-system, sans-serif; |
|||
--font-en: 'Inter', system-ui, -apple-system, sans-serif; |
|||
|
|||
/* Color Tokens (Dark Theme Base) */ |
|||
--bg-main: #0b0f19; |
|||
--bg-sidebar: #111827; |
|||
--bg-card: rgba(31, 41, 55, 0.4); |
|||
--bg-card-hover: rgba(31, 41, 55, 0.6); |
|||
--border-color: rgba(255, 255, 255, 0.08); |
|||
--border-hover: rgba(168, 85, 247, 0.4); |
|||
|
|||
/* Text Colors */ |
|||
--text-primary: #f3f4f6; |
|||
--text-secondary: #9ca3af; |
|||
--text-muted: #6b7280; |
|||
|
|||
/* Accents & Statuses */ |
|||
--accent: #a855f7; /* Purple */ |
|||
--accent-glow: rgba(168, 85, 247, 0.2); |
|||
--success: #10b981; /* Emerald */ |
|||
--success-glow: rgba(16, 185, 129, 0.15); |
|||
--danger: #ef4444; /* Rose Red */ |
|||
--danger-glow: rgba(239, 68, 68, 0.15); |
|||
--warning: #f59e0b; /* Amber */ |
|||
--warning-glow: rgba(245, 158, 11, 0.15); |
|||
--info: #3b82f6; /* Blue */ |
|||
--info-glow: rgba(59, 130, 246, 0.15); |
|||
|
|||
/* Shadows & Glassmorphism */ |
|||
--glass-blur: blur(12px); |
|||
--card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); |
|||
--transition-speed: 0.25s; |
|||
} |
|||
|
|||
* { |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
padding: 0; |
|||
font-family: var(--font-fa); |
|||
} |
|||
|
|||
body { |
|||
background-color: var(--bg-main); |
|||
color: var(--text-primary); |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
line-height: 1.6; |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
background-image: |
|||
radial-gradient(at 0% 0%, rgba(124, 58, 237, 0.08) 0px, transparent 50%), |
|||
radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.08) 0px, transparent 50%); |
|||
} |
|||
|
|||
/* App Container Layout */ |
|||
.app-container { |
|||
display: flex; |
|||
min-height: 100vh; |
|||
position: relative; |
|||
} |
|||
|
|||
/* Sidebar Styling */ |
|||
.sidebar { |
|||
width: 280px; |
|||
background-color: var(--bg-sidebar); |
|||
border-left: 1px solid var(--border-color); |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 1.5rem; |
|||
position: sticky; |
|||
top: 0; |
|||
height: 100vh; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.sidebar-brand { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 0.75rem; |
|||
margin-bottom: 2.5rem; |
|||
padding-bottom: 1rem; |
|||
border-bottom: 1px solid var(--border-color); |
|||
} |
|||
|
|||
.brand-logo { |
|||
background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%); |
|||
width: 44px; |
|||
height: 44px; |
|||
border-radius: 12px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0 0 15px rgba(168, 85, 247, 0.3); |
|||
} |
|||
|
|||
.brand-icon { |
|||
width: 24px; |
|||
height: 24px; |
|||
color: white; |
|||
} |
|||
|
|||
.brand-info h1 { |
|||
font-size: 1.25rem; |
|||
font-weight: 800; |
|||
color: var(--text-primary); |
|||
} |
|||
|
|||
.brand-info span { |
|||
font-size: 0.75rem; |
|||
color: var(--text-muted); |
|||
} |
|||
|
|||
.sidebar-nav { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 0.5rem; |
|||
flex-grow: 1; |
|||
} |
|||
|
|||
.nav-item { |
|||
background: transparent; |
|||
border: none; |
|||
color: var(--text-secondary); |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 0.85rem; |
|||
padding: 0.85rem 1rem; |
|||
border-radius: 10px; |
|||
cursor: pointer; |
|||
font-size: 0.95rem; |
|||
font-weight: 500; |
|||
transition: all var(--transition-speed) ease; |
|||
text-align: right; |
|||
width: 100%; |
|||
} |
|||
|
|||
.nav-item:hover { |
|||
background-color: rgba(255, 255, 255, 0.03); |
|||
color: var(--text-primary); |
|||
} |
|||
|
|||
.nav-item.active { |
|||
background: linear-gradient(90deg, rgba(168, 85, 247, 0.15) 0%, transparent 100%); |
|||
border-right: 3px solid var(--accent); |
|||
color: var(--accent); |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.nav-item svg { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
.sidebar-footer { |
|||
padding-top: 1rem; |
|||
border-top: 1px solid var(--border-color); |
|||
text-align: center; |
|||
} |
|||
|
|||
.version-label { |
|||
font-size: 0.75rem; |
|||
color: var(--text-muted); |
|||
font-family: var(--font-en); |
|||
} |
|||
|
|||
/* Main Content Area */ |
|||
.main-content { |
|||
flex-grow: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
min-width: 0; /* Prevents flex items from overflowing */ |
|||
} |
|||
|
|||
/* App Header */ |
|||
.app-header { |
|||
background-color: rgba(11, 15, 25, 0.7); |
|||
backdrop-filter: var(--glass-blur); |
|||
border-bottom: 1px solid var(--border-color); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 1.25rem 2rem; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.header-title h2 { |
|||
font-size: 1.35rem; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.system-health { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 1.25rem; |
|||
background-color: rgba(255, 255, 255, 0.02); |
|||
padding: 0.45rem 1rem; |
|||
border-radius: 30px; |
|||
border: 1px solid var(--border-color); |
|||
} |
|||
|
|||
.health-item { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 0.45rem; |
|||
font-size: 0.8rem; |
|||
color: var(--text-secondary); |
|||
} |
|||
|
|||
.dot { |
|||
width: 8px; |
|||
height: 8px; |
|||
border-radius: 50%; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.dot.green { |
|||
background-color: var(--success); |
|||
box-shadow: 0 0 8px var(--success); |
|||
} |
|||
|
|||
.dot.red { |
|||
background-color: var(--danger); |
|||
box-shadow: 0 0 8px var(--danger); |
|||
} |
|||
|
|||
.dot.yellow { |
|||
background-color: var(--warning); |
|||
box-shadow: 0 0 8px var(--warning); |
|||
} |
|||
|
|||
/* View Viewport Container */ |
|||
.view-viewport { |
|||
padding: 2rem; |
|||
flex-grow: 1; |
|||
} |
|||
|
|||
.tab-view { |
|||
display: none; |
|||
animation: fadeIn 0.3s ease; |
|||
} |
|||
|
|||
.tab-view.active { |
|||
display: block; |
|||
} |
|||
|
|||
@keyframes fadeIn { |
|||
from { opacity: 0; transform: translateY(6px); } |
|||
to { opacity: 1; transform: translateY(0); } |
|||
} |
|||
|
|||
/* Button Component */ |
|||
.btn { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 0.5rem; |
|||
border: 1px solid transparent; |
|||
border-radius: 8px; |
|||
padding: 0.6rem 1.2rem; |
|||
font-size: 0.9rem; |
|||
font-weight: 500; |
|||
cursor: pointer; |
|||
transition: all var(--transition-speed) ease; |
|||
} |
|||
|
|||
.btn svg { |
|||
width: 18px; |
|||
height: 18px; |
|||
} |
|||
|
|||
.btn-primary { |
|||
background-color: var(--accent); |
|||
color: white; |
|||
box-shadow: 0 4px 14px 0 rgba(168, 85, 247, 0.3); |
|||
} |
|||
|
|||
.btn-primary:hover { |
|||
background-color: #9333ea; |
|||
transform: translateY(-1px); |
|||
box-shadow: 0 6px 20px 0 rgba(168, 85, 247, 0.4); |
|||
} |
|||
|
|||
.btn-primary:disabled { |
|||
opacity: 0.6; |
|||
cursor: not-allowed; |
|||
transform: none; |
|||
} |
|||
|
|||
.btn-secondary { |
|||
background-color: rgba(255, 255, 255, 0.05); |
|||
border-color: var(--border-color); |
|||
color: var(--text-primary); |
|||
} |
|||
|
|||
.btn-secondary:hover { |
|||
background-color: rgba(255, 255, 255, 0.1); |
|||
} |
|||
|
|||
.btn-danger { |
|||
background-color: var(--danger); |
|||
color: white; |
|||
box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.2); |
|||
} |
|||
|
|||
.btn-danger:hover { |
|||
background-color: #dc2626; |
|||
transform: translateY(-1px); |
|||
} |
|||
|
|||
.btn-icon-only { |
|||
padding: 0.6rem; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
/* View Actions Bar */ |
|||
.view-actions-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 2rem; |
|||
} |
|||
|
|||
/* Crawlers Grid Layout */ |
|||
.crawlers-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); |
|||
gap: 1.5rem; |
|||
} |
|||
|
|||
/* Card Component (Glassmorphism style) */ |
|||
.card { |
|||
background-color: var(--bg-card); |
|||
backdrop-filter: var(--glass-blur); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 16px; |
|||
padding: 1.5rem; |
|||
box-shadow: var(--card-shadow); |
|||
transition: all var(--transition-speed) ease; |
|||
display: flex; |
|||
flex-direction: column; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.card:hover { |
|||
background-color: var(--bg-card-hover); |
|||
border-color: var(--border-hover); |
|||
transform: translateY(-3px); |
|||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
.card-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
margin-bottom: 1rem; |
|||
gap: 1rem; |
|||
} |
|||
|
|||
.card-title { |
|||
font-size: 1.15rem; |
|||
font-weight: 700; |
|||
color: var(--text-primary); |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
max-width: 200px; |
|||
} |
|||
|
|||
.card-badge { |
|||
background-color: rgba(255, 255, 255, 0.05); |
|||
padding: 0.2rem 0.6rem; |
|||
border-radius: 20px; |
|||
font-size: 0.75rem; |
|||
color: var(--text-secondary); |
|||
border: 1px solid var(--border-color); |
|||
} |
|||
|
|||
.card-body { |
|||
flex-grow: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 0.75rem; |
|||
margin-bottom: 1.25rem; |
|||
} |
|||
|
|||
.card-field { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 0.25rem; |
|||
} |
|||
|
|||
.card-field-label { |
|||
font-size: 0.75rem; |
|||
color: var(--text-muted); |
|||
} |
|||
|
|||
.card-field-value { |
|||
font-size: 0.85rem; |
|||
color: var(--text-secondary); |
|||
word-break: break-all; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.card-field-value.url { |
|||
font-family: var(--font-en); |
|||
direction: ltr; |
|||
font-size: 0.75rem; |
|||
color: var(--info); |
|||
} |
|||
|
|||
.card-field-value.prompt { |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
.card-footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-top: 1px solid var(--border-color); |
|||
padding-top: 1rem; |
|||
margin-top: auto; |
|||
} |
|||
|
|||
.card-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 0.5rem; |
|||
} |
|||
|
|||
/* Custom Switch Toggle Component */ |
|||
.switch-container { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: 44px; |
|||
height: 22px; |
|||
} |
|||
|
|||
.switch-container input { |
|||
opacity: 0; |
|||
width: 0; |
|||
height: 0; |
|||
} |
|||
|
|||
.switch-slider { |
|||
position: absolute; |
|||
cursor: pointer; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(255, 255, 255, 0.1); |
|||
border: 1px solid var(--border-color); |
|||
transition: .3s; |
|||
border-radius: 34px; |
|||
} |
|||
|
|||
.switch-slider:before { |
|||
position: absolute; |
|||
content: ""; |
|||
height: 14px; |
|||
width: 14px; |
|||
left: 4px; |
|||
bottom: 3px; |
|||
background-color: var(--text-secondary); |
|||
transition: .3s; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.switch-container input:checked + .switch-slider { |
|||
background-color: var(--accent); |
|||
} |
|||
|
|||
.switch-container input:checked + .switch-slider:before { |
|||
transform: translateX(20px); |
|||
background-color: white; |
|||
} |
|||
|
|||
/* Switch toggle labels */ |
|||
.toggle-group { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 0.75rem; |
|||
} |
|||
|
|||
/* Loading & Empty States */ |
|||
.loading-state, .empty-state { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 4rem 2rem; |
|||
text-align: center; |
|||
width: 100%; |
|||
grid-column: 1 / -1; |
|||
background-color: var(--bg-card); |
|||
border: 1px dashed var(--border-color); |
|||
border-radius: 16px; |
|||
color: var(--text-secondary); |
|||
} |
|||
|
|||
.loading-state svg, .empty-state svg { |
|||
width: 48px; |
|||
height: 48px; |
|||
margin-bottom: 1rem; |
|||
color: var(--text-muted); |
|||
} |
|||
|
|||
.spinner { |
|||
border: 3px solid rgba(255, 255, 255, 0.05); |
|||
border-top: 3px solid var(--accent); |
|||
border-radius: 50%; |
|||
width: 36px; |
|||
height: 36px; |
|||
animation: spin 0.8s linear infinite; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
0% { transform: rotate(0deg); } |
|||
100% { transform: rotate(360deg); } |
|||
} |
|||
|
|||
/* Data Filtering Bar for Ads Tab */ |
|||
.ads-filters-bar { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
gap: 1.25rem; |
|||
background-color: var(--bg-card); |
|||
padding: 1.25rem; |
|||
border-radius: 12px; |
|||
border: 1px solid var(--border-color); |
|||
margin-bottom: 2rem; |
|||
align-items: center; |
|||
} |
|||
|
|||
.search-box { |
|||
position: relative; |
|||
flex-grow: 1; |
|||
max-width: 400px; |
|||
} |
|||
|
|||
.search-icon { |
|||
position: absolute; |
|||
right: 0.75rem; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 18px; |
|||
height: 18px; |
|||
color: var(--text-muted); |
|||
} |
|||
|
|||
.search-box input { |
|||
width: 100%; |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 8px; |
|||
padding: 0.55rem 2.5rem 0.55rem 0.75rem; |
|||
color: var(--text-primary); |
|||
font-size: 0.85rem; |
|||
transition: all var(--transition-speed) ease; |
|||
} |
|||
|
|||
.search-box input:focus { |
|||
outline: none; |
|||
border-color: var(--accent); |
|||
box-shadow: 0 0 10px rgba(168, 85, 247, 0.15); |
|||
} |
|||
|
|||
.filters-group { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 1.5rem; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.filter-item { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 0.5rem; |
|||
font-size: 0.85rem; |
|||
color: var(--text-secondary); |
|||
} |
|||
|
|||
.filter-item select { |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 8px; |
|||
padding: 0.45rem 1rem; |
|||
color: var(--text-primary); |
|||
font-size: 0.85rem; |
|||
outline: none; |
|||
} |
|||
|
|||
.filter-item select:focus { |
|||
border-color: var(--accent); |
|||
} |
|||
|
|||
/* Ads Grid Layout */ |
|||
.ads-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); |
|||
gap: 1.5rem; |
|||
} |
|||
|
|||
/* Ad Card Customizations */ |
|||
.ad-card { |
|||
border-top: 4px solid var(--border-color); |
|||
} |
|||
|
|||
.ad-card.flagged { |
|||
border-top: 4px solid var(--accent); |
|||
background: linear-gradient(180deg, rgba(168, 85, 247, 0.03) 0%, var(--bg-card) 100%); |
|||
box-shadow: 0 8px 32px 0 rgba(168, 85, 247, 0.05); |
|||
} |
|||
|
|||
.ad-meta-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 0.5rem; |
|||
width: 100%; |
|||
} |
|||
|
|||
.ad-published-at { |
|||
font-size: 0.75rem; |
|||
color: var(--text-muted); |
|||
} |
|||
|
|||
.ad-price { |
|||
font-size: 0.95rem; |
|||
font-weight: 700; |
|||
color: var(--accent); |
|||
} |
|||
|
|||
.ad-desc { |
|||
font-size: 0.85rem; |
|||
color: var(--text-secondary); |
|||
line-height: 1.5; |
|||
word-break: break-all; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 3; |
|||
-webkit-box-orient: vertical; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
/* AI Flag Box on Ad Cards */ |
|||
.ai-flag-box { |
|||
background-color: rgba(168, 85, 247, 0.08); |
|||
border: 1px solid rgba(168, 85, 247, 0.2); |
|||
border-radius: 10px; |
|||
padding: 0.85rem 1rem; |
|||
font-size: 0.85rem; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
.ai-flag-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
color: var(--accent); |
|||
font-weight: 700; |
|||
margin-bottom: 0.35rem; |
|||
} |
|||
|
|||
.ai-flag-header svg { |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
|
|||
.ai-flag-reason { |
|||
color: var(--text-secondary); |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
.ai-flag-reason.arabic-num { |
|||
font-family: var(--font-en); |
|||
} |
|||
|
|||
.ai-confidence-badge { |
|||
font-size: 0.7rem; |
|||
background-color: rgba(168, 85, 247, 0.2); |
|||
padding: 0.1rem 0.4rem; |
|||
border-radius: 4px; |
|||
font-family: var(--font-en); |
|||
direction: ltr; |
|||
} |
|||
|
|||
.ad-tag-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 0.5rem; |
|||
margin-bottom: 1rem; |
|||
} |
|||
|
|||
.ad-tag { |
|||
background-color: rgba(255, 255, 255, 0.02); |
|||
border: 1px solid var(--border-color); |
|||
padding: 0.15rem 0.5rem; |
|||
border-radius: 4px; |
|||
font-size: 0.75rem; |
|||
color: var(--text-secondary); |
|||
} |
|||
|
|||
/* Table Container (Glassmorphic Table) */ |
|||
.table-container { |
|||
background-color: var(--bg-card); |
|||
backdrop-filter: var(--glass-blur); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 16px; |
|||
box-shadow: var(--card-shadow); |
|||
overflow: hidden; |
|||
width: 100%; |
|||
} |
|||
|
|||
.data-table { |
|||
border-collapse: collapse; |
|||
width: 100%; |
|||
text-align: right; |
|||
font-size: 0.9rem; |
|||
} |
|||
|
|||
.data-table th, .data-table td { |
|||
padding: 1rem 1.25rem; |
|||
border-bottom: 1px solid var(--border-color); |
|||
} |
|||
|
|||
.data-table th { |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
color: var(--text-primary); |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.data-table tr:last-child td { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.data-table tr:hover td { |
|||
background-color: rgba(255, 255, 255, 0.01); |
|||
} |
|||
|
|||
.badge-status { |
|||
padding: 0.2rem 0.6rem; |
|||
border-radius: 20px; |
|||
font-size: 0.75rem; |
|||
font-weight: 500; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
gap: 0.25rem; |
|||
} |
|||
|
|||
.badge-status.success { |
|||
background-color: rgba(16, 185, 129, 0.1); |
|||
color: var(--success); |
|||
border: 1px solid rgba(16, 185, 129, 0.3); |
|||
} |
|||
|
|||
.badge-status.failed { |
|||
background-color: rgba(239, 68, 68, 0.1); |
|||
color: var(--danger); |
|||
border: 1px solid rgba(239, 68, 68, 0.3); |
|||
} |
|||
|
|||
.badge-status.running { |
|||
background-color: rgba(245, 158, 11, 0.1); |
|||
color: var(--warning); |
|||
border: 1px solid rgba(245, 158, 11, 0.3); |
|||
} |
|||
|
|||
.arabic-num-font { |
|||
font-family: var(--font-en); |
|||
} |
|||
|
|||
/* Modals Overlay (Dialog Card) */ |
|||
.modal-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.7); |
|||
backdrop-filter: blur(8px); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 100; |
|||
opacity: 0; |
|||
pointer-events: none; |
|||
transition: opacity var(--transition-speed) ease; |
|||
} |
|||
|
|||
.modal-overlay.open { |
|||
opacity: 1; |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.modal-card { |
|||
background-color: var(--bg-sidebar); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 20px; |
|||
width: 600px; |
|||
max-width: 90%; |
|||
max-height: 90vh; |
|||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); |
|||
display: flex; |
|||
flex-direction: column; |
|||
transform: scale(0.95); |
|||
transition: transform var(--transition-speed) ease; |
|||
} |
|||
|
|||
.modal-overlay.open .modal-card { |
|||
transform: scale(1); |
|||
} |
|||
|
|||
.modal-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 1.25rem 1.5rem; |
|||
border-bottom: 1px solid var(--border-color); |
|||
} |
|||
|
|||
.modal-header h3 { |
|||
font-size: 1.2rem; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.close-btn { |
|||
background: transparent; |
|||
border: none; |
|||
color: var(--text-secondary); |
|||
cursor: pointer; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.close-btn svg { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
.modal-body { |
|||
padding: 1.5rem; |
|||
overflow-y: auto; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 1.25rem; |
|||
} |
|||
|
|||
.modal-footer { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
gap: 0.75rem; |
|||
padding: 1.25rem 1.5rem; |
|||
border-top: 1px solid var(--border-color); |
|||
} |
|||
|
|||
/* Forms Customization */ |
|||
.form-group { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 0.5rem; |
|||
} |
|||
|
|||
.form-group label { |
|||
font-size: 0.85rem; |
|||
color: var(--text-secondary); |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.form-group input[type="text"], |
|||
.form-group input[type="url"], |
|||
.form-group input[type="time"], |
|||
.form-group select, |
|||
.form-group textarea { |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 8px; |
|||
padding: 0.65rem 0.85rem; |
|||
color: var(--text-primary); |
|||
font-size: 0.9rem; |
|||
outline: none; |
|||
transition: all var(--transition-speed) ease; |
|||
width: 100%; |
|||
} |
|||
|
|||
.form-group input:focus, |
|||
.form-group select:focus, |
|||
.form-group textarea:focus { |
|||
border-color: var(--accent); |
|||
box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); |
|||
} |
|||
|
|||
.form-group textarea { |
|||
resize: vertical; |
|||
} |
|||
|
|||
.form-row { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
gap: 1rem; |
|||
} |
|||
|
|||
.form-group.toggle-group { |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background-color: rgba(255, 255, 255, 0.01); |
|||
padding: 0.75rem 1rem; |
|||
border-radius: 8px; |
|||
border: 1px solid var(--border-color); |
|||
} |
|||
|
|||
.field-error { |
|||
font-size: 0.75rem; |
|||
color: var(--danger); |
|||
margin-top: 0.15rem; |
|||
} |
|||
|
|||
/* Responsive Customizations */ |
|||
@media (max-width: 768px) { |
|||
.app-container { |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.sidebar { |
|||
width: 100%; |
|||
height: auto; |
|||
border-left: none; |
|||
border-bottom: 1px solid var(--border-color); |
|||
padding: 1rem; |
|||
} |
|||
|
|||
.sidebar-brand { |
|||
margin-bottom: 1rem; |
|||
padding-bottom: 0.5rem; |
|||
} |
|||
|
|||
.sidebar-nav { |
|||
flex-direction: row; |
|||
overflow-x: auto; |
|||
gap: 0.5rem; |
|||
padding-bottom: 0.5rem; |
|||
} |
|||
|
|||
.nav-item { |
|||
padding: 0.6rem 0.85rem; |
|||
font-size: 0.85rem; |
|||
white-space: nowrap; |
|||
width: auto; |
|||
} |
|||
|
|||
.nav-item.active { |
|||
border-right: none; |
|||
border-bottom: 3px solid var(--accent); |
|||
} |
|||
|
|||
.app-header { |
|||
padding: 1rem; |
|||
} |
|||
|
|||
.view-viewport { |
|||
padding: 1rem; |
|||
} |
|||
|
|||
.form-row { |
|||
grid-template-columns: 1fr; |
|||
} |
|||
|
|||
.ads-filters-bar { |
|||
flex-direction: column; |
|||
align-items: stretch; |
|||
} |
|||
|
|||
.filters-group { |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
import { StrictMode } from 'react' |
|||
import { createRoot } from 'react-dom/client' |
|||
import './index.css' |
|||
import App from './App.jsx' |
|||
|
|||
createRoot(document.getElementById('root')).render( |
|||
<StrictMode> |
|||
<App /> |
|||
</StrictMode>, |
|||
) |
|||
@ -0,0 +1,15 @@ |
|||
import { defineConfig } from 'vite' |
|||
import react from '@vitejs/plugin-react' |
|||
|
|||
// https://vite.dev/config/
|
|||
export default defineConfig({ |
|||
plugins: [react()], |
|||
server: { |
|||
proxy: { |
|||
'/api': { |
|||
target: 'http://127.0.0.1:8000', |
|||
changeOrigin: true, |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue