enhance form issue
This commit is contained in:
1
src/routes/backoffice/vendor/+page.svelte
vendored
1
src/routes/backoffice/vendor/+page.svelte
vendored
@@ -59,7 +59,6 @@
|
||||
{ key: "contact_pos_tertiary", title: "Tertiary Contact Position" },
|
||||
{ key: "contact_email_tertiary", title: "Tertiary Email" },
|
||||
{ key: "website", title: "Website" },
|
||||
{ key: "created_at", title: "Created At" },
|
||||
];
|
||||
const excludedKeys = ["id", "created_by", "created_at", "updated_at"];
|
||||
$: formColumns = columns.filter((col) => !excludedKeys.includes(col.key));
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
// For example, you could handle form submission here
|
||||
import { onMount } from "svelte";
|
||||
import { supabase } from "$lib/supabaseClient";
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
const priority = [
|
||||
{ label: "Low", value: "Low" },
|
||||
@@ -12,11 +11,16 @@
|
||||
{ label: "Critical", value: "Critical" },
|
||||
];
|
||||
const issueSource = [
|
||||
{ label: "Email", value: "Email" },
|
||||
{ label: "Phone Call", value: "Phone Call" },
|
||||
{ label: "In-Person", value: "In-Person" },
|
||||
{ label: "Online Form", value: "Online Form" },
|
||||
{ label: "Other", value: "Other" },
|
||||
{ label: "Guest Assistant", value: "Guest Assistant" },
|
||||
{ label: "Villa Attendant", value: "Villa Attendant" },
|
||||
{ label: "Villa Supervisor", value: "Villa Supervisor" },
|
||||
{ label: "Villa Manager", value: "Villa Manager" },
|
||||
{ label: "Operation Manager", value: "Operation Manager" },
|
||||
{ label: "Quality Control Manager", value: "Quality Control Manager" },
|
||||
{ label: "Owner", value: "Owner" },
|
||||
{ label: "Sales/Reservations", value: "Sales/Reservations" },
|
||||
{ label: "Guest", value: "Guest" },
|
||||
{ label: "Agent", value: "Agent" },
|
||||
];
|
||||
|
||||
const issueTypes = [
|
||||
@@ -29,16 +33,10 @@
|
||||
{ label: "Cleanliness - Floor", value: "Cleanliness - Floor" },
|
||||
{ label: "Cleanliness - Kitchen", value: "Cleanliness - Kitchen" },
|
||||
{ label: "Cleanliness - Bathroom", value: "Cleanliness - Bathroom" },
|
||||
{
|
||||
label: "Maintenance - Electrical",
|
||||
value: "Maintenance - Electrical",
|
||||
},
|
||||
{ label: "Maintenance - Electrical", value: "Maintenance - Electrical",},
|
||||
{ label: "Maintenance - Plumbing", value: "Maintenance - Plumbing" },
|
||||
{ label: "Maintenance - HVAC", value: "Maintenance - HVAC" },
|
||||
{
|
||||
label: "Maintenance - Structural",
|
||||
value: "Maintenance - Structural",
|
||||
},
|
||||
{ label: "Maintenance - Structural", value: "Maintenance - Structural" },
|
||||
{ label: "Safety Issue", value: "Safety Issue" },
|
||||
{ label: "Security Concern", value: "Security Concern" },
|
||||
{ label: "Other", value: "Other" },
|
||||
@@ -72,231 +70,169 @@
|
||||
{ label: "Bedroom 1", value: "Bedroom 1" },
|
||||
{ label: "Bedroom 2", value: "Bedroom 2" },
|
||||
{ label: "Bedroom 3", value: "Bedroom 3" },
|
||||
{ label: "Ceiling", value: "Ceiling" },
|
||||
{ label: "Dining Area", value: "Dining Area" },
|
||||
{ label: "Door", value: "Door" },
|
||||
{ label: "Entrance", value: "Entrance" },
|
||||
{ label: "Kids Room", value: "Kids Room" },
|
||||
{ label: "Garden", value: "Garden" },
|
||||
{ label: "General", value: "General" },
|
||||
{ label: "Glass", value: "Glass" },
|
||||
{ label: "Hallway", value: "Hallway" },
|
||||
{ label: "Kitchen", value: "Kitchen" },
|
||||
{ label: "Laundry Area", value: "Laundry Area" },
|
||||
{ label: "Pump Room", value: "Pump Room" },
|
||||
{ label: "Living Room", value: "Living Room" },
|
||||
{ label: "Outdoor Area", value: "Outdoor Area" },
|
||||
{ label: "Parking Area", value: "Parking Area" },
|
||||
{ label: "Pool Area", value: "Pool Area" },
|
||||
{ label: "Pool", value: "Pool" },
|
||||
{ label: "Roof", value: "Roof" },
|
||||
{ label: "Stairs", value: "Stairs" },
|
||||
{ label: "Storage", value: "Storage" },
|
||||
{ label: "Terrace", value: "Terrace" },
|
||||
{ label: "Toilet", value: "Toilet" },
|
||||
{ label: "Wall", value: "Wall" },
|
||||
{ label: "Staff Room", value: "Staff Room" },
|
||||
{ label: "Transport", value: "Transport" },
|
||||
{ label: "Window", value: "Window" },
|
||||
{ label: "Others", value: "Others" },
|
||||
];
|
||||
|
||||
const inputBy = [
|
||||
{ label: "Admin", value: "Admin" },
|
||||
{ label: "Staff", value: "Staff" },
|
||||
{ label: "Manager", value: "Manager" },
|
||||
{ label: "Guest", value: "Guest" },
|
||||
];
|
||||
//InputBy & reportedBy should dropdown data from active employee, from table vb_employee (field employee_name and employee_status = 'Active')
|
||||
|
||||
const followUp = [
|
||||
{ label: "Yes", value: "true" },
|
||||
{ label: "No", value: "false" },
|
||||
];
|
||||
|
||||
const reportedBy = [
|
||||
{ label: "Admin", value: "Admin" },
|
||||
{ label: "Staff", value: "Staff" },
|
||||
{ label: "Manager", value: "Manager" },
|
||||
{ label: "Guest", value: "Guest" },
|
||||
{ label: "Communication Needed by Reservation", value: "true" },
|
||||
{ label: "Communication Completed", value: "false" },
|
||||
];
|
||||
|
||||
let dataUser: { id: string; employee_name: string }[] = [];
|
||||
let dataVilla: { id: string; villa_name: string }[] = [];
|
||||
let issueImageFile: File | null = null;
|
||||
let issueImageUrl: string = "";
|
||||
let isSubmitting = false;
|
||||
|
||||
function handleFileChange(event: Event): void {
|
||||
const target = event.target as HTMLInputElement;
|
||||
if (target.files && target.files.length > 0) {
|
||||
const file = target.files[0];
|
||||
if (!["image/jpeg", "image/png", "image/webp"].includes(file.type)) {
|
||||
alert("Only JPG, PNG, or WEBP images are allowed.");
|
||||
return;
|
||||
}
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
alert("Image must be less than 2MB.");
|
||||
return;
|
||||
}
|
||||
issueImageFile = file;
|
||||
issueImageUrl = URL.createObjectURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
type Villa = {
|
||||
id: string;
|
||||
villa_name: string;
|
||||
};
|
||||
|
||||
type User = {
|
||||
id: string;
|
||||
employee_name: string;
|
||||
};
|
||||
|
||||
let dataVilla: Villa[] = [];
|
||||
let dataUser: User[] = [];
|
||||
|
||||
onMount(async () => {
|
||||
const { data, error } = await supabase
|
||||
// Fetch active villas
|
||||
const { data: villaData, error: villaError } = await supabase
|
||||
.from("vb_villas")
|
||||
.select("id, villa_name");
|
||||
.select("id, villa_name")
|
||||
.eq("villa_status", "Active");
|
||||
|
||||
if (error) {
|
||||
console.error("Error fetching villas:", error);
|
||||
} else if (data) {
|
||||
dataVilla = data;
|
||||
if (villaError) {
|
||||
console.error("Error fetching villas:", villaError);
|
||||
} else {
|
||||
dataVilla = villaData || [];
|
||||
}
|
||||
|
||||
// Fetch active employees
|
||||
const { data: userData, error: userError } = await supabase
|
||||
.from("vb_employee")
|
||||
.select("id, employee_name");
|
||||
.select("id, employee_name")
|
||||
.eq("employee_status", "Active");
|
||||
|
||||
if (userError) {
|
||||
console.error("Error fetching users:", userError);
|
||||
} else if (userData) {
|
||||
dataUser = userData;
|
||||
console.error("Error fetching employees:", userError);
|
||||
} else {
|
||||
dataUser = userData || [];
|
||||
}
|
||||
});
|
||||
|
||||
type Issue = {
|
||||
name: string;
|
||||
villa_name: string;
|
||||
area_of_villa: string;
|
||||
priority: string;
|
||||
issue_type: string;
|
||||
issue_number: string;
|
||||
move_issue: boolean;
|
||||
description_of_the_issue: string;
|
||||
reported_date: string;
|
||||
issue_related_image: string;
|
||||
issue_source: string;
|
||||
reported_by: string;
|
||||
input_by: string;
|
||||
guest_communication: string;
|
||||
resolution: string;
|
||||
guest_has_aggreed_issue_has_been_resolved: boolean;
|
||||
follow_up: boolean;
|
||||
need_approval: boolean;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
type issueInsert = {
|
||||
name: string;
|
||||
villa_id: string;
|
||||
area_of_villa: string;
|
||||
priority: string;
|
||||
issue_type: string;
|
||||
issue_number: string;
|
||||
move_issue: boolean;
|
||||
description_of_the_issue: string;
|
||||
reported_date: string;
|
||||
issue_related_image: string;
|
||||
issue_source: string;
|
||||
reported_by: string;
|
||||
input_by: string;
|
||||
guest_communication: string;
|
||||
resolution: string;
|
||||
guest_has_aggreed_issue_has_been_resolved: boolean;
|
||||
follow_up: boolean;
|
||||
need_approval: boolean;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
async function handleSubmit(event: Event): Promise<void> {
|
||||
event.preventDefault();
|
||||
isSubmitting = true;
|
||||
|
||||
const formData = new FormData(event.target as HTMLFormElement);
|
||||
try {
|
||||
const formData = new FormData(event.target as HTMLFormElement);
|
||||
|
||||
// Validate form data
|
||||
if (!validateForm(formData)) {
|
||||
console.error("Form validation failed");
|
||||
return;
|
||||
}
|
||||
if (issueImageFile) {
|
||||
const filePath = `issues/${Date.now()}_${issueImageFile.name}`;
|
||||
|
||||
// Upload issue image if provided
|
||||
if (issueImageFile) {
|
||||
const { data, error } = await supabase.storage
|
||||
.from("villabugis")
|
||||
.upload(`issues/${issueImageFile.name}`, issueImageFile);
|
||||
const { data, error } = await supabase.storage
|
||||
.from("villabugis")
|
||||
.upload(filePath, issueImageFile);
|
||||
|
||||
if (error) {
|
||||
alert("Image upload failed");
|
||||
console.error(error);
|
||||
return;
|
||||
}
|
||||
|
||||
const { data: publicData } = supabase.storage
|
||||
.from("villabugis")
|
||||
.getPublicUrl(filePath);
|
||||
|
||||
issueImageUrl = publicData.publicUrl;
|
||||
}
|
||||
|
||||
const issue_number = await generateIssueNumber();
|
||||
|
||||
const issue = {
|
||||
issue_number,
|
||||
name: formData.get("description_of_the_issue") as string,
|
||||
villa_id: formData.get("villa_name") as string,
|
||||
area_of_villa: formData.get("area_of_villa") as string,
|
||||
priority: formData.get("priority") as string,
|
||||
issue_type: formData.get("issue_type") as string,
|
||||
issue_source: formData.get("issue_source") as string,
|
||||
reported_date: formData.get("reported_date") as string,
|
||||
reported_by: formData.get("reported_by") as string,
|
||||
input_by: formData.get("input_by") as string,
|
||||
resolution: formData.get("resloution") as string,
|
||||
guest_has_aggreed_issue_has_been_resolved: formData.get("guest_has_aggreed_issue_has_been_resolved") as string,
|
||||
follow_up: formData.get("follow_up") as string,
|
||||
guest_communication: formData.get("guest_communication") as string,
|
||||
issue_related_image: issueImageUrl,
|
||||
url_drive: formData.get("url_drive") as string,
|
||||
created_at: new Date().toISOString()
|
||||
};
|
||||
|
||||
// Insert into Supabase
|
||||
const { error } = await supabase.from("vb_issues").insert([issue]);
|
||||
|
||||
if (error) {
|
||||
console.error("Error uploading image:", error);
|
||||
alert("Error submitting issue");
|
||||
console.error(error);
|
||||
return;
|
||||
}
|
||||
|
||||
issueImageUrl = data.path; // Assuming data.Key contains the URL or path to the uploaded image
|
||||
}
|
||||
// POST to webhook
|
||||
await fetch("https://flow.catalis.app/webhook/vb-issuecreate", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(issue)
|
||||
});
|
||||
|
||||
const issue: issueInsert = {
|
||||
name: formData.get("name") as string,
|
||||
villa_id: formData.get("villa_name") as string,
|
||||
area_of_villa: formData.get("area_of_villa") as string,
|
||||
priority: formData.get("priority") as string,
|
||||
issue_type: formData.get("issue_type") as string,
|
||||
issue_number: formData.get("issue_number") as string,
|
||||
move_issue: formData.get("move_issue") === "false",
|
||||
description_of_the_issue: formData.get(
|
||||
"description_of_the_issue",
|
||||
) as string,
|
||||
reported_date: formData.get("reported_date") as string,
|
||||
issue_related_image: issueImageUrl,
|
||||
issue_source: formData.get("issue_source") as string,
|
||||
reported_by: formData.get("reported_by") as string,
|
||||
input_by: formData.get("input_by") as string,
|
||||
guest_communication: formData.get("guest_communication") as string,
|
||||
resolution: formData.get("resolution") as string,
|
||||
guest_has_aggreed_issue_has_been_resolved:
|
||||
formData.get("guest_has_aggreed_issue_has_been_resolved") ===
|
||||
"false",
|
||||
follow_up: formData.get("follow_up") === "true" ? true : false,
|
||||
need_approval: false, // Set this based on your logic
|
||||
created_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from("vb_issues")
|
||||
.insert([issue]);
|
||||
|
||||
if (error) {
|
||||
console.error("Error submitting issue:", error);
|
||||
} else {
|
||||
console.log("Issue submitted successfully:", data);
|
||||
alert("Issue submitted successfully!");
|
||||
(event.target as HTMLFormElement).reset();
|
||||
issueImageUrl = "";
|
||||
issueImageFile = null;
|
||||
} catch (err) {
|
||||
alert("Unexpected error");
|
||||
console.error(err);
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function generateIssueNumber(): Promise<string> {
|
||||
const { data } = await supabase
|
||||
.from("vb_issues")
|
||||
.select("issue_number")
|
||||
.order("created_at", { ascending: false })
|
||||
.limit(1);
|
||||
|
||||
export let formErrors = writable<{ [key: string]: string }>({});
|
||||
if (!data || data.length === 0) {
|
||||
return "ISS-000500";
|
||||
}
|
||||
|
||||
function validateForm(formData: FormData): boolean {
|
||||
const errors: { [key: string]: string } = {};
|
||||
const requiredFields = [
|
||||
"description_of_the_issue",
|
||||
"issue_source",
|
||||
"villa_name",
|
||||
"reported_date",
|
||||
"reported_by",
|
||||
"priority",
|
||||
"issue_type",
|
||||
"due_issue_date",
|
||||
"input_by",
|
||||
"area_of_villa",
|
||||
];
|
||||
|
||||
requiredFields.forEach((field) => {
|
||||
if (!formData.get(field) || formData.get(field) === "") {
|
||||
errors[field] = `${field.replace(/_/g, " ")} is required.`;
|
||||
}
|
||||
});
|
||||
|
||||
formErrors.set(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
}
|
||||
|
||||
function errorClass(field: string): string {
|
||||
return $formErrors[field] ? "border-red-500" : "border";
|
||||
const last = data[0].issue_number?.split("-")[1] || "500";
|
||||
const nextNumber = parseInt(last, 10) + 1;
|
||||
return `ISS-${nextNumber.toString().padStart(6, "0")}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -317,304 +253,224 @@
|
||||
</div>
|
||||
<!-- Title -->
|
||||
<h2 class="text-2xl font-semibold text-center">Submit New Issue</h2>
|
||||
|
||||
|
||||
<!-- 2 Column Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Left Column -->
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Description of Issues<span class="text-red-500">*</span
|
||||
></label
|
||||
>
|
||||
<input
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Description of Issues<span class="text-red-500">*</span>
|
||||
<input
|
||||
name="description_of_the_issue"
|
||||
type="text"
|
||||
placeholder="Tell detail of the issue"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
|
||||
'description_of_the_issue',
|
||||
)}"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
required
|
||||
/>
|
||||
{#if $formErrors.description_of_the_issue}
|
||||
<p class="text-sm text-red-500 mt-1">
|
||||
{$formErrors.description_of_the_issue}
|
||||
</p>
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Issue Source<span class="text-red-500">*</span></label
|
||||
>
|
||||
<select
|
||||
name="issue_source"
|
||||
class={`w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600 ${errorClass("issue_source")}`}
|
||||
>
|
||||
<option value="" disabled selected
|
||||
>Select option...</option
|
||||
>
|
||||
{#each issueSource as source}
|
||||
<option value={source.value}>{source.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if $formErrors.issue_source}
|
||||
<p class="text-sm text-red-500 mt-1">
|
||||
{$formErrors.issue_source}
|
||||
</p>
|
||||
{/if}
|
||||
<label class="block text-sm font-medium mb-1">Issue Source
|
||||
<span class="text-red-500">*</span>
|
||||
<select name="issue_source" class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600" required>
|
||||
<option value="" disabled selected>Select option...</option>
|
||||
{#each issueSource as source}
|
||||
<option value={source.value}>{source.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Villa Name<span class="text-red-500">*</span></label
|
||||
>
|
||||
<select
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Villa Name
|
||||
<span class="text-red-500">*</span>
|
||||
<select
|
||||
name="villa_name"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600 {errorClass(
|
||||
'villa_name',
|
||||
)}"
|
||||
>
|
||||
<option value="" disabled selected
|
||||
>Select option...</option
|
||||
>
|
||||
{#each dataVilla as villa}
|
||||
<option value={villa.id}>{villa.villa_name}</option>
|
||||
{/each}
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600" required>
|
||||
<option value="" disabled selected>Select option...</option>
|
||||
{#each dataVilla as villa}
|
||||
<option value={villa.id}>{villa.villa_name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if $formErrors.villa_name}
|
||||
<p class="text-sm text-red-500 mt-1">
|
||||
{$formErrors.villa_name}
|
||||
</p>
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Issue related image</label
|
||||
>
|
||||
<div
|
||||
class="w-full border-2 border-dashed rounded-xl px-4 py-10 text-center text-gray-400 cursor-pointer hover:bg-gray-50 transition relative"
|
||||
>
|
||||
<input
|
||||
name="issue_related_image"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
id="issue_image"
|
||||
on:change={handleFileChange}
|
||||
/>
|
||||
<label for="issue_image" class="cursor-pointer">
|
||||
<span class="block mb-2">Click to upload</span>
|
||||
<span class="text-xs">or drag and drop</span>
|
||||
</label>
|
||||
|
||||
<p class="mt-2 text-xs">
|
||||
Supported formats: JPG, PNG, GIF
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if issueImageUrl}
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-600 mb-2">Preview:</p>
|
||||
<img
|
||||
src={issueImageUrl}
|
||||
alt="Issue preview"
|
||||
class="w-full h-48 object-cover rounded-xl shadow-sm"
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Issue related image
|
||||
<div class="w-full border-2 border-dashed rounded-xl px-4 py-10 text-center text-gray-400 cursor-pointer hover:bg-gray-50 transition relative">
|
||||
<input
|
||||
name="issue_related_image"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
id="issue_image"
|
||||
on:change={handleFileChange}
|
||||
/>
|
||||
<label for="issue_image" class="cursor-pointer">
|
||||
<span class="block mb-2">Click to upload</span>
|
||||
<span class="text-xs">or drag and drop</span>
|
||||
</label>
|
||||
|
||||
<p class="mt-2 text-xs">
|
||||
Supported formats: JPG, PNG, GIF
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if issueImageUrl}
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-600 mb-2">Preview:</p>
|
||||
<img
|
||||
src={issueImageUrl}
|
||||
alt="Issue preview"
|
||||
class="w-full h-48 object-cover rounded-xl shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Date Reported<span class="text-red-500">*</span></label
|
||||
>
|
||||
<input
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Date Reported
|
||||
<span class="text-red-500">*</span>
|
||||
<input
|
||||
name="reported_date"
|
||||
type="date"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
|
||||
'reported_date',
|
||||
)}"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
required
|
||||
/>
|
||||
{#if $formErrors.reported_date}
|
||||
<p class="text-sm text-red-500 mt-1">
|
||||
{$formErrors.reported_date}
|
||||
</p>
|
||||
{/if}
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Reported By<span class="text-red-500">*</span></label
|
||||
>
|
||||
<select
|
||||
name="reported_by"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 text-gray-600 {errorClass(
|
||||
'reported_by',
|
||||
)}"
|
||||
>
|
||||
<option value="" disabled selected
|
||||
>Select option...</option
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Reported By
|
||||
<span class="text-red-500">*</span>
|
||||
<select
|
||||
name="reported_by"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 text-gray-600"
|
||||
required
|
||||
>
|
||||
{#each dataUser as reporter}
|
||||
<option value={reporter.id}>
|
||||
{reporter.employee_name}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if $formErrors.reported_by}
|
||||
<p class="text-sm text-red-500 mt-1">
|
||||
{$formErrors.reported_by}
|
||||
</p>
|
||||
{/if}
|
||||
<option value="" disabled selected>Select option...</option>
|
||||
{#each dataUser as reporter}
|
||||
<option value={reporter.id}>
|
||||
{reporter.employee_name}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>URLDrive</label
|
||||
>
|
||||
<input
|
||||
<label class="block text-sm font-medium mb-1">URLDrive
|
||||
<input
|
||||
name="url_drive"
|
||||
type="url"
|
||||
placeholder="Enter URL"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
/>
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Priority<span class="text-red-500">*</span></label
|
||||
>
|
||||
<select
|
||||
name="priority"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600 {errorClass(
|
||||
'priority',
|
||||
)}"
|
||||
>
|
||||
<option value="" disabled selected
|
||||
>Select option...</option
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Priority
|
||||
<span class="text-red-500">*</span>
|
||||
<select
|
||||
name="priority"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600"
|
||||
required
|
||||
>
|
||||
{#each priority as p}
|
||||
<option value={p.value}>{p.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if $formErrors.priority}
|
||||
<p class="text-sm text-red-500 mt-1">
|
||||
{$formErrors.priority}
|
||||
</p>
|
||||
{/if}
|
||||
<option value="" disabled selected>Select option...</option>
|
||||
{#each priority as p}
|
||||
<option value={p.value}>{p.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Issue Type<span class="text-red-500">*</span></label
|
||||
>
|
||||
<select
|
||||
name="issue_type"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600 {errorClass(
|
||||
'issue_type',
|
||||
)}"
|
||||
>
|
||||
<option value="" disabled selected
|
||||
>Select option...</option
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Issue Type<span class="text-red-500">*</span>
|
||||
<select
|
||||
name="issue_type"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600"
|
||||
required
|
||||
>
|
||||
{#each issueTypes as type}
|
||||
<option value={type.value}>{type.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if $formErrors.issue_type}
|
||||
<p class="text-sm text-red-500 mt-1">
|
||||
{$formErrors.issue_type}
|
||||
</p>
|
||||
{/if}
|
||||
<option value="" disabled selected>Select option...</option>
|
||||
{#each issueTypes as type}
|
||||
<option value={type.value}>{type.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Area of Villa<span class="text-red-500">*</span></label
|
||||
>
|
||||
<select
|
||||
name="area_of_villa"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600 {errorClass(
|
||||
'area_of_villa',
|
||||
)}"
|
||||
>
|
||||
<option value="" disabled selected
|
||||
>Select option...</option
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Area of Villa<span class="text-red-500">*</span>
|
||||
<select
|
||||
name="area_of_villa"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600"
|
||||
required
|
||||
>
|
||||
{#each areaOfVilla as area}
|
||||
<option value={area.value}>{area.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if $formErrors.area_of_villa}
|
||||
<p class="text-sm text-red-500 mt-1">
|
||||
{$formErrors.area_of_villa}
|
||||
</p>
|
||||
{/if}
|
||||
<option value="" disabled selected>Select option...</option>
|
||||
{#each areaOfVilla as area}
|
||||
<option value={area.value}>{area.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Customer / Guest Name</label
|
||||
>
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="Enter text"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
/>
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Customer / Guest Name
|
||||
<input
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="Enter text"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
/>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Due Issue Date<span class="text-red-500">*</span
|
||||
></label
|
||||
>
|
||||
<input
|
||||
name="due_issue_date"
|
||||
type="date"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
|
||||
'due_issue_date',
|
||||
)}"
|
||||
/>
|
||||
{#if $formErrors.due_issue_date}
|
||||
<p class="text-sm text-red-500 mt-1">
|
||||
{$formErrors.due_issue_date}
|
||||
</p>
|
||||
{/if}
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Due Issue Date<span class="text-red-500">*</span>
|
||||
<input
|
||||
name="due_issue_date"
|
||||
type="date"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Input By<span class="text-red-500">*</span></label
|
||||
>
|
||||
<select
|
||||
name="input_by"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600 {errorClass(
|
||||
'input_by',
|
||||
)}"
|
||||
>
|
||||
<option value="" disabled selected
|
||||
>Select option...</option
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Input By<span class="text-red-500">*</span>
|
||||
<select
|
||||
name="input_by"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600"
|
||||
required
|
||||
>
|
||||
{#each dataUser as input}
|
||||
<option value={input.id}>{input.employee_name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if $formErrors.input_by}
|
||||
<p class="text-sm text-red-500 mt-1">
|
||||
{$formErrors.input_by}
|
||||
</p>
|
||||
{/if}
|
||||
<option value="" disabled selected
|
||||
>Select option...</option
|
||||
>
|
||||
{#each dataUser as input}
|
||||
<option value={input.id}>{input.employee_name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Follow Up</label
|
||||
>
|
||||
<select
|
||||
name="follow_up"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600"
|
||||
>
|
||||
<option value="" disabled selected
|
||||
>Select option...</option
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Follow Up
|
||||
<select
|
||||
name="follow_up"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-600"
|
||||
>
|
||||
{#each followUp as follow}
|
||||
<option value={follow.value}>{follow.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<option value="" disabled selected
|
||||
>Select option...</option
|
||||
>
|
||||
{#each followUp as follow}
|
||||
<option value={follow.value}>{follow.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -622,38 +478,36 @@
|
||||
<!-- Full Width Fields -->
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Resolved How?</label
|
||||
>
|
||||
<textarea
|
||||
name="resolution"
|
||||
rows="3"
|
||||
placeholder="How you resolve? e.g. 'copy to project'"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
></textarea>
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Resolved How?
|
||||
<textarea
|
||||
name="resolution"
|
||||
rows="3"
|
||||
placeholder="How you resolve? e.g. 'copy to project'"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1"
|
||||
>Guest Communication</label
|
||||
>
|
||||
<textarea
|
||||
name="guest_communication"
|
||||
rows="3"
|
||||
placeholder="Communication with guest while still in the villa"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
></textarea>
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Guest Communication
|
||||
<textarea
|
||||
name="guest_communication"
|
||||
rows="3"
|
||||
placeholder="Communication with guest while still in the villa"
|
||||
class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<input
|
||||
<label class="text-sm">Guest has agreed issue has been resolved
|
||||
<input
|
||||
name="guest_has_aggreed_issue_has_been_resolved"
|
||||
value="false"
|
||||
type="checkbox"
|
||||
id="guest_agreed"
|
||||
class="h-4 w-4 rounded border-gray-300"
|
||||
/>
|
||||
<label for="guest_agreed" class="text-sm"
|
||||
>Guest has agreed issue has been resolved</label
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -662,8 +516,9 @@
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-purple-600 text-white px-8 py-3 rounded-xl hover:bg-purple-700 transition-all font-medium shadow-md"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Submit
|
||||
{isSubmitting ? "Submitting..." : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user