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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<!-- Удалён импорт Tabler JS, теперь он импортируется в main.jsx -->
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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/core": "^6.3.1",
|
||||||
"@dnd-kit/sortable": "^10.0.0",
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
"@dnd-kit/utilities": "^3.2.2",
|
"@dnd-kit/utilities": "^3.2.2",
|
||||||
"@tabler/core": "^1.3.2",
|
"@fontsource-variable/geist": "^5.2.8",
|
||||||
"@tabler/icons-react": "^3.34.0",
|
"@tailwindcss/vite": "^4.2.4",
|
||||||
"@tanstack/react-query": "^5.56.2",
|
"@tanstack/react-query": "^5.56.2",
|
||||||
"@tanstack/react-virtual": "^3.10.8",
|
"@tanstack/react-virtual": "^3.10.8",
|
||||||
"@xyflow/react": "^12.3.4",
|
"@xyflow/react": "^12.3.4",
|
||||||
"axios": "^1.10.0",
|
"axios": "^1.10.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"cmdk": "^1.1.1",
|
||||||
"diff": "^8.0.3",
|
"diff": "^8.0.3",
|
||||||
|
"lucide-react": "^1.11.0",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
|
"radix-ui": "^1.4.3",
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0",
|
"react-dom": "^19.1.0",
|
||||||
"react-icons": "^5.5.0",
|
"react-icons": "^5.5.0",
|
||||||
"react-router-dom": "^6.30.1",
|
"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": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.29.0",
|
"@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,
|
IconArrowUp,
|
||||||
IconArrowDown,
|
IconArrowDown,
|
||||||
IconCopy
|
IconCopy
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
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 PageHeader from './components/PageHeader.jsx';
|
||||||
import EmptyState from './components/EmptyState.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 WsUpdateModal from './components/WsUpdateModal.jsx';
|
||||||
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
||||||
import HistoryModal from './components/HistoryModal.jsx';
|
import HistoryModal from './components/HistoryModal.jsx';
|
||||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
|
||||||
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
|
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
|
||||||
import ImportModal from './components/ImportModal.jsx';
|
import ImportModal from './components/ImportModal.jsx';
|
||||||
import QuickAddBar from './components/QuickAddBar.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,
|
IconSortAscending,
|
||||||
IconSortDescending,
|
IconSortDescending,
|
||||||
IconX
|
IconX
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import PageHeader from './components/PageHeader.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
import TableSkeleton from './components/TableSkeleton.jsx';
|
import TableSkeleton from './components/TableSkeleton.jsx';
|
||||||
import EmptyState from './components/EmptyState.jsx';
|
import EmptyState from './components/EmptyState.jsx';
|
||||||
import ImportModal from './components/ImportModal.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';
|
import LastSaved from './components/LastSaved.jsx';
|
||||||
|
|
||||||
function AutoUrlManager() {
|
function AutoUrlManager() {
|
||||||
|
|||||||
@@ -5,11 +5,11 @@ import FormModal from './components/FormModal.jsx';
|
|||||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||||
import Pagination from './components/Pagination.jsx';
|
import Pagination from './components/Pagination.jsx';
|
||||||
import PageHeader from './components/PageHeader.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 FormField from './components/FormField.jsx';
|
||||||
import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
|
import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
|
||||||
import PurposeSelectInput, { PURPOSES as PURPOSE_OPTIONS } from './components/PurposeSelectInput.jsx';
|
import PurposeSelectInput, { PURPOSES as PURPOSE_OPTIONS } from './components/PurposeSelectInput.jsx';
|
||||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
import { ErrorAlert } from '@/components/shared/feedback';
|
||||||
import {
|
import {
|
||||||
IconPlus,
|
IconPlus,
|
||||||
IconEdit,
|
IconEdit,
|
||||||
@@ -37,7 +37,7 @@ import {
|
|||||||
IconClock,
|
IconClock,
|
||||||
IconLayoutGrid,
|
IconLayoutGrid,
|
||||||
IconList
|
IconList
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
import BulkActionsBar from './components/BulkActionsBar.jsx';
|
||||||
import { BillingCard } from './components/billing/index.js';
|
import { BillingCard } from './components/billing/index.js';
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ import {
|
|||||||
IconDownload,
|
IconDownload,
|
||||||
IconDeviceFloppy,
|
IconDeviceFloppy,
|
||||||
IconPlugConnected
|
IconPlugConnected
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import PageHeader from './components/PageHeader.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
import PortalDropdown from './components/PortalDropdown.jsx';
|
import PortalDropdown from './components/PortalDropdown.jsx';
|
||||||
import EmptyState from './components/EmptyState.jsx';
|
import EmptyState from './components/EmptyState.jsx';
|
||||||
@@ -27,7 +27,7 @@ import SavedFilters from './components/SavedFilters.jsx';
|
|||||||
import FormModal from './components/FormModal.jsx';
|
import FormModal from './components/FormModal.jsx';
|
||||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||||
import FormField from './components/FormField.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 Pagination from './components/Pagination.jsx';
|
||||||
import IconPicker from './components/IconPicker.jsx';
|
import IconPicker from './components/IconPicker.jsx';
|
||||||
import { getIconById } from './lib/brandIcons.js';
|
import { getIconById } from './lib/brandIcons.js';
|
||||||
|
|||||||
@@ -13,8 +13,8 @@ import {
|
|||||||
IconDownload,
|
IconDownload,
|
||||||
IconUpload,
|
IconUpload,
|
||||||
IconAlertTriangle
|
IconAlertTriangle
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import ConfirmDialog from './components/ConfirmDialog.jsx'
|
import { ConfirmDialog } from '@/components/shared/feedback'
|
||||||
|
|
||||||
const API_URL = '/api';
|
const API_URL = '/api';
|
||||||
|
|
||||||
|
|||||||
@@ -25,17 +25,16 @@ import {
|
|||||||
IconArrowUp,
|
IconArrowUp,
|
||||||
IconArrowDown,
|
IconArrowDown,
|
||||||
IconCopy
|
IconCopy
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||||||
import PageHeader from './components/PageHeader.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
import EmptyState from './components/EmptyState.jsx';
|
import EmptyState from './components/EmptyState.jsx';
|
||||||
import { IconAlertTriangle } from '@tabler/icons-react';
|
import { IconAlertTriangle } from '@/lib/icons';
|
||||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
import { PageHeaderActions } from '@/components/shared/navigation';
|
||||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
import { ConfirmDialog, ErrorAlert } from '@/components/shared/feedback';
|
||||||
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
import WsUpdateModal from './components/WsUpdateModal.jsx';
|
||||||
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
||||||
import HistoryModal from './components/HistoryModal.jsx';
|
import HistoryModal from './components/HistoryModal.jsx';
|
||||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
|
||||||
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
|
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
|
||||||
import ImportModal from './components/ImportModal.jsx';
|
import ImportModal from './components/ImportModal.jsx';
|
||||||
import QuickAddBar from './components/QuickAddBar.jsx';
|
import QuickAddBar from './components/QuickAddBar.jsx';
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ import {
|
|||||||
IconBolt,
|
IconBolt,
|
||||||
IconChevronDown,
|
IconChevronDown,
|
||||||
IconChevronUp
|
IconChevronUp
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import PageHeader from './components/PageHeader.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
|
|
||||||
// Функция для получения флага по коду страны
|
// Функция для получения флага по коду страны
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||||
import { Link, useLocation } from 'react-router-dom';
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
import api from './lib/api.js';
|
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 FormModal from './components/FormModal.jsx';
|
||||||
import ConfirmModal from './components/ConfirmModal.jsx';
|
import ConfirmModal from './components/ConfirmModal.jsx';
|
||||||
import FormField from './components/FormField.jsx';
|
import FormField from './components/FormField.jsx';
|
||||||
@@ -28,7 +28,7 @@ import {
|
|||||||
IconSortDescending,
|
IconSortDescending,
|
||||||
IconFileText,
|
IconFileText,
|
||||||
IconGripVertical
|
IconGripVertical
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import {
|
import {
|
||||||
DndContext,
|
DndContext,
|
||||||
closestCenter,
|
closestCenter,
|
||||||
|
|||||||
@@ -3,12 +3,11 @@ import api from './lib/api.js';
|
|||||||
import PageHeader from './components/PageHeader.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
||||||
import EmptyState from './components/EmptyState.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 ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
|
||||||
import Pagination from './components/Pagination.jsx';
|
import Pagination from './components/Pagination.jsx';
|
||||||
import Tooltip from './components/Tooltip.jsx';
|
import Tooltip from './components/Tooltip.jsx';
|
||||||
import Modal from './components/Modal.jsx';
|
import Modal from './components/Modal.jsx';
|
||||||
import ConfirmDialog from './components/ConfirmDialog.jsx';
|
|
||||||
import {
|
import {
|
||||||
IconShield,
|
IconShield,
|
||||||
IconRefresh,
|
IconRefresh,
|
||||||
|
|||||||
@@ -23,16 +23,15 @@ import {
|
|||||||
IconNetwork,
|
IconNetwork,
|
||||||
IconCopy,
|
IconCopy,
|
||||||
IconCopyCheck
|
IconCopyCheck
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
|
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 PageHeader from './components/PageHeader.jsx';
|
||||||
import EmptyState from './components/EmptyState.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 WsUpdateModal from './components/WsUpdateModal.jsx';
|
||||||
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
|
||||||
import HistoryModal from './components/HistoryModal.jsx';
|
import HistoryModal from './components/HistoryModal.jsx';
|
||||||
import ErrorAlert from './components/ErrorAlert.jsx';
|
|
||||||
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
|
import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
|
||||||
import ImportModal from './components/ImportModal.jsx';
|
import ImportModal from './components/ImportModal.jsx';
|
||||||
import QuickAddBar from './components/QuickAddBar.jsx';
|
import QuickAddBar from './components/QuickAddBar.jsx';
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import PageHeader from './components/PageHeader.jsx';
|
|||||||
import TableSkeleton from './components/TableSkeleton.jsx';
|
import TableSkeleton from './components/TableSkeleton.jsx';
|
||||||
import EmptyState from './components/EmptyState.jsx';
|
import EmptyState from './components/EmptyState.jsx';
|
||||||
import Tooltip from './components/Tooltip.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 { LargeModal, FullscreenModal } from './components/Modal.jsx';
|
||||||
import { countryToFlag } from './utils/serverUtils.js';
|
import { countryToFlag } from './utils/serverUtils.js';
|
||||||
import {
|
import {
|
||||||
@@ -17,7 +17,7 @@ import {
|
|||||||
IconDownload,
|
IconDownload,
|
||||||
IconCopy,
|
IconCopy,
|
||||||
IconSearch,
|
IconSearch,
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Строит две колонки строк для side-by-side diff (как git diff).
|
* Строит две колонки строк для side-by-side diff (как git diff).
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ import {
|
|||||||
IconLock,
|
IconLock,
|
||||||
IconChevronDown,
|
IconChevronDown,
|
||||||
IconChevronUp,
|
IconChevronUp,
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Менеджер сетевых настроек
|
* Менеджер сетевых настроек
|
||||||
|
|||||||
@@ -7,12 +7,12 @@ import {
|
|||||||
IconDeviceFloppy,
|
IconDeviceFloppy,
|
||||||
IconCloud,
|
IconCloud,
|
||||||
IconSearch,
|
IconSearch,
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import PageHeader from './components/PageHeader.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
import FormModal from './components/FormModal.jsx';
|
import FormModal from './components/FormModal.jsx';
|
||||||
import FormField from './components/FormField.jsx';
|
import FormField from './components/FormField.jsx';
|
||||||
import ConfirmModal from './components/ConfirmModal.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 IconPicker from './components/IconPicker.jsx';
|
||||||
import { getIconById } from './lib/brandIcons.js';
|
import { getIconById } from './lib/brandIcons.js';
|
||||||
|
|
||||||
|
|||||||
+40
-183
@@ -1,6 +1,6 @@
|
|||||||
import { useState, useEffect, useMemo } from 'react';
|
import { useState, useEffect, useMemo } from 'react';
|
||||||
import api from './lib/api.js';
|
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 ConfirmModal from './components/ConfirmModal.jsx';
|
||||||
import FormModal from './components/FormModal.jsx';
|
import FormModal from './components/FormModal.jsx';
|
||||||
import FormField from './components/FormField.jsx';
|
import FormField from './components/FormField.jsx';
|
||||||
@@ -19,8 +19,15 @@ import {
|
|||||||
IconSquare,
|
IconSquare,
|
||||||
IconSquareCheck,
|
IconSquareCheck,
|
||||||
IconChevronRight
|
IconChevronRight
|
||||||
} from '@tabler/icons-react';
|
} from '@/lib/icons';
|
||||||
import GraphView from './GraphView';
|
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 {
|
import {
|
||||||
normalizeGateways,
|
normalizeGateways,
|
||||||
needsGateways as NEEDS_GATEWAYS,
|
needsGateways as NEEDS_GATEWAYS,
|
||||||
@@ -35,20 +42,10 @@ import {
|
|||||||
ServerBulkActions
|
ServerBulkActions
|
||||||
} from './components/server/index.js';
|
} from './components/server/index.js';
|
||||||
import PageHeader from './components/PageHeader.jsx';
|
import PageHeader from './components/PageHeader.jsx';
|
||||||
import PageHeaderActions from './components/PageHeaderActions.jsx';
|
import { PageHeaderActions } from '@/components/shared/navigation';
|
||||||
|
|
||||||
const API_URL = '/api';
|
const API_URL = '/api';
|
||||||
|
|
||||||
// Преобразование кода страны в emoji-флаг
|
|
||||||
function countryToFlag(isoCode) {
|
|
||||||
if (!isoCode) return '';
|
|
||||||
return isoCode
|
|
||||||
.toUpperCase()
|
|
||||||
.replace(/./g, char =>
|
|
||||||
String.fromCodePoint(127397 + char.charCodeAt())
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ServerManager() {
|
function ServerManager() {
|
||||||
const notify = useNotify();
|
const notify = useNotify();
|
||||||
|
|
||||||
@@ -77,9 +74,6 @@ function ServerManager() {
|
|||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const pageSize = 20;
|
const pageSize = 20;
|
||||||
|
|
||||||
// === Выбор (bulk selection) ===
|
|
||||||
const [selectedServers, setSelectedServers] = useState(new Set());
|
|
||||||
|
|
||||||
// === Модальные окна ===
|
// === Модальные окна ===
|
||||||
const [addServerModalOpen, setAddServerModalOpen] = useState(false);
|
const [addServerModalOpen, setAddServerModalOpen] = useState(false);
|
||||||
const [editModalOpen, setEditModalOpen] = useState(false);
|
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||||
@@ -95,16 +89,7 @@ function ServerManager() {
|
|||||||
const [modalError, setModalError] = useState('');
|
const [modalError, setModalError] = useState('');
|
||||||
|
|
||||||
// === URL Settings ===
|
// === URL Settings ===
|
||||||
const [urlSettings, setUrlSettings] = useState({
|
const [urlSettings, setUrlSettings] = useState(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'
|
|
||||||
});
|
|
||||||
|
|
||||||
// === Связи ===
|
// === Связи ===
|
||||||
const [newConnection, setNewConnection] = useState({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
|
const [newConnection, setNewConnection] = useState({ from: '', to: '', tunnelType: 'GRE', ipA: '', ipB: '' });
|
||||||
@@ -114,12 +99,6 @@ function ServerManager() {
|
|||||||
const [graphCountryFilter, setGraphCountryFilter] = useState('');
|
const [graphCountryFilter, setGraphCountryFilter] = useState('');
|
||||||
const [graphProviderFilter, setGraphProviderFilter] = 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 ===
|
// === Helpers ===
|
||||||
const normalizeServerType = (type) => {
|
const normalizeServerType = (type) => {
|
||||||
const value = String(type || '').toLowerCase();
|
const value = String(type || '').toLowerCase();
|
||||||
@@ -225,82 +204,27 @@ function ServerManager() {
|
|||||||
|
|
||||||
// === Фильтрация и сортировка ===
|
// === Фильтрация и сортировка ===
|
||||||
const filteredServers = useMemo(() => {
|
const filteredServers = useMemo(() => {
|
||||||
let result = [...servers];
|
return filterAndSortServers(servers, filters, searchTerm, sortField, sortOrder);
|
||||||
|
|
||||||
// Применяем фильтры
|
|
||||||
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;
|
|
||||||
}, [servers, filters, searchTerm, sortField, sortOrder]);
|
}, [servers, filters, searchTerm, sortField, sortOrder]);
|
||||||
|
|
||||||
// Элементы для отображения: серверы с одинаковым groupKey (и type home) объединяются в одну карточку
|
// Элементы для отображения: серверы с одинаковым groupKey (и type home) объединяются в одну карточку
|
||||||
const displayItems = useMemo(() => {
|
const displayItems = useMemo(() => {
|
||||||
const keyToServers = {};
|
return buildDisplayItems(filteredServers);
|
||||||
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;
|
|
||||||
}, [filteredServers]);
|
}, [filteredServers]);
|
||||||
|
|
||||||
// === Пагинация ===
|
// === Пагинация ===
|
||||||
const totalPagesCards = Math.ceil(displayItems.length / pageSize);
|
const {
|
||||||
const totalPagesTable = Math.ceil(filteredServers.length / pageSize);
|
totalPages,
|
||||||
const totalPages = viewMode === 'cards' ? totalPagesCards : totalPagesTable;
|
paginatedDisplayItems,
|
||||||
const paginatedDisplayItems = displayItems.slice((currentPage - 1) * pageSize, currentPage * pageSize);
|
paginatedServers,
|
||||||
const paginatedServers = filteredServers.slice((currentPage - 1) * pageSize, currentPage * pageSize);
|
totalItemsCount,
|
||||||
const totalItemsCount = viewMode === 'cards' ? displayItems.length : filteredServers.length;
|
} = getServerPagination({
|
||||||
|
viewMode,
|
||||||
|
currentPage,
|
||||||
|
pageSize,
|
||||||
|
displayItems,
|
||||||
|
filteredServers,
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentPage > totalPages && totalPages >= 1) setCurrentPage(1);
|
if (currentPage > totalPages && totalPages >= 1) setCurrentPage(1);
|
||||||
@@ -323,38 +247,14 @@ function ServerManager() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// === Selection ===
|
// === Selection ===
|
||||||
const toggleServerSelection = (server) => {
|
const {
|
||||||
const newSet = new Set(selectedServers);
|
selectedServers,
|
||||||
if (newSet.has(server.ip)) {
|
setSelectedServers,
|
||||||
newSet.delete(server.ip);
|
toggleServerSelection,
|
||||||
} else {
|
toggleGroupSelection,
|
||||||
newSet.add(server.ip);
|
selectAllServers,
|
||||||
}
|
clearSelection,
|
||||||
setSelectedServers(newSet);
|
} = useServerSelection(filteredServers);
|
||||||
};
|
|
||||||
|
|
||||||
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());
|
|
||||||
};
|
|
||||||
|
|
||||||
// === CRUD Operations ===
|
// === CRUD Operations ===
|
||||||
const handleOpenAddServerModal = () => {
|
const handleOpenAddServerModal = () => {
|
||||||
@@ -492,14 +392,7 @@ function ServerManager() {
|
|||||||
|
|
||||||
// === URL Generation ===
|
// === URL Generation ===
|
||||||
const generateServerUrl = (server) => {
|
const generateServerUrl = (server) => {
|
||||||
const params = new URLSearchParams();
|
return buildServerUrl(urlSettings, server);
|
||||||
Object.entries(urlSettings).forEach(([key, value]) => {
|
|
||||||
if (key !== 'baseUrl' && value) {
|
|
||||||
params.append(key, value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
params.append('server', server.ip);
|
|
||||||
return `${urlSettings.baseUrl}?${params.toString()}`;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const _handleGenerateLink = (server) => {
|
const _handleGenerateLink = (server) => {
|
||||||
@@ -513,40 +406,18 @@ function ServerManager() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const _applyPreset = (name) => {
|
const _applyPreset = (name) => {
|
||||||
const p = presets[name];
|
const p = serverUrlPresets[name];
|
||||||
if (!p) return;
|
if (!p) return;
|
||||||
setUrlSettings(prev => ({ ...prev, ...p }));
|
setUrlSettings(prev => ({ ...prev, ...p }));
|
||||||
localStorage.setItem('urlSettings', JSON.stringify({ ...urlSettings, ...p }));
|
localStorage.setItem('urlSettings', JSON.stringify({ ...urlSettings, ...p }));
|
||||||
notify.success('Профиль применён');
|
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) => {
|
const copyToClipboard = async (text) => {
|
||||||
if (navigator.clipboard) {
|
await copyTextToClipboard(text, {
|
||||||
try {
|
onSuccess: () => notify.success('Скопировано в буфер обмена!'),
|
||||||
await navigator.clipboard.writeText(text);
|
onError: () => notify.error('Не удалось скопировать'),
|
||||||
notify.success('Скопировано в буфер обмена!');
|
});
|
||||||
return;
|
|
||||||
} catch (_err) {
|
|
||||||
// fallback
|
|
||||||
}
|
|
||||||
}
|
|
||||||
fallbackCopyToClipboard(text);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const _quickCopyLink = async (server) => {
|
const _quickCopyLink = async (server) => {
|
||||||
@@ -556,21 +427,7 @@ function ServerManager() {
|
|||||||
|
|
||||||
// === Export ===
|
// === Export ===
|
||||||
const exportServersToCSV = (serversList) => {
|
const exportServersToCSV = (serversList) => {
|
||||||
const csvContent = [
|
const csvContent = buildServersCsv(serversList, urlSettings);
|
||||||
['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 blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||||
const link = document.createElement('a');
|
const link = document.createElement('a');
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ import {
|
|||||||
IconBrain,
|
IconBrain,
|
||||||
} from '@tabler/icons-react';
|
} from '@tabler/icons-react';
|
||||||
import FormField from './components/FormField';
|
import FormField from './components/FormField';
|
||||||
import ErrorAlert from './components/ErrorAlert';
|
import { ErrorAlert } from '@/components/shared/feedback';
|
||||||
import PageHeader from './components/PageHeader';
|
import PageHeader from './components/PageHeader';
|
||||||
import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
|
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 - упрощённая версия для быстрых подтверждений
|
* ConfirmDialog - упрощённая версия для быстрых подтверждений
|
||||||
@@ -16,90 +25,28 @@ export default function ConfirmDialog({
|
|||||||
size = 'sm',
|
size = 'sm',
|
||||||
loading = false
|
loading = false
|
||||||
}) {
|
}) {
|
||||||
if (!open) return null;
|
|
||||||
|
|
||||||
const handleBackdropClick = (e) => {
|
|
||||||
if (e.target === e.currentTarget) {
|
|
||||||
onCancel?.();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Dialog open={open} onOpenChange={(state) => { if (!state) onCancel?.(); }}>
|
||||||
{/* Modal Backdrop */}
|
<DialogContent className={size === "lg" ? "max-w-2xl" : size === "sm" ? "max-w-sm" : "max-w-md"}>
|
||||||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
<DialogHeader>
|
||||||
|
<DialogTitle>{title}</DialogTitle>
|
||||||
{/* Modal */}
|
<DialogDescription className="pt-2">
|
||||||
<div
|
<span className="flex items-start gap-3">
|
||||||
className="modal show d-block"
|
{destructive && <AlertTriangle className="mt-0.5 h-5 w-5 text-destructive" />}
|
||||||
role="dialog"
|
<span>{message}</span>
|
||||||
aria-modal="true"
|
</span>
|
||||||
tabIndex={-1}
|
</DialogDescription>
|
||||||
onKeyDown={(e) => { if (e.key === 'Escape') onCancel?.(); }}
|
</DialogHeader>
|
||||||
>
|
<DialogFooter>
|
||||||
<div className={`modal-dialog ${size === 'sm' ? 'modal-sm' : size === 'lg' ? 'modal-lg' : ''} modal-dialog-centered`} role="document">
|
<Button type="button" variant="secondary" onClick={onCancel} disabled={loading}>
|
||||||
<div
|
{cancelText}
|
||||||
className="modal-content"
|
</Button>
|
||||||
tabIndex={-1}
|
<Button type="button" variant={destructive ? "destructive" : "default"} onClick={onConfirm} disabled={loading}>
|
||||||
onKeyDown={(e) => {
|
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
if (e.key === 'Tab') {
|
{confirmText}
|
||||||
const c = e.currentTarget;
|
</Button>
|
||||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
</DialogFooter>
|
||||||
if (!focusable || focusable.length === 0) return;
|
</DialogContent>
|
||||||
const first = focusable[0];
|
</Dialog>
|
||||||
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>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,8 @@
|
|||||||
import React from 'react';
|
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 TableSkeleton, { TableEmpty } from './TableSkeleton.jsx';
|
||||||
import EmptyState from './EmptyState.jsx';
|
import EmptyState from './EmptyState.jsx';
|
||||||
import Pagination from './Pagination.jsx';
|
import Pagination from './Pagination.jsx';
|
||||||
@@ -77,34 +80,33 @@ function DataTable({
|
|||||||
{col.title}
|
{col.title}
|
||||||
{isSortable && isActive && (
|
{isSortable && isActive && (
|
||||||
<span className="ms-1">
|
<span className="ms-1">
|
||||||
{sortOrder === 'asc' ? <IconArrowUp size={14} /> : <IconArrowDown size={14} />}
|
{sortOrder === 'asc' ? <ArrowUp size={14} /> : <ArrowDown size={14} />}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const thProps = {
|
const headProps = {
|
||||||
key: col.key,
|
key: col.key,
|
||||||
scope: 'col',
|
|
||||||
style: col.width ? { width: col.width } : undefined,
|
style: col.width ? { width: col.width } : undefined,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isSortable) {
|
if (isSortable) {
|
||||||
return (
|
return (
|
||||||
<th
|
<TableHead
|
||||||
{...thProps}
|
{...headProps}
|
||||||
className="cursor-pointer user-select-none"
|
className="cursor-pointer user-select-none"
|
||||||
onClick={() => onSort(col.key)}
|
onClick={() => onSort(col.key)}
|
||||||
>
|
>
|
||||||
{col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
|
{col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
|
||||||
</th>
|
</TableHead>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<th {...thProps}>
|
<TableHead {...headProps}>
|
||||||
{col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
|
{col.tooltip ? <Tooltip content={col.tooltip} position="top">{content}</Tooltip> : content}
|
||||||
</th>
|
</TableHead>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -126,22 +128,24 @@ function DataTable({
|
|||||||
<>
|
<>
|
||||||
{inlineEdit.renderEditor && inlineEdit.renderEditor(item)}
|
{inlineEdit.renderEditor && inlineEdit.renderEditor(item)}
|
||||||
<Tooltip content="Сохранить (Enter)">
|
<Tooltip content="Сохранить (Enter)">
|
||||||
<button
|
<Button
|
||||||
className="btn btn-success btn-icon btn-sm me-1"
|
variant="default"
|
||||||
|
size="icon"
|
||||||
onClick={inlineEdit.onSave}
|
onClick={inlineEdit.onSave}
|
||||||
aria-label="Сохранить"
|
aria-label="Сохранить"
|
||||||
>
|
>
|
||||||
<IconCheck size={16} />
|
<Check size={16} />
|
||||||
</button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip content="Отмена (Esc)">
|
<Tooltip content="Отмена (Esc)">
|
||||||
<button
|
<Button
|
||||||
className="btn btn-secondary btn-icon btn-sm"
|
variant="secondary"
|
||||||
|
size="icon"
|
||||||
onClick={inlineEdit.onCancel}
|
onClick={inlineEdit.onCancel}
|
||||||
aria-label="Отмена"
|
aria-label="Отмена"
|
||||||
>
|
>
|
||||||
<IconX size={16} />
|
<X size={16} />
|
||||||
</button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@@ -151,46 +155,50 @@ function DataTable({
|
|||||||
<>
|
<>
|
||||||
{onEdit && (
|
{onEdit && (
|
||||||
<Tooltip content="Редактировать" position="top">
|
<Tooltip content="Редактировать" position="top">
|
||||||
<button
|
<Button
|
||||||
className="btn btn-outline-primary btn-icon btn-sm me-1"
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
onClick={() => onEdit(item)}
|
onClick={() => onEdit(item)}
|
||||||
aria-label="Редактировать"
|
aria-label="Редактировать"
|
||||||
>
|
>
|
||||||
<IconEdit size={16} />
|
<Edit size={16} />
|
||||||
</button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
{onCopy && (
|
{onCopy && (
|
||||||
<Tooltip content="Копировать" position="top">
|
<Tooltip content="Копировать" position="top">
|
||||||
<button
|
<Button
|
||||||
className="btn btn-outline-secondary btn-icon btn-sm me-1"
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
onClick={() => onCopy(item)}
|
onClick={() => onCopy(item)}
|
||||||
aria-label="Копировать"
|
aria-label="Копировать"
|
||||||
>
|
>
|
||||||
<IconCopy size={16} />
|
<Copy size={16} />
|
||||||
</button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
{actions.map((action, idx) => (
|
{actions.map((action, idx) => (
|
||||||
<Tooltip key={idx} content={action.label} position="top">
|
<Tooltip key={idx} content={action.label} position="top">
|
||||||
<button
|
<Button
|
||||||
className={`btn btn-outline-${action.variant || 'secondary'} btn-icon btn-sm me-1`}
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
onClick={() => action.onClick(item)}
|
onClick={() => action.onClick(item)}
|
||||||
aria-label={action.label}
|
aria-label={action.label}
|
||||||
>
|
>
|
||||||
<action.icon size={16} />
|
<action.icon size={16} />
|
||||||
</button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
))}
|
))}
|
||||||
{onDelete && (
|
{onDelete && (
|
||||||
<Tooltip content="Удалить" position="top">
|
<Tooltip content="Удалить" position="top">
|
||||||
<button
|
<Button
|
||||||
className="btn btn-outline-danger btn-icon btn-sm"
|
variant="destructive"
|
||||||
|
size="icon"
|
||||||
onClick={() => onDelete(item)}
|
onClick={() => onDelete(item)}
|
||||||
aria-label="Удалить"
|
aria-label="Удалить"
|
||||||
>
|
>
|
||||||
<IconTrash size={16} />
|
<Trash size={16} />
|
||||||
</button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
@@ -221,72 +229,59 @@ function DataTable({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const allSelected = items.length > 0 && items.every(i => selectedItems.has(i[itemKey]));
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="table-responsive">
|
<div className="overflow-x-auto rounded-md border">
|
||||||
<table className={tableClass} role="grid">
|
<Table role="grid">
|
||||||
<thead>
|
<TableHeader>
|
||||||
<tr>
|
<TableRow>
|
||||||
{selectable && (
|
{selectable && (
|
||||||
<th scope="col" style={{ width: '40px' }}>
|
<TableHead style={{ width: '40px' }}>
|
||||||
<input
|
<Checkbox
|
||||||
type="checkbox"
|
|
||||||
className="form-check-input"
|
|
||||||
checked={allSelected}
|
checked={allSelected}
|
||||||
onChange={(e) => e.target.checked ? onSelectAll?.() : onDeselectAll?.()}
|
onCheckedChange={(checked) => checked ? onSelectAll?.() : onDeselectAll?.()}
|
||||||
title="Выбрать все на странице"
|
title="Выбрать все на странице"
|
||||||
/>
|
/>
|
||||||
</th>
|
</TableHead>
|
||||||
)}
|
)}
|
||||||
{columns.map(renderColumnHeader)}
|
{columns.map(renderColumnHeader)}
|
||||||
{hasActions && <th scope="col" className="text-end td-actions">Действия</th>}
|
{hasActions && <TableHead className="text-right">Действия</TableHead>}
|
||||||
</tr>
|
</TableRow>
|
||||||
</thead>
|
</TableHeader>
|
||||||
<tbody>
|
<TableBody>
|
||||||
{items.map((item, idx) => {
|
{items.map((item, idx) => {
|
||||||
const id = item[itemKey];
|
const id = item[itemKey];
|
||||||
const isSelected = selectedItems.has(id);
|
const isSelected = selectedItems.has(id);
|
||||||
const editing = isEditing(item);
|
const editing = isEditing(item);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr
|
<TableRow
|
||||||
key={id}
|
key={id}
|
||||||
className={editing ? 'table-active' : (isSelected ? 'table-selected' : '')}
|
className={editing ? 'table-active' : (isSelected ? 'table-selected' : '')}
|
||||||
style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}
|
style={{ animation: `fadeIn 0.3s ease ${idx * 0.02}s both` }}
|
||||||
>
|
>
|
||||||
{selectable && (
|
{selectable && (
|
||||||
<td>
|
<TableCell>
|
||||||
<input
|
<Checkbox
|
||||||
type="checkbox"
|
|
||||||
className="form-check-input"
|
|
||||||
checked={isSelected}
|
checked={isSelected}
|
||||||
onChange={() => onSelectItem?.(id)}
|
onCheckedChange={() => onSelectItem?.(id)}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
/>
|
/>
|
||||||
</td>
|
</TableCell>
|
||||||
)}
|
)}
|
||||||
{columns.map((col) => (
|
{columns.map((col) => (
|
||||||
<td key={col.key} className={col.className}>
|
<TableCell key={col.key} className={col.className}>
|
||||||
{renderCell(col, item)}
|
{renderCell(col, item)}
|
||||||
</td>
|
</TableCell>
|
||||||
))}
|
))}
|
||||||
{hasActions && (
|
{hasActions && (
|
||||||
<td className="text-end td-actions">
|
<TableCell className="text-right">{renderActions(item)}</TableCell>
|
||||||
{renderActions(item)}
|
|
||||||
</td>
|
|
||||||
)}
|
)}
|
||||||
</tr>
|
</TableRow>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</tbody>
|
</TableBody>
|
||||||
</table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{pagination && (
|
{pagination && (
|
||||||
|
|||||||
@@ -1,25 +1,28 @@
|
|||||||
import { IconAlertTriangle, IconCopy, IconRefresh, IconChevronDown, IconChevronUp } from '@tabler/icons-react'
|
import { AlertTriangle, ChevronDown, ChevronUp, Copy, RefreshCcw } from "lucide-react"
|
||||||
import { useState } from 'react'
|
import { useState } from "react"
|
||||||
import { formatDateTime } from '../lib/datetime.js'
|
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 - улучшенный компонент для отображения ошибок
|
* ErrorAlert - улучшенный компонент для отображения ошибок
|
||||||
* Добавлены: Copy error, Retry, Show details
|
* Добавлены: Copy error, Retry, Show details
|
||||||
*/
|
*/
|
||||||
function ErrorAlert({
|
function ErrorAlert({
|
||||||
message,
|
message,
|
||||||
details,
|
details,
|
||||||
error, // альтернативный формат - объект error
|
error, // альтернативный формат - объект error
|
||||||
onClose,
|
onClose,
|
||||||
onRetry,
|
onRetry,
|
||||||
className = '',
|
className = "",
|
||||||
showDetails = true
|
showDetails = true
|
||||||
}) {
|
}) {
|
||||||
const [isExpanded, setIsExpanded] = useState(false)
|
const [isExpanded, setIsExpanded] = useState(false)
|
||||||
const [copied, setCopied] = useState(false)
|
const [copied, setCopied] = useState(false)
|
||||||
|
|
||||||
// Поддержка обоих форматов: { message, details } или { error }
|
// Поддержка обоих форматов: { 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 errorDetails = details || error?.details || error?.stack || null
|
||||||
const errorCode = error?.code || error?.status || null
|
const errorCode = error?.code || error?.status || null
|
||||||
|
|
||||||
@@ -37,80 +40,58 @@ ${errorDetails ? `Детали:\n${typeof errorDetails === 'string' ? errorDetai
|
|||||||
setCopied(true)
|
setCopied(true)
|
||||||
setTimeout(() => setCopied(false), 2000)
|
setTimeout(() => setCopied(false), 2000)
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.error('Не удалось скопировать:', err)
|
console.error("Не удалось скопировать:", err)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`alert alert-danger alert-dismissible ${className}`} role="alert">
|
<Alert variant="destructive" className={className}>
|
||||||
<div className="d-flex">
|
<AlertTriangle className="h-4 w-4" />
|
||||||
<div className="me-2">
|
<div className="w-full">
|
||||||
<IconAlertTriangle className="icon alert-icon" />
|
<AlertTitle className="flex items-center gap-2">
|
||||||
</div>
|
<span>Ошибка</span>
|
||||||
<div className="flex-grow-1">
|
{errorCode && <Badge variant="destructive">{errorCode}</Badge>}
|
||||||
<h4 className="alert-title">
|
</AlertTitle>
|
||||||
Ошибка
|
<AlertDescription className="space-y-3">
|
||||||
{errorCode && (
|
<p>{errorMessage}</p>
|
||||||
<span className="badge bg-danger-lt text-danger ms-2">{errorCode}</span>
|
|
||||||
)}
|
|
||||||
</h4>
|
|
||||||
<div className="text-secondary mb-2">{errorMessage}</div>
|
|
||||||
|
|
||||||
{/* Детали ошибки (раскрывающийся блок) */}
|
|
||||||
{errorDetails && showDetails && (
|
{errorDetails && showDetails && (
|
||||||
<div className="mt-2">
|
<div className="space-y-2">
|
||||||
<button
|
<Button
|
||||||
className="btn btn-sm btn-ghost-secondary"
|
variant="outline"
|
||||||
onClick={() => setIsExpanded(!isExpanded)}
|
size="sm"
|
||||||
|
onClick={() => setIsExpanded((value) => !value)}
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
{isExpanded ? <IconChevronUp size={16} /> : <IconChevronDown size={16} />}
|
{isExpanded ? <ChevronUp className="mr-1 h-4 w-4" /> : <ChevronDown className="mr-1 h-4 w-4" />}
|
||||||
<span className="ms-1">{isExpanded ? 'Скрыть детали' : 'Показать детали'}</span>
|
{isExpanded ? "Скрыть детали" : "Показать детали"}
|
||||||
</button>
|
</Button>
|
||||||
|
|
||||||
{isExpanded && (
|
{isExpanded && (
|
||||||
<pre className="mt-2 p-2 bg-dark text-white rounded" style={{
|
<pre className="max-h-52 overflow-auto rounded-md border bg-muted p-2 text-xs text-foreground">
|
||||||
fontSize: '0.75rem',
|
{typeof errorDetails === "string" ? errorDetails : JSON.stringify(errorDetails, null, 2)}
|
||||||
maxHeight: '200px',
|
|
||||||
overflow: 'auto'
|
|
||||||
}}>
|
|
||||||
{typeof errorDetails === 'string' ? errorDetails : JSON.stringify(errorDetails, null, 2)}
|
|
||||||
</pre>
|
</pre>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
{/* Действия */}
|
{onRetry && (
|
||||||
{(onRetry || handleCopy) && (
|
<Button size="sm" onClick={onRetry} type="button">
|
||||||
<div className="btn-list mt-2">
|
<RefreshCcw className="mr-1 h-4 w-4" />
|
||||||
{onRetry && (
|
Повторить
|
||||||
<button className="btn btn-sm btn-primary" onClick={onRetry} type="button">
|
</Button>
|
||||||
<IconRefresh size={16} className="me-1" />
|
)}
|
||||||
Повторить
|
<Button variant="secondary" size="sm" onClick={handleCopy} type="button">
|
||||||
</button>
|
<Copy className="mr-1 h-4 w-4" />
|
||||||
)}
|
{copied ? "Скопировано!" : "Копировать ошибку"}
|
||||||
<button
|
</Button>
|
||||||
className="btn btn-sm btn-outline-secondary"
|
{onClose && (
|
||||||
onClick={handleCopy}
|
<Button variant="ghost" size="sm" onClick={onClose} type="button">
|
||||||
title="Скопировать информацию об ошибке"
|
Закрыть
|
||||||
type="button"
|
</Button>
|
||||||
>
|
)}
|
||||||
<IconCopy size={16} className="me-1" />
|
</div>
|
||||||
{copied ? 'Скопировано!' : 'Копировать ошибку'}
|
</AlertDescription>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{onClose && (
|
</Alert>
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn-close"
|
|
||||||
onClick={onClose}
|
|
||||||
aria-label="Закрыть"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/* eslint-disable react-refresh/only-export-components */
|
/* eslint-disable react-refresh/only-export-components */
|
||||||
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
import { createContext, useCallback, useContext, useEffect, useMemo } from "react";
|
||||||
import { IconCheck, IconAlertTriangle, IconInfoCircle, IconX } from '@tabler/icons-react';
|
import { toast } from "sonner";
|
||||||
|
|
||||||
const NotifyContext = createContext({
|
const NotifyContext = createContext({
|
||||||
add: () => {},
|
add: () => {},
|
||||||
@@ -12,67 +12,48 @@ const NotifyContext = createContext({
|
|||||||
clear: () => {},
|
clear: () => {},
|
||||||
});
|
});
|
||||||
|
|
||||||
const DEFAULT_TIMEOUT = {
|
|
||||||
success: 3000,
|
|
||||||
info: 4000,
|
|
||||||
warning: 5000,
|
|
||||||
error: 7000,
|
|
||||||
};
|
|
||||||
|
|
||||||
export function NotifyProvider({ children }) {
|
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) => {
|
const remove = useCallback((id) => {
|
||||||
setItems((prev) => prev.filter((n) => n.id !== id));
|
toast.dismiss(id);
|
||||||
const t = timeouts.current.get(id);
|
|
||||||
if (t) { clearTimeout(t); timeouts.current.delete(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 add = useCallback((type, message, details) => {
|
||||||
const text = String(message || '').trim();
|
const text = String(message || "").trim();
|
||||||
if (!text) return;
|
if (!text) return undefined;
|
||||||
setItems((prev) => {
|
const payload = details
|
||||||
const dup = prev.find((n) => n.type === type && n.message === text);
|
? {
|
||||||
if (dup) {
|
description:
|
||||||
const updated = prev.map((n) => n.id === dup.id ? { ...n, count: (n.count || 1) + 1, createdAt: Date.now(), details: details ?? n.details } : n);
|
typeof details === "string" ? details : JSON.stringify(details),
|
||||||
schedule(dup.id, type);
|
}
|
||||||
return updated;
|
: undefined;
|
||||||
}
|
|
||||||
const id = idSeq.current++;
|
switch (type) {
|
||||||
const next = [...prev, { id, type, message: text, details, count: 1, createdAt: Date.now() }];
|
case "success":
|
||||||
schedule(id, type);
|
return toast.success(text, payload);
|
||||||
return next;
|
case "error":
|
||||||
});
|
return toast.error(text, payload);
|
||||||
}, [schedule]);
|
case "warning":
|
||||||
|
return toast.warning(text, payload);
|
||||||
|
default:
|
||||||
|
return toast.info(text, payload);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
const clear = useCallback(() => {
|
const clear = useCallback(() => {
|
||||||
setItems([]);
|
toast.dismiss();
|
||||||
for (const t of timeouts.current.values()) clearTimeout(t);
|
|
||||||
timeouts.current.clear();
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const api = useMemo(() => ({
|
const api = useMemo(() => ({
|
||||||
add,
|
add,
|
||||||
success: (m, d) => add('success', m, d),
|
success: (m, d) => add("success", m, d),
|
||||||
error: (m, d) => add('error', m, d),
|
error: (m, d) => add("error", m, d),
|
||||||
info: (m, d) => add('info', m, d),
|
info: (m, d) => add("info", m, d),
|
||||||
warning: (m, d) => add('warning', m, d),
|
warning: (m, d) => add("warning", m, d),
|
||||||
remove,
|
remove,
|
||||||
clear,
|
clear,
|
||||||
}), [add, remove, clear]);
|
}), [add, remove, clear]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Опционально доступ из консоли / старого кода
|
|
||||||
window.notify = api;
|
window.notify = api;
|
||||||
return () => { if (window.notify === api) delete window.notify; };
|
return () => { if (window.notify === api) delete window.notify; };
|
||||||
}, [api]);
|
}, [api]);
|
||||||
@@ -80,7 +61,6 @@ export function NotifyProvider({ children }) {
|
|||||||
return (
|
return (
|
||||||
<NotifyContext.Provider value={api}>
|
<NotifyContext.Provider value={api}>
|
||||||
{children}
|
{children}
|
||||||
<NotifyViewport items={items} onClose={remove} />
|
|
||||||
</NotifyContext.Provider>
|
</NotifyContext.Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -89,10 +69,7 @@ export function useNotify() {
|
|||||||
return useContext(NotifyContext);
|
return useContext(NotifyContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Единый тост-успех для мутаций (POST/DELETE/PUT/PATCH)
|
|
||||||
export function notifyMutationSuccess(message, details) {
|
export function notifyMutationSuccess(message, details) {
|
||||||
// Тихий режим: по умолчанию успех показываем не тостом, а через inline-баннер на страницах.
|
|
||||||
// Оставляем возможность вручную вызвать тост при необходимости, если передан details?.forceToast === true
|
|
||||||
try {
|
try {
|
||||||
const text = message || 'Операция выполнена';
|
const text = message || 'Операция выполнена';
|
||||||
const forceToast = Boolean(details && details.forceToast);
|
const forceToast = Boolean(details && details.forceToast);
|
||||||
@@ -101,73 +78,3 @@ export function notifyMutationSuccess(message, details) {
|
|||||||
}
|
}
|
||||||
} catch { /* no-op */ }
|
} 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 {
|
import {
|
||||||
IconRefresh,
|
Download,
|
||||||
IconUpload,
|
Eraser,
|
||||||
IconDownload,
|
Eye,
|
||||||
IconDeviceFloppy,
|
History,
|
||||||
IconPlayerPlay,
|
Loader2,
|
||||||
IconBolt,
|
Play,
|
||||||
IconEraser,
|
RefreshCw,
|
||||||
IconDots,
|
Save,
|
||||||
IconEye
|
Upload,
|
||||||
} from '@tabler/icons-react';
|
Zap,
|
||||||
import PortalDropdown from './PortalDropdown.jsx';
|
} from "lucide-react";
|
||||||
import { IconClock } from '@tabler/icons-react';
|
import { Button } from "@/components/ui/button";
|
||||||
import { formatDateTimeWithRelative } from '../lib/datetime.js';
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { formatDateTimeWithRelative } from "../lib/datetime.js";
|
||||||
|
|
||||||
function PageHeaderActions({
|
function PageHeaderActions({
|
||||||
loading = false,
|
loading = false,
|
||||||
@@ -34,192 +41,185 @@ function PageHeaderActions({
|
|||||||
onBackgroundUpdate,
|
onBackgroundUpdate,
|
||||||
}) {
|
}) {
|
||||||
const secondaryButtons = Boolean(onPreview || onImport || onExport || onClear || onClearCommunities || onHistory);
|
const secondaryButtons = Boolean(onPreview || onImport || onExport || onClear || onClearCommunities || onHistory);
|
||||||
// Рендер плейсхолдеров во время загрузки/перезагрузки страницы
|
|
||||||
if (loading) {
|
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 (
|
return (
|
||||||
<div className="header-actions" role="toolbar" aria-label="Действия страницы (загрузка)">
|
<div className="flex flex-wrap items-center gap-2" role="toolbar" aria-label="Действия страницы (загрузка)">
|
||||||
<div className="btn-group">
|
<div className="h-9 w-48 animate-pulse rounded-md bg-muted" />
|
||||||
{showUpdateGroup && (
|
<div className="h-9 w-36 animate-pulse rounded-md bg-muted" />
|
||||||
<div className="btn-group">
|
<div className="h-9 w-40 animate-pulse rounded-md bg-muted" />
|
||||||
{placeholderBtn(170)}
|
<div className="ml-auto flex items-center gap-2">
|
||||||
</div>
|
<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>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="header-actions" role="toolbar" aria-label="Действия страницы">
|
<div className="flex flex-wrap items-center gap-2" role="toolbar" aria-label="Действия страницы">
|
||||||
<div className="btn-group">
|
<div className="flex items-center gap-2">
|
||||||
{(onBackgroundUpdate || onOnlineUpdate) && (
|
{(onBackgroundUpdate || onOnlineUpdate) && (
|
||||||
<div className="btn-group">
|
<div className="flex items-center gap-2">
|
||||||
{/* Дефолтное действие — фоновое обновление */}
|
<Button variant="outline" type="button" onClick={onBackgroundUpdate || onOnlineUpdate} title="Фоновое обновление BGP (POST)">
|
||||||
<button
|
<Play className="mr-1 h-4 w-4" />
|
||||||
className="btn btn-outline-success"
|
Фоновое обновление
|
||||||
type="button"
|
</Button>
|
||||||
onClick={onBackgroundUpdate || onOnlineUpdate}
|
{onBackgroundUpdate && onOnlineUpdate && (
|
||||||
title="Фоновое обновление BGP (POST)"
|
<DropdownMenu>
|
||||||
>
|
<DropdownMenuTrigger asChild>
|
||||||
<IconPlayerPlay className="me-1" /> Фоновое обновление
|
<Button variant="outline" size="icon" aria-label="Другие варианты обновления">
|
||||||
</button>
|
<Zap className="h-4 w-4" />
|
||||||
{(onBackgroundUpdate && onOnlineUpdate) && (
|
</Button>
|
||||||
<PortalDropdown
|
</DropdownMenuTrigger>
|
||||||
buttonClassName="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
|
<DropdownMenuContent align="start">
|
||||||
buttonProps={{ 'aria-label': 'Другие варианты обновления' }}
|
<DropdownMenuItem onClick={onBackgroundUpdate}>
|
||||||
align="right"
|
<Play className="mr-2 h-4 w-4" />
|
||||||
buttonContent={null}
|
Фоновое обновление
|
||||||
>
|
</DropdownMenuItem>
|
||||||
<button className="dropdown-item" type="button" onClick={onBackgroundUpdate}>
|
<DropdownMenuItem onClick={onOnlineUpdate}>
|
||||||
<IconPlayerPlay className="me-1" /> Фоновое обновление
|
<Zap className="mr-2 h-4 w-4" />
|
||||||
</button>
|
Online-обновление
|
||||||
<button className="dropdown-item" type="button" onClick={onOnlineUpdate}>
|
</DropdownMenuItem>
|
||||||
<IconBolt className="me-1" /> Online-обновление
|
</DropdownMenuContent>
|
||||||
</button>
|
</DropdownMenu>
|
||||||
</PortalDropdown>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<span className="vr d-none d-lg-inline" />
|
<div className="hidden items-center gap-2 sm:flex">
|
||||||
<div className="btn-group d-none d-sm-inline-flex">
|
|
||||||
{onPreview && (
|
{onPreview && (
|
||||||
<button className="btn btn-outline-primary" type="button" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений">
|
<Button variant="outline" type="button" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений">
|
||||||
<IconEye className="me-1" /> Предпросмотр
|
<Eye className="mr-1 h-4 w-4" />
|
||||||
</button>
|
Предпросмотр
|
||||||
|
</Button>
|
||||||
)}
|
)}
|
||||||
{onRefresh && (
|
{onRefresh && (
|
||||||
<button className="btn btn-outline-secondary" type="button" onClick={onRefresh} disabled={disableRefresh} title="Обновить данные">
|
<Button variant="outline" type="button" onClick={onRefresh} disabled={disableRefresh} title="Обновить данные">
|
||||||
<IconRefresh className={loading ? 'spin me-1' : 'me-1'} /> Обновить
|
<RefreshCw className="mr-1 h-4 w-4" />
|
||||||
</button>
|
Обновить
|
||||||
|
</Button>
|
||||||
)}
|
)}
|
||||||
{(onImport || onExport) && (
|
{(onImport || onExport) && (
|
||||||
<div className="dropdown">
|
<DropdownMenu>
|
||||||
<PortalDropdown
|
<DropdownMenuTrigger asChild>
|
||||||
buttonClassName="btn btn-outline-primary dropdown-toggle"
|
<Button variant="outline" title="Импорт/Экспорт">
|
||||||
buttonProps={{ title: 'Импорт/Экспорт' }}
|
<Download className="mr-1 h-4 w-4" />
|
||||||
align="left"
|
Импорт/Экспорт
|
||||||
buttonContent={<><IconDownload className="me-1" /> Импорт/Экспорт</>}
|
</Button>
|
||||||
>
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
{onImport && (
|
{onImport && (
|
||||||
<button className="dropdown-item" type="button" onClick={onImport}>
|
<DropdownMenuItem onClick={onImport}>
|
||||||
<IconUpload className="me-1" /> Импорт
|
<Upload className="mr-2 h-4 w-4" />
|
||||||
</button>
|
Импорт
|
||||||
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{onExport && (
|
{onExport && (
|
||||||
<button className="dropdown-item" type="button" onClick={onExport} disabled={disableExport}>
|
<DropdownMenuItem onClick={onExport} disabled={disableExport}>
|
||||||
<IconDownload className="me-1" /> Экспорт
|
<Download className="mr-2 h-4 w-4" />
|
||||||
</button>
|
Экспорт
|
||||||
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
</PortalDropdown>
|
</DropdownMenuContent>
|
||||||
</div>
|
</DropdownMenu>
|
||||||
)}
|
)}
|
||||||
{onClear && (
|
{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 && (
|
{onClearCommunities && (
|
||||||
<button className="btn btn-outline-secondary" type="button" onClick={onClearCommunities} disabled={disableClearCommunities} title="Удалить все записи выбранного community">
|
<Button variant="outline" type="button" onClick={onClearCommunities} disabled={disableClearCommunities} title="Удалить все записи выбранного community">
|
||||||
<IconEraser className="me-1" /> Очистить community
|
<Eraser className="mr-1 h-4 w-4" />
|
||||||
</button>
|
Очистить community
|
||||||
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{(onSave || onHistory) && (
|
{(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 && (
|
{onSave && (
|
||||||
<button className="btn btn-primary" type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
|
<Button type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
|
||||||
{loading ? (
|
{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 && (
|
{onHistory && (
|
||||||
<div className="btn-group d-none d-sm-inline-flex">
|
<div className="hidden items-center gap-2 sm:flex">
|
||||||
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title="История версий">История</button>
|
<Button variant="outline" type="button" onClick={onHistory} title="История версий">
|
||||||
|
<History className="mr-1 h-4 w-4" />
|
||||||
|
История
|
||||||
|
</Button>
|
||||||
{lastModified && (
|
{lastModified && (
|
||||||
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title={`Последние изменения: ${formatDateTimeWithRelative(lastModified)}`}>
|
<Button variant="outline" type="button" onClick={onHistory} title={`Последние изменения: ${formatDateTimeWithRelative(lastModified)}`}>
|
||||||
<IconClock className="me-1" />
|
{formatDateTimeWithRelative(lastModified)}
|
||||||
<span className="d-none d-sm-inline">{formatDateTimeWithRelative(lastModified)}</span>
|
</Button>
|
||||||
<span className="d-inline d-sm-none">{formatDateTimeWithRelative(lastModified)}</span>
|
|
||||||
</button>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{/* Компактное меню для маленьких экранов */}
|
|
||||||
{secondaryButtons && (
|
{secondaryButtons && (
|
||||||
<div className="btn-group d-inline-flex d-sm-none">
|
<div className="inline-flex sm:hidden">
|
||||||
<PortalDropdown
|
<DropdownMenu>
|
||||||
buttonClassName="btn btn-outline-secondary"
|
<DropdownMenuTrigger asChild>
|
||||||
buttonProps={{ title: 'Ещё действия' }}
|
<Button variant="outline">Ещё</Button>
|
||||||
align="left"
|
</DropdownMenuTrigger>
|
||||||
buttonContent={<><IconDots className="me-1" /> Ещё</>}
|
<DropdownMenuContent align="start">
|
||||||
>
|
|
||||||
{onPreview && (
|
{onPreview && (
|
||||||
<button className="dropdown-item" type="button" onClick={onPreview} disabled={disablePreview}>
|
<DropdownMenuItem onClick={onPreview} disabled={disablePreview}>
|
||||||
<IconEye className="me-1" /> Предпросмотр
|
<Eye className="mr-2 h-4 w-4" />
|
||||||
</button>
|
Предпросмотр
|
||||||
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{onRefresh && (
|
{onRefresh && (
|
||||||
<button className="dropdown-item" type="button" onClick={onRefresh} disabled={disableRefresh}>
|
<DropdownMenuItem onClick={onRefresh} disabled={disableRefresh}>
|
||||||
<IconRefresh className="me-1" /> Обновить
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||||||
</button>
|
Обновить
|
||||||
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{onImport && (
|
{onImport && (
|
||||||
<button className="dropdown-item" type="button" onClick={onImport}>
|
<DropdownMenuItem onClick={onImport}>
|
||||||
<IconUpload className="me-1" /> Импорт
|
<Upload className="mr-2 h-4 w-4" />
|
||||||
</button>
|
Импорт
|
||||||
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{onExport && (
|
{onExport && (
|
||||||
<button className="dropdown-item" type="button" onClick={onExport} disabled={disableExport}>
|
<DropdownMenuItem onClick={onExport} disabled={disableExport}>
|
||||||
<IconDownload className="me-1" /> Экспорт
|
<Download className="mr-2 h-4 w-4" />
|
||||||
</button>
|
Экспорт
|
||||||
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{onClear && (
|
{onClear && (
|
||||||
<button className="dropdown-item" type="button" onClick={onClear} disabled={disableClear}>
|
<DropdownMenuItem onClick={onClear} disabled={disableClear}>
|
||||||
Очистить
|
Очистить
|
||||||
</button>
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{onClearCommunities && (
|
{onClearCommunities && (
|
||||||
<button className="dropdown-item" type="button" onClick={onClearCommunities} disabled={disableClearCommunities}>
|
<DropdownMenuItem onClick={onClearCommunities} disabled={disableClearCommunities}>
|
||||||
<IconEraser className="me-1" /> Очистить community
|
<Eraser className="mr-2 h-4 w-4" />
|
||||||
</button>
|
Очистить community
|
||||||
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
{onHistory && (
|
{onHistory && (
|
||||||
<button className="dropdown-item" type="button" onClick={onHistory}>
|
<>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem onClick={onHistory}>
|
||||||
История
|
История
|
||||||
</button>
|
</DropdownMenuItem>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</PortalDropdown>
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import FormField from './FormField';
|
|||||||
import { useEffect, useState, useMemo } from 'react';
|
import { useEffect, useState, useMemo } from 'react';
|
||||||
import api from '../lib/api.js';
|
import api from '../lib/api.js';
|
||||||
import { IconSettings, IconDeviceFloppy } from '@tabler/icons-react';
|
import { IconSettings, IconDeviceFloppy } from '@tabler/icons-react';
|
||||||
import ErrorAlert from './ErrorAlert';
|
import { ErrorAlert } from '@/components/shared/feedback';
|
||||||
import ServerAutocompleteInput from './ServerAutocompleteInput.jsx';
|
import ServerAutocompleteInput from './ServerAutocompleteInput.jsx';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -1,11 +1,6 @@
|
|||||||
/* eslint-disable react-refresh/only-export-components */
|
/* eslint-disable react-refresh/only-export-components */
|
||||||
import { useState, useEffect, createContext, useContext, useCallback, useMemo } from 'react'
|
import { createContext, useContext, useEffect, useMemo } from "react"
|
||||||
import {
|
import { toast } from "sonner"
|
||||||
IconCheck,
|
|
||||||
IconX,
|
|
||||||
IconAlertTriangle,
|
|
||||||
IconInfoCircle
|
|
||||||
} from '@tabler/icons-react'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Контекст для глобального управления toast уведомлениями.
|
* Контекст для глобального управления toast уведомлениями.
|
||||||
@@ -20,135 +15,16 @@ const ToastContext = createContext({
|
|||||||
|
|
||||||
export const useToast = () => useContext(ToastContext)
|
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 уведомлений
|
* Контейнер для всех toast уведомлений
|
||||||
*/
|
*/
|
||||||
export function ToastContainer({ children }) {
|
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(() => ({
|
const contextValue = useMemo(() => ({
|
||||||
success: (message, options) => addToast('success', message, options),
|
success: (message, options) => toast.success(message, options),
|
||||||
error: (message, options) => addToast('error', message, options),
|
error: (message, options) => toast.error(message, options),
|
||||||
warning: (message, options) => addToast('warning', message, options),
|
warning: (message, options) => toast.warning(message, options),
|
||||||
info: (message, options) => addToast('info', message, options),
|
info: (message, options) => toast.info(message, options),
|
||||||
}), [addToast])
|
}), [])
|
||||||
|
|
||||||
// Глобальный доступ через window.toast (для обратной совместимости)
|
// Глобальный доступ через window.toast (для обратной совместимости)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -159,74 +35,6 @@ export function ToastContainer({ children }) {
|
|||||||
<ToastContext.Provider value={contextValue}>
|
<ToastContext.Provider value={contextValue}>
|
||||||
{children}
|
{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>
|
</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 />
|
||||||
|
}
|
||||||
|
|
||||||
+142
-13
@@ -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. */
|
/* Using Bootstrap styles, this file can be empty or used for custom global styles. */
|
||||||
|
|
||||||
/* Sticky footer helpers */
|
/* Sticky footer helpers */
|
||||||
@@ -18,20 +103,20 @@
|
|||||||
--app-gap-sm: .5rem;
|
--app-gap-sm: .5rem;
|
||||||
--app-gap-md: .75rem;
|
--app-gap-md: .75rem;
|
||||||
--app-gap-lg: 1rem;
|
--app-gap-lg: 1rem;
|
||||||
|
|
||||||
/* Semantic colors for statuses */
|
/* Semantic colors for statuses */
|
||||||
--status-online: #2fb344;
|
--status-online: #2fb344;
|
||||||
--status-offline: #d63939;
|
--status-offline: #d63939;
|
||||||
--status-warning: #f59f00;
|
--status-warning: #f59f00;
|
||||||
--status-unknown: #868e96;
|
--status-unknown: #868e96;
|
||||||
|
|
||||||
/* Accent colors for important actions */
|
/* Accent colors for important actions */
|
||||||
--accent-primary: #206bc4;
|
--accent-primary: #206bc4;
|
||||||
--accent-danger: #d63939;
|
--accent-danger: #d63939;
|
||||||
--accent-success: #2fb344;
|
--accent-success: #2fb344;
|
||||||
--accent-info: #4299e1;
|
--accent-info: #4299e1;
|
||||||
--accent-warning: #f59f00;
|
--accent-warning: #f59f00;
|
||||||
|
|
||||||
/* Enhanced spacing scale */
|
/* Enhanced spacing scale */
|
||||||
--space-xs: 0.25rem;
|
--space-xs: 0.25rem;
|
||||||
--space-sm: 0.5rem;
|
--space-sm: 0.5rem;
|
||||||
@@ -39,12 +124,44 @@
|
|||||||
--space-lg: 1.5rem;
|
--space-lg: 1.5rem;
|
||||||
--space-xl: 2rem;
|
--space-xl: 2rem;
|
||||||
--space-xxl: 3rem;
|
--space-xxl: 3rem;
|
||||||
|
|
||||||
/* Shadow scale */
|
/* Shadow scale */
|
||||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);
|
--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 ===== */
|
/* ===== Improved Typography ===== */
|
||||||
@@ -176,14 +293,14 @@ button:focus-visible,
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
min-width: 44px;
|
min-width: 44px;
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggler {
|
.navbar-toggler {
|
||||||
min-width: 44px;
|
min-width: 44px;
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
@@ -447,12 +564,12 @@ button:focus-visible,
|
|||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-sm .h2,
|
.card-sm .h2,
|
||||||
.card .h3.mb-0 {
|
.card .h3.mb-0 {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-responsive {
|
.table-responsive {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
@@ -465,19 +582,19 @@ button:focus-visible,
|
|||||||
.table-responsive .table td {
|
.table-responsive .table td {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group {
|
.btn-group {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
font-size: 1.35rem;
|
font-size: 1.35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header .header-actions {
|
.page-header .header-actions {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Карточки и ряды: компактные отступы на мобильных */
|
/* Карточки и ряды: компактные отступы на мобильных */
|
||||||
.row.g-3 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
|
.row.g-3 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
|
||||||
.card-title { font-size: 1rem; }
|
.card-title { font-size: 1rem; }
|
||||||
@@ -491,4 +608,16 @@ button:focus-visible,
|
|||||||
flex: 0 0 100%;
|
flex: 0 0 100%;
|
||||||
max-width: 100%;
|
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