antv/thankcard-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

all feature

Browse Source
This commit is contained in:
antv
2026-06-29 11:55:33 +07:00
parent 08d13336cd
commit 8a77324f89
59 changed files with 5587 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/dashboard.blade.php
+419
View File
@@ -0,0 +1,419 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>GMO-Z.com RUNSYSTEM - Dashboard</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-bg-main text-text-dark font-sans antialiased">
<div class="app-layout">
<aside class="sidebar">
<div class="flex flex-col h-full justify-between">
<div>
<div class="h-16 flex items-center justify-between px-6 border-b border-border-light">
<div class="flex items-center gap-2">
<img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-8 w-auto object-contain">
</div>
<button class="text-text-light hover:text-primary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</button>
</div>
<nav class="p-4 space-y-1">
<a href="#" class="sidebar-link sidebar-link-active">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<span>DashBoard</span>
</a>
<div class="relative">
<a href="#" class="sidebar-link justify-between">
<span class="flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Chấm công</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</a>
</div>
<a href="#" class="sidebar-link">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
</svg>
<span>Danh sách khóa học</span>
</a>
</nav>
</div>
<div>
<div class="mx-4 my-2 p-4 rounded-lg bg-primary/5 border border-primary/10 flex flex-col items-center text-center">
<img src="https://illustrations.popsy.co/blue/document-delivery.svg" alt="Support" class="w-24 h-24 object-contain mb-2">
<h4 class="text-text-dark font-semibold text-xs mb-1">Bạn có thắc mắc về ngày công?</h4>
<a href="#" class="btn-primary py-1.5 px-4 text-xs w-full mt-2 inline-block">Phản hồi</a>
</div>
<div class="px-6 py-4 border-t border-border-light text-center">
<span class="text-text-muted text-[10px]">&copy; 2026 GMO-Z.com RUNSYSTEM</span>
</div>
</div>
</div>
</aside>
<main class="main-content">
<header class="top-header">
<div class="flex items-center gap-3 overflow-x-auto py-2">
<span class="text-text-light text-xs font-bold whitespace-nowrap">Link liên kết:</span>
<a href="#" class="border border-border-medium rounded px-2.5 py-1 text-xs text-text-medium hover:text-primary relative font-medium whitespace-nowrap">
RUN AI <span class="nav-badge">NEW!</span>
</a>
<a href="#" class="border border-border-medium rounded px-2.5 py-1 text-xs text-text-medium hover:text-primary relative font-medium whitespace-nowrap">
G-Office <span class="nav-badge">NEW!</span>
</a>
<a href="#" class="border border-border-medium rounded px-2.5 py-1 text-xs text-text-medium hover:text-primary relative font-medium whitespace-nowrap">
RUN Helpline <span class="nav-badge">NEW!</span>
</a>
<a href="#" class="border border-border-medium rounded px-2.5 py-1 text-xs text-text-medium hover:text-primary font-medium whitespace-nowrap">JIRA8</a>
<a href="#" class="border border-border-medium rounded px-2.5 py-1 text-xs text-text-medium hover:text-primary font-medium whitespace-nowrap">WE</a>
<a href="#" class="border border-border-medium rounded px-2.5 py-1 text-xs text-text-medium hover:text-primary font-medium whitespace-nowrap">G-Help</a>
<a href="#" class="border border-border-medium rounded px-2.5 py-1 text-xs text-text-medium hover:text-primary font-medium whitespace-nowrap">G-Booking</a>
</div>
<div class="flex items-center gap-4 shrink-0">
<button class="relative text-text-medium hover:text-primary p-1.5 rounded-full hover:bg-gray-100 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
<span class="notification-badge">1</span>
</button>
<div class="flex items-center gap-2 border-l border-border-light pl-4">
<div class="w-8 h-8 rounded-full bg-primary-light text-primary flex items-center justify-center font-bold text-sm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-primary">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
</svg>
</div>
<span class="text-xs font-bold text-text-dark">TRẦN VĂN AN</span>
</div>
</div>
</header>
<div class="flex-1 overflow-y-auto p-6 space-y-6">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
<h2 class="text-xl font-bold text-text-dark flex items-center gap-2">
Bảng chấm công
</h2>
<div class="flex flex-wrap items-center gap-4 text-xs font-semibold">
<a href="#" class="text-secondary hover:underline flex items-center gap-1.5">
👉 Quy định chấm công, nghỉ phép
</a>
<a href="#" class="text-secondary hover:underline flex items-center gap-1.5">
👉 Quy định chấm công, nghỉ phép HCM
</a>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="card-stat-active">
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-white/80 text-xs font-bold">Ngày công chuẩn</span>
<span class="text-xl font-bold">22</span>
</div>
<div class="flex justify-between items-center pt-2 border-t border-white/10">
<span class="text-white/80 text-xs font-bold">Ngày công lễ</span>
<span class="text-xl font-bold">0</span>
</div>
</div>
</div>
<div class="card-stat">
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-text-medium text-xs font-bold">Ngày công thực tế</span>
<span class="text-xl font-bold">20</span>
</div>
<div class="flex justify-between items-center pt-2 border-t border-border-light">
<span class="text-text-medium text-xs font-bold">Nghỉ phép</span>
<span class="text-xl font-bold">0</span>
</div>
</div>
</div>
<div class="card-stat">
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-text-medium text-xs font-bold">Số lần đi muộn, về sớm</span>
<span class="text-xl font-bold text-red-500">0</span>
</div>
<div class="flex justify-between items-center pt-2 border-t border-border-light">
<span class="text-text-medium text-xs font-bold">Số giờ đi muộn, về sớm</span>
<span class="text-xl font-bold">0</span>
</div>
</div>
</div>
<div class="card-stat">
<div class="space-y-1.5">
<div class="flex justify-between items-center">
<span class="text-text-medium text-xs font-bold">Số giờ OT 150%</span>
<span class="text-sm font-bold">0</span>
</div>
<div class="flex justify-between items-center">
<span class="text-text-medium text-xs font-bold">Số giờ OT 200%</span>
<span class="text-sm font-bold">0</span>
</div>
<div class="flex justify-between items-center">
<span class="text-text-medium text-xs font-bold">Số giờ OT 300%</span>
<span class="text-sm font-bold">0</span>
</div>
</div>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4 text-primary font-bold">
<button class="p-1 hover:bg-gray-100 rounded transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</button>
<span class="text-lg">Tháng 06/2026</span>
<button class="p-1 hover:bg-gray-100 rounded transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
<div class="flex items-center border border-border-medium rounded-lg overflow-hidden bg-white">
<button class="p-2 bg-primary-light text-primary hover:bg-primary/10 transition-colors border-r border-border-light">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
</svg>
</button>
<button class="p-2 hover:bg-gray-50 text-text-medium transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12M8.25 17.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 17.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
</svg>
</button>
</div>
</div>
<div class="calendar-card">
<div class="calendar-header">
<div>Thứ 2</div>
<div>Thứ 3</div>
<div>Thứ 4</div>
<div>Thứ 5</div>
<div>Thứ 6</div>
<div>Thứ 7</div>
<div>CN</div>
</div>
<div class="calendar-grid">
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">1</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:45 - 17:13</div>
<div class="text-[10px] font-bold text-primary">+ 0:28</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">2</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:53 - 17:08</div>
<div class="text-[10px] font-bold text-primary">+ 0:15</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">3</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:54 - 17:16</div>
<div class="text-[10px] font-bold text-primary">+ 0:22</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">4</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:52 - 17:04</div>
<div class="text-[10px] font-bold text-primary">+ 0:12</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">5</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:50 - 17:20</div>
<div class="text-[10px] font-bold text-primary">+ 0:30</div>
</div>
</div>
<div class="calendar-day calendar-day-weekend">
<div class="flex justify-end">
<span class="text-xs font-semibold text-text-light">6</span>
</div>
<div></div>
</div>
<div class="calendar-day calendar-day-weekend">
<div class="flex justify-end">
<span class="text-xs font-semibold text-text-light">7</span>
</div>
<div></div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">8</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:54 - 17:05</div>
<div class="text-[10px] font-bold text-primary">+ 0:11</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">9</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:48 - 17:05</div>
<div class="text-[10px] font-bold text-primary">+ 0:17</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">10</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:51 - 17:05</div>
<div class="text-[10px] font-bold text-primary">+ 0:14</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">11</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:45 - 17:13</div>
<div class="text-[10px] font-bold text-primary">+ 0:28</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">12</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:45 - 17:37</div>
<div class="text-[10px] font-bold text-primary">+ 0:52</div>
</div>
</div>
<div class="calendar-day calendar-day-weekend">
<div class="flex justify-end">
<span class="text-xs font-semibold text-text-light">13</span>
</div>
<div></div>
</div>
<div class="calendar-day calendar-day-weekend">
<div class="flex justify-end">
<span class="text-xs font-semibold text-text-light">14</span>
</div>
<div></div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">15</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:47 - 17:04</div>
<div class="text-[10px] font-bold text-primary">+ 0:17</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">16</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:45 - 17:02</div>
<div class="text-[10px] font-bold text-primary">+ 0:17</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">17</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:54 - 17:02</div>
<div class="text-[10px] font-bold text-primary">+ 0:08</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">18</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:45 - 17:03</div>
<div class="text-[10px] font-bold text-primary">+ 0:18</div>
</div>
</div>
<div class="calendar-day">
<div class="flex justify-between items-start">
<span class="text-lg font-extrabold text-primary">X</span>
<span class="text-xs font-semibold text-text-light">19</span>
</div>
<div class="text-center">
<div class="text-xs font-bold text-text-dark">07:45 - 17:04</div>
<div class="text-[10px] font-bold text-primary">+ 0:19</div>
</div>
</div>
<div class="calendar-day calendar-day-weekend">
<div class="flex justify-end">
<span class="text-xs font-semibold text-text-light">20</span>
</div>
<div></div>
</div>
<div class="calendar-day calendar-day-weekend">
<div class="flex justify-end">
<span class="text-xs font-semibold text-text-light">21</span>
</div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>