Tickets app

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_336":337,"_338":339},"routes/_app.x.$handle.$name",{"_149":148,"_38":92,"_157":135,"_33":158,"_13":14,"_159":-5,"_11":160,"_161":162,"_163":164,"_165":166,"_167":168,"_26":-5,"_169":170,"_171":172,"_173":96,"_174":175,"_176":31,"_177":-5,"_178":-5,"_179":180},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_90":91,"_38":92,"_43":93,"_94":-5,"_95":96,"_97":98,"_99":98,"_100":101,"_102":103,"_18":104,"_105":106,"_107":31,"_108":31,"_109":-5,"_110":111,"_112":113,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_127":128,"_129":130,"_131":132,"_133":96},"version",189,"changes",[19,20,21,22,23,24,25],"aiChatInfo","userId",{"_26":83,"_28":84,"_30":31,"_32":31,"_33":85,"_35":85},{"_26":76,"_28":77,"_30":31,"_32":31,"_33":78,"_35":78},{"_26":69,"_28":70,"_30":31,"_32":31,"_33":71,"_35":71},{"_26":63,"_28":64,"_30":31,"_32":31,"_33":65,"_35":65},{"_26":56,"_28":57,"_30":31,"_32":31,"_33":58,"_35":58},{"_26":48,"_28":49,"_30":31,"_32":31,"_33":50,"_35":50},{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":-5,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":-5},"deleted",true,"deletedHere","path","frontend/components/Common","latestPath","fileId","e95d278a-7617-11f0-9e33-0224a6c84d84","name","Common","fileType","directory","content","createdAt",["D",1754854292530],"branchVersion","branchId","87d46fda-5d78-11f0-87ea-0224a6c84d84",{"_36":51,"_38":52,"_40":53,"_42":54,"_43":55,"_45":14,"_46":47,"_30":31},{"_36":51,"_38":52,"_40":53,"_42":54},"frontend/components/Common/Ui.jsx","e21a4aae-75f2-11f0-a9c2-0224a6c84d84","Ui.jsx","script","/** @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};",["D",1754854292530],{"_36":59,"_38":60,"_40":53,"_42":61,"_43":62,"_45":14,"_46":47,"_30":31},{"_36":59,"_38":60,"_40":53,"_42":61},"frontend/components/Common/Header.jsx","88271dae-7612-11f0-8274-0224a6c84d84","Header.jsx","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nimport {\n Button,\n InputF,\n SelectF,\n} from \"./Ui.jsx\";\nimport { lang } from \"../Config/Lang.jsx\";\nimport { ICONS } from \"../Config/Icons.jsx\";\nimport { TICKET_STATUSES, TICKET_PRIORITIES } from \"../Config/Constants.jsx\"; // Ajusta la ruta a tus constantes\n\nconst Header = ({\n filters,\n setFilters,\n currentLang,\n setLanguage,\n isDarkMode,\n setIsDarkMode,\n setModal,\n}) => {\n return (\n

\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;",["D",1754854292530],{"_36":66,"_38":67,"_40":41,"_42":-5,"_43":68,"_45":14,"_46":47,"_30":31},{"_36":66,"_38":67,"_40":41,"_42":-5},"frontend/components","84d7d19d-6160-421e-9d34-c00181c98389","components",["D",1754854292530],{"_36":72,"_38":73,"_40":53,"_42":74,"_43":75,"_45":14,"_46":47,"_30":31},{"_36":72,"_38":73,"_40":53,"_42":74},"frontend/components/Common/Toast.jsx","75eaf748-75f2-11f0-8cd5-0224a6c84d84","Toast.jsx","/** @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 = `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 =\n 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 =\n ICONS[\n type === \"success\" ? \"checkCircle\" : type === \"error\" ? \"xCircle\" : \"info\"\n ];\n\n return (\n

\n {icon}\n

{message}

\n );\n};",["D",1754854292530],{"_36":79,"_38":80,"_40":53,"_42":81,"_43":82,"_45":14,"_46":47,"_30":31},{"_36":79,"_38":80,"_40":53,"_42":81},"frontend/components/Common/TicketCard.jsx","55f27d46-7613-11f0-a25f-0224a6c84d84","TicketCard.jsx","/** @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;",["D",1754854292530],{"_36":86,"_38":87,"_40":53,"_42":88,"_43":89,"_45":14,"_46":47,"_30":31},{"_36":86,"_38":87,"_40":53,"_42":88},"frontend/components/App.jsx","139c11ea-f2c6-4f9e-9b31-d9593565d5af","App.jsx","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { Toast } from \"./Common/Toast.jsx\";\nimport { lang } from \"./Config/Lang.jsx\";\n// Constants\nimport {\n TICKELANG,\n TICKETHEME,\n TICKETOKEN,\n TICKETURL,\n} from \"./Config/Constants.jsx\";\n\n// Api\nimport { createApi } from \"./Controllers/fetchData.jsx\";\n\n// Status\nimport getStatusClass from './Status/getStatusClass.jsx';\nimport getPriorityClass from './Status/getPriorityClass.jsx';\nimport getStatusTxtClass from './Status/getStatusTxtClass.jsx';\nimport filteredTickets from './Filter/filteredTickets.jsx';\n// Common\nimport Header from './Common/Header.jsx';\nimport TicketCard from './Common/TicketCard.jsx';\n// Modal\nimport NewTicketModal from './Modals/NewTicketModal.jsx';\nimport EditTicketModal from './Modals/EditTicketModal.jsx';\nimport SettingsModal from './Modals/SettingsModal.jsx';\nimport HelpModal from './Modals/HelpModal.jsx';\n\nconst App = () => {\n const [tickets, setTickets] = useState([]);\n\n // Aquí se guardaran los datos de la configuración de la API\n const [apiConfig, setApiConfig] = useState({\n url: localStorage.getItem(TICKETURL) || \"\",\n token: localStorage.getItem(TICKETOKEN) || \"\",\n });\n\n const [isDarkMode, setIsDarkMode] = useState(\n localStorage.getItem(TICKETHEME) === \"dark\",\n );\n\n const [currentLang, setCurrentLang] = useState(\n localStorage.getItem(TICKELANG) || \"es\",\n );\n\n const [filters, setFilters] = useState({\n status: \"Todos\",\n priority: \"Todas\",\n search: \"\",\n });\n\n const [modal, setModal] = useState({ type: null, ticket: null });\n const [loading, setLoading] = useState(false);\n const [toasts, setToasts] = useState([]);\n\n const setLanguage = (lang) => {\n setCurrentLang(lang);\n localStorage.setItem(TICKELANG, lang);\n };\n\n const showToast = (message, type = \"info\") => {\n const newToast = {\n id: Date.now(),\n message,\n type,\n };\n setToasts((prevToasts) => [...prevToasts, newToast]);\n };\n\n const removeToast = (id) => {\n setToasts((prevToasts) => prevToasts.filter((t) => t.id !== id));\n };\n\n // Comprobamos en que modo esta y lo cargamos\n useEffect(() => {\n const root = document.documentElement;\n if (isDarkMode) {\n root.classList.add(\"dark\");\n localStorage.setItem(TICKETHEME, \"dark\");\n } else {\n root.classList.remove(\"dark\");\n localStorage.setItem(TICKETHEME, \"light\");\n }\n }, [isDarkMode]);\n\n // Cargamos los datos\n useEffect(() => {\n fetchTickets();\n }, [apiConfig.url, apiConfig.token]);\n\n const fetchData = useMemo(() => createApi(apiConfig, showToast, lang, currentLang), [apiConfig, showToast, lang, currentLang]);\n \n const fetchTickets = async () => {\n if (!apiConfig.url || !apiConfig.token) return;\n setLoading(true);\n const ticketsUrl =\n `${apiConfig.url}/?method=get&db=tickets&all=all&limit=1000`;\n const response = await fetchData(ticketsUrl);\n if (response && response.CONTENT) {\n const parsedTickets = Object.values(response.CONTENT).map((ticket) => ({\n id: ticket.uid,\n name: ticket.name,\n title: ticket.title,\n description: ticket.description,\n priority: ticket.category,\n status: ticket.content,\n created: ticket.created,\n updated: ticket.updated,\n }));\n setTickets(parsedTickets);\n } else {\n setTickets([]);\n }\n setLoading(false);\n };\n\n const handleAddTicket = async (e) => {\n e.preventDefault();\n const formData = new FormData(e.target);\n const newTicketData = {\n title: formData.get(\"title\"),\n description: formData.get(\"description\"),\n category: formData.get(\"priority\"),\n content: formData.get(\"status\"),\n };\n const addUrl = `${apiConfig.url}/?method=insert&db=tickets`;\n const response = await fetchData(addUrl, \"POST\", newTicketData);\n if (response) {\n showToast(lang[currentLang].ticketAdded, \"success\");\n setModal({ type: null, ticket: null });\n fetchTickets();\n }\n };\n\n const handleUpdateTicket = async (e) => {\n e.preventDefault();\n const formData = new FormData(e.target);\n const ticketId = formData.get(\"id\");\n const ticketName = formData.get(\"name\");\n const updatedTicketData = {\n uid: ticketId,\n name: ticketName,\n title: formData.get(\"title\"),\n description: formData.get(\"description\"),\n category: formData.get(\"priority\"),\n content: formData.get(\"status\"),\n };\n const updateUrl = `${apiConfig.url}/?method=update&db=tickets`;\n const response = await fetchData(updateUrl, \"POST\", updatedTicketData);\n if (response) {\n showToast(lang[currentLang].ticketUpdated, \"success\");\n setModal({ type: null, ticket: null });\n fetchTickets();\n }\n };\n\n const handleDeleteTicket = async (ticket) => {\n if (window.confirm(lang[currentLang].confirmDelete)) {\n const deleteUrl = `${apiConfig.url}/?method=delete&db=tickets`;\n const deleteData = {\n uid: ticket.id,\n name: ticket.name,\n };\n const response = await fetchData(deleteUrl, \"POST\", deleteData);\n if (response) {\n showToast(lang[currentLang].ticketDeleted, \"success\");\n fetchTickets();\n }\n }\n };\n\n const handleUpdateTicketStatus = async (ticket, newStatus) => {\n const updatedTicketData = {\n uid: ticket.id,\n name: ticket.name,\n content: newStatus,\n };\n const updateUrl = `${apiConfig.url}/?method=update&db=tickets`;\n const response = await fetchData(updateUrl, \"POST\", updatedTicketData);\n if (response) {\n showToast(lang[currentLang].statusChanged, \"success\");\n fetchTickets();\n }\n };\n\n const handleSaveApiSettings = () => {\n const newUrl = document.getElementById(\"api-url\").value;\n const newToken = document.getElementById(\"api-token\").value;\n if (newUrl && newToken) {\n localStorage.setItem(TICKETURL, newUrl);\n localStorage.setItem(TICKETOKEN, newToken);\n setApiConfig({ url: newUrl, token: newToken });\n showToast(lang[currentLang].apiSettingsSaved, \"success\");\n setModal({ type: null, ticket: null });\n } else {\n showToast(lang[currentLang].apiSettingsRequired, \"error\");\n }\n };\n\n\n return (\n

\n \n

\n {!loading && filteredTickets(tickets,filters).length === 0 && (\n

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

\n )}\n {!loading ? (\n

\n {filteredTickets(tickets, filters).map((ticket) => (\n setModal({ type: \"editTicket\", ticket: t })}\n onDelete={handleDeleteTicket}\n onStatusChange={handleUpdateTicketStatus}\n />\n ))} \n

\n ) : (\n

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

\n )}\n\n

\n\n {modal.type === \"newTicket\" && (\n setModal({ type: null })}\n onSubmit={handleAddTicket}\n currentLang={currentLang}\n />\n )}\n\n {modal.type === \"editTicket\" && modal.ticket && (\n setModal({ type: null })}\n onSubmit={handleUpdateTicket}\n currentLang={currentLang}\n />\n )}\n\n \n {modal.type === \"settings\" && (\n setModal({ type: null })}\n onSave={handleSaveApiSettings}\n apiConfig={apiConfig}\n currentLang={currentLang}\n />\n )}\n\n \n {modal.type === \"help\" && (\n setModal({ type: null })}\n currentLang={currentLang}\n />\n )}\n\n\n {/* Contenedor para los toasts */}\n

\n {toasts.map((toast) => (\n removeToast(toast.id)}\n />\n ))}\n

\n );\n};\n\nexport default App;",["D",1754854292530],"id","87d1faa2-5d78-11f0-87ea-0224a6c84d84","Tickets",["D",1752143270430],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","Editor de tickets básico","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/797810df-c904-439b-67a6-785702ce8e00/square512?exp=1789559999&sig=1357c9334ccf547f5ce26e8c77a45d4fd3ba545e6672aaa591fb92b1c17c245f","eb08d5b0-4f53-11f0-babe-cd8177b6b491","pinnedFileId","7012e7c6-18fa-48f6-979c-41025514af66","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","375069a8-f47a-45ad-b5f5-b2e2e3cb64da","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_149":148,"_156":152},"org",{"_149":148,"_150":-5,"_151":152,"_18":104,"_153":154,"_155":96},"branch",{"_13":134,"_38":135,"_90":47,"_136":91,"_137":138,"_139":140,"_141":98,"_142":143,"_144":145,"_146":92,"_147":148},"isOwned",269,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",67,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","n4k0m3","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ6QmJQY1E4aW5WbkRzNXBrNmpGRkNtUkdsZSJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_90":91,"_38":92,"_43":332,"_94":-5,"_95":96,"_97":98,"_99":98,"_100":101,"_102":103,"_18":104,"_105":106,"_107":31,"_108":31,"_109":-5,"_110":111,"_112":113,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_127":333,"_129":334,"_131":335,"_133":96},"tree",[257,258,259,261,266,267,268],"files",[257,258,259,260,261,262,263,264,265,266,267,268],"counts",{"_247":111,"_248":215,"_249":215,"_250":251,"_252":253},"contents",[193,194,195,196,197,198,199],"upstreamProject",{"_90":143,"_38":188,"_100":189,"_102":190,"_97":98,"_127":191},"upstreamBranch",{"_90":138,"_43":181,"_182":183,"_38":135,"_136":143,"_13":184,"_137":-5,"_139":-5,"_185":186,"_94":-5,"_133":96,"_97":98,"_147":187,"_112":145,"_146":188},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789559999&sig=919739a563bb9acb90fc6bc4f6c1789207958a7e1bd397d82b192d76e7e11de2",{"_149":187,"_156":192},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789559999&sig=5c07b77d973a9a7831cc1779f4bd4ec152796753863d0aeae4088e1e0ae03921",{"_90":241,"_38":242,"_36":243,"_203":-5,"_46":47,"_45":244,"_205":31,"_43":245,"_13":111,"_40":41,"_42":-5,"_30":96,"_208":-5,"_33":246},{"_90":235,"_38":236,"_36":237,"_203":-5,"_46":47,"_45":238,"_205":31,"_43":239,"_13":111,"_40":41,"_42":-5,"_30":96,"_208":-5,"_33":240},{"_90":230,"_38":231,"_36":232,"_203":-5,"_46":47,"_45":215,"_205":31,"_43":233,"_13":111,"_40":41,"_42":-5,"_30":96,"_208":-5,"_33":234},{"_90":225,"_38":226,"_36":227,"_203":-5,"_46":47,"_45":215,"_205":31,"_43":228,"_13":111,"_40":41,"_42":-5,"_30":96,"_208":-5,"_33":229},{"_90":218,"_38":219,"_36":220,"_203":-5,"_46":47,"_45":221,"_205":31,"_43":222,"_13":111,"_40":26,"_42":223,"_30":96,"_208":-5,"_33":224},{"_90":210,"_38":211,"_36":212,"_203":-5,"_46":47,"_45":213,"_205":96,"_43":214,"_13":215,"_40":26,"_42":216,"_30":96,"_208":-5,"_33":217},{"_90":200,"_38":201,"_36":202,"_203":-5,"_46":47,"_45":204,"_205":31,"_43":206,"_13":111,"_40":26,"_42":207,"_30":96,"_208":-5,"_33":209},"9eb4f1be-7620-11f0-a67a-0224a6c84d84","deno.json","9eb4f416-7620-11f0-a67a-0224a6c84d84","parentId",182,"latest",["D",1754854292209],"{\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}","label",[201],"d3b5d5f0-7610-11f0-8c6f-0224a6c84d84","README.md","b296eaf4-5c75-43f8-a6be-75b53a36e7f4",62,["D",1754847509182],1,"# Sistema de Gestión de Tickets 🎟️\n\nEsta es una aplicación web de gestión de tickets desarrollada con **React** en el frontend. Permite a los usuarios visualizar, crear, editar y eliminar tickets de soporte, incidentes o solicitudes. La aplicación se conecta a una API REST personalizada para gestionar los datos de los tickets.\n\n## Características Principales ⚙️\n\n * **Visualización de Tickets:** Muestra una lista de todos los tickets existentes con su estado, prioridad y detalles.\n * **Creación de Tickets:** Permite a los usuarios generar nuevos tickets, especificando su tipo, descripción y prioridad.\n * **Edición de Tickets:** Los usuarios con permisos pueden modificar los 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`, `Resuelto`) que puede ser actualizado fácilmente.\n * **API REST:** El frontend se comunica con una API RESTful para realizar 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 los tickets existentes.\n * **Crear un Ticket:** (Implementa esta sección si existe un formulario de creación).\n * **Editar/Eliminar:** Usa los botones **Editar** y **Eliminar** en cada tarjeta 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 para mejorar la aplicación, por favor, abre un **issue** o envía un **pull request**.\n\n-----\n\n## Licencia 📄\n\nEste proyecto está bajo la Licencia **MIT**. Consulta el archivo `LICENSE` para más detalles.",[211],"9ebace36-7620-11f0-bae6-0224a6c84d84",".vtignore","9ebacf1c-7620-11f0-bae6-0224a6c84d84",183,["D",1754854292212],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[219],"87d9bdb4-5d78-11f0-87ea-0224a6c84d84","frontend","e9ecb540-ddf3-4dbf-84a8-0912966a6669",["D",1752143270430],[226],"87d9a87e-5d78-11f0-87ea-0224a6c84d84","backend","8769682e-465e-40e3-988f-61b178c122fe",["D",1752143270430],[231],"9db40020-7620-11f0-8bdc-0224a6c84d84",".vt","9db400c0-7620-11f0-8bdc-0224a6c84d84",181,["D",1754854290528],[236],"9d99ac70-7620-11f0-938b-0224a6c84d84",".vscode","9d99ad74-7620-11f0-938b-0224a6c84d84",180,["D",1754854290356],[242],"pulls","branches","forks","envVars",{"_254":111,"_256":111},"connections",{"_254":111,"_255":111},"count","unfilledCount","emptyCount",{"_90":241,"_38":242,"_36":243,"_203":-5,"_46":47,"_45":244,"_205":31,"_43":329,"_13":111,"_40":41,"_42":-5,"_30":96,"_208":-5,"_270":330,"_33":331},{"_90":235,"_38":236,"_36":237,"_203":-5,"_46":47,"_45":238,"_205":31,"_43":326,"_13":111,"_40":41,"_42":-5,"_30":96,"_208":-5,"_270":327,"_33":328},{"_90":230,"_38":231,"_36":232,"_203":-5,"_46":47,"_45":215,"_205":31,"_43":323,"_13":111,"_40":41,"_42":-5,"_30":96,"_208":-5,"_270":324,"_33":325},{"_90":316,"_38":317,"_36":106,"_203":232,"_46":47,"_45":215,"_205":31,"_43":318,"_13":111,"_40":319,"_42":320,"_30":96,"_208":-5,"_270":321,"_33":322},{"_90":225,"_38":226,"_36":227,"_203":-5,"_46":47,"_45":215,"_205":31,"_43":313,"_13":111,"_40":41,"_42":-5,"_30":96,"_208":-5,"_270":314,"_33":315},{"_90":306,"_38":307,"_36":308,"_203":227,"_46":47,"_45":215,"_205":31,"_43":309,"_13":111,"_40":26,"_42":310,"_30":96,"_208":-5,"_270":311,"_33":312},{"_90":297,"_38":298,"_36":299,"_203":227,"_46":47,"_45":300,"_205":31,"_43":301,"_13":302,"_40":26,"_42":303,"_30":96,"_208":-5,"_270":304,"_33":305},{"_90":288,"_38":289,"_36":290,"_203":227,"_46":47,"_45":291,"_205":31,"_43":292,"_13":293,"_40":53,"_42":294,"_30":96,"_208":-5,"_270":295,"_33":296},{"_90":279,"_38":280,"_36":281,"_203":227,"_46":47,"_45":282,"_205":31,"_43":283,"_13":284,"_40":26,"_42":285,"_30":96,"_208":-5,"_270":286,"_33":287},{"_90":218,"_38":219,"_36":220,"_203":-5,"_46":47,"_45":221,"_205":31,"_43":276,"_13":111,"_40":26,"_42":223,"_30":96,"_208":-5,"_270":277,"_33":278},{"_90":210,"_38":211,"_36":212,"_203":-5,"_46":47,"_45":213,"_205":96,"_43":273,"_13":215,"_40":26,"_42":216,"_30":96,"_208":-5,"_270":274,"_33":275},{"_90":200,"_38":201,"_36":202,"_203":-5,"_46":47,"_45":204,"_205":31,"_43":269,"_13":111,"_40":26,"_42":207,"_30":96,"_208":-5,"_270":271,"_33":272},["D",1754854292209],"children",[],[201],["D",1754847509182],[],[211],["D",1754854292212],[],[219],"353e6486-761b-11f0-9158-0224a6c84d84","style.css","2e8bc66d-1328-4b75-8fe0-f6e770e2392a",165,["D",1754851967781],4,"/*! 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}",[],[226,280],"3245de3a-7607-11f0-b36e-0224a6c84d84","index.jsx","ff6d73bb-afdf-46d4-ae4c-6c42a4d47c6f",48,["D",1754843372866],3,"/** @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();",[],[226,289],"f08cad9c-760c-11f0-9dfc-0224a6c84d84","index.html","db02a8a9-1324-431e-93c3-ede5b3e15868",49,["D",1754845839578],2,"\n\n \n \n \n Tickets app\n \n \n \n \n

\n \n \n \n",[],[226,298],"87d9ae14-5d78-11f0-87ea-0224a6c84d84","favicon.svg","e6e85dbb-a7fd-472e-8353-30ea6d81df2a",["D",1752143270430],"\n",[],[226,307],["D",1752143270430],[262,263,264,265],[226],"87d99f78-5d78-11f0-87ea-0224a6c84d84","index.ts",["D",1752143270430],"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[231,317],["D",1752143270430],[260],[231],["D",1754854290528],[],[236],["D",1754854290356],[],[242],["D",1752143270430],{"_149":148,"_156":152},{"_149":148,"_150":-5,"_151":152,"_18":104,"_153":154,"_155":96},{"_13":134,"_38":135,"_90":47,"_136":91,"_137":138,"_139":140,"_141":98,"_142":143,"_144":145,"_146":92,"_147":148},"ctx",{"_127":-5,"_178":369,"_370":371,"_372":373,"_374":96,"_375":96,"_376":96,"_377":31,"_378":-5,"_379":-7,"_380":-7,"_381":111,"_382":96,"_383":96,"_384":-5,"_385":96,"_386":96,"_387":96,"_388":-5},"ENV",{"_340":341,"_342":343,"_344":135,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v189