\n setFilters({ ...filters, search: e.target.value })}\n />\n setFilters({ ...filters, status: e.target.value })}\n >\n \n {TICKET_STATUSES.map((status) => (\n \n ))}\n \n setFilters({ ...filters, priority: e.target.value })}\n >\n \n {TICKET_PRIORITIES.map((priority) => (\n \n ))}\n \n

\n setLanguage(e.target.value)}\n >\n \n \n \n \n setIsDarkMode(!isDarkMode)}\n cls=\"hover:bg-gray-200 dark:hover:bg-gray-700\"\n aria-label={lang[currentLang].toggleDarkMode}\n >\n {isDarkMode ? ICONS.sun : ICONS.moon}\n \n setModal({ type: \"settings\" })}\n cls=\"hover:bg-gray-200 dark:hover:bg-gray-700\"\n aria-label={lang[currentLang].openSettings}\n >\n {ICONS.settings}\n \n setModal({ type: \"newTicket\" })}\n className=\"hover:bg-gray-200 dark:hover:bg-gray-700\"\n aria-label={lang[currentLang].createNewTicket}\n >\n {ICONS.plusCircle}\n \n setModal({ type: \"help\" })}\n className=\"hover:bg-gray-200 dark:hover:bg-gray-700\"\n aria-label={lang[currentLang].openHelp}\n >\n {ICONS.helpCircle}\n \n

\n );\n};\n\nexport default Header;",[],[199,205,211,217],{"_103":225,"_95":226,"_157":227,"_159":212,"_160":139,"_161":228,"_163":22,"_105":229,"_99":162,"_166":220,"_168":72,"_169":22,"_170":-5,"_171":230,"_98":231},"8a9a276e-762d-11f0-ac96-0224a6c84d84","Icons.jsx","7c3005d6-762d-11f0-ad69-0224a6c84d84",29,["D",1754859841933],[],[199,205,211,226],{"_103":233,"_95":234,"_157":235,"_159":212,"_160":139,"_161":162,"_163":22,"_105":236,"_99":32,"_166":220,"_168":237,"_169":22,"_170":-5,"_171":238,"_98":239},"ae0302ca-7628-11f0-81c8-0224a6c84d84","TicketCard.jsx","019895ac-4cfc-7302-8b2b-616d1e3ca445",["D",1754857753803],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nimport { Button, SelectF } from \"./Ui.jsx\";\nimport { TICKET_STATUSES } from \"../config/Constants.jsx\";\n\nconst TicketCard = ({\n ticket,\n lang,\n currentLang,\n getPriorityClass,\n getStatusClass,\n getStatusTxtClass,\n onEdit,\n onDelete,\n onStatusChange,\n}) => {\n return (\n \n

{ticket.title}

\n {ticket.description}\n

\n {lang[currentLang].ticketId} {ticket.id}\n

\n {lang[currentLang].ticketPriority}{\" \"}\n \n {ticket.priority}\n \n

\n {lang[currentLang].ticketStatus}{\" \"}\n \n {ticket.status}\n \n

\n {lang[currentLang].ticketCreated}{\" \"}\n {new Date(ticket.created).toLocaleString()}\n

\n {ticket.updated && (\n

\n {lang[currentLang].ticketUpdated}{\" \"}\n {new Date(ticket.updated).toLocaleString()}\n

\n )}\n

\n onEdit(ticket)}\n >\n {lang[currentLang].edit}\n \n onDelete(ticket)}\n >\n {lang[currentLang].delete}\n \n

\n onStatusChange(ticket, e.target.value)}\n >\n {TICKET_STATUSES.map((status) => (\n \n ))}\n \n

\n \n );\n};\n\nexport default TicketCard;",[],[199,205,211,234],{"_103":241,"_95":242,"_157":243,"_159":212,"_160":139,"_161":162,"_163":22,"_105":244,"_99":32,"_166":220,"_168":245,"_169":22,"_170":-5,"_171":246,"_98":247},"ae03054a-7628-11f0-81c8-0224a6c84d84","Toast.jsx","019895ac-4cfc-7302-8b2b-65a60acc2589",["D",1754857753803],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { ICONS } from \"../config/Icons.jsx\";\n\nexport const Toast = ({ message, type, onClose }) => {\n const [isVisible, setIsVisible] = useState(true);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setIsVisible(false);\n setTimeout(onClose, 400); // Esperar a que termine la animación\n }, 4000);\n\n return () => clearTimeout(timer);\n }, [onClose]);\n\n const baseClass =\n `fixed bottom-5 right-5 z-50 p-4 bg-slate-800 text-slate-50 rounded-sm shadow-lg flex items-center gap-3 transition-transform duration-400 ease-in-out border p-2 rounded-none font-medium`;\n const typeClass = type === \"success\"\n ? \"border-b-0 border-l-4 border-r-0 border-t-0 border-green-500\"\n : type === \"error\"\n ? \"border-b-0 border-l-4 border-r-0 border-t-0 border-red-500\"\n : \"border-b-0 border-l-4 border-r-0 border-t-0 border-blue-500\";\n const positionClass = isVisible\n ? \"transform translate-x-0\"\n : \"transform translate-x-full\";\n\n const icon = ICONS[\n type === \"success\" ? \"checkCircle\" : type === \"error\" ? \"xCircle\" : \"info\"\n ];\n\n return (\n

\n {icon}\n

{message}

\n );\n};",[],[199,205,211,242],{"_103":249,"_95":250,"_157":251,"_159":212,"_160":139,"_161":162,"_163":22,"_105":252,"_99":32,"_166":220,"_168":253,"_169":22,"_170":-5,"_171":254,"_98":255},"ae03064e-7628-11f0-81c8-0224a6c84d84","Ui.jsx","019895ac-4cfc-7302-8b2b-6aa4009b9b24",["D",1754857753803],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport const Button = (props) => {\n return (\n \n {props.children}\n \n );\n};\n\nexport const CloseBtn = (props) => {\n return (\n \n ×\n \n );\n};\n\nexport const Label = (props) => {\n return (\n \n {props.title}\n \n );\n};\n\nexport const SelectF = (props) => {\n return (\n \n {props.children}\n \n );\n};\n\nexport const InputF = (props) => {\n return (\n \n );\n};\n\nexport const TextAreaF = (props) => {\n return (\n \n \n );\n};\n\nexport const CardDialog = (props) => {\n return (\n

{props.title}

\n \n

{props.children}

