used a template before refactory
This commit is contained in:
+15
-12
@@ -1,13 +1,16 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="pt-BR">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<head>
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<title>vite-project</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
</head>
|
<title>Analytrick</title>
|
||||||
<body>
|
</head>
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<body>
|
||||||
</body>
|
<div id="root"></div>
|
||||||
</html>
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
+156
-1
@@ -1,5 +1,160 @@
|
|||||||
function App() {
|
function App() {
|
||||||
return <></>;
|
return (
|
||||||
|
<>
|
||||||
|
<div class="p-6 bg-gray-100 min-h-screen">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
|
||||||
|
<div class="bg-red-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm opacity-90">Total Employees</p>
|
||||||
|
<h2 class="text-3xl font-bold mt-1">125</h2>
|
||||||
|
</div>
|
||||||
|
<div class="text-4xl opacity-90">👥</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-blue-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm opacity-90">Departments</p>
|
||||||
|
<h2 class="text-3xl font-bold mt-1">8</h2>
|
||||||
|
</div>
|
||||||
|
<div class="text-4xl opacity-90">🏢</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-green-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm opacity-90">Attendance Today</p>
|
||||||
|
<h2 class="text-3xl font-bold mt-1">113</h2>
|
||||||
|
</div>
|
||||||
|
<div class="text-4xl opacity-90">🕒</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-yellow-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm opacity-90">Pending Payroll</p>
|
||||||
|
<h2 class="text-3xl font-bold mt-1">12</h2>
|
||||||
|
</div>
|
||||||
|
<div class="text-4xl opacity-90">💼</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6 mb-6">
|
||||||
|
<div class="bg-white rounded-2xl shadow-sm p-5">
|
||||||
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Monthly Attendance</h3>
|
||||||
|
<div class="h-72 flex items-end justify-between gap-3 border-t pt-6">
|
||||||
|
<div class="flex flex-col items-center w-full">
|
||||||
|
<div class="flex items-end gap-1 h-52">
|
||||||
|
<div class="w-4 bg-green-600 rounded-t-md h-24"></div>
|
||||||
|
<div class="w-4 bg-green-400 rounded-t-md h-16"></div>
|
||||||
|
<div class="w-4 bg-slate-400 rounded-t-md h-28"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">Jan</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center w-full">
|
||||||
|
<div class="flex items-end gap-1 h-52">
|
||||||
|
<div class="w-4 bg-green-600 rounded-t-md h-32"></div>
|
||||||
|
<div class="w-4 bg-green-400 rounded-t-md h-24"></div>
|
||||||
|
<div class="w-4 bg-slate-400 rounded-t-md h-36"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">Feb</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center w-full">
|
||||||
|
<div class="flex items-end gap-1 h-52">
|
||||||
|
<div class="w-4 bg-green-600 rounded-t-md h-28"></div>
|
||||||
|
<div class="w-4 bg-green-400 rounded-t-md h-20"></div>
|
||||||
|
<div class="w-4 bg-slate-400 rounded-t-md h-30"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">Mar</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center w-full">
|
||||||
|
<div class="flex items-end gap-1 h-52">
|
||||||
|
<div class="w-4 bg-green-600 rounded-t-md h-20"></div>
|
||||||
|
<div class="w-4 bg-green-400 rounded-t-md h-24"></div>
|
||||||
|
<div class="w-4 bg-slate-400 rounded-t-md h-24"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">Apr</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center w-full">
|
||||||
|
<div class="flex items-end gap-1 h-52">
|
||||||
|
<div class="w-4 bg-green-600 rounded-t-md h-32"></div>
|
||||||
|
<div class="w-4 bg-green-400 rounded-t-md h-16"></div>
|
||||||
|
<div class="w-4 bg-slate-400 rounded-t-md h-36"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">May</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center w-full">
|
||||||
|
<div class="flex items-end gap-1 h-52">
|
||||||
|
<div class="w-4 bg-green-600 rounded-t-md h-28"></div>
|
||||||
|
<div class="w-4 bg-green-400 rounded-t-md h-20"></div>
|
||||||
|
<div class="w-4 bg-slate-400 rounded-t-md h-30"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">Jun</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center w-full">
|
||||||
|
<div class="flex items-end gap-1 h-52">
|
||||||
|
<div class="w-4 bg-green-600 rounded-t-md h-36"></div>
|
||||||
|
<div class="w-4 bg-green-400 rounded-t-md h-28"></div>
|
||||||
|
<div class="w-4 bg-slate-400 rounded-t-md h-40"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">Jul</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-2xl shadow-sm p-5">
|
||||||
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Expense Breakdown</h3>
|
||||||
|
<div class="flex flex-col items-center justify-center h-72">
|
||||||
|
<div class="relative w-56 h-56 rounded-full bg-[conic-gradient(#3b82f6_0%_45%,#f97316_45%_60%,#16a34a_60%_85%,#facc15_85%_100%)]">
|
||||||
|
<div class="absolute inset-10 bg-white rounded-full flex items-center justify-center text-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-500">Salaries</p>
|
||||||
|
<h4 class="text-2xl font-bold text-blue-600">45%</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-2xl shadow-sm p-5">
|
||||||
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Recent Activities</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center justify-between border-b pb-3">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">👨</div>
|
||||||
|
<p class="text-sm text-gray-700">John Doe added a new employee</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500">5 mins ago</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between border-b pb-3">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">👩</div>
|
||||||
|
<p class="text-sm text-gray-700">Payroll processed for June</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500">30 mins ago</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between border-b pb-3">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">🧑</div>
|
||||||
|
<p class="text-sm text-gray-700">Finance report updated</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-500">1 hour ago</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="mt-5 w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2.5 rounded-xl font-medium transition">
|
||||||
|
🔔 New Notifications
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
Reference in New Issue
Block a user