63 lines
1.8 KiB
React
63 lines
1.8 KiB
React
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>
|
|
)
|
|
}
|