\n );\n};",[],[199,205,211,250],[199,205,211],{"_103":258,"_95":259,"_157":260,"_159":206,"_160":139,"_161":162,"_163":164,"_105":261,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":262,"_98":286},"ae031c56-7628-11f0-81c8-0224a6c84d84","config","019895ac-4cfc-7302-8b2b-7f865d9f51de",["D",1754857753803],[263,271,278],{"_103":264,"_95":265,"_157":266,"_159":260,"_160":139,"_161":162,"_163":22,"_105":267,"_99":32,"_166":220,"_168":268,"_169":22,"_170":-5,"_171":269,"_98":270},"ae030a72-7628-11f0-81c8-0224a6c84d84","Constants.jsx","019895ac-4cfc-7302-8b2b-718ed664c71e",["D",1754857753803],"export const TICKET_PRIORITIES = [\"Baja\", \"Media\", \"Alta\", \"Crítica\"];\nexport const TICKET_STATUSES = [\n \"Abierto\",\n \"En Progreso\",\n \"Pendiente\",\n \"Resuelto\",\n \"Cerrado\",\n];\n\nexport const TICKETURL = \"ticket_url\";\nexport const TICKETOKEN = \"ticket_token\";\nexport const TICKETHEME = \"ticket_theme\";\nexport const TICKELANG = \"ticket_lang\";",[],[199,205,259,265],{"_103":272,"_95":226,"_157":273,"_159":260,"_160":139,"_161":162,"_163":22,"_105":274,"_99":32,"_166":220,"_168":275,"_169":22,"_170":-5,"_171":276,"_98":277},"ae030b58-7628-11f0-81c8-0224a6c84d84","019895ac-4cfc-7302-8b2b-7696a85b3f42",["D",1754857753803],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// Mapeo de nombres de iconos a su código SVG\nexport const ICONS = {\n moon: (\n \n \n \n \n ),\n sun: (\n \n \n \n \n \n \n \n \n \n \n \n ),\n settings: (\n \n \n \n \n \n ),\n plusCircle: (\n \n \n \n \n \n ),\n helpCircle: (\n \n \n \n \n \n ),\n checkCircle: (\n \n \n \n \n ),\n xCircle: (\n \n \n \n \n ),\n info: (\n \n \n \n \n ),\n};",[],[199,205,259,226],{"_103":279,"_95":280,"_157":281,"_159":260,"_160":139,"_161":162,"_163":22,"_105":282,"_99":32,"_166":220,"_168":283,"_169":22,"_170":-5,"_171":284,"_98":285},"ae031120-7628-11f0-81c8-0224a6c84d84","Lang.jsx","019895ac-4cfc-7302-8b2b-79535864cb2f",["D",1754857753803],"// Objeto de idiomas con los textos de la aplicación\nexport const lang = {\n es: {\n search: \"Buscar:\",\n searchPlaceholder: \"Buscar por título o ID...\",\n status: \"Estado:\",\n priority: \"Prioridad:\",\n all: \"Todos\",\n allPriorities: \"Todas\",\n toggleDarkMode: \"Cambiar modo oscuro\",\n openSettings: \"Abrir ajustes\",\n createNewTicket: \"Crear nuevo ticket\",\n openHelp: \"Abrir guía de ayuda\",\n systemTitle: \"Sistema de Gestión de Tickets\",\n existingTickets: \"Tickets Existentes\",\n loadingTickets: \"Cargando tickets...\",\n noTickets: \"No hay tickets disponibles. ¡Crea uno nuevo!\",\n ticketId: \"ID:\",\n ticketPriority: \"Prioridad:\",\n ticketStatus: \"Estado:\",\n ticketCreated: \"Creado:\",\n ticketUpdated: \"Actualizado:\",\n edit: \"Editar\",\n delete: \"Eliminar\",\n confirmDelete: \"¿Estás seguro de que deseas eliminar este ticket?\",\n newTicketTitle: \"Crear Nuevo Ticket\",\n newTicketButton: \"Añadir Ticket\",\n editTicketTitle: \"Editar Ticket\",\n editTicketButton: \"Guardar Cambios\",\n cancel: \"Cancelar\",\n titleLabel: \"Título\",\n descriptionLabel: \"Descripción\",\n saveApiSettings: \"Guardar Configuración\",\n apiSettingsTitle: \"Ajustes de la Aplicación\",\n apiSettingsSubtitle: \"Configuración de la API\",\n apiUrl: \"URL de la API\",\n apiToken: \"Token de Autenticación\",\n apiUrlPlaceholder: \"https://tu-api.com/tickets\",\n apiTokenPlaceholder: \"Tu-Token-API-secreto\",\n apiSettingsSaved: \"Configuración de la API guardada.\",\n apiSettingsRequired: \"La URL y el token de la API son obligatorios.\",\n ticketAdded: \"Ticket añadido correctamente.\",\n ticketUpdated: \"Ticket actualizado correctamente.\",\n ticketDeleted: \"Ticket eliminado correctamente.\",\n statusChanged: \"El estado del ticket ha cambiado.\",\n apiError: (message) => `Error al conectar con la API: ${message}`,\n apiConfigRequired:\n \"Por favor, configura la URL y el token de la API en Ajustes.\",\n helpGuideTitle: \"Guía de Configuración\",\n helpGuideText1:\n \"Para que tu aplicación de gestión de tickets funcione correctamente, debes configurar la URL de tu API y el token de autenticación en la sección de\",\n helpGuideText2: \" Ajustes de la Aplicación \",\n helpGuideText3:\n \"El formato de la API debe ser compatible con las peticiones que se realizan en esta aplicación. A continuación se detallan las operaciones:\",\n apiOperationsTitle: \"Operaciones de la API\",\n apiGet: \"GET (Obtener todos los tickets):\",\n apiGetUrl: \"GET /?method=get&db={tableName}&all=all\",\n apiGetDesc:\n \"El endpoint debe devolver un objeto con una clave `CONTENT` que contenga un objeto de tickets. Cada ticket debe tener las claves `uid`, `name`, `title`, `description`, `category` (Prioridad), `content` (Estado), `created` y `updated`.\",\n apiPostInsert: \"POST (Crear un nuevo ticket):\",\n apiPostInsertUrl: \"POST /?method=insert&db={tableName}\",\n apiPostInsertDesc:\n \"Se envía un objeto JSON con las propiedades `title`, `description`, `category` y `content`.\",\n apiPostUpdate: \"POST (Actualizar un ticket):\",\n apiPostUpdateUrl: \"POST /?method=update&db={tableName}\",\n apiPostUpdateDesc:\n \"Se envía un objeto JSON con la clave `uid` y las propiedades actualizadas.\",\n apiPostDelete: \"POST (Eliminar un ticket):\",\n apiPostDeleteUrl: \"POST /?method=delete&db={tableName}\",\n apiPostDeleteDesc: \"Se envía un objeto JSON con la clave `uid` y `name`.\",\n language: \"Idioma:\",\n },\n\n en: {\n search: \"Search:\",\n searchPlaceholder: \"Search by title or ID...\",\n status: \"Status:\",\n priority: \"Priority:\",\n all: \"All\",\n allPriorities: \"All\",\n toggleDarkMode: \"Toggle dark mode\",\n openSettings: \"Open settings\",\n createNewTicket: \"Create new ticket\",\n openHelp: \"Open help guide\",\n systemTitle: \"Ticket Management System\",\n existingTickets: \"Existing Tickets\",\n loadingTickets: \"Loading tickets...\",\n noTickets: \"No tickets available. Create a new one!\",\n ticketId: \"ID:\",\n ticketPriority: \"Priority:\",\n ticketStatus: \"Status:\",\n ticketCreated: \"Created:\",\n ticketUpdated: \"Updated:\",\n edit: \"Edit\",\n delete: \"Delete\",\n confirmDelete: \"Are you sure you want to delete this ticket?\",\n newTicketTitle: \"Create New Ticket\",\n newTicketButton: \"Add Ticket\",\n editTicketTitle: \"Edit Ticket\",\n editTicketButton: \"Save Changes\",\n cancel: \"Cancel\",\n titleLabel: \"Title\",\n descriptionLabel: \"Description\",\n saveApiSettings: \"Save Settings\",\n apiSettingsTitle: \"Application Settings\",\n apiSettingsSubtitle: \"API Configuration\",\n apiUrl: \"API URL\",\n apiToken: \"Authentication Token\",\n apiUrlPlaceholder: \"https://your-api.com/tickets\",\n apiTokenPlaceholder: \"Your-Secret-API-Token\",\n apiSettingsSaved: \"API configuration saved.\",\n apiSettingsRequired: \"API URL and token are required.\",\n ticketAdded: \"Ticket added successfully.\",\n ticketUpdated: \"Ticket updated successfully.\",\n ticketDeleted: \"Ticket deleted successfully.\",\n statusChanged: \"Ticket status changed.\",\n apiError: (message) => `Error connecting to API: ${message}`,\n apiConfigRequired: \"Please configure API URL and token in Settings.\",\n helpGuideTitle: \"Configuration Guide\",\n helpGuideText1:\n \"For your ticket management application to work correctly, you must configure your API URL and authentication token in the\",\n helpGuideText2: \"Application Settings\",\n helpGuideText3:\n \"section. The API format must be compatible with the requests made in this application. The operations are detailed below:\",\n apiOperationsTitle: \"API Operations\",\n apiGet: \"GET (Get all tickets):\",\n apiGetUrl: \"GET /?method=get&db={tableName}&all=all\",\n apiGetDesc:\n \"The endpoint must return an object with a `CONTENT` key that contains an object of tickets. Each ticket must have the keys `uid`, `name`, `title`, `description`, `category` (Priority), `content` (Status), `created`, and `updated`.\",\n apiPostInsert: \"POST (Create a new ticket):\",\n apiPostInsertUrl: \"POST /?method=insert&db={tableName}\",\n apiPostInsertDesc:\n \"A JSON object with the `title`, `description`, `category`, and `content` properties is sent.\",\n apiPostUpdate: \"POST (Update a ticket):\",\n apiPostUpdateUrl: \"POST /?method=update&db={tableName}\",\n apiPostUpdateDesc:\n \"A JSON object with the `uid` key and the updated properties is sent.\",\n apiPostDelete: \"POST (Delete a ticket):\",\n apiPostDeleteUrl: \"POST /?method=delete&db={tableName}\",\n apiPostDeleteDesc: \"A JSON object with the `uid` and `name` keys is sent.\",\n language: \"Language:\",\n },\n jp: {\n search: \"検索:\",\n searchPlaceholder: \"タイトルまたはIDで検索...\",\n status: \"ステータス:\",\n priority: \"優先度:\",\n all: \"すべて\",\n allPriorities: \"すべて\",\n toggleDarkMode: \"ダークモードの切り替え\",\n openSettings: \"設定を開く\",\n createNewTicket: \"新しいチケットを作成\",\n openHelp: \"ヘルプガイドを開く\",\n systemTitle: \"チケット管理システム\",\n existingTickets: \"既存のチケット\",\n loadingTickets: \"チケットを読み込み中...\",\n noTickets: \"利用可能なチケットはありません。新しいものを作成してください！\",\n ticketId: \"ID:\",\n ticketPriority: \"優先度:\",\n ticketStatus: \"ステータス:\",\n ticketCreated: \"作成日:\",\n ticketUpdated: \"更新日:\",\n edit: \"編集\",\n delete: \"削除\",\n confirmDelete: \"このチケットを削除してもよろしいですか？\",\n newTicketTitle: \"新しいチケットを作成\",\n newTicketButton: \"チケットを追加\",\n editTicketTitle: \"チケットを編集\",\n editTicketButton: \"変更を保存\",\n cancel: \"キャンセル\",\n titleLabel: \"タイトル\",\n descriptionLabel: \"説明\",\n saveApiSettings: \"設定を保存\",\n apiSettingsTitle: \"アプリケーション設定\",\n apiSettingsSubtitle: \"API設定\",\n apiUrl: \"API URL\",\n apiToken: \"認証トークン\",\n apiUrlPlaceholder: \"https://your-api.com/tickets\",\n apiTokenPlaceholder: \"あなたの秘密のAPIトークン\",\n apiSettingsSaved: \"API設定が保存されました。\",\n apiSettingsRequired: \"API URLとトークンは必須です。\",\n ticketAdded: \"チケットが正常に追加されました。\",\n ticketUpdated: \"チケットが正常に更新されました。\",\n ticketDeleted: \"チケットが正常に削除されました。\",\n statusChanged: \"チケットのステータスが変更されました。\",\n apiError: (message) => `APIへの接続エラー: ${message}`,\n apiConfigRequired: \"設定でAPI URLとトークンを設定してください。\",\n helpGuideTitle: \"設定ガイド\",\n helpGuideText1: \"チケット管理アプリケーションを正しく機能させるには、\",\n helpGuideText2: \"アプリケーション設定\",\n helpGuideText3:\n \"セクションでAPIのURLと認証トークンを設定する必要があります。APIの形式は、このアプリケーションで行われるリクエストと互換性がある必要があります。操作の詳細は以下の通りです：\",\n apiOperationsTitle: \"API操作\",\n apiGet: \"GET (すべてのチケットを取得):\",\n apiGetUrl: \"GET /?method=get&db={tableName}&all=all\",\n apiGetDesc:\n \"エンドポイントは、チケットのオブジェクトを含む `CONTENT` キーを持つオブジェクトを返す必要があります。各チケットには、`uid`、`name`、`title`、`description`、`category`（優先度）、`content`（ステータス）、`created`、`updated`のキーが必要です。\",\n apiPostInsert: \"POST (新しいチケットを作成):\",\n apiPostInsertUrl: \"POST /?method=insert&db={tableName}\",\n apiPostInsertDesc:\n \"プロパティ `title`、`description`、`category`、`content`を含むJSONオブジェクトが送信されます。\",\n apiPostUpdate: \"POST (チケットを更新):\",\n apiPostUpdateUrl: \"POST /?method=update&db={tableName}\",\n apiPostUpdateDesc:\n \"`uid`キーと更新されたプロパティを持つJSONオブジェクトが送信されます。\",\n apiPostDelete: \"POST (チケットを削除):\",\n apiPostDeleteUrl: \"POST /?method=delete&db={tableName}\",\n apiPostDeleteDesc:\n \"`uid`と`name`のキーを持つJSONオブジェクトが送信されます。\",\n language: \"言語:\",\n },\n};",[],[199,205,259,280],[199,205,259],{"_103":288,"_95":289,"_157":290,"_159":206,"_160":139,"_161":162,"_163":164,"_105":291,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":292,"_98":301},"ae031f1c-7628-11f0-81c8-0224a6c84d84","controllers","019895ac-4cfc-7302-8b2b-866bcedaa5a4",["D",1754857753803],[293],{"_103":294,"_95":295,"_157":296,"_159":290,"_160":139,"_161":162,"_163":22,"_105":297,"_99":32,"_166":220,"_168":298,"_169":22,"_170":-5,"_171":299,"_98":300},"ae031d8c-7628-11f0-81c8-0224a6c84d84","FetchData.jsx","019895ac-4cfc-7302-8b2b-82a3763816a0",["D",1754857753803],"// Técnica de programación avanzada llamada \"currying\" o \"closure\"\nexport const createApi = (apiConfig, showToast, lang, currentLang) => {\n const fetchData = async (fullUrl, method = \"GET\", data = null) => {\n if (!apiConfig.url || !apiConfig.token) {\n showToast(lang[currentLang].apiConfigRequired, \"error\");\n return null;\n }\n\n const headers = {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${apiConfig.token}`,\n };\n\n const options = { method, headers };\n if (data) options.body = JSON.stringify(data);\n\n try {\n const response = await fetch(fullUrl, options);\n const result = await response.json();\n\n if (response.status === 200 || response.status === 201) {\n return result;\n } else {\n const errorMessage = `Error de la API: ${\n result.STATUS || response.status\n } - ${result.ERROR || \"Error desconocido\"}`;\n showToast(lang[currentLang].apiError(errorMessage), \"error\");\n return null;\n }\n } catch (error) {\n console.error(\"Error de la API:\", error);\n showToast(lang[currentLang].apiError(error.message), \"error\");\n return null;\n }\n };\n return fetchData;\n};",[],[199,205,289,295],[199,205,289],{"_103":303,"_95":304,"_157":305,"_159":206,"_160":139,"_161":162,"_163":164,"_105":306,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":307,"_98":316},"ae0322b4-7628-11f0-81c8-0224a6c84d84","filter","019895ac-4cfc-7302-8b2b-8cd460d38727",["D",1754857753803],[308],{"_103":309,"_95":310,"_157":311,"_159":305,"_160":139,"_161":162,"_163":22,"_105":312,"_99":32,"_166":220,"_168":313,"_169":22,"_170":-5,"_171":314,"_98":315},"ae032188-7628-11f0-81c8-0224a6c84d84","FilteredTickets.jsx","019895ac-4cfc-7302-8b2b-88859b69a317",["D",1754857753803],"const filteredTickets = (tickets, filters) =>\n tickets\n .filter(\n (ticket) =>\n (filters.status === \"Todos\" || ticket.status === filters.status) &&\n (filters.priority === \"Todas\" ||\n ticket.priority === filters.priority) &&\n (ticket.title.toLowerCase().includes(filters.search.toLowerCase()) ||\n ticket.id.toLowerCase().includes(filters.search.toLowerCase())),\n )\n .sort((a, b) => new Date(b.created) - new Date(a.created));\n\nexport default filteredTickets;",[],[199,205,304,310],[199,205,304],{"_103":318,"_95":319,"_157":320,"_159":206,"_160":139,"_161":162,"_163":164,"_105":321,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":322,"_98":355},"ae032d9a-7628-11f0-81c8-0224a6c84d84","modals","019895ac-4cfc-7302-8b2b-a26ea050e954",["D",1754857753803],[323,331,339,347],{"_103":324,"_95":325,"_157":326,"_159":320,"_160":139,"_161":162,"_163":22,"_105":327,"_99":32,"_166":220,"_168":328,"_169":22,"_170":-5,"_171":329,"_98":330},"ae0323a4-7628-11f0-81c8-0224a6c84d84","EditTicketModal.jsx","019895ac-4cfc-7302-8b2b-909c6639a7ff",["D",1754857753803],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nimport {\n Button,\n CardDialog,\n InputF,\n Label,\n SelectF,\n TextAreaF,\n} from \"../common/Ui.jsx\";\nimport { TICKET_PRIORITIES, TICKET_STATUSES } from \"../config/Constants.jsx\";\nimport { lang } from \"../config/Lang.jsx\";\n\nconst EditTicketModal = ({ ticket, onClose, onSubmit, currentLang }) => {\n if (!ticket) return null; // Previene errores si no se pasa un ticket\n\n return (\n \n \n \n );\n};\n\nexport default EditTicketModal;",[],[199,205,319,325],{"_103":332,"_95":333,"_157":334,"_159":320,"_160":139,"_161":162,"_163":22,"_105":335,"_99":32,"_166":220,"_168":336,"_169":22,"_170":-5,"_171":337,"_98":338},"ae032624-7628-11f0-81c8-0224a6c84d84","HelpModal.jsx","019895ac-4cfc-7302-8b2b-950db83d5536",["D",1754857753803],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nimport { CardDialog } from \"../common/Ui.jsx\";\nimport { lang } from \"../config/Lang.jsx\";\n\nconst HelpModal = ({ onClose, currentLang }) => {\n return (\n \n

