From 20e5c2d13b5c74ebe108186b8ff1a71579a02f72 Mon Sep 17 00:00:00 2001
From: Claude AI <claude@anthropic.com>
Date: Thu, 29 Jan 2026 11:16:20 +0000
Subject: [PATCH] feat(frontend): add GlobalVariables management page

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/pages/GlobalVariables.tsx | 243 +++++++++++++++++++++++++
 1 file changed, 243 insertions(+)
 create mode 100644 frontend/src/pages/GlobalVariables.tsx

diff --git a/frontend/src/pages/GlobalVariables.tsx b/frontend/src/pages/GlobalVariables.tsx
new file mode 100644
index 0000000..ecf1ce8
--- /dev/null
+++ b/frontend/src/pages/GlobalVariables.tsx
@@ -0,0 +1,243 @@
+import { useState } from 'react';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  Checkbox,
+  Space,
+  Typography,
+  Popconfirm,
+  message,
+  Tag,
+} from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '../api/client';
+
+const { Title } = Typography;
+const { TextArea } = Input;
+
+interface GlobalVariable {
+  id: string;
+  key: string;
+  value: string;
+  value_type: 'string' | 'number' | 'boolean' | 'json';
+  description: string | null;
+  is_secret: boolean;
+}
+
+interface VariableFormData {
+  key: string;
+  value: string;
+  value_type: 'string' | 'number' | 'boolean' | 'json';
+  description?: string;
+  is_secret: boolean;
+}
+
+export default function GlobalVariables() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingVariable, setEditingVariable] = useState<GlobalVariable | null>(null);
+  const [form] = Form.useForm<VariableFormData>();
+  const queryClient = useQueryClient();
+
+  const { data: variables, isLoading } = useQuery({
+    queryKey: ['global-variables'],
+    queryFn: () => apiClient.get<GlobalVariable[]>('/api/global-variables'),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: (data: VariableFormData) =>
+      apiClient.post('/api/global-variables', data),
+    onSuccess: () => {
+      message.success('Variable creada');
+      queryClient.invalidateQueries({ queryKey: ['global-variables'] });
+      handleCloseModal();
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ key, data }: { key: string; data: Partial<VariableFormData> }) =>
+      apiClient.put(`/api/global-variables/${key}`, data),
+    onSuccess: () => {
+      message.success('Variable actualizada');
+      queryClient.invalidateQueries({ queryKey: ['global-variables'] });
+      handleCloseModal();
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (key: string) =>
+      apiClient.delete(`/api/global-variables/${key}`),
+    onSuccess: () => {
+      message.success('Variable eliminada');
+      queryClient.invalidateQueries({ queryKey: ['global-variables'] });
+    },
+  });
+
+  const handleOpenCreate = () => {
+    setEditingVariable(null);
+    form.resetFields();
+    form.setFieldsValue({ value_type: 'string', is_secret: false });
+    setIsModalOpen(true);
+  };
+
+  const handleOpenEdit = (variable: GlobalVariable) => {
+    setEditingVariable(variable);
+    form.setFieldsValue({
+      key: variable.key,
+      value: variable.is_secret ? '' : variable.value,
+      value_type: variable.value_type,
+      description: variable.description || '',
+      is_secret: variable.is_secret,
+    });
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setEditingVariable(null);
+    form.resetFields();
+  };
+
+  const handleSubmit = async () => {
+    const values = await form.validateFields();
+    if (editingVariable) {
+      const updateData: Partial<VariableFormData> = {
+        value_type: values.value_type,
+        description: values.description,
+        is_secret: values.is_secret,
+      };
+      if (values.value) {
+        updateData.value = values.value;
+      }
+      updateMutation.mutate({ key: editingVariable.key, data: updateData });
+    } else {
+      createMutation.mutate(values);
+    }
+  };
+
+  const columns = [
+    {
+      title: 'Clave',
+      dataIndex: 'key',
+      key: 'key',
+      render: (key: string) => <code>{key}</code>,
+    },
+    {
+      title: 'Valor',
+      dataIndex: 'value',
+      key: 'value',
+      render: (value: string, record: GlobalVariable) =>
+        record.is_secret ? '••••••••' : value,
+    },
+    {
+      title: 'Tipo',
+      dataIndex: 'value_type',
+      key: 'value_type',
+      render: (type: string) => <Tag>{type}</Tag>,
+    },
+    {
+      title: 'Descripcion',
+      dataIndex: 'description',
+      key: 'description',
+      ellipsis: true,
+    },
+    {
+      title: 'Secreto',
+      dataIndex: 'is_secret',
+      key: 'is_secret',
+      render: (isSecret: boolean) =>
+        isSecret ? <Tag color="red">Si</Tag> : <Tag>No</Tag>,
+    },
+    {
+      title: 'Acciones',
+      key: 'actions',
+      render: (_: unknown, record: GlobalVariable) => (
+        <Space>
+          <Button
+            type="text"
+            icon={<EditOutlined />}
+            onClick={() => handleOpenEdit(record)}
+          />
+          <Popconfirm
+            title="Eliminar esta variable?"
+            onConfirm={() => deleteMutation.mutate(record.key)}
+            okText="Si"
+            cancelText="No"
+          >
+            <Button type="text" danger icon={<DeleteOutlined />} />
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 24 }}>
+        <Title level={4} style={{ margin: 0 }}>Variables Globales</Title>
+        <Button type="primary" icon={<PlusOutlined />} onClick={handleOpenCreate}>
+          Nueva Variable
+        </Button>
+      </div>
+
+      <Table
+        columns={columns}
+        dataSource={variables || []}
+        rowKey="id"
+        loading={isLoading}
+        pagination={false}
+      />
+
+      <Modal
+        title={editingVariable ? 'Editar Variable' : 'Nueva Variable'}
+        open={isModalOpen}
+        onCancel={handleCloseModal}
+        onOk={handleSubmit}
+        okText={editingVariable ? 'Guardar' : 'Crear'}
+        confirmLoading={createMutation.isPending || updateMutation.isPending}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="key"
+            label="Clave"
+            rules={[
+              { required: true, message: 'Ingrese la clave' },
+              { pattern: /^[A-Z_][A-Z0-9_]*$/, message: 'Use MAYUSCULAS_CON_GUIONES' },
+            ]}
+          >
+            <Input disabled={!!editingVariable} placeholder="API_KEY" />
+          </Form.Item>
+
+          <Form.Item
+            name="value"
+            label={editingVariable?.is_secret ? 'Nuevo Valor (dejar vacio para mantener)' : 'Valor'}
+            rules={editingVariable ? [] : [{ required: true, message: 'Ingrese el valor' }]}
+          >
+            <TextArea rows={2} placeholder="Valor de la variable" />
+          </Form.Item>
+
+          <Form.Item name="value_type" label="Tipo">
+            <Select>
+              <Select.Option value="string">String</Select.Option>
+              <Select.Option value="number">Number</Select.Option>
+              <Select.Option value="boolean">Boolean</Select.Option>
+              <Select.Option value="json">JSON</Select.Option>
+            </Select>
+          </Form.Item>
+
+          <Form.Item name="description" label="Descripcion">
+            <Input placeholder="Descripcion opcional" />
+          </Form.Item>
+
+          <Form.Item name="is_secret" valuePropName="checked">
+            <Checkbox>Es secreto (no mostrar valor)</Checkbox>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+}