gitea/checklist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
ronalds
2025-11-19 01:09:25 -03:00
parent e7a380f36e
commit be10a888fb
28 changed files with 2481 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1036
frontend/src/App.jsx
View File

File diff suppressed because it is too large Load Diff

55
frontend/src/Sidebar.jsx
View File

@@ -1,12 +1,19 @@
export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, setSidebarOpen, onLogout }) {
return (
<aside className={`bg-gray-900 text-white transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-16'} flex flex-col fixed h-full z-10`}>
<aside className={`bg-gradient-to-b from-gray-900 via-indigo-950 to-purple-950 text-white transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-16'} flex flex-col fixed h-full z-10 shadow-2xl`}>
{/* Sidebar Header */}
<div className={`p-4 flex items-center ${sidebarOpen ? 'justify-between' : 'justify-center'} border-b border-gray-700`}>
{sidebarOpen && <h2 className="text-xl font-bold">Sistema</h2>}
<div className={`p-4 flex items-center ${sidebarOpen ? 'justify-between' : 'justify-center'} border-b border-indigo-800/50`}>
{sidebarOpen && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-lg">S</span>
</div>
<h2 className="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">Syntria</h2>
</div>
)}
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="p-2 rounded-lg hover:bg-gray-800 transition"
className="p-2 rounded-lg hover:bg-indigo-800/50 transition"
title={sidebarOpen ? 'Ocultar sidebar' : 'Mostrar sidebar'}
>
{sidebarOpen ? '☰' : '☰'}
@@ -21,8 +28,8 @@ export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, se
onClick={() => setActiveTab('checklists')}
className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
activeTab === 'checklists'
? 'bg-blue-600 text-white'
: 'text-gray-300 hover:bg-gray-800'
? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
: 'text-indigo-200 hover:bg-indigo-900/50'
}`}
title={!sidebarOpen ? 'Checklists' : ''}
>
@@ -35,8 +42,8 @@ export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, se
onClick={() => setActiveTab('inspections')}
className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
activeTab === 'inspections'
? 'bg-blue-600 text-white'
: 'text-gray-300 hover:bg-gray-800'
? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
: 'text-indigo-200 hover:bg-indigo-900/50'
}`}
title={!sidebarOpen ? 'Inspecciones' : ''}
>
@@ -51,8 +58,8 @@ export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, se
onClick={() => setActiveTab('users')}
className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
activeTab === 'users'
? 'bg-blue-600 text-white'
: 'text-gray-300 hover:bg-gray-800'
? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
: 'text-indigo-200 hover:bg-indigo-900/50'
}`}
title={!sidebarOpen ? 'Usuarios' : ''}
>
@@ -65,8 +72,8 @@ export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, se
onClick={() => setActiveTab('reports')}
className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
activeTab === 'reports'
? 'bg-blue-600 text-white'
: 'text-gray-300 hover:bg-gray-800'
? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
: 'text-indigo-200 hover:bg-indigo-900/50'
}`}
title={!sidebarOpen ? 'Reportes' : ''}
>
@@ -74,27 +81,41 @@ export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, se
{sidebarOpen && <span>Reportes</span>}
</button>
</li>
<li>
<button
onClick={() => setActiveTab('settings')}
className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
activeTab === 'settings'
? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
: 'text-indigo-200 hover:bg-indigo-900/50'
}`}
title={!sidebarOpen ? 'Configuración' : ''}
>
<span className="text-xl">⚙️</span>
{sidebarOpen && <span>Configuración</span>}
</button>
</li>
</>
)}
</ul>
</nav>
{/* User Info */}
<div className="p-4 border-t border-gray-700">
<div className="p-4 border-t border-indigo-800/50">
<div className={`flex items-center gap-3 ${!sidebarOpen && 'justify-center'}`}>
<div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0">
<div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0 shadow-lg">
{user.username.charAt(0).toUpperCase()}
</div>
{sidebarOpen && (
<div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate">{user.full_name || user.username}</p>
<p className="text-xs text-gray-400">{user.role === 'admin' ? 'Admin' : 'Mecánico'}</p>
<p className="text-sm font-medium truncate text-white">{user.full_name || user.username}</p>
<p className="text-xs text-indigo-300">{user.role === 'admin' ? '👑 Admin' : '🔧 Mecánico'}</p>
</div>
)}
</div>
<button
onClick={onLogout}
className={`mt-3 w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition flex items-center justify-center gap-2`}
className={`mt-3 w-full px-4 py-2 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-lg hover:from-red-600 hover:to-pink-600 transition-all transform hover:scale-105 flex items-center justify-center gap-2 shadow-lg`}
title={!sidebarOpen ? 'Cerrar Sesión' : ''}
>
{sidebarOpen ? (