\n {lang[currentLang].helpGuideText1}\n \n {lang[currentLang].helpGuideText2}\n \n {lang[currentLang].helpGuideText3}\n

\n {lang[currentLang].apiOperationsTitle}\n

\n {lang[currentLang].apiGet}{\" \"}\n {lang[currentLang].apiGetUrl}\n
\n {lang[currentLang].apiGetDesc}\n
\n
\n {lang[currentLang].apiPostInsert}{\" \"}\n {lang[currentLang].apiPostInsertUrl}\n
\n {lang[currentLang].apiPostInsertDesc}\n
\n
\n {lang[currentLang].apiPostUpdate}{\" \"}\n {lang[currentLang].apiPostUpdateUrl}\n
\n {lang[currentLang].apiPostUpdateDesc}\n
\n
\n {lang[currentLang].apiPostDelete}{\" \"}\n {lang[currentLang].apiPostDeleteUrl}\n
\n {lang[currentLang].apiPostDeleteDesc}\n
\n

\n \n );\n};\n\nexport default HelpModal;",[],[199,205,319,333],{"_103":340,"_95":341,"_157":342,"_159":320,"_160":139,"_161":162,"_163":22,"_105":343,"_99":32,"_166":220,"_168":344,"_169":22,"_170":-5,"_171":345,"_98":346},"ae0327be-7628-11f0-81c8-0224a6c84d84","NewTicketModal.jsx","019895ac-4cfc-7302-8b2b-9a86326bd790",["D",1754857753803],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nimport {\n Button,\n CardDialog,\n InputF,\n Label,\n SelectF,\n TextAreaF,\n} from \"../common/Ui.jsx\";\nimport { TICKET_PRIORITIES, TICKET_STATUSES } from \"../config/Constants.jsx\";\nimport { lang } from \"../config/Lang.jsx\";\n\nconst NewTicketModal = ({ onClose, onSubmit, currentLang }) => {\n return (\n \n \n \n );\n};\n\nexport default NewTicketModal;",[],[199,205,319,341],{"_103":348,"_95":349,"_157":350,"_159":320,"_160":139,"_161":162,"_163":22,"_105":351,"_99":32,"_166":220,"_168":352,"_169":22,"_170":-5,"_171":353,"_98":354},"ae032b06-7628-11f0-81c8-0224a6c84d84","SettingsModal.jsx","019895ac-4cfc-7302-8b2b-9f5845da6903",["D",1754857753803],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Button, CardDialog, InputF, Label } from \"../common/Ui.jsx\";\nimport { lang } from \"../config/Lang.jsx\";\n\nconst SettingsModal = ({ onClose, onSave, apiConfig, currentLang }) => {\n const [apiSettings, setApiSettings] = React.useState(apiConfig);\n\n const handleChange = (e) => {\n setApiSettings({\n ...apiSettings,\n [e.target.id === \"api-url\" ? \"url\" : \"token\"]: e.target.value,\n });\n };\n\n const handleSave = () => {\n onSave(apiSettings);\n onClose();\n };\n\n return (\n \n

\n {lang[currentLang].apiSettingsSubtitle}\n

\n \n \n

\n \n {lang[currentLang].saveApiSettings}\n \n \n {lang[currentLang].cancel}\n \n

\n \n );\n};\n\nexport default SettingsModal;",[],[199,205,319,349],[199,205,319],{"_103":357,"_95":358,"_157":359,"_159":206,"_160":139,"_161":162,"_163":164,"_105":360,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":361,"_98":386},"ae0335ce-7628-11f0-81c8-0224a6c84d84","status","019895ac-4cfc-7302-8b2b-b3a7239a9585",["D",1754857753803],[362,370,378],{"_103":363,"_95":364,"_157":365,"_159":359,"_160":139,"_161":162,"_163":22,"_105":366,"_99":32,"_166":220,"_168":367,"_169":22,"_170":-5,"_171":368,"_98":369},"ae032eee-7628-11f0-81c8-0224a6c84d84","GetPriorityClass.jsx","019895ac-4cfc-7302-8b2b-a4fd8ddd6058",["D",1754857753803],"const getPriorityClass = (priority) => {\n const colors = {\n Crítica: \"text-red-500 font-bold\",\n Alta: \"text-yellow-500 font-semibold\",\n Media: \"text-blue-500\",\n Baja: \"text-green-500\",\n };\n return colors[priority] || \"text-gray-500\";\n};\n\nexport default getPriorityClass;",[],[199,205,358,364],{"_103":371,"_95":372,"_157":373,"_159":359,"_160":139,"_161":162,"_163":22,"_105":374,"_99":32,"_166":220,"_168":375,"_169":22,"_170":-5,"_171":376,"_98":377},"ae032fde-7628-11f0-81c8-0224a6c84d84","GetStatusClass.jsx","019895ac-4cfc-7302-8b2b-a8f7c88dd347",["D",1754857753803],"const getStatusClass = (status) => {\n const base = \"border-t-5 p-5 rounded-sm shadow-md\";\n const colors = {\n Abierto: \"border-blue-500\",\n \"En Progreso\": \"border-yellow-500\",\n Pendiente: \"border-indigo-500\",\n Resuelto: \"border-green-500\",\n Cerrado: \"border-gray-500\",\n };\n return `${base} ${colors[status] || \"border-gray-300\"}`;\n};\n\nexport default getStatusClass;",[],[199,205,358,372],{"_103":379,"_95":380,"_157":381,"_159":359,"_160":139,"_161":162,"_163":22,"_105":382,"_99":32,"_166":220,"_168":383,"_169":22,"_170":-5,"_171":384,"_98":385},"ae0330ba-7628-11f0-81c8-0224a6c84d84","GetStatusTxtClass.jsx","019895ac-4cfc-7302-8b2b-acaf4f0ee154",["D",1754857753803],"const getStatusTxtClass = (status) => {\n const base = \"font-bold\";\n const colors = {\n Abierto: \"text-blue-500\",\n \"En Progreso\": \"text-yellow-500\",\n Pendiente: \"text-indigo-500\",\n Resuelto: \"text-green-500\",\n Cerrado: \"text-gray-500\",\n };\n return `${base} ${colors[status] || \"border-gray-300\"}`;\n};\n\nexport default getStatusTxtClass;",[],[199,205,358,380],[199,205,358],{"_103":388,"_95":389,"_157":390,"_159":206,"_160":139,"_161":100,"_163":22,"_105":391,"_99":392,"_166":220,"_168":393,"_169":22,"_170":-5,"_171":394,"_98":395},"acc010f6-762d-11f0-8c93-0224a6c84d84","App.jsx","019895ac-4cfc-7302-8b2b-b63b1fb68de1",["D",1754859899222],21,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useState, useEffect} from \"https://esm.sh/react@18.2.0\";\nimport { createPortal } from \"https://esm.sh/react-dom@18.2.0\";\nimport DOMPurify from \"https://esm.sh/dompurify@2.4.0\";\n\nimport {\n XMarkIcon,\n PlusIcon,\n Cog6ToothIcon,\n PencilIcon,\n DocumentDuplicateIcon,\n TrashIcon,\n SunIcon,\n MoonIcon,\n EllipsisVerticalIcon,\n} from \"./common/Icons.jsx\";\n\n\n// Configuración\nconst SNIPPETSCONFIG = \"snippetsConfig\";\nconst SNIPPETSTHEME = \"snippetstheme\";\nconst SNIPPETSLANG = \"shippetslanguage\";\n\n// Objeto de localización\nconst lang = {\n es: {\n api_error_config:\n \"API URL o Token no configurados. Por favor, revisa tus ajustes.\",\n decode_error: \"[El contenido no pudo ser decodificado]\",\n loading_snippets: \"Cargando snippets...\",\n loading_all_snippets: \"Cargando todos los snippets...\",\n notification_config_info:\n \"Por favor, configura la URL y el Token de la API en 'Ajustes'.\",\n notification_snippets_loaded_success: \"Snippets cargados exitosamente.\",\n notification_no_snippets_found_warning: \"No se encontraron snippets.\",\n notification_load_error: \"Error al cargar los snippets. Revisa la consola.\",\n notification_config_save_success: \"Configuración guardada exitosamente.\",\n notification_snippet_updated_success: \"Snippet actualizado con éxito.\",\n notification_snippet_created_success: \"Snippet creado con éxito.\",\n notification_snippet_save_error: \"Error al guardar el snippet: \",\n notification_snippet_deleted_success: \"Snippet eliminado con éxito.\",\n notification_snippet_delete_error: \"Error al eliminar el snippet: \",\n notification_token_applied_success: \"Token generado y aplicado.\",\n confirm_delete_title: \"Confirmar Eliminación\",\n confirm_delete_message:\n '¿Estás seguro de que quieres eliminar el snippet \"',\n confirm_delete_snippet_name: \"{snippet.title}\",\n confirm_delete_button_cancel: \"Cancelar\",\n confirm_delete_button_confirm: \"Eliminar\",\n generate_token_title: \"Generar Token de API\",\n generate_token_user_label: \"Usuario:\",\n generate_token_password_label: \"Contraseña:\",\n generate_token_role_label: \"Rol:\",\n generate_token_button_close: \"Cerrar\",\n generate_token_button_generate: \"Generar y Aplicar\",\n generate_token_button_generating: \"Generando...\",\n app_title: \"Snippets App\",\n app_search_placeholder: \"Buscar snippets...\",\n app_filter_all: \"Todas las categorías\",\n app_new_snippet_button: \"Nuevo Snippet\",\n snippet_card_options: \"Opciones\",\n snippet_card_category_label: \"Categoría:\",\n snippet_card_edit_button: \"Editar\",\n snippet_card_clone_button: \"Clonar\",\n snippet_card_delete_button: \"Eliminar\",\n snippet_form_edit_title: \"Editar Snippet\",\n snippet_form_create_title: \"Crear Snippet\",\n snippet_form_title_label: \"Título\",\n snippet_form_description_label: \"Descripción\",\n snippet_form_category_label: \"Categoría\",\n snippet_form_content_label: \"Contenido\",\n snippet_form_button_cancel: \"Cancelar\",\n snippet_form_button_save: \"Guardar Snippet\",\n snippet_form_button_saving: \"Guardando...\",\n snippet_detail_back_button: \"Volver a la lista\",\n no_snippets_found_title: \"No se encontraron snippets.\",\n no_snippets_found_message:\n \"Puedes crear uno nuevo usando el botón en el menú lateral.\",\n settings_title: \"Ajustes\",\n settings_api_url_label: \"URL de la API\",\n settings_api_token_label: \"Token de la API\",\n settings_generate_token_button: \"Generar Token\",\n settings_save_button: \"Guardar\",\n theme_toggle_label: \"Cambiar tema\",\n language_label: \"Idioma\",\n language_button_label: \"Cambiar Idioma\",\n title_my_snippets: \"Mis Snippets\",\n },\n en: {\n api_error_config:\n \"API URL or Token not configured. Please check your settings.\",\n decode_error: \"[Content could not be decoded]\",\n loading_snippets: \"Loading snippets...\",\n loading_all_snippets: \"Loading all snippets...\",\n notification_config_info:\n \"Please configure the API URL and Token in 'Settings'.\",\n notification_snippets_loaded_success: \"Snippets loaded successfully.\",\n notification_no_snippets_found_warning: \"No snippets found.\",\n notification_load_error: \"Error loading snippets. Check the console.\",\n notification_config_save_success: \"Configuration saved successfully.\",\n notification_snippet_updated_success: \"Snippet updated successfully.\",\n notification_snippet_created_success: \"Snippet created successfully.\",\n notification_snippet_save_error: \"Error saving snippet: \",\n notification_snippet_deleted_success: \"Snippet deleted successfully.\",\n notification_snippet_delete_error: \"Error deleting snippet: \",\n notification_token_applied_success: \"Token generated and applied.\",\n confirm_delete_title: \"Confirm Deletion\",\n confirm_delete_message: 'Are you sure you want to delete the snippet \"',\n confirm_delete_snippet_name: \"{snippet.title}\",\n confirm_delete_button_cancel: \"Cancel\",\n confirm_delete_button_confirm: \"Delete\",\n generate_token_title: \"Generate API Token\",\n generate_token_user_label: \"User:\",\n generate_token_password_label: \"Password:\",\n generate_token_role_label: \"Role:\",\n generate_token_button_close: \"Close\",\n generate_token_button_generate: \"Generate and Apply\",\n generate_token_button_generating: \"Generating...\",\n app_title: \"Snippets App\",\n app_search_placeholder: \"Search snippets...\",\n app_filter_all: \"All categories\",\n app_new_snippet_button: \"New Snippet\",\n snippet_card_options: \"Options\",\n snippet_card_category_label: \"Category:\",\n snippet_card_edit_button: \"Edit\",\n snippet_card_clone_button: \"Clone\",\n snippet_card_delete_button: \"Delete\",\n snippet_form_edit_title: \"Edit Snippet\",\n snippet_form_create_title: \"Create Snippet\",\n snippet_form_title_label: \"Title\",\n snippet_form_description_label: \"Description\",\n snippet_form_category_label: \"Category\",\n snippet_form_content_label: \"Content\",\n snippet_form_button_cancel: \"Cancel\",\n snippet_form_button_save: \"Save Snippet\",\n snippet_form_button_saving: \"Saving...\",\n snippet_detail_back_button: \"Back to list\",\n no_snippets_found_title: \"No snippets found.\",\n no_snippets_found_message:\n \"You can create a new one using the button in the side menu.\",\n settings_title: \"Settings\",\n settings_api_url_label: \"API URL\",\n settings_api_token_label: \"API Token\",\n settings_generate_token_button: \"Generate Token\",\n settings_save_button: \"Save\",\n theme_toggle_label: \"Change theme\",\n language_label: \"Language\",\n language_button_label: \"Change Language\",\n title_my_snippets: \"My Snippets\",\n },\n jp: {\n api_error_config:\n \"APIのURLまたはトークンが設定されていません。設定を確認してください。\",\n decode_error: \"[コンテンツをデコードできませんでした]\",\n loading_snippets: \"スニペットを読み込み中...\",\n loading_all_snippets: \"すべてのスニペットを読み込み中...\",\n notification_config_info:\n \"「設定」でAPIのURLとトークンを設定してください。\",\n notification_snippets_loaded_success:\n \"スニペットが正常に読み込まれました。\",\n notification_no_snippets_found_warning:\n \"スニペットが見つかりませんでした。\",\n notification_load_error:\n \"スニペットの読み込み中にエラーが発生しました。コンソールを確認してください。\",\n notification_config_save_success: \"設定が正常に保存されました。\",\n notification_snippet_updated_success: \"スニペットが正常に更新されました。\",\n notification_snippet_created_success: \"スニペットが正常に作成されました。\",\n notification_snippet_save_error:\n \"スニペットの保存中にエラーが発生しました: \",\n notification_snippet_deleted_success: \"スニペットが正常に削除されました。\",\n notification_snippet_delete_error:\n \"スニペットの削除中にエラーが発生しました: \",\n notification_token_applied_success: \"トークンが生成され、適用されました。\",\n confirm_delete_title: \"削除の確認\",\n confirm_delete_message: \"スニペット「\",\n confirm_delete_snippet_name: \"{snippet.title}\",\n confirm_delete_message_end: \"」を削除してもよろしいですか？\",\n confirm_delete_button_cancel: \"キャンセル\",\n confirm_delete_button_confirm: \"削除\",\n generate_token_title: \"APIトークンの生成\",\n generate_token_user_label: \"ユーザー:\",\n generate_token_password_label: \"パスワード:\",\n generate_token_role_label: \"役割:\",\n generate_token_button_close: \"閉じる\",\n generate_token_button_generate: \"生成して適用\",\n generate_token_button_generating: \"生成中...\",\n app_title: \"スニペットアプリ\",\n app_search_placeholder: \"スニペットを検索...\",\n app_filter_all: \"すべてのカテゴリ\",\n app_new_snippet_button: \"新しいスニペット\",\n snippet_card_options: \"オプション\",\n snippet_card_category_label: \"カテゴリ:\",\n snippet_card_edit_button: \"編集\",\n snippet_card_clone_button: \"クローン\",\n snippet_card_delete_button: \"削除\",\n snippet_form_edit_title: \"スニペットを編集\",\n snippet_form_create_title: \"スニペットを作成\",\n snippet_form_title_label: \"タイトル\",\n snippet_form_description_label: \"説明\",\n snippet_form_category_label: \"カテゴリ\",\n snippet_form_content_label: \"コンテンツ\",\n snippet_form_button_cancel: \"キャンセル\",\n snippet_form_button_save: \"スニペットを保存\",\n snippet_form_button_saving: \"保存中...\",\n snippet_detail_back_button: \"リストに戻る\",\n no_snippets_found_title: \"スニペットが見つかりませんでした。\",\n no_snippets_found_message:\n \"サイドメニューのボタンを使って新しいものを作成できます。\",\n settings_title: \"設定\",\n settings_api_url_label: \"API URL\",\n settings_api_token_label: \"APIトークン\",\n settings_generate_token_button: \"トークンを生成\",\n settings_save_button: \"保存\",\n theme_toggle_label: \"テーマを変更\",\n language_label: \"言語\",\n language_button_label: \"言語を変更\",\n title_my_snippets: \"私のスニペット\",\n },\n};\n\n// Helper functions for the app\nconst StringUtils = {\n sanitize(text) {\n return DOMPurify.sanitize(text, { USE_PROFILES: { html: false } });\n },\n encode(t) {\n if (!t) return \"\";\n return btoa(\n encodeURIComponent(t).replace(\n /%([0-9A-F]{2})/g,\n (e, o) => String.fromCharCode(\"0x\" + o),\n ),\n );\n },\n decode(t) {\n try {\n return decodeURIComponent(\n atob(t)\n .split(\"\")\n .map((e) => \"%\" + (\"00\" + e.charCodeAt(0).toString(16)).slice(-2))\n .join(\"\"),\n );\n } catch (e) {\n return (\n console.error(\"Error al decodificar la cadena Base64:\", e),\n lang.es.decode_error\n );\n }\n },\n};\n\nconst StorageUtils = {\n save(key, value) {\n try {\n localStorage.setItem(key, JSON.stringify(value));\n } catch (e) {\n console.error(\"Error saving to localStorage\", e);\n }\n },\n get(key) {\n try {\n const value = localStorage.getItem(key);\n return value ? JSON.parse(value) : null;\n } catch (e) {\n console.error(\"Error getting from localStorage\", e);\n return null;\n }\n },\n};\n\n// Notification component for displaying messages\nconst Notification = ({ message, type, onClose }) => {\n const [isVisible, setIsVisible] = useState(true);\n // Auto-close after 2 seconds\n useEffect(() => {\n const timer = setTimeout(() => {\n setIsVisible(false);\n onClose(); // Call the parent's onClose to remove from state\n }, 3000);\n return () => clearTimeout(timer);\n }, [onClose]);\n\n if (!isVisible) return null;\n\n const baseClasses =\n \"p-4 rounded-lg shadow-xl text-white font-medium mb-2 animate-slideIn\";\n let colorClasses = \"\";\n let icon = \"\";\n\n switch (type) {\n case \"info\":\n colorClasses = \"bg-blue-600\";\n icon = (\n \n \n \n );\n break;\n case \"success\":\n colorClasses = \"bg-emerald-600\";\n icon = (\n \n \n \n );\n break;\n case \"warning\":\n colorClasses = \"bg-amber-500\";\n icon = (\n \n \n \n );\n break;\n case \"error\":\n colorClasses = \"bg-rose-600\";\n icon = (\n \n \n \n );\n break;\n default:\n colorClasses = \"bg-gray-700\";\n icon = (\n \n \n \n );\n }\n\n return (\n

