add relation timesheet -> employee

src/routes/timesheet/+page.svelte

@@ -27,6 +27,12 @@
     name: string;
   };
 
+  type Employee = {
+    id: string;
+    name: string;
+  };
+
+  let employees: Employee[] = [];
   let villas: Villa[] = [];
 
   let form: TimesheetForm = {
@@ -39,7 +45,7 @@
     datetime_out: '',
     total_work_hour: 0,
     remarks: '',
-      approval: false
+    approval: false,
   };
 
   const typeOfWorkOptions: TimesheetForm['type_of_work'][] = ['Running', 'Periodic', 'Irregular'];
@@ -50,22 +56,32 @@
     'Supervision',
     'Guest Service',
     'Administration',
-      'Non Billable'
+    'Non Billable',
   ];
 
   onMount(async () => {
-      const { data, error } = await supabase
+    // Fetch villas
+    const { data: villaData, error: villaError } = await supabase
       .from('vb_villas')
       .select('id, villa_name, villa_status')
       .eq('villa_status', 'Active');
 
-      if (error) {
+    if (villaError) {
-        console.error('Failed to fetch villas:', error.message);
+      console.error('Failed to fetch villas:', villaError.message);
-      } else {
+    } else if (villaData) {
-        villas = data.map(v => ({
+      villas = villaData.map((v) => ({ id: v.id, name: v.villa_name }));
-            id: v.id,
+    }
-            name: v.villa_name
+
-        }));
+    // Fetch employees
+    const { data: empData, error: empError } = await supabase
+      .from('vb_employee')
+      .select('id, employee_name')
+      .eq('employee_status', 'Active');
+
+    if (empError) {
+      console.error('Failed to fetch employees:', empError.message);
+    } else if (empData) {
+      employees = empData.map((e) => ({ id: e.id, name: e.employee_name }));
     }
   });
 
@@ -74,8 +90,6 @@
       const start = new Date(form.datetime_in);
       const end = new Date(form.datetime_out);
       const diffInMs = end.getTime() - start.getTime();
-
-        // Convert milliseconds to hours (with decimal), round to 2 decimal places
       const hours = diffInMs / (1000 * 60 * 60);
       form.total_work_hour = Math.max(Number(hours.toFixed(2)), 0);
     } else {
@@ -83,10 +97,18 @@
     }
   }
 
-  
   async function submitForm() {
     calculateTotalHours();
 
+    if (!form.entered_by) {
+      alert('Please select an employee.');
+      return;
+    }
+    if (!form.villa_id) {
+      alert('Please select a villa.');
+      return;
+    }
+
     const { error } = await supabase.from('vb_timesheet').insert([form]);
 
     if (error) {
@@ -103,86 +125,117 @@
         datetime_out: '',
         total_work_hour: 0,
         remarks: '',
-          approval: false
+        approval: false,
       };
     }
   }
 </script>
 
-  
+<div class="min-h-screen bg-gray-100 flex items-center justify-center">
-  <form on:submit|preventDefault={submitForm} class="space-y-4 max-w-md mx-auto p-4">
+  <form
+    on:submit|preventDefault={submitForm}
+    class="w-full max-w-lg bg-white p-6 rounded-2xl shadow-xl space-y-4"
+  >
+    <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}
-      bind:value={form.entered_by}
         required
-      required
+      >
+        <option value="" disabled selected>Select Employee</option>
+        {#each employees as employee}
+          <option value={employee.id}>{employee.name}</option>
+        {/each}
+      </select>
+    </div>
 
+    <div>
+      <label for="t_wd" class="block text-sm font-medium mb-1">Work Description</label>
       <textarea
-    <textarea
+        id="t_wd"
+        class="w-full border border-gray-300 p-2 rounded"
         bind:value={form.work_description}
-      bind:value={form.work_description}
+        placeholder="Describe the work"
         required
       ></textarea>
+    </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>
+    </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>
+    </div>
 
-  
+    <div>
-    <select class="w-full border p-2 rounded" bind:value={form.villa_id} required>
+      <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>
+    </div>
 
-      
+    <div>
-  
+      <label for="tdto" class="block text-sm font-medium mb-1">Date/Time In</label>
-    <label class="block">
       <input
+        id="tdto"
         type="datetime-local"
         class="w-full border p-2 rounded"
         bind:value={form.datetime_in}
         on:change={calculateTotalHours}
         required
       />
-      />
+    </div>
 
-  
+    <div>
-    <label class="block">
+      <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>
-  
-    <div class="text-sm">
     </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
-    <textarea
+        id="trmk"
+        class="w-full border border-gray-300 p-2 rounded"
         bind:value={form.remarks}
-      bind:value={form.remarks}
+        placeholder="Optional remarks"
       ></textarea>
+    </div>
 
     <button
       type="submit"
-      type="submit"
+      class="w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition"
     >
       Submit Timesheet
     </button>
   </form>
-  </form>
+</div>