Mass UI Updates
This commit is contained in:
@@ -8,24 +8,63 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/pocketbase@latest/dist/pocketbase.umd.js"></script>
|
||||
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
|
||||
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
|
||||
<style>
|
||||
/* Custom dropdown scrollbar styling */
|
||||
[id$="_menu"]::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
[id$="_menu"]::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
[id$="_menu"]::-webkit-scrollbar-thumb {
|
||||
background: rgba(79, 70, 229, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
[id$="_menu"]::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(79, 70, 229, 0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen bg-gray-50">
|
||||
<body class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/40">
|
||||
<!-- Navigation Header -->
|
||||
<nav class="bg-white shadow-sm border-b border-gray-200">
|
||||
<nav class="backdrop-blur-xl bg-white/70 border-b border-white/20 shadow-sm sticky top-0 z-40">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-center h-16 sm:h-auto py-4 sm:py-0 gap-4 sm:gap-0">
|
||||
<div class="flex items-center gap-4 w-full sm:w-auto">
|
||||
<a href="dashboard.html" class="text-indigo-600 hover:text-indigo-700 font-medium text-sm sm:text-base">← Dashboard</a>
|
||||
<div class="text-lg sm:text-xl font-bold text-gray-800">Job Tracking</div>
|
||||
<div class="flex flex-row justify-between items-center py-4 px-2">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="dashboard" class="text-indigo-600 hover:text-indigo-700 font-medium text-sm sm:text-base transition-colors">← Dashboard</a>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row items-center gap-3 w-full sm:w-auto">
|
||||
<div class="text-xs sm:text-sm text-gray-600" id="userEmail"></div>
|
||||
<button
|
||||
onclick="logout()"
|
||||
class="w-full sm:w-auto bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
<div class="flex items-center gap-3 relative">
|
||||
<div class="relative">
|
||||
<button
|
||||
onclick="toggleUserDropdown()"
|
||||
class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 flex items-center justify-center text-white font-medium text-sm hover:scale-105 focus:outline-none transition-all duration-300 shadow-lg shadow-indigo-500/30 hover:shadow-indigo-500/50"
|
||||
id="userAvatarBtn"
|
||||
>
|
||||
<span id="userInitials" class="text-xs font-semibold"></span>
|
||||
</button>
|
||||
<div
|
||||
id="userDropdown"
|
||||
class="hidden absolute right-0 mt-2 w-48 backdrop-blur-xl bg-white/80 rounded-2xl shadow-2xl border border-white/30 py-2 z-50 overflow-hidden"
|
||||
>
|
||||
<div class="px-4 py-3 border-b border-white/20">
|
||||
<p class="text-xs text-gray-500 font-medium">Signed in as</p>
|
||||
<p class="text-sm font-semibold text-gray-900 truncate mt-0.5" id="userEmail"></p>
|
||||
</div>
|
||||
<a
|
||||
href="preferences"
|
||||
class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-white/40 focus:outline-none transition-colors font-medium"
|
||||
>
|
||||
Preferences
|
||||
</a>
|
||||
<button
|
||||
onclick="logout()"
|
||||
class="w-full text-left px-4 py-2.5 text-sm text-red-600 hover:bg-red-50/50 focus:outline-none transition-colors font-medium"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,14 +76,14 @@
|
||||
<div id="messageContainer" class="mb-4"></div>
|
||||
|
||||
<!-- Search and Filter Section -->
|
||||
<div class="bg-white rounded-lg shadow border border-gray-200 p-4 mb-6">
|
||||
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6 mb-6">
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Search Bar -->
|
||||
<input
|
||||
type="text"
|
||||
id="searchInput"
|
||||
placeholder="Search by job number, name, or client..."
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base"
|
||||
class="w-full px-4 py-3 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm"
|
||||
>
|
||||
|
||||
<!-- Filter Section -->
|
||||
@@ -82,11 +121,11 @@
|
||||
|
||||
<!-- View Toggle -->
|
||||
<div class="mb-4 flex justify-end">
|
||||
<div class="inline-flex rounded-lg border border-gray-300 bg-white p-1">
|
||||
<div class="inline-flex rounded-2xl border border-white/30 backdrop-blur-xl bg-white/60 p-1 shadow-lg">
|
||||
<button
|
||||
onclick="switchView('table')"
|
||||
id="tableViewBtn"
|
||||
class="px-4 py-2 rounded-md text-sm font-medium transition focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-indigo-600 text-white"
|
||||
class="px-4 py-2 rounded-xl text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/50 backdrop-blur-sm bg-indigo-600/90 text-white shadow-lg hover:bg-indigo-700/90"
|
||||
>
|
||||
<svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||||
@@ -96,7 +135,7 @@
|
||||
<button
|
||||
onclick="switchView('card')"
|
||||
id="cardViewBtn"
|
||||
class="px-4 py-2 rounded-md text-sm font-medium transition focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-700 hover:bg-gray-50"
|
||||
class="px-4 py-2 rounded-xl text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/50 text-gray-700 hover:bg-white/40 backdrop-blur-sm"
|
||||
>
|
||||
<svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
|
||||
@@ -107,10 +146,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Jobs Table View -->
|
||||
<div id="tableView" class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
|
||||
<div id="tableView" class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<thead class="backdrop-blur-sm bg-white/40">
|
||||
<tr>
|
||||
<th class="px-3 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Job Number</th>
|
||||
<th class="px-3 sm:px-6 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Job Name</th>
|
||||
@@ -122,7 +161,7 @@
|
||||
<th class="px-3 sm:px-6 py-2 sm:py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="jobsTableBody" class="bg-white divide-y divide-gray-200">
|
||||
<tbody id="jobsTableBody" class="bg-white/30 divide-y divide-white/20">
|
||||
<tr id="loadingRow">
|
||||
<td colspan="8" class="px-6 py-8 text-center text-gray-500">Loading...</td>
|
||||
</tr>
|
||||
@@ -143,10 +182,10 @@
|
||||
</main>
|
||||
|
||||
<!-- Job Dashboard Modal -->
|
||||
<div id="jobModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto z-50">
|
||||
<div class="relative top-0 sm:top-10 mx-auto p-4 sm:p-6 border-0 sm:border w-full sm:max-w-7xl shadow-lg rounded-none sm:rounded-md bg-gray-50 mb-0 sm:mb-10 min-h-screen sm:min-h-[600px]">
|
||||
<div id="jobModal" class="hidden fixed inset-0 backdrop-blur-sm bg-black/20 overflow-y-auto z-50">
|
||||
<div class="relative top-0 sm:top-10 mx-auto p-4 sm:p-6 w-full sm:max-w-7xl shadow-2xl rounded-none sm:rounded-3xl backdrop-blur-2xl bg-white/80 border border-white/30 mb-0 sm:mb-10 min-h-screen sm:min-h-[600px]">
|
||||
<!-- Dashboard Header -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
|
||||
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6 mb-6">
|
||||
<div class="flex flex-col lg:flex-row justify-between items-start gap-4 mb-4">
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2" id="dashboardJobName">Job Dashboard</h2>
|
||||
@@ -163,7 +202,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Quick Info Card -->
|
||||
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200 min-w-[250px]">
|
||||
<div class="backdrop-blur-xl bg-white/40 rounded-2xl p-4 border border-white/30 min-w-[250px] shadow-lg">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-3">Quick Info</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
@@ -215,28 +254,28 @@
|
||||
<!-- Overview Tab Content -->
|
||||
<div id="dashboard-tab-overview" class="dashboard-tab-content space-y-6 min-h-[500px]">
|
||||
<!-- Basic Information Card -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Basic Information</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="Job_Number" class="block text-sm font-medium text-gray-700 mb-1">Job Number</label>
|
||||
<input type="text" id="Job_Number" name="Job_Number" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Job_Number" name="Job_Number" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Job_Full_Name" class="block text-sm font-medium text-gray-700 mb-1">Job Full Name</label>
|
||||
<input type="text" id="Job_Full_Name" name="Job_Full_Name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Job_Full_Name" name="Job_Full_Name" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Job_Name" class="block text-sm font-medium text-gray-700 mb-1">Job Name</label>
|
||||
<input type="text" id="Job_Name" name="Job_Name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Job_Name" name="Job_Name" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Job_Address" class="block text-sm font-medium text-gray-700 mb-1">Job Address</label>
|
||||
<input type="text" id="Job_Address" name="Job_Address" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Job_Address" name="Job_Address" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Job_Type" class="block text-sm font-medium text-gray-700 mb-1">Job Type</label>
|
||||
<select id="Job_Type" name="Job_Type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<select id="Job_Type" name="Job_Type" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
<option value="">Select type...</option>
|
||||
<option value="FX">FX</option>
|
||||
<option value="TM">TM</option>
|
||||
@@ -248,7 +287,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<label for="Job_Status" class="block text-sm font-medium text-gray-700 mb-1">Job Status</label>
|
||||
<select id="Job_Status" name="Job_Status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<select id="Job_Status" name="Job_Status" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
<option value="">Select status...</option>
|
||||
<option value="Estimating">Estimating</option>
|
||||
<option value="Est Sent">Est Sent</option>
|
||||
@@ -266,7 +305,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<label for="Job_Division" class="block text-sm font-medium text-gray-700 mb-1">Job Division</label>
|
||||
<select id="Job_Division" name="Job_Division" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<select id="Job_Division" name="Job_Division" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
<option value="">Select division...</option>
|
||||
<option value="C#">C#</option>
|
||||
<option value="R#">R#</option>
|
||||
@@ -280,12 +319,12 @@
|
||||
<!-- Team & Client Tab Content -->
|
||||
<div id="dashboard-tab-team" class="dashboard-tab-content hidden space-y-6 min-h-[500px]">
|
||||
<!-- Team Assignment Card -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Team Assignment</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="Estimator" class="block text-sm font-medium text-gray-700 mb-1">Estimator</label>
|
||||
<select id="Estimator" name="Estimator" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<select id="Estimator" name="Estimator" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
<option value="">Select estimator...</option>
|
||||
<option value="Beth Cardoza">Beth Cardoza</option>
|
||||
<option value="Steve Brewer">Steve Brewer</option>
|
||||
@@ -294,7 +333,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<label for="Office_Rep" class="block text-sm font-medium text-gray-700 mb-1">Office Rep</label>
|
||||
<select id="Office_Rep" name="Office_Rep" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<select id="Office_Rep" name="Office_Rep" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
<option value="">Select office rep...</option>
|
||||
<option value="Regina McClain">Regina McClain</option>
|
||||
<option value="Beth Cardoza">Beth Cardoza</option>
|
||||
@@ -304,30 +343,30 @@
|
||||
</div>
|
||||
<div>
|
||||
<label for="Project_Manager" class="block text-sm font-medium text-gray-700 mb-1">Project Manager</label>
|
||||
<input type="text" id="Project_Manager" name="Project_Manager" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Project_Manager" name="Project_Manager" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client Information Card -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Client Information</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="Company_Client" class="block text-sm font-medium text-gray-700 mb-1">Company Client</label>
|
||||
<input type="text" id="Company_Client" name="Company_Client" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Company_Client" name="Company_Client" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Contact_Person" class="block text-sm font-medium text-gray-700 mb-1">Contact Person</label>
|
||||
<input type="text" id="Contact_Person" name="Contact_Person" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Contact_Person" name="Contact_Person" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Phone_Number" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
|
||||
<input type="tel" id="Phone_Number" name="Phone_Number" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="tel" id="Phone_Number" name="Phone_Number" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
||||
<input type="email" id="Email" name="Email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="email" id="Email" name="Email" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -336,63 +375,63 @@
|
||||
<!-- Dates & Links Tab Content -->
|
||||
<div id="dashboard-tab-dates" class="dashboard-tab-content hidden space-y-6 min-h-[500px]">
|
||||
<!-- Dates & Scheduling Card -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Dates & Scheduling</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="Start_Date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
|
||||
<input type="date" id="Start_Date" name="Start_Date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="date" id="Start_Date" name="Start_Date" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Due_Date" class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>
|
||||
<input type="date" id="Due_Date" name="Due_Date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="date" id="Due_Date" name="Due_Date" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Submission_Date" class="block text-sm font-medium text-gray-700 mb-1">Submission Date</label>
|
||||
<input type="date" id="Submission_Date" name="Submission_Date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="date" id="Submission_Date" name="Submission_Date" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Due_Date_Source" class="block text-sm font-medium text-gray-700 mb-1">Due Date Source</label>
|
||||
<input type="text" id="Due_Date_Source" name="Due_Date_Source" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Due_Date_Source" name="Due_Date_Source" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Due_Date_Counter" class="block text-sm font-medium text-gray-700 mb-1">Due Date Counter</label>
|
||||
<input type="text" id="Due_Date_Counter" name="Due_Date_Counter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Due_Date_Counter" name="Due_Date_Counter" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Due_Time" class="block text-sm font-medium text-gray-700 mb-1">Due Time</label>
|
||||
<input type="time" id="Due_Time" name="Due_Time" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="time" id="Due_Time" name="Due_Time" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Schedule_Confidence" class="block text-sm font-medium text-gray-700 mb-1">Schedule Confidence</label>
|
||||
<input type="text" id="Schedule_Confidence" name="Schedule_Confidence" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Schedule_Confidence" name="Schedule_Confidence" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Links & References Card -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Links & References</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="Job_QB_Link" class="block text-sm font-medium text-gray-700 mb-1">Job QB Link</label>
|
||||
<input type="url" id="Job_QB_Link" name="Job_QB_Link" placeholder="https://..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="url" id="Job_QB_Link" name="Job_QB_Link" placeholder="https://..." class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Voxer_Link" class="block text-sm font-medium text-gray-700 mb-1">Voxer Link</label>
|
||||
<input type="url" id="Voxer_Link" name="Voxer_Link" placeholder="https://..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="url" id="Voxer_Link" name="Voxer_Link" placeholder="https://..." class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Job_Folder_Link" class="block text-sm font-medium text-gray-700 mb-1">Job Folder Link</label>
|
||||
<input type="url" id="Job_Folder_Link" name="Job_Folder_Link" placeholder="https://..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="url" id="Job_Folder_Link" name="Job_Folder_Link" placeholder="https://..." class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Job_Codes" class="block text-sm font-medium text-gray-700 mb-1">Job Codes</label>
|
||||
<input type="text" id="Job_Codes" name="Job_Codes" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Job_Codes" name="Job_Codes" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label for="Job_Number_Parent" class="block text-sm font-medium text-gray-700 mb-1">Job Number Parent</label>
|
||||
<input type="text" id="Job_Number_Parent" name="Job_Number_Parent" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none text-base">
|
||||
<input type="text" id="Job_Number_Parent" name="Job_Number_Parent" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-base transition-all shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -401,7 +440,7 @@
|
||||
<!-- Status Flags Tab Content -->
|
||||
<div id="dashboard-tab-flags" class="dashboard-tab-content hidden space-y-6 min-h-[500px]">
|
||||
<!-- Status Flags Card -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Status Flags</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="flex items-center">
|
||||
@@ -459,7 +498,7 @@
|
||||
<!-- Notes Tab Content -->
|
||||
<div id="dashboard-tab-notes" class="dashboard-tab-content hidden min-h-[500px]">
|
||||
<!-- Notes Card -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-6">
|
||||
<div class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900">Notes</h3>
|
||||
<button
|
||||
@@ -483,7 +522,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<label for="noteSentiment" class="block text-sm font-medium text-gray-700 mb-1">Sentiment</label>
|
||||
<select id="noteSentiment" name="noteSentiment" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
|
||||
<select id="noteSentiment" name="noteSentiment" class="w-full px-3 py-2 border-2 border-gray-300/60 rounded-xl backdrop-blur-sm bg-white/40 focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/70 outline-none text-sm transition-all shadow-sm">
|
||||
<option value="">Select sentiment...</option>
|
||||
<option value="Positive">Positive</option>
|
||||
<option value="Negative">Negative</option>
|
||||
@@ -517,13 +556,13 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick="closeJobModal()"
|
||||
class="w-full sm:w-auto px-6 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition shadow-sm"
|
||||
class="w-full sm:w-auto px-6 py-2.5 backdrop-blur-sm bg-white/60 border-2 border-gray-300/60 text-gray-700 rounded-xl font-medium hover:bg-white/80 focus:outline-none focus:ring-2 focus:ring-gray-500/50 transition-all shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full sm:w-auto px-6 py-2.5 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition shadow-sm"
|
||||
class="w-full sm:w-auto px-6 py-2.5 backdrop-blur-sm bg-indigo-600/90 text-white rounded-xl font-medium hover:bg-indigo-700/90 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Save Job
|
||||
</button>
|
||||
@@ -536,6 +575,8 @@
|
||||
<script src="js/pocketbase.js"></script>
|
||||
<script src="js/config.js"></script>
|
||||
<script src="js/auth.js"></script>
|
||||
<script src="js/preferences.js"></script>
|
||||
<script src="js/custom-dropdown.js"></script>
|
||||
<script src="js/jobs.js"></script>
|
||||
<script src="js/notes.js"></script>
|
||||
<script>
|
||||
@@ -544,12 +585,43 @@
|
||||
// Check authentication
|
||||
checkAuth();
|
||||
|
||||
// Set user email
|
||||
// Initialize dark mode
|
||||
initializeDarkMode();
|
||||
|
||||
// Set user email and initials
|
||||
const user = pb.authStore.model;
|
||||
if (user) {
|
||||
document.getElementById('userEmail').textContent = user.email || '';
|
||||
const email = user.email || '';
|
||||
document.getElementById('userEmail').textContent = email;
|
||||
|
||||
// Set initials for avatar
|
||||
const initials = email
|
||||
.split('@')[0]
|
||||
.split('.')
|
||||
.map(part => part.charAt(0).toUpperCase())
|
||||
.join('')
|
||||
.substring(0, 2) || 'U';
|
||||
document.getElementById('userInitials').textContent = initials;
|
||||
}
|
||||
|
||||
// Toggle user dropdown
|
||||
function toggleUserDropdown() {
|
||||
const dropdown = document.getElementById('userDropdown');
|
||||
dropdown.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
const dropdown = document.getElementById('userDropdown');
|
||||
const button = document.getElementById('userAvatarBtn');
|
||||
if (dropdown && !dropdown.contains(e.target) && !button.contains(e.target)) {
|
||||
dropdown.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Make function globally accessible
|
||||
window.toggleUserDropdown = toggleUserDropdown;
|
||||
|
||||
// Initialize Quill editor for notes
|
||||
function initNoteEditor() {
|
||||
if (!noteEditor) {
|
||||
@@ -628,6 +700,18 @@
|
||||
// Show notes tab for existing jobs
|
||||
document.getElementById('notesTabButton').classList.remove('hidden');
|
||||
initNoteEditor();
|
||||
// Initialize custom dropdowns after loading job data
|
||||
setTimeout(() => {
|
||||
if (typeof initCustomDropdowns === 'function') {
|
||||
initCustomDropdowns();
|
||||
}
|
||||
// Update dropdown values
|
||||
['Job_Type', 'Job_Status', 'Job_Division', 'Estimator', 'Office_Rep'].forEach(fieldId => {
|
||||
if (typeof updateCustomDropdown === 'function') {
|
||||
updateCustomDropdown(fieldId);
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
} else {
|
||||
document.getElementById('jobForm').reset();
|
||||
@@ -637,6 +721,12 @@
|
||||
document.getElementById('dashboardJobStatus').textContent = '-';
|
||||
// Hide notes tab for new jobs
|
||||
document.getElementById('notesTabButton').classList.add('hidden');
|
||||
// Initialize custom dropdowns for new job
|
||||
setTimeout(() => {
|
||||
if (typeof initCustomDropdowns === 'function') {
|
||||
initCustomDropdowns();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
// Start with overview tab
|
||||
switchDashboardTab('overview');
|
||||
@@ -895,8 +985,20 @@
|
||||
setTimeout(async () => {
|
||||
// Wait for config to load
|
||||
await initConfig();
|
||||
// Load default view from preferences
|
||||
if (typeof getUserPreferences !== 'undefined') {
|
||||
const prefs = await getUserPreferences();
|
||||
if (prefs.defaultView) {
|
||||
currentView = prefs.defaultView;
|
||||
localStorage.setItem('jobsView', currentView);
|
||||
}
|
||||
}
|
||||
await loadEstimatorFilters();
|
||||
await loadStatusFilters();
|
||||
// Initialize custom dropdowns
|
||||
if (typeof initCustomDropdowns === 'function') {
|
||||
initCustomDropdowns();
|
||||
}
|
||||
// Initialize view display
|
||||
if (typeof updateViewDisplay === 'function') {
|
||||
updateViewDisplay();
|
||||
|
||||
Reference in New Issue
Block a user