146 lines
No EOL
7.6 KiB
PHP
146 lines
No EOL
7.6 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="assetManagement()">
|
|
|
|
<!-- Side Navigation -->
|
|
<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 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="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 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="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">
|
|
<button
|
|
class="bg-white border border-slate-200 text-slate-700 px-5 py-2.5 rounded-xl font-bold hover:bg-slate-50 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
엑셀 내보내기
|
|
</button>
|
|
<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">
|
|
자산 등록
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Laptop List Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
<template x-for="asset in assets" :key="asset.asset_tag">
|
|
<div class="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm hover:shadow-lg transition-all">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="text-xs font-black bg-slate-900 text-white px-3 py-1.5 rounded-lg tracking-wider"
|
|
x-text="asset.asset_tag"></span>
|
|
<span
|
|
:class="asset.status === 'assigned' ? 'bg-blue-100 text-blue-600' : 'bg-slate-100 text-slate-500'"
|
|
class="px-3 py-1 rounded-full text-xs font-bold"
|
|
x-text="asset.status === 'assigned' ? '지급됨' : '재고'"></span>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-extrabold text-slate-900 mb-1" x-text="asset.model_name"></h3>
|
|
<p class="text-xs text-slate-400 font-bold uppercase mb-6" x-text="asset.manufacturer"></p>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-slate-500">배정 사용자</span>
|
|
<span class="font-bold text-slate-900" x-text="asset.user_name || '미배정'"></span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-slate-500">시리얼 번호</span>
|
|
<span class="font-mono text-xs text-slate-700" x-text="asset.serial_number"></span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-slate-500">취득일</span>
|
|
<span class="font-medium text-slate-700" x-text="asset.purchase_date"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 pt-6 border-t border-slate-100 flex gap-2">
|
|
<button
|
|
class="flex-1 bg-slate-50 text-slate-600 py-2 rounded-xl text-xs font-bold hover:bg-slate-100 transition-all">상세보기</button>
|
|
<button
|
|
class="flex-1 bg-blue-50 text-blue-600 py-2 rounded-xl text-xs font-bold hover:bg-blue-100 transition-all">배정수정</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div x-show="assets.length === 0"
|
|
class="p-20 text-center bg-white rounded-3xl border border-dashed border-slate-300">
|
|
<p class="text-slate-400 font-medium italic">등록된 노트북 자산이 없습니다.</p>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
function assetManagement() {
|
|
return {
|
|
assets: [],
|
|
init() {
|
|
fetch('api.php?action=get_laptops')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
this.assets = data;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |