Refactor frontend structure and update dependencies
Publish Docker image / build-and-push (push) Successful in 2m6s
Publish Docker image / build-and-push (push) Successful in 2m6s
- Changed the main entry point from main.jsx to main.tsx for TypeScript support. - Removed Tabler JS import and integrated Tailwind CSS for styling. - Updated package.json and package-lock.json to include new dependencies such as @fontsource-variable/geist and tailwindcss, while removing unused ones. - Enhanced Vite configuration with path aliasing for improved import management. - Deleted unused App.css and App.jsx files to streamline the project structure. Made-with: Cursor
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "radix-nova",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"rtl": false,
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"menuColor": "default",
|
||||
"menuAccent": "subtle",
|
||||
"registries": {}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
# SHADCN Migration Audit
|
||||
|
||||
## Scope
|
||||
- Frontend path: `frontend/src`
|
||||
- Goal: full replacement of Tabler UI with shadcn/ui + Tailwind tokens.
|
||||
|
||||
## Findings
|
||||
- Direct Tabler dependencies are present in `frontend/package.json`:
|
||||
- `@tabler/core`
|
||||
- `@tabler/icons-react`
|
||||
- Tabler runtime imports are used in `frontend/src/main.jsx`:
|
||||
- `@tabler/core/dist/css/tabler.min.css`
|
||||
- `@tabler/core/dist/js/tabler.min.js`
|
||||
- Bootstrap/Tabler data API is used in layout and modal flows (`data-bs-*`, `show.bs.*`, `hide.bs.*`).
|
||||
- `frontend/src/index.css` contains a large Tabler-coupled style layer (`--tblr-*`, `.navbar-*`, `.btn-*`, `.card-*`, `.table-*` patterns).
|
||||
|
||||
## Migration Priority (Feature-first with platform dependencies)
|
||||
1. **App shell and navigation**
|
||||
- `App.jsx`
|
||||
- routing shell + sidebar/topbar behavior
|
||||
2. **Core UI and design tokens**
|
||||
- `components/ui` generation via shadcn
|
||||
- theme provider + global token CSS
|
||||
3. **High traffic features**
|
||||
- `Dashboard`, `ServerManager`, `FilterManager`
|
||||
4. **Cross-feature shared components**
|
||||
- modal, table, command/alerts/feedback components
|
||||
5. **Remaining pages**
|
||||
- all managers/tools pages not covered in p3
|
||||
|
||||
## Hotspots (high coupling)
|
||||
- `frontend/src/App.jsx` (layout, routing, theme, i18n in one file)
|
||||
- `frontend/src/index.css` (global overrides and hardcoded values)
|
||||
- `frontend/src/components/*` (large number of Tabler class usages)
|
||||
|
||||
## Enforcement Checklist
|
||||
- No `@tabler/*` imports or dependencies.
|
||||
- No `data-bs-*` attributes or Bootstrap event listeners.
|
||||
- No hardcoded color/radius/spacing values in components.
|
||||
- shadcn primitives generated through plugin/CLI only.
|
||||
- `components/ui` treated as base layer; composition happens in `components/shared`.
|
||||
|
||||
+1
-2
@@ -16,7 +16,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<!-- Удалён импорт Tabler JS, теперь он импортируется в main.jsx -->
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Generated
+5973
-227
File diff suppressed because it is too large
Load Diff
+14
-3
@@ -15,18 +15,29 @@
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@tabler/core": "^1.3.2",
|
||||
"@tabler/icons-react": "^3.34.0",
|
||||
"@fontsource-variable/geist": "^5.2.8",
|
||||
"@tailwindcss/vite": "^4.2.4",
|
||||
"@tanstack/react-query": "^5.56.2",
|
||||
"@tanstack/react-virtual": "^3.10.8",
|
||||
"@xyflow/react": "^12.3.4",
|
||||
"axios": "^1.10.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
"diff": "^8.0.3",
|
||||
"lucide-react": "^1.11.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"radix-ui": "^1.4.3",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^6.30.1",
|
||||
"recharts": "^3.7.0"
|
||||
"recharts": "^3.7.0",
|
||||
"shadcn": "^4.5.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"tailwindcss": "^4.2.4",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.29.0",
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
const fs = require("fs")
|
||||
const path = require("path")
|
||||
|
||||
const root = path.resolve(__dirname, "../src")
|
||||
const exts = new Set([".js", ".jsx", ".ts", ".tsx"])
|
||||
const names = new Set()
|
||||
|
||||
function walk(dir) {
|
||||
for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
|
||||
const fullPath = path.join(dir, entry.name)
|
||||
if (entry.isDirectory()) {
|
||||
walk(fullPath)
|
||||
continue
|
||||
}
|
||||
if (!exts.has(path.extname(entry.name))) continue
|
||||
const content = fs.readFileSync(fullPath, "utf8")
|
||||
for (const match of content.matchAll(/\bIcon[A-Za-z0-9_]+\b/g)) {
|
||||
names.add(match[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
walk(root)
|
||||
const sorted = [...names].sort()
|
||||
|
||||
const lines = [
|
||||
'import React from "react"',
|
||||
'import * as Lucide from "lucide-react"',
|
||||
"",
|
||||
"type IconProps = React.SVGProps<SVGSVGElement> & { size?: number }",
|
||||
"",
|
||||
"function pick(name: string) {",
|
||||
" const direct = (Lucide as Record<string, React.ComponentType<IconProps>>)[name]",
|
||||
" if (direct) return direct",
|
||||
" const simplified = name.replace(/\\d+$/, \"\")",
|
||||
" const simplifiedMatch = (Lucide as Record<string, React.ComponentType<IconProps>>)[simplified]",
|
||||
" if (simplifiedMatch) return simplifiedMatch",
|
||||
" return Lucide.Circle",
|
||||
"}",
|
||||
"",
|
||||
"function create(name: string) {",
|
||||
" const IconComponent = pick(name)",
|
||||
" return function IconCompat(props: IconProps) {",
|
||||
" return React.createElement(IconComponent, props)",
|
||||
" }",
|
||||
"}",
|
||||
"",
|
||||
]
|
||||
|
||||
for (const iconName of sorted) {
|
||||
const lucideName = iconName.replace(/^Icon/, "")
|
||||
lines.push(`export const ${iconName} = create(${JSON.stringify(lucideName)})`)
|
||||
}
|
||||
|
||||
fs.writeFileSync(path.resolve(root, "lib/icons.tsx"), lines.join("\n"))
|
||||
console.log(`generated ${sorted.length} icons`)
|
||||
|
||||
@@ -21,16 +21,15 @@ import {
|
||||
IconArrowUp,
|
||||
IconArrowDown,
|
||||
IconCopy
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
||||
import { PageHeaderActions } from '@/components/shared/navigation';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import EmptyState from './components/EmptyState.jsx';
|
||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||
import { ConfirmDialog, ErrorAlert } from '@/components/shared/feedback';
|
||||
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
||||
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
||||
import HistoryModal from './components/HistoryModal.jsx';
|
||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
|
||||
import ImportModal from './components/ImportModal.jsx';
|
||||
import QuickAddBar from './components/QuickAddBar.jsx';
|
||||
|
||||
@@ -1,986 +0,0 @@
|
||||
/* Custom styles for RouterOS Manager */
|
||||
/* Layout: Tabler Fluid Vertical (https://preview.tabler.io/layout-fluid-vertical.html) */
|
||||
|
||||
/* --- Fluid Vertical: page structure --- */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Сайдбар: всегда тёмный (как на референсе Tabler) */
|
||||
.navbar-vertical {
|
||||
--tblr-body-color: rgba(255, 255, 255, 0.9);
|
||||
--tblr-body-color-rgb: 255, 255, 255;
|
||||
--tblr-border-color: rgba(255, 255, 255, 0.1);
|
||||
--tblr-bg-surface: #1e293b;
|
||||
--tblr-bg-surface-hover: rgba(255, 255, 255, 0.05);
|
||||
--tblr-navbar-active-bg: rgba(255, 255, 255, 0.08);
|
||||
--tblr-navbar-active-color: #fff;
|
||||
--tblr-primary: #6ea8fe;
|
||||
--tblr-muted: rgba(255, 255, 255, 0.6);
|
||||
background-color: #1e293b !important;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.navbar-vertical .navbar-brand,
|
||||
.navbar-vertical .nav-link,
|
||||
.navbar-vertical .dropdown-item {
|
||||
color: inherit;
|
||||
}
|
||||
.navbar-vertical .navbar-brand:hover,
|
||||
.navbar-vertical .nav-link:hover,
|
||||
.navbar-vertical .dropdown-item:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar-vertical .nav-link.active,
|
||||
.navbar-vertical .dropdown-item.active {
|
||||
background-color: var(--tblr-navbar-active-bg);
|
||||
color: var(--tblr-navbar-active-color);
|
||||
}
|
||||
.navbar-vertical .dropdown-toggle::after {
|
||||
border-top-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.navbar-vertical .navbar-toggler {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Сайдбар: у бренда убираем лишний отступ и стрелку (Tabler не должен добавлять caret к brand) */
|
||||
.navbar-vertical .navbar-brand {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.navbar-vertical .navbar-brand::after {
|
||||
display: none !important;
|
||||
}
|
||||
.navbar-vertical > .container-fluid {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
.navbar-vertical .collapse.navbar-collapse {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.navbar-vertical .collapse .navbar-nav.pt-lg-3 {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer {
|
||||
flex-shrink: 0;
|
||||
border-top-color: rgba(255, 255, 255, 0.1) !important;
|
||||
overflow: visible;
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon {
|
||||
padding: 0.35rem;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon .badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.2rem 0.35rem;
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer .dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
/* Все выпадающие меню в футере сайдбара — поверх контента и без обрезки */
|
||||
.navbar-vertical .navbar-sidebar-footer .dropdown-menu {
|
||||
z-index: 1050;
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card {
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card .card-footer {
|
||||
flex-wrap: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
.navbar-vertical .navbar-sidebar-footer .dropdown-menu-card .card-footer .btn {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
/* Стрелка только у пунктов с подменю (dropdown-toggle), не у обычных ссылок и не у бренда */
|
||||
.navbar-vertical .nav-link:not(.dropdown-toggle)::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Sidebar: nav-link with icon (Tabler vertical) */
|
||||
.navbar-vertical .nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.navbar-vertical .nav-link-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.navbar-vertical .nav-link-icon .icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
/* Sidebar dropdown: inline submenu (no popup) — только для основного списка меню,
|
||||
не затрагиваем иконки в нижнем футере сайдбара (язык, тема, колокол и т.д.) */
|
||||
.navbar-vertical .navbar-nav > .nav-item.dropdown .dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
padding: 0 0 0.5rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
.navbar-vertical .navbar-nav > .nav-item.dropdown .dropdown-item {
|
||||
padding-left: 1rem;
|
||||
padding-top: 0.35rem;
|
||||
padding-bottom: 0.35rem;
|
||||
}
|
||||
.navbar-vertical .navbar-nav > .nav-item.dropdown .dropdown-item .nav-link-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.navbar-vertical .navbar-nav > .nav-item.dropdown .dropdown-item .nav-link-icon .icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/* Custom avatar background */
|
||||
.avatar {
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e9ecef"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
|
||||
}
|
||||
|
||||
/* Navbar styles */
|
||||
.navbar {
|
||||
position: relative;
|
||||
z-index: 1030;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--tblr-body-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover {
|
||||
color: var(--tblr-primary);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link.active {
|
||||
color: var(--tblr-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link .icon {
|
||||
margin-right: 0.5rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-toggle::after {
|
||||
margin-left: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
min-width: 10rem;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--tblr-body-color);
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: var(--tblr-bg-surface);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--tblr-border-color);
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu-columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
min-width: 16rem;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu-column {
|
||||
flex: 1;
|
||||
min-width: 8rem;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
color: var(--tblr-body-color);
|
||||
text-align: inherit;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-item:hover {
|
||||
color: var(--tblr-primary);
|
||||
background-color: var(--tblr-bg-surface-hover);
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-item.active {
|
||||
color: var(--tblr-primary);
|
||||
background-color: var(--tblr-primary-lt);
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-item .icon {
|
||||
margin-right: 0.5rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/* Navbar brand */
|
||||
.navbar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 0.3125rem;
|
||||
padding-bottom: 0.3125rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
color: var(--tblr-body-color);
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
color: var(--tblr-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-brand-icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* User menu */
|
||||
.navbar-nav .nav-item.dropdown .nav-link {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item.dropdown .avatar {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Убрали глобальную перекраску .badge, чтобы работали текстовые цвета Tabler
|
||||
(например, badge bg-blue-lt text-blue) */
|
||||
|
||||
/* --- Server sidebar (фильтры на /servers) — Tabler card + list-group --- */
|
||||
.server-sidebar {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
max-height: calc(100vh - 180px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.server-sidebar .card-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.server-sidebar .card-body.border-bottom,
|
||||
.server-sidebar .card-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.server-sidebar-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
max-height: 50vh;
|
||||
}
|
||||
.server-sidebar .filter-section .list-group-header {
|
||||
cursor: pointer;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
color: var(--tblr-body-color);
|
||||
}
|
||||
.server-sidebar .filter-section .list-group-header:hover {
|
||||
background-color: var(--tblr-bg-surface-tertiary);
|
||||
}
|
||||
.server-sidebar .list-group-item {
|
||||
font-size: 0.8125rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
}
|
||||
/* Полные названия в фильтрах (без обрезания), перенос по словам */
|
||||
.server-sidebar .list-group-item .text-break,
|
||||
#server-filters-offcanvas .list-group-item span:first-of-type span {
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Tabler-style subheader (как на preview.tabler.io/settings.html) */
|
||||
.subheader {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--tblr-muted-color, #6c757d);
|
||||
margin-bottom: 0.25rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* ===== Мобильный сайдбар: верхняя полоса + оверлей меню (Tabler-style) ===== */
|
||||
.sidebar-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1035;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
body.sidebar-overlay-open {
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
/* На мобильных: колоночный layout — сайдбар сверху как полоса, контент на всю ширину снизу */
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.page .navbar-vertical {
|
||||
position: relative;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-height: auto !important;
|
||||
flex-shrink: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
z-index: 1041; /* выше бэкдропа (1035), чтобы меню и верхняя полоса были кликабельны */
|
||||
}
|
||||
.page .navbar-vertical > .container-fluid {
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
min-height: 3.5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.page .navbar-vertical .navbar-brand {
|
||||
flex-shrink: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.page .navbar-vertical .navbar-brand .fw-bold {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 12rem;
|
||||
}
|
||||
.page .navbar-vertical .navbar-nav.flex-row {
|
||||
margin-left: auto;
|
||||
}
|
||||
.page .navbar-vertical .navbar-toggler {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
/* Меню скрыто по умолчанию, при открытии — оверлей слева (z-index внутри контекста навбара) */
|
||||
.page .navbar-vertical .navbar-collapse {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: min(100vw, 280px);
|
||||
max-width: 280px;
|
||||
z-index: 1042;
|
||||
background: #1e293b;
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
.page .navbar-vertical .navbar-collapse.show {
|
||||
display: flex !important;
|
||||
}
|
||||
.page-wrapper {
|
||||
margin-left: 0 !important;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.navbar-vertical .nav-link,
|
||||
.navbar-vertical .dropdown-item {
|
||||
min-height: 44px;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive navbar */
|
||||
@media (max-width: 991.98px) {
|
||||
.navbar-collapse {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
background-color: var(--tblr-bg-surface);
|
||||
border: 1px solid var(--tblr-border-color);
|
||||
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.08);
|
||||
}
|
||||
.navbar-nav .dropdown-item { padding: 0.5rem 0.75rem; }
|
||||
}
|
||||
|
||||
/* Custom animations */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Custom focus states */
|
||||
.btn:focus,
|
||||
.form-control:focus,
|
||||
.nav-link:focus {
|
||||
outline: 2px solid var(--tblr-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.btn:disabled {
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Spinning animation for loading icons */
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility: pointer cursor */
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Header actions toolbar: single row, nice spacing, scroll on overflow */
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2px; /* to avoid cutting off focus outline */
|
||||
/* Ensure dropdowns are not covered by following content (e.g., tables) */
|
||||
position: relative; /* local stacking context for toolbar controls */
|
||||
z-index: auto; /* keep toolbar below modals */
|
||||
}
|
||||
.header-actions .btn-group {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.header-actions .btn-group .btn-group { gap: 0; align-items: stretch; }
|
||||
.header-actions .btn-group .dropdown-toggle-split { padding-left: .5rem; padding-right: .5rem; display: inline-flex; align-items: center; height: 100%; }
|
||||
.header-actions .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
height: 100%;
|
||||
}
|
||||
.header-actions .btn svg { width: 18px; height: 18px; }
|
||||
.header-actions .header-actions-right { flex-shrink: 0; }
|
||||
|
||||
/* Ensure dropdowns in main content (and header) are above the sidebar, below modals */
|
||||
.header-actions .dropdown-menu,
|
||||
.page-header .dropdown-menu,
|
||||
.page-wrapper .dropdown-menu {
|
||||
z-index: 1035; /* above navbar(1030), below modal-backdrop(1040) and modal(1050) */
|
||||
}
|
||||
|
||||
/* Keep page-header in normal stacking order (below modals) */
|
||||
.page-header { position: relative; z-index: auto; }
|
||||
|
||||
/* Responsive sizing for small screens */
|
||||
@media (max-width: 992px) {
|
||||
.header-actions { gap: 0.4rem; flex-wrap: wrap; }
|
||||
.header-actions .btn {
|
||||
padding: 0.35rem 0.6rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.header-actions .btn .me-1 { margin-right: 0.4rem !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.page-header .col-auto.ms-auto { width: 100%; }
|
||||
.header-actions { width: 100%; }
|
||||
}
|
||||
|
||||
/* Мобильные отступы контента */
|
||||
@media (max-width: 767.98px) {
|
||||
.page-body .container-fluid,
|
||||
.page-body .container-xl {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.card .card-body {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
.offcanvas-start {
|
||||
width: min(320px, 100vw) !important;
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
.modal-dialog {
|
||||
margin: 0.5rem;
|
||||
max-width: calc(100% - 1rem);
|
||||
}
|
||||
.modal-fullscreen-sm-down .modal-dialog {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom responsive adjustments */
|
||||
@media (max-width: 992px) {
|
||||
.page-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.card {
|
||||
background-color: var(--tblr-dark);
|
||||
border-color: var(--tblr-border-color);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--tblr-dark);
|
||||
border-color: var(--tblr-border-color);
|
||||
}
|
||||
|
||||
.navbar-vertical {
|
||||
background-color: var(--tblr-dark);
|
||||
border-color: var(--tblr-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== UX/UI Enhancement Animations ===== */
|
||||
|
||||
/* Плавные переходы для всех интерактивных элементов */
|
||||
.transition-all {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Анимация появления карточек */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card.animate-in {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Анимация при добавлении элемента в таблицу */
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.table tbody tr.new-item {
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
background-color: rgba(32, 107, 196, 0.1);
|
||||
}
|
||||
|
||||
/* Пульсация при обновлении */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(32, 107, 196, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 6px rgba(32, 107, 196, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.badge.updating {
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
/* Hover эффекты для интерактивных карточек */
|
||||
.card.interactive {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.card.interactive:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Easy Switch: bring visuals in line with Tabler pages */
|
||||
.easy-switch-page .card-tabs .nav-link {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.easy-switch-server-header {
|
||||
background-color: rgba(32, 107, 196, 0.05);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.easy-switch-flag {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.easy-switch-gateway-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
|
||||
border: 1px solid var(--tblr-border-color);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.easy-switch-gateway-card:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0.125rem 0.375rem rgba(32, 41, 57, 0.1);
|
||||
}
|
||||
|
||||
.easy-switch-gateway-card-active {
|
||||
border: 1px solid var(--tblr-primary) !important;
|
||||
box-shadow: 0 0.25rem 0.75rem rgba(32, 107, 196, 0.25);
|
||||
}
|
||||
|
||||
.easy-switch-active-check {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.easy-switch-fast-slot {
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.easy-switch-fast-badge {
|
||||
font-size: 0.65rem;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.easy-switch-gateway-flag {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.easy-switch-gateway-flag-active {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.easy-switch-gateway-title {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.2;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.easy-switch-gateway-ip {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.easy-switch-gateway-ping {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Ripple effect для кнопок */
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-ripple {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-ripple::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
}
|
||||
|
||||
.btn-ripple:active::after {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transition: 0s;
|
||||
animation: ripple 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Улучшенная анимация skeleton loader */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-glow .placeholder {
|
||||
animation: shimmer 2s infinite linear;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#f8f9fa 0%,
|
||||
#e9ecef 50%,
|
||||
#f8f9fa 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
}
|
||||
|
||||
/* Анимация модальных окон */
|
||||
.modal.fade.show .modal-dialog {
|
||||
animation: modalSlideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Плавный скролл */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Улучшенные focus rings для доступности */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--tblr-primary, #206bc4);
|
||||
outline-offset: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
.btn:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.3);
|
||||
}
|
||||
|
||||
/* Skip link для клавиатурных пользователей */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
background: var(--tblr-primary, #206bc4);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
z-index: 10000;
|
||||
border-radius: 0 0 4px 0;
|
||||
transition: top 0.2s;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Hover эффект для строк таблицы с focus */
|
||||
.table tr:focus-within {
|
||||
background-color: rgba(32, 107, 196, 0.05);
|
||||
}
|
||||
|
||||
/* Pulse для кнопок загрузки */
|
||||
.btn.loading {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn.loading::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translate(-50%, -50%);
|
||||
animation: pulse-button 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-button {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* Анимация badge появления */
|
||||
.badge.animate {
|
||||
animation: badgePop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
@keyframes badgePop {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== GraphView / ReactFlow custom styling ===== */
|
||||
|
||||
/* Плавные, аккуратные линии графа */
|
||||
.react-flow__edge-path {
|
||||
stroke-linecap: round;
|
||||
transition: stroke 0.15s ease, stroke-width 0.15s ease, filter 0.15s ease;
|
||||
}
|
||||
|
||||
/* Лёгкий ховер по связи, без агрессивной анимации */
|
||||
.react-flow__edge:hover .react-flow__edge-path {
|
||||
stroke-width: 3.2px;
|
||||
filter: drop-shadow(0 0 4px rgba(15, 23, 42, 0.25));
|
||||
}
|
||||
|
||||
/* Базовая прозрачность для всех связей, чтобы граф не выглядел «забитым» */
|
||||
.react-flow__edge .react-flow__edge-path {
|
||||
stroke-opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Подписи к рёбрам: не обрезаем, делаем «таблетку» поверх линий */
|
||||
.react-flow__edge-textwrapper {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.react-flow__edge-textbg {
|
||||
fill: #ffffff;
|
||||
stroke: #e5e7eb;
|
||||
stroke-width: 1;
|
||||
rx: 999px;
|
||||
ry: 999px;
|
||||
}
|
||||
|
||||
.react-flow__edge-text {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
fill: #0f172a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Небольшие отличия по типу туннеля (на будущее, сейчас основное зашито в JS) */
|
||||
.react-flow__edge.edge-tunnel-gre .react-flow__edge-path {
|
||||
/* GRE — базовый синий, уже задан в JS, здесь только подчёркиваем плавность */
|
||||
}
|
||||
|
||||
.react-flow__edge.edge-tunnel-ipsec .react-flow__edge-path {
|
||||
stroke-dasharray: 6 4;
|
||||
}
|
||||
|
||||
.react-flow__edge.edge-tunnel-wireguard .react-flow__edge-path {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.react-flow__edge.edge-tunnel-openvpn .react-flow__edge-path {
|
||||
stroke-dasharray: 3 3;
|
||||
}
|
||||
@@ -1,676 +0,0 @@
|
||||
import { useState, useEffect, createContext, useContext, useRef } from 'react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Routes,
|
||||
Route,
|
||||
Link,
|
||||
useLocation,
|
||||
Navigate
|
||||
} from 'react-router-dom';
|
||||
import {
|
||||
IconBrandTabler,
|
||||
IconWorld,
|
||||
IconNetwork,
|
||||
IconSettings,
|
||||
IconHome,
|
||||
IconDatabase,
|
||||
IconServer,
|
||||
IconFilter,
|
||||
IconDownload,
|
||||
IconCreditCard,
|
||||
IconMenu2,
|
||||
IconArrowsExchange,
|
||||
IconLayoutSidebarLeftExpand,
|
||||
IconLayoutNavbar,
|
||||
IconChartPie,
|
||||
IconChartBar,
|
||||
IconClock,
|
||||
IconClockPlay,
|
||||
IconShield,
|
||||
IconRoute2
|
||||
} from '@tabler/icons-react';
|
||||
import ServerManager from './ServerManager';
|
||||
import FilterManager from './FilterManager';
|
||||
import EasySwitchManager from './EasySwitchManager';
|
||||
import DomainsNewManager from './DomainsNewManager';
|
||||
import IPRangesManager from './IPRangesManager';
|
||||
import ASNsNewManager from './ASNsNewManager';
|
||||
import AutoUrlManager from './AutoUrlManager';
|
||||
import BillingManager from './BillingManager';
|
||||
import CommunitiesManager from './CommunitiesManager';
|
||||
import NetworkConfigManager from './NetworkConfigManager';
|
||||
import MikrotikTools from './MikrotikTools.jsx';
|
||||
import InterfaceSpeedTest from './InterfaceSpeedTest.jsx';
|
||||
import Dashboard from './Dashboard';
|
||||
import TrafficDashboard from './TrafficDashboard.jsx';
|
||||
import NetworkMapDashboard from './NetworkMapDashboard.jsx';
|
||||
import NetworkMapSchedulerPage from './NetworkMapSchedulerPage.jsx';
|
||||
import UptimeMonitorPage from './UptimeMonitorPage.jsx';
|
||||
import MikrotikBackupsManager from './MikrotikBackupsManager.jsx';
|
||||
import PingServicesManager from './PingServicesManager.jsx';
|
||||
import FirewallPage from './FirewallPage.jsx';
|
||||
import SettingsPage from './SettingsPage.jsx';
|
||||
import ResourceStatsPage from './ResourceStatsPage.jsx';
|
||||
import RouteOptimizerPage from './RouteOptimizerPage.jsx';
|
||||
import OspfToolsPage from './OspfToolsPage.jsx';
|
||||
import './App.css';
|
||||
import { NotifyProvider } from './components/NotifyProvider.jsx';
|
||||
import ToastContainer from './components/ToastContainer.jsx';
|
||||
import CommandPalette, { KeyboardShortcutsButton } from './components/CommandPalette.jsx';
|
||||
import ErrorBoundary from './components/ErrorBoundary.jsx';
|
||||
import NetworkErrorHandler from './components/NetworkErrorHandler.jsx';
|
||||
import { PingProvider } from './contexts/PingContext.jsx';
|
||||
import { AlertsProvider } from './contexts/AlertsContext.jsx';
|
||||
import AlertsBell from './components/AlertsBell.jsx';
|
||||
|
||||
// --- Simple i18n (RU/EN) ---
|
||||
const LanguageContext = createContext({ lang: 'ru', setLang: () => {}, t: (k) => k });
|
||||
|
||||
function LanguageProvider({ children }) {
|
||||
const [lang, setLang] = useState(() => localStorage.getItem('lang') || 'ru');
|
||||
useEffect(() => { localStorage.setItem('lang', lang); }, [lang]);
|
||||
const dict = {
|
||||
ru: {
|
||||
home: 'Главная', data: 'Данные', management: 'Управление', tools: 'Инструменты',
|
||||
dashboard: 'Панель', trafficTraffic: 'Расход трафика', resourceStats: 'Статистика ресурсов', networkMap: 'Карта сети', uptimeMonitor: 'Uptime Monitor', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
|
||||
routeOptimizer: 'Оптимизация маршрутов ИИ',
|
||||
communities: 'Community', servers: 'Серверы', filters: 'Фильтры', billing: 'Биллинг', autoUrls: 'Авто URL',
|
||||
easySwitch: 'Easy Switch', networkConfig: 'Сетевые настройки', mikrotikBackups: 'MikroTik Бэкапы', pingServices: 'Пинг сервисов', firewall: 'Firewall', ospfTools: 'Инструменты OSPF',
|
||||
light: 'Светлая', dark: 'Тёмная',
|
||||
layoutSidebar: 'Сайдбар', layoutHorizontal: 'Верхнее меню'
|
||||
},
|
||||
en: {
|
||||
home: 'Home', data: 'Data', management: 'Management', tools: 'Tools',
|
||||
dashboard: 'Dashboard', trafficTraffic: 'Traffic Usage', resourceStats: 'Resource Stats', networkMap: 'Network Map', uptimeMonitor: 'Uptime Monitor', domains: 'Domains', ipRanges: 'IP Ranges', asns: 'ASNs',
|
||||
routeOptimizer: 'AI Route Optimizer',
|
||||
communities: 'Communities', servers: 'Servers', filters: 'Filters', billing: 'Billing', autoUrls: 'Auto URLs',
|
||||
easySwitch: 'Easy Switch', networkConfig: 'Network Config', mikrotikBackups: 'MikroTik Backups', pingServices: 'Ping Services', firewall: 'Firewall', ospfTools: 'OSPF Tools',
|
||||
light: 'Light', dark: 'Dark',
|
||||
layoutSidebar: 'Sidebar', layoutHorizontal: 'Top menu'
|
||||
}
|
||||
};
|
||||
const t = (key) => (dict[lang] && key in dict[lang] ? dict[lang][key] : key);
|
||||
return (
|
||||
<LanguageContext.Provider value={{ lang, setLang, t }}>
|
||||
{children}
|
||||
</LanguageContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Theme provider (light/dark) ---
|
||||
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });
|
||||
|
||||
function ThemeProvider({ children }) {
|
||||
const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
|
||||
useEffect(() => {
|
||||
localStorage.setItem('theme', theme);
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}, [theme]);
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, setTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
// Единственный экземпляр QueryClient для всего приложения
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: 30_000,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<Router>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<LanguageProvider>
|
||||
<ThemeProvider>
|
||||
<PingProvider>
|
||||
<AlertsProvider>
|
||||
<ToastContainer>
|
||||
<NotifyProvider>
|
||||
<NetworkErrorHandler />
|
||||
<MainLayout />
|
||||
</NotifyProvider>
|
||||
</ToastContainer>
|
||||
</AlertsProvider>
|
||||
</PingProvider>
|
||||
</ThemeProvider>
|
||||
</LanguageProvider>
|
||||
</QueryClientProvider>
|
||||
</Router>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
const LAYOUT_FLUID = 'fluid';
|
||||
const LAYOUT_HORIZONTAL = 'horizontal';
|
||||
|
||||
const SIDEBAR_COLLAPSE_ID = 'sidebar-menu';
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
|
||||
function MainLayout() {
|
||||
const location = useLocation();
|
||||
const { lang, setLang, t } = useContext(LanguageContext);
|
||||
const { theme, setTheme } = useContext(ThemeContext);
|
||||
const [layout, setLayout] = useState(() => localStorage.getItem('layout') || LAYOUT_FLUID);
|
||||
const [sidebarBackdrop, setSidebarBackdrop] = useState(false);
|
||||
const sidebarTogglerRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('layout', layout);
|
||||
}, [layout]);
|
||||
|
||||
// Мобильный сайдбар: бэкдроп при открытом меню и закрытие при навигации
|
||||
useEffect(() => {
|
||||
if (layout !== LAYOUT_FLUID) return;
|
||||
const collapseEl = document.getElementById(SIDEBAR_COLLAPSE_ID);
|
||||
const onShow = () => {
|
||||
if (window.innerWidth < MOBILE_BREAKPOINT) {
|
||||
setSidebarBackdrop(true);
|
||||
document.body.classList.add('sidebar-overlay-open');
|
||||
}
|
||||
};
|
||||
const onHide = () => {
|
||||
setSidebarBackdrop(false);
|
||||
document.body.classList.remove('sidebar-overlay-open');
|
||||
};
|
||||
if (collapseEl) {
|
||||
collapseEl.addEventListener('show.bs.collapse', onShow);
|
||||
collapseEl.addEventListener('hide.bs.collapse', onHide);
|
||||
return () => {
|
||||
collapseEl.removeEventListener('show.bs.collapse', onShow);
|
||||
collapseEl.removeEventListener('hide.bs.collapse', onHide);
|
||||
};
|
||||
}
|
||||
}, [layout]);
|
||||
|
||||
useEffect(() => {
|
||||
if (layout !== LAYOUT_FLUID || window.innerWidth >= MOBILE_BREAKPOINT) return;
|
||||
setSidebarBackdrop(false);
|
||||
document.body.classList.remove('sidebar-overlay-open');
|
||||
const collapseEl = document.getElementById(SIDEBAR_COLLAPSE_ID);
|
||||
if (collapseEl?.classList.contains('show')) {
|
||||
sidebarTogglerRef.current?.click?.();
|
||||
}
|
||||
}, [location.pathname, layout]);
|
||||
|
||||
useEffect(() => {
|
||||
}, [location.pathname, layout]);
|
||||
|
||||
// Состояние для управления выпадающими меню
|
||||
const [dropdownStates, setDropdownStates] = useState({
|
||||
data: false,
|
||||
management: false,
|
||||
tools: false
|
||||
});
|
||||
|
||||
// Закрытие выпадающих меню только при клике в сайдбаре вне открытого меню (клики по странице не закрывают)
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
const inSidebar = event.target.closest('.navbar-vertical');
|
||||
const inDropdown = event.target.closest('.nav-item.dropdown');
|
||||
if (inSidebar && !inDropdown) {
|
||||
setDropdownStates({
|
||||
data: false,
|
||||
management: false,
|
||||
tools: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const toggleDropdown = (dropdown) => {
|
||||
setDropdownStates(prev => {
|
||||
// Закрываем все выпадающие меню
|
||||
const newState = {
|
||||
data: false,
|
||||
management: false,
|
||||
tools: false
|
||||
};
|
||||
// Открываем только выбранное меню, если оно было закрыто
|
||||
if (!prev[dropdown]) {
|
||||
newState[dropdown] = true;
|
||||
}
|
||||
return newState;
|
||||
});
|
||||
};
|
||||
|
||||
const navCategories = [
|
||||
{
|
||||
id: 'home',
|
||||
title: t('home'),
|
||||
icon: IconHome,
|
||||
items: [
|
||||
{ id: 'dashboard', title: t('dashboard'), path: '/dashboard', icon: IconHome },
|
||||
{ id: 'traffic', title: t('trafficTraffic'), path: '/traffic', icon: IconChartPie },
|
||||
{ id: 'resource-stats', title: t('resourceStats'), path: '/resource-stats', icon: IconChartBar },
|
||||
{ id: 'network-map', title: t('networkMap'), path: '/network-map', icon: IconNetwork },
|
||||
{ id: 'route-optimizer', title: t('routeOptimizer'), path: '/route-optimizer', icon: IconRoute2 },
|
||||
{ id: 'uptime-monitor', title: t('uptimeMonitor'), path: '/uptime-monitor', icon: IconClock }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'data',
|
||||
title: t('data'),
|
||||
icon: IconDatabase,
|
||||
items: [
|
||||
{ id: 'domains', title: t('domains'), path: '/domains', icon: IconWorld },
|
||||
{ id: 'ip-ranges', title: t('ipRanges'), path: '/ip-ranges', icon: IconNetwork },
|
||||
{ id: 'asns', title: t('asns'), path: '/asns', icon: IconNetwork },
|
||||
{ id: 'communities', title: t('communities'), path: '/communities', icon: IconFilter }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'management',
|
||||
title: t('management'),
|
||||
icon: IconServer,
|
||||
items: [
|
||||
{ id: 'servers', title: t('servers'), path: '/servers', icon: IconServer },
|
||||
{ id: 'filters', title: t('filters'), path: '/filters', icon: IconFilter },
|
||||
{ id: 'network-config', title: t('networkConfig'), path: '/network-config', icon: IconNetwork },
|
||||
{ id: 'easy-switch', title: t('easySwitch'), path: '/easy-switch', icon: IconArrowsExchange },
|
||||
{ id: 'billing', title: t('billing'), path: '/billing', icon: IconCreditCard }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'tools',
|
||||
title: t('tools'),
|
||||
icon: IconSettings,
|
||||
items: [
|
||||
{ id: 'auto-urls', title: t('autoUrls'), path: '/auto-urls', icon: IconDownload },
|
||||
{ id: 'mikrotik-backups', title: t('mikrotikBackups'), path: '/mikrotik-backups', icon: IconDatabase },
|
||||
{ id: 'ospf-tools', title: t('ospfTools'), path: '/ospf-tools', icon: IconRoute2 },
|
||||
{ id: 'mikrotik-tools', title: 'MikroTik Инструменты', path: '/mikrotik-tools', icon: IconNetwork },
|
||||
{ id: 'firewall', title: t('firewall'), path: '/firewall', icon: IconShield },
|
||||
{ id: 'interface-speed', title: 'Скорость интерфейсов', path: '/interface-speed', icon: IconNetwork },
|
||||
{ id: 'ping-services', title: t('pingServices'), path: '/ping-services', icon: IconNetwork },
|
||||
{ id: 'uptime-monitor', title: t('uptimeMonitor'), path: '/uptime-monitor', icon: IconClock },
|
||||
{ id: 'scheduler', title: 'Планировщик карты сети', path: '/scheduler', icon: IconClockPlay }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
title: 'Настройки',
|
||||
icon: IconSettings,
|
||||
single: true,
|
||||
path: '/settings'
|
||||
}
|
||||
];
|
||||
|
||||
// Определяем активную вкладку по адресу
|
||||
const getActiveTab = () => {
|
||||
for (const category of navCategories) {
|
||||
if (category.single && location.pathname === category.path) {
|
||||
return category.id;
|
||||
}
|
||||
if (category.items) {
|
||||
for (const item of category.items) {
|
||||
if (location.pathname.startsWith(item.path)) {
|
||||
return item.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return 'home';
|
||||
};
|
||||
|
||||
const activeTab = getActiveTab();
|
||||
|
||||
// Старый вид: один верхний навбар с горизонтальным меню
|
||||
if (layout === LAYOUT_HORIZONTAL) {
|
||||
return (
|
||||
<div className="page d-flex flex-column min-vh-100">
|
||||
<a href="#main-content" className="skip-link">Перейти к основному содержанию</a>
|
||||
<header className="navbar navbar-expand-md navbar-light d-print-none" style={{ boxShadow: '0 1px 0 0 #e9ecef' }}>
|
||||
<div className="container-xl">
|
||||
<div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
||||
<Link to="/" className="navbar-brand d-flex align-items-center">
|
||||
<IconBrandTabler className="navbar-brand-icon me-2" />
|
||||
<span className="fw-bold">RouterOS Manager</span>
|
||||
</Link>
|
||||
</div>
|
||||
<button
|
||||
className="navbar-toggler d-md-none"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbar-menu-horizontal"
|
||||
aria-controls="navbar-menu-horizontal"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<IconMenu2 />
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbar-menu-horizontal">
|
||||
<div className="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
|
||||
<ul className="navbar-nav">
|
||||
{navCategories.map(category => (
|
||||
<li key={category.id} className="nav-item dropdown">
|
||||
{category.single ? (
|
||||
<Link
|
||||
to={category.path}
|
||||
className={`nav-link${activeTab === category.id ? ' active' : ''}`}
|
||||
>
|
||||
<category.icon className="icon icon-tabler" />
|
||||
<span className="nav-link-title">{category.title}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<a
|
||||
className={`nav-link dropdown-toggle${activeTab.startsWith(category.id) ? ' active' : ''}`}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleDropdown(category.id);
|
||||
}}
|
||||
>
|
||||
<category.icon className="icon icon-tabler" />
|
||||
<span className="nav-link-title">{category.title}</span>
|
||||
</a>
|
||||
{dropdownStates[category.id] && (
|
||||
<div className="dropdown-menu show" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="dropdown-menu-columns">
|
||||
<div className="dropdown-menu-column">
|
||||
{category.items.map(item => (
|
||||
<Link
|
||||
key={item.id}
|
||||
to={item.path}
|
||||
className={`dropdown-item${activeTab === item.id ? ' active' : ''}`}
|
||||
>
|
||||
<item.icon className="icon icon-tabler" />
|
||||
{item.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="navbar-nav flex-row order-md-last">
|
||||
<div className="nav-item dropdown me-1">
|
||||
<a href="#" className="nav-link px-2 dropdown-toggle" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()}>
|
||||
{layout === LAYOUT_FLUID ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutNavbar size={20} />}
|
||||
</a>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_FLUID ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_FLUID); }}>
|
||||
<IconLayoutSidebarLeftExpand className="me-2" size={18} /> {t('layoutSidebar')}
|
||||
</a>
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_HORIZONTAL ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_HORIZONTAL); }}>
|
||||
<IconLayoutNavbar className="me-2" size={18} /> {t('layoutHorizontal')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="nav-item dropdown me-1">
|
||||
<a href="#" className="nav-link px-2 dropdown-toggle d-flex align-items-center" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
|
||||
<span className="fs-5" aria-hidden>{lang === 'ru' ? '🇷🇺' : '🇺🇸'}</span>
|
||||
</a>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}><span className="me-2" aria-hidden>🇷🇺</span>Русский</a>
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}><span className="me-2" aria-hidden>🇺🇸</span>English</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="nav-item dropdown me-1">
|
||||
<a href="#" className="nav-link px-2 dropdown-toggle" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()}>
|
||||
{theme === 'dark' ? '🌙' : '☀️'}
|
||||
</a>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
<a href="#" className={`dropdown-item ${theme === 'light' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('light'); }}>☀️ {t('light')}</a>
|
||||
<a href="#" className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('dark'); }}>🌙 {t('dark')}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="nav-item me-1">
|
||||
<AlertsBell />
|
||||
</div>
|
||||
<div className="nav-item me-1">
|
||||
<KeyboardShortcutsButton className="nav-link px-2" />
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<Link to="/settings" className="nav-link px-2" title="Настройки">
|
||||
<IconSettings size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main-content" className="container-xl mt-4 flex-grow-1" tabIndex="-1">
|
||||
<Routes>
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/traffic" element={<TrafficDashboard />} />
|
||||
<Route path="/resource-stats" element={<ResourceStatsPage />} />
|
||||
<Route path="/network-map" element={<NetworkMapDashboard />} />
|
||||
<Route path="/route-optimizer" element={<RouteOptimizerPage />} />
|
||||
<Route path="/uptime-monitor" element={<UptimeMonitorPage />} />
|
||||
<Route path="/domains" element={<DomainsNewManager />} />
|
||||
<Route path="/ip-ranges" element={<IPRangesManager />} />
|
||||
<Route path="/asns" element={<ASNsNewManager />} />
|
||||
<Route path="/communities" element={<CommunitiesManager />} />
|
||||
<Route path="/auto-urls" element={<AutoUrlManager />} />
|
||||
<Route path="/servers" element={<ServerManager />} />
|
||||
<Route path="/billing" element={<BillingManager />} />
|
||||
<Route path="/filters" element={<FilterManager />} />
|
||||
<Route path="/network-config" element={<NetworkConfigManager />} />
|
||||
<Route path="/easy-switch" element={<EasySwitchManager />} />
|
||||
<Route path="/mikrotik-backups" element={<MikrotikBackupsManager />} />
|
||||
<Route path="/ospf-tools" element={<OspfToolsPage />} />
|
||||
<Route path="/mikrotik-tools" element={<MikrotikTools />} />
|
||||
<Route path="/firewall" element={<FirewallPage />} />
|
||||
<Route path="/interface-speed" element={<InterfaceSpeedTest />} />
|
||||
<Route path="/ping-services" element={<PingServicesManager />} />
|
||||
<Route path="/scheduler" element={<NetworkMapSchedulerPage />} />
|
||||
<Route path="/settings" element={<SettingsPage />} />
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<footer className="footer mt-auto py-2">
|
||||
<div className="container-xl text-muted small">Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}</div>
|
||||
</footer>
|
||||
<CommandPalette />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Fluid Vertical: вертикальный сайдбар + верхний навбар + page-wrapper
|
||||
return (
|
||||
<div className="page">
|
||||
{/* Skip link для доступности */}
|
||||
<a href="#main-content" className="skip-link">
|
||||
Перейти к основному содержанию
|
||||
</a>
|
||||
|
||||
{/* Левая вертикальная навигация — всегда тёмная (Tabler navbar-vertical) */}
|
||||
<header className="navbar navbar-vertical navbar-expand-md d-print-none" data-bs-theme="dark">
|
||||
<div className="container-fluid">
|
||||
<Link to="/" className="navbar-brand navbar-brand-autodark">
|
||||
<IconBrandTabler className="navbar-brand-icon" />
|
||||
<span className="fw-bold">RouterOS Manager</span>
|
||||
</Link>
|
||||
<div className="navbar-nav flex-row d-md-none">
|
||||
<button
|
||||
ref={sidebarTogglerRef}
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#${SIDEBAR_COLLAPSE_ID}`}
|
||||
aria-controls={SIDEBAR_COLLAPSE_ID}
|
||||
aria-expanded="false"
|
||||
aria-label="Открыть меню"
|
||||
>
|
||||
<IconMenu2 />
|
||||
</button>
|
||||
</div>
|
||||
<div className="collapse navbar-collapse" id={SIDEBAR_COLLAPSE_ID}>
|
||||
<ul className="navbar-nav pt-lg-3">
|
||||
{navCategories.map(category => (
|
||||
<li key={category.id} className={`nav-item${category.items ? ' dropdown' : ''}${(category.single && activeTab === category.id) || (category.items && category.items.some(i => activeTab === i.id)) ? ' active' : ''}`}>
|
||||
{category.single ? (
|
||||
<Link
|
||||
to={category.path}
|
||||
className="nav-link"
|
||||
>
|
||||
<span className="nav-link-icon">
|
||||
<category.icon className="icon" />
|
||||
</span>
|
||||
<span className="nav-link-title">{category.title}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
toggleDropdown(category.id);
|
||||
}}
|
||||
aria-expanded={dropdownStates[category.id]}
|
||||
>
|
||||
<span className="nav-link-icon">
|
||||
<category.icon className="icon" />
|
||||
</span>
|
||||
<span className="nav-link-title">{category.title}</span>
|
||||
</a>
|
||||
<div className={`dropdown-menu${dropdownStates[category.id] ? ' show' : ''}`}>
|
||||
{category.items.map(item => (
|
||||
<Link
|
||||
key={item.id}
|
||||
to={item.path}
|
||||
className={`dropdown-item d-flex align-items-center${activeTab === item.id ? ' active' : ''}`}
|
||||
>
|
||||
<span className="nav-link-icon me-2">
|
||||
<item.icon className="icon" />
|
||||
</span>
|
||||
{item.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{/* Горизонтальный ряд значков в самом низу сайдбара */}
|
||||
<div className="navbar-sidebar-footer border-top mt-auto">
|
||||
<div className="d-flex align-items-center justify-content-center gap-1 py-2 px-2">
|
||||
<div className="nav-item dropdown dropup">
|
||||
<a href="#" className="nav-link btn-icon rounded d-inline-flex align-items-center justify-content-center" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
|
||||
<span className="fs-5" aria-hidden>{lang === 'ru' ? '🇷🇺' : '🇺🇸'}</span>
|
||||
</a>
|
||||
<div className="dropdown-menu dropdown-menu-start">
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}><span className="me-2" aria-hidden>🇷🇺</span>Русский</a>
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}><span className="me-2" aria-hidden>🇺🇸</span>English</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="nav-item dropdown dropup">
|
||||
<a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('layoutSidebar')}>
|
||||
{layout === LAYOUT_FLUID ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutNavbar size={20} />}
|
||||
</a>
|
||||
<div className="dropdown-menu dropdown-menu-start">
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_FLUID ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_FLUID); }}>
|
||||
<IconLayoutSidebarLeftExpand className="me-2" size={18} /> {t('layoutSidebar')}
|
||||
</a>
|
||||
<a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_HORIZONTAL ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_HORIZONTAL); }}>
|
||||
<IconLayoutNavbar className="me-2" size={18} /> {t('layoutHorizontal')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="nav-item dropdown dropup">
|
||||
<a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('light') + ' / ' + t('dark')}>
|
||||
{theme === 'dark' ? '🌙' : '☀️'}
|
||||
</a>
|
||||
<div className="dropdown-menu dropdown-menu-start">
|
||||
<a href="#" className={`dropdown-item ${theme === 'light' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('light'); }}>☀️ {t('light')}</a>
|
||||
<a href="#" className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('dark'); }}>🌙 {t('dark')}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<AlertsBell dropup />
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<KeyboardShortcutsButton className="nav-link btn-icon rounded" title="Горячие клавиши" />
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<Link to="/settings" className="nav-link btn-icon rounded" title="Настройки">
|
||||
<IconSettings size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Бэкдроп мобильного меню: закрытие по клику */}
|
||||
{sidebarBackdrop && (
|
||||
<div
|
||||
className="sidebar-backdrop d-md-none"
|
||||
aria-hidden="true"
|
||||
onClick={() => sidebarTogglerRef.current?.click?.()}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="page-wrapper">
|
||||
<div className="page-body">
|
||||
<div className="container-fluid">
|
||||
<main id="main-content" tabIndex="-1">
|
||||
<Routes>
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/traffic" element={<TrafficDashboard />} />
|
||||
<Route path="/resource-stats" element={<ResourceStatsPage />} />
|
||||
<Route path="/network-map" element={<NetworkMapDashboard />} />
|
||||
<Route path="/route-optimizer" element={<RouteOptimizerPage />} />
|
||||
<Route path="/uptime-monitor" element={<UptimeMonitorPage />} />
|
||||
<Route path="/domains" element={<DomainsNewManager />} />
|
||||
<Route path="/ip-ranges" element={<IPRangesManager />} />
|
||||
<Route path="/asns" element={<ASNsNewManager />} />
|
||||
<Route path="/communities" element={<CommunitiesManager />} />
|
||||
<Route path="/auto-urls" element={<AutoUrlManager />} />
|
||||
<Route path="/servers" element={<ServerManager />} />
|
||||
<Route path="/billing" element={<BillingManager />} />
|
||||
<Route path="/filters" element={<FilterManager />} />
|
||||
<Route path="/network-config" element={<NetworkConfigManager />} />
|
||||
<Route path="/easy-switch" element={<EasySwitchManager />} />
|
||||
<Route path="/mikrotik-backups" element={<MikrotikBackupsManager />} />
|
||||
<Route path="/ospf-tools" element={<OspfToolsPage />} />
|
||||
<Route path="/mikrotik-tools" element={<MikrotikTools />} />
|
||||
<Route path="/firewall" element={<FirewallPage />} />
|
||||
<Route path="/interface-speed" element={<InterfaceSpeedTest />} />
|
||||
<Route path="/ping-services" element={<PingServicesManager />} />
|
||||
<Route path="/scheduler" element={<NetworkMapSchedulerPage />} />
|
||||
<Route path="/settings" element={<SettingsPage />} />
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<footer className="footer footer-transparent d-print-none">
|
||||
<div className="container-fluid">
|
||||
<ul className="list-inline list-inline-dots mb-0 text-muted small">
|
||||
<li className="list-inline-item">Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<CommandPalette />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,25 @@
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom"
|
||||
|
||||
import { appRoutes } from "@/app/router/routes"
|
||||
import { AppProviders } from "@/app/providers/app-providers"
|
||||
import { AppShell } from "@/layouts/AppShell"
|
||||
import ErrorBoundary from "@/components/ErrorBoundary"
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<BrowserRouter>
|
||||
<AppProviders>
|
||||
<Routes>
|
||||
<Route element={<AppShell />}>
|
||||
{appRoutes.map((route) => (
|
||||
<Route key={route.path} path={route.path} element={route.element} />
|
||||
))}
|
||||
</Route>
|
||||
</Routes>
|
||||
</AppProviders>
|
||||
</BrowserRouter>
|
||||
</ErrorBoundary>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -19,12 +19,12 @@ import {
|
||||
IconSortAscending,
|
||||
IconSortDescending,
|
||||
IconX
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import TableSkeleton from './components/TableSkeleton.jsx';
|
||||
import EmptyState from './components/EmptyState.jsx';
|
||||
import ImportModal from './components/ImportModal.jsx';
|
||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||
import { ErrorAlert } from '@/components/shared/feedback';
|
||||
import LastSaved from './components/LastSaved.jsx';
|
||||
|
||||
function AutoUrlManager() {
|
||||
|
||||
@@ -5,11 +5,11 @@ import FormModal from './components/FormModal.jsx';
|
||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||
import Pagination from './components/Pagination.jsx';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
||||
import { PageHeaderActions } from '@/components/shared/navigation';
|
||||
import FormField from './components/FormField.jsx';
|
||||
import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
|
||||
import PurposeSelectInput, { PURPOSES as PURPOSE_OPTIONS } from './components/PurposeSelectInput.jsx';
|
||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||
import { ErrorAlert } from '@/components/shared/feedback';
|
||||
import {
|
||||
IconPlus,
|
||||
IconEdit,
|
||||
@@ -37,7 +37,7 @@ import {
|
||||
IconClock,
|
||||
IconLayoutGrid,
|
||||
IconList
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
||||
import { BillingCard } from './components/billing/index.js';
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ import {
|
||||
IconDownload,
|
||||
IconDeviceFloppy,
|
||||
IconPlugConnected
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import PortalDropdown from './components/PortalDropdown.jsx';
|
||||
import EmptyState from './components/EmptyState.jsx';
|
||||
@@ -27,7 +27,7 @@ import SavedFilters from './components/SavedFilters.jsx';
|
||||
import FormModal from './components/FormModal.jsx';
|
||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||
import FormField from './components/FormField.jsx';
|
||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||
import { ErrorAlert } from '@/components/shared/feedback';
|
||||
import Pagination from './components/Pagination.jsx';
|
||||
import IconPicker from './components/IconPicker.jsx';
|
||||
import { getIconById } from './lib/brandIcons.js';
|
||||
|
||||
@@ -13,8 +13,8 @@ import {
|
||||
IconDownload,
|
||||
IconUpload,
|
||||
IconAlertTriangle
|
||||
} from '@tabler/icons-react';
|
||||
import ConfirmDialog from './components/ConfirmDialog.jsx'
|
||||
} from '@/lib/icons';
|
||||
import { ConfirmDialog } from '@/components/shared/feedback'
|
||||
|
||||
const API_URL = '/api';
|
||||
|
||||
|
||||
@@ -25,17 +25,16 @@ import {
|
||||
IconArrowUp,
|
||||
IconArrowDown,
|
||||
IconCopy
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import EmptyState from './components/EmptyState.jsx';
|
||||
import { IconAlertTriangle } from '@tabler/icons-react';
|
||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||
import { IconAlertTriangle } from '@/lib/icons';
|
||||
import { PageHeaderActions } from '@/components/shared/navigation';
|
||||
import { ConfirmDialog, ErrorAlert } from '@/components/shared/feedback';
|
||||
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
||||
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
||||
import HistoryModal from './components/HistoryModal.jsx';
|
||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
|
||||
import ImportModal from './components/ImportModal.jsx';
|
||||
import QuickAddBar from './components/QuickAddBar.jsx';
|
||||
|
||||
@@ -16,7 +16,7 @@ import {
|
||||
IconBolt,
|
||||
IconChevronDown,
|
||||
IconChevronUp
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
|
||||
// Функция для получения флага по коду страны
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import api from './lib/api.js';
|
||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||
import { ConfirmDialog } from '@/components/shared/feedback';
|
||||
import FormModal from './components/FormModal.jsx';
|
||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||
import FormField from './components/FormField.jsx';
|
||||
@@ -28,7 +28,7 @@ import {
|
||||
IconSortDescending,
|
||||
IconFileText,
|
||||
IconGripVertical
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
|
||||
@@ -3,12 +3,11 @@ import api from './lib/api.js';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||||
import EmptyState from './components/EmptyState.jsx';
|
||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||
import { ConfirmDialog, ErrorAlert } from '@/components/shared/feedback';
|
||||
import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
|
||||
import Pagination from './components/Pagination.jsx';
|
||||
import Tooltip from './components/Tooltip.jsx';
|
||||
import Modal from './components/Modal.jsx';
|
||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||
import {
|
||||
IconShield,
|
||||
IconRefresh,
|
||||
|
||||
@@ -23,16 +23,15 @@ import {
|
||||
IconNetwork,
|
||||
IconCopy,
|
||||
IconCopyCheck
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
||||
import { PageHeaderActions } from '@/components/shared/navigation';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import EmptyState from './components/EmptyState.jsx';
|
||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||
import { ConfirmDialog, ErrorAlert } from '@/components/shared/feedback';
|
||||
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
||||
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
||||
import HistoryModal from './components/HistoryModal.jsx';
|
||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
|
||||
import ImportModal from './components/ImportModal.jsx';
|
||||
import QuickAddBar from './components/QuickAddBar.jsx';
|
||||
|
||||
@@ -6,7 +6,7 @@ import PageHeader from './components/PageHeader.jsx';
|
||||
import TableSkeleton from './components/TableSkeleton.jsx';
|
||||
import EmptyState from './components/EmptyState.jsx';
|
||||
import Tooltip from './components/Tooltip.jsx';
|
||||
import DataTable from './components/DataTable.jsx';
|
||||
import { DataTable } from '@/components/shared/table';
|
||||
import { LargeModal, FullscreenModal } from './components/Modal.jsx';
|
||||
import { countryToFlag } from './utils/serverUtils.js';
|
||||
import {
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
IconDownload,
|
||||
IconCopy,
|
||||
IconSearch,
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
|
||||
/**
|
||||
* Строит две колонки строк для side-by-side diff (как git diff).
|
||||
|
||||
@@ -34,7 +34,7 @@ import {
|
||||
IconLock,
|
||||
IconChevronDown,
|
||||
IconChevronUp,
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
|
||||
/**
|
||||
* Менеджер сетевых настроек
|
||||
|
||||
@@ -7,12 +7,12 @@ import {
|
||||
IconDeviceFloppy,
|
||||
IconCloud,
|
||||
IconSearch,
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import FormModal from './components/FormModal.jsx';
|
||||
import FormField from './components/FormField.jsx';
|
||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
||||
import { ErrorAlert } from '@/components/shared/feedback';
|
||||
import IconPicker from './components/IconPicker.jsx';
|
||||
import { getIconById } from './lib/brandIcons.js';
|
||||
|
||||
|
||||
+40
-183
@@ -1,6 +1,6 @@
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import api from './lib/api.js';
|
||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
||||
import { ConfirmDialog } from '@/components/shared/feedback';
|
||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||
import FormModal from './components/FormModal.jsx';
|
||||
import FormField from './components/FormField.jsx';
|
||||
@@ -19,8 +19,15 @@ import {
|
||||
IconSquare,
|
||||
IconSquareCheck,
|
||||
IconChevronRight
|
||||
} from '@tabler/icons-react';
|
||||
} from '@/lib/icons';
|
||||
import GraphView from './GraphView';
|
||||
import { countryToFlag } from '@/features/servers/lib/country-to-flag';
|
||||
import { copyTextToClipboard } from '@/features/servers/lib/clipboard';
|
||||
import { buildServersCsv, generateServerUrl as buildServerUrl } from '@/features/servers/lib/server-export';
|
||||
import { buildDisplayItems, filterAndSortServers } from '@/features/servers/lib/server-list';
|
||||
import { getServerPagination } from '@/features/servers/lib/server-pagination';
|
||||
import { defaultServerUrlSettings, serverUrlPresets } from '@/features/servers/lib/server-url-settings';
|
||||
import { useServerSelection } from '@/features/servers/model/use-server-selection';
|
||||
import {
|
||||
normalizeGateways,
|
||||
needsGateways as NEEDS_GATEWAYS,
|
||||
@@ -35,20 +42,10 @@ import {
|
||||
ServerBulkActions
|
||||
} from './components/server/index.js';
|
||||
import PageHeader from './components/PageHeader.jsx';
|
||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
||||
import { PageHeaderActions } from '@/components/shared/navigation';
|
||||
|
||||
const API_URL = '/api';
|
||||
|
||||
// Преобразование кода страны в emoji-флаг
|
||||
function countryToFlag(isoCode) {
|
||||
if (!isoCode) return '';
|
||||
return isoCode
|
||||
.toUpperCase()
|
||||
.replace(/./g, char =>
|
||||
String.fromCodePoint(127397 + char.charCodeAt())
|
||||
);
|
||||
}
|
||||
|
||||
function ServerManager() {
|
||||
const notify = useNotify();
|
||||
|
||||
@@ -77,9 +74,6 @@ function ServerManager() {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const pageSize = 20;
|
||||
|
||||
// === Выбор (bulk selection) ===
|
||||
const [selectedServers, setSelectedServers] = useState(new Set());
|
||||
|
||||
// === Модальные окна ===
|
||||
const [addServerModalOpen, setAddServerModalOpen] = useState(false);
|
||||
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||
@@ -95,16 +89,7 @@ function ServerManager() {
|
||||
const [modalError, setModalError] = useState('');
|
||||
|
||||
// === URL Settings ===
|
||||
const [urlSettings, setUrlSettings] = useState({
|
||||
baseUrl: 'https://functions.yandexcloud.net/d4eno3im0qgsr4tj5hdo',
|
||||
cloudflare_gateway: 'SWE-IHOR',
|
||||
bunny_gateway: 'SWE-IHOR',
|
||||
fastly_gateway: 'SWE-IHOR',
|
||||
telegram_gateway: '94.142.140.1',
|
||||
hetzner_gateway: '94.142.140.1',
|
||||
type: 'routes',
|
||||
version: 'v4.rsc'
|
||||
});
|
||||
const [urlSettings, setUrlSettings] = useState(defaultServerUrlSettings);
|
||||
|
||||
// === Связи ===
|
||||
const [newConnection, setNewConnection] = useState({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
|
||||
@@ -114,12 +99,6 @@ function ServerManager() {
|
||||
const [graphCountryFilter, setGraphCountryFilter] = useState('');
|
||||
const [graphProviderFilter, setGraphProviderFilter] = useState('');
|
||||
|
||||
const presets = {
|
||||
default: { baseUrl: 'https://functions.yandexcloud.net/d4eno3im0qgsr4tj5hdo', cloudflare_gateway: 'SWE-IHOR', bunny_gateway: 'SWE-IHOR', fastly_gateway: 'SWE-IHOR', telegram_gateway: '94.142.140.1', hetzner_gateway: '94.142.140.1', type: 'routes', version: 'v4.rsc' },
|
||||
cloudflareSWE: { baseUrl: 'https://cf.example/api', cloudflare_gateway: 'SWE-IHOR', bunny_gateway: '', fastly_gateway: '', telegram_gateway: '', hetzner_gateway: '', type: 'routes', version: 'v4.rsc' },
|
||||
hetznerDE: { baseUrl: 'https://hetzner.example/api', cloudflare_gateway: '', bunny_gateway: '', fastly_gateway: '', telegram_gateway: '', hetzner_gateway: '94.142.140.1', type: 'routes', version: 'v4.rsc' }
|
||||
};
|
||||
|
||||
// === Helpers ===
|
||||
const normalizeServerType = (type) => {
|
||||
const value = String(type || '').toLowerCase();
|
||||
@@ -225,82 +204,27 @@ function ServerManager() {
|
||||
|
||||
// === Фильтрация и сортировка ===
|
||||
const filteredServers = useMemo(() => {
|
||||
let result = [...servers];
|
||||
|
||||
// Применяем фильтры
|
||||
if (filters.country) {
|
||||
result = result.filter(s => s.country === filters.country);
|
||||
}
|
||||
if (filters.provider) {
|
||||
result = result.filter(s => s.provider === filters.provider);
|
||||
}
|
||||
if (filters.type) {
|
||||
result = result.filter(s => s.type === filters.type);
|
||||
}
|
||||
if (filters.tunnel) {
|
||||
result = result.filter(s => s.tunnel === filters.tunnel);
|
||||
}
|
||||
|
||||
// Поиск
|
||||
if (searchTerm) {
|
||||
const term = searchTerm.toLowerCase();
|
||||
result = result.filter(s =>
|
||||
s.ip?.toLowerCase().includes(term) ||
|
||||
s.dns?.toLowerCase().includes(term) ||
|
||||
s.country?.toLowerCase().includes(term) ||
|
||||
s.provider?.toLowerCase().includes(term) ||
|
||||
(s.type || '').toLowerCase().includes(term)
|
||||
);
|
||||
}
|
||||
|
||||
// Сортировка
|
||||
result.sort((a, b) => {
|
||||
let valA = a[sortField] || '';
|
||||
let valB = b[sortField] || '';
|
||||
if (typeof valA === 'string') valA = valA.toLowerCase();
|
||||
if (typeof valB === 'string') valB = valB.toLowerCase();
|
||||
if (valA < valB) return sortOrder === 'asc' ? -1 : 1;
|
||||
if (valA > valB) return sortOrder === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
return result;
|
||||
return filterAndSortServers(servers, filters, searchTerm, sortField, sortOrder);
|
||||
}, [servers, filters, searchTerm, sortField, sortOrder]);
|
||||
|
||||
// Элементы для отображения: серверы с одинаковым groupKey (и type home) объединяются в одну карточку
|
||||
const displayItems = useMemo(() => {
|
||||
const keyToServers = {};
|
||||
filteredServers.forEach((s) => {
|
||||
const k = (s.groupKey && String(s.groupKey).trim()) || null;
|
||||
if (k) {
|
||||
if (!keyToServers[k]) keyToServers[k] = [];
|
||||
keyToServers[k].push(s);
|
||||
}
|
||||
});
|
||||
const seenKeys = new Set();
|
||||
const items = [];
|
||||
for (const s of filteredServers) {
|
||||
const k = (s.groupKey && String(s.groupKey).trim()) || null;
|
||||
if (!k) {
|
||||
items.push({ type: 'server', server: s });
|
||||
} else {
|
||||
if (!seenKeys.has(k)) {
|
||||
seenKeys.add(k);
|
||||
const group = keyToServers[k];
|
||||
items.push(group.length >= 2 ? { type: 'group', groupKey: k, servers: group } : { type: 'server', server: group[0] });
|
||||
}
|
||||
}
|
||||
}
|
||||
return items;
|
||||
return buildDisplayItems(filteredServers);
|
||||
}, [filteredServers]);
|
||||
|
||||
// === Пагинация ===
|
||||
const totalPagesCards = Math.ceil(displayItems.length / pageSize);
|
||||
const totalPagesTable = Math.ceil(filteredServers.length / pageSize);
|
||||
const totalPages = viewMode === 'cards' ? totalPagesCards : totalPagesTable;
|
||||
const paginatedDisplayItems = displayItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
|
||||
const paginatedServers = filteredServers.slice((currentPage - 1) * pageSize, currentPage * pageSize);
|
||||
const totalItemsCount = viewMode === 'cards' ? displayItems.length : filteredServers.length;
|
||||
const {
|
||||
totalPages,
|
||||
paginatedDisplayItems,
|
||||
paginatedServers,
|
||||
totalItemsCount,
|
||||
} = getServerPagination({
|
||||
viewMode,
|
||||
currentPage,
|
||||
pageSize,
|
||||
displayItems,
|
||||
filteredServers,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage > totalPages && totalPages >= 1) setCurrentPage(1);
|
||||
@@ -323,38 +247,14 @@ function ServerManager() {
|
||||
};
|
||||
|
||||
// === Selection ===
|
||||
const toggleServerSelection = (server) => {
|
||||
const newSet = new Set(selectedServers);
|
||||
if (newSet.has(server.ip)) {
|
||||
newSet.delete(server.ip);
|
||||
} else {
|
||||
newSet.add(server.ip);
|
||||
}
|
||||
setSelectedServers(newSet);
|
||||
};
|
||||
|
||||
const toggleGroupSelection = (servers, selectAll) => {
|
||||
setSelectedServers((prev) => {
|
||||
const next = new Set(prev);
|
||||
servers.forEach((s) => {
|
||||
if (selectAll) next.add(s.ip);
|
||||
else next.delete(s.ip);
|
||||
});
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const selectAllServers = () => {
|
||||
if (selectedServers.size === filteredServers.length) {
|
||||
setSelectedServers(new Set());
|
||||
} else {
|
||||
setSelectedServers(new Set(filteredServers.map((s) => s.ip)));
|
||||
}
|
||||
};
|
||||
|
||||
const clearSelection = () => {
|
||||
setSelectedServers(new Set());
|
||||
};
|
||||
const {
|
||||
selectedServers,
|
||||
setSelectedServers,
|
||||
toggleServerSelection,
|
||||
toggleGroupSelection,
|
||||
selectAllServers,
|
||||
clearSelection,
|
||||
} = useServerSelection(filteredServers);
|
||||
|
||||
// === CRUD Operations ===
|
||||
const handleOpenAddServerModal = () => {
|
||||
@@ -492,14 +392,7 @@ function ServerManager() {
|
||||
|
||||
// === URL Generation ===
|
||||
const generateServerUrl = (server) => {
|
||||
const params = new URLSearchParams();
|
||||
Object.entries(urlSettings).forEach(([key, value]) => {
|
||||
if (key !== 'baseUrl' && value) {
|
||||
params.append(key, value);
|
||||
}
|
||||
});
|
||||
params.append('server', server.ip);
|
||||
return `${urlSettings.baseUrl}?${params.toString()}`;
|
||||
return buildServerUrl(urlSettings, server);
|
||||
};
|
||||
|
||||
const _handleGenerateLink = (server) => {
|
||||
@@ -513,40 +406,18 @@ function ServerManager() {
|
||||
};
|
||||
|
||||
const _applyPreset = (name) => {
|
||||
const p = presets[name];
|
||||
const p = serverUrlPresets[name];
|
||||
if (!p) return;
|
||||
setUrlSettings(prev => ({ ...prev, ...p }));
|
||||
localStorage.setItem('urlSettings', JSON.stringify({ ...urlSettings, ...p }));
|
||||
notify.success('Профиль применён');
|
||||
};
|
||||
|
||||
// === Clipboard ===
|
||||
const fallbackCopyToClipboard = (text) => {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
notify.success('Скопировано в буфер обмена!');
|
||||
} catch (_err) {
|
||||
notify.error('Не удалось скопировать');
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
};
|
||||
|
||||
const copyToClipboard = async (text) => {
|
||||
if (navigator.clipboard) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
notify.success('Скопировано в буфер обмена!');
|
||||
return;
|
||||
} catch (_err) {
|
||||
// fallback
|
||||
}
|
||||
}
|
||||
fallbackCopyToClipboard(text);
|
||||
await copyTextToClipboard(text, {
|
||||
onSuccess: () => notify.success('Скопировано в буфер обмена!'),
|
||||
onError: () => notify.error('Не удалось скопировать'),
|
||||
});
|
||||
};
|
||||
|
||||
const _quickCopyLink = async (server) => {
|
||||
@@ -556,21 +427,7 @@ function ServerManager() {
|
||||
|
||||
// === Export ===
|
||||
const exportServersToCSV = (serversList) => {
|
||||
const csvContent = [
|
||||
['ID', 'IP', 'Ext IP', 'Internal IP', 'DNS', 'Country', 'Provider', 'Type', 'Tunnel', 'Generated URL'],
|
||||
...serversList.map(server => [
|
||||
server.id || '',
|
||||
server.ip,
|
||||
server.extIp || '',
|
||||
server.internalIp || '',
|
||||
server.dns,
|
||||
server.country,
|
||||
server.provider,
|
||||
server.type,
|
||||
server.tunnel,
|
||||
generateServerUrl(server)
|
||||
])
|
||||
].map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');
|
||||
const csvContent = buildServersCsv(serversList, urlSettings);
|
||||
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
|
||||
@@ -21,7 +21,7 @@ import {
|
||||
IconBrain,
|
||||
} from '@tabler/icons-react';
|
||||
import FormField from './components/FormField';
|
||||
import ErrorAlert from './components/ErrorAlert';
|
||||
import { ErrorAlert } from '@/components/shared/feedback';
|
||||
import PageHeader from './components/PageHeader';
|
||||
import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
|
||||
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
|
||||
import { TooltipProvider } from "@/components/ui/tooltip"
|
||||
import { Toaster } from "@/components/ui/sonner"
|
||||
import { ThemeProvider } from "@/components/theme-provider"
|
||||
import { PingProvider } from "@/contexts/PingContext"
|
||||
import { AlertsProvider } from "@/contexts/AlertsContext"
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: 30_000,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
type AppProvidersProps = {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function AppProviders({ children }: AppProvidersProps) {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
|
||||
<TooltipProvider>
|
||||
<PingProvider>
|
||||
<AlertsProvider>
|
||||
{children}
|
||||
<Toaster />
|
||||
</AlertsProvider>
|
||||
</PingProvider>
|
||||
</TooltipProvider>
|
||||
</ThemeProvider>
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
import type { LucideIcon } from "lucide-react"
|
||||
import {
|
||||
ArrowRightLeft,
|
||||
BarChart3,
|
||||
Clock,
|
||||
Clock3,
|
||||
CreditCard,
|
||||
Download,
|
||||
Filter,
|
||||
Globe,
|
||||
Home,
|
||||
Network,
|
||||
Route,
|
||||
Server,
|
||||
Settings,
|
||||
Shield,
|
||||
} from "lucide-react"
|
||||
|
||||
export type NavItem = {
|
||||
id: string
|
||||
title: string
|
||||
path: string
|
||||
icon: LucideIcon
|
||||
}
|
||||
|
||||
export type NavCategory = {
|
||||
id: string
|
||||
title: string
|
||||
icon: LucideIcon
|
||||
items: NavItem[]
|
||||
}
|
||||
|
||||
export const navCategories: NavCategory[] = [
|
||||
{
|
||||
id: "home",
|
||||
title: "Главная",
|
||||
icon: Home,
|
||||
items: [
|
||||
{ id: "dashboard", title: "Панель", path: "/dashboard", icon: Home },
|
||||
{ id: "traffic", title: "Расход трафика", path: "/traffic", icon: BarChart3 },
|
||||
{ id: "resource-stats", title: "Статистика ресурсов", path: "/resource-stats", icon: BarChart3 },
|
||||
{ id: "network-map", title: "Карта сети", path: "/network-map", icon: Network },
|
||||
{ id: "route-optimizer", title: "Оптимизация маршрутов ИИ", path: "/route-optimizer", icon: Route },
|
||||
{ id: "uptime-monitor", title: "Uptime Monitor", path: "/uptime-monitor", icon: Clock },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "data",
|
||||
title: "Данные",
|
||||
icon: Globe,
|
||||
items: [
|
||||
{ id: "domains", title: "Домены", path: "/domains", icon: Globe },
|
||||
{ id: "ip-ranges", title: "IP-диапазоны", path: "/ip-ranges", icon: Network },
|
||||
{ id: "asns", title: "AS", path: "/asns", icon: Network },
|
||||
{ id: "communities", title: "Community", path: "/communities", icon: Filter },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "management",
|
||||
title: "Управление",
|
||||
icon: Server,
|
||||
items: [
|
||||
{ id: "servers", title: "Серверы", path: "/servers", icon: Server },
|
||||
{ id: "filters", title: "Фильтры", path: "/filters", icon: Filter },
|
||||
{ id: "network-config", title: "Сетевые настройки", path: "/network-config", icon: Network },
|
||||
{ id: "easy-switch", title: "Easy Switch", path: "/easy-switch", icon: ArrowRightLeft },
|
||||
{ id: "billing", title: "Биллинг", path: "/billing", icon: CreditCard },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "tools",
|
||||
title: "Инструменты",
|
||||
icon: Settings,
|
||||
items: [
|
||||
{ id: "auto-urls", title: "Авто URL", path: "/auto-urls", icon: Download },
|
||||
{ id: "mikrotik-backups", title: "MikroTik Бэкапы", path: "/mikrotik-backups", icon: Server },
|
||||
{ id: "ospf-tools", title: "Инструменты OSPF", path: "/ospf-tools", icon: Route },
|
||||
{ id: "mikrotik-tools", title: "MikroTik Инструменты", path: "/mikrotik-tools", icon: Network },
|
||||
{ id: "firewall", title: "Firewall", path: "/firewall", icon: Shield },
|
||||
{ id: "interface-speed", title: "Скорость интерфейсов", path: "/interface-speed", icon: Network },
|
||||
{ id: "ping-services", title: "Пинг сервисов", path: "/ping-services", icon: Network },
|
||||
{ id: "scheduler", title: "Планировщик карты сети", path: "/scheduler", icon: Clock3 },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import { Navigate } from "react-router-dom"
|
||||
import {
|
||||
ASNsPage,
|
||||
AutoUrlsPage,
|
||||
BillingPage,
|
||||
CommunitiesPage,
|
||||
DashboardPage,
|
||||
DomainsPage,
|
||||
EasySwitchPage,
|
||||
FiltersPage,
|
||||
FirewallPage,
|
||||
InterfaceSpeedPage,
|
||||
IPRangesPage,
|
||||
MikrotikBackupsPage,
|
||||
MikrotikToolsPage,
|
||||
NetworkConfigPage,
|
||||
NetworkMapPage,
|
||||
NetworkSchedulerPage,
|
||||
OspfToolsPage,
|
||||
PingServicesPage,
|
||||
ResourceStatsPage,
|
||||
RouteOptimizerPage,
|
||||
ServersPage,
|
||||
SettingsPage,
|
||||
TrafficPage,
|
||||
UptimeMonitorPage,
|
||||
} from "@/pages"
|
||||
|
||||
export type AppRoute = {
|
||||
path: string
|
||||
element: React.ReactNode
|
||||
}
|
||||
|
||||
export const appRoutes: AppRoute[] = [
|
||||
{ path: "/dashboard", element: <DashboardPage /> },
|
||||
{ path: "/traffic", element: <TrafficPage /> },
|
||||
{ path: "/resource-stats", element: <ResourceStatsPage /> },
|
||||
{ path: "/network-map", element: <NetworkMapPage /> },
|
||||
{ path: "/route-optimizer", element: <RouteOptimizerPage /> },
|
||||
{ path: "/uptime-monitor", element: <UptimeMonitorPage /> },
|
||||
{ path: "/domains", element: <DomainsPage /> },
|
||||
{ path: "/ip-ranges", element: <IPRangesPage /> },
|
||||
{ path: "/asns", element: <ASNsPage /> },
|
||||
{ path: "/communities", element: <CommunitiesPage /> },
|
||||
{ path: "/auto-urls", element: <AutoUrlsPage /> },
|
||||
{ path: "/servers", element: <ServersPage /> },
|
||||
{ path: "/billing", element: <BillingPage /> },
|
||||
{ path: "/filters", element: <FiltersPage /> },
|
||||
{ path: "/network-config", element: <NetworkConfigPage /> },
|
||||
{ path: "/easy-switch", element: <EasySwitchPage /> },
|
||||
{ path: "/mikrotik-backups", element: <MikrotikBackupsPage /> },
|
||||
{ path: "/ospf-tools", element: <OspfToolsPage /> },
|
||||
{ path: "/mikrotik-tools", element: <MikrotikToolsPage /> },
|
||||
{ path: "/firewall", element: <FirewallPage /> },
|
||||
{ path: "/interface-speed", element: <InterfaceSpeedPage /> },
|
||||
{ path: "/ping-services", element: <PingServicesPage /> },
|
||||
{ path: "/scheduler", element: <NetworkSchedulerPage /> },
|
||||
{ path: "/settings", element: <SettingsPage /> },
|
||||
{ path: "/", element: <Navigate to="/dashboard" replace /> },
|
||||
]
|
||||
|
||||
@@ -1,4 +1,13 @@
|
||||
import { IconAlertTriangle } from '@tabler/icons-react';
|
||||
import { AlertTriangle, Loader2 } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
/**
|
||||
* ConfirmDialog - упрощённая версия для быстрых подтверждений
|
||||
@@ -16,90 +25,28 @@ export default function ConfirmDialog({
|
||||
size = 'sm',
|
||||
loading = false
|
||||
}) {
|
||||
if (!open) return null;
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onCancel?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Modal Backdrop */}
|
||||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onCancel?.(); }}
|
||||
>
|
||||
<div className={`modal-dialog ${size === 'sm' ? 'modal-sm' : size === 'lg' ? 'modal-lg' : ''} modal-dialog-centered`} role="document">
|
||||
<div
|
||||
className="modal-content"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button type="button" className="btn-close" onClick={onCancel} aria-label="Закрыть" />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<div className="d-flex align-items-start">
|
||||
{destructive && (
|
||||
<div className="flex-shrink-0 me-3">
|
||||
<IconAlertTriangle className="text-danger" size={32} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-grow-1">
|
||||
<p className="mb-0">{message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
>
|
||||
{cancelText}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn ${destructive ? 'btn-danger' : 'btn-primary'}`}
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading && (
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
|
||||
)}
|
||||
{confirmText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<Dialog open={open} onOpenChange={(state) => { if (!state) onCancel?.(); }}>
|
||||
<DialogContent className={size === "lg" ? "max-w-2xl" : size === "sm" ? "max-w-sm" : "max-w-md"}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription className="pt-2">
|
||||
<span className="flex items-start gap-3">
|
||||
{destructive && <AlertTriangle className="mt-0.5 h-5 w-5 text-destructive" />}
|
||||
<span>{message}</span>
|
||||
</span>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="secondary" onClick={onCancel} disabled={loading}>
|
||||
{cancelText}
|
||||
</Button>
|
||||
<Button type="button" variant={destructive ? "destructive" : "default"} onClick={onConfirm} disabled={loading}>
|
||||
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{confirmText}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import React from 'react';
|
||||
import { IconArrowUp, IconArrowDown, IconEdit, IconTrash, IconCopy, IconCheck, IconX } from '@tabler/icons-react';
|
||||
import { ArrowDown, ArrowUp, Check, Copy, Edit, Trash, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import TableSkeleton, { TableEmpty } from './TableSkeleton.jsx';
|
||||
import EmptyState from './EmptyState.jsx';
|
||||
import Pagination from './Pagination.jsx';
|
||||
@@ -77,34 +80,33 @@ function DataTable({
|
||||
{col.title}
|
||||
{isSortable && isActive && (
|
||||
<span className="ms-1">
|
||||
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
||||
{sortOrder === 'asc' ? <ArrowUp size={14} /> : <ArrowDown size={14} />}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const thProps = {
|
||||
const headProps = {
|
||||
key: col.key,
|
||||
scope: 'col',
|
||||
style: col.width ? { width: col.width } : undefined,
|
||||
};
|
||||
|
||||
if (isSortable) {
|
||||
return (
|
||||
<th
|
||||
{...thProps}
|
||||
<TableHead
|
||||
{...headProps}
|
||||
className="cursor-pointer user-select-none"
|
||||
onClick={() => onSort(col.key)}
|
||||
>
|
||||
{col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
|
||||
</th>
|
||||
</TableHead>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<th {...thProps}>
|
||||
<TableHead {...headProps}>
|
||||
{col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
|
||||
</th>
|
||||
</TableHead>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -126,22 +128,24 @@ function DataTable({
|
||||
<>
|
||||
{inlineEdit.renderEditor && inlineEdit.renderEditor(item)}
|
||||
<Tooltip content="Сохранить (Enter)">
|
||||
<button
|
||||
className="btn btn-success btn-icon btn-sm me-1"
|
||||
<Button
|
||||
variant="default"
|
||||
size="icon"
|
||||
onClick={inlineEdit.onSave}
|
||||
aria-label="Сохранить"
|
||||
>
|
||||
<IconCheck size={16} />
|
||||
</button>
|
||||
<Check size={16} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Отмена (Esc)">
|
||||
<button
|
||||
className="btn btn-secondary btn-icon btn-sm"
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
onClick={inlineEdit.onCancel}
|
||||
aria-label="Отмена"
|
||||
>
|
||||
<IconX size={16} />
|
||||
</button>
|
||||
<X size={16} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</>
|
||||
);
|
||||
@@ -151,46 +155,50 @@ function DataTable({
|
||||
<>
|
||||
{onEdit && (
|
||||
<Tooltip content="Редактировать" position="top">
|
||||
<button
|
||||
className="btn btn-outline-primary btn-icon btn-sm me-1"
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onEdit(item)}
|
||||
aria-label="Редактировать"
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
</button>
|
||||
<Edit size={16} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
{onCopy && (
|
||||
<Tooltip content="Копировать" position="top">
|
||||
<button
|
||||
className="btn btn-outline-secondary btn-icon btn-sm me-1"
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => onCopy(item)}
|
||||
aria-label="Копировать"
|
||||
>
|
||||
<IconCopy size={16} />
|
||||
</button>
|
||||
<Copy size={16} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
{actions.map((action, idx) => (
|
||||
<Tooltip key={idx} content={action.label} position="top">
|
||||
<button
|
||||
className={`btn btn-outline-${action.variant || 'secondary'} btn-icon btn-sm me-1`}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => action.onClick(item)}
|
||||
aria-label={action.label}
|
||||
>
|
||||
<action.icon size={16} />
|
||||
</button>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
))}
|
||||
{onDelete && (
|
||||
<Tooltip content="Удалить" position="top">
|
||||
<button
|
||||
className="btn btn-outline-danger btn-icon btn-sm"
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
onClick={() => onDelete(item)}
|
||||
aria-label="Удалить"
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</button>
|
||||
<Trash size={16} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</>
|
||||
@@ -221,72 +229,59 @@ function DataTable({
|
||||
}
|
||||
|
||||
const allSelected = items.length > 0 && items.every(i => selectedItems.has(i[itemKey]));
|
||||
const tableClass = [
|
||||
'table table-vcenter table-nowrap mb-0',
|
||||
flat ? 'table-flat' : 'card-table',
|
||||
!flat && striped && 'table-striped',
|
||||
compact && 'table-sm',
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="table-responsive">
|
||||
<table className={tableClass} role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<div className="overflow-x-auto rounded-md border">
|
||||
<Table role="grid">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{selectable && (
|
||||
<th scope="col" style={{ width: '40px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
<TableHead style={{ width: '40px' }}>
|
||||
<Checkbox
|
||||
checked={allSelected}
|
||||
onChange={(e) => e.target.checked ? onSelectAll?.() : onDeselectAll?.()}
|
||||
onCheckedChange={(checked) => checked ? onSelectAll?.() : onDeselectAll?.()}
|
||||
title="Выбрать все на странице"
|
||||
/>
|
||||
</th>
|
||||
</TableHead>
|
||||
)}
|
||||
{columns.map(renderColumnHeader)}
|
||||
{hasActions && <th scope="col" className="text-end td-actions">Действия</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{hasActions && <TableHead className="text-right">Действия</TableHead>}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{items.map((item, idx) => {
|
||||
const id = item[itemKey];
|
||||
const isSelected = selectedItems.has(id);
|
||||
const editing = isEditing(item);
|
||||
|
||||
return (
|
||||
<tr
|
||||
<TableRow
|
||||
key={id}
|
||||
className={editing ? 'table-active' : (isSelected ? 'table-selected' : '')}
|
||||
style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}
|
||||
>
|
||||
{selectable && (
|
||||
<td>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onChange={() => onSelectItem?.(id)}
|
||||
onCheckedChange={() => onSelectItem?.(id)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</td>
|
||||
</TableCell>
|
||||
)}
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className={col.className}>
|
||||
<TableCell key={col.key} className={col.className}>
|
||||
{renderCell(col, item)}
|
||||
</td>
|
||||
</TableCell>
|
||||
))}
|
||||
{hasActions && (
|
||||
<td className="text-end td-actions">
|
||||
{renderActions(item)}
|
||||
</td>
|
||||
<TableCell className="text-right">{renderActions(item)}</TableCell>
|
||||
)}
|
||||
</tr>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{pagination && (
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { IconAlertTriangle, IconCopy, IconRefresh, IconChevronDown, IconChevronUp } from '@tabler/icons-react'
|
||||
import { useState } from 'react'
|
||||
import { formatDateTime } from '../lib/datetime.js'
|
||||
import { AlertTriangle, ChevronDown, ChevronUp, Copy, RefreshCcw } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { formatDateTime } from "../lib/datetime.js"
|
||||
|
||||
/**
|
||||
* ErrorAlert - улучшенный компонент для отображения ошибок
|
||||
@@ -12,14 +15,14 @@ function ErrorAlert({
|
||||
error, // альтернативный формат - объект error
|
||||
onClose,
|
||||
onRetry,
|
||||
className = '',
|
||||
className = "",
|
||||
showDetails = true
|
||||
}) {
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
// Поддержка обоих форматов: { message, details } или { error }
|
||||
const errorMessage = message || (typeof error === 'string' ? error : error?.message) || 'Произошла неизвестная ошибка'
|
||||
const errorMessage = message || (typeof error === "string" ? error : error?.message) || "Произошла неизвестная ошибка"
|
||||
const errorDetails = details || error?.details || error?.stack || null
|
||||
const errorCode = error?.code || error?.status || null
|
||||
|
||||
@@ -37,80 +40,58 @@ ${errorDetails ? `Детали:\n${typeof errorDetails === 'string' ? errorDetai
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}).catch(err => {
|
||||
console.error('Не удалось скопировать:', err)
|
||||
console.error("Не удалось скопировать:", err)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`alert alert-danger alert-dismissible ${className}`} role="alert">
|
||||
<div className="d-flex">
|
||||
<div className="me-2">
|
||||
<IconAlertTriangle className="icon alert-icon" />
|
||||
</div>
|
||||
<div className="flex-grow-1">
|
||||
<h4 className="alert-title">
|
||||
Ошибка
|
||||
{errorCode && (
|
||||
<span className="badge bg-danger-lt text-danger ms-2">{errorCode}</span>
|
||||
)}
|
||||
</h4>
|
||||
<div className="text-secondary mb-2">{errorMessage}</div>
|
||||
|
||||
{/* Детали ошибки (раскрывающийся блок) */}
|
||||
<Alert variant="destructive" className={className}>
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<div className="w-full">
|
||||
<AlertTitle className="flex items-center gap-2">
|
||||
<span>Ошибка</span>
|
||||
{errorCode && <Badge variant="destructive">{errorCode}</Badge>}
|
||||
</AlertTitle>
|
||||
<AlertDescription className="space-y-3">
|
||||
<p>{errorMessage}</p>
|
||||
{errorDetails && showDetails && (
|
||||
<div className="mt-2">
|
||||
<button
|
||||
className="btn btn-sm btn-ghost-secondary"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsExpanded((value) => !value)}
|
||||
type="button"
|
||||
>
|
||||
{isExpanded ? <IconChevronUp size={16} /> : <IconChevronDown size={16} />}
|
||||
<span className="ms-1">{isExpanded ? 'Скрыть детали' : 'Показать детали'}</span>
|
||||
</button>
|
||||
|
||||
{isExpanded ? <ChevronUp className="mr-1 h-4 w-4" /> : <ChevronDown className="mr-1 h-4 w-4" />}
|
||||
{isExpanded ? "Скрыть детали" : "Показать детали"}
|
||||
</Button>
|
||||
{isExpanded && (
|
||||
<pre className="mt-2 p-2 bg-dark text-white rounded" style={{
|
||||
fontSize: '0.75rem',
|
||||
maxHeight: '200px',
|
||||
overflow: 'auto'
|
||||
}}>
|
||||
{typeof errorDetails === 'string' ? errorDetails : JSON.stringify(errorDetails, null, 2)}
|
||||
<pre className="max-h-52 overflow-auto rounded-md border bg-muted p-2 text-xs text-foreground">
|
||||
{typeof errorDetails === "string" ? errorDetails : JSON.stringify(errorDetails, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Действия */}
|
||||
{(onRetry || handleCopy) && (
|
||||
<div className="btn-list mt-2">
|
||||
{onRetry && (
|
||||
<button className="btn btn-sm btn-primary" onClick={onRetry} type="button">
|
||||
<IconRefresh size={16} className="me-1" />
|
||||
Повторить
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
onClick={handleCopy}
|
||||
title="Скопировать информацию об ошибке"
|
||||
type="button"
|
||||
>
|
||||
<IconCopy size={16} className="me-1" />
|
||||
{copied ? 'Скопировано!' : 'Копировать ошибку'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{onRetry && (
|
||||
<Button size="sm" onClick={onRetry} type="button">
|
||||
<RefreshCcw className="mr-1 h-4 w-4" />
|
||||
Повторить
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="secondary" size="sm" onClick={handleCopy} type="button">
|
||||
<Copy className="mr-1 h-4 w-4" />
|
||||
{copied ? "Скопировано!" : "Копировать ошибку"}
|
||||
</Button>
|
||||
{onClose && (
|
||||
<Button variant="ghost" size="sm" onClick={onClose} type="button">
|
||||
Закрыть
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</div>
|
||||
{onClose && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onClose}
|
||||
aria-label="Закрыть"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { IconCheck, IconAlertTriangle, IconInfoCircle, IconX } from '@tabler/icons-react';
|
||||
import { createContext, useCallback, useContext, useEffect, useMemo } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const NotifyContext = createContext({
|
||||
add: () => {},
|
||||
@@ -12,67 +12,48 @@ const NotifyContext = createContext({
|
||||
clear: () => {},
|
||||
});
|
||||
|
||||
const DEFAULT_TIMEOUT = {
|
||||
success: 3000,
|
||||
info: 4000,
|
||||
warning: 5000,
|
||||
error: 7000,
|
||||
};
|
||||
|
||||
export function NotifyProvider({ children }) {
|
||||
const [items, setItems] = useState([]); // { id, type, message, count, createdAt }
|
||||
const timeouts = useRef(new Map());
|
||||
const idSeq = useRef(1);
|
||||
|
||||
const remove = useCallback((id) => {
|
||||
setItems((prev) => prev.filter((n) => n.id !== id));
|
||||
const t = timeouts.current.get(id);
|
||||
if (t) { clearTimeout(t); timeouts.current.delete(id); }
|
||||
toast.dismiss(id);
|
||||
}, []);
|
||||
|
||||
const schedule = useCallback((id, type) => {
|
||||
const dur = DEFAULT_TIMEOUT[type] ?? 4000;
|
||||
const old = timeouts.current.get(id);
|
||||
if (old) clearTimeout(old);
|
||||
const t = setTimeout(() => remove(id), dur);
|
||||
timeouts.current.set(id, t);
|
||||
}, [remove]);
|
||||
|
||||
const add = useCallback((type, message, details) => {
|
||||
const text = String(message || '').trim();
|
||||
if (!text) return;
|
||||
setItems((prev) => {
|
||||
const dup = prev.find((n) => n.type === type && n.message === text);
|
||||
if (dup) {
|
||||
const updated = prev.map((n) => n.id === dup.id ? { ...n, count: (n.count || 1) + 1, createdAt: Date.now(), details: details ?? n.details } : n);
|
||||
schedule(dup.id, type);
|
||||
return updated;
|
||||
}
|
||||
const id = idSeq.current++;
|
||||
const next = [...prev, { id, type, message: text, details, count: 1, createdAt: Date.now() }];
|
||||
schedule(id, type);
|
||||
return next;
|
||||
});
|
||||
}, [schedule]);
|
||||
const text = String(message || "").trim();
|
||||
if (!text) return undefined;
|
||||
const payload = details
|
||||
? {
|
||||
description:
|
||||
typeof details === "string" ? details : JSON.stringify(details),
|
||||
}
|
||||
: undefined;
|
||||
|
||||
switch (type) {
|
||||
case "success":
|
||||
return toast.success(text, payload);
|
||||
case "error":
|
||||
return toast.error(text, payload);
|
||||
case "warning":
|
||||
return toast.warning(text, payload);
|
||||
default:
|
||||
return toast.info(text, payload);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const clear = useCallback(() => {
|
||||
setItems([]);
|
||||
for (const t of timeouts.current.values()) clearTimeout(t);
|
||||
timeouts.current.clear();
|
||||
toast.dismiss();
|
||||
}, []);
|
||||
|
||||
const api = useMemo(() => ({
|
||||
add,
|
||||
success: (m, d) => add('success', m, d),
|
||||
error: (m, d) => add('error', m, d),
|
||||
info: (m, d) => add('info', m, d),
|
||||
warning: (m, d) => add('warning', m, d),
|
||||
success: (m, d) => add("success", m, d),
|
||||
error: (m, d) => add("error", m, d),
|
||||
info: (m, d) => add("info", m, d),
|
||||
warning: (m, d) => add("warning", m, d),
|
||||
remove,
|
||||
clear,
|
||||
}), [add, remove, clear]);
|
||||
|
||||
useEffect(() => {
|
||||
// Опционально доступ из консоли / старого кода
|
||||
window.notify = api;
|
||||
return () => { if (window.notify === api) delete window.notify; };
|
||||
}, [api]);
|
||||
@@ -80,7 +61,6 @@ export function NotifyProvider({ children }) {
|
||||
return (
|
||||
<NotifyContext.Provider value={api}>
|
||||
{children}
|
||||
<NotifyViewport items={items} onClose={remove} />
|
||||
</NotifyContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -89,10 +69,7 @@ export function useNotify() {
|
||||
return useContext(NotifyContext);
|
||||
}
|
||||
|
||||
// Единый тост-успех для мутаций (POST/DELETE/PUT/PATCH)
|
||||
export function notifyMutationSuccess(message, details) {
|
||||
// Тихий режим: по умолчанию успех показываем не тостом, а через inline-баннер на страницах.
|
||||
// Оставляем возможность вручную вызвать тост при необходимости, если передан details?.forceToast === true
|
||||
try {
|
||||
const text = message || 'Операция выполнена';
|
||||
const forceToast = Boolean(details && details.forceToast);
|
||||
@@ -101,73 +78,3 @@ export function notifyMutationSuccess(message, details) {
|
||||
}
|
||||
} catch { /* no-op */ }
|
||||
}
|
||||
|
||||
function colorByType(type) {
|
||||
switch (type) {
|
||||
case 'success': return 'success';
|
||||
case 'error': return 'danger';
|
||||
case 'warning': return 'warning';
|
||||
default: return 'info';
|
||||
}
|
||||
}
|
||||
|
||||
function iconByType(type) {
|
||||
switch (type) {
|
||||
case 'success': return <IconCheck className="me-2" />;
|
||||
case 'warning': return <IconAlertTriangle className="me-2" />;
|
||||
case 'error': return <IconAlertTriangle className="me-2" />;
|
||||
default: return <IconInfoCircle className="me-2" />;
|
||||
}
|
||||
}
|
||||
|
||||
function NotifyViewport({ items, onClose }) {
|
||||
return (
|
||||
<div className="toast-container toast-container-end notify-viewport" style={{ zIndex: 1079 }}>
|
||||
{items.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className="toast show toast-alert"
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
style={{
|
||||
minWidth: '320px',
|
||||
maxWidth: '420px',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 'var(--tblr-border-radius, 0.25rem)',
|
||||
animation: 'slideInRight 0.3s ease-out forwards',
|
||||
}}
|
||||
>
|
||||
<div className={`alert alert-${colorByType(n.type)} toast-alert-inner mb-0`}>
|
||||
<div className="toast-header toast-alert-header">
|
||||
<span className="toast-alert-icon me-2">{iconByType(n.type)}</span>
|
||||
<strong className="me-auto">
|
||||
{n.type === 'success' && 'Успех'}
|
||||
{n.type === 'error' && 'Ошибка'}
|
||||
{n.type === 'warning' && 'Внимание'}
|
||||
{n.type === 'info' && 'Информация'}
|
||||
</strong>
|
||||
<button type="button" className="btn-close" aria-label="Закрыть" onClick={() => onClose(n.id)} />
|
||||
</div>
|
||||
<div className="toast-body">
|
||||
<div className="alert-description">
|
||||
{n.message}
|
||||
{n.count > 1 && <span className="badge bg-white text-body border ms-2">×{n.count}</span>}
|
||||
</div>
|
||||
{n.details && (
|
||||
<details className="small mt-1">
|
||||
<summary>Подробнее</summary>
|
||||
<pre className="mb-0 mt-1" style={{ whiteSpace: 'pre-wrap' }}>
|
||||
{typeof n.details === 'string' ? n.details : JSON.stringify(n.details, null, 2)}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,17 +1,24 @@
|
||||
import {
|
||||
IconRefresh,
|
||||
IconUpload,
|
||||
IconDownload,
|
||||
IconDeviceFloppy,
|
||||
IconPlayerPlay,
|
||||
IconBolt,
|
||||
IconEraser,
|
||||
IconDots,
|
||||
IconEye
|
||||
} from '@tabler/icons-react';
|
||||
import PortalDropdown from './PortalDropdown.jsx';
|
||||
import { IconClock } from '@tabler/icons-react';
|
||||
import { formatDateTimeWithRelative } from '../lib/datetime.js';
|
||||
Download,
|
||||
Eraser,
|
||||
Eye,
|
||||
History,
|
||||
Loader2,
|
||||
Play,
|
||||
RefreshCw,
|
||||
Save,
|
||||
Upload,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { formatDateTimeWithRelative } from "../lib/datetime.js";
|
||||
|
||||
function PageHeaderActions({
|
||||
loading = false,
|
||||
@@ -34,192 +41,185 @@ function PageHeaderActions({
|
||||
onBackgroundUpdate,
|
||||
}) {
|
||||
const secondaryButtons = Boolean(onPreview || onImport || onExport || onClear || onClearCommunities || onHistory);
|
||||
// Рендер плейсхолдеров во время загрузки/перезагрузки страницы
|
||||
|
||||
if (loading) {
|
||||
const showUpdateGroup = Boolean(onBackgroundUpdate || onOnlineUpdate);
|
||||
const placeholderBtn = (width = 120) => (
|
||||
<span
|
||||
className="btn disabled placeholder me-2"
|
||||
style={{ height: 38, width }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<div className="header-actions" role="toolbar" aria-label="Действия страницы (загрузка)">
|
||||
<div className="btn-group">
|
||||
{showUpdateGroup && (
|
||||
<div className="btn-group">
|
||||
{placeholderBtn(170)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-wrap items-center gap-2" role="toolbar" aria-label="Действия страницы (загрузка)">
|
||||
<div className="h-9 w-48 animate-pulse rounded-md bg-muted" />
|
||||
<div className="h-9 w-36 animate-pulse rounded-md bg-muted" />
|
||||
<div className="h-9 w-40 animate-pulse rounded-md bg-muted" />
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<div className="h-9 w-32 animate-pulse rounded-md bg-muted" />
|
||||
<div className="h-9 w-24 animate-pulse rounded-md bg-muted" />
|
||||
</div>
|
||||
<span className="vr d-none d-lg-inline" />
|
||||
<div className="btn-group">
|
||||
{onRefresh && placeholderBtn(120)}
|
||||
{(onImport || onExport) && placeholderBtn(160)}
|
||||
{onClear && placeholderBtn(130)}
|
||||
{onClearCommunities && placeholderBtn(180)}
|
||||
</div>
|
||||
{(onSave || onHistory) && (
|
||||
<div className="header-actions-right ms-auto d-flex align-items-center gap-2">
|
||||
{onSave && placeholderBtn(140)}
|
||||
{onHistory && placeholderBtn(110)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="header-actions" role="toolbar" aria-label="Действия страницы">
|
||||
<div className="btn-group">
|
||||
<div className="flex flex-wrap items-center gap-2" role="toolbar" aria-label="Действия страницы">
|
||||
<div className="flex items-center gap-2">
|
||||
{(onBackgroundUpdate || onOnlineUpdate) && (
|
||||
<div className="btn-group">
|
||||
{/* Дефолтное действие — фоновое обновление */}
|
||||
<button
|
||||
className="btn btn-outline-success"
|
||||
type="button"
|
||||
onClick={onBackgroundUpdate || onOnlineUpdate}
|
||||
title="Фоновое обновление BGP (POST)"
|
||||
>
|
||||
<IconPlayerPlay className="me-1" /> Фоновое обновление
|
||||
</button>
|
||||
{(onBackgroundUpdate && onOnlineUpdate) && (
|
||||
<PortalDropdown
|
||||
buttonClassName="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
|
||||
buttonProps={{ 'aria-label': 'Другие варианты обновления' }}
|
||||
align="right"
|
||||
buttonContent={null}
|
||||
>
|
||||
<button className="dropdown-item" type="button" onClick={onBackgroundUpdate}>
|
||||
<IconPlayerPlay className="me-1" /> Фоновое обновление
|
||||
</button>
|
||||
<button className="dropdown-item" type="button" onClick={onOnlineUpdate}>
|
||||
<IconBolt className="me-1" /> Online-обновление
|
||||
</button>
|
||||
</PortalDropdown>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" type="button" onClick={onBackgroundUpdate || onOnlineUpdate} title="Фоновое обновление BGP (POST)">
|
||||
<Play className="mr-1 h-4 w-4" />
|
||||
Фоновое обновление
|
||||
</Button>
|
||||
{onBackgroundUpdate && onOnlineUpdate && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon" aria-label="Другие варианты обновления">
|
||||
<Zap className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuItem onClick={onBackgroundUpdate}>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
Фоновое обновление
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={onOnlineUpdate}>
|
||||
<Zap className="mr-2 h-4 w-4" />
|
||||
Online-обновление
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="vr d-none d-lg-inline" />
|
||||
<div className="btn-group d-none d-sm-inline-flex">
|
||||
<div className="hidden items-center gap-2 sm:flex">
|
||||
{onPreview && (
|
||||
<button className="btn btn-outline-primary" type="button" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений">
|
||||
<IconEye className="me-1" /> Предпросмотр
|
||||
</button>
|
||||
<Button variant="outline" type="button" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений">
|
||||
<Eye className="mr-1 h-4 w-4" />
|
||||
Предпросмотр
|
||||
</Button>
|
||||
)}
|
||||
{onRefresh && (
|
||||
<button className="btn btn-outline-secondary" type="button" onClick={onRefresh} disabled={disableRefresh} title="Обновить данные">
|
||||
<IconRefresh className={loading ? 'spin me-1' : 'me-1'} /> Обновить
|
||||
</button>
|
||||
<Button variant="outline" type="button" onClick={onRefresh} disabled={disableRefresh} title="Обновить данные">
|
||||
<RefreshCw className="mr-1 h-4 w-4" />
|
||||
Обновить
|
||||
</Button>
|
||||
)}
|
||||
{(onImport || onExport) && (
|
||||
<div className="dropdown">
|
||||
<PortalDropdown
|
||||
buttonClassName="btn btn-outline-primary dropdown-toggle"
|
||||
buttonProps={{ title: 'Импорт/Экспорт' }}
|
||||
align="left"
|
||||
buttonContent={<><IconDownload className="me-1" /> Импорт/Экспорт</>}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" title="Импорт/Экспорт">
|
||||
<Download className="mr-1 h-4 w-4" />
|
||||
Импорт/Экспорт
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
{onImport && (
|
||||
<button className="dropdown-item" type="button" onClick={onImport}>
|
||||
<IconUpload className="me-1" /> Импорт
|
||||
</button>
|
||||
<DropdownMenuItem onClick={onImport}>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
Импорт
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{onExport && (
|
||||
<button className="dropdown-item" type="button" onClick={onExport} disabled={disableExport}>
|
||||
<IconDownload className="me-1" /> Экспорт
|
||||
</button>
|
||||
<DropdownMenuItem onClick={onExport} disabled={disableExport}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Экспорт
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</PortalDropdown>
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
{onClear && (
|
||||
<button className="btn btn-outline-secondary" type="button" onClick={onClear} disabled={disableClear} title="Очистить пустые/невалидные">
|
||||
<Button variant="outline" type="button" onClick={onClear} disabled={disableClear} title="Очистить пустые/невалидные">
|
||||
Очистить
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{onClearCommunities && (
|
||||
<button className="btn btn-outline-secondary" type="button" onClick={onClearCommunities} disabled={disableClearCommunities} title="Удалить все записи выбранного community">
|
||||
<IconEraser className="me-1" /> Очистить community
|
||||
</button>
|
||||
<Button variant="outline" type="button" onClick={onClearCommunities} disabled={disableClearCommunities} title="Удалить все записи выбранного community">
|
||||
<Eraser className="mr-1 h-4 w-4" />
|
||||
Очистить community
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{(onSave || onHistory) && (
|
||||
<div className="header-actions-right ms-auto d-flex align-items-center gap-2">
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
{onSave && (
|
||||
<button className="btn btn-primary" type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
|
||||
<Button type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
|
||||
{loading ? (
|
||||
<>
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Сохранение...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<IconDeviceFloppy className="me-1" /> Сохранить
|
||||
<Save className="mr-1 h-4 w-4" />
|
||||
Сохранить
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{onHistory && (
|
||||
<div className="btn-group d-none d-sm-inline-flex">
|
||||
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title="История версий">История</button>
|
||||
<div className="hidden items-center gap-2 sm:flex">
|
||||
<Button variant="outline" type="button" onClick={onHistory} title="История версий">
|
||||
<History className="mr-1 h-4 w-4" />
|
||||
История
|
||||
</Button>
|
||||
{lastModified && (
|
||||
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title={`Последние изменения: ${formatDateTimeWithRelative(lastModified)}`}>
|
||||
<IconClock className="me-1" />
|
||||
<span className="d-none d-sm-inline">{formatDateTimeWithRelative(lastModified)}</span>
|
||||
<span className="d-inline d-sm-none">{formatDateTimeWithRelative(lastModified)}</span>
|
||||
</button>
|
||||
<Button variant="outline" type="button" onClick={onHistory} title={`Последние изменения: ${formatDateTimeWithRelative(lastModified)}`}>
|
||||
{formatDateTimeWithRelative(lastModified)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* Компактное меню для маленьких экранов */}
|
||||
{secondaryButtons && (
|
||||
<div className="btn-group d-inline-flex d-sm-none">
|
||||
<PortalDropdown
|
||||
buttonClassName="btn btn-outline-secondary"
|
||||
buttonProps={{ title: 'Ещё действия' }}
|
||||
align="left"
|
||||
buttonContent={<><IconDots className="me-1" /> Ещё</>}
|
||||
>
|
||||
<div className="inline-flex sm:hidden">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">Ещё</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
{onPreview && (
|
||||
<button className="dropdown-item" type="button" onClick={onPreview} disabled={disablePreview}>
|
||||
<IconEye className="me-1" /> Предпросмотр
|
||||
</button>
|
||||
<DropdownMenuItem onClick={onPreview} disabled={disablePreview}>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
Предпросмотр
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{onRefresh && (
|
||||
<button className="dropdown-item" type="button" onClick={onRefresh} disabled={disableRefresh}>
|
||||
<IconRefresh className="me-1" /> Обновить
|
||||
</button>
|
||||
<DropdownMenuItem onClick={onRefresh} disabled={disableRefresh}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Обновить
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{onImport && (
|
||||
<button className="dropdown-item" type="button" onClick={onImport}>
|
||||
<IconUpload className="me-1" /> Импорт
|
||||
</button>
|
||||
<DropdownMenuItem onClick={onImport}>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
Импорт
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{onExport && (
|
||||
<button className="dropdown-item" type="button" onClick={onExport} disabled={disableExport}>
|
||||
<IconDownload className="me-1" /> Экспорт
|
||||
</button>
|
||||
<DropdownMenuItem onClick={onExport} disabled={disableExport}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Экспорт
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{onClear && (
|
||||
<button className="dropdown-item" type="button" onClick={onClear} disabled={disableClear}>
|
||||
<DropdownMenuItem onClick={onClear} disabled={disableClear}>
|
||||
Очистить
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{onClearCommunities && (
|
||||
<button className="dropdown-item" type="button" onClick={onClearCommunities} disabled={disableClearCommunities}>
|
||||
<IconEraser className="me-1" /> Очистить community
|
||||
</button>
|
||||
<DropdownMenuItem onClick={onClearCommunities} disabled={disableClearCommunities}>
|
||||
<Eraser className="mr-2 h-4 w-4" />
|
||||
Очистить community
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{onHistory && (
|
||||
<button className="dropdown-item" type="button" onClick={onHistory}>
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={onHistory}>
|
||||
История
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</PortalDropdown>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@ import FormField from './FormField';
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import api from '../lib/api.js';
|
||||
import { IconSettings, IconDeviceFloppy } from '@tabler/icons-react';
|
||||
import ErrorAlert from './ErrorAlert';
|
||||
import { ErrorAlert } from '@/components/shared/feedback';
|
||||
import ServerAutocompleteInput from './ServerAutocompleteInput.jsx';
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import { useState, useEffect, createContext, useContext, useCallback, useMemo } from 'react'
|
||||
import {
|
||||
IconCheck,
|
||||
IconX,
|
||||
IconAlertTriangle,
|
||||
IconInfoCircle
|
||||
} from '@tabler/icons-react'
|
||||
import { createContext, useContext, useEffect, useMemo } from "react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
/**
|
||||
* Контекст для глобального управления toast уведомлениями.
|
||||
@@ -20,135 +15,16 @@ const ToastContext = createContext({
|
||||
|
||||
export const useToast = () => useContext(ToastContext)
|
||||
|
||||
const DEFAULT_TITLES = {
|
||||
success: 'Выполнено успешно',
|
||||
error: 'Произошла ошибка',
|
||||
warning: 'Внимание',
|
||||
info: 'Информация',
|
||||
}
|
||||
|
||||
/**
|
||||
* Один toast: разметка Tabler (toast + toast-header + toast-body), стиль Tabler Alerts.
|
||||
*/
|
||||
function Toast({ toast, onClose }) {
|
||||
const [isLeaving, setIsLeaving] = useState(false)
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setIsLeaving(true)
|
||||
setTimeout(() => onClose(toast.id), 300)
|
||||
}, [onClose, toast.id])
|
||||
|
||||
useEffect(() => {
|
||||
if (toast.duration && toast.duration > 0) {
|
||||
const timer = setTimeout(() => handleClose(), toast.duration)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [toast.duration, handleClose])
|
||||
|
||||
const getIcon = () => {
|
||||
switch (toast.type) {
|
||||
case 'success': return <IconCheck size={20} />
|
||||
case 'error': return <IconX size={20} />
|
||||
case 'warning': return <IconAlertTriangle size={20} />
|
||||
case 'info': return <IconInfoCircle size={20} />
|
||||
default: return <IconInfoCircle size={20} />
|
||||
}
|
||||
}
|
||||
|
||||
const alertClass = {
|
||||
success: 'alert-success',
|
||||
error: 'alert-danger',
|
||||
warning: 'alert-warning',
|
||||
info: 'alert-info',
|
||||
}[toast.type] || 'alert-info'
|
||||
|
||||
const title = toast.title ?? DEFAULT_TITLES[toast.type]
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`toast show toast-alert ${isLeaving ? 'toast-leaving' : ''}`}
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
data-toast-type={toast.type}
|
||||
style={{
|
||||
minWidth: '320px',
|
||||
maxWidth: '420px',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 'var(--tblr-border-radius, 0.25rem)',
|
||||
animation: isLeaving ? 'slideOutRight 0.3s ease-out forwards' : 'slideInRight 0.3s ease-out forwards',
|
||||
}}
|
||||
>
|
||||
<div className={`alert ${alertClass} toast-alert-inner mb-0`}>
|
||||
<div className="toast-header toast-alert-header">
|
||||
<span className="toast-alert-icon me-2">{getIcon()}</span>
|
||||
<strong className="me-auto">{title}</strong>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={handleClose}
|
||||
aria-label="Закрыть"
|
||||
/>
|
||||
</div>
|
||||
<div className="toast-body">
|
||||
<div className="alert-description">{toast.message}</div>
|
||||
{toast.actions && toast.actions.length > 0 && (
|
||||
<div className="btn-list mt-2">
|
||||
{toast.actions.map((action, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
type="button"
|
||||
className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
|
||||
onClick={() => {
|
||||
action.onClick?.()
|
||||
handleClose()
|
||||
}}
|
||||
>
|
||||
{action.icon && <action.icon size={14} className="me-1" />}
|
||||
{action.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Контейнер для всех toast уведомлений
|
||||
*/
|
||||
export function ToastContainer({ children }) {
|
||||
const [toasts, setToasts] = useState([])
|
||||
|
||||
const addToast = useCallback((type, message, options = {}) => {
|
||||
const id = Date.now()
|
||||
const toast = {
|
||||
id,
|
||||
type,
|
||||
message,
|
||||
title: options.title,
|
||||
duration: options.duration !== undefined ? options.duration : (type === 'error' ? 0 :
|
||||
type === 'warning' ? 5000 :
|
||||
type === 'info' ? 4000 :
|
||||
3000),
|
||||
actions: options.actions
|
||||
}
|
||||
setToasts(prev => [...prev, toast])
|
||||
return id
|
||||
}, [])
|
||||
|
||||
const removeToast = useCallback((id) => {
|
||||
setToasts(prev => prev.filter(t => t.id !== id))
|
||||
}, [])
|
||||
|
||||
const contextValue = useMemo(() => ({
|
||||
success: (message, options) => addToast('success', message, options),
|
||||
error: (message, options) => addToast('error', message, options),
|
||||
warning: (message, options) => addToast('warning', message, options),
|
||||
info: (message, options) => addToast('info', message, options),
|
||||
}), [addToast])
|
||||
success: (message, options) => toast.success(message, options),
|
||||
error: (message, options) => toast.error(message, options),
|
||||
warning: (message, options) => toast.warning(message, options),
|
||||
info: (message, options) => toast.info(message, options),
|
||||
}), [])
|
||||
|
||||
// Глобальный доступ через window.toast (для обратной совместимости)
|
||||
useEffect(() => {
|
||||
@@ -159,74 +35,6 @@ export function ToastContainer({ children }) {
|
||||
<ToastContext.Provider value={contextValue}>
|
||||
{children}
|
||||
|
||||
{/* Контейнер тостов справа (как в Tabler) */}
|
||||
<div className="toast-container toast-container-end">
|
||||
{toasts.map((t) => (
|
||||
<Toast key={t.id} toast={t} onClose={removeToast} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Стили: тосты в стиле Tabler Alerts, всплывают справа */}
|
||||
<style>{`
|
||||
.toast-container-end {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast-container-end .toast {
|
||||
pointer-events: auto;
|
||||
}
|
||||
/* NotifyProvider тосты ниже, чтобы не перекрывать useToast */
|
||||
.toast-container-end.notify-viewport {
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
/* Toast в стиле Tabler Alert: колоночный layout, без дублирования отступов */
|
||||
.toast-alert .toast-alert-inner {
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
border-radius: var(--tblr-border-radius, 0.25rem);
|
||||
box-shadow: var(--tblr-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
.toast-alert .toast-alert-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
font-weight: 500;
|
||||
}
|
||||
.toast-alert .toast-alert-icon {
|
||||
color: inherit;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toast-alert .toast-body {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.toast-alert .toast-body .alert-description {
|
||||
color: var(--tblr-secondary);
|
||||
}
|
||||
.toast-alert.alert-danger .toast-alert-header { border-bottom-color: rgba(0, 0, 0, 0.1); }
|
||||
.toast-alert .btn-close {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
@keyframes slideOutRight {
|
||||
from { transform: translateX(0); opacity: 1; }
|
||||
to { transform: translateX(100%); opacity: 0; }
|
||||
}
|
||||
`}</style>
|
||||
</ToastContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { Moon, Sun } from "lucide-react"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { useTheme } from "@/components/theme-provider"
|
||||
|
||||
export function ModeToggle() {
|
||||
const { setTheme } = useTheme()
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
import ConfirmDialog from "@/components/ConfirmDialog"
|
||||
|
||||
export default ConfirmDialog
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
import ErrorAlert from "@/components/ErrorAlert"
|
||||
|
||||
export default ErrorAlert
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as ErrorAlert } from "@/components/shared/feedback/error-alert"
|
||||
export { default as ConfirmDialog } from "@/components/shared/feedback/confirm-dialog"
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { Search } from "lucide-react"
|
||||
|
||||
import { navCategories } from "@/app/router/nav-config"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
CommandDialog,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command"
|
||||
|
||||
export function CommandPalette() {
|
||||
const [open, setOpen] = useState(false)
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
const down = (event: KeyboardEvent) => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
|
||||
event.preventDefault()
|
||||
setOpen((value) => !value)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", down)
|
||||
return () => document.removeEventListener("keydown", down)
|
||||
}, [])
|
||||
|
||||
const commands = useMemo(
|
||||
() =>
|
||||
navCategories.flatMap((category) =>
|
||||
category.items.map((item) => ({
|
||||
id: item.id,
|
||||
group: category.title,
|
||||
label: item.title,
|
||||
path: item.path,
|
||||
Icon: item.icon,
|
||||
}))
|
||||
),
|
||||
[]
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="ghost" size="sm" onClick={() => setOpen(true)} className="gap-2">
|
||||
<Search className="h-4 w-4" />
|
||||
<span className="hidden md:inline">Поиск</span>
|
||||
<kbd className="hidden rounded border bg-muted px-1.5 text-[10px] font-medium text-muted-foreground md:inline-flex">
|
||||
Ctrl+K
|
||||
</kbd>
|
||||
</Button>
|
||||
<CommandDialog open={open} onOpenChange={setOpen}>
|
||||
<CommandInput placeholder="Поиск разделов..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>Ничего не найдено.</CommandEmpty>
|
||||
{["Главная", "Данные", "Управление", "Инструменты"].map((group) => (
|
||||
<CommandGroup key={group} heading={group}>
|
||||
{commands
|
||||
.filter((command) => command.group === group)
|
||||
.map((command) => (
|
||||
<CommandItem
|
||||
key={command.id}
|
||||
value={`${command.label} ${command.path}`}
|
||||
onSelect={() => {
|
||||
navigate(command.path)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<command.Icon className="mr-2 h-4 w-4" />
|
||||
<span>{command.label}</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
))}
|
||||
</CommandList>
|
||||
</CommandDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export { CommandPalette } from "@/components/shared/navigation/command-palette"
|
||||
export { default as PageHeaderActions } from "@/components/shared/navigation/page-header-actions"
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
import PageHeaderActions from "@/components/PageHeaderActions"
|
||||
|
||||
export default PageHeaderActions
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
import DataTable from "@/components/DataTable"
|
||||
|
||||
export default DataTable
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as DataTable } from "@/components/shared/table/data-table"
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
import { createContext, useContext, useEffect, useState } from "react"
|
||||
|
||||
type Theme = "dark" | "light" | "system"
|
||||
|
||||
type ThemeProviderProps = {
|
||||
children: React.ReactNode
|
||||
defaultTheme?: Theme
|
||||
storageKey?: string
|
||||
}
|
||||
|
||||
type ThemeProviderState = {
|
||||
theme: Theme
|
||||
setTheme: (theme: Theme) => void
|
||||
}
|
||||
|
||||
const initialState: ThemeProviderState = {
|
||||
theme: "system",
|
||||
setTheme: () => null,
|
||||
}
|
||||
|
||||
const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
defaultTheme = "system",
|
||||
storageKey = "vite-ui-theme",
|
||||
...props
|
||||
}: ThemeProviderProps) {
|
||||
const [theme, setTheme] = useState<Theme>(
|
||||
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement
|
||||
root.classList.remove("light", "dark")
|
||||
|
||||
if (theme === "system") {
|
||||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
root.classList.add(systemTheme)
|
||||
return
|
||||
}
|
||||
|
||||
root.classList.add(theme)
|
||||
}, [theme])
|
||||
|
||||
const value = {
|
||||
theme,
|
||||
setTheme: (value: Theme) => {
|
||||
localStorage.setItem(storageKey, value)
|
||||
setTheme(value)
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProviderContext.Provider {...props} value={value}>
|
||||
{children}
|
||||
</ThemeProviderContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const context = useContext(ThemeProviderContext)
|
||||
if (context === undefined) {
|
||||
throw new Error("useTheme must be used within a ThemeProvider")
|
||||
}
|
||||
return context
|
||||
}
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn(
|
||||
"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-action"
|
||||
className={cn("absolute top-2 right-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription, AlertAction }
|
||||
@@ -0,0 +1,49 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
||||
outline:
|
||||
"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot.Root : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
data-variant={variant}
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -0,0 +1,67 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot.Root : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,103 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import * as React from "react"
|
||||
import { Checkbox as CheckboxPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
|
||||
>
|
||||
<CheckIcon
|
||||
/>
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
@@ -0,0 +1,195 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Command as CommandPrimitive } from "cmdk"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
} from "@/components/ui/input-group"
|
||||
import { SearchIcon, CheckIcon } from "lucide-react"
|
||||
|
||||
function Command({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive>) {
|
||||
return (
|
||||
<CommandPrimitive
|
||||
data-slot="command"
|
||||
className={cn(
|
||||
"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandDialog({
|
||||
title = "Command Palette",
|
||||
description = "Search for a command to run...",
|
||||
children,
|
||||
className,
|
||||
showCloseButton = false,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Dialog> & {
|
||||
title?: string
|
||||
description?: string
|
||||
className?: string
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<Dialog {...props}>
|
||||
<DialogHeader className="sr-only">
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogContent
|
||||
className={cn(
|
||||
"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
|
||||
className
|
||||
)}
|
||||
showCloseButton={showCloseButton}
|
||||
>
|
||||
{children}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
||||
return (
|
||||
<div data-slot="command-input-wrapper" className="p-1 pb-0">
|
||||
<InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
|
||||
<CommandPrimitive.Input
|
||||
data-slot="command-input"
|
||||
className={cn(
|
||||
"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
<InputGroupAddon>
|
||||
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
||||
return (
|
||||
<CommandPrimitive.List
|
||||
data-slot="command-list"
|
||||
className={cn(
|
||||
"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandEmpty({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
||||
return (
|
||||
<CommandPrimitive.Empty
|
||||
data-slot="command-empty"
|
||||
className={cn("py-6 text-center text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
||||
return (
|
||||
<CommandPrimitive.Group
|
||||
data-slot="command-group"
|
||||
className={cn(
|
||||
"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
||||
return (
|
||||
<CommandPrimitive.Separator
|
||||
data-slot="command-separator"
|
||||
className={cn("-mx-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
||||
return (
|
||||
<CommandPrimitive.Item
|
||||
data-slot="command-item"
|
||||
className={cn(
|
||||
"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
|
||||
</CommandPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function CommandShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="command-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Command,
|
||||
CommandDialog,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandShortcut,
|
||||
CommandSeparator,
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Dialog as DialogPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close data-slot="dialog-close" asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-2 right-2"
|
||||
size="icon-sm"
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-none font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn(
|
||||
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CheckIcon, ChevronRightIcon } from "lucide-react"
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
align = "start",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
align={align}
|
||||
className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-checkbox-item-indicator"
|
||||
>
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-radio-item-indicator"
|
||||
>
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
|
||||
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-group"
|
||||
role="group"
|
||||
className={cn(
|
||||
"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const inputGroupAddonVariants = cva(
|
||||
"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
align: {
|
||||
"inline-start":
|
||||
"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
|
||||
"inline-end":
|
||||
"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
|
||||
"block-start":
|
||||
"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
|
||||
"block-end":
|
||||
"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
align: "inline-start",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function InputGroupAddon({
|
||||
className,
|
||||
align = "inline-start",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="input-group-addon"
|
||||
data-align={align}
|
||||
className={cn(inputGroupAddonVariants({ align }), className)}
|
||||
onClick={(e) => {
|
||||
if ((e.target as HTMLElement).closest("button")) {
|
||||
return
|
||||
}
|
||||
e.currentTarget.parentElement?.querySelector("input")?.focus()
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const inputGroupButtonVariants = cva(
|
||||
"flex items-center gap-2 text-sm shadow-none",
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
||||
sm: "",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
|
||||
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: "xs",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function InputGroupButton({
|
||||
className,
|
||||
type = "button",
|
||||
variant = "ghost",
|
||||
size = "xs",
|
||||
...props
|
||||
}: Omit<React.ComponentProps<typeof Button>, "size"> &
|
||||
VariantProps<typeof inputGroupButtonVariants>) {
|
||||
return (
|
||||
<Button
|
||||
type={type}
|
||||
data-size={size}
|
||||
variant={variant}
|
||||
className={cn(inputGroupButtonVariants({ size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="input-group-control"
|
||||
className={cn(
|
||||
"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputGroupTextarea({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<Textarea
|
||||
data-slot="input-group-control"
|
||||
className={cn(
|
||||
"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupButton,
|
||||
InputGroupText,
|
||||
InputGroupInput,
|
||||
InputGroupTextarea,
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -0,0 +1,53 @@
|
||||
import * as React from "react"
|
||||
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
data-orientation={orientation}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="relative flex-1 rounded-full bg-border"
|
||||
/>
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
@@ -0,0 +1,190 @@
|
||||
import * as React from "react"
|
||||
import { Select as SelectPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return (
|
||||
<SelectPrimitive.Group
|
||||
data-slot="select-group"
|
||||
className={cn("scroll-my-1 p-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "item-aligned",
|
||||
align = "center",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
data-align-trigger={position === "item-aligned"}
|
||||
className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
|
||||
position={position}
|
||||
align={align}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
data-position={position}
|
||||
className={cn(
|
||||
"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
|
||||
position === "popper" && ""
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="pointer-events-none" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
/>
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Separator as SeparatorPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
@@ -0,0 +1,145 @@
|
||||
import * as React from "react"
|
||||
import { Dialog as SheetPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||
}
|
||||
|
||||
function SheetTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||
}
|
||||
|
||||
function SheetClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||
}
|
||||
|
||||
function SheetPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||
}
|
||||
|
||||
function SheetOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||
return (
|
||||
<SheetPrimitive.Overlay
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = "right",
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||
side?: "top" | "right" | "bottom" | "left"
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
data-slot="sheet-content"
|
||||
data-side={side}
|
||||
className={cn(
|
||||
"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<SheetPrimitive.Close data-slot="sheet-close" asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-3 right-3"
|
||||
size="icon-sm"
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</Button>
|
||||
</SheetPrimitive.Close>
|
||||
)}
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn("flex flex-col gap-0.5 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn(
|
||||
"font-heading text-base font-medium text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
@@ -0,0 +1,49 @@
|
||||
"use client"
|
||||
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: (
|
||||
<CircleCheckIcon className="size-4" />
|
||||
),
|
||||
info: (
|
||||
<InfoIcon className="size-4" />
|
||||
),
|
||||
warning: (
|
||||
<TriangleAlertIcon className="size-4" />
|
||||
),
|
||||
error: (
|
||||
<OctagonXIcon className="size-4" />
|
||||
),
|
||||
loading: (
|
||||
<Loader2Icon className="size-4 animate-spin" />
|
||||
),
|
||||
}}
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
"--border-radius": "var(--radius)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast: "cn-toast",
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
@@ -0,0 +1,114 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="table-container"
|
||||
className="relative w-full overflow-x-auto"
|
||||
>
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn(
|
||||
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCaption({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"caption">) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Tabs as TabsPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
data-orientation={orientation}
|
||||
className={cn(
|
||||
"group/tabs flex gap-2 data-horizontal:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const tabsListVariants = cva(
|
||||
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
line: "gap-1 bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List> &
|
||||
VariantProps<typeof tabsListVariants>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
data-variant={variant}
|
||||
className={cn(tabsListVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
|
||||
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
|
||||
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 text-sm outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
||||
@@ -0,0 +1,18 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
@@ -0,0 +1,55 @@
|
||||
import * as React from "react"
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot="tooltip-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyAsnsManager from "@/ASNsNewManager"
|
||||
|
||||
export function AsnsPage() {
|
||||
return <LegacyAsnsManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyAutoUrlManager from "@/AutoUrlManager"
|
||||
|
||||
export function AutoUrlsPage() {
|
||||
return <LegacyAutoUrlManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyBillingManager from "@/BillingManager"
|
||||
|
||||
export function BillingPage() {
|
||||
return <LegacyBillingManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyCommunitiesManager from "@/CommunitiesManager"
|
||||
|
||||
export function CommunitiesPage() {
|
||||
return <LegacyCommunitiesManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import Dashboard from "@/Dashboard"
|
||||
|
||||
export function DashboardPage() {
|
||||
return <Dashboard />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyDomainsManager from "@/DomainsNewManager"
|
||||
|
||||
export function DomainsPage() {
|
||||
return <LegacyDomainsManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyEasySwitchManager from "@/EasySwitchManager"
|
||||
|
||||
export function EasySwitchPage() {
|
||||
return <LegacyEasySwitchManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import FilterManager from "@/FilterManager"
|
||||
|
||||
export function FiltersPage() {
|
||||
return <FilterManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyFirewallPage from "@/FirewallPage"
|
||||
|
||||
export function FirewallPage() {
|
||||
return <LegacyFirewallPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyInterfaceSpeedPage from "@/InterfaceSpeedTest"
|
||||
|
||||
export function InterfaceSpeedPage() {
|
||||
return <LegacyInterfaceSpeedPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyIpRangesManager from "@/IPRangesManager"
|
||||
|
||||
export function IpRangesPage() {
|
||||
return <LegacyIpRangesManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyMikrotikBackupsManager from "@/MikrotikBackupsManager"
|
||||
|
||||
export function MikrotikBackupsPage() {
|
||||
return <LegacyMikrotikBackupsManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyMikrotikToolsPage from "@/MikrotikTools"
|
||||
|
||||
export function MikrotikToolsPage() {
|
||||
return <LegacyMikrotikToolsPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyNetworkConfigPage from "@/NetworkConfigManager"
|
||||
|
||||
export function NetworkConfigPage() {
|
||||
return <LegacyNetworkConfigPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyNetworkMapPage from "@/NetworkMapDashboard"
|
||||
|
||||
export function NetworkMapPage() {
|
||||
return <LegacyNetworkMapPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyNetworkSchedulerPage from "@/NetworkMapSchedulerPage"
|
||||
|
||||
export function NetworkSchedulerPage() {
|
||||
return <LegacyNetworkSchedulerPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyOspfToolsPage from "@/OspfToolsPage"
|
||||
|
||||
export function OspfToolsPage() {
|
||||
return <LegacyOspfToolsPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyPingServicesManager from "@/PingServicesManager"
|
||||
|
||||
export function PingServicesPage() {
|
||||
return <LegacyPingServicesManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyResourceStatsPage from "@/ResourceStatsPage"
|
||||
|
||||
export function ResourceStatsPage() {
|
||||
return <LegacyResourceStatsPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyRouteOptimizerPage from "@/RouteOptimizerPage"
|
||||
|
||||
export function RouteOptimizerPage() {
|
||||
return <LegacyRouteOptimizerPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
type NotifyCallbacks = {
|
||||
onSuccess: () => void
|
||||
onError: () => void
|
||||
}
|
||||
|
||||
function fallbackCopy(text: string, callbacks: NotifyCallbacks) {
|
||||
const textArea = document.createElement("textarea")
|
||||
textArea.value = text
|
||||
document.body.appendChild(textArea)
|
||||
textArea.focus()
|
||||
textArea.select()
|
||||
|
||||
try {
|
||||
document.execCommand("copy")
|
||||
callbacks.onSuccess()
|
||||
} catch {
|
||||
callbacks.onError()
|
||||
} finally {
|
||||
document.body.removeChild(textArea)
|
||||
}
|
||||
}
|
||||
|
||||
export async function copyTextToClipboard(text: string, callbacks: NotifyCallbacks) {
|
||||
if (navigator.clipboard) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
callbacks.onSuccess()
|
||||
return
|
||||
} catch {
|
||||
// fallback below
|
||||
}
|
||||
}
|
||||
|
||||
fallbackCopy(text, callbacks)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
export function countryToFlag(isoCode?: string | null): string {
|
||||
if (!isoCode) return ""
|
||||
|
||||
return isoCode
|
||||
.toUpperCase()
|
||||
.replace(/./g, (char) => String.fromCodePoint(127397 + char.charCodeAt(0)))
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
type UrlSettings = {
|
||||
baseUrl: string
|
||||
[key: string]: string
|
||||
}
|
||||
|
||||
type ServerLike = {
|
||||
id?: string
|
||||
ip?: string
|
||||
extIp?: string
|
||||
internalIp?: string
|
||||
dns?: string
|
||||
country?: string
|
||||
provider?: string
|
||||
type?: string
|
||||
tunnel?: string
|
||||
}
|
||||
|
||||
export function generateServerUrl(urlSettings: UrlSettings, server: ServerLike): string {
|
||||
const params = new URLSearchParams()
|
||||
|
||||
Object.entries(urlSettings).forEach(([key, value]) => {
|
||||
if (key !== "baseUrl" && value) {
|
||||
params.append(key, value)
|
||||
}
|
||||
})
|
||||
|
||||
if (server.ip) {
|
||||
params.append("server", server.ip)
|
||||
}
|
||||
|
||||
return `${urlSettings.baseUrl}?${params.toString()}`
|
||||
}
|
||||
|
||||
export function buildServersCsv(servers: ServerLike[], urlSettings: UrlSettings): string {
|
||||
return [
|
||||
["ID", "IP", "Ext IP", "Internal IP", "DNS", "Country", "Provider", "Type", "Tunnel", "Generated URL"],
|
||||
...servers.map((server) => [
|
||||
server.id || "",
|
||||
server.ip || "",
|
||||
server.extIp || "",
|
||||
server.internalIp || "",
|
||||
server.dns || "",
|
||||
server.country || "",
|
||||
server.provider || "",
|
||||
server.type || "",
|
||||
server.tunnel || "",
|
||||
generateServerUrl(urlSettings, server),
|
||||
]),
|
||||
]
|
||||
.map((row) => row.map((cell) => `"${cell}"`).join(","))
|
||||
.join("\n")
|
||||
}
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
export type ServerRecord = {
|
||||
id?: string
|
||||
ip?: string
|
||||
dns?: string
|
||||
country?: string
|
||||
provider?: string
|
||||
type?: string
|
||||
tunnel?: string
|
||||
groupKey?: string | null
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
export type ServerFilters = {
|
||||
country: string
|
||||
provider: string
|
||||
type: string
|
||||
tunnel: string
|
||||
}
|
||||
|
||||
export type ServerDisplayItem =
|
||||
| { type: "server"; server: ServerRecord }
|
||||
| { type: "group"; groupKey: string; servers: ServerRecord[] }
|
||||
|
||||
function normalizeText(value: unknown): string {
|
||||
return String(value ?? "").toLowerCase()
|
||||
}
|
||||
|
||||
function compareValues(a: unknown, b: unknown): number {
|
||||
const aText = normalizeText(a)
|
||||
const bText = normalizeText(b)
|
||||
|
||||
if (aText < bText) return -1
|
||||
if (aText > bText) return 1
|
||||
return 0
|
||||
}
|
||||
|
||||
export function filterAndSortServers(
|
||||
servers: ServerRecord[],
|
||||
filters: ServerFilters,
|
||||
searchTerm: string,
|
||||
sortField: string,
|
||||
sortOrder: "asc" | "desc",
|
||||
): ServerRecord[] {
|
||||
let result = [...servers]
|
||||
|
||||
if (filters.country) {
|
||||
result = result.filter((server) => server.country === filters.country)
|
||||
}
|
||||
if (filters.provider) {
|
||||
result = result.filter((server) => server.provider === filters.provider)
|
||||
}
|
||||
if (filters.type) {
|
||||
result = result.filter((server) => server.type === filters.type)
|
||||
}
|
||||
if (filters.tunnel) {
|
||||
result = result.filter((server) => server.tunnel === filters.tunnel)
|
||||
}
|
||||
|
||||
if (searchTerm) {
|
||||
const term = searchTerm.toLowerCase()
|
||||
result = result.filter((server) => {
|
||||
return (
|
||||
normalizeText(server.ip).includes(term) ||
|
||||
normalizeText(server.dns).includes(term) ||
|
||||
normalizeText(server.country).includes(term) ||
|
||||
normalizeText(server.provider).includes(term) ||
|
||||
normalizeText(server.type).includes(term)
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
result.sort((a, b) => {
|
||||
const comparison = compareValues(a[sortField], b[sortField])
|
||||
return sortOrder === "asc" ? comparison : comparison * -1
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
export function buildDisplayItems(filteredServers: ServerRecord[]): ServerDisplayItem[] {
|
||||
const keyToServers: Record<string, ServerRecord[]> = {}
|
||||
|
||||
filteredServers.forEach((server) => {
|
||||
const key = (server.groupKey && String(server.groupKey).trim()) || null
|
||||
if (!key) return
|
||||
|
||||
if (!keyToServers[key]) keyToServers[key] = []
|
||||
keyToServers[key].push(server)
|
||||
})
|
||||
|
||||
const seenKeys = new Set<string>()
|
||||
const items: ServerDisplayItem[] = []
|
||||
|
||||
for (const server of filteredServers) {
|
||||
const key = (server.groupKey && String(server.groupKey).trim()) || null
|
||||
if (!key) {
|
||||
items.push({ type: "server", server })
|
||||
continue
|
||||
}
|
||||
|
||||
if (seenKeys.has(key)) continue
|
||||
seenKeys.add(key)
|
||||
|
||||
const groupServers = keyToServers[key] || []
|
||||
if (groupServers.length >= 2) {
|
||||
items.push({ type: "group", groupKey: key, servers: groupServers })
|
||||
} else if (groupServers.length === 1) {
|
||||
items.push({ type: "server", server: groupServers[0] })
|
||||
}
|
||||
}
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import type { ServerDisplayItem, ServerRecord } from "@/features/servers/lib/server-list"
|
||||
|
||||
type PaginationInput = {
|
||||
viewMode: "cards" | "table"
|
||||
currentPage: number
|
||||
pageSize: number
|
||||
displayItems: ServerDisplayItem[]
|
||||
filteredServers: ServerRecord[]
|
||||
}
|
||||
|
||||
export type ServerPaginationResult = {
|
||||
totalPagesCards: number
|
||||
totalPagesTable: number
|
||||
totalPages: number
|
||||
paginatedDisplayItems: ServerDisplayItem[]
|
||||
paginatedServers: ServerRecord[]
|
||||
totalItemsCount: number
|
||||
}
|
||||
|
||||
export function getServerPagination({
|
||||
viewMode,
|
||||
currentPage,
|
||||
pageSize,
|
||||
displayItems,
|
||||
filteredServers,
|
||||
}: PaginationInput): ServerPaginationResult {
|
||||
const totalPagesCards = Math.ceil(displayItems.length / pageSize)
|
||||
const totalPagesTable = Math.ceil(filteredServers.length / pageSize)
|
||||
const totalPages = viewMode === "cards" ? totalPagesCards : totalPagesTable
|
||||
|
||||
const from = (currentPage - 1) * pageSize
|
||||
const to = currentPage * pageSize
|
||||
|
||||
const paginatedDisplayItems = displayItems.slice(from, to)
|
||||
const paginatedServers = filteredServers.slice(from, to)
|
||||
const totalItemsCount = viewMode === "cards" ? displayItems.length : filteredServers.length
|
||||
|
||||
return {
|
||||
totalPagesCards,
|
||||
totalPagesTable,
|
||||
totalPages,
|
||||
paginatedDisplayItems,
|
||||
paginatedServers,
|
||||
totalItemsCount,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
export const defaultServerUrlSettings = {
|
||||
baseUrl: "https://functions.yandexcloud.net/d4eno3im0qgsr4tj5hdo",
|
||||
cloudflare_gateway: "SWE-IHOR",
|
||||
bunny_gateway: "SWE-IHOR",
|
||||
fastly_gateway: "SWE-IHOR",
|
||||
telegram_gateway: "94.142.140.1",
|
||||
hetzner_gateway: "94.142.140.1",
|
||||
type: "routes",
|
||||
version: "v4.rsc",
|
||||
}
|
||||
|
||||
export const serverUrlPresets = {
|
||||
default: defaultServerUrlSettings,
|
||||
cloudflareSWE: {
|
||||
baseUrl: "https://cf.example/api",
|
||||
cloudflare_gateway: "SWE-IHOR",
|
||||
bunny_gateway: "",
|
||||
fastly_gateway: "",
|
||||
telegram_gateway: "",
|
||||
hetzner_gateway: "",
|
||||
type: "routes",
|
||||
version: "v4.rsc",
|
||||
},
|
||||
hetznerDE: {
|
||||
baseUrl: "https://hetzner.example/api",
|
||||
cloudflare_gateway: "",
|
||||
bunny_gateway: "",
|
||||
fastly_gateway: "",
|
||||
telegram_gateway: "",
|
||||
hetzner_gateway: "94.142.140.1",
|
||||
type: "routes",
|
||||
version: "v4.rsc",
|
||||
},
|
||||
}
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
import { useState } from "react"
|
||||
|
||||
type ServerLike = {
|
||||
ip?: string
|
||||
}
|
||||
|
||||
export function useServerSelection(filteredServers: ServerLike[]) {
|
||||
const [selectedServers, setSelectedServers] = useState<Set<string>>(new Set())
|
||||
|
||||
const toggleServerSelection = (server: ServerLike) => {
|
||||
const serverIp = server.ip
|
||||
if (!serverIp) return
|
||||
|
||||
const next = new Set(selectedServers)
|
||||
if (next.has(serverIp)) {
|
||||
next.delete(serverIp)
|
||||
} else {
|
||||
next.add(serverIp)
|
||||
}
|
||||
setSelectedServers(next)
|
||||
}
|
||||
|
||||
const toggleGroupSelection = (servers: ServerLike[], selectAll: boolean) => {
|
||||
setSelectedServers((prev) => {
|
||||
const next = new Set(prev)
|
||||
servers.forEach((server) => {
|
||||
const serverIp = server.ip
|
||||
if (!serverIp) return
|
||||
if (selectAll) next.add(serverIp)
|
||||
else next.delete(serverIp)
|
||||
})
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const selectAllServers = () => {
|
||||
if (selectedServers.size === filteredServers.length) {
|
||||
setSelectedServers(new Set())
|
||||
return
|
||||
}
|
||||
|
||||
const allServerIps = filteredServers.map((server) => server.ip).filter(Boolean) as string[]
|
||||
setSelectedServers(new Set(allServerIps))
|
||||
}
|
||||
|
||||
const clearSelection = () => {
|
||||
setSelectedServers(new Set())
|
||||
}
|
||||
|
||||
return {
|
||||
selectedServers,
|
||||
setSelectedServers,
|
||||
toggleServerSelection,
|
||||
toggleGroupSelection,
|
||||
selectAllServers,
|
||||
clearSelection,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyServerManager from "@/ServerManager"
|
||||
|
||||
export function ServerManager() {
|
||||
return <LegacyServerManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import { ServerManager } from "@/features/servers/ui/server-manager"
|
||||
|
||||
export function ServersPage() {
|
||||
return <ServerManager />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacySettingsPage from "@/SettingsPage"
|
||||
|
||||
export function SettingsPage() {
|
||||
return <LegacySettingsPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyTrafficPage from "@/TrafficDashboard"
|
||||
|
||||
export function TrafficPage() {
|
||||
return <LegacyTrafficPage />
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import LegacyUptimeMonitorPage from "@/UptimeMonitorPage"
|
||||
|
||||
export function UptimeMonitorPage() {
|
||||
return <LegacyUptimeMonitorPage />
|
||||
}
|
||||
|
||||
@@ -1,3 +1,88 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@import "@fontsource-variable/geist";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Using Bootstrap styles, this file can be empty or used for custom global styles. */
|
||||
|
||||
/* Sticky footer helpers */
|
||||
@@ -45,6 +130,38 @@
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
/* ===== Improved Typography ===== */
|
||||
@@ -492,3 +609,15 @@ button:focus-visible,
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline { --font-heading: var(--font-sans); --font-sans: 'Geist Variable', sans-serif; --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6); }
|
||||
|
||||
.dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); }
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50; }
|
||||
body {
|
||||
@apply bg-background text-foreground; }
|
||||
html {
|
||||
@apply font-sans; } }
|
||||
@@ -0,0 +1,37 @@
|
||||
import { useState } from "react"
|
||||
import { Outlet } from "react-router-dom"
|
||||
|
||||
import { navCategories } from "@/app/router/nav-config"
|
||||
import { SidebarLayout } from "@/layouts/SidebarLayout"
|
||||
import { TopbarLayout } from "@/layouts/TopbarLayout"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
|
||||
|
||||
export function AppShell() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<TopbarLayout onOpenMobileMenu={() => setMobileOpen(true)} />
|
||||
<div className="grid min-h-[calc(100vh-3.5rem)] grid-cols-1 md:grid-cols-[18rem_1fr]">
|
||||
<aside className="hidden border-r md:block">
|
||||
<ScrollArea className="h-[calc(100vh-3.5rem)] p-3">
|
||||
<SidebarLayout categories={navCategories} />
|
||||
</ScrollArea>
|
||||
</aside>
|
||||
<main className="p-4 md:p-6">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
||||
<SheetContent side="left" className="w-[90vw] max-w-sm p-0">
|
||||
<SheetTitle className="sr-only">Навигация</SheetTitle>
|
||||
<ScrollArea className="h-full p-4">
|
||||
<SidebarLayout categories={navCategories} onNavigate={() => setMobileOpen(false)} />
|
||||
</ScrollArea>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import { Link, useLocation } from "react-router-dom"
|
||||
|
||||
import type { NavCategory } from "@/app/router/nav-config"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type SidebarLayoutProps = {
|
||||
categories: NavCategory[]
|
||||
onNavigate?: () => void
|
||||
}
|
||||
|
||||
export function SidebarLayout({ categories, onNavigate }: SidebarLayoutProps) {
|
||||
const location = useLocation()
|
||||
|
||||
return (
|
||||
<nav className="space-y-4">
|
||||
{categories.map((category) => (
|
||||
<section key={category.id} className="space-y-1">
|
||||
<p className="px-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{category.title}
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
{category.items.map((item) => {
|
||||
const active = location.pathname.startsWith(item.path)
|
||||
const Icon = item.icon
|
||||
return (
|
||||
<Link
|
||||
key={item.id}
|
||||
to={item.path}
|
||||
onClick={onNavigate}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors",
|
||||
active
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
)}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
<span>{item.title}</span>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Link } from "react-router-dom"
|
||||
import { Menu, Settings } from "lucide-react"
|
||||
|
||||
import { ModeToggle } from "@/components/mode-toggle"
|
||||
import { CommandPalette } from "@/components/shared/navigation/command-palette"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
|
||||
type TopbarLayoutProps = {
|
||||
title?: string
|
||||
onOpenMobileMenu: () => void
|
||||
}
|
||||
|
||||
export function TopbarLayout({ title = "RouterOS Manager", onOpenMobileMenu }: TopbarLayoutProps) {
|
||||
return (
|
||||
<header className="sticky top-0 z-30 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/70">
|
||||
<div className="flex h-14 items-center gap-2 px-4">
|
||||
<Button variant="outline" size="icon" className="md:hidden" onClick={onOpenMobileMenu}>
|
||||
<Menu className="h-4 w-4" />
|
||||
<span className="sr-only">Открыть меню</span>
|
||||
</Button>
|
||||
<Link to="/dashboard" className="text-sm font-semibold">
|
||||
{title}
|
||||
</Link>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<CommandPalette />
|
||||
<ModeToggle />
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
<Button variant="ghost" size="icon" asChild>
|
||||
<Link to="/settings" aria-label="Настройки">
|
||||
<Settings className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user