184 lines
No EOL
10 KiB
PHP
184 lines
No EOL
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>직원 마스터 리스트 | FKI ASSET</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Pretendard', sans-serif;
|
|
}
|
|
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-[#f8fafc] text-slate-800" x-data="userManagement()">
|
|
|
|
<!-- Side Navigation (Same as index.php) -->
|
|
<aside class="fixed inset-y-0 left-0 w-64 gradient-bg text-white hidden lg:flex flex-col shadow-2xl z-50">
|
|
<div class="p-6">
|
|
<h1 class="text-2xl font-bold tracking-tight">FKI <span class="text-blue-400">ASSET</span></h1>
|
|
<p class="text-xs text-slate-400 mt-1 uppercase tracking-widest font-semibold">Corporate Resource V2</p>
|
|
</div>
|
|
<nav class="mt-6 flex-1 px-4 space-y-2">
|
|
<a href="index.php"
|
|
class="flex items-center space-x-3 text-slate-400 hover:bg-slate-700/50 hover:text-white p-3 rounded-xl transition-all">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
<span class="font-medium">대시보드</span>
|
|
</a>
|
|
<a href="users.php"
|
|
class="flex items-center space-x-3 bg-blue-600/20 text-blue-400 p-3 rounded-xl transition-all border border-blue-500/20">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
<span class="font-medium">직원 마스터</span>
|
|
</a>
|
|
<a href="laptops.php"
|
|
class="flex items-center space-x-3 text-slate-400 hover:bg-slate-700/50 hover:text-white p-3 rounded-xl transition-all">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
<span class="font-medium">노트북 자산</span>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="lg:ml-64 p-8">
|
|
<header class="mb-10 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-3xl font-extrabold text-slate-900 tracking-tight">직원 마스터</h2>
|
|
<p class="text-slate-500 mt-1">임직원 기본 정보 및 부서 체계 관리</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<div class="relative">
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-400">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</span>
|
|
<input type="text" x-model="searchQuery" @input.debounce.300ms="fetchUsers()"
|
|
class="block w-full pl-10 pr-3 py-2.5 border border-slate-200 rounded-xl leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition-all"
|
|
placeholder="이름, 사번, 이메일 검색...">
|
|
</div>
|
|
<button
|
|
class="bg-blue-600 text-white px-5 py-2.5 rounded-xl font-bold shadow-lg shadow-blue-200 hover:bg-blue-700 transition-all flex items-center">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
신규 등록
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- User Table -->
|
|
<div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<table class="min-w-full divide-y divide-slate-100">
|
|
<thead class="bg-slate-50/50">
|
|
<tr>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">사번 /
|
|
이름</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">부서 /
|
|
직위</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">연락처
|
|
</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">회계구분
|
|
</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">상태
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-50" x-show="!loading">
|
|
<template x-for="user in users" :key="user.id">
|
|
<tr class="hover:bg-slate-50/80 transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="h-10 w-10 flex-shrink-0 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold"
|
|
x-text="user.name.charAt(0)"></div>
|
|
<div class="ml-4">
|
|
<div class="text-sm font-bold text-slate-900" x-text="user.name"></div>
|
|
<div class="text-xs text-slate-400" x-text="user.emp_id"></div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm font-semibold text-slate-700" x-text="user.dept_name"></div>
|
|
<div class="text-xs text-slate-400" x-text="user.position"></div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm text-slate-600" x-text="user.email"></div>
|
|
<div class="text-xs text-slate-400" x-text="user.mobile || user.phone || '-'"></div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-3 py-1 text-xs font-bold rounded-full bg-slate-100 text-slate-600"
|
|
x-text="user.accounting_type"></span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span x-show="user.status === 'active'"
|
|
class="px-3 py-1 text-xs font-bold rounded-full bg-emerald-100 text-emerald-600">재직
|
|
중</span>
|
|
<span x-show="user.status !== 'active'"
|
|
class="px-3 py-1 text-xs font-bold rounded-full bg-rose-100 text-rose-600">퇴사</span>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Loading State -->
|
|
<div x-show="loading" class="p-20 flex justify-center items-center">
|
|
<svg class="animate-spin h-10 w-10 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div x-show="!loading && users.length === 0" class="p-20 text-center">
|
|
<p class="text-slate-400 font-medium">검색 결과가 없습니다.</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
function userManagement() {
|
|
return {
|
|
users: [],
|
|
loading: true,
|
|
searchQuery: '',
|
|
init() {
|
|
this.fetchUsers();
|
|
},
|
|
fetchUsers() {
|
|
this.loading = true;
|
|
fetch(`api.php?action=get_users&search=${encodeURIComponent(this.searchQuery)}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
this.users = data;
|
|
this.loading = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |