{title}

{value}

\n );\n}\n\nfunction DeliveryCalendar({ days }) {\n const getCurrentWeekDays = () => {\n const today = new Date();\n const currentDay = today.getDay();\n const firstDayOfWeek = new Date(today);\n firstDayOfWeek.setDate(today.getDate() - currentDay);\n \n return Array.from({ length: 7 }, (_, i) => {\n const date = new Date(firstDayOfWeek);\n date.setDate(firstDayOfWeek.getDate() + i);\n return {\n dayName: new Intl.DateTimeFormat(\"pt-BR\", { weekday: \"short\" })\n .format(date)\n .charAt(0)\n .toUpperCase(),\n date: date.getDate(),\n isActive: days.includes(i)\n };\n });\n };\n\n const weekDays = getCurrentWeekDays();\n\n return (\n

\n {weekDays.map((day, index) => (\n

\n {day.date}\n \n {day.dayName}\n \n

\n ))}\n

\n );\n}\n\nfunction ActionButton({ icon, onClick, type, tooltip }) {\n if (!ActionIcons[type]) {\n console.error(`Icon type \"${type}\" not found`);\n return null;\n }\n\n return (\n \n );\n}\n\nfunction WhatsAppCell({ number }) {\n const linkNumber = number.replace(/\\D/g, '');\n \n return (\n

\n \n {ActionIcons.whatsapp}\n \n {formatPhoneNumber(number)}\n

\n );\n}\n\nconst tableHeaders = [\n { id: 'photo', label: 'Foto' },\n { id: 'name', label: 'Nome' },\n { id: 'company', label: 'Empresa' },\n { id: 'whatsapp', label: 'WhatsApp' },\n { id: 'delivery', label: 'Entrega' },\n { id: 'actions', label: 'Ações' }\n];\n\nfunction Dashboard() {\n const [data, setData] = useState(mockData);\n const [loading, setLoading] = useState(true);\n const [notification, setNotification] = useState(null);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setData(prevData => ({\n ...prevData,\n lastQuote: new Date(),\n lastSavings: prevData.lastSavings + Math.random() * 100,\n totalSavings: prevData.totalSavings + Math.random() * 500,\n }));\n }, 5000);\n\n const timeout = setTimeout(() => setLoading(false), 1500);\n\n return () => {\n clearInterval(interval);\n clearTimeout(timeout);\n };\n }, []);\n\n const showNotification = (message, type = 'info') => {\n setNotification({ message, type });\n setTimeout(() => setNotification(null), 3000);\n };\n\n const handleDelete = (sellerName) => {\n if (window.confirm(`Tem certeza que deseja excluir ${sellerName}?`)) {\n showNotification(`Deletando ${sellerName}`, 'success');\n }\n };\n\n if (loading) {\n return (\n

Dashboard

\n {[1, 2, 3, 4].map((i) => (\n

\n ))}\n

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

Dashboard

\n \n

\n \n \n \n

\n \n

\n \n \n \n {tableHeaders.map((header) => (\n \n ))}\n \n \n \n {data.sellers.map((seller) => (\n \n \n \n \n \n \n \n \n ))}\n \n

{header.label}
\n {seller.photo ? (\n \n ) : (\n \n {seller.name.charAt(0)}\n \n )}\n	{seller.name}	{seller.company}	\n \n	\n \n	\n showNotification(`Editando ${seller.name}`, 'info')} \n type=\"edit\"\n tooltip=\"Editar\"\n />\n handleDelete(seller.name)} \n type=\"delete\"\n tooltip=\"Excluir\"\n />\n

\n\n {notification && (\n

\n {notification.message}\n

\n )}\n

\n );\n}\n\nfunction App() {\n return ;\n}\n\nfunction client() {\n if (typeof document !== \"undefined\") {\n try {\n createRoot(document.getElementById(\"root\")).render();\n } catch (error) {\n console.error(\"Erro ao renderizar o componente:\", error);\n }\n }\n}\n\nclient();\n\nexport default async function server(request: Request): Promise {\n const css = `\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');\n\n :root {\n --text-primary: #333333;\n --text-secondary: #6c757d;\n --primary-color: #4a90e2;\n --success-color: #2ecc71;\n --danger-color: #ef4444;\n --whatsapp-color: #25D366;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n margin: 0;\n padding: 0;\n position: relative;\n background: linear-gradient(\n to bottom,\n var(--primary-color) 0%,\n var(--primary-color) 40%,\n #f8fafc 40%,\n #f8fafc 100%\n );\n min-height: 100vh;\n }\n\n body::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: url(\"data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n opacity: 0.1;\n pointer-events: none;\n }\n\n .dashboard-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem;\n position: relative;\n z-index: 1;\n }\n\n .dashboard-title {\n font-size: 2rem;\n color: #ffffff;\n font-weight: 500;\n margin-bottom: 2rem;\n background: none;\n -webkit-text-fill-color: initial;\n }\n\n .dashboard-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 24px;\n margin: 24px 0;\n }\n\n .stat-card {\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.2s, box-shadow 0.2s;\n }\n\n .stat-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n }\n\n .stat-card h3 {\n color: var(--text-primary);\n font-size: 1rem;\n margin-bottom: 1rem;\n }\n\n .stat-value {\n font-family: 'Inter', sans-serif;\n font-weight: 700;\n font-size: 1.5em;\n line-height: 1.2;\n letter-spacing: -0.02em;\n }\n\n .stat-value.date { color: var(--primary-color); }\n .stat-value.savings { color: var(--success-color); }\n .stat-value.total { color: #9b59b6; }\n\n .table-container {\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n padding: 24px;\n margin-top: 2rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n overflow-x: auto;\n }\n\n .table-container table {\n border-spacing: 0;\n width: 100%;\n }\n\n .table-container th,\n .table-container td {\n padding: 12px 16px;\n text-align: left;\n vertical-align: middle;\n }\n\n .table-container th {\n font-weight: 500;\n color: var(--text-secondary);\n text-transform: uppercase;\n font-size: 12px;\n letter-spacing: 0.5px;\n }\n\n .table-row {\n transition: background-color 0.3s;\n border-bottom: 1px solid rgba(0,0,0,0.05);\n }\n\n .table-row:hover {\n background: rgba(74, 144, 226, 0.05);\n }\n\n .action-button {\n padding: 6px 12px;\n font-size: 0.9rem;\n border-radius: 4px;\n font-weight: 500;\n transition: all 0.2s;\n color: white;\n border: none;\n cursor: pointer;\n margin-right: 8px;\n position: relative;\n overflow: hidden;\n }\n\n .action-button::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 5px;\n height: 5px;\n background: rgba(255,255,255,0.5);\n opacity: 0;\n border-radius: 100%;\n transform: scale(1, 1) translate(-50%);\n transform-origin: 50% 50%;\n }\n\n @keyframes ripple {\n 0% {\n transform: scale(0, 0);\n opacity: 1;\n }\n 20% {\n transform: scale(25, 25);\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: scale(40, 40);\n }\n }\n\n .action-button:focus:not(:active)::after {\n animation: ripple 1s ease-out;\n }\n\n .action-button.edit {\n background: var(--primary-color);\n }\n\n .calendar-container {\n display: flex;\n justify-content: space-between;\n gap: 4px;\n }\n\n .calendar-day-column {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n }\n\n .day-number {\n font-size: 12px;\n color: var(--text-secondary);\n margin-bottom: 2px;\n }\n\n .calendar-day {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.9rem;\n background: rgba(240, 240, 240, 0.5);\n color: var(--text-primary);\n transition: all 0.2s;\n }\n\n .calendar-day.active {\n background: var(--primary-color);\n color: white;\n font-weight: 500;\n }\n\n .skeleton {\n background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n }\n\n .loading-skeleton {\n background: linear-gradient(\n 90deg,\n rgba(255,255,255,0.1),\n rgba(255,255,255,0.2),\n rgba(255,255,255,0.1)\n );\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n }\n\n .skeleton-text {\n height: 1em;\n margin-bottom: 0.5em;\n border-radius: 3px;\n }\n\n .skeleton-value {\n height: 2em;\n width: 70%;\n border-radius: 3px;\n }\n\n .skeleton-table {\n height: 200px;\n border-radius: 8px;\n }\n\n @keyframes shimmer {\n to {\n background-position: -200% 0;\n }\n }\n\n .toast-notification {\n position: fixed;\n bottom: 24px;\n right: 24px;\n padding: 16px 24px;\n border-radius: 12px;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: blur(10px);\n box-shadow: 0 4px 20px rgba(0,0,0,0.15);\n transform: translateY(100%);\n animation: slideIn 0.3s forwards;\n }\n\n .toast-notification.info {\n background: rgba(74, 144, 226, 0.9);\n color: white;\n }\n\n .toast-notification.success {\n background: rgba(46, 204, 113, 0.9);\n color: white;\n }\n\n .toast-notification.error {\n background: rgba(231, 76, 60, 0.9);\n color: white;\n }\n\n @keyframes slideIn {\n to {\n transform: translateY(0);\n }\n }\n\n .action-icons {\n display: flex;\n gap: 8px;\n }\n\n .action-btn {\n width: 34px;\n height: 34px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n cursor: pointer;\n transition: all 0.2s;\n background: transparent;\n color: var(--text-primary);\n }\n\n .action-btn.edit {\n color: var(--primary-color);\n }\n\n .action-btn.delete {\n color: var(--danger-color);\n }\n\n .action-btn.edit:hover {\n background: rgba(74, 144, 226, 0.1);\n }\n\n .action-btn.delete:hover {\n background: rgba(239, 68, 68, 0.1);\n }\n\n .action-btn {\n position: relative;\n }\n\n .action-btn::after {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n padding: 4px 8px;\n background: rgba(0,0,0,0.8);\n color: white;\n border-radius: 4px;\n font-size: 12px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s;\n white-space: nowrap;\n }\n\n .action-btn:hover::after {\n opacity: 1;\n }\n\n .seller-avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: #e9ecef;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n color: var(--text-secondary);\n text-transform: uppercase;\n }\n\n .seller-avatar-fallback {\n background: linear-gradient(45deg, var(--primary-color), #63b3ed);\n color: white;\n }\n\n .whatsapp-cell {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .whatsapp-icon-link {\n color: var(--whatsapp-color);\n display: flex;\n align-items: center;\n transition: opacity 0.2s;\n }\n\n .whatsapp-icon-link:hover {\n opacity: 0.8;\n }\n\n .phone-number {\n color: var(--text-primary);\n font-size: 14px;\n }\n\n .whatsapp-icon-link::before {\n content: 'Abrir WhatsApp';\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(0,0,0,0.8);\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s;\n white-space: nowrap;\n }\n\n .whatsapp-icon-link:hover::before {\n opacity: 1;\n }\n\n @media (max-width: 768px) {\n .dashboard-container {\n padding: 1rem;\n }\n\n .dashboard-grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n .table-container {\n padding: 16px;\n margin-top: 1rem;\n }\n\n .calendar-container {\n gap: 2px;\n }\n\n .calendar-day {\n width: 24px;\n height: 24px;\n font-size: 0.8rem;\n }\n\n .phone-number {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .dashboard-title {\n font-size: 1.5rem;\n }\n\n .stat-value {\n font-size: 1.2em;\n }\n\n .table-container th,\n .table-container td {\n padding: 8px;\n }\n }\n `;\n\n return new Response(`\n \n \n \n \n \n Dashboard\n \n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n","deleted","label",[99],"permalink","https://www.val.town/x/daniel1987600/magnificentJadeDonkey/code/main.tsx","extension","actionData","errors"]