File size: 8,089 Bytes
9a9a400 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!DOCTYPE html>
<html lang="th" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - PDF Wizard</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 text-slate-800 dark:text-slate-200 font-sans antialiased">
<app-navbar></app-navbar>
<div class="flex h-[calc(100vh-var(--header-height))]">
<app-sidebar></app-sidebar>
<main class="flex-1 overflow-auto p-6">
<div class="max-w-7xl mx-auto">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold flex items-center gap-2">
<i data-feather="database"></i> Data Dashboard
</h1>
<button id="btn-add-record" class="btn-primary">
<i data-feather="plus"></i> Add Record
</button>
</div>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-md overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-slate-50 dark:bg-slate-700">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">ID</th>
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Position</th>
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Company</th>
<th class="px-6 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody id="data-table-body" class="divide-y divide-slate-200 dark:divide-slate-700">
<!-- Records will be loaded here -->
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
<!-- Record Modal -->
<div id="record-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-[200] hidden flex items-center justify-center p-4">
<div class="bg-white dark:bg-slate-800 w-full max-w-2xl rounded-xl shadow-2xl overflow-hidden transform transition-all">
<div class="px-6 py-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-900">
<h3 class="text-lg font-bold text-slate-800 dark:text-white flex items-center gap-2">
<i data-feather="edit-2"></i> <span id="modal-title">Edit Record</span>
</h3>
<button class="close-modal text-slate-400 hover:text-red-500 transition-colors">
<i data-feather="x"></i>
</button>
</div>
<div class="p-6 max-h-[70vh] overflow-y-auto">
<form id="record-form" class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="hidden" id="record-id">
<div class="form-group">
<label for="field-1" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Full Name</label>
<input type="text" id="field-1" class="form-input" required>
</div>
<div class="form-group">
<label for="field-2" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Position</label>
<input type="text" id="field-2" class="form-input" required>
</div>
<div class="form-group">
<label for="field-3" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Department</label>
<input type="text" id="field-3" class="form-input">
</div>
<div class="form-group">
<label for="field-4" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Photo URL</label>
<input type="text" id="field-4" class="form-input" placeholder="https://...">
</div>
<div class="form-group">
<label for="field-5" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Start Date</label>
<input type="date" id="field-5" class="form-input">
</div>
<div class="form-group">
<label for="field-6" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">End Date</label>
<input type="date" id="field-6" class="form-input">
</div>
<div class="form-group md:col-span-2">
<label for="field-7" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Company</label>
<input type="text" id="field-7" class="form-input" required>
</div>
<div class="form-group">
<label for="field-8" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">City</label>
<input type="text" id="field-8" class="form-input">
</div>
<div class="form-group">
<label for="field-9" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Postal Code</label>
<input type="text" id="field-9" class="form-input">
</div>
<div class="form-group md:col-span-2">
<label for="field-10" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Country</label>
<input type="text" id="field-10" class="form-input">
</div>
<div class="form-group">
<label for="field-11" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Reference No.</label>
<input type="text" id="field-11" class="form-input">
</div>
<div class="form-group">
<label for="field-12" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Document No.</label>
<input type="text" id="field-12" class="form-input">
</div>
</form>
</div>
<div class="px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3">
<button id="btn-cancel" class="btn-secondary">Cancel</button>
<button id="btn-save" class="btn-primary">Save Record</button>
</div>
</div>
</div>
<!-- Components Scripts -->
<script src="components/navbar.js"></script>
<script src="components/sidebar.js"></script>
<!-- Dashboard Script -->
<script src="dashboard.js"></script>
<script>feather.replace();</script>
</body>
</html> |