feat: add TypeScript definitions and utility functions for date formatting
- Created a global TypeScript declaration for the txadmin interface on the Window object. - Implemented date formatting utilities using date-fns with Spanish locale support. - Added TypeScript configuration files for app, Electron, and Node environments. - Set up Vite configuration for React application.
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-electron
|
||||
dist-ssr
|
||||
release
|
||||
release-portable
|
||||
*.local
|
||||
*.tsbuildinfo
|
||||
node_modules/.tmp
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the Oxlint configuration
|
||||
|
||||
If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"options": {
|
||||
"typeAware": true
|
||||
},
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -0,0 +1,171 @@
|
||||
import { app, BrowserWindow, dialog, ipcMain } from 'electron';
|
||||
import type { OpenDialogOptions } from 'electron';
|
||||
import path from 'node:path';
|
||||
import fs from 'node:fs';
|
||||
import crypto from 'node:crypto';
|
||||
import axios from 'axios';
|
||||
|
||||
type Nonce = { id?: string; _id?: string; nonce: string; expiresAt?: string };
|
||||
|
||||
let mainWindow: BrowserWindow | null = null;
|
||||
let privateKey: Buffer | null = null;
|
||||
let privateKeyPath: string | null = null;
|
||||
|
||||
const apiHost = (process.env.API_HOST || 'https://api.turnosxpress.com.ar').replace(/\/+$/, '');
|
||||
|
||||
const adminRoutes: Record<string, { path: string; timeout?: number }> = {
|
||||
'users/paginate': { path: '/sysadmin/users/paginate', timeout: 5000 },
|
||||
'users/update': { path: '/sysadmin/users/update', timeout: 5000 },
|
||||
'users/set-verified': { path: '/sysadmin/users/set-verified', timeout: 5000 },
|
||||
'users/delete': { path: '/sysadmin/users/delete', timeout: 10000 },
|
||||
'users/organizations-status': { path: '/sysadmin/users/organizations-status', timeout: 5000 },
|
||||
'users/recalculate-plan-usage-cycle': { path: '/sysadmin/plan-usage-cycle/recalculate-user', timeout: 10000 },
|
||||
'users/subscription-details': { path: '/sysadmin/subscriptions/user-details', timeout: 10000 },
|
||||
'users/extend-subscription': { path: '/sysadmin/subscriptions/extend-user', timeout: 10000 },
|
||||
'users/finalize-subscription': { path: '/sysadmin/subscriptions/finalize-user', timeout: 10000 },
|
||||
'plans/list': { path: '/sysadmin/plans/list', timeout: 5000 },
|
||||
'plans/update': { path: '/sysadmin/plans/update', timeout: 5000 },
|
||||
'wap/paginate': { path: '/sysadmin/wapserver/get', timeout: 5000 },
|
||||
'wap/audit': { path: '/sysadmin/wapserver/audit', timeout: 10000 },
|
||||
'wap/create': { path: '/sysadmin/wapserver/create', timeout: 5000 },
|
||||
'wap/update': { path: '/sysadmin/wapserver/update', timeout: 5000 },
|
||||
'wap/recalculate-count': { path: '/sysadmin/wapserver/recalculate-count', timeout: 5000 },
|
||||
'wap/delete': { path: '/sysadmin/wapserver/delete', timeout: 15000 },
|
||||
'wap/bot/start': { path: '/sysadmin/wapserver/bot/start', timeout: 10000 },
|
||||
'wap/bot/stop': { path: '/sysadmin/wapserver/bot/stop', timeout: 10000 },
|
||||
'wap/bot/restart': { path: '/sysadmin/wapserver/bot/restart', timeout: 15000 },
|
||||
'wap/bot/qr': { path: '/sysadmin/wapserver/bot/qr', timeout: 10000 },
|
||||
'wap/bot/delete': { path: '/sysadmin/wapserver/bot/delete', timeout: 10000 },
|
||||
'wap/bot/detach': { path: '/sysadmin/wapserver/bot/detach', timeout: 10000 },
|
||||
'companies/paginate': { path: '/sysadmin/companies/paginate' },
|
||||
'companies/update': { path: '/sysadmin/companies/update' },
|
||||
'companies/set-banned': { path: '/sysadmin/companies/set-banned' },
|
||||
'companies/insights': { path: '/sysadmin/companies/insights' },
|
||||
'services/paginate': { path: '/sysadmin/services/paginate' },
|
||||
'services/set-banned': { path: '/sysadmin/services/set-banned' },
|
||||
};
|
||||
|
||||
const createWindow = () => {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 1280,
|
||||
height: 820,
|
||||
minWidth: 980,
|
||||
minHeight: 640,
|
||||
frame: false,
|
||||
titleBarStyle: 'hidden',
|
||||
backgroundColor: '#0f172a',
|
||||
icon: path.join(__dirname, '../build/icon.png'),
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
},
|
||||
});
|
||||
|
||||
if (process.env.VITE_DEV_SERVER_URL) {
|
||||
void mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL);
|
||||
} else {
|
||||
void mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
|
||||
}
|
||||
};
|
||||
|
||||
const loadPrivateKey = async (filePath: string) => {
|
||||
const key = await fs.promises.readFile(filePath);
|
||||
crypto.createPrivateKey(key);
|
||||
privateKey = key;
|
||||
privateKeyPath = filePath;
|
||||
};
|
||||
|
||||
const createPayload = async () => {
|
||||
if (!privateKey) {
|
||||
throw new Error('Load a private key before using admin functions.');
|
||||
}
|
||||
|
||||
const nonceResponse = await axios.get<Nonce>(`${apiHost}/sysadmin-challenges/create`, {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
timeout: 5000,
|
||||
});
|
||||
|
||||
if (nonceResponse.status !== 201 || !nonceResponse.data?.nonce) {
|
||||
throw new Error('Could not create the sysadmin nonce.');
|
||||
}
|
||||
|
||||
const signature = crypto.sign(null, Buffer.from(nonceResponse.data.nonce), privateKey);
|
||||
return { nonce: nonceResponse.data, signature: signature.toString('base64') };
|
||||
};
|
||||
|
||||
const formatError = (error: unknown) => {
|
||||
if (axios.isAxiosError(error)) {
|
||||
const data = error.response?.data;
|
||||
const message = typeof data === 'string' ? data : data?.desc || data?.message || data?.error || error.message;
|
||||
return { message, status: error.response?.status, data };
|
||||
}
|
||||
|
||||
return { message: error instanceof Error ? error.message : 'Unknown error' };
|
||||
};
|
||||
|
||||
ipcMain.handle('key:status', () => ({ loaded: Boolean(privateKey), path: privateKeyPath }));
|
||||
|
||||
ipcMain.handle('window:minimize', () => mainWindow?.minimize());
|
||||
|
||||
ipcMain.handle('window:toggle-maximize', () => {
|
||||
if (!mainWindow) return false;
|
||||
if (mainWindow.isMaximized()) {
|
||||
mainWindow.unmaximize();
|
||||
return false;
|
||||
}
|
||||
mainWindow.maximize();
|
||||
return true;
|
||||
});
|
||||
|
||||
ipcMain.handle('window:close', () => mainWindow?.close());
|
||||
|
||||
ipcMain.handle('key:select', async () => {
|
||||
const dialogOptions: OpenDialogOptions = {
|
||||
title: 'Select sysadmin private key',
|
||||
properties: ['openFile'],
|
||||
filters: [{ name: 'Private key', extensions: ['key', 'pem', '*'] }],
|
||||
};
|
||||
const result = mainWindow
|
||||
? await dialog.showOpenDialog(mainWindow, dialogOptions)
|
||||
: await dialog.showOpenDialog(dialogOptions);
|
||||
|
||||
if (result.canceled || !result.filePaths[0]) {
|
||||
return { loaded: Boolean(privateKey), path: privateKeyPath };
|
||||
}
|
||||
|
||||
await loadPrivateKey(result.filePaths[0]);
|
||||
return { loaded: true, path: privateKeyPath };
|
||||
});
|
||||
|
||||
ipcMain.handle('admin:request', async (_event, routeName: string, body: unknown) => {
|
||||
if (!privateKey) {
|
||||
throw new Error('Load a private key before using admin functions.');
|
||||
}
|
||||
|
||||
const route = adminRoutes[routeName];
|
||||
if (!route) {
|
||||
throw new Error(`Unsupported admin route: ${routeName}`);
|
||||
}
|
||||
|
||||
try {
|
||||
const payload = await createPayload();
|
||||
const response = await axios.post(`${apiHost}${route.path}`, { ...(body as object), payload }, {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
timeout: route.timeout ?? 5000,
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw new Error(JSON.stringify(formatError(error)));
|
||||
}
|
||||
});
|
||||
|
||||
void app.whenReady().then(createWindow);
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') app.quit();
|
||||
});
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
import { contextBridge, ipcRenderer } from 'electron';
|
||||
|
||||
contextBridge.exposeInMainWorld('txadmin', {
|
||||
getKeyStatus: () => ipcRenderer.invoke('key:status'),
|
||||
selectPrivateKey: () => ipcRenderer.invoke('key:select'),
|
||||
request: (route: string, body: unknown) => ipcRenderer.invoke('admin:request', route, body),
|
||||
minimizeWindow: () => ipcRenderer.invoke('window:minimize'),
|
||||
toggleMaximizeWindow: () => ipcRenderer.invoke('window:toggle-maximize'),
|
||||
closeWindow: () => ipcRenderer.invoke('window:close'),
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>txadmin</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+5713
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"name": "txadmin",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"main": "dist-electron/main.js",
|
||||
"scripts": {
|
||||
"dev": "concurrently -k \"vite\" \"tsc -p tsconfig.electron.json --watch --preserveWatchOutput\" \"wait-on tcp:5173 dist-electron/main.js && cross-env VITE_DEV_SERVER_URL=http://localhost:5173 electron .\"",
|
||||
"desktop": "npm run build && electron .",
|
||||
"typecheck": "tsc -b && tsc -p tsconfig.electron.json --noEmit",
|
||||
"build": "npm run typecheck && vite build && tsc -p tsconfig.electron.json",
|
||||
"package:win": "npm run build && cross-env CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --win portable --config.directories.output=release-portable",
|
||||
"lint": "oxlint",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.18.1",
|
||||
"date-fns": "^4.4.0",
|
||||
"framer-motion": "^12.42.2",
|
||||
"lucide-react": "^1.24.0",
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"react-router-dom": "^7.18.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.13.2",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.3",
|
||||
"oxlint": "^1.71.0",
|
||||
"typescript": "~6.0.2",
|
||||
"concurrently": "^9.2.1",
|
||||
"cross-env": "^10.1.0",
|
||||
"electron": "^39.2.7",
|
||||
"electron-builder": "^26.0.12",
|
||||
"vite": "^8.1.1",
|
||||
"wait-on": "^9.0.3"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.turnosxpress.txadmin",
|
||||
"productName": "txadmin",
|
||||
"asar": false,
|
||||
"directories": {
|
||||
"output": "release"
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"dist-electron/**/*",
|
||||
"build/**/*",
|
||||
"package.json"
|
||||
],
|
||||
"win": {
|
||||
"icon": "build/icon.png",
|
||||
"target": [
|
||||
"portable"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@@ -0,0 +1 @@
|
||||
/* Removed default App.css */
|
||||
@@ -0,0 +1,99 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { HashRouter, Routes, Route } from 'react-router-dom';
|
||||
import { Minus, Square, X } from 'lucide-react';
|
||||
import { DashboardLayout } from './components/layout/DashboardLayout';
|
||||
import { DashboardPage } from './pages/DashboardPage';
|
||||
import { UsersPage } from './pages/UsersPage';
|
||||
import { WapServersPage } from './pages/WapServersPage';
|
||||
import { CompaniesPage } from './pages/CompaniesPage';
|
||||
import { PlansPage } from './pages/PlansPage';
|
||||
import txadminIcon from './assets/txadmin-icon.png';
|
||||
|
||||
const TitleBar = () => (
|
||||
<header className="app-titlebar">
|
||||
<div className="app-titlebar-brand">
|
||||
<img className="app-titlebar-logo" src={txadminIcon} alt="txadmin" />
|
||||
<span>txadmin</span>
|
||||
</div>
|
||||
<div className="app-titlebar-actions">
|
||||
<button type="button" aria-label="Minimize window" onClick={() => void window.txadmin.minimizeWindow()}>
|
||||
<Minus size={16} />
|
||||
</button>
|
||||
<button type="button" aria-label="Maximize window" onClick={() => void window.txadmin.toggleMaximizeWindow()}>
|
||||
<Square size={13} />
|
||||
</button>
|
||||
<button type="button" className="close" aria-label="Close window" onClick={() => void window.txadmin.closeWindow()}>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
function App() {
|
||||
const [keyStatus, setKeyStatus] = useState<{ loaded: boolean; path: string | null }>({ loaded: false, path: null });
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (!window.txadmin) {
|
||||
setError('Desktop bridge is not available. Restart txadmin and try again.');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
window.txadmin.getKeyStatus()
|
||||
.then(setKeyStatus)
|
||||
.catch(() => setError('Could not read private key status.'))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const selectPrivateKey = async () => {
|
||||
setError(null);
|
||||
try {
|
||||
setKeyStatus(await window.txadmin.selectPrivateKey());
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Could not load the private key.');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="app-shell"><TitleBar /><div className="key-gate">Loading txadmin...</div></div>;
|
||||
}
|
||||
|
||||
if (!keyStatus.loaded) {
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<TitleBar />
|
||||
<div className="key-gate">
|
||||
<div className="glass-panel key-gate-card">
|
||||
<img className="key-gate-logo" src={txadminIcon} alt="txadmin" />
|
||||
<h1>txadmin</h1>
|
||||
<p>Load the sysadmin private key to unlock admin functions.</p>
|
||||
<button className="primary-button" onClick={selectPrivateKey}>Select Private Key</button>
|
||||
<p className="key-gate-hint">Expected equivalent: sysadmin/keys/tx-sysadmin-private.key</p>
|
||||
{error && <p className="key-gate-error">{error}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<TitleBar />
|
||||
<HashRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<DashboardLayout keyPath={keyStatus.path} onSelectPrivateKey={selectPrivateKey} />}>
|
||||
<Route index element={<DashboardPage />} />
|
||||
<Route path="users" element={<UsersPage />} />
|
||||
<Route path="companies" element={<CompaniesPage />} />
|
||||
<Route path="plans" element={<PlansPage />} />
|
||||
<Route path="wapservers" element={<WapServersPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</HashRouter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,405 @@
|
||||
const adminRequest = async <T = any>(route: string, body: unknown): Promise<T> => {
|
||||
try {
|
||||
return await window.txadmin.request<T>(route, body);
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
try {
|
||||
const parsed = JSON.parse(error.message);
|
||||
throw new Error(parsed.message || error.message);
|
||||
} catch {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// User API Calls
|
||||
export const fetchUsers = async (filters: any) => {
|
||||
return adminRequest('users/paginate', filters);
|
||||
};
|
||||
|
||||
export const updateUserProfile = async (data: any) => {
|
||||
return adminRequest('users/update', data);
|
||||
};
|
||||
|
||||
export const setVerifiedStatus = async (userId: string, isVerified: boolean) => {
|
||||
return adminRequest('users/set-verified', { userId, isVerified });
|
||||
};
|
||||
|
||||
export const deleteUser = async (userId: string) => {
|
||||
return adminRequest('users/delete', { userId });
|
||||
};
|
||||
|
||||
export const getOrganizationsStatus = async (userId: string) => {
|
||||
return adminRequest('users/organizations-status', { userId });
|
||||
};
|
||||
|
||||
export type RecalculatePlanUsageCycleResult = {
|
||||
userId: string;
|
||||
subscriptionId: string;
|
||||
planId: string;
|
||||
cycleStart: string;
|
||||
cycleEnd: string;
|
||||
organizationsCount: number;
|
||||
employeesCount: number;
|
||||
servicesCount: number;
|
||||
clientsCount: number;
|
||||
repeatsCount: number;
|
||||
appointmentsCount: number;
|
||||
};
|
||||
|
||||
export const recalculatePlanUsageCycle = async (userId: string): Promise<RecalculatePlanUsageCycleResult> => {
|
||||
return adminRequest('users/recalculate-plan-usage-cycle', { userId });
|
||||
};
|
||||
|
||||
export type UserSubscriptionDetails = {
|
||||
userId: string;
|
||||
currentSubscription: {
|
||||
id: string;
|
||||
plan: {
|
||||
id: string;
|
||||
name: string;
|
||||
code: string;
|
||||
price: number;
|
||||
} | null;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
isActive: boolean;
|
||||
mpStatus?: string;
|
||||
billingMonths?: number;
|
||||
pendingPaymentType?: 'extension' | 'upgrade';
|
||||
pendingPaymentPreferenceId?: string;
|
||||
lastPaymentStatus?: string;
|
||||
} | null;
|
||||
payments: {
|
||||
id: string;
|
||||
subscriptionId: string;
|
||||
amount: number;
|
||||
paymentDate: string;
|
||||
paymentMethod?: string;
|
||||
status: string;
|
||||
transactionId?: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
export const getUserSubscriptionDetails = async (userId: string): Promise<UserSubscriptionDetails> => {
|
||||
return adminRequest('users/subscription-details', { userId });
|
||||
};
|
||||
|
||||
export type ExtendUserSubscriptionPayload = {
|
||||
userId: string;
|
||||
mode: 'add_months' | 'set_end_date';
|
||||
months?: 1 | 2;
|
||||
endDate?: string;
|
||||
reason?: string;
|
||||
};
|
||||
|
||||
export type ExtendUserSubscriptionResult = {
|
||||
userId: string;
|
||||
subscriptionId: string;
|
||||
previousEndDate: string;
|
||||
newEndDate: string;
|
||||
paymentId: string;
|
||||
transactionId?: string;
|
||||
};
|
||||
|
||||
export const extendUserSubscription = async (data: ExtendUserSubscriptionPayload): Promise<ExtendUserSubscriptionResult> => {
|
||||
return adminRequest('users/extend-subscription', data);
|
||||
};
|
||||
|
||||
export type FinalizeUserSubscriptionPayload = {
|
||||
userId: string;
|
||||
reason?: string;
|
||||
};
|
||||
|
||||
export type FinalizeUserSubscriptionResult = {
|
||||
userId: string;
|
||||
subscriptionId: string;
|
||||
previousEndDate: string;
|
||||
newEndDate: string;
|
||||
};
|
||||
|
||||
export const finalizeUserSubscription = async (data: FinalizeUserSubscriptionPayload): Promise<FinalizeUserSubscriptionResult> => {
|
||||
return adminRequest('users/finalize-subscription', data);
|
||||
};
|
||||
|
||||
export type Plan = {
|
||||
id?: string;
|
||||
_id?: string;
|
||||
name: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
code: string;
|
||||
price: number;
|
||||
annualPrice: number;
|
||||
limitOrganizations: number;
|
||||
limitEmployees: number;
|
||||
limitServices: number;
|
||||
limitAppointments: number;
|
||||
limitClients: number;
|
||||
limitRepeats: number;
|
||||
mailNotifications: boolean;
|
||||
smsNotifications: boolean;
|
||||
wapNotifications: boolean;
|
||||
payments: boolean;
|
||||
bot: boolean;
|
||||
active: boolean;
|
||||
dateLimit: boolean;
|
||||
discount3Months?: number;
|
||||
discount6Months?: number;
|
||||
discount12Months?: number;
|
||||
featured?: boolean;
|
||||
};
|
||||
|
||||
export type UpdatePlanPayload = Partial<Omit<Plan, 'id' | '_id'>> & {
|
||||
planId: string;
|
||||
};
|
||||
|
||||
export const fetchPlans = async (): Promise<Plan[]> => {
|
||||
return adminRequest('plans/list', {});
|
||||
};
|
||||
|
||||
export const updatePlan = async (data: UpdatePlanPayload) => {
|
||||
return adminRequest('plans/update', data);
|
||||
};
|
||||
|
||||
// Wap Servers API Calls
|
||||
export const fetchWapServers = async (filters: any) => {
|
||||
return adminRequest('wap/paginate', filters);
|
||||
};
|
||||
|
||||
export type WapServer = {
|
||||
id?: string;
|
||||
_id?: string;
|
||||
name?: string;
|
||||
description?: string;
|
||||
ipv4: string;
|
||||
ipv6?: string;
|
||||
countBots: number;
|
||||
maxBots: number;
|
||||
port: number;
|
||||
active: boolean;
|
||||
};
|
||||
|
||||
export type UpdateWapServerPayload = {
|
||||
serverId: string;
|
||||
name?: string;
|
||||
ipv4?: string;
|
||||
port?: number;
|
||||
maxBots?: number;
|
||||
active?: boolean;
|
||||
};
|
||||
|
||||
export type CreateWapServerPayload = {
|
||||
name: string;
|
||||
ipv4: string;
|
||||
port: number;
|
||||
maxBots: number;
|
||||
ipv6?: string;
|
||||
description?: string;
|
||||
active?: boolean;
|
||||
};
|
||||
|
||||
export const createWapServer = async (data: CreateWapServerPayload): Promise<WapServer> => {
|
||||
return adminRequest('wap/create', data);
|
||||
};
|
||||
|
||||
export const updateWapServer = async (data: UpdateWapServerPayload): Promise<WapServer> => {
|
||||
return adminRequest('wap/update', data);
|
||||
};
|
||||
|
||||
export type WapAssignedOrganization = {
|
||||
id: string;
|
||||
name?: string;
|
||||
};
|
||||
|
||||
export type WapContainerDto = {
|
||||
id?: string;
|
||||
name?: string;
|
||||
organizationId?: string;
|
||||
image?: string;
|
||||
state?: string;
|
||||
status?: string;
|
||||
ports?: unknown[];
|
||||
created?: number;
|
||||
};
|
||||
|
||||
export type WapServerAuditResult = {
|
||||
serverId: string;
|
||||
assignedOrganizations: WapAssignedOrganization[];
|
||||
detectedBots: WapContainerDto[];
|
||||
validBots: WapContainerDto[];
|
||||
ghostBots: WapContainerDto[];
|
||||
missingBots: WapAssignedOrganization[];
|
||||
expectedCountBots: number;
|
||||
storedCountBots: number;
|
||||
runtimeCountBots: number;
|
||||
countMismatch: boolean;
|
||||
};
|
||||
|
||||
export type WapServerRecalculateCountResult = {
|
||||
serverId: string;
|
||||
before: number;
|
||||
after: number;
|
||||
};
|
||||
|
||||
export type WapServerDeleteResult = {
|
||||
serverId: string;
|
||||
deleted: true;
|
||||
force?: boolean;
|
||||
detachedOrganizations?: number;
|
||||
deletedRuntimeBots?: number;
|
||||
skippedRuntimeBots?: number;
|
||||
auditFailed?: boolean;
|
||||
auditMessage?: string;
|
||||
};
|
||||
|
||||
export type WapServerDeletePayload = {
|
||||
serverId: string;
|
||||
force?: boolean;
|
||||
};
|
||||
|
||||
export type WapServerOrganizationActionPayload = {
|
||||
serverId: string;
|
||||
organizationId: string;
|
||||
};
|
||||
|
||||
export type WapServerQrResult = WapServerOrganizationActionPayload & {
|
||||
qr: string;
|
||||
};
|
||||
|
||||
export type WapServerDetachResult = WapServerOrganizationActionPayload & {
|
||||
botDeleted: boolean;
|
||||
botAlreadyMissing: boolean;
|
||||
before: number;
|
||||
after: number;
|
||||
};
|
||||
|
||||
export const auditWapServer = async (serverId: string): Promise<WapServerAuditResult> => {
|
||||
return adminRequest('wap/audit', { serverId });
|
||||
};
|
||||
|
||||
export const recalculateWapServerCount = async (serverId: string): Promise<WapServerRecalculateCountResult> => {
|
||||
return adminRequest('wap/recalculate-count', { serverId });
|
||||
};
|
||||
|
||||
export const deleteWapServer = async (data: WapServerDeletePayload): Promise<WapServerDeleteResult> => {
|
||||
return adminRequest('wap/delete', data);
|
||||
};
|
||||
|
||||
export const startWapBot = async (data: WapServerOrganizationActionPayload): Promise<void> => {
|
||||
await adminRequest('wap/bot/start', data);
|
||||
};
|
||||
|
||||
export const stopWapBot = async (data: WapServerOrganizationActionPayload): Promise<void> => {
|
||||
await adminRequest('wap/bot/stop', data);
|
||||
};
|
||||
|
||||
export const restartWapBot = async (data: WapServerOrganizationActionPayload): Promise<void> => {
|
||||
await adminRequest('wap/bot/restart', data);
|
||||
};
|
||||
|
||||
export const getWapBotQr = async (data: WapServerOrganizationActionPayload): Promise<WapServerQrResult> => {
|
||||
return adminRequest('wap/bot/qr', data);
|
||||
};
|
||||
|
||||
export const deleteWapBot = async (data: WapServerOrganizationActionPayload): Promise<void> => {
|
||||
await adminRequest('wap/bot/delete', data);
|
||||
};
|
||||
|
||||
export const detachWapOrganizationServer = async (data: WapServerOrganizationActionPayload): Promise<WapServerDetachResult> => {
|
||||
return adminRequest('wap/bot/detach', data);
|
||||
};
|
||||
|
||||
// Companies API Calls
|
||||
export const fetchCompanies = async (filters: any) => {
|
||||
return adminRequest('companies/paginate', filters);
|
||||
};
|
||||
|
||||
export const updateCompany = async (data: any) => {
|
||||
return adminRequest('companies/update', data);
|
||||
};
|
||||
|
||||
export const setCompanyBanned = async (id: string, banned: boolean) => {
|
||||
return adminRequest('companies/set-banned', { id, banned });
|
||||
};
|
||||
|
||||
export type OrganizationInsights = {
|
||||
organization: {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
categoryId: number;
|
||||
banned: boolean;
|
||||
published?: string;
|
||||
onboardingStep?: number;
|
||||
onboardingCompleted?: boolean;
|
||||
};
|
||||
owner: {
|
||||
id: string;
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
email?: string;
|
||||
verificated?: boolean;
|
||||
phoneCountryCode?: string;
|
||||
phoneAreaCode?: string;
|
||||
phoneNumber?: string;
|
||||
} | null;
|
||||
collaborators: {
|
||||
id: string;
|
||||
userId?: string;
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
fullName?: string;
|
||||
email?: string;
|
||||
roles?: string[];
|
||||
removed?: boolean;
|
||||
active: boolean;
|
||||
avatar?: string;
|
||||
}[];
|
||||
subscription: {
|
||||
id: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
isActive: boolean;
|
||||
autoRenew: boolean;
|
||||
mpStatus?: string;
|
||||
pendingPaymentType?: 'extension' | 'upgrade';
|
||||
plan: {
|
||||
id: string;
|
||||
name: string;
|
||||
code: string;
|
||||
price: number;
|
||||
limitOrganizations: number;
|
||||
limitEmployees: number;
|
||||
limitServices: number;
|
||||
limitAppointments: number;
|
||||
limitClients: number;
|
||||
} | null;
|
||||
} | null;
|
||||
stats: {
|
||||
employeesCount: number;
|
||||
activeEmployeesCount: number;
|
||||
servicesCount: number;
|
||||
activeServicesCount: number;
|
||||
clientsCount: number;
|
||||
activeClientsCount: number;
|
||||
reservationsLast30Days: number;
|
||||
};
|
||||
};
|
||||
|
||||
export const fetchOrganizationInsights = async (companyId: string): Promise<OrganizationInsights> => {
|
||||
return adminRequest('companies/insights', { companyId });
|
||||
};
|
||||
|
||||
// Services API Calls
|
||||
export const fetchServices = async (filters: any) => {
|
||||
return adminRequest('services/paginate', filters);
|
||||
};
|
||||
|
||||
export const setServiceBanned = async (id: string, banned: boolean) => {
|
||||
return adminRequest('services/set-banned', { id, banned });
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,126 @@
|
||||
import { Outlet, NavLink } from 'react-router-dom';
|
||||
import { Users, LayoutDashboard, LogOut, Server, Building2, BadgeDollarSign } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import txadminIcon from '../../assets/txadmin-icon.png';
|
||||
|
||||
type DashboardLayoutProps = {
|
||||
keyPath: string | null;
|
||||
onSelectPrivateKey: () => void;
|
||||
};
|
||||
|
||||
export const DashboardLayout = ({ keyPath, onSelectPrivateKey }: DashboardLayoutProps) => {
|
||||
return (
|
||||
<div className="dashboard-container" style={{ display: 'flex', minHeight: 'calc(100vh - 42px)', overflow: 'hidden' }}>
|
||||
{/* Sidebar */}
|
||||
<motion.aside
|
||||
initial={{ x: -200, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
className="glass-panel sidebar"
|
||||
style={{ display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<div style={{ marginBottom: '2rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<img src={txadminIcon} alt="txadmin" style={{ width: '40px', height: '40px', borderRadius: '12px', objectFit: 'cover' }} />
|
||||
<h2 style={{ fontSize: '1.2rem', fontWeight: '700', letterSpacing: '1px' }}>txadmin</h2>
|
||||
</div>
|
||||
|
||||
<nav style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||
<NavLink to="/" end className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
|
||||
<LayoutDashboard size={20} />
|
||||
Dashboard
|
||||
</NavLink>
|
||||
<NavLink to="/users" className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
|
||||
<Users size={20} />
|
||||
Users
|
||||
</NavLink>
|
||||
<NavLink to="/companies" className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
|
||||
<Building2 size={20} />
|
||||
Organizations
|
||||
</NavLink>
|
||||
<NavLink to="/plans" className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
|
||||
<BadgeDollarSign size={20} />
|
||||
Plans
|
||||
</NavLink>
|
||||
<NavLink to="/wapservers" className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
|
||||
<Server size={20} />
|
||||
WAP Servers
|
||||
</NavLink>
|
||||
</nav>
|
||||
|
||||
<div style={{ marginTop: 'auto', paddingTop: '1rem', borderTop: '1px solid var(--glass-border)' }}>
|
||||
<button className="nav-item" style={{ width: '100%', background: 'transparent', color: 'var(--text-muted)' }} onClick={onSelectPrivateKey} title={keyPath ?? undefined}>
|
||||
<LogOut size={20} />
|
||||
Change Key
|
||||
</button>
|
||||
</div>
|
||||
</motion.aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="main-content" style={{ flex: 1, padding: '1rem', display: 'flex', flexDirection: 'column', height: 'calc(100vh - 42px)', overflow: 'hidden' }}>
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
{/* Global Sidebar styles */}
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
color: var(--text-muted);
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-main);
|
||||
}
|
||||
.nav-item.active {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
|
||||
color: var(--primary);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-container {
|
||||
flex-direction: column !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
.sidebar {
|
||||
width: auto;
|
||||
margin: 1rem;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
}
|
||||
.sidebar nav {
|
||||
flex-direction: row !important;
|
||||
flex: unset !important;
|
||||
gap: 1rem;
|
||||
}
|
||||
.sidebar .nav-item {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.sidebar > div:first-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.sidebar > div:last-child {
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
.main-content {
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,114 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { X, ShieldAlert, ShieldCheck } from 'lucide-react';
|
||||
import { fetchServices, setServiceBanned } from '../../api/sysadmin';
|
||||
|
||||
interface CompanyServicesModalProps {
|
||||
company: any;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const CompanyServicesModal: React.FC<CompanyServicesModalProps> = ({ company, onClose }) => {
|
||||
const [services, setServices] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
|
||||
const loadServices = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetchServices({ companyId: company.id || company._id, page, limit: 10 });
|
||||
setServices(res.data);
|
||||
setTotalPages(res.pages);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert('Error cargando servicios');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadServices();
|
||||
}, [page]);
|
||||
|
||||
const handleToggleBanned = async (service: any) => {
|
||||
if (window.confirm(`¿Deseas ${service.banned ? 'quitar el ban' : 'banear'} el servicio ${service.name}?`)) {
|
||||
try {
|
||||
await setServiceBanned(service.id || service._id, !service.banned);
|
||||
loadServices();
|
||||
} catch (e: any) {
|
||||
alert('Error al actualizar el estado del servicio');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100 }}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="glass-panel"
|
||||
style={{ width: '90%', maxWidth: '800px', padding: '2rem', position: 'relative', display: 'flex', flexDirection: 'column', maxHeight: '80vh' }}
|
||||
>
|
||||
<button onClick={onClose} style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'transparent', color: 'var(--text-muted)' }}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1.5rem', fontWeight: 'bold' }}>
|
||||
Servicios de {company.name}
|
||||
</h2>
|
||||
|
||||
<div style={{ overflow: 'auto', flex: 1 }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
|
||||
<thead style={{ position: 'sticky', top: 0, background: 'rgba(10, 10, 15, 0.95)', zIndex: 1 }}>
|
||||
<tr>
|
||||
<th style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600' }}>Servicio</th>
|
||||
<th style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600' }}>Precio / Duración</th>
|
||||
<th style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600', textAlign: 'right' }}>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr><td colSpan={3} style={{ padding: '2rem', textAlign: 'center' }}>Cargando...</td></tr>
|
||||
) : services.length === 0 ? (
|
||||
<tr><td colSpan={3} style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>No se encontraron servicios</td></tr>
|
||||
) : (
|
||||
services.map(s => (
|
||||
<tr key={s.id || s._id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<div style={{ fontWeight: '600', color: 'var(--text-main)' }}>{s.name}</div>
|
||||
<div style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>{s.description || '-'}</div>
|
||||
</td>
|
||||
<td style={{ padding: '1rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
|
||||
${s.price} / {s.length} min
|
||||
</td>
|
||||
<td style={{ padding: '1rem', textAlign: 'right' }}>
|
||||
<button
|
||||
onClick={() => handleToggleBanned(s)}
|
||||
className="btn-secondary"
|
||||
style={{ display: 'inline-flex', alignItems: 'center', gap: '5px', color: s.banned ? 'var(--danger)' : 'var(--success)', padding: '6px 12px' }}
|
||||
>
|
||||
{s.banned ? <ShieldAlert size={16} /> : <ShieldCheck size={16} />}
|
||||
{s.banned ? 'Baneado' : 'Activo'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div style={{ padding: '1rem 0 0 0', borderTop: '1px solid var(--glass-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '1rem' }}>
|
||||
<span style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>Página {page} de {totalPages || 1}</span>
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<button className="btn-secondary" disabled={page === 1} onClick={() => setPage(p => p - 1)}>Anterior</button>
|
||||
<button className="btn-secondary" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>Siguiente</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,112 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { X, Save } from 'lucide-react';
|
||||
import { updateCompany, setCompanyBanned } from '../../api/sysadmin';
|
||||
|
||||
interface EditCompanyModalProps {
|
||||
company: any;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
export const EditCompanyModal: React.FC<EditCompanyModalProps> = ({ company, onClose, onSaved }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
id: company.id || company._id,
|
||||
name: company.name || '',
|
||||
description: company.description || '',
|
||||
categoryId: company.categoryId || '',
|
||||
banned: company.banned || false
|
||||
});
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
try {
|
||||
await updateCompany({
|
||||
...formData,
|
||||
categoryId: parseInt(formData.categoryId.toString(), 10)
|
||||
});
|
||||
if (company.banned !== formData.banned) {
|
||||
await setCompanyBanned(formData.id, formData.banned);
|
||||
}
|
||||
alert('Organización actualizada');
|
||||
onSaved();
|
||||
onClose();
|
||||
} catch (err: any) {
|
||||
alert(err.response?.data?.message || err.message || 'Error al actualizar');
|
||||
}
|
||||
setSaving(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100 }}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="glass-panel"
|
||||
style={{ width: '90%', maxWidth: '500px', padding: '2rem', position: 'relative' }}
|
||||
>
|
||||
<button onClick={onClose} style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'transparent', color: 'var(--text-muted)' }}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1.5rem', fontWeight: 'bold' }}>Editar Organización</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input-glass"
|
||||
style={{ width: '100%' }}
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({...formData, name: e.target.value})}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>Descripción</label>
|
||||
<textarea
|
||||
className="input-glass"
|
||||
style={{ width: '100%', minHeight: '80px', resize: 'vertical' }}
|
||||
value={formData.description}
|
||||
onChange={e => setFormData({...formData, description: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>Categoría (ID)</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input-glass"
|
||||
style={{ width: '100%' }}
|
||||
value={formData.categoryId}
|
||||
onChange={e => setFormData({...formData, categoryId: e.target.value})}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="banned-toggle"
|
||||
checked={formData.banned}
|
||||
onChange={e => setFormData({...formData, banned: e.target.checked})}
|
||||
style={{ width: '18px', height: '18px', cursor: 'pointer' }}
|
||||
/>
|
||||
<label htmlFor="banned-toggle" style={{ fontSize: '0.9rem', color: formData.banned ? 'var(--danger)' : 'var(--text-main)', cursor: 'pointer', userSelect: 'none' }}>
|
||||
Organización Baneada
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem', marginTop: '1rem' }}>
|
||||
<button type="button" onClick={onClose} className="btn-secondary" disabled={saving}>Cancelar</button>
|
||||
<button type="submit" className="btn-primary" style={{ display: 'flex', alignItems: 'center', gap: '8px' }} disabled={saving}>
|
||||
<Save size={18} /> {saving ? 'Guardando...' : 'Guardar Cambios'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,159 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { X } from 'lucide-react';
|
||||
import { updatePlan } from '../../api/sysadmin';
|
||||
import type { Plan } from '../../api/sysadmin';
|
||||
|
||||
type EditPlanModalProps = {
|
||||
plan: Plan;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
};
|
||||
|
||||
const numberFields: { key: keyof Plan; label: string }[] = [
|
||||
{ key: 'price', label: 'Precio mensual' },
|
||||
{ key: 'annualPrice', label: 'Precio anual' },
|
||||
{ key: 'limitOrganizations', label: 'Límite de organizaciones' },
|
||||
{ key: 'limitEmployees', label: 'Límite de empleados' },
|
||||
{ key: 'limitServices', label: 'Límite de servicios' },
|
||||
{ key: 'limitAppointments', label: 'Límite de turnos' },
|
||||
{ key: 'limitClients', label: 'Límite de clientes' },
|
||||
{ key: 'limitRepeats', label: 'Límite de repeticiones' },
|
||||
{ key: 'discount3Months', label: 'Descuento 3 meses (%)' },
|
||||
{ key: 'discount6Months', label: 'Descuento 6 meses (%)' },
|
||||
{ key: 'discount12Months', label: 'Descuento 12 meses (%)' },
|
||||
];
|
||||
|
||||
const limitFields = new Set<keyof Plan>([
|
||||
'limitOrganizations',
|
||||
'limitEmployees',
|
||||
'limitServices',
|
||||
'limitAppointments',
|
||||
'limitClients',
|
||||
'limitRepeats',
|
||||
]);
|
||||
|
||||
const booleanFields: { key: keyof Plan; label: string }[] = [
|
||||
{ key: 'active', label: 'Activo para contratación' },
|
||||
{ key: 'featured', label: 'Destacado' },
|
||||
{ key: 'mailNotifications', label: 'Notificaciones por email' },
|
||||
{ key: 'smsNotifications', label: 'Notificaciones SMS' },
|
||||
{ key: 'wapNotifications', label: 'Notificaciones WhatsApp' },
|
||||
{ key: 'payments', label: 'Pagos habilitados' },
|
||||
{ key: 'bot', label: 'Bot habilitado' },
|
||||
{ key: 'dateLimit', label: 'Tiene límite de fecha' },
|
||||
];
|
||||
|
||||
export const EditPlanModal = ({ plan, onClose, onSaved }: EditPlanModalProps) => {
|
||||
const [formData, setFormData] = useState<Plan>({
|
||||
...plan,
|
||||
features: Array.isArray(plan.features) ? plan.features : [],
|
||||
});
|
||||
const [featuresText, setFeaturesText] = useState(formData.features.join('\n'));
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const planId = plan._id || plan.id || '';
|
||||
|
||||
const setField = (key: keyof Plan, value: string | number | boolean | string[]) => {
|
||||
setFormData({ ...formData, [key]: value });
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
try {
|
||||
await updatePlan({
|
||||
planId,
|
||||
name: formData.name,
|
||||
description: formData.description,
|
||||
code: formData.code,
|
||||
price: Number(formData.price) || 0,
|
||||
annualPrice: Number(formData.annualPrice) || 0,
|
||||
limitOrganizations: Number(formData.limitOrganizations) || 0,
|
||||
limitEmployees: Number(formData.limitEmployees) || 0,
|
||||
limitServices: Number(formData.limitServices) || 0,
|
||||
limitAppointments: Number(formData.limitAppointments) || 0,
|
||||
limitClients: Number(formData.limitClients) || 0,
|
||||
limitRepeats: Number(formData.limitRepeats) || 0,
|
||||
discount3Months: Number(formData.discount3Months) || 0,
|
||||
discount6Months: Number(formData.discount6Months) || 0,
|
||||
discount12Months: Number(formData.discount12Months) || 0,
|
||||
active: Boolean(formData.active),
|
||||
featured: Boolean(formData.featured),
|
||||
mailNotifications: Boolean(formData.mailNotifications),
|
||||
smsNotifications: Boolean(formData.smsNotifications),
|
||||
wapNotifications: Boolean(formData.wapNotifications),
|
||||
payments: Boolean(formData.payments),
|
||||
bot: Boolean(formData.bot),
|
||||
dateLimit: Boolean(formData.dateLimit),
|
||||
features: featuresText.split('\n').map(feature => feature.trim()).filter(Boolean),
|
||||
});
|
||||
onSaved();
|
||||
onClose();
|
||||
} catch (err: any) {
|
||||
alert(err.response?.data?.message || err.message || 'Error guardando el plan');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }}>
|
||||
<motion.div initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="glass-panel" style={{ width: '94%', maxWidth: '860px', maxHeight: '90vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}>
|
||||
<button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1.5rem' }}>Editar plan: {plan.name}</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '1rem' }}>
|
||||
<div>
|
||||
<label className="modal-label">Nombre</label>
|
||||
<input className="input-glass" value={formData.name} onChange={e => setField('name', e.target.value)} required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="modal-label">Código</label>
|
||||
<input className="input-glass" value={formData.code} onChange={e => setField('code', e.target.value)} required />
|
||||
</div>
|
||||
<div style={{ gridColumn: '1 / -1' }}>
|
||||
<label className="modal-label">Descripción</label>
|
||||
<textarea className="input-glass" rows={3} value={formData.description} onChange={e => setField('description', e.target.value)} required />
|
||||
</div>
|
||||
|
||||
<h3 className="plan-modal-section">Precios, límites y descuentos</h3>
|
||||
{numberFields.map(field => (
|
||||
<div key={field.key}>
|
||||
<label className="modal-label">{field.label}</label>
|
||||
<input className="input-glass" type="number" min={limitFields.has(field.key) ? undefined : '0'} step="0.01" value={Number(formData[field.key] || 0)} onChange={e => setField(field.key, Number(e.target.value))} />
|
||||
</div>
|
||||
))}
|
||||
|
||||
<h3 className="plan-modal-section">Funciones y estado</h3>
|
||||
{booleanFields.map(field => (
|
||||
<label key={field.key} className="plan-toggle">
|
||||
<input type="checkbox" checked={Boolean(formData[field.key])} onChange={e => setField(field.key, e.target.checked)} />
|
||||
{field.label}
|
||||
</label>
|
||||
))}
|
||||
|
||||
<div style={{ gridColumn: '1 / -1' }}>
|
||||
<label className="modal-label">Features visibles (una por línea)</label>
|
||||
<textarea className="input-glass" rows={5} value={featuresText} onChange={e => setFeaturesText(e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div style={{ gridColumn: '1 / -1', marginTop: '1rem', display: 'flex', justifyContent: 'flex-end', gap: '1rem' }}>
|
||||
<button type="button" className="btn-secondary" onClick={onClose}>Cancelar</button>
|
||||
<button type="submit" className="btn-primary" disabled={loading || !planId}>{loading ? 'Guardando...' : 'Guardar cambios'}</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
.modal-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
|
||||
.plan-modal-section { grid-column: 1 / -1; margin: 1rem 0 0.25rem; color: var(--primary); font-size: 1.05rem; }
|
||||
.plan-toggle { display: flex; align-items: center; gap: 0.6rem; color: var(--text-main); background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); border-radius: 10px; padding: 0.75rem; }
|
||||
.plan-toggle input { width: 16px; height: 16px; }
|
||||
@media (max-width: 768px) { form { grid-template-columns: 1fr !important; } }
|
||||
`}} />
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,127 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { X } from 'lucide-react';
|
||||
import { updateUserProfile, setVerifiedStatus } from '../../api/sysadmin';
|
||||
|
||||
export const EditUserModal = ({ user, onClose, onSaved }: { user: any, onClose: () => void, onSaved: () => void }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: user.firstName || '',
|
||||
lastName: user.lastName || '',
|
||||
street: user.street || '',
|
||||
streetNumber: user.streetNumber || '',
|
||||
city: user.city || '',
|
||||
state: user.state || '',
|
||||
country: user.country || '',
|
||||
phoneCountryCode: user.phoneCountryCode || '',
|
||||
phoneAreaCode: user.phoneAreaCode || '',
|
||||
phoneNumber: user.phoneNumber || '',
|
||||
verificated: user.verificated || false,
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
try {
|
||||
const promises: Promise<any>[] = [
|
||||
updateUserProfile({ userId: user._id, ...formData })
|
||||
];
|
||||
if (formData.verificated !== user.verificated) {
|
||||
promises.push(setVerifiedStatus(user._id, formData.verificated));
|
||||
}
|
||||
await Promise.all(promises);
|
||||
onSaved();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
alert('Error guardando perfil');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="glass-panel"
|
||||
style={{ width: '90%', maxWidth: '600px', maxHeight: '90vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}
|
||||
>
|
||||
<button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1.5rem' }}>Editar Perfil: {user.email}</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
|
||||
<div>
|
||||
<label className="modal-label">Nombre</label>
|
||||
<input className="input-glass" value={formData.firstName} onChange={e => setFormData({...formData, firstName: e.target.value})} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="modal-label">Apellido</label>
|
||||
<input className="input-glass" value={formData.lastName} onChange={e => setFormData({...formData, lastName: e.target.value})} />
|
||||
</div>
|
||||
|
||||
<div style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<h3 style={{ margin: '1rem 0 0.5rem', color: 'var(--primary)', fontSize: '1.1rem' }}>Contacto</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormData({...formData, verificated: !formData.verificated})}
|
||||
className="btn-secondary"
|
||||
style={{ display: 'flex', alignItems: 'center', gap: '8px', color: formData.verificated ? 'var(--success)' : 'var(--warning)', padding: '4px 12px' }}
|
||||
>
|
||||
{formData.verificated ? 'Usuario Verificado' : 'Usuario No Verificado'}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<label className="modal-label">Cód. País</label>
|
||||
<input className="input-glass" value={formData.phoneCountryCode} onChange={e => setFormData({...formData, phoneCountryCode: e.target.value})} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="modal-label">Cód. Área</label>
|
||||
<input className="input-glass" value={formData.phoneAreaCode} onChange={e => setFormData({...formData, phoneAreaCode: e.target.value})} />
|
||||
</div>
|
||||
<div style={{ gridColumn: '1 / -1' }}>
|
||||
<label className="modal-label">Teléfono</label>
|
||||
<input className="input-glass" value={formData.phoneNumber} onChange={e => setFormData({...formData, phoneNumber: e.target.value})} />
|
||||
</div>
|
||||
|
||||
<div style={{ gridColumn: '1 / -1' }}>
|
||||
<h3 style={{ margin: '1rem 0 0.5rem', color: 'var(--primary)', fontSize: '1.1rem' }}>Dirección</h3>
|
||||
</div>
|
||||
<div>
|
||||
<label className="modal-label">Calle</label>
|
||||
<input className="input-glass" value={formData.street} onChange={e => setFormData({...formData, street: e.target.value})} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="modal-label">Número</label>
|
||||
<input className="input-glass" value={formData.streetNumber} onChange={e => setFormData({...formData, streetNumber: e.target.value})} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="modal-label">Ciudad</label>
|
||||
<input className="input-glass" value={formData.city} onChange={e => setFormData({...formData, city: e.target.value})} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="modal-label">País</label>
|
||||
<input className="input-glass" value={formData.country} onChange={e => setFormData({...formData, country: e.target.value})} />
|
||||
</div>
|
||||
|
||||
<div style={{ gridColumn: '1 / -1', marginTop: '1.5rem', display: 'flex', justifyContent: 'flex-end', gap: '1rem' }}>
|
||||
<button type="button" className="btn-secondary" onClick={onClose}>Cancelar</button>
|
||||
<button type="submit" className="btn-primary" disabled={loading}>{loading ? 'Guardando...' : 'Guardar Cambios'}</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
.modal-label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
`}} />
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,159 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { AlertCircle, CalendarDays, CheckCircle2, Users, X } from 'lucide-react';
|
||||
import { fetchOrganizationInsights } from '../../api/sysadmin';
|
||||
import type { OrganizationInsights } from '../../api/sysadmin';
|
||||
|
||||
interface OrganizationInsightsModalProps {
|
||||
company: any;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const formatDate = (value?: string) => {
|
||||
if (!value) return '-';
|
||||
return new Intl.DateTimeFormat('es-AR', { dateStyle: 'medium' }).format(new Date(value));
|
||||
};
|
||||
|
||||
const fullName = (owner: OrganizationInsights['owner']) => {
|
||||
if (!owner) return '-';
|
||||
return [owner.firstName, owner.lastName].filter(Boolean).join(' ') || owner.email || '-';
|
||||
};
|
||||
|
||||
const phone = (owner: OrganizationInsights['owner']) => {
|
||||
if (!owner) return '-';
|
||||
return [owner.phoneCountryCode, owner.phoneAreaCode, owner.phoneNumber].filter(Boolean).join(' ') || '-';
|
||||
};
|
||||
|
||||
const collaboratorName = (collaborator: OrganizationInsights['collaborators'][number]) => {
|
||||
return collaborator.fullName || [collaborator.firstName, collaborator.lastName].filter(Boolean).join(' ') || collaborator.email || collaborator.userId || '-';
|
||||
};
|
||||
|
||||
const StatCard = ({ label, value }: { label: string; value: number }) => (
|
||||
<div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
|
||||
<div style={{ color: 'var(--text-muted)', fontSize: '0.82rem', marginBottom: '0.35rem' }}>{label}</div>
|
||||
<div style={{ color: 'var(--text-main)', fontSize: '1.6rem', fontWeight: 700 }}>{value}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const OrganizationInsightsModal: React.FC<OrganizationInsightsModalProps> = ({ company, onClose }) => {
|
||||
const [insights, setInsights] = useState<OrganizationInsights | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const loadInsights = async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const result = await fetchOrganizationInsights(company.id || company._id);
|
||||
setInsights(result);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setError('No se pudo cargar el detalle de la organización.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadInsights();
|
||||
}, [company]);
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100 }}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="glass-panel"
|
||||
style={{ width: '92%', maxWidth: '900px', padding: '2rem', position: 'relative', display: 'flex', flexDirection: 'column', maxHeight: '85vh', overflow: 'auto' }}
|
||||
>
|
||||
<button onClick={onClose} style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'transparent', color: 'var(--text-muted)' }}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '0.35rem', fontWeight: 'bold' }}>Detalle de {company.name}</h2>
|
||||
<p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>Vista de solo lectura para SysAdmin.</p>
|
||||
|
||||
{loading ? (
|
||||
<div style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>Cargando detalle...</div>
|
||||
) : error ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', color: 'var(--danger)', padding: '1rem', border: '1px solid rgba(255,0,0,0.25)', borderRadius: '12px' }}>
|
||||
<AlertCircle size={18} /> {error}
|
||||
</div>
|
||||
) : !insights ? (
|
||||
<div style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>No hay información disponible.</div>
|
||||
) : (
|
||||
<div style={{ display: 'grid', gap: '1rem' }}>
|
||||
<section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '1rem' }}>
|
||||
<StatCard label="Colaboradores" value={insights.stats.employeesCount} />
|
||||
<StatCard label="Colaboradores activos" value={insights.stats.activeEmployeesCount} />
|
||||
<StatCard label="Servicios" value={insights.stats.servicesCount} />
|
||||
<StatCard label="Servicios activos" value={insights.stats.activeServicesCount} />
|
||||
<StatCard label="Clientes" value={insights.stats.clientsCount} />
|
||||
<StatCard label="Clientes activos" value={insights.stats.activeClientsCount} />
|
||||
<StatCard label="Reservas últimos 30 días" value={insights.stats.reservationsLast30Days} />
|
||||
</section>
|
||||
|
||||
<section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '1rem' }}>
|
||||
<div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
|
||||
<h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><CheckCircle2 size={18} /> Organización</h3>
|
||||
<p><strong>Nombre:</strong> {insights.organization.name}</p>
|
||||
<p><strong>Slug:</strong> {insights.organization.slug || '-'}</p>
|
||||
<p><strong>Estado:</strong> {insights.organization.banned ? 'Baneada' : 'Activa'}</p>
|
||||
<p><strong>Publicación:</strong> {insights.organization.published || '-'}</p>
|
||||
<p><strong>Onboarding:</strong> {insights.organization.onboardingCompleted ? 'Completo' : `Paso ${insights.organization.onboardingStep || 0}`}</p>
|
||||
</div>
|
||||
|
||||
<div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
|
||||
<h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><Users size={18} /> Dueño</h3>
|
||||
<p><strong>Nombre:</strong> {fullName(insights.owner)}</p>
|
||||
<p><strong>Email:</strong> {insights.owner?.email || '-'}</p>
|
||||
<p><strong>Teléfono:</strong> {phone(insights.owner)}</p>
|
||||
<p><strong>Verificado:</strong> {insights.owner?.verificated ? 'Sí' : 'No'}</p>
|
||||
</div>
|
||||
|
||||
<div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
|
||||
<h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><CalendarDays size={18} /> Plan</h3>
|
||||
{insights.subscription ? (
|
||||
<>
|
||||
<p><strong>Plan:</strong> {insights.subscription.plan?.name || 'Sin plan asociado'}</p>
|
||||
<p><strong>Código:</strong> {insights.subscription.plan?.code || '-'}</p>
|
||||
<p><strong>Estado:</strong> {insights.subscription.mpStatus || (insights.subscription.isActive ? 'active' : 'inactive')}</p>
|
||||
<p><strong>Inicio:</strong> {formatDate(insights.subscription.startDate)}</p>
|
||||
<p><strong>Fin:</strong> {formatDate(insights.subscription.endDate)}</p>
|
||||
</>
|
||||
) : (
|
||||
<p style={{ color: 'var(--text-muted)' }}>No se encontró suscripción.</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
|
||||
<h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><Users size={18} /> Colaboradores</h3>
|
||||
{insights.collaborators.length === 0 ? (
|
||||
<p style={{ color: 'var(--text-muted)' }}>No hay colaboradores asociados.</p>
|
||||
) : (
|
||||
<div style={{ display: 'grid', gap: '0.75rem' }}>
|
||||
{insights.collaborators.map((collaborator) => (
|
||||
<div key={collaborator.id} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: '0.75rem', alignItems: 'center', padding: '0.75rem', border: '1px solid var(--glass-border)', borderRadius: '10px' }}>
|
||||
<div style={{ width: '36px', height: '36px', borderRadius: '999px', overflow: 'hidden', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)', fontWeight: 700 }}>
|
||||
{collaborator.avatar ? <img src={collaborator.avatar} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : collaboratorName(collaborator).charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ color: 'var(--text-main)', fontWeight: 600 }}>{collaboratorName(collaborator)}</div>
|
||||
<div style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>{collaborator.email || 'Sin email disponible'}</div>
|
||||
<div style={{ color: 'var(--text-muted)', fontSize: '0.78rem' }}>Roles: {collaborator.roles?.join(', ') || '-'}</div>
|
||||
</div>
|
||||
<span style={{ color: collaborator.active ? 'var(--success)' : 'var(--text-muted)', fontSize: '0.82rem', fontWeight: 700 }}>
|
||||
{collaborator.active ? 'Activo' : 'Removido'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,77 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { X, Building } from 'lucide-react';
|
||||
import { getOrganizationsStatus } from '../../api/sysadmin';
|
||||
|
||||
export const OrganizationsModal = ({ user, onClose }: { user: any, onClose: () => void }) => {
|
||||
const [data, setData] = useState<{ clientIn: any[], collaboratorIn: any[] } | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
getOrganizationsStatus(user._id).then(res => {
|
||||
setData(res);
|
||||
setLoading(false);
|
||||
}).catch(() => {
|
||||
alert('Error cargando organizaciones');
|
||||
setLoading(false);
|
||||
});
|
||||
}, [user]);
|
||||
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="glass-panel"
|
||||
style={{ width: '90%', maxWidth: '500px', maxHeight: '80vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}
|
||||
>
|
||||
<button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<Building size={24} color="var(--primary)" />
|
||||
Organizaciones Asociadas
|
||||
</h2>
|
||||
<p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>Usuario: {user.email}</p>
|
||||
|
||||
{loading ? (
|
||||
<p style={{ textAlign: 'center', padding: '2rem' }}>Cargando datos...</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||||
<div>
|
||||
<h3 style={{ fontSize: '1.1rem', color: 'var(--text-main)', marginBottom: '1rem', borderBottom: '1px solid var(--glass-border)', paddingBottom: '0.5rem' }}>Cliente en:</h3>
|
||||
{data?.clientIn.length === 0 ? (
|
||||
<p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>No es cliente de ninguna organización.</p>
|
||||
) : (
|
||||
<ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||
{data?.clientIn.map((org, i) => (
|
||||
<li key={i} style={{ background: 'rgba(255,255,255,0.03)', padding: '0.75rem', borderRadius: '8px', border: '1px solid var(--glass-border)' }}>
|
||||
{org.companyName} <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem', marginLeft: '10px' }}>(ID: {org.companyId})</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style={{ fontSize: '1.1rem', color: 'var(--text-main)', marginBottom: '1rem', borderBottom: '1px solid var(--glass-border)', paddingBottom: '0.5rem' }}>Colaborador en:</h3>
|
||||
{data?.collaboratorIn.length === 0 ? (
|
||||
<p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>No es colaborador de ninguna organización.</p>
|
||||
) : (
|
||||
<ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||
{data?.collaboratorIn.map((org, i) => (
|
||||
<li key={i} style={{ background: 'rgba(139, 92, 246, 0.1)', padding: '0.75rem', borderRadius: '8px', border: '1px solid rgba(139, 92, 246, 0.2)' }}>
|
||||
{org.companyName} <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem', marginLeft: '10px' }}>(ID: {org.companyId})</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,114 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { RefreshCw, X } from 'lucide-react';
|
||||
import { recalculatePlanUsageCycle, type RecalculatePlanUsageCycleResult } from '../../api/sysadmin';
|
||||
import { formatDateTime } from '../../utils/formatters';
|
||||
|
||||
export const RecalculationToolsModal = ({ initialUserId = '', onClose }: { initialUserId?: string, onClose: () => void }) => {
|
||||
const [usageUserId, setUsageUserId] = useState(initialUserId);
|
||||
const [usageResult, setUsageResult] = useState<RecalculatePlanUsageCycleResult | null>(null);
|
||||
const [usageLoading, setUsageLoading] = useState(false);
|
||||
const [usageError, setUsageError] = useState('');
|
||||
|
||||
const handleRecalculatePlanUsage = async () => {
|
||||
const trimmedUserId = usageUserId.trim();
|
||||
if (!trimmedUserId) {
|
||||
setUsageError('Ingresá un userId para recalcular el uso del plan.');
|
||||
return;
|
||||
}
|
||||
|
||||
setUsageUserId(trimmedUserId);
|
||||
setUsageLoading(true);
|
||||
setUsageError('');
|
||||
setUsageResult(null);
|
||||
|
||||
try {
|
||||
const result = await recalculatePlanUsageCycle(trimmedUserId);
|
||||
setUsageResult(result);
|
||||
} catch (e: any) {
|
||||
setUsageError(e.response?.data?.message || e.message || 'Error al recalcular el uso del plan');
|
||||
} finally {
|
||||
setUsageLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)', padding: '1rem' }}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="glass-panel"
|
||||
style={{ width: '90%', maxWidth: '760px', maxHeight: '90vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}
|
||||
>
|
||||
<button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<RefreshCw size={24} color="var(--primary)" />
|
||||
Herramientas de recálculo
|
||||
</h2>
|
||||
<p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>Funciones exclusivas de sysadmin para reparar o reconstruir contadores.</p>
|
||||
|
||||
<div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1.25rem' }}>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<h3 style={{ fontSize: '1.1rem', fontWeight: '700', marginBottom: '0.35rem' }}>Recalcular uso del plan</h3>
|
||||
<p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>Recuenta las reservas del ciclo actual y los contadores stock del userId seleccionado.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={(e) => { e.preventDefault(); handleRecalculatePlanUsage(); }} style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||||
<div style={{ flex: '1 1 300px' }}>
|
||||
<label className="modal-label">User ID</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input-glass"
|
||||
placeholder="Pegá o seleccioná un userId"
|
||||
value={usageUserId}
|
||||
onChange={(e) => setUsageUserId(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="btn-primary" disabled={usageLoading} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<RefreshCw size={18} /> {usageLoading ? 'Recalculando...' : 'Recalcular'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{usageError && <div style={{ marginTop: '1rem', color: 'var(--danger)', fontSize: '0.9rem' }}>{usageError}</div>}
|
||||
|
||||
{usageResult && (
|
||||
<div style={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||||
<div><strong>User ID</strong><br /><span className="long-id-value">{usageResult.userId}</span></div>
|
||||
<div><strong>Subscription ID</strong><br /><span className="long-id-value">{usageResult.subscriptionId}</span></div>
|
||||
<div><strong>Plan ID</strong><br /><span className="long-id-value">{usageResult.planId}</span></div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '0.75rem' }}>
|
||||
<div><strong>Cycle Start</strong><br /><span style={{ color: 'var(--text-muted)' }}>{formatDateTime(usageResult.cycleStart)}</span></div>
|
||||
<div><strong>Cycle End</strong><br /><span style={{ color: 'var(--text-muted)' }}>{formatDateTime(usageResult.cycleEnd)}</span></div>
|
||||
<div><strong>Organizations</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.organizationsCount}</span></div>
|
||||
<div><strong>Collaborators</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.employeesCount}</span></div>
|
||||
<div><strong>Services</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.servicesCount}</span></div>
|
||||
<div><strong>Clients</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.clientsCount}</span></div>
|
||||
<div><strong>Repeats</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.repeatsCount}</span></div>
|
||||
<div><strong>Appointments</strong><br /><span style={{ color: 'var(--success)', fontWeight: 700 }}>{usageResult.appointmentsCount}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
.modal-label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.long-id-value {
|
||||
display: block;
|
||||
color: var(--text-muted);
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
line-height: 1.45;
|
||||
}
|
||||
`}} />
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,297 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { CreditCard, X } from 'lucide-react';
|
||||
import { extendUserSubscription, finalizeUserSubscription, getUserSubscriptionDetails, type UserSubscriptionDetails } from '../../api/sysadmin';
|
||||
import { formatDateTime } from '../../utils/formatters';
|
||||
|
||||
type Props = {
|
||||
user: any;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export const SubscriptionDetailsModal = ({ user, onClose }: Props) => {
|
||||
const [details, setDetails] = useState<UserSubscriptionDetails | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [extensionDate, setExtensionDate] = useState('');
|
||||
const [extensionLoading, setExtensionLoading] = useState(false);
|
||||
const [extensionMessage, setExtensionMessage] = useState('');
|
||||
const [extensionError, setExtensionError] = useState('');
|
||||
const [finalizeLoading, setFinalizeLoading] = useState(false);
|
||||
|
||||
const formatAmount = (value?: number) => {
|
||||
if (typeof value !== 'number') return '-';
|
||||
return value.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' });
|
||||
};
|
||||
|
||||
const loadDetails = async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const result = await getUserSubscriptionDetails(user._id);
|
||||
setDetails(result);
|
||||
} catch (e: any) {
|
||||
setError(e.response?.data?.message || e.message || 'Error cargando suscripción');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadDetails();
|
||||
}, [user._id]);
|
||||
|
||||
const handleExtend = async (payload: { mode: 'add_months' | 'set_end_date'; months?: 1 | 2; endDate?: string }) => {
|
||||
if (!details?.currentSubscription) return;
|
||||
|
||||
setExtensionLoading(true);
|
||||
setExtensionError('');
|
||||
setExtensionMessage('');
|
||||
try {
|
||||
const result = await extendUserSubscription({
|
||||
userId: user._id,
|
||||
reason: 'Ajuste manual excepcional desde sysadmin-cli',
|
||||
...payload,
|
||||
});
|
||||
setExtensionMessage(`Vencimiento actualizado hasta ${formatDateTime(result.newEndDate)}. Se registró una bonificación $0.`);
|
||||
await loadDetails();
|
||||
} catch (e: any) {
|
||||
setExtensionError(e.response?.data?.message || e.message || 'Error extendiendo suscripción');
|
||||
} finally {
|
||||
setExtensionLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFinalize = async () => {
|
||||
if (!details?.currentSubscription) return;
|
||||
|
||||
const confirmed = window.confirm('Esto establecerá el vencimiento de la suscripción a ayer para forzar el comportamiento de plan vencido. No elimina datos ni cambia el plan directamente. ¿Continuar?');
|
||||
if (!confirmed) return;
|
||||
|
||||
setFinalizeLoading(true);
|
||||
setExtensionError('');
|
||||
setExtensionMessage('');
|
||||
try {
|
||||
const result = await finalizeUserSubscription({
|
||||
userId: user._id,
|
||||
reason: 'Finalización manual desde sysadmin-cli para probar expiración de plan',
|
||||
});
|
||||
setExtensionMessage(`Período finalizado. El vencimiento quedó en ${formatDateTime(result.newEndDate)} para forzar la expiración en la próxima lectura.`);
|
||||
await loadDetails();
|
||||
} catch (e: any) {
|
||||
setExtensionError(e.response?.data?.message || e.message || 'Error finalizando período');
|
||||
} finally {
|
||||
setFinalizeLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const subscription = details?.currentSubscription;
|
||||
|
||||
return (
|
||||
<div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)', padding: '1rem' }}>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="glass-panel"
|
||||
style={{ width: '90%', maxWidth: '860px', maxHeight: '90vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}
|
||||
>
|
||||
<button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
|
||||
<h2 style={{ fontSize: '1.5rem', marginBottom: '0.5rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<CreditCard size={24} color="var(--primary)" />
|
||||
Suscripción del usuario
|
||||
</h2>
|
||||
<p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>
|
||||
{user.firstName} {user.lastName} · {user.email}
|
||||
</p>
|
||||
|
||||
{loading && <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>Cargando suscripción...</div>}
|
||||
{error && <div style={{ padding: '1rem', color: 'var(--danger)' }}>{error}</div>}
|
||||
|
||||
{!loading && !error && details && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
<section className="subscription-card">
|
||||
<h3 className="subscription-section-title">Suscripción actual</h3>
|
||||
{!subscription ? (
|
||||
<p style={{ color: 'var(--text-muted)' }}>No hay suscripción registrada para este usuario.</p>
|
||||
) : (
|
||||
<div className="subscription-grid">
|
||||
<Info label="Subscription ID" value={subscription.id} long />
|
||||
<Info label="User ID" value={details.userId} long />
|
||||
<Info label="Plan" value={subscription.plan ? `${subscription.plan.name} (${subscription.plan.code})` : 'Plan no encontrado'} />
|
||||
<Info label="Plan ID" value={subscription.plan?.id || '-'} long />
|
||||
<Info label="Precio" value={formatAmount(subscription.plan?.price)} />
|
||||
<Info label="Inicio" value={formatDateTime(subscription.startDate)} />
|
||||
<Info label="Válida hasta" value={formatDateTime(subscription.endDate)} />
|
||||
<Info label="Activa" value={subscription.isActive ? 'Sí' : 'No'} />
|
||||
<Info label="MP status" value={subscription.mpStatus || '-'} />
|
||||
<Info label="Meses facturados" value={subscription.billingMonths?.toString() || '-'} />
|
||||
<Info label="Pago pendiente" value={subscription.pendingPaymentType || '-'} />
|
||||
<Info label="Preference pendiente" value={subscription.pendingPaymentPreferenceId || '-'} long />
|
||||
<Info label="Último pago" value={subscription.lastPaymentStatus || '-'} />
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{subscription && (
|
||||
<section className="subscription-card">
|
||||
<h3 className="subscription-section-title">Ajuste manual excepcional</h3>
|
||||
<p style={{ color: 'var(--text-muted)', marginBottom: '1rem' }}>
|
||||
Extiende la vigencia sin pago y registra un pago de bonificación por $0 asociado a esta suscripción.
|
||||
</p>
|
||||
<div className="extension-actions">
|
||||
<button className="btn btn-secondary" disabled={extensionLoading || finalizeLoading} onClick={() => handleExtend({ mode: 'add_months', months: 1 })}>
|
||||
Extender 1 mes
|
||||
</button>
|
||||
<button className="btn btn-secondary" disabled={extensionLoading || finalizeLoading} onClick={() => handleExtend({ mode: 'add_months', months: 2 })}>
|
||||
Extender 2 meses
|
||||
</button>
|
||||
<div className="extension-date-action">
|
||||
<input
|
||||
type="date"
|
||||
value={extensionDate}
|
||||
onChange={(event) => setExtensionDate(event.target.value)}
|
||||
disabled={extensionLoading || finalizeLoading}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
disabled={extensionLoading || finalizeLoading || !extensionDate}
|
||||
onClick={() => handleExtend({ mode: 'set_end_date', endDate: extensionDate })}
|
||||
>
|
||||
Establecer vencimiento
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="finalize-action">
|
||||
<div>
|
||||
<h4>Finalizar período</h4>
|
||||
<p>Establece el vencimiento en ayer para forzar el comportamiento de suscripción vencida en la próxima lectura. No elimina datos ni cambia el plan directamente.</p>
|
||||
</div>
|
||||
<button className="btn btn-danger" disabled={extensionLoading || finalizeLoading} onClick={handleFinalize}>
|
||||
Finalizar período
|
||||
</button>
|
||||
</div>
|
||||
{(extensionLoading || finalizeLoading) && <p style={{ color: 'var(--text-muted)', marginTop: '0.75rem' }}>Aplicando ajuste...</p>}
|
||||
{extensionMessage && <p style={{ color: 'var(--success)', marginTop: '0.75rem' }}>{extensionMessage}</p>}
|
||||
{extensionError && <p style={{ color: 'var(--danger)', marginTop: '0.75rem' }}>{extensionError}</p>}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="subscription-card">
|
||||
<h3 className="subscription-section-title">Pagos</h3>
|
||||
{details.payments.length === 0 ? (
|
||||
<p style={{ color: 'var(--text-muted)' }}>No hay pagos registrados para este usuario.</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||||
{details.payments.map((payment) => (
|
||||
<div key={payment.id} className="payment-row">
|
||||
<Info label="Payment ID" value={payment.id} long />
|
||||
<Info label="Subscription ID" value={payment.subscriptionId} long />
|
||||
<Info label="Monto" value={formatAmount(payment.amount)} />
|
||||
<Info label="Fecha" value={formatDateTime(payment.paymentDate)} />
|
||||
<Info label="Método" value={payment.paymentMethod || '-'} />
|
||||
<Info label="Estado" value={payment.status} />
|
||||
<Info label="Transaction ID" value={payment.transactionId || '-'} long />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
.subscription-card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.subscription-section-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.subscription-grid,
|
||||
.payment-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 0.85rem;
|
||||
}
|
||||
.payment-row {
|
||||
border-top: 1px solid var(--glass-border);
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
.subscription-label {
|
||||
display: block;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.subscription-value {
|
||||
display: block;
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
}
|
||||
.subscription-value.long {
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.extension-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
.extension-date-action {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
.extension-date-action input {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 8px;
|
||||
color: var(--text-main);
|
||||
padding: 0.65rem 0.75rem;
|
||||
}
|
||||
.finalize-action {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--glass-border);
|
||||
}
|
||||
.finalize-action h4 {
|
||||
color: var(--danger);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.finalize-action p {
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.finalize-action {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Info = ({ label, value, long = false }: { label: string; value: string; long?: boolean }) => (
|
||||
<div>
|
||||
<span className="subscription-label">{label}</span>
|
||||
<span className={`subscription-value${long ? ' long' : ''}`}>{value}</span>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,307 @@
|
||||
:root {
|
||||
/* Colors */
|
||||
--bg-dark: #0f172a; /* Slate 900 */
|
||||
--bg-dark-accent: #1e293b; /* Slate 800 */
|
||||
|
||||
--primary: #3b82f6; /* Blue 500 */
|
||||
--primary-hover: #2563eb; /* Blue 600 */
|
||||
--primary-glow: rgba(59, 130, 246, 0.5);
|
||||
|
||||
--accent: #8b5cf6; /* Violet 500 */
|
||||
--accent-glow: rgba(139, 92, 246, 0.4);
|
||||
|
||||
--success: #10b981; /* Emerald 500 */
|
||||
--danger: #ef4444; /* Red 500 */
|
||||
--warning: #f59e0b; /* Amber 500 */
|
||||
|
||||
--text-main: #f8fafc; /* Slate 50 */
|
||||
--text-muted: #94a3b8; /* Slate 400 */
|
||||
|
||||
/* Glassmorphism */
|
||||
--glass-bg: rgba(30, 41, 59, 0.7);
|
||||
--glass-border: rgba(255, 255, 255, 0.1);
|
||||
--glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Typography */
|
||||
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
background-color: var(--bg-dark);
|
||||
color: var(--text-main);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 50%, var(--primary-glow), transparent 25%),
|
||||
radial-gradient(circle at 85% 30%, var(--accent-glow), transparent 25%);
|
||||
background-attachment: fixed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
background-color: var(--bg-dark);
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 50%, var(--primary-glow), transparent 25%),
|
||||
radial-gradient(circle at 85% 30%, var(--accent-glow), transparent 25%);
|
||||
}
|
||||
|
||||
.app-titlebar {
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 14px;
|
||||
background: rgba(15, 23, 42, 0.82);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
color: var(--text-main);
|
||||
-webkit-app-region: drag;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.app-titlebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.app-titlebar-logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.app-titlebar-actions {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.app-titlebar-actions button {
|
||||
width: 46px;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.app-titlebar-actions button:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.app-titlebar-actions button.close:hover {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.key-gate {
|
||||
min-height: calc(100vh - 42px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.22), transparent 32rem), var(--bg-main);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.key-gate-card {
|
||||
width: min(440px, 100%);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.key-gate-logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0 auto 1rem;
|
||||
border-radius: 16px;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
margin-top: 1rem;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
padding: 0.85rem 1.25rem;
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.key-gate-hint {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.key-gate-error {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.glass-panel {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px var(--primary-glow);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.input-glass {
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--text-main);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.input-glass:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 2px var(--primary-glow);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
.btn-secondary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: var(--text-muted);
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
.icon-btn.danger:hover {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: rgba(10, 10, 15, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.sortable-header:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.table-row-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.companies-page-container {
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.filters-bar form > div {
|
||||
flex: 1 1 100% !important;
|
||||
}
|
||||
|
||||
.table-scroll-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,209 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Search, Edit2, ShieldAlert, ShieldCheck, ChevronUp, ChevronDown, RotateCcw, Box, Eye } from 'lucide-react';
|
||||
import { fetchCompanies, setCompanyBanned } from '../api/sysadmin';
|
||||
import { EditCompanyModal } from '../components/ui/EditCompanyModal';
|
||||
import { CompanyServicesModal } from '../components/ui/CompanyServicesModal';
|
||||
import { OrganizationInsightsModal } from '../components/ui/OrganizationInsightsModal';
|
||||
|
||||
export const CompaniesPage = () => {
|
||||
const [companies, setCompanies] = useState<any[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Filters
|
||||
const [filters, setFilters] = useState({
|
||||
name: '',
|
||||
banned: 'all', // all | true | false
|
||||
sortBy: 'name',
|
||||
sortOrder: 'asc'
|
||||
});
|
||||
|
||||
// Modals state
|
||||
const [editingCompany, setEditingCompany] = useState<any>(null);
|
||||
const [servicesCompany, setServicesCompany] = useState<any>(null);
|
||||
const [insightsCompany, setInsightsCompany] = useState<any>(null);
|
||||
|
||||
const loadCompanies = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const payload: any = { page, limit: 10, sortBy: filters.sortBy, sortOrder: filters.sortOrder };
|
||||
if (filters.name) payload.name = filters.name;
|
||||
if (filters.banned !== 'all') payload.banned = filters.banned === 'true';
|
||||
|
||||
const res = await fetchCompanies(payload);
|
||||
setCompanies(res.data);
|
||||
setTotalPages(res.pages);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert('Error cargando organizaciones');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadCompanies();
|
||||
}, [page, filters.sortBy, filters.sortOrder, filters.banned]);
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setPage(1);
|
||||
loadCompanies();
|
||||
};
|
||||
|
||||
const handleResetFilters = () => {
|
||||
setFilters({
|
||||
name: '',
|
||||
banned: 'all',
|
||||
sortBy: 'name',
|
||||
sortOrder: 'asc'
|
||||
});
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (filters.name === '' && filters.banned === 'all' && filters.sortBy === 'name' && filters.sortOrder === 'asc') {
|
||||
loadCompanies();
|
||||
}
|
||||
}, [filters]);
|
||||
|
||||
const toggleSort = (field: string) => {
|
||||
setFilters(prev => {
|
||||
if (prev.sortBy === field) {
|
||||
return { ...prev, sortOrder: prev.sortOrder === 'asc' ? 'desc' : 'asc' };
|
||||
}
|
||||
return { ...prev, sortBy: field, sortOrder: 'asc' };
|
||||
});
|
||||
};
|
||||
|
||||
const renderSortIcon = (field: string) => {
|
||||
if (filters.sortBy !== field) return null;
|
||||
return filters.sortOrder === 'asc' ? <ChevronUp size={16} /> : <ChevronDown size={16} />;
|
||||
};
|
||||
|
||||
const handleToggleBanned = async (company: any) => {
|
||||
if (window.confirm(`¿Deseas ${company.banned ? 'quitar el ban' : 'banear'} a la organización ${company.name}?`)) {
|
||||
try {
|
||||
await setCompanyBanned(company.id || company._id, !company.banned);
|
||||
loadCompanies();
|
||||
} catch (e: any) {
|
||||
alert('Error al actualizar estado de la organización');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="animate-fade-in companies-page-container" style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem', flexShrink: 0 }}>
|
||||
<h1 style={{ fontSize: '2rem', fontWeight: '700' }}>Gestión de Organizaciones</h1>
|
||||
</div>
|
||||
|
||||
{/* Filters Bar */}
|
||||
<div className="glass-panel filters-bar" style={{ padding: '1.5rem', marginBottom: '1rem', flexShrink: 0 }}>
|
||||
<form onSubmit={handleSearch} style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||||
<div style={{ flex: '1', minWidth: '200px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input-glass"
|
||||
placeholder="Buscar por nombre..."
|
||||
value={filters.name}
|
||||
onChange={(e) => setFilters({...filters, name: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ width: '150px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>Baneado</label>
|
||||
<select
|
||||
className="input-glass"
|
||||
value={filters.banned}
|
||||
onChange={(e) => setFilters({...filters, banned: e.target.value})}
|
||||
>
|
||||
<option value="all">Todos</option>
|
||||
<option value="true">Sí</option>
|
||||
<option value="false">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button type="submit" className="btn-primary" style={{ display: 'flex', alignItems: 'center', gap: '8px', height: '100%' }}>
|
||||
<Search size={18} /> Buscar
|
||||
</button>
|
||||
<button type="button" onClick={handleResetFilters} className="btn-secondary" style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '0.75rem', height: '100%' }} title="Limpiar Filtros">
|
||||
<RotateCcw size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="glass-panel" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', flex: 1 }}>
|
||||
<div style={{ overflow: 'auto', flex: 1 }} className="table-scroll-container">
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left', minWidth: '700px' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="sticky-header sortable-header" onClick={() => toggleSort('name')} style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600', cursor: 'pointer', userSelect: 'none' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>Organización {renderSortIcon('name')}</div>
|
||||
</th>
|
||||
<th className="sticky-header sortable-header" onClick={() => toggleSort('categoryId')} style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600', cursor: 'pointer', userSelect: 'none' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>Categoría {renderSortIcon('categoryId')}</div>
|
||||
</th>
|
||||
<th className="sticky-header" style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600' }}>Estado</th>
|
||||
<th className="sticky-header" style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600', textAlign: 'right' }}>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr><td colSpan={4} style={{ padding: '2rem', textAlign: 'center' }}>Cargando...</td></tr>
|
||||
) : companies.length === 0 ? (
|
||||
<tr><td colSpan={4} style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>No se encontraron organizaciones</td></tr>
|
||||
) : (
|
||||
companies.map(c => (
|
||||
<tr key={c.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)', transition: 'background 0.2s' }} className="table-row-hover">
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<div style={{ fontWeight: '600', color: 'var(--text-main)' }}>{c.name}</div>
|
||||
<div style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>{c.description || '-'}</div>
|
||||
</td>
|
||||
<td style={{ padding: '1rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
|
||||
{c.categoryId}
|
||||
</td>
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<button
|
||||
onClick={() => handleToggleBanned(c)}
|
||||
style={{ background: 'transparent', display: 'flex', alignItems: 'center', gap: '5px', color: c.banned ? 'var(--danger)' : 'var(--success)', cursor: 'pointer' }}
|
||||
title={c.banned ? 'Click para desbanear' : 'Click para banear'}
|
||||
>
|
||||
{c.banned ? <ShieldAlert size={18} /> : <ShieldCheck size={18} />}
|
||||
{c.banned ? 'Baneada' : 'Activa'}
|
||||
</button>
|
||||
</td>
|
||||
<td style={{ padding: '1rem', textAlign: 'right' }}>
|
||||
<div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end' }}>
|
||||
<button className="icon-btn" title="Ver detalle" onClick={() => setInsightsCompany(c)}><Eye size={18} /></button>
|
||||
<button className="icon-btn" title="Ver Servicios" onClick={() => setServicesCompany(c)}><Box size={18} /></button>
|
||||
<button className="icon-btn" title="Editar Detalles" onClick={() => setEditingCompany(c)}><Edit2 size={18} /></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="pagination-bar" style={{ padding: '1rem', borderTop: '1px solid var(--glass-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0, background: 'rgba(0,0,0,0.2)' }}>
|
||||
<span style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>Página {page} de {totalPages || 1}</span>
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<button className="btn-secondary" disabled={page === 1} onClick={() => setPage(p => p - 1)}>Anterior</button>
|
||||
<button className="btn-secondary" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>Siguiente</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
{editingCompany && <EditCompanyModal company={editingCompany} onClose={() => setEditingCompany(null)} onSaved={loadCompanies} />}
|
||||
{servicesCompany && <CompanyServicesModal company={servicesCompany} onClose={() => setServicesCompany(null)} />}
|
||||
{insightsCompany && <OrganizationInsightsModal company={insightsCompany} onClose={() => setInsightsCompany(null)} />}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,121 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { Building2, CreditCard, RefreshCw, Server, Shield, Tags, Users } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export const DashboardPage = () => {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
style={{ padding: '2rem 0' }}
|
||||
>
|
||||
<header style={{ marginBottom: '3rem' }}>
|
||||
<h1 style={{ fontSize: '2.5rem', fontWeight: '800', background: 'linear-gradient(to right, var(--text-main), var(--text-muted))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
|
||||
Bienvenido al Panel SysAdmin
|
||||
</h1>
|
||||
<p style={{ color: 'var(--text-muted)', marginTop: '0.5rem', fontSize: '1.1rem' }}>
|
||||
Gestión centralizada del puente TurnosXpress.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem' }}>
|
||||
|
||||
{/* Card Users */}
|
||||
<Link to="/users" style={{ display: 'block' }}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
className="glass-panel"
|
||||
style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem', cursor: 'pointer', height: '100%' }}
|
||||
>
|
||||
<div style={{ width: '60px', height: '60px', borderRadius: '16px', background: 'rgba(59, 130, 246, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--primary)', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
|
||||
<Users size={30} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{ fontSize: '1.3rem', fontWeight: '600', marginBottom: '0.5rem', color: 'var(--text-main)' }}>Gestión de Usuarios</h3>
|
||||
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>Administra perfiles, verifica cuentas, consulta organizaciones, suscripciones, pagos y herramientas de recálculo.</p>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginTop: '1rem' }}>
|
||||
<span className="dashboard-tag"><CreditCard size={14} /> Suscripciones</span>
|
||||
<span className="dashboard-tag"><RefreshCw size={14} /> Recálculos</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Card Companies */}
|
||||
<Link to="/companies" style={{ display: 'block' }}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
className="glass-panel"
|
||||
style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem', cursor: 'pointer', height: '100%' }}
|
||||
>
|
||||
<div style={{ width: '60px', height: '60px', borderRadius: '16px', background: 'rgba(16, 185, 129, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--success)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
|
||||
<Building2 size={30} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{ fontSize: '1.3rem', fontWeight: '600', marginBottom: '0.5rem', color: 'var(--text-main)' }}>Gestión de Organizaciones</h3>
|
||||
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>Consulta organizaciones, revisa estado operativo y administra bloqueos desde el panel central.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Card Plans */}
|
||||
<Link to="/plans" style={{ display: 'block' }}>
|
||||
<motion.div
|
||||
whileHover={{ y: -5, scale: 1.02 }}
|
||||
className="glass-panel"
|
||||
style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem', cursor: 'pointer', height: '100%' }}
|
||||
>
|
||||
<div style={{ width: '60px', height: '60px', borderRadius: '16px', background: 'rgba(245, 158, 11, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--warning)', border: '1px solid rgba(245, 158, 11, 0.2)' }}>
|
||||
<Tags size={30} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{ fontSize: '1.3rem', fontWeight: '600', marginBottom: '0.5rem', color: 'var(--text-main)' }}>Gestión de Planes</h3>
|
||||
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>Visualiza y edita precios, límites, descuentos, funciones y disponibilidad de los planes contratables.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Card Wap Servers */}
|
||||
<Link to="/wapservers" style={{ display: 'block' }}>
|
||||
<motion.div whileHover={{ y: -5, scale: 1.02 }} className="glass-panel" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem', cursor: 'pointer', height: '100%' }}>
|
||||
<div style={{ width: '60px', height: '60px', borderRadius: '16px', background: 'rgba(139, 92, 246, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)', border: '1px solid rgba(139, 92, 246, 0.2)' }}>
|
||||
<Server size={30} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{ fontSize: '1.3rem', fontWeight: '600', marginBottom: '0.5rem', color: 'var(--text-main)' }}>Servidores WAP</h3>
|
||||
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>Consulta servidores de WhatsApp puente y su estado operativo.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
|
||||
{/* Card Config */}
|
||||
<div style={{ opacity: 0.6 }}>
|
||||
<div className="glass-panel" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem', height: '100%' }}>
|
||||
<div style={{ width: '60px', height: '60px', borderRadius: '16px', background: 'rgba(16, 185, 129, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--success)', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
|
||||
<Shield size={30} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{ fontSize: '1.3rem', fontWeight: '600', marginBottom: '0.5rem' }}>Seguridad</h3>
|
||||
<p style={{ color: 'var(--text-muted)', lineHeight: '1.5' }}>[Próximamente] Gestión de llaves, logs de auditoría y configuración del middleware.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
.dashboard-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.25rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
`}} />
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,181 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { CheckCircle, Edit2, RefreshCw, Star, XCircle } from 'lucide-react';
|
||||
import { fetchPlans } from '../api/sysadmin';
|
||||
import type { Plan } from '../api/sysadmin';
|
||||
import { EditPlanModal } from '../components/ui/EditPlanModal';
|
||||
|
||||
const formatMoney = (value: number) => new Intl.NumberFormat('es-AR', { style: 'currency', currency: 'ARS' }).format(value || 0);
|
||||
|
||||
const getFeatureTags = (plan: Plan) => [
|
||||
{ label: 'Mail', enabled: plan.mailNotifications },
|
||||
{ label: 'SMS', enabled: plan.smsNotifications },
|
||||
{ label: 'WAP', enabled: plan.wapNotifications },
|
||||
{ label: 'Pagos', enabled: plan.payments },
|
||||
{ label: 'Bot', enabled: plan.bot },
|
||||
{ label: 'Fecha límite', enabled: plan.dateLimit },
|
||||
];
|
||||
|
||||
const getLimitTags = (plan: Plan) => [
|
||||
{ label: 'Org', value: plan.limitOrganizations },
|
||||
{ label: 'Emp', value: plan.limitEmployees },
|
||||
{ label: 'Serv', value: plan.limitServices },
|
||||
{ label: 'Turnos', value: plan.limitAppointments },
|
||||
{ label: 'Clientes', value: plan.limitClients },
|
||||
{ label: 'Rep', value: plan.limitRepeats },
|
||||
];
|
||||
|
||||
const formatLimit = (value: number) => value === -1 ? '∞' : value;
|
||||
|
||||
export const PlansPage = () => {
|
||||
const [plans, setPlans] = useState<Plan[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [editingPlan, setEditingPlan] = useState<Plan | null>(null);
|
||||
const [planIdFilter, setPlanIdFilter] = useState('');
|
||||
|
||||
const filteredPlans = plans.filter((plan) => {
|
||||
const normalizedFilter = planIdFilter.trim().toLowerCase();
|
||||
if (!normalizedFilter) return true;
|
||||
|
||||
return [plan.id, plan._id].some((planId) => planId?.toLowerCase().includes(normalizedFilter));
|
||||
});
|
||||
|
||||
const loadPlans = async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const data = await fetchPlans();
|
||||
setPlans(data);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.message || err.message || 'Error cargando planes');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadPlans();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="animate-fade-in plans-page-container" style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem', flexShrink: 0 }}>
|
||||
<div>
|
||||
<h1 style={{ fontSize: '2rem', fontWeight: '700' }}>Gestión de Planes</h1>
|
||||
<p style={{ color: 'var(--text-muted)', marginTop: '0.35rem' }}>Visualizá y editá precios, límites y funciones contratables.</p>
|
||||
</div>
|
||||
<button className="btn-secondary" onClick={loadPlans} disabled={loading} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<RefreshCw size={18} /> Actualizar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="glass-panel" style={{ padding: '1rem', marginBottom: '1rem', flexShrink: 0 }}>
|
||||
<label style={{ display: 'block', color: 'var(--text-muted)', fontSize: '0.85rem', marginBottom: '0.5rem' }}>
|
||||
Filtrar por ID de plan
|
||||
</label>
|
||||
<input
|
||||
className="input-glass"
|
||||
type="text"
|
||||
placeholder="Pegá el id del plan"
|
||||
value={planIdFilter}
|
||||
onChange={(event) => setPlanIdFilter(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="glass-panel" style={{ padding: '1rem', marginBottom: '1rem', color: 'var(--danger)', borderColor: 'rgba(239,68,68,0.35)' }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="glass-panel" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', flex: 1 }}>
|
||||
<div style={{ overflow: 'auto', flex: 1 }} className="table-scroll-container">
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left', minWidth: '920px' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="sticky-header">Plan</th>
|
||||
<th className="sticky-header">Precio</th>
|
||||
<th className="sticky-header">Límites</th>
|
||||
<th className="sticky-header">Funciones</th>
|
||||
<th className="sticky-header">Estado</th>
|
||||
<th className="sticky-header" style={{ textAlign: 'right' }}>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr><td colSpan={6} style={{ padding: '2rem', textAlign: 'center' }}>Cargando planes...</td></tr>
|
||||
) : filteredPlans.length === 0 ? (
|
||||
<tr><td colSpan={6} style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>No se encontraron planes</td></tr>
|
||||
) : (
|
||||
filteredPlans.map(plan => (
|
||||
<tr key={plan._id || plan.id || plan.code} className="table-row-hover" style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontWeight: 700 }}>
|
||||
{plan.name} {plan.featured && <Star size={16} color="var(--warning)" fill="var(--warning)" />}
|
||||
</div>
|
||||
<div style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>{plan.code}</div>
|
||||
<div style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginTop: '0.35rem', maxWidth: '280px' }}>{plan.description}</div>
|
||||
</td>
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<div>{formatMoney(plan.price)} / mes</div>
|
||||
<div style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>{formatMoney(plan.annualPrice)} / año</div>
|
||||
</td>
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<div className="limit-tags">
|
||||
{getLimitTags(plan).map((limit) => (
|
||||
<span key={limit.label} className={`limit-tag ${limit.value === -1 ? 'unlimited' : ''}`}>
|
||||
<small>{limit.label}</small>
|
||||
<strong>{formatLimit(limit.value)}</strong>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<div className="feature-tags">
|
||||
{getFeatureTags(plan).map((feature) => (
|
||||
<span key={feature.label} className={`feature-tag ${feature.enabled ? 'enabled' : 'disabled'}`}>
|
||||
{feature.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.35rem', color: plan.active ? 'var(--success)' : 'var(--warning)' }}>
|
||||
{plan.active ? <CheckCircle size={18} /> : <XCircle size={18} />}
|
||||
{plan.active ? 'Activo' : 'Inactivo'}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: '1rem', textAlign: 'right' }}>
|
||||
<button className="icon-btn" title="Editar plan" aria-label={`Editar ${plan.name}`} onClick={() => setEditingPlan(plan)}>
|
||||
<Edit2 size={18} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
.sticky-header { position: sticky; top: 0; z-index: 10; background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--glass-border); padding: 1rem; color: var(--text-muted); font-weight: 600; }
|
||||
.table-row-hover:hover { background: rgba(255, 255, 255, 0.02); }
|
||||
.limit-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: 300px; }
|
||||
.limit-tag { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; padding: 0.25rem 0.55rem; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.24); color: #bfdbfe; }
|
||||
.limit-tag small { color: #93c5fd; font-weight: 800; font-size: 0.7rem; text-transform: uppercase; }
|
||||
.limit-tag strong { color: #f8fafc; font-size: 0.82rem; }
|
||||
.limit-tag.unlimited { background: rgba(168, 85, 247, 0.16); border-color: rgba(168, 85, 247, 0.32); }
|
||||
.limit-tag.unlimited small { color: #d8b4fe; }
|
||||
.limit-tag.unlimited strong { color: #f5d0fe; font-size: 0.95rem; }
|
||||
.feature-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: 260px; }
|
||||
.feature-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.25rem 0.55rem; font-size: 0.75rem; font-weight: 700; border: 1px solid transparent; }
|
||||
.feature-tag.enabled { background: rgba(34, 197, 94, 0.14); color: #86efac; border-color: rgba(34, 197, 94, 0.28); }
|
||||
.feature-tag.disabled { background: rgba(148, 163, 184, 0.1); color: #94a3b8; border-color: rgba(148, 163, 184, 0.18); text-decoration: line-through; opacity: 0.75; }
|
||||
@media (max-width: 768px) { .plans-page-container { height: auto !important; overflow: visible !important; } .table-scroll-container { overflow-x: auto; } }
|
||||
`}} />
|
||||
|
||||
{editingPlan && <EditPlanModal plan={editingPlan} onClose={() => setEditingPlan(null)} onSaved={loadPlans} />}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,404 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Search, Edit2, Trash2, CheckCircle, XCircle, Building2, ChevronUp, ChevronDown, RotateCcw, RefreshCw, MoreVertical, CreditCard } from 'lucide-react';
|
||||
import { fetchUsers, deleteUser, setVerifiedStatus } from '../api/sysadmin';
|
||||
import { EditUserModal } from '../components/ui/EditUserModal';
|
||||
import { OrganizationsModal } from '../components/ui/OrganizationsModal';
|
||||
import { RecalculationToolsModal } from '../components/ui/RecalculationToolsModal';
|
||||
import { SubscriptionDetailsModal } from '../components/ui/SubscriptionDetailsModal';
|
||||
import { formatDate } from '../utils/formatters';
|
||||
|
||||
export const UsersPage = () => {
|
||||
const [users, setUsers] = useState<any[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [recalculationUserId, setRecalculationUserId] = useState('');
|
||||
const [openActionsUserId, setOpenActionsUserId] = useState<string | null>(null);
|
||||
|
||||
// Filters
|
||||
const [filters, setFilters] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
isVerified: 'all', // all | true | false
|
||||
sortBy: 'createdAt',
|
||||
sortOrder: 'desc'
|
||||
});
|
||||
|
||||
// Modals state
|
||||
const [editingUser, setEditingUser] = useState<any>(null);
|
||||
const [orgUser, setOrgUser] = useState<any>(null);
|
||||
const [subscriptionUser, setSubscriptionUser] = useState<any>(null);
|
||||
const [recalculationToolsOpen, setRecalculationToolsOpen] = useState(false);
|
||||
|
||||
const loadUsers = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const payload: any = { page, limit: 10, sortBy: filters.sortBy, sortOrder: filters.sortOrder };
|
||||
if (filters.name) payload.name = filters.name;
|
||||
if (filters.email) payload.email = filters.email;
|
||||
if (filters.isVerified !== 'all') payload.isVerified = filters.isVerified === 'true';
|
||||
|
||||
const res = await fetchUsers(payload);
|
||||
setUsers(res.data);
|
||||
setTotalPages(res.pages);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
alert('Error cargando usuarios');
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadUsers();
|
||||
}, [page, filters.sortBy, filters.sortOrder, filters.isVerified]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!openActionsUserId) return;
|
||||
|
||||
const closeActionsMenu = () => setOpenActionsUserId(null);
|
||||
document.addEventListener('click', closeActionsMenu);
|
||||
|
||||
return () => document.removeEventListener('click', closeActionsMenu);
|
||||
}, [openActionsUserId]);
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setPage(1);
|
||||
loadUsers();
|
||||
};
|
||||
|
||||
const handleResetFilters = () => {
|
||||
setFilters({
|
||||
name: '',
|
||||
email: '',
|
||||
isVerified: 'all',
|
||||
sortBy: 'createdAt',
|
||||
sortOrder: 'desc'
|
||||
});
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
// Efecto para recargar si se limpian los filtros manualmente
|
||||
useEffect(() => {
|
||||
if (filters.name === '' && filters.email === '' && filters.isVerified === 'all' && filters.sortBy === 'createdAt' && filters.sortOrder === 'desc') {
|
||||
loadUsers();
|
||||
}
|
||||
}, [filters]);
|
||||
|
||||
const toggleSort = (field: string) => {
|
||||
setFilters(prev => {
|
||||
if (prev.sortBy === field) {
|
||||
return { ...prev, sortOrder: prev.sortOrder === 'asc' ? 'desc' : 'asc' };
|
||||
}
|
||||
return { ...prev, sortBy: field, sortOrder: 'asc' };
|
||||
});
|
||||
};
|
||||
|
||||
const renderSortIcon = (field: string) => {
|
||||
if (filters.sortBy !== field) return null;
|
||||
return filters.sortOrder === 'asc' ? <ChevronUp size={16} /> : <ChevronDown size={16} />;
|
||||
};
|
||||
|
||||
const handleDelete = async (user: any) => {
|
||||
if (window.confirm(`¿Estás seguro de que deseas eliminar permanentemente al usuario ${user.email}? Esto fallará si el usuario es dueño de organizaciones.`)) {
|
||||
try {
|
||||
await deleteUser(user._id);
|
||||
alert('Usuario eliminado correctamente');
|
||||
loadUsers();
|
||||
} catch (e: any) {
|
||||
alert(e.response?.data?.message || e.message || 'Error al eliminar');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleVerified = async (user: any) => {
|
||||
if (window.confirm(`¿Deseas cambiar el estado de verificación de ${user.email}?`)) {
|
||||
try {
|
||||
await setVerifiedStatus(user._id, !user.verificated);
|
||||
loadUsers();
|
||||
} catch (e: any) {
|
||||
alert('Error al actualizar estado');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openRecalculationTools = (userId = '') => {
|
||||
setRecalculationUserId(userId);
|
||||
setRecalculationToolsOpen(true);
|
||||
};
|
||||
|
||||
const runRowAction = (action: () => void) => {
|
||||
setOpenActionsUserId(null);
|
||||
action();
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="animate-fade-in users-page-container" style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem', flexShrink: 0 }}>
|
||||
<h1 style={{ fontSize: '2rem', fontWeight: '700' }}>Gestión de Usuarios</h1>
|
||||
<button className="btn-secondary" onClick={() => openRecalculationTools()} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<RefreshCw size={18} /> Recalcular
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters Bar */}
|
||||
<div className="glass-panel filters-bar" style={{ padding: '1.5rem', marginBottom: '1rem', flexShrink: 0 }}>
|
||||
<form onSubmit={handleSearch} style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||||
<div style={{ flex: '1', minWidth: '200px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>Nombre / Apellido</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input-glass"
|
||||
placeholder="Buscar por nombre..."
|
||||
value={filters.name}
|
||||
onChange={(e) => setFilters({...filters, name: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: '1', minWidth: '200px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>Email</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input-glass"
|
||||
placeholder="Buscar por email..."
|
||||
value={filters.email}
|
||||
onChange={(e) => setFilters({...filters, email: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ width: '150px' }}>
|
||||
<label style={{ display: 'block', fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>Verificado</label>
|
||||
<select
|
||||
className="input-glass"
|
||||
value={filters.isVerified}
|
||||
onChange={(e) => setFilters({...filters, isVerified: e.target.value})}
|
||||
>
|
||||
<option value="all">Todos</option>
|
||||
<option value="true">Sí</option>
|
||||
<option value="false">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button type="submit" className="btn-primary" style={{ display: 'flex', alignItems: 'center', gap: '8px', height: '100%' }}>
|
||||
<Search size={18} /> Buscar
|
||||
</button>
|
||||
<button type="button" onClick={handleResetFilters} className="btn-secondary" style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '0.75rem', height: '100%' }} title="Limpiar Filtros">
|
||||
<RotateCcw size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="glass-panel" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', flex: 1 }}>
|
||||
<div style={{ overflow: 'auto', flex: 1 }} className="table-scroll-container">
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left', minWidth: '700px' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="sticky-header sortable-header" onClick={() => toggleSort('name')} style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600', cursor: 'pointer', userSelect: 'none' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>Usuario {renderSortIcon('name')}</div>
|
||||
</th>
|
||||
<th className="sticky-header" style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600' }}>Contacto</th>
|
||||
<th className="sticky-header" style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600' }}>Verificado</th>
|
||||
<th className="sticky-header" style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600' }}>Cód. Verif.</th>
|
||||
<th className="sticky-header sortable-header" onClick={() => toggleSort('createdAt')} style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600', cursor: 'pointer', userSelect: 'none' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>Registro {renderSortIcon('createdAt')}</div>
|
||||
</th>
|
||||
<th className="sticky-header" style={{ padding: '1rem', color: 'var(--text-muted)', fontWeight: '600', textAlign: 'right' }}>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr><td colSpan={6} style={{ padding: '2rem', textAlign: 'center' }}>Cargando...</td></tr>
|
||||
) : users.length === 0 ? (
|
||||
<tr><td colSpan={6} style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>No se encontraron usuarios</td></tr>
|
||||
) : (
|
||||
users.map(u => (
|
||||
<tr key={u._id} style={{ borderBottom: '1px solid rgba(255,255,255,0.05)', transition: 'background 0.2s' }} className="table-row-hover">
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<div style={{ fontWeight: '600', color: 'var(--text-main)' }}>{u.firstName} {u.lastName}</div>
|
||||
<div style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>{u.email}</div>
|
||||
</td>
|
||||
<td style={{ padding: '1rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
|
||||
{u.phoneCountryCode && `+${u.phoneCountryCode}`} {u.phoneAreaCode} {u.phoneNumber}
|
||||
</td>
|
||||
<td style={{ padding: '1rem' }}>
|
||||
<button
|
||||
onClick={() => handleToggleVerified(u)}
|
||||
style={{ background: 'transparent', display: 'flex', alignItems: 'center', gap: '5px', color: u.verificated ? 'var(--success)' : 'var(--warning)', cursor: 'pointer' }}
|
||||
>
|
||||
{u.verificated ? <CheckCircle size={18} /> : <XCircle size={18} />}
|
||||
{u.verificated ? 'Sí' : 'No'}
|
||||
</button>
|
||||
</td>
|
||||
<td style={{ padding: '1rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
|
||||
{u.verificationCode || '-'}
|
||||
</td>
|
||||
<td style={{ padding: '1rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
|
||||
{formatDate(u.creationDate)}
|
||||
</td>
|
||||
<td style={{ padding: '1rem', textAlign: 'right' }}>
|
||||
<div className="actions-menu-wrapper" onClick={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
className="icon-btn"
|
||||
title="Acciones"
|
||||
aria-label={`Acciones para ${u.email}`}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={openActionsUserId === u._id}
|
||||
onClick={() => setOpenActionsUserId(openActionsUserId === u._id ? null : u._id)}
|
||||
>
|
||||
<MoreVertical size={18} />
|
||||
</button>
|
||||
{openActionsUserId === u._id && (
|
||||
<div className="actions-menu" role="menu">
|
||||
<button type="button" className="actions-menu-item" role="menuitem" onClick={() => runRowAction(() => setOrgUser(u))}>
|
||||
<Building2 size={16} /> Ver organizaciones
|
||||
</button>
|
||||
<button type="button" className="actions-menu-item" role="menuitem" onClick={() => runRowAction(() => setSubscriptionUser(u))}>
|
||||
<CreditCard size={16} /> Ver suscripción
|
||||
</button>
|
||||
<button type="button" className="actions-menu-item" role="menuitem" onClick={() => runRowAction(() => openRecalculationTools(u._id))}>
|
||||
<RefreshCw size={16} /> Recalcular uso del plan
|
||||
</button>
|
||||
<button type="button" className="actions-menu-item" role="menuitem" onClick={() => runRowAction(() => handleToggleVerified(u))}>
|
||||
{u.verificated ? <XCircle size={16} /> : <CheckCircle size={16} />}
|
||||
{u.verificated ? 'Marcar como no verificado' : 'Marcar como verificado'}
|
||||
</button>
|
||||
<button type="button" className="actions-menu-item" role="menuitem" onClick={() => runRowAction(() => setEditingUser(u))}>
|
||||
<Edit2 size={16} /> Editar perfil
|
||||
</button>
|
||||
<button type="button" className="actions-menu-item danger" role="menuitem" onClick={() => runRowAction(() => handleDelete(u))}>
|
||||
<Trash2 size={16} /> Eliminar
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="pagination-bar" style={{ padding: '1rem', borderTop: '1px solid var(--glass-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0, background: 'rgba(0,0,0,0.2)' }}>
|
||||
<span style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>Página {page} de {totalPages || 1}</span>
|
||||
<div style={{ display: 'flex', gap: '10px' }}>
|
||||
<button className="btn-secondary" disabled={page === 1} onClick={() => setPage(p => p - 1)}>Anterior</button>
|
||||
<button className="btn-secondary" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>Siguiente</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style dangerouslySetInnerHTML={{__html: `
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: rgba(10, 10, 15, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.sortable-header:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.table-row-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.icon-btn {
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: var(--text-muted);
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
.icon-btn.danger:hover {
|
||||
background: var(--danger);
|
||||
}
|
||||
.actions-menu-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.actions-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
z-index: 30;
|
||||
min-width: 230px;
|
||||
padding: 0.4rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 12px;
|
||||
background: #111827;
|
||||
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.actions-menu-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.65rem 0.75rem;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #f8fafc;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.actions-menu-item:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #ffffff;
|
||||
}
|
||||
.actions-menu-item.danger {
|
||||
color: #fca5a5;
|
||||
}
|
||||
.actions-menu-item.danger:hover {
|
||||
background: rgba(239, 68, 68, 0.18);
|
||||
color: #fecaca;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
.btn-secondary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.users-page-container {
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.filters-bar form > div {
|
||||
flex: 1 1 100% !important;
|
||||
}
|
||||
.table-scroll-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
{/* Modals */}
|
||||
{editingUser && <EditUserModal user={editingUser} onClose={() => setEditingUser(null)} onSaved={loadUsers} />}
|
||||
{orgUser && <OrganizationsModal user={orgUser} onClose={() => setOrgUser(null)} />}
|
||||
{subscriptionUser && <SubscriptionDetailsModal user={subscriptionUser} onClose={() => setSubscriptionUser(null)} />}
|
||||
{recalculationToolsOpen && <RecalculationToolsModal initialUserId={recalculationUserId} onClose={() => setRecalculationToolsOpen(false)} />}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Vendored
+14
@@ -0,0 +1,14 @@
|
||||
export {};
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
txadmin: {
|
||||
getKeyStatus: () => Promise<{ loaded: boolean; path: string | null }>;
|
||||
selectPrivateKey: () => Promise<{ loaded: boolean; path: string | null }>;
|
||||
request: <T = unknown>(route: string, body: unknown) => Promise<T>;
|
||||
minimizeWindow: () => Promise<void>;
|
||||
toggleMaximizeWindow: () => Promise<boolean>;
|
||||
closeWindow: () => Promise<void>;
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { format, isValid, parseISO } from 'date-fns';
|
||||
import { es } from 'date-fns/locale';
|
||||
|
||||
const parseDate = (value?: string) => {
|
||||
if (!value) return null;
|
||||
const parsedDate = parseISO(value);
|
||||
return isValid(parsedDate) ? parsedDate : null;
|
||||
};
|
||||
|
||||
export const formatDate = (value?: string) => {
|
||||
const parsedDate = parseDate(value);
|
||||
return parsedDate ? format(parsedDate, 'dd MMM yyyy', { locale: es }) : value || '-';
|
||||
};
|
||||
|
||||
export const formatDateTime = (value?: string) => {
|
||||
const parsedDate = parseDate(value);
|
||||
return parsedDate ? format(parsedDate, "dd MMM yyyy, HH:mm 'hs'", { locale: es }) : value || '-';
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023", "DOM"],
|
||||
"module": "esnext",
|
||||
"types": ["vite/client"],
|
||||
"allowArbitraryExtensions": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2023",
|
||||
"module": "CommonJS",
|
||||
"moduleResolution": "Node",
|
||||
"ignoreDeprecations": "6.0",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "dist-electron",
|
||||
"rootDir": "electron",
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["electron/**/*.ts"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user