\n {icon}\n {message}\n {\n setIsVisible(false);\n onClose();\n }}\n className=\"ml-4 p-1 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors\"\n >\n \n \n \n \n

\n );\n};\n\n// API class to handle all API interactions\nclass API {\n constructor(url, token) {\n this.url = url;\n this.token = token;\n }\n\n async fetchData(endpoint, options = {}) {\n if (!this.url || !this.token) {\n throw new Error(lang.es.api_error_config);\n }\n\n const headers = {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${this.token}`,\n ...options.headers,\n };\n\n const config = {\n ...options,\n headers,\n };\n\n try {\n const response = await fetch(`${this.url}${endpoint}`, config);\n if (!response.ok) {\n throw new Error(`Error HTTP! status: ${response.status}`);\n }\n return await response.json();\n } catch (error) {\n console.error(\"API Error:\", error);\n throw error;\n }\n }\n\n async getSnippets() {\n return this.fetchData(\"?method=get&db=snippets&all=all&limit=400\");\n }\n\n async createSnippet(data) {\n return this.fetchData(\"?method=insert&db=snippets\", {\n method: \"POST\",\n body: JSON.stringify(data),\n });\n }\n\n async updateSnippet(uid, data) {\n return this.fetchData(\"?method=update&db=snippets\", {\n method: \"POST\",\n body: JSON.stringify({ uid, ...data }),\n });\n }\n\n // Modified to include 'name' (title) in the request body for deletion\n async deleteSnippet(uid, name) {\n return this.fetchData(\"?method=delete&db=snippets\", {\n method: \"POST\",\n body: JSON.stringify({ uid, name }),\n });\n }\n}\n\n// Confirm delete modal\nconst ConfirmDeleteModal = ({ snippet, onClose, onConfirm, language }) => (\n

\n {language.confirm_delete_title}\n

\n {language.confirm_delete_message}\n {snippet.title}\n {language.confirm_delete_message_end\n ? language.confirm_delete_message_end\n : \"?\"}\n

\n \n {language.confirm_delete_button_cancel}\n \n onConfirm(snippet.uid)}\n className=\"bg-rose-600 hover:bg-rose-700 text-white font-bold py-2 px-4 rounded-lg transition-colors\"\n >\n {language.confirm_delete_button_confirm}\n \n

\n);\n\n// Token generation form\nconst GenerateTokenModal = ({ onClose, onApplyToken, language }) => {\n const [formData, setFormData] = useState({\n user: \"admin_user\",\n password: \"\",\n role: \"administrator\",\n });\n const [loading, setLoading] = useState(false);\n\n const handleChange = (e) => {\n const { name, value } = e.target;\n setFormData((prev) => ({ ...prev, [name]: value }));\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setLoading(true);\n\n try {\n // Simulación de la llamada a la API\n const response = await new Promise((resolve) =>\n setTimeout(\n () =>\n resolve({\n token:\n \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoic3VwZXJ1c3VhcmlvIiwicm9sZSI6ImFkbWluIn0.SflKxwRJSMeKKF2eNfK4ulI\" +\n Math.random().toString(36).substring(7),\n is_valid: true,\n }),\n 1000,\n )\n );\n if (response.is_valid) {\n onApplyToken(response.token);\n } else {\n console.error(\"Failed to generate token.\");\n }\n } catch (e) {\n console.error(\"Error generating token:\", e);\n } finally {\n setLoading(false);\n onClose();\n }\n };\n\n return (\n

\n {language.generate_token_title}\n

\n \n

