po Request form

src/routes/purchaseorder/+page.svelte

@@ -3,24 +3,9 @@
   import { supabase } from "$lib/supabaseClient";
   import logo from "$lib/images/logo.webp";
 
-  type TimesheetForm = {
-    entered_by: string;
-    work_description: string;
-    type_of_work: "Running" | "Periodic" | "Irregular";
-    category_of_work:
-      | "Cleaning"
-      | "Gardening/Pool"
-      | "Maintenance"
-      | "Supervision"
-      | "Guest Service"
-      | "Administration"
-      | "Non Billable";
-    villa_id: string;
-    datetime_in: string;
-    datetime_out: string;
-    total_work_hour: number;
-    remarks: string;
-    approval: boolean | null; // Allow null for new entries
+  type POItem = {
+    id: string;
+    item_name: string;
   };
 
   type Villa = {
@@ -33,37 +18,20 @@
     name: string;
   };
 
-  let employees: Employee[] = [];
+  let poItemOptions: POItem[] = [];
   let villas: Villa[] = [];
+  let employees: Employee[] = [];
 
-  let form: TimesheetForm = {
-    entered_by: "",
-    work_description: "",
-    type_of_work: "Running",
-    category_of_work: "Cleaning",
+  let addPOForm = {
+    po_type: "",
     villa_id: "",
-    datetime_in: "",
-    datetime_out: "",
-    total_work_hour: 0,
-    remarks: "",
-    approval: null, // Default null
+    po_item: "",
+    po_quantity: 0,
+    po_remark: "",
+    requested_by: "",
+    requested_date: ""
   };
 
-  const typeOfWorkOptions: TimesheetForm["type_of_work"][] = [
-    "Running",
-    "Periodic",
-    "Irregular",
-  ];
-  const categoryOptions: TimesheetForm["category_of_work"][] = [
-    "Cleaning",
-    "Gardening/Pool",
-    "Maintenance",
-    "Supervision",
-    "Guest Service",
-    "Administration",
-    "Non Billable",
-  ];
-
   onMount(async () => {
     // Fetch villas
     const { data: villaData, error: villaError } = await supabase
@@ -90,49 +58,58 @@
     } else if (empData) {
       employees = empData.map((e) => ({ id: e.id, name: e.employee_name }));
     }
+
+    // Fetch PO Items
+    const { data: poItemData, error: poItemError } = await supabase
+      .from("vb_po_item")
+      .select("id, item_name")
+      .order("item_name", { ascending: true });
+
+    if (poItemError) {
+      console.error("Failed to fetch PO items:", poItemError.message);
+    } else if (poItemData) {
+      poItemOptions = poItemData;
+    }
   });
 
-  function calculateTotalHours() {
-    if (form.datetime_in && form.datetime_out) {
-      const start = new Date(form.datetime_in);
-      const end = new Date(form.datetime_out);
-      const diffInMs = end.getTime() - start.getTime();
-      const hours = diffInMs / (1000 * 60 * 60);
-      form.total_work_hour = Math.max(Number(hours.toFixed(2)), 0);
-    } else {
-      form.total_work_hour = 0;
-    }
-  }
-
   async function submitForm() {
-    calculateTotalHours();
-
-    if (!form.entered_by) {
+    if (!addPOForm.requested_by) {
       alert("Please select an employee.");
       return;
     }
-    if (!form.villa_id) {
+    if (!addPOForm.villa_id) {
       alert("Please select a villa.");
       return;
     }
+    if (!addPOForm.po_item) {
+      alert("Please select a PO item.");
+      return;
+    }
 
-    const { error } = await supabase.from("vb_timesheet").insert([form]);
+    const { error } = await supabase.from("vb_purchase_orders").insert({
+      po_type: addPOForm.po_type,
+      villa_id: addPOForm.villa_id,
+      po_item: addPOForm.po_item,
+      po_quantity: addPOForm.po_quantity,
+      po_status: "requested",
+      po_remark: addPOForm.po_remark,
+      requested_by: addPOForm.requested_by,
+      requested_date: addPOForm.requested_date,
+      created_at: new Date().toISOString()
+    });
 
     if (error) {
-      alert("Failed to submit timesheet: " + error.message);
+      alert("Failed to submit Purchase Order: " + error.message);
     } else {
-      alert("Timesheet submitted successfully!");
-      form = {
-        entered_by: "",
-        work_description: "",
-        type_of_work: "Running",
-        category_of_work: "Cleaning",
+      alert("Purchase Order submitted successfully!");
+      addPOForm = {
+        po_type: "",
         villa_id: "",
-        datetime_in: "",
-        datetime_out: "",
-        total_work_hour: 0,
-        remarks: "",
-        approval: null,
+        po_item: "",
+        po_quantity: 0,
+        po_remark: "",
+        requested_by: "",
+        requested_date: ""
       };
     }
   }
@@ -148,127 +125,64 @@
     <h2 class="text-2xl font-bold text-center mb-6">Timesheet Entry</h2>
 
     <div>
-      <label for="t_eb" class="block text-sm font-medium mb-1">Entered By</label
-      >
-      <select
-        id="t_eb"
-        class="w-full border p-2 rounded"
-        bind:value={form.entered_by}
-        required
-      >
-        <option value="" disabled selected>Select Employee</option>
-        {#each employees as employee}
-          <option value={employee.id}>{employee.name}</option>
-        {/each}
-      </select>
+        <label>PO Type</label>
+        <select bind:value={addPOForm.po_type} class="w-full border p-2">
+          <option value="" disabled>Select PO Type</option>
+          <option value="purchase">Purchase</option>
+          <option value="project">Project</option>
+          <option value="repair">Repair</option>
+        </select>
     </div>
 
     <div>
-      <label for="t_wd" class="block text-sm font-medium mb-1"
-        >Work Description</label
-      >
-      <textarea
-        id="t_wd"
-        class="w-full border border-gray-300 p-2 rounded"
-        bind:value={form.work_description}
-        placeholder="Describe the work"
-        required
-      ></textarea>
+        <label>Villa</label>
+        <select bind:value={addPOForm.villa_id} class="w-full border p-2">
+          <option value="" disabled>Select Villa</option>
+            {#each villas as v}
+            <option value={v.id}>{v.name}</option>        
+          {/each}
+        </select>
     </div>
 
     <div>
-      <label for="t_ow" class="block text-sm font-medium mb-1"
-        >Type of Work</label
-      >
-      <select
-        id="t_ow"
-        class="w-full border p-2 rounded"
-        bind:value={form.type_of_work}
-      >
-        {#each typeOfWorkOptions as option}
-          <option value={option}>{option}</option>
-        {/each}
-      </select>
+      <label>PO Item</label>
+        <select bind:value={addPOForm.po_item} class="w-full border p-2">
+          <option value="" disabled>Select Item</option>
+          {#each poItemOptions as item}
+            <option value={item.item_name}>{item.item_name}</option>
+          {/each}
+        </select>
     </div>
 
     <div>
-      <label for="t_cow" class="block text-sm font-medium mb-1"
-        >Category of Work</label
-      >
-      <select
-        id="t_cow"
-        class="w-full border p-2 rounded"
-        bind:value={form.category_of_work}
-      >
-        {#each categoryOptions as option}
-          <option value={option}>{option}</option>
-        {/each}
-      </select>
+      <label>PO Quantity</label>
+        <input type="number" bind:value={addPOForm.po_quantity} class="w-full border p-2"/>
     </div>
 
     <div>
-      <label for="t_vn" class="block text-sm font-medium mb-1">Villa</label>
-      <select
-        id="t_vn"
-        class="w-full border p-2 rounded"
-        bind:value={form.villa_id}
-        required
-      >
-        <option value="" disabled selected>Select Villa</option>
-        {#each villas as villa}
-          <option value={villa.id}>{villa.name}</option>
-        {/each}
-      </select>
+      <label>PO Remark</label>
+        <textarea bind:value={addPOForm.po_remark} class="w-full border p-2"></textarea>
     </div>
 
     <div>
-      <label for="tdto" class="block text-sm font-medium mb-1"
-        >Date/Time In</label
-      >
-      <input
-        id="tdto"
-        type="datetime-local"
-        class="w-full border p-2 rounded"
-        bind:value={form.datetime_in}
-        on:change={calculateTotalHours}
-        required
-      />
+      <label>Requested By</label>
+        <select bind:value={addPOForm.requested_by} class="w-full border p-2">
+          <option value="" disabled>Select Employee</option>
+          {#each employees as e}
+            <option value={e.id}>{e.name}</option>
+          {/each}
+        </select>
     </div>
 
     <div>
-      <label for="dto" class="block text-sm font-medium mb-1"
-        >Date/Time Out</label
-      >
-      <input
-        id="dto"
-        type="datetime-local"
-        class="w-full border p-2 rounded"
-        bind:value={form.datetime_out}
-        on:change={calculateTotalHours}
-        required
-      />
+      <label>Requested Date</label>
+        <input type="date" bind:value={addPOForm.requested_date} class="w-full border p-2"/>
     </div>
-
-    <div class="text-sm">
-      <label for="ttwo" class="block font-medium mb-1">Total Work Hours</label>
-      <div id="ttwo" class="px-3 py-2">{form.total_work_hour}</div>
-    </div>
-
-    <div>
-      <label for="trmk" class="block text-sm font-medium mb-1">Remarks</label>
-      <textarea
-        id="trmk"
-        class="w-full border border-gray-300 p-2 rounded"
-        bind:value={form.remarks}
-        placeholder="Optional remarks"
-      ></textarea>
-    </div>
-
     <button
       type="submit"
       class="w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition"
     >
-      Submit Timesheet
+      Submit Purchase Order
     </button>
   </form>
 </div>