schedule message and qr added
This commit is contained in:
-169
File diff suppressed because one or more lines are too long
+206
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+2
-2
@@ -7,8 +7,8 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
|
||||||
<script type="module" crossorigin src="/assets/index-2aCMahXY.js"></script>
|
<script type="module" crossorigin src="/assets/index-BB6EjotN.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-C_-n9NKA.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-Dp8mftuy.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
Generated
+132
@@ -12,11 +12,13 @@
|
|||||||
"@emotion/styled": "^11.14.1",
|
"@emotion/styled": "^11.14.1",
|
||||||
"@mui/icons-material": "^9.0.1",
|
"@mui/icons-material": "^9.0.1",
|
||||||
"@mui/material": "^9.0.1",
|
"@mui/material": "^9.0.1",
|
||||||
|
"@mui/x-date-pickers": "^9.5.0",
|
||||||
"@supabase/supabase-js": "^2.106.2",
|
"@supabase/supabase-js": "^2.106.2",
|
||||||
"@tailwindcss/vite": "^4.3.0",
|
"@tailwindcss/vite": "^4.3.0",
|
||||||
"@tanstack/react-query": "^5.100.14",
|
"@tanstack/react-query": "^5.100.14",
|
||||||
"@tanstack/react-router": "^1.170.10",
|
"@tanstack/react-router": "^1.170.10",
|
||||||
"autoprefixer": "^10.5.0",
|
"autoprefixer": "^10.5.0",
|
||||||
|
"dayjs": "^1.11.21",
|
||||||
"postcss": "^8.5.15",
|
"postcss": "^8.5.15",
|
||||||
"react": "^19.2.6",
|
"react": "^19.2.6",
|
||||||
"react-dom": "^19.2.6",
|
"react-dom": "^19.2.6",
|
||||||
@@ -928,6 +930,124 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@mui/x-date-pickers": {
|
||||||
|
"version": "9.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-9.5.0.tgz",
|
||||||
|
"integrity": "sha512-Pzd8gU2qOoIAUMMesjbrq3gFs6akWXcSsEkFIHVA4dtuoh6SeWISu+WR+ymq/sBOcn2tk9IBIjqRQkqLhkm+tg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.29.7",
|
||||||
|
"@mui/utils": "9.0.1",
|
||||||
|
"@mui/x-internals": "^9.1.0",
|
||||||
|
"@types/react-transition-group": "^4.4.12",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
|
"react-transition-group": "^4.4.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/mui-org"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@emotion/react": "^11.9.0",
|
||||||
|
"@emotion/styled": "^11.8.1",
|
||||||
|
"@mui/material": "^7.3.0 || ^9.0.0",
|
||||||
|
"@mui/system": "^7.3.0 || ^9.0.0",
|
||||||
|
"date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
|
||||||
|
"date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
|
||||||
|
"dayjs": "^1.10.7",
|
||||||
|
"luxon": "^3.0.2",
|
||||||
|
"moment": "^2.29.4",
|
||||||
|
"moment-hijri": "^2.1.2 || ^3.0.0",
|
||||||
|
"moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
|
||||||
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@emotion/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@emotion/styled": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"date-fns": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"date-fns-jalali": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"dayjs": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"luxon": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"moment": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"moment-hijri": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"moment-jalaali": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@mui/x-internals": {
|
||||||
|
"version": "9.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-9.1.0.tgz",
|
||||||
|
"integrity": "sha512-fVezTa1lU+Hb3y9UMI8D/iWXADhs0I8PaZqoh2LOUXjGEUJmKqwsRD19ZXInZsH2yu+YS0dqYMPDvzjYTTyo+Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.29.2",
|
||||||
|
"@mui/utils": "9.0.0",
|
||||||
|
"reselect": "^5.1.1",
|
||||||
|
"use-sync-external-store": "^1.6.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/mui-org"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@mui/x-internals/node_modules/@mui/utils": {
|
||||||
|
"version": "9.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.0.0.tgz",
|
||||||
|
"integrity": "sha512-bQcqyg/gjULUqTuyUjSAFr6LQGLvtkNtDbJerAtoUn9kGZ0hg5QJiN1PLHMLbeFpe3te1831uq7GFl2ITokGdg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.29.2",
|
||||||
|
"@mui/types": "^9.0.0",
|
||||||
|
"@types/prop-types": "^15.7.15",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
|
"react-is": "^19.2.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/mui-org"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@napi-rs/wasm-runtime": {
|
"node_modules/@napi-rs/wasm-runtime": {
|
||||||
"version": "1.1.4",
|
"version": "1.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
|
||||||
@@ -2016,6 +2136,12 @@
|
|||||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/dayjs": {
|
||||||
|
"version": "1.11.21",
|
||||||
|
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
|
||||||
|
"integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
"version": "4.4.3",
|
"version": "4.4.3",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||||
@@ -3326,6 +3452,12 @@
|
|||||||
"react-dom": ">=16.6.0"
|
"react-dom": ">=16.6.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/reselect": {
|
||||||
|
"version": "5.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
|
||||||
|
"integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/resolve": {
|
"node_modules/resolve": {
|
||||||
"version": "1.22.12",
|
"version": "1.22.12",
|
||||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
|
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
|
||||||
|
|||||||
@@ -14,11 +14,13 @@
|
|||||||
"@emotion/styled": "^11.14.1",
|
"@emotion/styled": "^11.14.1",
|
||||||
"@mui/icons-material": "^9.0.1",
|
"@mui/icons-material": "^9.0.1",
|
||||||
"@mui/material": "^9.0.1",
|
"@mui/material": "^9.0.1",
|
||||||
|
"@mui/x-date-pickers": "^9.5.0",
|
||||||
"@supabase/supabase-js": "^2.106.2",
|
"@supabase/supabase-js": "^2.106.2",
|
||||||
"@tailwindcss/vite": "^4.3.0",
|
"@tailwindcss/vite": "^4.3.0",
|
||||||
"@tanstack/react-query": "^5.100.14",
|
"@tanstack/react-query": "^5.100.14",
|
||||||
"@tanstack/react-router": "^1.170.10",
|
"@tanstack/react-router": "^1.170.10",
|
||||||
"autoprefixer": "^10.5.0",
|
"autoprefixer": "^10.5.0",
|
||||||
|
"dayjs": "^1.11.21",
|
||||||
"postcss": "^8.5.15",
|
"postcss": "^8.5.15",
|
||||||
"react": "^19.2.6",
|
"react": "^19.2.6",
|
||||||
"react-dom": "^19.2.6",
|
"react-dom": "^19.2.6",
|
||||||
|
|||||||
@@ -47,13 +47,15 @@ export default function AppShell() {
|
|||||||
<Tabs
|
<Tabs
|
||||||
value={location.pathname}
|
value={location.pathname}
|
||||||
onChange={(_e, path) => navigate({ to: path })}
|
onChange={(_e, path) => navigate({ to: path })}
|
||||||
variant="fullWidth"
|
variant="scrollable"
|
||||||
|
scrollButtons="auto"
|
||||||
textColor="primary"
|
textColor="primary"
|
||||||
indicatorColor="primary"
|
indicatorColor="primary"
|
||||||
>
|
>
|
||||||
<Tab label="Campañas" value="/campaigns" />
|
<Tab label="Campañas" value="/campaigns" />
|
||||||
<Tab label="Sesiones" value="/sessions" />
|
<Tab label="Sesiones" value="/sessions" />
|
||||||
<Tab label="Archivos" value="/media" />
|
<Tab label="Archivos" value="/media" />
|
||||||
|
<Tab label="Instancias" value="/instances" />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Paper>
|
</Paper>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import {
|
|||||||
import CampaignIcon from '@mui/icons-material/Campaign'
|
import CampaignIcon from '@mui/icons-material/Campaign'
|
||||||
import ChatIcon from '@mui/icons-material/Chat'
|
import ChatIcon from '@mui/icons-material/Chat'
|
||||||
import PermMediaIcon from '@mui/icons-material/PermMedia'
|
import PermMediaIcon from '@mui/icons-material/PermMedia'
|
||||||
|
import DnsIcon from '@mui/icons-material/Dns'
|
||||||
import { Link, useLocation } from '@tanstack/react-router'
|
import { Link, useLocation } from '@tanstack/react-router'
|
||||||
|
|
||||||
const DRAWER_WIDTH = 240
|
const DRAWER_WIDTH = 240
|
||||||
@@ -19,6 +20,7 @@ const items = [
|
|||||||
{ path: '/campaigns', label: 'Campañas', icon: <CampaignIcon /> },
|
{ path: '/campaigns', label: 'Campañas', icon: <CampaignIcon /> },
|
||||||
{ path: '/sessions', label: 'Sesiones', icon: <ChatIcon /> },
|
{ path: '/sessions', label: 'Sesiones', icon: <ChatIcon /> },
|
||||||
{ path: '/media', label: 'Archivos', icon: <PermMediaIcon /> },
|
{ path: '/media', label: 'Archivos', icon: <PermMediaIcon /> },
|
||||||
|
{ path: '/instances', label: 'Instancias', icon: <DnsIcon /> },
|
||||||
]
|
]
|
||||||
|
|
||||||
export default function Sidebar({ collapsed }) {
|
export default function Sidebar({ collapsed }) {
|
||||||
|
|||||||
@@ -0,0 +1,127 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardMedia,
|
||||||
|
Typography,
|
||||||
|
Box,
|
||||||
|
IconButton,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
Skeleton,
|
||||||
|
} from '@mui/material'
|
||||||
|
import MoreVertIcon from '@mui/icons-material/MoreVert'
|
||||||
|
|
||||||
|
export default function InstanceCard({ instance }) {
|
||||||
|
const [anchor, setAnchor] = useState(null)
|
||||||
|
const [showScreenshot, setShowScreenshot] = useState(false)
|
||||||
|
const [qrUrl, setQrUrl] = useState(null)
|
||||||
|
const [qrLoading, setQrLoading] = useState(true)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchQr = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(instance.qr_url, {
|
||||||
|
headers: { xtoken: instance.token },
|
||||||
|
})
|
||||||
|
if (!response.ok) throw new Error('Failed to fetch QR')
|
||||||
|
const { mimetype, data } = await response.json()
|
||||||
|
setQrUrl(`data:${mimetype};base64,${data}`)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('QR fetch error:', err)
|
||||||
|
} finally {
|
||||||
|
setQrLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fetchQr()
|
||||||
|
}, [instance.qr_url, instance.token])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card
|
||||||
|
sx={{
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
transition: 'transform 0.15s, box-shadow 0.15s',
|
||||||
|
'&:hover': {
|
||||||
|
transform: 'translateY(-2px)',
|
||||||
|
boxShadow: 4,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ position: 'relative' }}>
|
||||||
|
{qrLoading ? (
|
||||||
|
<Skeleton
|
||||||
|
variant="rectangular"
|
||||||
|
sx={{ width: '100%', aspectRatio: '1', bgcolor: 'grey.100' }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<CardMedia
|
||||||
|
component="img"
|
||||||
|
image={qrUrl}
|
||||||
|
alt={`QR ${instance.name}`}
|
||||||
|
sx={{
|
||||||
|
width: '100%',
|
||||||
|
height: 'auto',
|
||||||
|
objectFit: 'contain',
|
||||||
|
bgcolor: 'grey.50',
|
||||||
|
p: 2,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<IconButton
|
||||||
|
onClick={(e) => setAnchor(e.currentTarget)}
|
||||||
|
size="small"
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 8,
|
||||||
|
right: 8,
|
||||||
|
bgcolor: 'rgba(0,0,0,0.55)',
|
||||||
|
color: 'white',
|
||||||
|
'&:hover': { bgcolor: 'rgba(0,0,0,0.75)' },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MoreVertIcon fontSize="small" />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
<CardContent sx={{ flexGrow: 1, pb: 2 }}>
|
||||||
|
<Typography variant="subtitle1" sx={{ fontWeight: 700, lineHeight: 1.3 }}>
|
||||||
|
{instance.name}
|
||||||
|
</Typography>
|
||||||
|
{instance.description && (
|
||||||
|
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, lineHeight: 1.5 }}>
|
||||||
|
{instance.description}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)}>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
setAnchor(null)
|
||||||
|
setShowScreenshot(true)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Ver screenshot
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
<Dialog
|
||||||
|
open={showScreenshot}
|
||||||
|
onClose={() => setShowScreenshot(false)}
|
||||||
|
maxWidth="lg"
|
||||||
|
fullWidth
|
||||||
|
>
|
||||||
|
<DialogContent sx={{ p: 0, lineHeight: 0 }}>
|
||||||
|
<img
|
||||||
|
src={instance.schenshoot_url}
|
||||||
|
alt={`Screenshot ${instance.name}`}
|
||||||
|
style={{ width: '100%', display: 'block' }}
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import { Box, Typography, Grid, CircularProgress, Paper } from '@mui/material'
|
||||||
|
import { useInstances } from './api'
|
||||||
|
import InstanceCard from './InstanceCard'
|
||||||
|
|
||||||
|
export default function InstancesPage() {
|
||||||
|
const { data: instances, isLoading } = useInstances()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<Typography variant="h5" sx={{ fontWeight: 700, mb: 3 }}>
|
||||||
|
Instancias
|
||||||
|
</Typography>
|
||||||
|
{isLoading ? (
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 8 }}>
|
||||||
|
<CircularProgress />
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Grid container spacing={{ xs: 2, sm: 3, md: 4 }} columns={{ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }}>
|
||||||
|
{instances?.map((inst) => (
|
||||||
|
<Grid item xs={1} key={inst.id}>
|
||||||
|
<InstanceCard instance={inst} />
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
{instances?.length === 0 && (
|
||||||
|
<Grid item xs={1}>
|
||||||
|
<Paper sx={{ p: 4, textAlign: 'center' }}>
|
||||||
|
<Typography color="text.secondary">
|
||||||
|
No hay instancias.
|
||||||
|
</Typography>
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import { supabase } from '../../lib/supabase'
|
||||||
|
|
||||||
|
export function useInstances() {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['instances'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const { data: { session } } = await supabase.auth.getSession()
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('instances')
|
||||||
|
.select('*')
|
||||||
|
.order('created_at', { ascending: false })
|
||||||
|
.setHeader('xtoken', session?.access_token || '')
|
||||||
|
if (error) throw new Error(error.message)
|
||||||
|
return data || []
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -0,0 +1,233 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogTitle,
|
||||||
|
DialogContent,
|
||||||
|
DialogActions,
|
||||||
|
Button,
|
||||||
|
TextField,
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
|
Alert,
|
||||||
|
IconButton,
|
||||||
|
Divider,
|
||||||
|
CircularProgress,
|
||||||
|
} from '@mui/material'
|
||||||
|
import EditIcon from '@mui/icons-material/Edit'
|
||||||
|
import DeleteIcon from '@mui/icons-material/Delete'
|
||||||
|
import { LocalizationProvider, DateTimePicker } from '@mui/x-date-pickers'
|
||||||
|
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import {
|
||||||
|
useScheduledMessages,
|
||||||
|
useCreateScheduledMessage,
|
||||||
|
useUpdateScheduledMessage,
|
||||||
|
useDeleteScheduledMessage,
|
||||||
|
} from './api'
|
||||||
|
|
||||||
|
function formatDate(d) {
|
||||||
|
try {
|
||||||
|
return new Date(d).toLocaleString()
|
||||||
|
} catch {
|
||||||
|
return d
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ScheduleMessageModal({ session, onClose }) {
|
||||||
|
const [message, setMessage] = useState('')
|
||||||
|
const [scheduledAt, setScheduledAt] = useState(() => dayjs().add(1, 'hour'))
|
||||||
|
const [editingId, setEditingId] = useState(null)
|
||||||
|
const [error, setError] = useState('')
|
||||||
|
const [success, setSuccess] = useState('')
|
||||||
|
|
||||||
|
const { data: scheduledMessages, isLoading } = useScheduledMessages(session?.id)
|
||||||
|
const createMutation = useCreateScheduledMessage()
|
||||||
|
const updateMutation = useUpdateScheduledMessage()
|
||||||
|
const deleteMutation = useDeleteScheduledMessage()
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setMessage('')
|
||||||
|
setScheduledAt(dayjs().add(1, 'hour'))
|
||||||
|
setEditingId(null)
|
||||||
|
setError('')
|
||||||
|
setSuccess('')
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = (msg) => {
|
||||||
|
setMessage(msg.message)
|
||||||
|
setScheduledAt(dayjs(msg.scheduled_at))
|
||||||
|
setEditingId(msg.id)
|
||||||
|
setError('')
|
||||||
|
setSuccess('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancelEdit = () => {
|
||||||
|
setMessage('')
|
||||||
|
setScheduledAt(dayjs().add(1, 'hour'))
|
||||||
|
setEditingId(null)
|
||||||
|
setError('')
|
||||||
|
setSuccess('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
setError('')
|
||||||
|
setSuccess('')
|
||||||
|
if (!message.trim()) {
|
||||||
|
setError('El mensaje no puede estar vacío')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!session) return
|
||||||
|
const isoDate = scheduledAt.toISOString()
|
||||||
|
try {
|
||||||
|
if (editingId) {
|
||||||
|
await updateMutation.mutateAsync({
|
||||||
|
id: editingId,
|
||||||
|
sessionId: session.id,
|
||||||
|
message: message.trim(),
|
||||||
|
scheduledAt: isoDate,
|
||||||
|
})
|
||||||
|
setSuccess('Mensaje programado actualizado')
|
||||||
|
} else {
|
||||||
|
await createMutation.mutateAsync({
|
||||||
|
sessionId: session.id,
|
||||||
|
message: message.trim(),
|
||||||
|
scheduledAt: isoDate,
|
||||||
|
})
|
||||||
|
setSuccess('Mensaje programado creado')
|
||||||
|
}
|
||||||
|
setMessage('')
|
||||||
|
setScheduledAt(dayjs().add(1, 'hour'))
|
||||||
|
setEditingId(null)
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
if (!session) return
|
||||||
|
if (!window.confirm('¿Eliminar este mensaje programado?')) return
|
||||||
|
setError('')
|
||||||
|
setSuccess('')
|
||||||
|
try {
|
||||||
|
await deleteMutation.mutateAsync({ id, sessionId: session.id })
|
||||||
|
setSuccess('Mensaje programado eliminado')
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={!!session} onClose={handleClose} maxWidth="sm" fullWidth>
|
||||||
|
<DialogTitle>
|
||||||
|
Programar mensaje: {session?.name || session?.phone || session?.id}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
|
||||||
|
<DateTimePicker
|
||||||
|
label="Fecha y hora"
|
||||||
|
value={scheduledAt}
|
||||||
|
onChange={(v) => setScheduledAt(v)}
|
||||||
|
ampm={false}
|
||||||
|
slotProps={{
|
||||||
|
textField: {
|
||||||
|
fullWidth: true,
|
||||||
|
size: 'small',
|
||||||
|
readOnly: true,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
disablePast
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
size="small"
|
||||||
|
label="Mensaje"
|
||||||
|
multiline
|
||||||
|
minRows={3}
|
||||||
|
maxRows={6}
|
||||||
|
value={message}
|
||||||
|
onChange={(e) => setMessage(e.target.value)}
|
||||||
|
placeholder="Escribe el mensaje a programar..."
|
||||||
|
/>
|
||||||
|
{error && <Alert severity="error">{error}</Alert>}
|
||||||
|
{success && <Alert severity="success">{success}</Alert>}
|
||||||
|
<Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
|
||||||
|
{editingId && (
|
||||||
|
<Button onClick={handleCancelEdit} color="inherit">
|
||||||
|
Cancelar edición
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={!message.trim() || createMutation.isPending || updateMutation.isPending}
|
||||||
|
>
|
||||||
|
{createMutation.isPending || updateMutation.isPending ? (
|
||||||
|
<CircularProgress size={20} color="inherit" />
|
||||||
|
) : editingId ? (
|
||||||
|
'Guardar'
|
||||||
|
) : (
|
||||||
|
'Programar'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</LocalizationProvider>
|
||||||
|
|
||||||
|
<Divider sx={{ my: 2 }} />
|
||||||
|
|
||||||
|
<Typography variant="subtitle2" gutterBottom>
|
||||||
|
Mensajes programados pendientes
|
||||||
|
</Typography>
|
||||||
|
{isLoading ? (
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
|
||||||
|
<CircularProgress size={24} />
|
||||||
|
</Box>
|
||||||
|
) : scheduledMessages?.length === 0 ? (
|
||||||
|
<Typography variant="body2" color="text.secondary">
|
||||||
|
No hay mensajes programados pendientes.
|
||||||
|
</Typography>
|
||||||
|
) : (
|
||||||
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||||
|
{scheduledMessages?.map((msg) => (
|
||||||
|
<Box
|
||||||
|
key={msg.id}
|
||||||
|
sx={{
|
||||||
|
p: 1.5,
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: 'divider',
|
||||||
|
borderRadius: 1,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
|
||||||
|
{msg.message}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="caption" color="text.secondary">
|
||||||
|
{formatDate(msg.scheduled_at)}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||||
|
<IconButton size="small" onClick={() => handleEdit(msg)} disabled={deleteMutation.isPending}>
|
||||||
|
<EditIcon fontSize="small" />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton size="small" onClick={() => handleDelete(msg.id)} disabled={deleteMutation.isPending}>
|
||||||
|
<DeleteIcon fontSize="small" color="error" />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleClose}>Cerrar</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -20,7 +20,7 @@ function formatDate(d) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function SessionCard({ session, onBlock, onChat }) {
|
export default function SessionCard({ session, onBlock, onChat, onSchedule }) {
|
||||||
const [anchor, setAnchor] = useState(null)
|
const [anchor, setAnchor] = useState(null)
|
||||||
const deleteMutation = useDeleteSession()
|
const deleteMutation = useDeleteSession()
|
||||||
const unblockMutation = useUnblockSession()
|
const unblockMutation = useUnblockSession()
|
||||||
@@ -91,6 +91,9 @@ export default function SessionCard({ session, onBlock, onChat }) {
|
|||||||
<MenuItem onClick={handleChat}>
|
<MenuItem onClick={handleChat}>
|
||||||
Chat
|
Chat
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
<MenuItem onClick={() => { setAnchor(null); onSchedule(session) }}>
|
||||||
|
Programar
|
||||||
|
</MenuItem>
|
||||||
{session.block ? (
|
{session.block ? (
|
||||||
<MenuItem onClick={handleUnblock} sx={{ color: 'error.main' }}>
|
<MenuItem onClick={handleUnblock} sx={{ color: 'error.main' }}>
|
||||||
Desbloquear
|
Desbloquear
|
||||||
|
|||||||
@@ -17,12 +17,14 @@ import { useSessions } from './api'
|
|||||||
import SessionCard from './SessionCard'
|
import SessionCard from './SessionCard'
|
||||||
import BlockSessionModal from './BlockSessionModal'
|
import BlockSessionModal from './BlockSessionModal'
|
||||||
import ChatSessionModal from './ChatSessionModal'
|
import ChatSessionModal from './ChatSessionModal'
|
||||||
|
import ScheduleMessageModal from './ScheduleMessageModal'
|
||||||
|
|
||||||
export default function SessionsPage() {
|
export default function SessionsPage() {
|
||||||
const [campaignFilter, setCampaignFilter] = useState('')
|
const [campaignFilter, setCampaignFilter] = useState('')
|
||||||
const [search, setSearch] = useState('')
|
const [search, setSearch] = useState('')
|
||||||
const [blockingSession, setBlockingSession] = useState(null)
|
const [blockingSession, setBlockingSession] = useState(null)
|
||||||
const [chatSession, setChatSession] = useState(null)
|
const [chatSession, setChatSession] = useState(null)
|
||||||
|
const [scheduleSession, setScheduleSession] = useState(null)
|
||||||
const { data: campaigns } = useCampaigns()
|
const { data: campaigns } = useCampaigns()
|
||||||
const { data: sessions, isLoading, refetch } = useSessions(campaignFilter)
|
const { data: sessions, isLoading, refetch } = useSessions(campaignFilter)
|
||||||
|
|
||||||
@@ -100,6 +102,7 @@ export default function SessionsPage() {
|
|||||||
session={s}
|
session={s}
|
||||||
onBlock={(session) => setBlockingSession(session)}
|
onBlock={(session) => setBlockingSession(session)}
|
||||||
onChat={(session) => setChatSession(session)}
|
onChat={(session) => setChatSession(session)}
|
||||||
|
onSchedule={(session) => setScheduleSession(session)}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
@@ -115,6 +118,10 @@ export default function SessionsPage() {
|
|||||||
session={chatSession}
|
session={chatSession}
|
||||||
onClose={() => setChatSession(null)}
|
onClose={() => setChatSession(null)}
|
||||||
/>
|
/>
|
||||||
|
<ScheduleMessageModal
|
||||||
|
session={scheduleSession}
|
||||||
|
onClose={() => setScheduleSession(null)}
|
||||||
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -130,3 +130,80 @@ export function useSendMessage() {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function useScheduledMessages(sessionId) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['scheduledMessages', sessionId],
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!sessionId) return []
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('scheduled_messages')
|
||||||
|
.select('*')
|
||||||
|
.eq('session_id', sessionId)
|
||||||
|
.eq('status', 'pending')
|
||||||
|
.order('scheduled_at', { ascending: true })
|
||||||
|
if (error) throw new Error(error.message)
|
||||||
|
return data || []
|
||||||
|
},
|
||||||
|
enabled: !!sessionId,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useCreateScheduledMessage() {
|
||||||
|
const qc = useQueryClient()
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async ({ sessionId, message, scheduledAt }) => {
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('scheduled_messages')
|
||||||
|
.insert({
|
||||||
|
session_id: sessionId,
|
||||||
|
message,
|
||||||
|
scheduled_at: scheduledAt,
|
||||||
|
status: 'pending',
|
||||||
|
})
|
||||||
|
.select()
|
||||||
|
.single()
|
||||||
|
if (error) throw new Error(error.message)
|
||||||
|
return data
|
||||||
|
},
|
||||||
|
onSuccess: (_, { sessionId }) => {
|
||||||
|
qc.invalidateQueries({ queryKey: ['scheduledMessages', sessionId] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useUpdateScheduledMessage() {
|
||||||
|
const qc = useQueryClient()
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async ({ id, message, scheduledAt }) => {
|
||||||
|
const { error } = await supabase
|
||||||
|
.from('scheduled_messages')
|
||||||
|
.update({
|
||||||
|
message,
|
||||||
|
scheduled_at: scheduledAt,
|
||||||
|
updated_at: new Date().toISOString(),
|
||||||
|
})
|
||||||
|
.eq('id', id)
|
||||||
|
if (error) throw new Error(error.message)
|
||||||
|
},
|
||||||
|
onSuccess: (_, { sessionId }) => {
|
||||||
|
qc.invalidateQueries({ queryKey: ['scheduledMessages', sessionId] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useDeleteScheduledMessage() {
|
||||||
|
const qc = useQueryClient()
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async ({ id }) => {
|
||||||
|
const { error } = await supabase
|
||||||
|
.from('scheduled_messages')
|
||||||
|
.delete()
|
||||||
|
.eq('id', id)
|
||||||
|
if (error) throw new Error(error.message)
|
||||||
|
},
|
||||||
|
onSuccess: (_, { sessionId }) => {
|
||||||
|
qc.invalidateQueries({ queryKey: ['scheduledMessages', sessionId] })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import LoginPage from './features/auth/LoginPage'
|
|||||||
import CampaignsPage from './features/campaigns/CampaignsPage'
|
import CampaignsPage from './features/campaigns/CampaignsPage'
|
||||||
import SessionsPage from './features/sessions/SessionsPage'
|
import SessionsPage from './features/sessions/SessionsPage'
|
||||||
import MediaPage from './features/media/MediaPage'
|
import MediaPage from './features/media/MediaPage'
|
||||||
|
import InstancesPage from './features/instances/InstancesPage'
|
||||||
import { supabase } from './lib/supabase'
|
import { supabase } from './lib/supabase'
|
||||||
|
|
||||||
const rootRoute = createRootRoute({
|
const rootRoute = createRootRoute({
|
||||||
@@ -58,10 +59,16 @@ const mediaRoute = createRoute({
|
|||||||
component: MediaPage,
|
component: MediaPage,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const instancesRoute = createRoute({
|
||||||
|
getParentRoute: () => appLayoutRoute,
|
||||||
|
path: '/instances',
|
||||||
|
component: InstancesPage,
|
||||||
|
})
|
||||||
|
|
||||||
const routeTree = rootRoute.addChildren([
|
const routeTree = rootRoute.addChildren([
|
||||||
indexRoute,
|
indexRoute,
|
||||||
loginRoute,
|
loginRoute,
|
||||||
appLayoutRoute.addChildren([campaignsRoute, sessionsRoute, mediaRoute]),
|
appLayoutRoute.addChildren([campaignsRoute, sessionsRoute, mediaRoute, instancesRoute]),
|
||||||
])
|
])
|
||||||
|
|
||||||
export const router = createRouter({ routeTree })
|
export const router = createRouter({ routeTree })
|
||||||
|
|||||||
Reference in New Issue
Block a user