prettify
This commit is contained in:
+11
-13
@@ -1,16 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Analytrick</title>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Analytrick</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+166
-150
@@ -1,160 +1,176 @@
|
||||
function App() {
|
||||
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 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 text-gray-500">Salaries</p>
|
||||
<h4 class="text-2xl font-bold text-blue-600">45%</h4>
|
||||
<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>
|
||||
</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;
|
||||
|
||||
+829
-818
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user