\n );\n};\n\n// React component for the main application\nfunction App() {\n const [snippets, setSnippets] = useState([]);\n const [filteredSnippets, setFilteredSnippets] = useState([]);\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [filterCategory, setFilterCategory] = useState(\"all\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [showConfig, setShowConfig] = useState(false);\n const [showGenerateToken, setShowGenerateToken] = useState(false);\n const [currentSnippet, setCurrentSnippet] = useState(null);\n const [snippetToEdit, setSnippetToEdit] = useState(null);\n const [snippetToDelete, setSnippetToDelete] = useState(null);\n const [showConfirmDelete, setShowConfirmDelete] = useState(false);\n\n const [config, setConfig] = useState(\n () => StorageUtils.get(SNIPPETSCONFIG) || { url: \"\", token: \"\" },\n );\n\n const [theme, setTheme] = useState(\n () => StorageUtils.get(SNIPPETSTHEME) || \"light\",\n );\n\n const [currentLang, setCurrentLang] = useState(\n () => StorageUtils.get(SNIPPETSLANG) || \"es\",\n );\n\n const language = lang[currentLang];\n\n const [api, setApi] = useState(new API(config.url, config.token));\n\n // Change to an array to handle multiple notifications\n const [notifications, setNotifications] = useState([]);\n\n // Function to show a new notification\n const showNotification = (message, type) => {\n const newNotification = { id: Date.now(), message, type };\n setNotifications((prev) => [...prev, newNotification]);\n };\n\n // Function to close a specific notification by its ID\n const closeNotification = (id) => {\n setNotifications((prev) => prev.filter((n) => n.id !== id));\n };\n\n // Set the theme class on the body\n useEffect(() => {\n if (theme === \"dark\") {\n document.documentElement.classList.add(\"dark\");\n } else {\n document.documentElement.classList.remove(\"dark\");\n }\n }, [theme]);\n\n // Function to fetch snippets from the API\n const fetchSnippets = async () => {\n if (!config.url || !config.token) {\n showNotification(\n language.notification_config_info,\n \"info\",\n );\n setLoading(false);\n setSnippets([]);\n return;\n }\n\n setLoading(true);\n setError(null);\n try {\n const response = await api.getSnippets();\n if (response && response.CONTENT) {\n // The API returns the content encoded in Base64, so we decode it.\n const fetchedSnippets = Object.values(response.CONTENT).map(\n (snippet) => ({\n ...snippet,\n content: StringUtils.decode(snippet.content),\n }),\n );\n setSnippets(fetchedSnippets);\n showNotification(\n language.notification_snippets_loaded_success,\n \"success\",\n );\n } else {\n setSnippets([]);\n showNotification(\n language.notification_no_snippets_found_warning,\n \"warning\",\n );\n }\n } catch (e) {\n setError(\"Error al cargar los snippets. Revisa la consola.\");\n showNotification(language.notification_load_error, \"error\");\n } finally {\n setLoading(false);\n }\n };\n\n // Load snippets on initial render and when config changes\n useEffect(() => {\n fetchSnippets();\n }, [api, config, currentLang]);\n\n // Handle filtering and searching\n useEffect(() => {\n let filtered = snippets;\n\n if (searchTerm) {\n const lowercasedSearchTerm = searchTerm.toLowerCase();\n filtered = filtered.filter(\n (snippet) =>\n (snippet.title &&\n snippet.title.toLowerCase().includes(lowercasedSearchTerm)) ||\n (snippet.content &&\n snippet.content.toLowerCase().includes(lowercasedSearchTerm)),\n );\n }\n\n if (filterCategory !== \"all\") {\n filtered = filtered.filter(\n (snippet) => snippet.category === filterCategory,\n );\n }\n\n setFilteredSnippets(filtered);\n }, [snippets, searchTerm, filterCategory]);\n\n // Extract unique categories for the filter dropdown\n const uniqueCategories = [...new Set(snippets.map((s) => s.category))].filter(\n Boolean,\n );\n\n // Handle theme toggle\n const toggleTheme = () => {\n const newTheme = theme === \"dark\" ? \"light\" : \"dark\";\n setTheme(newTheme);\n StorageUtils.save(SNIPPETSTHEME, newTheme);\n };\n\n // Handle language change\n const handleLanguageChange = (e) => {\n const newLang = e.target.value;\n setCurrentLang(newLang);\n StorageUtils.save(SNIPPETSLANG, newLang);\n };\n\n // Handle config form submission\n const handleSaveConfig = (e) => {\n e.preventDefault();\n StorageUtils.save(SNIPPETSCONFIG, config);\n setApi(new API(config.url, config.token));\n showNotification(language.notification_config_save_success, \"success\");\n setShowConfig(false);\n };\n\n // Handle new snippet creation/update\n const handleSaveSnippet = async (formData) => {\n setLoading(true);\n try {\n const payload = {\n ...formData,\n content: StringUtils.encode(formData.content), // Encode content before sending to API\n };\n if (formData.uid) {\n // Update existing snippet\n await api.updateSnippet(formData.uid, payload);\n showNotification(\n language.notification_snippet_updated_success,\n \"success\",\n );\n } else {\n // Create new snippet\n await api.createSnippet(payload);\n showNotification(\n language.notification_snippet_created_success,\n \"success\",\n );\n }\n await fetchSnippets(); // Refresh snippets\n setSnippetToEdit(null);\n } catch (e) {\n showNotification(\n `${language.notification_snippet_save_error} ${e.message}`,\n \"error\",\n );\n } finally {\n setLoading(false);\n }\n };\n\n // MODIFICACIÓN: Handle snippet deletion, now sending both uid and title\n const handleDeleteSnippet = async (uid) => {\n setLoading(true);\n try {\n // Find the snippet to get its name (title)\n const snippet = snippets.find((s) => s.uid === uid);\n if (!snippet) {\n throw new Error(\"Snippet no encontrado.\");\n }\n await api.deleteSnippet(uid, snippet.name);\n showNotification(\n language.notification_snippet_deleted_success,\n \"success\",\n );\n await fetchSnippets(); // Refresh snippets\n setShowConfirmDelete(false);\n } catch (e) {\n showNotification(\n `${language.notification_snippet_delete_error} ${e.message}`,\n \"error\",\n );\n } finally {\n setLoading(false);\n }\n };\n\n // Snippet Card Component\n const SnippetCard = ({ snippet }) => {\n const [showDropdown, setShowDropdown] = useState(false);\n const dropdownRef = useRef(null);\n\n // Close the dropdown when clicking outside\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (\n dropdownRef.current &&\n !dropdownRef.current.contains(event.target)\n ) {\n setShowDropdown(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [dropdownRef]);\n\n return (\n setCurrentSnippet(snippet)}\n >\n

\n {snippet.title}\n

\n {\n e.stopPropagation();\n setShowDropdown(!showDropdown);\n }}\n className=\"cursor-pointer p-1 rounded-full text-gray-500 hover:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-600 transition-colors\"\n title={language.snippet_card_options}\n >\n \n \n {showDropdown && (\n

\n {\n e.stopPropagation();\n setSnippetToEdit(snippet);\n setShowDropdown(false);\n }}\n className=\"cursor-pointer flex items-center px-4 py-2 text-sm hover:bg-indigo-50 dark:hover:bg-gray-700 w-full text-left\"\n >\n \n \n \n \n {language.snippet_card_edit_button}\n \n \n
\n {\n e.stopPropagation();\n setSnippetToEdit({\n ...snippet,\n uid: null,\n title:\n `${language.snippet_card_clone_button} de ${snippet.title}`,\n });\n setShowDropdown(false);\n }}\n className=\"cursor-pointer flex items-center px-4 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 w-full text-left\"\n >\n \n \n \n \n {language.snippet_card_clone_button}\n \n \n
\n {\n e.stopPropagation();\n setSnippetToDelete(snippet);\n setShowConfirmDelete(true);\n setShowDropdown(false);\n }}\n className=\"cursor-pointer flex items-center px-4 py-2 text-sm hover:bg-rose-50 dark:hover:bg-gray-700 w-full text-left\"\n >\n \n \n \n \n {language.snippet_card_delete_button}\n \n \n

\n )}\n

\n {snippet.category && (\n \n \n {language.snippet_card_category_label}\n \n \n {snippet.category}\n \n \n )}\n \n

\n \n );\n };\n\n // Snippet Form Component\n const SnippetForm = ({ initialData = {}, onClose, onSuccess }) => {\n const [formData, setFormData] = useState({\n title: initialData.title || \"\",\n description: initialData.description || \"\",\n category: initialData.category || \"\",\n content: initialData.content || \"\",\n });\n const [formLoading, setFormLoading] = useState(false);\n\n const handleChange = (e) => {\n const { name, value } = e.target;\n setFormData((prev) => ({ ...prev, [name]: value }));\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setFormLoading(true);\n try {\n const payload = {\n ...formData,\n content: StringUtils.encode(formData.content), // Encode content before sending to API\n };\n if (initialData.uid) {\n // Update existing snippet\n await api.updateSnippet(initialData.uid, payload);\n showNotification(\n language.notification_snippet_updated_success,\n \"success\",\n );\n } else {\n // Create new snippet\n await api.createSnippet(payload);\n showNotification(\n language.notification_snippet_created_success,\n \"success\",\n );\n }\n await fetchSnippets(); // Refresh snippets\n onSuccess();\n } catch (e) {\n showNotification(\n `${language.notification_snippet_save_error} ${e.message}`,\n \"error\",\n );\n } finally {\n setFormLoading(false);\n }\n };\n\n return (\n

\n {initialData.uid\n ? language.snippet_form_edit_title\n : language.snippet_form_create_title}\n

\n \n \n \n

\n \n {language.snippet_form_title_label}\n \n \n

\n \n {language.snippet_form_description_label}\n \n \n \n

\n \n {language.snippet_form_category_label}\n \n \n

\n \n {language.snippet_form_content_label}\n \n \n \n

\n \n {language.snippet_form_button_cancel}\n \n \n {formLoading\n ? language.snippet_form_button_saving\n : language.snippet_form_button_save}\n \n

