Web Panel - Copy this React, Tailwind Component to your project
Genera-un-panel-web-en-español-dividido-en-cards.-Arriba-la-primera-card-con-el-título-"Just-Smart-Projects"-(texto-con-gradiente-lineal-de-azul-a-violeta),-y-a-la-derecha-el-icono-para-seleccionar-tema-claro-u-oscuro-(claro-por-defecto).-La-segunda-card-con-un-tabbar-de-4-tabs:-"Contratista",-"Suplidor",-"Empleado"-y-"Cliente"-(Contratista-por-defecto).-Cada-sección-tendrá-4-cards-de-estadísticas-en-grilla-al-inicio,-con-fondos-azul-claro,-verde-claro,-amarillo-claro-y-violeta-claro.-El-tabbar-deberá-estar-en-una-card-aparte,-y-los-tabs-crecer-hasta-ocupar-toda-la-card.-Sección-contratista,-con-4-cards-de-estadísticas-con-colores-diferentes-(proyectos-activos,-empleados,-ingresos-y-ubicaciones).-Abajo-la-lista-de-proyectos-activos-(con-estados-"Pendiente"-amarillo,-"En-Progreso"-azul-y-"Completado"-verde,-fondos-claros-con-texto-en-el-mismo-tono-mas-oscuro,-y-barra-de-progreso)-y-un-botón-para-crear-nuevo-proyecto-(en-modal)-con-nombre,-fecha-de-inicio-y-final.-Abajo-un-gráfico-de-barras-(recharts,-colores-por-defecto)-con-las-ingresos-y-gastos-de-los-últimos-6-meses.-Sección-suplidor,-con-4-cards-de-estadísticas-con-colores-diferentes-(total-productos,-pedidos-pendientes,-ventas-totales-y-envios-realizados).-Abajo-la-lista-de-productos-con-nombre,-precio-y-stock,-y-un-botón-para-crear-productos-(en-modal).-Sección-empleado,-con-4-cards-de-estadísticas-con-colores-diferentes-(estado,-tareas-pendientes,-proyectos-activos-y-mensajes).-Abajo-un-botón-para-"Marcar-entrada",-y-luego-uno-para-marcar-salida,-registrando-el-tiempo.-Sección-cliente,-con-4-cards-de-estadísticas-con-colores-diferentes-(proyectos-activos,-facturas-pendientes,-mensajes-y-total-invertido).-El-fondo-del-sitio-con-gradiente-diagonal,-de-azul-muy-claro-a-violeta-muy-claro.-Los-botones-de-Crear-Proyecto-y-Crear-Producto-deben-ser-funcionales,-con-fondo-negro,-y-al-guardar-deben-agregar-los-items.-El-botón-de-"Marcar-entrada"-(verde)-aparecerá-solo,-y-se-cambiará-por-el-de-"Marcar-salida"-(rojo)-al-presionarse.-Lo-mismo-al-revés.
