feat(front): kinda added chat feature

feat(front) react version start
2026-05-31 23:21:23 -06:00 · 2026-05-31 19:43:11 -06:00
34 changed files with 5880 additions and 0 deletions
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Panel de Campañas</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <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" />
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>
@@ -0,0 +1,38 @@
+{
+  "name": "crmdashboard",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.0.1",
+    "@mui/material": "^9.0.1",
+    "@supabase/supabase-js": "^2.106.2",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/react-query": "^5.100.14",
+    "@tanstack/react-router": "^1.170.10",
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.15",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwindcss": "^4.3.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "vite": "^8.0.12"
+  }
+}
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
@@ -0,0 +1,63 @@
+import { Outlet, useNavigate, useLocation } from '@tanstack/react-router'
+import { Box, Paper, Tabs, Tab, useTheme } from '@mui/material'
+import { useState } from 'react'
+import TopBar from './TopBar'
+import Sidebar from './Sidebar'
+
+export default function AppShell() {
+  const theme = useTheme()
+  const [collapsed, setCollapsed] = useState(false)
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  return (
+    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
+      <TopBar
+        onCollapseClick={() => setCollapsed((p) => !p)}
+        collapsed={collapsed}
+      />
+      <Sidebar collapsed={collapsed} />
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          p: { xs: 2, md: 3 },
+          mt: '64px',
+          minWidth: 0,
+          width: {
+            md: `calc(100% - ${collapsed ? 72 : 240}px)`,
+          },
+          transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+          }),
+        }}
+      >
+        <Paper
+          elevation={0}
+          sx={{
+            display: { md: 'none' },
+            mb: 2,
+            borderRadius: 3,
+            border: '1px solid',
+            borderColor: 'divider',
+            bgcolor: 'background.paper',
+          }}
+        >
+          <Tabs
+            value={location.pathname}
+            onChange={(_e, path) => navigate({ to: path })}
+            variant="fullWidth"
+            textColor="primary"
+            indicatorColor="primary"
+          >
+            <Tab label="Campañas" value="/campaigns" />
+            <Tab label="Sesiones" value="/sessions" />
+            <Tab label="Archivos" value="/media" />
+          </Tabs>
+        </Paper>
+        <Outlet />
+      </Box>
+    </Box>
+  )
+}
@@ -0,0 +1,106 @@
+import { useMemo } from 'react'
+import { Outlet } from '@tanstack/react-router'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { queryClient } from '../lib/queryClient'
+import { ThemeProvider, useThemeMode } from './ThemeContext'
+
+function ThemedRoot() {
+  const { mode } = useThemeMode()
+  const theme = useMemo(
+    () =>
+      createTheme({
+        shape: {
+          borderRadius: 16,
+        },
+        palette: {
+          mode,
+          primary: { main: '#6366f1' },
+          background: {
+            default: mode === 'dark' ? '#09090b' : '#fafafa',
+            paper: mode === 'dark' ? '#18181b' : '#ffffff',
+          },
+          text: {
+            primary: mode === 'dark' ? '#e4e4e7' : '#18181b',
+            secondary: mode === 'dark' ? '#a1a1aa' : '#52525b',
+            disabled: mode === 'dark' ? '#71717a' : '#a1a1aa',
+          },
+          divider: mode === 'dark' ? '#27272a' : '#e4e4e7',
+          action: {
+            hover: mode === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.04)',
+            selected: mode === 'dark' ? 'rgba(99,102,241,0.16)' : 'rgba(99,102,241,0.12)',
+          },
+        },
+        components: {
+          MuiCard: {
+            styleOverrides: {
+              root: {
+                border: '1px solid #27272a',
+                backgroundImage: 'none',
+                boxShadow: 'none',
+                borderRadius: 20,
+              },
+            },
+          },
+          MuiAppBar: {
+            styleOverrides: {
+              root: {
+                backgroundColor: '#18181b',
+                borderBottom: '1px solid #27272a',
+                boxShadow: 'none',
+              },
+            },
+          },
+          MuiDrawer: {
+            styleOverrides: {
+              paper: {
+                backgroundColor: '#18181b',
+                borderRight: '1px solid #27272a',
+              },
+            },
+          },
+          MuiButton: {
+            styleOverrides: {
+              root: {
+                textTransform: 'none',
+                borderRadius: 12,
+              },
+            },
+          },
+          MuiOutlinedInput: {
+            styleOverrides: {
+              root: {
+                borderRadius: 12,
+              },
+            },
+          },
+          MuiDialog: {
+            styleOverrides: {
+              paper: {
+                borderRadius: 20,
+              },
+            },
+          },
+        },
+      }),
+    [mode]
+  )
+
+  return (
+    <MuiThemeProvider theme={theme}>
+      <CssBaseline />
+      <Outlet />
+    </MuiThemeProvider>
+  )
+}
+
+export default function Root() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>
+        <ThemedRoot />
+      </ThemeProvider>
+    </QueryClientProvider>
+  )
+}
@@ -0,0 +1,73 @@
+import {
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+} from '@mui/material'
+import CampaignIcon from '@mui/icons-material/Campaign'
+import ChatIcon from '@mui/icons-material/Chat'
+import PermMediaIcon from '@mui/icons-material/PermMedia'
+import { Link, useLocation } from '@tanstack/react-router'
+
+const DRAWER_WIDTH = 240
+const COLLAPSED_WIDTH = 72
+
+const items = [
+  { path: '/campaigns', label: 'Campañas', icon: <CampaignIcon /> },
+  { path: '/sessions', label: 'Sesiones', icon: <ChatIcon /> },
+  { path: '/media', label: 'Archivos', icon: <PermMediaIcon /> },
+]
+
+export default function Sidebar({ collapsed }) {
+  const location = useLocation()
+
+  return (
+    <Drawer
+      variant="permanent"
+      sx={{
+        display: { xs: 'none', md: 'block' },
+        width: collapsed ? COLLAPSED_WIDTH : DRAWER_WIDTH,
+        flexShrink: 0,
+        '& .MuiDrawer-paper': {
+          boxSizing: 'border-box',
+          width: collapsed ? COLLAPSED_WIDTH : DRAWER_WIDTH,
+          overflowX: 'hidden',
+          transition: (theme) =>
+            theme.transitions.create('width', {
+              easing: theme.transitions.easing.sharp,
+              duration: theme.transitions.duration.enteringScreen,
+            }),
+        },
+      }}
+      open
+    >
+      <Toolbar />
+      <List>
+        {items.map((item) => (
+          <ListItem key={item.path} disablePadding>
+            <ListItemButton
+              component={Link}
+              to={item.path}
+              selected={location.pathname === item.path}
+              sx={{ minHeight: 48 }}
+            >
+              <ListItemIcon
+                sx={{
+                  minWidth: 0,
+                  mr: collapsed ? 'auto' : 2,
+                  justifyContent: 'center',
+                }}
+              >
+                {item.icon}
+              </ListItemIcon>
+              {!collapsed && <ListItemText primary={item.label} />}
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Drawer>
+  )
+}
@@ -0,0 +1,28 @@
+import { createContext, useContext, useState, useMemo } from 'react'
+
+const ThemeContext = createContext({
+  mode: 'dark',
+  toggleTheme: () => {},
+})
+
+export function ThemeProvider({ children }) {
+  const [mode, setMode] = useState('dark')
+
+  const value = useMemo(
+    () => ({
+      mode,
+      toggleTheme: () => {
+        const next = mode === 'dark' ? 'light' : 'dark'
+        setMode(next)
+        document.documentElement.classList.toggle('dark', next === 'dark')
+      },
+    }),
+    [mode]
+  )
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export function useThemeMode() {
+  return useContext(ThemeContext)
+}
@@ -0,0 +1,82 @@
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Box,
+  Button,
+  useTheme,
+} from '@mui/material'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import Brightness4Icon from '@mui/icons-material/Brightness4'
+import Brightness7Icon from '@mui/icons-material/Brightness7'
+import { useNavigate } from '@tanstack/react-router'
+import { supabase } from '../lib/supabase'
+import { useThemeMode } from './ThemeContext'
+import { useEffect, useState } from 'react'
+
+export default function TopBar({
+  onCollapseClick,
+  collapsed,
+}) {
+  const theme = useTheme()
+  const navigate = useNavigate()
+  const { mode, toggleTheme } = useThemeMode()
+  const [email, setEmail] = useState('')
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      if (session?.user?.email) setEmail(session.user.email)
+    })
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      (_event, session) => {
+        setEmail(session?.user?.email || '')
+      }
+    )
+    return () => subscription.unsubscribe()
+  }, [])
+
+  const handleLogout = async () => {
+    await supabase.auth.signOut()
+    navigate({ to: '/login' })
+  }
+
+  return (
+    <AppBar
+      position="fixed"
+      sx={{
+        width: { md: `calc(100% - ${collapsed ? 72 : 240}px)` },
+        ml: { md: `${collapsed ? 72 : 240}px` },
+        transition: theme.transitions.create(['width', 'margin'], {
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.enteringScreen,
+        }),
+      }}
+    >
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          onClick={onCollapseClick}
+          sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
+        >
+          {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+        </IconButton>
+        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          Panel de Campañas
+        </Typography>
+        {email && (
+          <Typography variant="caption" sx={{ mr: 2, display: { xs: 'none', sm: 'block' } }}>
+            {email}
+          </Typography>
+        )}
+        <IconButton color="inherit" onClick={toggleTheme} sx={{ mr: 1 }}>
+          {mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
+        </IconButton>
+        <Button color="inherit" onClick={handleLogout}>
+          Cerrar Sesión
+        </Button>
+      </Toolbar>
+    </AppBar>
+  )
+}
@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import {
+  Box,
+  Card,
+  CardContent,
+  TextField,
+  Button,
+  Typography,
+  Alert,
+} from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
+import { supabase } from '../../lib/supabase'
+
+export default function LoginPage() {
+  const navigate = useNavigate()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleLogin = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    const { error: loginError } = await supabase.auth.signInWithPassword({
+      email: email.trim(),
+      password: password.trim(),
+    })
+    setLoading(false)
+    if (loginError) {
+      setError(loginError.message)
+      return
+    }
+    navigate({ to: '/campaigns' })
+  }
+
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: 3,
+      }}
+    >
+      <Card sx={{ width: '100%', maxWidth: 420 }}>
+        <CardContent>
+          <Typography variant="h5" component="h1" gutterBottom>
+            Panel de Campañas
+          </Typography>
+          <Typography variant="body2" color="text.secondary" gutterBottom>
+            Inicia sesión para gestionar campañas, sesiones y archivos.
+          </Typography>
+          <Box component="form" onSubmit={handleLogin} sx={{ mt: 3 }}>
+            <TextField
+              fullWidth
+              label="Correo"
+              type="email"
+              margin="normal"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+            <TextField
+              fullWidth
+              label="Contraseña"
+              type="password"
+              margin="normal"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+            {error && (
+              <Alert severity="error" sx={{ mt: 2 }}>
+                {error}
+              </Alert>
+            )}
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 2 }}
+              disabled={loading}
+            >
+              Entrar
+            </Button>
+          </Box>
+        </CardContent>
+      </Card>
+    </Box>
+  )
+}
@@ -0,0 +1,118 @@
+import { useState } from 'react'
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Chip,
+} from '@mui/material'
+import { useDeleteCampaign } from './api'
+
+function formatDate(d) {
+  try {
+    return new Date(d).toLocaleString()
+  } catch {
+    return d
+  }
+}
+
+export default function CampaignCard({ campaign, hasMedia, onEdit }) {
+  const deleteMutation = useDeleteCampaign()
+
+  const handleDelete = async () => {
+    if (!window.confirm('¿Eliminar esta campaña?')) return
+    deleteMutation.mutate(campaign.id)
+  }
+
+  const statusColor = campaign.active === false ? 'error' : 'success'
+  const statusText = campaign.active === false ? 'Inactiva' : 'Activa'
+  const keywordsStr = Array.isArray(campaign.keywords)
+    ? campaign.keywords.join(', ')
+    : ''
+
+  return (
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+            gap: 2,
+          }}
+        >
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+              <Typography variant="h6" noWrap>
+                {campaign.name}
+              </Typography>
+              <Chip size="small" color={statusColor} label={statusText} />
+            </Box>
+            {campaign.send_welcome_photos && (
+              <Typography variant="caption" color="primary" display="block" sx={{ mt: 0.5 }}>
+                📸 Requiere Fotos de Bienvenida
+              </Typography>
+            )}
+            {keywordsStr && (
+              <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.5 }}>
+                <strong>Palabras clave:</strong> {keywordsStr}
+              </Typography>
+            )}
+            {campaign.promt && (
+              <Typography
+                variant="caption"
+                display="block"
+                color="text.secondary"
+                sx={{
+                  mt: 0.5,
+                  display: '-webkit-box',
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: 'vertical',
+                  overflow: 'hidden',
+                }}
+              >
+                <strong>Instrucciones:</strong> {campaign.promt}
+              </Typography>
+            )}
+            <Typography variant="caption" display="block" color="text.disabled" sx={{ mt: 1, overflowWrap: 'anywhere' }}>
+              Creada: {formatDate(campaign.created_at)} • ID: {campaign.id.split('-')[0]}...
+            </Typography>
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 1,
+              minWidth: 0,
+            }}
+          >
+            {hasMedia && (
+              <Button
+                size="small"
+                variant="contained"
+                href={`/gallery?campaign_id=${campaign.id}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Galería
+              </Button>
+            )}
+            <Button size="small" variant="outlined" onClick={onEdit}>
+              Editar
+            </Button>
+            <Button
+              size="small"
+              variant="outlined"
+              color="error"
+              onClick={handleDelete}
+              disabled={deleteMutation.isPending}
+            >
+              Eliminar
+            </Button>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { Box, Typography, Button, CircularProgress } from '@mui/material'
+import CreateCampaignForm from './CreateCampaignForm'
+import CampaignCard from './CampaignCard'
+import EditCampaignModal from './EditCampaignModal'
+import { useCampaigns, useMediaCampaignIds } from './api'
+
+export default function CampaignsPage() {
+  const { data: campaigns, isLoading } = useCampaigns()
+  const { data: mediaIds } = useMediaCampaignIds()
+  const [showInactive, setShowInactive] = useState(false)
+  const [editing, setEditing] = useState(null)
+
+  const filtered = showInactive
+    ? campaigns
+    : campaigns?.filter((c) => c.active !== false)
+
+  if (isLoading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
+        <CircularProgress />
+      </Box>
+    )
+  }
+
+  return (
+    <Box>
+      <CreateCampaignForm />
+      <Box sx={{ mt: 3 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mb: 2,
+          }}
+        >
+          <Typography variant="h6">Lista de Campañas</Typography>
+          <Button
+            variant="outlined"
+            size="small"
+            onClick={() => setShowInactive((p) => !p)}
+          >
+            {showInactive ? 'Ocultar Inactivas' : 'Mostrar Inactivas'}
+          </Button>
+        </Box>
+        {filtered?.map((c) => (
+          <CampaignCard
+            key={c.id}
+            campaign={c}
+            hasMedia={mediaIds?.has(c.id)}
+            onEdit={() => setEditing(c)}
+          />
+        ))}
+        {filtered?.length === 0 && (
+          <Typography color="text.secondary">No se encontraron campañas.</Typography>
+        )}
+      </Box>
+      <EditCampaignModal campaign={editing} onClose={() => setEditing(null)} />
+    </Box>
+  )
+}
@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import {
+  Card,
+  CardContent,
+  TextField,
+  Button,
+  Typography,
+  Box,
+  Alert,
+} from '@mui/material'
+import { useCreateCampaign } from './api'
+
+export default function CreateCampaignForm() {
+  const [name, setName] = useState('')
+  const [notes, setNotes] = useState('')
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+  const createMutation = useCreateCampaign()
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setMsg('')
+    setError('')
+    if (!name.trim()) {
+      setError('El nombre de la campaña es obligatorio.')
+      return
+    }
+    try {
+      await createMutation.mutateAsync({ name: name.trim(), promt: notes.trim() })
+      setName('')
+      setNotes('')
+      setMsg('¡Campaña creada!')
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Crear Campaña
+        </Typography>
+        <Box component="form" onSubmit={handleSubmit}>
+          <TextField
+            fullWidth
+            label="Nombre de campaña"
+            margin="normal"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+          <TextField
+            fullWidth
+            label="Instrucciones para IA (opcional)"
+            margin="normal"
+            multiline
+            rows={2}
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+          />
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            sx={{ mt: 1 }}
+            disabled={createMutation.isPending}
+          >
+            Crear Campaña
+          </Button>
+          {msg && (
+            <Alert severity="success" sx={{ mt: 2 }}>
+              {msg}
+            </Alert>
+          )}
+          {error && (
+            <Alert severity="error" sx={{ mt: 2 }}>
+              {error}
+            </Alert>
+          )}
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
@@ -0,0 +1,133 @@
+import { useState, useEffect } from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Button,
+  Box,
+  FormControlLabel,
+  Checkbox,
+  Alert,
+} from '@mui/material'
+import { useUpdateCampaign } from './api'
+
+export default function EditCampaignModal({ campaign, onClose }) {
+  const [name, setName] = useState('')
+  const [keywords, setKeywords] = useState('')
+  const [prompt, setPrompt] = useState('')
+  const [welcomePhotos, setWelcomePhotos] = useState(false)
+  const [active, setActive] = useState(true)
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+  const updateMutation = useUpdateCampaign()
+
+  useEffect(() => {
+    if (campaign) {
+      setName(campaign.name || '')
+      setKeywords(
+        Array.isArray(campaign.keywords) ? campaign.keywords.join(', ') : ''
+      )
+      setPrompt(campaign.promt || '')
+      setWelcomePhotos(campaign.send_welcome_photos === true)
+      setActive(campaign.active !== false)
+      setMsg('')
+      setError('')
+    }
+  }, [campaign])
+
+  const handleSave = async () => {
+    setMsg('')
+    setError('')
+    if (!name.trim()) {
+      setError('El nombre es obligatorio.')
+      return
+    }
+    const kwArr = keywords
+      ? keywords.split(',').map((k) => k.trim()).filter((k) => k.length > 0)
+      : []
+    try {
+      await updateMutation.mutateAsync({
+        id: campaign.id,
+        name: name.trim(),
+        keywords: kwArr,
+        promt: prompt.trim(),
+        send_welcome_photos: welcomePhotos,
+        active,
+      })
+      setMsg('¡Guardado!')
+      onClose()
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <Dialog open={!!campaign} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle>Editar Campaña</DialogTitle>
+      <DialogContent>
+        <Box sx={{ pt: 1 }}>
+          <TextField
+            fullWidth
+            label="Nombre"
+            margin="dense"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <TextField
+            fullWidth
+            label="Palabras clave (separadas por coma)"
+            margin="dense"
+            placeholder="ej. casa, piscina, jardín"
+            value={keywords}
+            onChange={(e) => setKeywords(e.target.value)}
+          />
+          <TextField
+            fullWidth
+            label="Instrucciones para IA"
+            margin="dense"
+            multiline
+            rows={3}
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={welcomePhotos}
+                onChange={(e) => setWelcomePhotos(e.target.checked)}
+              />
+            }
+            label="Requerir Fotos de Bienvenida"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={active}
+                onChange={(e) => setActive(e.target.checked)}
+              />
+            }
+            label="Campaña Activa"
+          />
+          {msg && (
+            <Alert severity="success" sx={{ mt: 1 }}>
+              {msg}
+            </Alert>
+          )}
+          {error && (
+            <Alert severity="error" sx={{ mt: 1 }}>
+              {error}
+            </Alert>
+          )}
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancelar</Button>
+        <Button onClick={handleSave} variant="contained" disabled={updateMutation.isPending}>
+          Guardar Cambios
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
@@ -0,0 +1,71 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { supabase } from '../../lib/supabase'
+
+export function useCampaigns() {
+  return useQuery({
+    queryKey: ['campaigns'],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from('campaigns')
+        .select('*')
+        .order('created_at', { ascending: false })
+      if (error) throw new Error(error.message)
+      return data || []
+    },
+  })
+}
+
+export function useMediaCampaignIds() {
+  return useQuery({
+    queryKey: ['mediaCampaignIds'],
+    queryFn: async () => {
+      const { data, error } = await supabase.from('media').select('campaign_id')
+      if (error) throw new Error(error.message)
+      return new Set(data?.map((m) => m.campaign_id) || [])
+    },
+  })
+}
+
+export function useCreateCampaign() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ name, promt }) => {
+      const { error } = await supabase
+        .from('campaigns')
+        .insert([{ name, promt, active: true }])
+      if (error) throw new Error(error.message)
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['campaigns'] })
+    },
+  })
+}
+
+export function useUpdateCampaign() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ id, name, keywords, promt, send_welcome_photos, active }) => {
+      const { error } = await supabase
+        .from('campaigns')
+        .update({ name, keywords, promt, send_welcome_photos, active })
+        .eq('id', id)
+      if (error) throw new Error(error.message)
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['campaigns'] })
+    },
+  })
+}
+
+export function useDeleteCampaign() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (id) => {
+      const { error } = await supabase.from('campaigns').delete().eq('id', id)
+      if (error) throw new Error(error.message)
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['campaigns'] })
+    },
+  })
+}
@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+  Alert,
+} from '@mui/material'
+import { useDeleteMedia } from './api'
+
+export default function DeleteMediaModal({ media, onClose }) {
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+  const deleteMutation = useDeleteMedia()
+
+  const handleConfirm = async () => {
+    setMsg('')
+    setError('')
+    try {
+      await deleteMutation.mutateAsync({ id: media.id, url: media.url })
+      setMsg('¡Eliminado con éxito!')
+      setTimeout(() => onClose(), 600)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <Dialog open={!!media} onClose={onClose} maxWidth="xs" fullWidth>
+      <DialogTitle>Eliminar Archivo?</DialogTitle>
+      <DialogContent>
+        <Typography variant="body2" color="text.secondary">
+          Estás seguro de que quieres eliminar esta foto? Esta acción no se puede deshacer.
+        </Typography>
+        {msg && (
+          <Alert severity="success" sx={{ mt: 2 }}>
+            {msg}
+          </Alert>
+        )}
+        {error && (
+          <Alert severity="error" sx={{ mt: 2 }}>
+            {error}
+          </Alert>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancelar</Button>
+        <Button onClick={handleConfirm} variant="contained" color="error" disabled={deleteMutation.isPending}>
+          Eliminar
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
@@ -0,0 +1,50 @@
+import { Card, CardContent, Typography, Box, IconButton } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+
+function formatDate(d) {
+  try {
+    return new Date(d).toLocaleString()
+  } catch {
+    return d
+  }
+}
+
+export default function MediaCard({ media, campaignName, onDelete }) {
+  return (
+    <Card sx={{ mb: 2, overflow: 'hidden' }}>
+      <Box sx={{ position: 'relative' }}>
+        <img
+          src={media.url}
+          alt={media.category || 'archivo'}
+          loading="lazy"
+          style={{ width: '100%', height: 'auto', display: 'block' }}
+        />
+        <IconButton
+          size="small"
+          onClick={() => onDelete(media)}
+          sx={{
+            position: 'absolute',
+            top: 8,
+            right: 8,
+            bgcolor: 'rgba(0,0,0,0.5)',
+            color: '#fff',
+            '&:hover': { bgcolor: 'rgba(0,0,0,0.8)' },
+          }}
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </Box>
+      <CardContent>
+        <Typography variant="caption" color="primary" sx={{ fontWeight: 700, textTransform: 'uppercase' }}>
+          {media.category || 'foto'} • {media.type || 'desconocido'}
+        </Typography>
+        <Typography variant="body2" sx={{ fontWeight: 600 }} noWrap>
+          {campaignName}
+        </Typography>
+        <Typography variant="caption" color="text.disabled">
+          {formatDate(media.created_at)}
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}
@@ -0,0 +1,193 @@
+import { useState } from 'react'
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  TextField,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Divider,
+  Grid,
+  Alert,
+  CircularProgress,
+} from '@mui/material'
+import { useCampaigns } from '../campaigns/api'
+import { useMedia, useUploadMedia } from './api'
+import MediaCard from './MediaCard'
+import DeleteMediaModal from './DeleteMediaModal'
+
+export default function MediaPage() {
+  const [campaignId, setCampaignId] = useState('')
+  const [category, setCategory] = useState('')
+  const [mediaType, setMediaType] = useState('')
+  const [file, setFile] = useState(null)
+  const [url, setUrl] = useState('')
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+  const [deletingMedia, setDeletingMedia] = useState(null)
+
+  const { data: campaigns } = useCampaigns()
+  const { data: mediaList, isLoading } = useMedia()
+  const uploadMutation = useUploadMedia()
+
+  const activeCampaignIds = new Set(
+    campaigns?.filter((c) => c.active !== false).map((c) => c.id) || []
+  )
+  const filteredMedia = mediaList?.filter((m) => activeCampaignIds.has(m.campaign_id))
+
+  const handleUpload = async (e) => {
+    e.preventDefault()
+    setMsg('')
+    setError('')
+    try {
+      await uploadMutation.mutateAsync({
+        campaignId,
+        category: category.trim(),
+        type: mediaType.trim(),
+        file,
+        url: url.trim(),
+      })
+      setCampaignId('')
+      setCategory('')
+      setMediaType('')
+      setFile(null)
+      setUrl('')
+      setMsg('¡Archivo guardado con éxito!')
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <Box>
+      <Card sx={{ mb: 3 }}>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>
+            Subir Archivo
+          </Typography>
+          <Box component="form" onSubmit={handleUpload}>
+            <FormControl fullWidth margin="normal" size="small">
+              <InputLabel>Campaña</InputLabel>
+              <Select
+                value={campaignId}
+                label="Campaña"
+                onChange={(e) => setCampaignId(e.target.value)}
+              >
+                <MenuItem value="">
+                  <em>Seleccionar campaña</em>
+                </MenuItem>
+                {campaigns?.map((c) => (
+                  <MenuItem key={c.id} value={c.id}>
+                    {c.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <TextField
+              fullWidth
+              label="Categoría (ej. cocina, frente, baño)"
+              margin="normal"
+              size="small"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+            />
+            <TextField
+              fullWidth
+              label="Tipo (ej. foto, video)"
+              margin="normal"
+              size="small"
+              value={mediaType}
+              onChange={(e) => setMediaType(e.target.value)}
+            />
+            <Typography variant="caption" sx={{ mt: 1, display: 'block', fontWeight: 600, textTransform: 'uppercase' }}>
+              Fuente de archivo
+            </Typography>
+            <input
+              type="file"
+              accept="image/*,video/*"
+              onChange={(e) => setFile(e.target.files?.[0] || null)}
+              style={{ marginTop: 8, marginBottom: 8 }}
+            />
+            <Divider sx={{ my: 1 }}>
+              <Typography variant="caption" color="text.secondary" sx={{ px: 1 }}>
+                O
+              </Typography>
+            </Divider>
+            <TextField
+              fullWidth
+              type="url"
+              label="Pegar URL remota (ej. Google Drive, Imgur)"
+              margin="normal"
+              size="small"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 1 }}
+              disabled={uploadMutation.isPending}
+            >
+              Guardar Archivo
+            </Button>
+            {msg && (
+              <Alert severity="success" sx={{ mt: 2 }}>
+                {msg}
+              </Alert>
+            )}
+            {error && (
+              <Alert severity="error" sx={{ mt: 2 }}>
+                {error}
+              </Alert>
+            )}
+          </Box>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>
+            Lista de Archivos
+          </Typography>
+          {isLoading ? (
+            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
+              <CircularProgress />
+            </Box>
+          ) : (
+            <Grid container spacing={2}>
+              {filteredMedia?.map((m) => {
+                const campaign = campaigns?.find((c) => c.id === m.campaign_id)
+                return (
+                  <Grid item xs={12} sm={6} md={4} lg={3} key={m.id}>
+                    <MediaCard
+                      media={m}
+                      campaignName={campaign?.name || 'Campaña desconocida'}
+                      onDelete={(media) => setDeletingMedia(media)}
+                    />
+                  </Grid>
+                )
+              })}
+              {filteredMedia?.length === 0 && (
+                <Grid item xs={12}>
+                  <Typography color="text.secondary">
+                    No se encontraron archivos de campañas activas.
+                  </Typography>
+                </Grid>
+              )}
+            </Grid>
+          )}
+        </CardContent>
+      </Card>
+
+      <DeleteMediaModal
+        media={deletingMedia}
+        onClose={() => setDeletingMedia(null)}
+      />
+    </Box>
+  )
+}
@@ -0,0 +1,96 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { supabase, STORAGE_BUCKET } from '../../lib/supabase'
+
+export function useMedia() {
+  return useQuery({
+    queryKey: ['media'],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from('media')
+        .select('*')
+        .order('created_at', { ascending: false })
+        .limit(100)
+      if (error) throw new Error(error.message)
+      return data || []
+    },
+  })
+}
+
+export function useUploadMedia() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ campaignId, category, type, file, url }) => {
+      if (!campaignId) throw new Error('Select a campaign first.')
+      if (!file && !url) throw new Error('Please select a file OR paste a URL.')
+      if (file && url) throw new Error('Please select EITHER a file OR a URL, not both.')
+
+      let finalUrl = ''
+
+      if (url) {
+        try {
+          new URL(url)
+          finalUrl = url
+        } catch {
+          throw new Error('Please provide a valid URL (include http/https).')
+        }
+      } else {
+        const ext = file.name.split('.').pop()
+        const filePath = `${campaignId}/${Date.now()}-${Math.random().toString(36).slice(2)}.${ext}`
+        const { error: uploadError } = await supabase.storage
+          .from(STORAGE_BUCKET)
+          .upload(filePath, file, { cacheControl: '3600', upsert: false })
+        if (uploadError) throw new Error('Upload error: ' + uploadError.message)
+        const { data: publicUrlData } = supabase.storage
+          .from(STORAGE_BUCKET)
+          .getPublicUrl(filePath)
+        finalUrl = publicUrlData.publicUrl
+      }
+
+      const { error: insertError } = await supabase.from('media').insert([
+        {
+          campaign_id: campaignId,
+          url: finalUrl,
+          category,
+          type,
+        },
+      ])
+      if (insertError) throw new Error('DB insert error: ' + insertError.message)
+
+      return finalUrl
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['media'] })
+      qc.invalidateQueries({ queryKey: ['mediaCampaignIds'] })
+    },
+  })
+}
+
+export function useDeleteMedia() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ id, url }) => {
+      const { error: dbError } = await supabase
+        .from('media')
+        .delete()
+        .eq('id', id)
+      if (dbError) throw new Error(dbError.message)
+
+      if (url.includes(STORAGE_BUCKET)) {
+        try {
+          const parts = url.split(STORAGE_BUCKET + '/')
+          if (parts.length >= 2) {
+            const filePath = parts[1]
+            await supabase.storage.from(STORAGE_BUCKET).remove([filePath])
+          }
+        } catch (e) {
+          console.error('Failed to delete from storage', e)
+        }
+      }
+      return id
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['media'] })
+      qc.invalidateQueries({ queryKey: ['mediaCampaignIds'] })
+    },
+  })
+}
@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+  Alert,
+} from '@mui/material'
+import { useBlockSession } from './api'
+
+export default function BlockSessionModal({ session, onClose }) {
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+  const blockMutation = useBlockSession()
+
+  const handleConfirm = async () => {
+    setMsg('')
+    setError('')
+    try {
+      await blockMutation.mutateAsync({ phone: session.phone })
+      setMsg('¡Sesión bloqueada!')
+      setTimeout(() => onClose(), 600)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  return (
+    <Dialog open={!!session} onClose={onClose} maxWidth="xs" fullWidth>
+      <DialogTitle>Bloquear Sesión?</DialogTitle>
+      <DialogContent>
+        <Typography variant="body2" color="text.secondary">
+          Estás seguro de que quieres bloquear esta sesión? El número de teléfono será bloqueado.
+        </Typography>
+        {msg && (
+          <Alert severity="success" sx={{ mt: 2 }}>
+            {msg}
+          </Alert>
+        )}
+        {error && (
+          <Alert severity="error" sx={{ mt: 2 }}>
+            {error}
+          </Alert>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancelar</Button>
+        <Button onClick={handleConfirm} variant="contained" color="error" disabled={blockMutation.isPending}>
+          Bloquear
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
@@ -0,0 +1,139 @@
+import { useState, useRef, useEffect } from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  Box,
+  Typography,
+  CircularProgress,
+  Alert,
+} from '@mui/material'
+import { useChatHistory, useSendMessage } from './api'
+
+export default function ChatSessionModal({ session, onClose }) {
+  const [text, setText] = useState('')
+  const scrollRef = useRef(null)
+  const { data: messages, isLoading, error } = useChatHistory(session?.phone)
+  const sendMutation = useSendMessage()
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [messages])
+
+  const handleSend = async () => {
+    if (!text.trim() || !session) return
+    await sendMutation.mutateAsync({ sessionId: session.phone, message: text.trim() })
+    setText('')
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  const parseMessage = (msg) => {
+    if (!msg) return null
+    if (typeof msg === 'string') {
+      try {
+        return JSON.parse(msg)
+      } catch {
+        return { type: 'ai', content: msg }
+      }
+    }
+    return msg
+  }
+
+  return (
+    <Dialog open={!!session} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>Chat: {session?.name || session?.phone || session?.id}</DialogTitle>
+      <DialogContent sx={{ display: 'flex', flexDirection: 'column', height: '60vh', p: 2 }}>
+        {isLoading && (
+          <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
+            <CircularProgress />
+          </Box>
+        )}
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {error.message}
+          </Alert>
+        )}
+        <Box
+          ref={scrollRef}
+          sx={{
+            flex: 1,
+            overflowY: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+            mb: 2,
+          }}
+        >
+          {messages?.map((msg) => {
+            const parsed = parseMessage(msg.message)
+            const isAi = parsed?.type === 'ai'
+            return (
+              <Box
+                key={msg.id}
+                sx={(theme) => ({
+                  alignSelf: isAi ? 'flex-start' : 'flex-end',
+                  bgcolor: isAi
+                    ? theme.palette.mode === 'dark'
+                      ? 'grey.800'
+                      : 'grey.200'
+                    : 'primary.main',
+                  color: isAi
+                    ? theme.palette.mode === 'dark'
+                      ? 'grey.100'
+                      : 'text.primary'
+                    : 'primary.contrastText',
+                  p: 1.5,
+                  borderRadius: 2,
+                  maxWidth: '80%',
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                })}
+              >
+                <Typography variant="body2">{parsed?.content || ''}</Typography>
+              </Box>
+            )
+          })}
+        </Box>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <TextField
+            fullWidth
+            size="small"
+            placeholder="Escribe un mensaje..."
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={sendMutation.isPending}
+            multiline
+            maxRows={4}
+          />
+          <Button
+            variant="contained"
+            onClick={handleSend}
+            disabled={!text.trim() || sendMutation.isPending}
+          >
+            {sendMutation.isPending ? <CircularProgress size={20} color="inherit" /> : 'Enviar'}
+          </Button>
+        </Box>
+        {sendMutation.isError && (
+          <Alert severity="error" sx={{ mt: 1 }}>
+            {sendMutation.error?.message || 'Error al enviar'}
+          </Alert>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cerrar</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
@@ -0,0 +1,115 @@
+import { useState } from 'react'
+import {
+  Card,
+  CardContent,
+  Typography,
+  Box,
+  Chip,
+  IconButton,
+  Menu,
+  MenuItem,
+} from '@mui/material'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+import { useDeleteSession, useUnblockSession } from './api'
+
+function formatDate(d) {
+  try {
+    return new Date(d).toLocaleString()
+  } catch {
+    return d
+  }
+}
+
+export default function SessionCard({ session, onBlock, onChat }) {
+  const [anchor, setAnchor] = useState(null)
+  const deleteMutation = useDeleteSession()
+  const unblockMutation = useUnblockSession()
+
+  const handleDelete = async () => {
+    setAnchor(null)
+    if (!window.confirm(`¿Eliminar la sesión de ${session.phone || 'desconocido'} y todo su historial de chat?`)) return
+    deleteMutation.mutate({ id: session.id, phone: session.phone })
+  }
+
+  const handleUnblock = async () => {
+    setAnchor(null)
+    if (!window.confirm(`Desbloquear sesión para ${session.phone}?`)) return
+    unblockMutation.mutate({ phone: session.phone })
+  }
+
+  const handleChat = () => {
+    setAnchor(null)
+    onChat(session)
+  }
+
+  const statusColor = session.finished ? 'success' : 'warning'
+  const statusText = session.finished ? 'Finalizada' : 'Activa'
+
+  return (
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+              <Typography variant="subtitle1" sx={{ fontWeight: 600, overflowWrap: 'anywhere' }}>
+                {session.name || `Teléfono: ${session.phone || 'desconocido'}`}
+                {session.name && session.phone && (
+                  <Typography component="span" variant="caption" color="text.secondary" sx={{ ml: 1 }}>
+                    ({session.phone})
+                  </Typography>
+                )}
+              </Typography>
+              <Chip size="small" color={statusColor} label={statusText} />
+              {session.block && (
+                <Chip size="small" color="error" label="Bloqueada" />
+              )}
+            </Box>
+            <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.5 }}>
+              <strong>Resumen:</strong> {session.summary || 'Aún no hay resumen.'}
+            </Typography>
+            <Typography variant="caption" display="block" color="text.disabled" sx={{ mt: 1, overflowWrap: 'anywhere' }}>
+              Campaña: {session.campaign_id?.split('-')[0] || 'N/A'}...
+            </Typography>
+            <Box sx={{ display: 'flex', gap: 2, mt: 0.5, flexWrap: 'wrap' }}>
+              <Typography variant="caption" color="text.disabled">
+                Iniciada: {formatDate(session.created_at)}
+              </Typography>
+              <Typography variant="caption" color="text.disabled">
+                Última interacción: {session.last_interaction ? formatDate(session.last_interaction) : 'Ninguna'}
+              </Typography>
+            </Box>
+            <Typography variant="caption" display="block" color="text.disabled" sx={{ mt: 0.5, overflowWrap: 'anywhere' }}>
+              ID de sesión: {session.id}
+            </Typography>
+          </Box>
+          <IconButton onClick={(e) => setAnchor(e.currentTarget)}>
+            <MoreVertIcon />
+          </IconButton>
+        </Box>
+      </CardContent>
+      <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)}>
+        <MenuItem onClick={handleChat}>
+          Chat
+        </MenuItem>
+        {session.block ? (
+          <MenuItem onClick={handleUnblock} sx={{ color: 'error.main' }}>
+            Desbloquear
+          </MenuItem>
+        ) : (
+          <MenuItem
+            onClick={() => {
+              setAnchor(null)
+              onBlock(session)
+            }}
+            sx={{ color: 'error.main' }}
+          >
+            Bloquear
+          </MenuItem>
+        )}
+        <MenuItem onClick={handleDelete} sx={{ color: 'error.main' }}>
+          Eliminar
+        </MenuItem>
+      </Menu>
+    </Card>
+  )
+}
@@ -0,0 +1,120 @@
+import { useState } from 'react'
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  TextField,
+  Button,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  CircularProgress,
+} from '@mui/material'
+import { useCampaigns } from '../campaigns/api'
+import { useSessions } from './api'
+import SessionCard from './SessionCard'
+import BlockSessionModal from './BlockSessionModal'
+import ChatSessionModal from './ChatSessionModal'
+
+export default function SessionsPage() {
+  const [campaignFilter, setCampaignFilter] = useState('')
+  const [search, setSearch] = useState('')
+  const [blockingSession, setBlockingSession] = useState(null)
+  const [chatSession, setChatSession] = useState(null)
+  const { data: campaigns } = useCampaigns()
+  const { data: sessions, isLoading, refetch } = useSessions(campaignFilter)
+
+  const filtered = search
+    ? sessions?.filter(
+        (s) =>
+          (s.phone && s.phone.toLowerCase().includes(search.toLowerCase())) ||
+          (s.name && s.name.toLowerCase().includes(search.toLowerCase())) ||
+          (s.summary && s.summary.toLowerCase().includes(search.toLowerCase()))
+      )
+    : sessions
+
+  return (
+    <Box>
+      <Card sx={{ mb: 3 }}>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>
+            Sesiones
+          </Typography>
+          <FormControl fullWidth margin="normal" size="small">
+            <InputLabel>Filtrar por campaña</InputLabel>
+            <Select
+              value={campaignFilter}
+              label="Filtrar por campaña"
+              onChange={(e) => setCampaignFilter(e.target.value)}
+            >
+              <MenuItem value="">Todas las campañas</MenuItem>
+              {campaigns?.map((c) => (
+                <MenuItem key={c.id} value={c.id}>
+                  {c.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <Button
+            fullWidth
+            variant="contained"
+            onClick={() => refetch()}
+            sx={{ mt: 1 }}
+          >
+            Actualizar Sesiones
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>
+            Lista de Sesiones
+          </Typography>
+          <TextField
+            fullWidth
+            label="Buscar por teléfono, nombre o resumen..."
+            margin="normal"
+            size="small"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          {isLoading ? (
+            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
+              <CircularProgress />
+            </Box>
+          ) : (
+            <Box sx={{ mt: 2 }}>
+              {filtered?.length === 0 && (
+                <Typography color="text.secondary">
+                  {sessions?.length === 0
+                    ? 'No se encontraron sesiones.'
+                    : 'Ninguna sesión coincide con la búsqueda.'}
+                </Typography>
+              )}
+              {filtered?.map((s) => (
+                <SessionCard
+                  key={s.id}
+                  session={s}
+                  onBlock={(session) => setBlockingSession(session)}
+                  onChat={(session) => setChatSession(session)}
+                />
+              ))}
+            </Box>
+          )}
+        </CardContent>
+      </Card>
+
+      <BlockSessionModal
+        session={blockingSession}
+        onClose={() => setBlockingSession(null)}
+      />
+      <ChatSessionModal
+        session={chatSession}
+        onClose={() => setChatSession(null)}
+      />
+    </Box>
+  )
+}
@@ -0,0 +1,132 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { supabase } from '../../lib/supabase'
+
+export function useSessions(campaignFilter = '') {
+  return useQuery({
+    queryKey: ['sessions', campaignFilter],
+    queryFn: async () => {
+      let query = supabase
+        .from('sessions')
+        .select('*')
+        .order('created_at', { ascending: false })
+        .limit(100)
+      if (campaignFilter) {
+        query = query.eq('campaign_id', campaignFilter)
+      }
+      const { data, error } = await query
+      if (error) throw new Error(error.message)
+      return data || []
+    },
+  })
+}
+
+export function useBlockSession() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ phone }) => {
+      const { error } = await supabase
+        .from('sessions')
+        .update({ block: true })
+        .eq('phone', phone)
+      if (error) throw new Error(error.message)
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['sessions'] })
+    },
+  })
+}
+
+export function useUnblockSession() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ phone }) => {
+      const { error } = await supabase
+        .from('sessions')
+        .update({ block: false })
+        .eq('phone', phone)
+      if (error) throw new Error(error.message)
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['sessions'] })
+    },
+  })
+}
+
+export function useDeleteSession() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ id, phone }) => {
+      const { error: historyError } = await supabase
+        .from('n8n_chat_histories')
+        .delete()
+        .eq('session_id', id)
+      if (historyError) throw new Error(historyError.message)
+      const { error: sessionError } = await supabase
+        .from('sessions')
+        .delete()
+        .eq('id', id)
+      if (sessionError) throw new Error(sessionError.message)
+      return { id, phone }
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['sessions'] })
+    },
+  })
+}
+
+export function useChatHistory(sessionId) {
+  return useQuery({
+    queryKey: ['chatHistory', sessionId],
+    queryFn: async () => {
+      if (!sessionId) return []
+      const { data, error } = await supabase
+        .from('n8n_chat_histories')
+        .select('*')
+        .eq('session_id', sessionId)
+        .order('id', { ascending: true })
+      if (error) throw new Error(error.message)
+      return data || []
+    },
+    enabled: !!sessionId,
+  })
+}
+
+const WEBHOOK_URL = 'https://n8n.beroth.moe/webhook/send-msg'
+const XTOKEN = 'PLACEHOLDER_XTOKEN'
+
+export function useSendMessage() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ sessionId, message }) => {
+      const res = await fetch(WEBHOOK_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'xtoken': XTOKEN,
+        },
+        body: JSON.stringify({ phone: sessionId, msg: message }),
+      })
+      if (!res.ok) {
+        const errText = await res.text().catch(() => 'Unknown error')
+        throw new Error(`Webhook error ${res.status}: ${errText}`)
+      }
+      const { error } = await supabase
+        .from('n8n_chat_histories')
+        .insert({
+          session_id: sessionId,
+          message: {
+            type: 'ai',
+            content: message,
+            additional_kwargs: {},
+            response_metadata: {},
+            tool_calls: [],
+            invalid_tool_calls: [],
+          },
+        })
+      if (error) throw new Error(error.message)
+    },
+    onSuccess: (_, { sessionId }) => {
+      qc.invalidateQueries({ queryKey: ['chatHistory', sessionId] })
+    },
+  })
+}
@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+@variant dark (&:where(.dark, .dark *));
+
+html,
+body {
+  overflow-x: hidden;
+}
+
+html.dark {
+  background-color: #09090b;
+  color: #e4e4e7;
+}
+
+html:not(.dark) {
+  background-color: #fafafa;
+  color: #18181b;
+}
@@ -0,0 +1,10 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      retry: 1,
+    },
+  },
+})
@@ -0,0 +1,8 @@
+import { createClient } from '@supabase/supabase-js'
+
+const SUPABASE_URL = 'https://rehavit.beroth.moe/supabase'
+const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzc2NTU4OTc2LCJleHAiOjE5MzQyMzg5NzZ9.eFvvIQUstht8TxNffqAcqfmgS7W2JMZsDxkV41XBPOA'
+
+export const STORAGE_BUCKET = 'campaign-media'
+
+export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { RouterProvider } from '@tanstack/react-router'
+import { router } from './routes'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>
+)
@@ -0,0 +1,67 @@
+import { createRouter, createRootRoute, createRoute, redirect } from '@tanstack/react-router'
+import Root from './components/Root'
+import AppShell from './components/AppShell'
+import LoginPage from './features/auth/LoginPage'
+import CampaignsPage from './features/campaigns/CampaignsPage'
+import SessionsPage from './features/sessions/SessionsPage'
+import MediaPage from './features/media/MediaPage'
+import { supabase } from './lib/supabase'
+
+const rootRoute = createRootRoute({
+  component: Root,
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  beforeLoad: async () => {
+    const { data: { session } } = await supabase.auth.getSession()
+    throw redirect({ to: session ? '/campaigns' : '/login' })
+  },
+})
+
+const loginRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/login',
+  component: LoginPage,
+  beforeLoad: async () => {
+    const { data: { session } } = await supabase.auth.getSession()
+    if (session) throw redirect({ to: '/campaigns' })
+  },
+})
+
+const appLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: '_app',
+  component: AppShell,
+  beforeLoad: async () => {
+    const { data: { session } } = await supabase.auth.getSession()
+    if (!session) throw redirect({ to: '/login' })
+  },
+})
+
+const campaignsRoute = createRoute({
+  getParentRoute: () => appLayoutRoute,
+  path: '/campaigns',
+  component: CampaignsPage,
+})
+
+const sessionsRoute = createRoute({
+  getParentRoute: () => appLayoutRoute,
+  path: '/sessions',
+  component: SessionsPage,
+})
+
+const mediaRoute = createRoute({
+  getParentRoute: () => appLayoutRoute,
+  path: '/media',
+  component: MediaPage,
+})
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  loginRoute,
+  appLayoutRoute.addChildren([campaignsRoute, sessionsRoute, mediaRoute]),
+])
+
+export const router = createRouter({ routeTree })
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 3000,
+    host: true,
+  },
+})
@@ -0,0 +1,6 @@
+{
+  "name": "gallery",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
Author	SHA1	Message	Date
beroth	658b9f0257	feat(front): kinda added chat feature	2026-05-31 23:21:23 -06:00
beroth	767317e538	feat(front) react version start	2026-05-31 19:43:11 -06:00