import React, { useState, useEffect, useRef } from "react";
// Sistema Web: Canaã Material de Construção
// Foco: Leve, Responsivo, Futurista, Offline-first (LocalStorage)
export default function CanaaApp() {
const [tab, setTab] = useState("produtos");
const [theme, setTheme] = useState("dark");
const [animations, setAnimations] = useState(true);
const [products, setProducts] = useState(() => {
return JSON.parse(localStorage.getItem("canaa_products") || "[]");
});
const [sales, setSales] = useState(() => {
return JSON.parse(localStorage.getItem("canaa_sales") || "[]");
});
const [fiado, setFiado] = useState(() => {
return JSON.parse(localStorage.getItem("canaa_fiado") || "[]");
});
const [fps, setFps] = useState(0);
const frameRef = useRef(0);
// FPS Monitor
useEffect(() => {
let lastTime = performance.now();
let frames = 0;
const loop = (time) => {
frames++;
if (time >= lastTime + 1000) {
setFps(frames);
frames = 0;
lastTime = time;
}
frameRef.current = requestAnimationFrame(loop);
};
frameRef.current = requestAnimationFrame(loop);
return () => cancelAnimationFrame(frameRef.current);
}, []);
// Persistência
useEffect(() => {
localStorage.setItem("canaa_products", JSON.stringify(products));
}, [products]);
useEffect(() => {
localStorage.setItem("canaa_sales", JSON.stringify(sales));
}, [sales]);
useEffect(() => {
localStorage.setItem("canaa_fiado", JSON.stringify(fiado));
}, [fiado]);
const themeClass = {
dark: "bg-black text-white",
light: "bg-white text-black",
comfort: "bg-yellow-50 text-black"
}[theme];
return (
{tab === "produtos" && (
)}
{tab === "vendas" && (
)}
{tab === "fiado" && (
)}
{tab === "whatsapp" && }
{tab === "youtube" && }
{tab === "ia" && }
{tab === "config" && (
)}
FPS: {fps}
);
}
function Header({ setTab }) {
return (
Canaã Material de Construção
);
}
function Produtos({ products, setProducts }) {
const [nome, setNome] = useState("");
const [valor, setValor] = useState("");
const [quantidade, setQuantidade] = useState("");
const [obs, setObs] = useState("");
const addProduto = () => {
if (!nome || !valor) return;
const novo = {
id: Date.now(),
nome,
valor: parseFloat(valor),
quantidade,
obs,
imagem: `https://source.unsplash.com/300x300/?${encodeURIComponent(
nome
)}`
};
setProducts([novo, ...products]);
setNome("");
setValor("");
setQuantidade("");
setObs("");
};
return (
);
}
function Vendas({ sales, setSales }) {
const [cliente, setCliente] = useState("");
const [valor, setValor] = useState("");
const registrar = () => {
if (!cliente || !valor) return;
setSales([
{ id: Date.now(), cliente, valor, data: new Date().toLocaleDateString() },
...sales
]);
setCliente("");
setValor("");
};
return (
);
}
function Fiado({ fiado, setFiado }) {
const [cliente, setCliente] = useState("");
const [valor, setValor] = useState("");
const registrar = () => {
if (!cliente || !valor) return;
setFiado([
{ id: Date.now(), cliente, valor, status: "Pendente" },
...fiado
]);
setCliente("");
setValor("");
};
return (
);
}
function WhatsAppTab() {
return (
);
}
function YouTubeTab() {
return (
);
}
function IAAssistente() {
const [texto, setTexto] = useState("");
return (
Assistente IA (Opcional)
))}