feat(fase3): add Queue management frontend page
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude AI
248
frontend/src/pages/Queues.tsx
Normal file
248
frontend/src/pages/Queues.tsx
Normal file
@@ -0,0 +1,248 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Form,
|
||||||
|
Input,
|
||||||
|
InputNumber,
|
||||||
|
message,
|
||||||
|
Modal,
|
||||||
|
Popconfirm,
|
||||||
|
Select,
|
||||||
|
Space,
|
||||||
|
Table,
|
||||||
|
Tag,
|
||||||
|
Typography,
|
||||||
|
} from 'antd';
|
||||||
|
import {
|
||||||
|
DeleteOutlined,
|
||||||
|
EditOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
TeamOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { apiClient } from '../api/client';
|
||||||
|
|
||||||
|
const { Title } = Typography;
|
||||||
|
|
||||||
|
interface Queue {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string | null;
|
||||||
|
assignment_method: string;
|
||||||
|
max_per_agent: number;
|
||||||
|
sla_first_response: number;
|
||||||
|
sla_resolution: number;
|
||||||
|
is_active: boolean;
|
||||||
|
agent_count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ASSIGNMENT_METHOD_LABELS: Record<string, string> = {
|
||||||
|
round_robin: 'Round Robin',
|
||||||
|
least_busy: 'Menos Ocupado',
|
||||||
|
skill_based: 'Por Habilidades',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Queues() {
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const [isAgentsModalOpen, setIsAgentsModalOpen] = useState(false);
|
||||||
|
const [selectedQueue, setSelectedQueue] = useState<Queue | null>(null);
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const { data: queues, isLoading } = useQuery({
|
||||||
|
queryKey: ['queues'],
|
||||||
|
queryFn: () => apiClient.get<Queue[]>('/api/queues'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const createMutation = useMutation({
|
||||||
|
mutationFn: (data: Partial<Queue>) => apiClient.post('/api/queues', data),
|
||||||
|
onSuccess: () => {
|
||||||
|
message.success('Cola creada');
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['queues'] });
|
||||||
|
closeModal();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateMutation = useMutation({
|
||||||
|
mutationFn: ({ id, data }: { id: string; data: Partial<Queue> }) =>
|
||||||
|
apiClient.put(`/api/queues/${id}`, data),
|
||||||
|
onSuccess: () => {
|
||||||
|
message.success('Cola actualizada');
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['queues'] });
|
||||||
|
closeModal();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (id: string) => apiClient.delete(`/api/queues/${id}`),
|
||||||
|
onSuccess: () => {
|
||||||
|
message.success('Cola eliminada');
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['queues'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
setIsModalOpen(false);
|
||||||
|
setSelectedQueue(null);
|
||||||
|
form.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (values: Partial<Queue>) => {
|
||||||
|
if (selectedQueue) {
|
||||||
|
updateMutation.mutate({ id: selectedQueue.id, data: values });
|
||||||
|
} else {
|
||||||
|
createMutation.mutate(values);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (queue: Queue) => {
|
||||||
|
setSelectedQueue(queue);
|
||||||
|
form.setFieldsValue(queue);
|
||||||
|
setIsModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreate = () => {
|
||||||
|
setSelectedQueue(null);
|
||||||
|
form.resetFields();
|
||||||
|
setIsModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleManageAgents = (queue: Queue) => {
|
||||||
|
setSelectedQueue(queue);
|
||||||
|
setIsAgentsModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ title: 'Nombre', dataIndex: 'name', key: 'name' },
|
||||||
|
{
|
||||||
|
title: 'Método Asignación',
|
||||||
|
dataIndex: 'assignment_method',
|
||||||
|
key: 'assignment_method',
|
||||||
|
render: (method: string) => ASSIGNMENT_METHOD_LABELS[method] || method,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Agentes',
|
||||||
|
dataIndex: 'agent_count',
|
||||||
|
key: 'agent_count',
|
||||||
|
render: (count: number) => <Tag icon={<TeamOutlined />}>{count}</Tag>,
|
||||||
|
},
|
||||||
|
{ title: 'Max/Agente', dataIndex: 'max_per_agent', key: 'max_per_agent' },
|
||||||
|
{
|
||||||
|
title: 'SLA Respuesta',
|
||||||
|
dataIndex: 'sla_first_response',
|
||||||
|
key: 'sla_first_response',
|
||||||
|
render: (seconds: number) => `${Math.round(seconds / 60)} min`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Acciones',
|
||||||
|
key: 'actions',
|
||||||
|
render: (_: unknown, record: Queue) => (
|
||||||
|
<Space>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
icon={<TeamOutlined />}
|
||||||
|
onClick={() => handleManageAgents(record)}
|
||||||
|
>
|
||||||
|
Agentes
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => handleEdit(record)}
|
||||||
|
/>
|
||||||
|
<Popconfirm
|
||||||
|
title="¿Eliminar cola?"
|
||||||
|
onConfirm={() => deleteMutation.mutate(record.id)}
|
||||||
|
>
|
||||||
|
<Button size="small" danger icon={<DeleteOutlined />} />
|
||||||
|
</Popconfirm>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
|
||||||
|
<Title level={4} style={{ margin: 0 }}>Colas de Atención</Title>
|
||||||
|
<Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
|
||||||
|
Nueva Cola
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<Table
|
||||||
|
dataSource={queues}
|
||||||
|
columns={columns}
|
||||||
|
rowKey="id"
|
||||||
|
loading={isLoading}
|
||||||
|
pagination={false}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title={selectedQueue ? 'Editar Cola' : 'Nueva Cola'}
|
||||||
|
open={isModalOpen}
|
||||||
|
onCancel={closeModal}
|
||||||
|
footer={null}
|
||||||
|
>
|
||||||
|
<Form form={form} layout="vertical" onFinish={handleSubmit}>
|
||||||
|
<Form.Item
|
||||||
|
name="name"
|
||||||
|
label="Nombre"
|
||||||
|
rules={[{ required: true, message: 'Ingresa un nombre' }]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="description" label="Descripción">
|
||||||
|
<Input.TextArea rows={2} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="assignment_method"
|
||||||
|
label="Método de Asignación"
|
||||||
|
initialValue="round_robin"
|
||||||
|
>
|
||||||
|
<Select>
|
||||||
|
<Select.Option value="round_robin">Round Robin</Select.Option>
|
||||||
|
<Select.Option value="least_busy">Menos Ocupado</Select.Option>
|
||||||
|
<Select.Option value="skill_based">Por Habilidades</Select.Option>
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item name="max_per_agent" label="Máximo por Agente" initialValue={10}>
|
||||||
|
<InputNumber min={1} max={50} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name="sla_first_response"
|
||||||
|
label="SLA Primera Respuesta (segundos)"
|
||||||
|
initialValue={300}
|
||||||
|
>
|
||||||
|
<InputNumber min={60} step={60} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Space>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
htmlType="submit"
|
||||||
|
loading={createMutation.isPending || updateMutation.isPending}
|
||||||
|
>
|
||||||
|
{selectedQueue ? 'Actualizar' : 'Crear'}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={closeModal}>Cancelar</Button>
|
||||||
|
</Space>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title={`Agentes - ${selectedQueue?.name}`}
|
||||||
|
open={isAgentsModalOpen}
|
||||||
|
onCancel={() => setIsAgentsModalOpen(false)}
|
||||||
|
footer={null}
|
||||||
|
width={600}
|
||||||
|
>
|
||||||
|
<p>Gestión de agentes en cola (próximamente)</p>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user