admin/HRM-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(calendar): fix horizontal scroll overlapping by changing table to border-separate and enabling sticky position on employee column

Browse Source
This commit is contained in:
admin
2026-06-01 16:52:08 +08:00
parent e0185dbd2f
commit da1044bbd4
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
resources/js/pages/hr/attendance-records/calendar.tsx
View File

@@ -389,24 +389,24 @@ export default function AttendanceCalendar() {
{/* Matrix Grid */}
<div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm overflow-hidden">
<div className="overflow-x-auto pb-2">
<table className="min-w-max w-full border-collapse text-sm">
<table className="min-w-max w-full border-separate border-spacing-0 text-sm">
<thead>
<tr className="bg-gray-50/80 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-800">
<th className="p-3 text-left font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider sticky left-0 z-10 bg-gray-50/95 dark:bg-gray-800/95 border-r border-gray-200 dark:border-gray-800 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] backdrop-blur min-w-[280px]">
<tr className="bg-gray-50/80 dark:bg-gray-800/80">
<th className="p-3 text-left font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider sticky left-0 z-10 bg-gray-50/95 dark:bg-gray-800/95 border-r border-b border-gray-200 dark:border-gray-800 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] backdrop-blur min-w-[280px]">
{t('Employee')}
</th>
{dates?.map((d: any, idx: number) => (
<th key={idx} className="p-2 border-r border-gray-200 dark:border-gray-800 min-w-[50px] text-center last:border-r-0">
<th key={idx} className="p-2 border-r border-b border-gray-200 dark:border-gray-800 min-w-[50px] text-center last:border-r-0">
<div className="font-bold text-gray-800 dark:text-gray-200 text-base">{d.day}</div>
<div className="text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-widest">{d.day_name}</div>
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
<tbody>
{users?.length > 0 ? users.map((user: any) => (
<tr key={user.id} className="hover:bg-gray-50/50 dark:hover:bg-gray-800/50 transition-colors">
<td className="p-3 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 sticky left-0 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.05)]">
<td className="p-3 bg-white dark:bg-gray-900 border-r border-b border-gray-200 dark:border-gray-800 sticky left-0 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.05)]">
<div className="flex items-center gap-3">
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center text-amber-700 dark:text-amber-300 font-bold border border-amber-200 dark:border-amber-800">
{user.name.split(' ').map((n: string) => n[0]).join('').substring(0, 2).toUpperCase()}
@@ -426,7 +426,7 @@ export default function AttendanceCalendar() {
{dates?.map((d: any, idx: number) => {
const cellData = user.records[d.date];
return (
<td key={idx} className="p-2 border-r border-gray-50 dark:border-gray-800 last:border-r-0 text-center">
<td key={idx} className="p-2 border-r border-b border-gray-100 dark:border-gray-800 last:border-r-0 text-center">
<div
className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-[10px] font-bold transition-all shadow-sm ${getStatusColor(cellData.status)} ${canEdit ? 'cursor-pointer hover:scale-110 active:scale-95' : ''} ${cellData.record?.is_approved_leave ? 'ring-2 ring-indigo-400 ring-offset-1' : ''}`}
title={cellData.label}

16
resources/js/pages/hr/shifts/calendar.tsx
View File

@@ -225,26 +225,26 @@ export default function ShiftCalendar() {
{/* Matrix Grid */}
<div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm overflow-hidden">
<div className="overflow-x-auto pb-2">
<table className="min-w-max w-full border-collapse text-sm">
<table className="min-w-max w-full border-separate border-spacing-0 text-sm">
<thead>
<tr className="bg-gray-50/80 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-800">
<th className="p-3 text-left font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider sticky left-0 z-10 bg-gray-50/95 dark:bg-gray-800/95 border-r border-gray-200 dark:border-gray-800 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] backdrop-blur min-w-[280px]">
<tr className="bg-gray-50/80 dark:bg-gray-800/80">
<th className="p-3 text-left font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider sticky left-0 z-10 bg-gray-50/95 dark:bg-gray-800/95 border-r border-b border-gray-200 dark:border-gray-800 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] backdrop-blur min-w-[280px]">
{t('Employee')}
</th>
{dates?.map((d: any, idx: number) => (
<th key={idx} className="p-2 border-r border-gray-200 dark:border-gray-800 min-w-[50px] text-center last:border-r-0">
<th key={idx} className="p-2 border-r border-b border-gray-200 dark:border-gray-800 min-w-[50px] text-center last:border-r-0">
<div className="font-bold text-gray-800 dark:text-gray-200 text-base">{d.day}</div>
<div className="text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-widest">{d.day_name}</div>
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
<tbody>
{users?.length > 0 ? users.map((user: any) => (
<tr key={user.id} className="hover:bg-gray-50/50 dark:hover:bg-gray-800/50 transition-colors">
<td className="p-3 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 sticky left-0 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.05)]">
<td className="p-3 bg-white dark:bg-gray-900 border-r border-b border-gray-200 dark:border-gray-800 sticky left-0 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.05)]">
<div className="flex items-center gap-3">
<div className="flex-shrink-0h w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center text-indigo-700 dark:text-indigo-300 font-bold border border-indigo-200 dark:border-indigo-800">
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center text-indigo-700 dark:text-indigo-300 font-bold border border-indigo-200 dark:border-indigo-800">
{user.name.split(' ').map((n: string) => n[0]).join('').substring(0, 2).toUpperCase()}
</div>
<div>
@@ -270,7 +270,7 @@ export default function ShiftCalendar() {
: '';
return (
<td key={idx} className="p-1 border-r border-gray-50 dark:border-gray-800 last:border-r-0 text-center min-w-[70px]">
<td key={idx} className="p-1 border-r border-b border-gray-100 dark:border-gray-800 last:border-r-0 text-center min-w-[70px]">
<div
className={`flex flex-col items-center justify-center py-1 px-1.5 rounded border text-[11px] font-extrabold transition-all shadow-sm h-[50px] w-full ${bgClass} ${canEdit ? 'cursor-pointer hover:brightness-95 active:scale-95' : ''}`}
onClick={() => handleCellClick(user, d.date, cellData)}