{title}

{value}

\n );\n}\n\nfunction Dashboard() {\n const [data, setData] = useState({\n lastQuote: new Date(),\n lastSavings: 500,\n totalSavings: 5000,\n sellers: [\n {\n id: 1,\n name: 'João Silva',\n company: 'Tech Solutions',\n whatsapp: '11999999999',\n photo: null,\n deliveryDays: 5\n },\n {\n id: 2,\n name: 'Maria Souza',\n company: 'Innovations Ltd',\n whatsapp: '11988888888',\n photo: null,\n deliveryDays: 3\n }\n ]\n });\n const [loading, setLoading] = useState(true);\n const [searchTerm, setSearchTerm] = useState('');\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 filteredSellers = useMemo(() => {\n if (!searchTerm) return data.sellers;\n\n const normalizedSearchTerm = searchTerm.toLowerCase();\n return data.sellers.filter(seller => \n seller.name.toLowerCase().includes(normalizedSearchTerm) ||\n seller.company.toLowerCase().includes(normalizedSearchTerm) ||\n seller.whatsapp.toLowerCase().includes(normalizedSearchTerm)\n );\n }, [data.sellers, searchTerm]);\n\n const handleSearchChange = (event) => {\n setSearchTerm(event.target.value);\n };\n\n const handleDelete = (sellerName) => {\n if (window.confirm(`Tem certeza que deseja excluir ${sellerName}?`)) {\n console.log(`Deletando ${sellerName}`);\n }\n };\n\n if (loading) {\n return (\n

Dashboard

Carregando...

\n );\n }\n\n return (\n <>\n

Dashboard

\n \n \n \n

\n \n

\n\n

\n \n \n

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n {filteredSellers.map((seller) => (\n \n \n \n \n \n \n \n \n ))}\n \n

Foto	Nome	Empresa	WhatsApp	Entrega	Ações
\n {seller.photo ? (\n \n ) : (\n \n {seller.name.charAt(0)}\n \n )}\n	{seller.name}	{seller.company}	\n \n	\n \n	\n console.log(`Editando ${seller.name}`)} \n type=\"edit\"\n tooltip=\"Editar\"\n />\n handleDelete(seller.name)} \n type=\"delete\"\n tooltip=\"Excluir\"\n />\n

\n \n );\n}\n\nfunction App() {\n return ;\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Seller Dashboard\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\n :root {\n --primary-blue: #4B8BF4;\n --light-blue: #6CA6FF;\n --white: #FFFFFF;\n --gray-light: #F5F7FA;\n --green-economy: #2ECC71;\n --purple-total: #9B59B6;\n --text-dark: #2C3E50;\n --background-gray: #F4F7FA;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n background-color: var(--background-gray);\n color: var(--text-dark);\n line-height: 1.6;\n }\n\n .dashboard-header {\n background-color: var(--primary-blue);\n padding: 40px 0;\n margin-bottom: 30px;\n }\n\n .dashboard-container {\n max-width: 1200px;\n margin: 0 auto;\n background-color: var(--white);\n border-radius: 16px;\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n padding: 30px;\n overflow: hidden;\n position: relative;\n top: -60px;\n }\n\n .dashboard-title {\n text-align: center;\n color: var(--white);\n font-size: 2.5rem;\n font-weight: 700;\n margin-bottom: 0;\n }\n\n .dashboard-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .stat-card {\n background-color: var(--white);\n border-radius: 12px;\n padding: 20px;\n text-align: center;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n }\n\n .stat-card:hover {\n transform: translateY(-5px);\n }\n\n .stat-title {\n color: var(--text-dark);\n font-size: 0.9rem;\n margin-bottom: 10px;\n opacity: 0.7;\n text-transform: capitalize;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: 700;\n }\n\n .stat-value.savings {\n color: var(--green-economy);\n }\n\n .stat-value.total {\n color: var(--purple-total);\n }\n\n .stat-card.new-quote-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .new-quote-button {\n background-color: var(--light-blue);\n color: var(--white);\n border: none;\n border-radius: 8px;\n padding: 10px 20px;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n\n .new-quote-button:hover {\n background-color: var(--primary-blue);\n }\n\n .search-container {\n margin: 30px 0;\n display: flex;\n justify-content: center;\n }\n\n .search-wrapper {\n position: relative;\n width: 100%;\n max-width: 500px;\n }\n\n .search-input {\n width: 100%;\n padding: 12px 12px 12px 40px;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n font-size: 1rem;\n transition: border-color 0.3s;\n }\n\n .search-input:focus {\n outline: none;\n border-color: var(--primary-blue);\n }\n\n .search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: #666;\n z-index: 1;\n }\n\n .table-container {\n background-color: var(--white);\n border-radius: 12px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n\n table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n }\n\n .table-header th {\n background-color: var(--gray-light);\n color: var(--text-dark);\n padding: 15px;\n text-align: left;\n font-weight: 500;\n text-transform: capitalize;\n border-bottom: 2px solid #E0E4E8;\n }\n\n .table-row {\n transition: background-color 0.3s;\n }\n\n .table-row:hover {\n background-color: #F9FAFB;\n }\n\n .table-row td {\n padding: 15px;\n border-bottom: 1px solid #E0E4E8;\n vertical-align: middle;\n }\n\n .seller-avatar-fallback {\n width: 45px;\n height: 45px;\n border-radius: 50%;\n background-color: var(--primary-blue);\n color: var(--white);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n }\n\n .whatsapp-link {\n color: #25D366;\n text-decoration: none;\n display: flex;\n align-items: center;\n gap: 5px;\n }\n\n .delivery-info {\n font-size: 1rem;\n color: #666;\n }\n\n .action-icons {\n display: flex;\n gap: 10px;\n }\n\n .action-button {\n background: none;\n border: none;\n cursor: pointer;\n padding: 8px;\n border-radius: 6px;\n transition: background-color 0.3s;\n }\n\n .action-button.edit {\n color: #2ECC71;\n }\n\n .action-button.delete {\n color: #E74C3C;\n }\n\n .action-button:hover {\n background-color: rgba(0, 0, 0, 0.05);\n }\n`;","deleted","label",[99],"permalink","https://www.val.town/x/danieladmsf/gregariousIvoryOstrich/code/main.tsx","extension","actionData","errors"]