\n );\n };\n\n return (\n

\n {/* Sidebar */}\n

\n {language.app_title}\n

\n \n {theme === \"light\"\n ? \n : }\n \n setShowConfig(true)}\n title={language.settings_title}\n className=\"cursor-pointer p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors\"\n >\n \n \n

\n setSearchTerm(e.target.value)}\n className=\"w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200\"\n />\n setFilterCategory(e.target.value)}\n className=\"w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200\"\n >\n \n {uniqueCategories.map((category) => (\n \n ))}\n \n

\n\n \n setSnippetToEdit({\n uid: null,\n title: \"\",\n description: \"\",\n category: \"\",\n content: \"\",\n })}\n className=\"cursor-pointer w-full flex items-center justify-center p-2 rounded-lg bg-gray-800 hover:bg-gray-900 text-white font-semibold mb-4 transition-colors\"\n >\n {\" \"}\n {language.app_new_snippet_button}\n \n\n

\n {loading && language.loading_snippets}\n

\n {/* Main Content */}\n

\n {currentSnippet\n ? (\n

\n {currentSnippet.title}\n

\n setCurrentSnippet(null)}\n className=\"cursor-pointer p-2 rounded-full text-rose-600 hover:bg-rose-100 dark:hover:bg-gray-700 transition-colors\"\n title={language.snippet_detail_back_button}\n >\n \n \n

\n {currentSnippet.category && (\n \n {language.snippet_card_category_label}{\" \"}\n {currentSnippet.category}\n \n )}\n

{currentSnippet.description}

\n                  {currentSnippet.content}\n

\n )\n : (\n

\n {language.title_my_snippets}\n

\n {loading && (\n

\n {language.loading_all_snippets}\n

\n )}\n {!loading && filteredSnippets.length === 0\n ? (\n

\n {language.no_snippets_found_title}\n

\n {language.no_snippets_found_message}\n

\n )\n : (\n

\n {filteredSnippets.map((snippet) => (\n \n ))}\n

\n )}\n

\n\n {/* Modals and Notifications */}\n {showConfig &&\n createPortal(\n

\n {language.settings_title}\n

\n setShowConfig(false)}\n className=\"cursor-pointer p-2 rounded-full text-rose-600 hover:bg-rose-100 dark:hover:bg-gray-700 transition-colors\"\n >\n \n \n

\n \n {language.settings_api_url_label}\n \n \n setConfig({ ...config, url: e.target.value })}\n className=\"w-full p-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200\"\n />\n

\n \n {language.settings_api_token_label}\n \n \n setConfig({ ...config, token: e.target.value })}\n className=\"w-full p-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200\"\n />\n setShowGenerateToken(true)}\n className=\"mt-2 w-full py-2 px-4 rounded-lg bg-gray-600 hover:bg-gray-700 text-white font-semibold transition-colors\"\n >\n {language.settings_generate_token_button}\n \n

\n \n {language.language_label}\n \n \n \n \n \n \n

\n \n {language.settings_save_button}\n \n

,\n document.body,\n )}\n\n {/* Generate Token Modal */}\n {showGenerateToken &&\n createPortal(\n setShowGenerateToken(false)}\n onApplyToken={(token) => {\n setConfig({ ...config, token });\n StorageUtils.save(SNIPPETSCONFIG, { ...config, token });\n setApi(new API(config.url, token));\n showNotification(\n language.notification_token_applied_success,\n \"success\",\n );\n }}\n language={language}\n />,\n document.body,\n )}\n\n {/* Edit/Create Snippet Modal */}\n {snippetToEdit &&\n createPortal(\n setSnippetToEdit(null)}\n onSuccess={() => setSnippetToEdit(null)}\n language={language}\n />,\n document.body,\n )}\n\n {/* Confirm Delete Modal */}\n {showConfirmDelete &&\n snippetToDelete &&\n createPortal(\n setShowConfirmDelete(false)}\n onConfirm={handleDeleteSnippet}\n language={language}\n />,\n document.body,\n )}\n\n {/* Container for multiple notifications */}\n {createPortal(\n

\n {notifications.map((notification) => (\n closeNotification(notification.id)}\n />\n ))}\n

,\n document.body,\n )}\n

\n );\n}\n\nexport default App;",[],[199,205,389],[199,205],{"_103":398,"_95":399,"_157":400,"_159":200,"_160":139,"_161":162,"_163":164,"_105":401,"_99":32,"_166":402,"_168":403,"_169":22,"_170":-5,"_171":404,"_98":405},"ae034050-7628-11f0-81c8-0224a6c84d84","favicon.svg","019895ac-4cfc-7302-8b2b-be5a2bcf4246",["D",1754857753803],"file","\n",[],[199,399],{"_103":407,"_95":408,"_157":409,"_159":200,"_160":139,"_161":162,"_163":22,"_105":410,"_99":32,"_166":402,"_168":411,"_169":22,"_170":-5,"_171":412,"_98":413},"ae034140-7628-11f0-81c8-0224a6c84d84","index.html","019895ac-4cfc-7302-8b2b-c1bb5559568d",["D",1754857753803],"\n\n \n \n \n Tickets app\n \n \n \n \n

\n \n \n \n",[],[199,408],{"_103":415,"_95":416,"_157":417,"_159":200,"_160":139,"_161":162,"_163":164,"_105":418,"_99":32,"_166":220,"_168":419,"_169":22,"_170":-5,"_171":420,"_98":421},"ae03428a-7628-11f0-81c8-0224a6c84d84","index.jsx","019895ac-4cfc-7302-8b2b-c68deb5aa83c",["D",1754857753803],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.jsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[199,416],{"_103":423,"_95":424,"_157":425,"_159":200,"_160":139,"_161":162,"_163":22,"_105":426,"_99":32,"_166":402,"_168":427,"_169":22,"_170":-5,"_171":428,"_98":429},"ae0343d4-7628-11f0-81c8-0224a6c84d84","style.css","019895ac-4cfc-7302-8b2b-c8f7aa2ef832",["D",1754857753803],"/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: rotateX(0);\n --tw-rotate-y: rotateY(0);\n --tw-rotate-z: rotateZ(0);\n --tw-skew-x: skewX(0);\n --tw-skew-y: skewY(0);\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Inter\", \"ui-sans-serif\", \"system-ui\", \"-apple-system\", \"system-ui\", \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", \"Arial\", \"Noto Sans\", \"sans-serif\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: \"ui-monospace\", \"SFMono-Regular\", \"Menlo\", \"Monaco\", \"Consolas\", \"Liberation Mono\", \"Courier New\", \"monospace\";\n --color-red-500: oklch(.637 .237 25.331);\n --color-red-600: oklch(.577 .245 27.325);\n --color-red-700: oklch(.505 .213 27.518);\n --color-yellow-500: oklch(.795 .184 86.047);\n --color-green-500: oklch(.723 .219 149.579);\n --color-blue-400: oklch(.707 .165 254.624);\n --color-blue-500: oklch(.623 .214 259.815);\n --color-blue-600: oklch(.546 .245 262.881);\n --color-blue-700: oklch(.488 .243 264.376);\n --color-indigo-500: oklch(.585 .233 277.117);\n --color-slate-50: oklch(.984 .003 247.858);\n --color-slate-400: oklch(.704 .04 256.788);\n --color-slate-600: oklch(.446 .043 257.281);\n --color-slate-800: oklch(.279 .041 260.031);\n --color-slate-900: oklch(.208 .042 265.755);\n --color-gray-50: oklch(.985 .002 247.839);\n --color-gray-100: oklch(.967 .003 264.542);\n --color-gray-200: oklch(.928 .006 264.531);\n --color-gray-300: oklch(.872 .01 258.338);\n --color-gray-400: oklch(.707 .022 261.325);\n --color-gray-500: oklch(.551 .027 264.364);\n --color-gray-600: oklch(.446 .03 256.802);\n --color-gray-700: oklch(.373 .034 259.733);\n --color-gray-800: oklch(.278 .033 256.848);\n --color-gray-900: oklch(.21 .034 264.665);\n --color-white: #fff;\n --spacing: .25rem;\n --container-lg: 32rem;\n --text-xs: .75rem;\n --text-xs--line-height: calc(1 / .75);\n --text-sm: .875rem;\n --text-sm--line-height: calc(1.25 / .875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --radius-sm: .25rem;\n --ease-in: cubic-bezier(.4, 0, 1, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-font-feature-settings: var(--font-sans--font-feature-settings);\n --default-font-variation-settings: var(--font-sans--font-variation-settings);\n --default-mono-font-family: var(--font-mono);\n --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);\n --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n body {\n line-height: inherit;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentColor 50%, transparent);\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .sr-only {\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n\n .top-5 {\n top: calc(var(--spacing) * 5);\n }\n\n .right-5 {\n right: calc(var(--spacing) * 5);\n }\n\n .bottom-5 {\n bottom: calc(var(--spacing) * 5);\n }\n\n .z-50 {\n z-index: 50;\n }\n\n .mx-auto {\n margin-inline: auto;\n }\n\n .my-8 {\n margin-block: calc(var(--spacing) * 8);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .min-h-screen {\n min-height: 100vh;\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-full {\n width: 100%;\n }\n\n .max-w-lg {\n max-width: var(--container-lg);\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .translate-x-0 {\n --tw-translate-x: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-full {\n --tw-translate-x: 100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .transform {\n transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .list-inside {\n list-style-position: inside;\n }\n\n .list-disc {\n list-style-type: disc;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-center {\n align-items: center;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n\n :where(.space-y-1 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-4 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.space-y-6 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .rounded-none {\n border-radius: 0;\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-t-0 {\n border-top-style: var(--tw-border-style);\n border-top-width: 0;\n }\n\n .border-t-5 {\n border-top-style: var(--tw-border-style);\n border-top-width: 5px;\n }\n\n .border-r-0 {\n border-right-style: var(--tw-border-style);\n border-right-width: 0;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0;\n }\n\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n\n .border-l-4 {\n border-left-style: var(--tw-border-style);\n border-left-width: 4px;\n }\n\n .border-blue-400 {\n border-color: var(--color-blue-400);\n }\n\n .border-blue-500 {\n border-color: var(--color-blue-500);\n }\n\n .border-gray-100 {\n border-color: var(--color-gray-100);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-green-500 {\n border-color: var(--color-green-500);\n }\n\n .border-indigo-500 {\n border-color: var(--color-indigo-500);\n }\n\n .border-red-500 {\n border-color: var(--color-red-500);\n }\n\n .border-yellow-500 {\n border-color: var(--color-yellow-500);\n }\n\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-slate-800 {\n background-color: var(--color-slate-800);\n }\n\n .bg-slate-900\\/75 {\n background-color: color-mix(in srgb, oklch(.208 .042 265.755) 75%, transparent);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-slate-900\\/75 {\n background-color: color-mix(in oklab, var(--color-slate-900) 75%, transparent);\n }\n }\n\n .bg-slate-900\\/85 {\n background-color: color-mix(in srgb, oklch(.208 .042 265.755) 85%, transparent);\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .bg-slate-900\\/85 {\n background-color: color-mix(in oklab, var(--color-slate-900) 85%, transparent);\n }\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n\n .text-center {\n text-align: center;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-sans {\n font-family: var(--font-sans);\n }\n\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n\n .text-4xl {\n font-size: var(--text-4xl);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .text-blue-500 {\n color: var(--color-blue-500);\n }\n\n .text-blue-600 {\n color: var(--color-blue-600);\n }\n\n .text-blue-700 {\n color: var(--color-blue-700);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-gray-900 {\n color: var(--color-gray-900);\n }\n\n .text-green-500 {\n color: var(--color-green-500);\n }\n\n .text-indigo-500 {\n color: var(--color-indigo-500);\n }\n\n .text-red-500 {\n color: var(--color-red-500);\n }\n\n .text-red-700 {\n color: var(--color-red-700);\n }\n\n .text-slate-50 {\n color: var(--color-slate-50);\n }\n\n .text-slate-600 {\n color: var(--color-slate-600);\n }\n\n .text-yellow-500 {\n color: var(--color-yellow-500);\n }\n\n .italic {\n font-style: italic;\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .duration-400 {\n --tw-duration: .4s;\n transition-duration: .4s;\n }\n\n .ease-in {\n --tw-ease: var(--ease-in);\n transition-timing-function: var(--ease-in);\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n @media (hover: hover) {\n .hover\\:border-blue-600:hover {\n border-color: var(--color-blue-600);\n }\n\n .hover\\:border-red-600:hover {\n border-color: var(--color-red-600);\n }\n\n .hover\\:bg-gray-200:hover {\n background-color: var(--color-gray-200);\n }\n\n .hover\\:bg-transparent:hover {\n background-color: #0000;\n }\n\n .hover\\:text-blue-700:hover {\n color: var(--color-blue-700);\n }\n\n .hover\\:text-gray-800:hover {\n color: var(--color-gray-800);\n }\n\n .hover\\:text-red-700:hover {\n color: var(--color-red-700);\n }\n\n .hover\\:opacity-60:hover {\n opacity: .6;\n }\n\n .hover\\:shadow-none:hover {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus\\:ring-2:focus {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .focus\\:ring-blue-500:focus {\n --tw-ring-color: var(--color-blue-500);\n }\n\n .focus\\:outline-none:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n\n .disabled\\:shadow-none:disabled {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n @media (width >= 40rem) {\n .sm\\:grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n }\n\n @media (width >= 48rem) {\n .md\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n\n @media (width >= 64rem) {\n .lg\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n @media (width >= 80rem) {\n .xl\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n }\n\n .dark\\:border-blue-500:where(.dark, .dark *) {\n border-color: var(--color-blue-500);\n }\n\n .dark\\:border-gray-600:where(.dark, .dark *) {\n border-color: var(--color-gray-600);\n }\n\n .dark\\:border-gray-700:where(.dark, .dark *) {\n border-color: var(--color-gray-700);\n }\n\n .dark\\:bg-gray-700:where(.dark, .dark *) {\n background-color: var(--color-gray-700);\n }\n\n .dark\\:bg-gray-800:where(.dark, .dark *) {\n background-color: var(--color-gray-800);\n }\n\n .dark\\:bg-gray-900:where(.dark, .dark *) {\n background-color: var(--color-gray-900);\n }\n\n .dark\\:text-blue-400:where(.dark, .dark *) {\n color: var(--color-blue-400);\n }\n\n .dark\\:text-gray-100:where(.dark, .dark *) {\n color: var(--color-gray-100);\n }\n\n .dark\\:text-gray-300:where(.dark, .dark *) {\n color: var(--color-gray-300);\n }\n\n .dark\\:text-gray-400:where(.dark, .dark *) {\n color: var(--color-gray-400);\n }\n\n .dark\\:text-slate-400:where(.dark, .dark *) {\n color: var(--color-slate-400);\n }\n\n @media (hover: hover) {\n .dark\\:hover\\:bg-gray-700:where(.dark, .dark *):hover {\n background-color: var(--color-gray-700);\n }\n\n .dark\\:hover\\:text-gray-200:where(.dark, .dark *):hover {\n color: var(--color-gray-200);\n }\n }\n}\n\n::-webkit-scrollbar {\n background: #f7f7f8;\n width: 8px;\n height: 8px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #ebecee;\n border-radius: 10px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #d7d9dc;\n}\n\n.dark ::-webkit-scrollbar {\n background: #192033;\n width: 8px;\n height: 8px;\n}\n\n.dark ::-webkit-scrollbar-corner {\n background: #192033;\n}\n\n.dark ::-webkit-scrollbar-thumb {\n background: #272e40;\n border-radius: 10px;\n}\n\n.dark ::-webkit-scrollbar-thumb:hover {\n background: #3f4555;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: rotateX(0);\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: rotateY(0);\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: rotateZ(0);\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n initial-value: skewX(0);\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n initial-value: skewY(0);\n}\n\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: \"\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: \"\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: \"\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-duration {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: \"*\";\n inherits: false\n}",[],[199,424],[199],{"_103":432,"_95":433,"_157":434,"_159":-5,"_160":139,"_161":162,"_163":164,"_105":435,"_99":32,"_166":402,"_168":436,"_169":22,"_170":-5,"_171":437,"_98":438},"ae03572a-7628-11f0-81c8-0224a6c84d84",".vtignore","019895ac-4cfc-7302-8b2b-d0bc977a1846",["D",1754857753803],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[433],{"_103":440,"_95":441,"_157":442,"_159":-5,"_160":139,"_161":162,"_163":164,"_105":443,"_99":32,"_166":402,"_168":444,"_169":22,"_170":-5,"_171":445,"_98":446},"ae035838-7628-11f0-81c8-0224a6c84d84","README.md","019895ac-4cfc-7302-8b2b-d46c6f286bcd",["D",1754857753803],"# Sistema de Gestión de Tickets 🎟️\n\nEsta es una aplicación web de gestión de tickets desarrollada con **React** en\nel frontend. Permite a los usuarios visualizar, crear, editar y eliminar tickets\nde soporte, incidentes o solicitudes. La aplicación se conecta a una API REST\npersonalizada para gestionar los datos de los tickets.\n\n![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/ec47bb27-47bb-415d-d179-4b1195a13400/public)\n\n## Características Principales ⚙️\n\n- **Visualización de Tickets:** Muestra una lista de todos los tickets\n existentes con su estado, prioridad y detalles.\n- **Creación de Tickets:** Permite a los usuarios generar nuevos tickets,\n especificando su tipo, descripción y prioridad.\n- **Edición de Tickets:** Los usuarios con permisos pueden modificar los\n detalles de un ticket existente, como el estado o la descripción.\n- **Gestión de Estados:** Cada ticket tiene un estado (`Abierto`, `En Progreso`,\n `Resuelto`) que puede ser actualizado fácilmente.\n- **API REST:** El frontend se comunica con una API RESTful para realizar\n operaciones CRUD (Crear, Leer, Actualizar, Eliminar) sobre los tickets.\n\n---\n\n## Tecnologías Utilizadas 💻\n\n- **Frontend:**\n - **React:** Para construir la interfaz de usuario.\n - **Fetch:** Para realizar las peticiones HTTP a la API.\n\n---\n\n## Uso de la Aplicación 🧑‍💻\n\n- **Ver Tickets:** Al cargar la página principal, verás una cuadrícula con todos\n los tickets existentes.\n- **Crear un Ticket:** (Implementa esta sección si existe un formulario de\n creación).\n- **Editar/Eliminar:** Usa los botones **Editar** y **Eliminar** en cada tarjeta\n de ticket para gestionar su contenido.\n\n---\n\n## Contribuciones 🤝\n\n¡Las contribuciones son bienvenidas\\! Si encuentras un error o tienes una idea\npara mejorar la aplicación, por favor, abre un **issue** o envía un **pull\nrequest**.\n\n---\n\n## Licencia 📄\n\nEste proyecto está bajo la Licencia **MIT**. Consulta el archivo `LICENSE` para\nmás detalles.",[],[441],{"_103":448,"_95":449,"_157":450,"_159":-5,"_160":139,"_161":451,"_163":164,"_105":452,"_99":453,"_166":402,"_168":454,"_169":22,"_170":-5,"_171":455,"_98":456},"05824680-762b-11f0-a433-0224a6c84d84","deno.json","019895ac-4cfc-7302-8b2b-d83ff0537ee1",14,["D",1754858759645],2,"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[449],"files",[154,174,181,187,197,203,209,215,224,232,240,248,257,263,271,278,287,293,302,308,317,323,331,339,347,356,362,370,378,387,397,406,414,422,431,439,447],"counts",{"_461":32,"_462":162,"_463":32,"_464":32},"pulls","branches","forks","envVars","contents",[467,470,473,476,479,482,485],{"_103":155,"_95":156,"_157":158,"_159":-5,"_160":139,"_161":162,"_163":164,"_105":468,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":469},["D",1754857753803],[156],{"_103":175,"_95":176,"_157":177,"_159":-5,"_160":139,"_161":162,"_163":164,"_105":471,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":472},["D",1754857753803],[176],{"_103":182,"_95":183,"_157":184,"_159":-5,"_160":139,"_161":162,"_163":164,"_105":474,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":475},["D",1754857753803],[183],{"_103":198,"_95":199,"_157":200,"_159":-5,"_160":139,"_161":162,"_163":164,"_105":477,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":478},["D",1754857753803],[199],{"_103":432,"_95":433,"_157":434,"_159":-5,"_160":139,"_161":162,"_163":164,"_105":480,"_99":32,"_166":402,"_168":436,"_169":22,"_170":-5,"_98":481},["D",1754857753803],[433],{"_103":440,"_95":441,"_157":442,"_159":-5,"_160":139,"_161":162,"_163":164,"_105":483,"_99":32,"_166":402,"_168":444,"_169":22,"_170":-5,"_98":484},["D",1754857753803],[441],{"_103":448,"_95":449,"_157":450,"_159":-5,"_160":139,"_161":451,"_163":164,"_105":486,"_99":453,"_166":402,"_168":454,"_169":22,"_170":-5,"_98":487},["D",1754858759645],[449],"upstreamProject",{"_103":147,"_95":490,"_111":491,"_113":492,"_109":110,"_23":493},"Tickets","Editor de tickets básico","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/797810df-c904-439b-67a6-785702ce8e00/square512",{"_93":94,"_131":132},"upstreamBranch",{"_103":142,"_105":496,"_497":498,"_95":43,"_140":147,"_99":144,"_141":499,"_143":500,"_501":502,"_107":-5,"_151":22,"_109":110,"_150":94,"_16":120,"_149":490},["D",1752143270430],"updatedAt",["D",1754856881356],"961078ea-f528-11ef-aa68-569c3dd06744",67,"lockfileKey","1754856977328-esm.town_v_n4k0m3_Tickets@263-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_101":509,"_99":100,"_514":515},{"_103":104,"_95":96,"_105":510,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":114,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":511,"_133":512,"_136":513,"_151":22},["D",1754857753803],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":138,"_95":43,"_103":139,"_140":104,"_141":142,"_143":144,"_145":110,"_146":147,"_148":120,"_149":96,"_150":94},"changes",[516],{"_402":517,"_519":520,"_98":522},{"_157":390,"_95":389,"_166":220,"_168":393,"_105":518,"_161":100,"_160":139},["D",1754859899222],"previous",{"_157":390,"_95":389,"_166":220,"_168":521},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useState, useEffect} from \"https://esm.sh/react@18.2.0\";\nimport { createPortal } from \"https://esm.sh/react-dom@18.2.0\";\nimport DOMPurify from \"https://esm.sh/dompurify@2.4.0\";\n\nimport {\n XMarkIcon,\n PlusIcon,\n Cog6ToothIcon,\n PencilIcon,\n DocumentDuplicateIcon,\n TrashIcon,\n SunIcon,\n MoonIcon,\n EllipsisVerticalIcon,\n} from \"./common/icons.jsx\";\n\n\n// Configuración\nconst SNIPPETSCONFIG = \"snippetsConfig\";\nconst SNIPPETSTHEME = \"snippetstheme\";\nconst SNIPPETSLANG = \"shippetslanguage\";\n\n// Objeto de localización\nconst lang = {\n es: {\n api_error_config:\n \"API URL o Token no configurados. Por favor, revisa tus ajustes.\",\n decode_error: \"[El contenido no pudo ser decodificado]\",\n loading_snippets: \"Cargando snippets...\",\n loading_all_snippets: \"Cargando todos los snippets...\",\n notification_config_info:\n \"Por favor, configura la URL y el Token de la API en 'Ajustes'.\",\n notification_snippets_loaded_success: \"Snippets cargados exitosamente.\",\n notification_no_snippets_found_warning: \"No se encontraron snippets.\",\n notification_load_error: \"Error al cargar los snippets. Revisa la consola.\",\n notification_config_save_success: \"Configuración guardada exitosamente.\",\n notification_snippet_updated_success: \"Snippet actualizado con éxito.\",\n notification_snippet_created_success: \"Snippet creado con éxito.\",\n notification_snippet_save_error: \"Error al guardar el snippet: \",\n notification_snippet_deleted_success: \"Snippet eliminado con éxito.\",\n notification_snippet_delete_error: \"Error al eliminar el snippet: \",\n notification_token_applied_success: \"Token generado y aplicado.\",\n confirm_delete_title: \"Confirmar Eliminación\",\n confirm_delete_message:\n '¿Estás seguro de que quieres eliminar el snippet \"',\n confirm_delete_snippet_name: \"{snippet.title}\",\n confirm_delete_button_cancel: \"Cancelar\",\n confirm_delete_button_confirm: \"Eliminar\",\n generate_token_title: \"Generar Token de API\",\n generate_token_user_label: \"Usuario:\",\n generate_token_password_label: \"Contraseña:\",\n generate_token_role_label: \"Rol:\",\n generate_token_button_close: \"Cerrar\",\n generate_token_button_generate: \"Generar y Aplicar\",\n generate_token_button_generating: \"Generando...\",\n app_title: \"Snippets App\",\n app_search_placeholder: \"Buscar snippets...\",\n app_filter_all: \"Todas las categorías\",\n app_new_snippet_button: \"Nuevo Snippet\",\n snippet_card_options: \"Opciones\",\n snippet_card_category_label: \"Categoría:\",\n snippet_card_edit_button: \"Editar\",\n snippet_card_clone_button: \"Clonar\",\n snippet_card_delete_button: \"Eliminar\",\n snippet_form_edit_title: \"Editar Snippet\",\n snippet_form_create_title: \"Crear Snippet\",\n snippet_form_title_label: \"Título\",\n snippet_form_description_label: \"Descripción\",\n snippet_form_category_label: \"Categoría\",\n snippet_form_content_label: \"Contenido\",\n snippet_form_button_cancel: \"Cancelar\",\n snippet_form_button_save: \"Guardar Snippet\",\n snippet_form_button_saving: \"Guardando...\",\n snippet_detail_back_button: \"Volver a la lista\",\n no_snippets_found_title: \"No se encontraron snippets.\",\n no_snippets_found_message:\n \"Puedes crear uno nuevo usando el botón en el menú lateral.\",\n settings_title: \"Ajustes\",\n settings_api_url_label: \"URL de la API\",\n settings_api_token_label: \"Token de la API\",\n settings_generate_token_button: \"Generar Token\",\n settings_save_button: \"Guardar\",\n theme_toggle_label: \"Cambiar tema\",\n language_label: \"Idioma\",\n language_button_label: \"Cambiar Idioma\",\n title_my_snippets: \"Mis Snippets\",\n },\n en: {\n api_error_config:\n \"API URL or Token not configured. Please check your settings.\",\n decode_error: \"[Content could not be decoded]\",\n loading_snippets: \"Loading snippets...\",\n loading_all_snippets: \"Loading all snippets...\",\n notification_config_info:\n \"Please configure the API URL and Token in 'Settings'.\",\n notification_snippets_loaded_success: \"Snippets loaded successfully.\",\n notification_no_snippets_found_warning: \"No snippets found.\",\n notification_load_error: \"Error loading snippets. Check the console.\",\n notification_config_save_success: \"Configuration saved successfully.\",\n notification_snippet_updated_success: \"Snippet updated successfully.\",\n notification_snippet_created_success: \"Snippet created successfully.\",\n notification_snippet_save_error: \"Error saving snippet: \",\n notification_snippet_deleted_success: \"Snippet deleted successfully.\",\n notification_snippet_delete_error: \"Error deleting snippet: \",\n notification_token_applied_success: \"Token generated and applied.\",\n confirm_delete_title: \"Confirm Deletion\",\n confirm_delete_message: 'Are you sure you want to delete the snippet \"',\n confirm_delete_snippet_name: \"{snippet.title}\",\n confirm_delete_button_cancel: \"Cancel\",\n confirm_delete_button_confirm: \"Delete\",\n generate_token_title: \"Generate API Token\",\n generate_token_user_label: \"User:\",\n generate_token_password_label: \"Password:\",\n generate_token_role_label: \"Role:\",\n generate_token_button_close: \"Close\",\n generate_token_button_generate: \"Generate and Apply\",\n generate_token_button_generating: \"Generating...\",\n app_title: \"Snippets App\",\n app_search_placeholder: \"Search snippets...\",\n app_filter_all: \"All categories\",\n app_new_snippet_button: \"New Snippet\",\n snippet_card_options: \"Options\",\n snippet_card_category_label: \"Category:\",\n snippet_card_edit_button: \"Edit\",\n snippet_card_clone_button: \"Clone\",\n snippet_card_delete_button: \"Delete\",\n snippet_form_edit_title: \"Edit Snippet\",\n snippet_form_create_title: \"Create Snippet\",\n snippet_form_title_label: \"Title\",\n snippet_form_description_label: \"Description\",\n snippet_form_category_label: \"Category\",\n snippet_form_content_label: \"Content\",\n snippet_form_button_cancel: \"Cancel\",\n snippet_form_button_save: \"Save Snippet\",\n snippet_form_button_saving: \"Saving...\",\n snippet_detail_back_button: \"Back to list\",\n no_snippets_found_title: \"No snippets found.\",\n no_snippets_found_message:\n \"You can create a new one using the button in the side menu.\",\n settings_title: \"Settings\",\n settings_api_url_label: \"API URL\",\n settings_api_token_label: \"API Token\",\n settings_generate_token_button: \"Generate Token\",\n settings_save_button: \"Save\",\n theme_toggle_label: \"Change theme\",\n language_label: \"Language\",\n language_button_label: \"Change Language\",\n title_my_snippets: \"My Snippets\",\n },\n jp: {\n api_error_config:\n \"APIのURLまたはトークンが設定されていません。設定を確認してください。\",\n decode_error: \"[コンテンツをデコードできませんでした]\",\n loading_snippets: \"スニペットを読み込み中...\",\n loading_all_snippets: \"すべてのスニペットを読み込み中...\",\n notification_config_info:\n \"「設定」でAPIのURLとトークンを設定してください。\",\n notification_snippets_loaded_success:\n \"スニペットが正常に読み込まれました。\",\n notification_no_snippets_found_warning:\n \"スニペットが見つかりませんでした。\",\n notification_load_error:\n \"スニペットの読み込み中にエラーが発生しました。コンソールを確認してください。\",\n notification_config_save_success: \"設定が正常に保存されました。\",\n notification_snippet_updated_success: \"スニペットが正常に更新されました。\",\n notification_snippet_created_success: \"スニペットが正常に作成されました。\",\n notification_snippet_save_error:\n \"スニペットの保存中にエラーが発生しました: \",\n notification_snippet_deleted_success: \"スニペットが正常に削除されました。\",\n notification_snippet_delete_error:\n \"スニペットの削除中にエラーが発生しました: \",\n notification_token_applied_success: \"トークンが生成され、適用されました。\",\n confirm_delete_title: \"削除の確認\",\n confirm_delete_message: \"スニペット「\",\n confirm_delete_snippet_name: \"{snippet.title}\",\n confirm_delete_message_end: \"」を削除してもよろしいですか？\",\n confirm_delete_button_cancel: \"キャンセル\",\n confirm_delete_button_confirm: \"削除\",\n generate_token_title: \"APIトークンの生成\",\n generate_token_user_label: \"ユーザー:\",\n generate_token_password_label: \"パスワード:\",\n generate_token_role_label: \"役割:\",\n generate_token_button_close: \"閉じる\",\n generate_token_button_generate: \"生成して適用\",\n generate_token_button_generating: \"生成中...\",\n app_title: \"スニペットアプリ\",\n app_search_placeholder: \"スニペットを検索...\",\n app_filter_all: \"すべてのカテゴリ\",\n app_new_snippet_button: \"新しいスニペット\",\n snippet_card_options: \"オプション\",\n snippet_card_category_label: \"カテゴリ:\",\n snippet_card_edit_button: \"編集\",\n snippet_card_clone_button: \"クローン\",\n snippet_card_delete_button: \"削除\",\n snippet_form_edit_title: \"スニペットを編集\",\n snippet_form_create_title: \"スニペットを作成\",\n snippet_form_title_label: \"タイトル\",\n snippet_form_description_label: \"説明\",\n snippet_form_category_label: \"カテゴリ\",\n snippet_form_content_label: \"コンテンツ\",\n snippet_form_button_cancel: \"キャンセル\",\n snippet_form_button_save: \"スニペットを保存\",\n snippet_form_button_saving: \"保存中...\",\n snippet_detail_back_button: \"リストに戻る\",\n no_snippets_found_title: \"スニペットが見つかりませんでした。\",\n no_snippets_found_message:\n \"サイドメニューのボタンを使って新しいものを作成できます。\",\n settings_title: \"設定\",\n settings_api_url_label: \"API URL\",\n settings_api_token_label: \"APIトークン\",\n settings_generate_token_button: \"トークンを生成\",\n settings_save_button: \"保存\",\n theme_toggle_label: \"テーマを変更\",\n language_label: \"言語\",\n language_button_label: \"言語を変更\",\n title_my_snippets: \"私のスニペット\",\n },\n};\n\n// Helper functions for the app\nconst StringUtils = {\n sanitize(text) {\n return DOMPurify.sanitize(text, { USE_PROFILES: { html: false } });\n },\n encode(t) {\n if (!t) return \"\";\n return btoa(\n encodeURIComponent(t).replace(\n /%([0-9A-F]{2})/g,\n (e, o) => String.fromCharCode(\"0x\" + o),\n ),\n );\n },\n decode(t) {\n try {\n return decodeURIComponent(\n atob(t)\n .split(\"\")\n .map((e) => \"%\" + (\"00\" + e.charCodeAt(0).toString(16)).slice(-2))\n .join(\"\"),\n );\n } catch (e) {\n return (\n console.error(\"Error al decodificar la cadena Base64:\", e),\n lang.es.decode_error\n );\n }\n },\n};\n\nconst StorageUtils = {\n save(key, value) {\n try {\n localStorage.setItem(key, JSON.stringify(value));\n } catch (e) {\n console.error(\"Error saving to localStorage\", e);\n }\n },\n get(key) {\n try {\n const value = localStorage.getItem(key);\n return value ? JSON.parse(value) : null;\n } catch (e) {\n console.error(\"Error getting from localStorage\", e);\n return null;\n }\n },\n};\n\n// Notification component for displaying messages\nconst Notification = ({ message, type, onClose }) => {\n const [isVisible, setIsVisible] = useState(true);\n // Auto-close after 2 seconds\n useEffect(() => {\n const timer = setTimeout(() => {\n setIsVisible(false);\n onClose(); // Call the parent's onClose to remove from state\n }, 3000);\n return () => clearTimeout(timer);\n }, [onClose]);\n\n if (!isVisible) return null;\n\n const baseClasses =\n \"p-4 rounded-lg shadow-xl text-white font-medium mb-2 animate-slideIn\";\n let colorClasses = \"\";\n let icon = \"\";\n\n switch (type) {\n case \"info\":\n colorClasses = \"bg-blue-600\";\n icon = (\n \n \n \n );\n break;\n case \"success\":\n colorClasses = \"bg-emerald-600\";\n icon = (\n \n \n \n );\n break;\n case \"warning\":\n colorClasses = \"bg-amber-500\";\n icon = (\n \n \n \n );\n break;\n case \"error\":\n colorClasses = \"bg-rose-600\";\n icon = (\n \n \n \n );\n break;\n default:\n colorClasses = \"bg-gray-700\";\n icon = (\n \n \n \n );\n }\n\n return (\n

\n {icon}\n {message}\n {\n setIsVisible(false);\n onClose();\n }}\n className=\"ml-4 p-1 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors\"\n >\n \n \n \n \n

