add relation timesheet -> employee
This commit is contained in:
@@ -1,188 +1,241 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { supabase } from '$lib/supabaseClient';
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
type Villa = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
let villas: Villa[] = [];
|
||||
|
||||
let form: TimesheetForm = {
|
||||
entered_by: '',
|
||||
work_description: '',
|
||||
type_of_work: 'Running',
|
||||
category_of_work: 'Cleaning',
|
||||
villa_id: '',
|
||||
datetime_in: '',
|
||||
datetime_out: '',
|
||||
total_work_hour: 0,
|
||||
remarks: '',
|
||||
approval: false
|
||||
};
|
||||
|
||||
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 () => {
|
||||
const { data, error } = await supabase
|
||||
.from('vb_villas')
|
||||
.select('id, villa_name, villa_status')
|
||||
.eq('villa_status', 'Active');
|
||||
|
||||
if (error) {
|
||||
console.error('Failed to fetch villas:', error.message);
|
||||
} else {
|
||||
villas = data.map(v => ({
|
||||
id: v.id,
|
||||
name: v.villa_name
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
function calculateTotalHours() {
|
||||
import { onMount } from 'svelte';
|
||||
import { supabase } from '$lib/supabaseClient';
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
type Villa = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
type Employee = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
let employees: Employee[] = [];
|
||||
let villas: Villa[] = [];
|
||||
|
||||
let form: TimesheetForm = {
|
||||
entered_by: '',
|
||||
work_description: '',
|
||||
type_of_work: 'Running',
|
||||
category_of_work: 'Cleaning',
|
||||
villa_id: '',
|
||||
datetime_in: '',
|
||||
datetime_out: '',
|
||||
total_work_hour: 0,
|
||||
remarks: '',
|
||||
approval: false,
|
||||
};
|
||||
|
||||
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
|
||||
.from('vb_villas')
|
||||
.select('id, villa_name, villa_status')
|
||||
.eq('villa_status', 'Active');
|
||||
|
||||
if (villaError) {
|
||||
console.error('Failed to fetch villas:', villaError.message);
|
||||
} else if (villaData) {
|
||||
villas = villaData.map((v) => ({ 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 }));
|
||||
}
|
||||
});
|
||||
|
||||
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();
|
||||
|
||||
// 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);
|
||||
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;
|
||||
form.total_work_hour = 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
calculateTotalHours();
|
||||
|
||||
if (!form.entered_by) {
|
||||
alert('Please select an employee.');
|
||||
return;
|
||||
}
|
||||
if (!form.villa_id) {
|
||||
alert('Please select a villa.');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
async function submitForm() {
|
||||
calculateTotalHours();
|
||||
|
||||
const { error } = await supabase.from('vb_timesheet').insert([form]);
|
||||
|
||||
if (error) {
|
||||
alert('Failed to submit timesheet: ' + error.message);
|
||||
} else {
|
||||
alert('Timesheet submitted successfully!');
|
||||
form = {
|
||||
entered_by: '',
|
||||
work_description: '',
|
||||
type_of_work: 'Running',
|
||||
category_of_work: 'Cleaning',
|
||||
villa_id: '',
|
||||
datetime_in: '',
|
||||
datetime_out: '',
|
||||
total_work_hour: 0,
|
||||
remarks: '',
|
||||
approval: false
|
||||
};
|
||||
}
|
||||
const { error } = await supabase.from('vb_timesheet').insert([form]);
|
||||
|
||||
if (error) {
|
||||
alert('Failed to submit timesheet: ' + error.message);
|
||||
} else {
|
||||
alert('Timesheet submitted successfully!');
|
||||
form = {
|
||||
entered_by: '',
|
||||
work_description: '',
|
||||
type_of_work: 'Running',
|
||||
category_of_work: 'Cleaning',
|
||||
villa_id: '',
|
||||
datetime_in: '',
|
||||
datetime_out: '',
|
||||
total_work_hour: 0,
|
||||
remarks: '',
|
||||
approval: false,
|
||||
};
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={submitForm} class="space-y-4 max-w-md mx-auto p-4">
|
||||
<h2 class="text-xl font-bold mb-4">Timesheet Entry</h2>
|
||||
|
||||
<input
|
||||
class="w-full border p-2 rounded"
|
||||
bind:value={form.entered_by}
|
||||
placeholder="Entered by"
|
||||
required
|
||||
/>
|
||||
|
||||
<textarea
|
||||
class="w-full border p-2 rounded"
|
||||
bind:value={form.work_description}
|
||||
placeholder="Work Description"
|
||||
required
|
||||
></textarea>
|
||||
|
||||
<select class="w-full border p-2 rounded" bind:value={form.type_of_work}>
|
||||
{#each typeOfWorkOptions as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<select class="w-full border p-2 rounded" bind:value={form.category_of_work}>
|
||||
{#each categoryOptions as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<select class="w-full border p-2 rounded" bind:value={form.villa_id} required>
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-gray-100 flex items-center justify-center">
|
||||
<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}
|
||||
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
|
||||
id="t_wd"
|
||||
class="w-full border border-gray-300 p-2 rounded"
|
||||
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>
|
||||
<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}
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
|
||||
<label class="block">
|
||||
</select>
|
||||
</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>
|
||||
|
||||
<label class="block">
|
||||
</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>
|
||||
|
||||
<div class="text-sm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
class="w-full border p-2 rounded"
|
||||
bind:value={form.remarks}
|
||||
placeholder="Remarks"
|
||||
></textarea>
|
||||
|
||||
<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"
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user