\n {language.confirm_delete_title}\n

\n {language.confirm_delete_message}\n {snippet.title}\n {language.confirm_delete_message_end\n ? language.confirm_delete_message_end\n : \"?\"}\n

\n {language.generate_token_title}\n

\n \n

\n {snippet.title}\n

\n {\n e.stopPropagation();\n setSnippetToEdit(snippet);\n setShowDropdown(false);\n }}\n className=\"cursor-pointer flex items-center px-4 py-2 text-sm hover:bg-indigo-50 dark:hover:bg-gray-700 w-full text-left\"\n >\n \n \n \n \n {language.snippet_card_edit_button}\n \n \n
\n {\n e.stopPropagation();\n setSnippetToEdit({\n ...snippet,\n uid: null,\n title:\n `${language.snippet_card_clone_button} de ${snippet.title}`,\n });\n setShowDropdown(false);\n }}\n className=\"cursor-pointer flex items-center px-4 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 w-full text-left\"\n >\n \n \n \n \n {language.snippet_card_clone_button}\n \n \n
\n {\n e.stopPropagation();\n setSnippetToDelete(snippet);\n setShowConfirmDelete(true);\n setShowDropdown(false);\n }}\n className=\"cursor-pointer flex items-center px-4 py-2 text-sm hover:bg-rose-50 dark:hover:bg-gray-700 w-full text-left\"\n >\n \n \n \n \n {language.snippet_card_delete_button}\n \n \n

\n )}\n

\n {snippet.category && (\n \n \n {language.snippet_card_category_label}\n \n \n {snippet.category}\n \n \n )}\n \n

\n {initialData.uid\n ? language.snippet_form_edit_title\n : language.snippet_form_create_title}\n

\n \n \n \n

\n \n {language.snippet_form_title_label}\n \n \n

\n \n {language.snippet_form_description_label}\n \n \n \n

\n \n {language.snippet_form_category_label}\n \n \n

\n \n {language.snippet_form_content_label}\n \n \n \n

\n \n {language.snippet_form_button_cancel}\n \n \n {formLoading\n ? language.snippet_form_button_saving\n : language.snippet_form_button_save}\n \n

\n );\n };\n\n return (\n

\n {/* Sidebar */}\n

\n {language.app_title}\n

\n {loading && language.loading_snippets}\n

\n {/* Main Content */}\n

\n {currentSnippet\n ? (\n

\n {currentSnippet.title}\n

\n {currentSnippet.category && (\n \n {language.snippet_card_category_label}{\" \"}\n {currentSnippet.category}\n \n )}\n

{currentSnippet.description}

\n                  {currentSnippet.content}\n

\n )\n : (\n

\n {language.title_my_snippets}\n

\n {loading && (\n

\n {language.loading_all_snippets}\n

\n )}\n {!loading && filteredSnippets.length === 0\n ? (\n

\n {language.no_snippets_found_title}\n

\n {language.no_snippets_found_message}\n

\n )\n : (\n

\n {filteredSnippets.map((snippet) => (\n \n ))}\n

\n )}\n

\n\n {/* Modals and Notifications */}\n {showConfig &&\n createPortal(\n

\n {language.settings_title}\n

\n setShowConfig(false)}\n className=\"cursor-pointer p-2 rounded-full text-rose-600 hover:bg-rose-100 dark:hover:bg-gray-700 transition-colors\"\n >\n \n \n

\n \n {language.language_label}\n \n \n \n \n \n \n

\n \n {language.settings_save_button}\n \n

\n {notifications.map((notification) => (\n closeNotification(notification.id)}\n />\n ))}\n

,\n document.body,\n )}\n

\n );\n}\n\nexport default App;","frontend/components/App.jsx","actionData","errors"]