add estimated project and tasks frontend

resources/js/packages/ui/src/EstimatedTimeProgress.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ estimated: number; current: number }>();
+function formatHours(seconds: number) {
+    return Math.round(seconds / 60 / 60) + 'h';
+}
+
+const isOverEstimate = computed(() => props.current > props.estimated);
+const progressBarPercentage = computed(() => {
+    return (props.current / props.estimated) * 100;
+});
+const formattedProgressBarPercentage = computed(() => {
+    return progressBarPercentage.value.toFixed(1) + '%';
+});
+</script>
+<template>
+    <div class="w-full">
+        <div class="bg-tertiary h-1 rounded relative overflow-hidden w-full">
+            <div
+                class="h-full"
+                :class="{
+                    'bg-accent-200': !isOverEstimate,
+                    'bg-red-500': isOverEstimate,
+                }"
+                :style="{ width: progressBarPercentage + '%' }"></div>
+        </div>
+        <div class="text-xs font-semibold pt-1.5">
+            {{ formattedProgressBarPercentage }} of
+            {{ formatHours(estimated) }}
+        </div>
+    </div>
+</template>
+
+<style scoped></style>

resources/js/packages/ui/src/EstimatedTimeSection.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import DurationInput from '@/packages/ui/src/Input/DurationInput.vue';
+import { ClockIcon } from '@heroicons/vue/20/solid';
+import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
+
+const model = defineModel<number | null>();
+const emit = defineEmits(['submit']);
+</script>
+
+<template>
+    <div class="pt-6">
+        <div class="flex items-center space-x-1 mb-2">
+            <ClockIcon class="text-text-quaternary w-4"></ClockIcon>
+            <InputLabel for="billable" value="Time Estimated" />
+        </div>
+        <DurationInput
+            @submit="emit('submit')"
+            v-model="model"
+            class="max-w-[150px]"></DurationInput>
+    </div>
+</template>
+
+<style scoped></style>

resources/js/packages/ui/src/Input/DurationInput.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { TextInput } from '@/packages/ui/src';
+
+const model = defineModel<number | null>({
+    default: null,
+});
+
+const emit = defineEmits<{
+    submit: [];
+}>();
+
+const temporaryCustomTimerEntry = ref<string>('');
+
+function updateDuration() {
+    const hours = parseInt(temporaryCustomTimerEntry.value);
+    if (!isNaN(hours)) {
+        model.value = hours * 60 * 60;
+    }
+    temporaryCustomTimerEntry.value = '';
+}
+
+const currentTime = computed({
+    get() {
+        if (temporaryCustomTimerEntry.value !== '') {
+            return temporaryCustomTimerEntry.value;
+        }
+        if (model.value === null) {
+            return '';
+        }
+        return Math.round(model.value / 60 / 60).toString();
+    },
+    // setter
+    set(newValue) {
+        if (newValue) {
+            temporaryCustomTimerEntry.value = newValue;
+        } else {
+            temporaryCustomTimerEntry.value = '';
+        }
+    },
+});
+
+function selectInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    target.select();
+}
+
+function updateAndSubmit() {
+    updateDuration();
+    emit('submit');
+}
+</script>
+
+<template>
+    <div class="relative">
+        <TextInput
+            class="w-full overflow-hidden pr-14"
+            placeholder="0"
+            @focus="selectInput"
+            @blur="updateDuration"
+            @keydown.enter="updateAndSubmit"
+            v-model="currentTime">
+        </TextInput>
+        <div
+            class="absolute top-0 right-0 h-full flex items-center px-4 font-medium">
+            <span> hours </span>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>

resources/js/packages/ui/src/Project/ProjectCreateModal.vue

@@ -15,9 +15,11 @@ import ClientDropdown from '@/packages/ui/src/Client/ClientDropdown.vue';
 import Badge from '@/packages/ui/src/Badge.vue';
 import ProjectColorSelector from '@/packages/ui/src/Project/ProjectColorSelector.vue';
 import { UserCircleIcon } from '@heroicons/vue/20/solid';
+import EstimatedTimeSection from '@/packages/ui/src/EstimatedTimeSection.vue';
 import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
 import ProjectEditBillableSection from '@/packages/ui/src/Project/ProjectEditBillableSection.vue';
 import type { Client } from '@/packages/api/src';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
@@ -39,6 +41,7 @@ const project = ref<CreateProjectBody>({
     client_id: null,
     billable_rate: null,
     is_billable: false,
+    estimated_time: null,
 });
 
 async function submit() {
@@ -50,6 +53,7 @@ async function submit() {
         client_id: null,
         billable_rate: null,
         is_billable: false,
+        estimated_time: null,
     };
 }
 
@@ -123,12 +127,22 @@ const currentClientName = computed(() => {
                     </ClientDropdown>
                 </div>
             </div>
-            <ProjectEditBillableSection
-                :currency="currency"
-                v-model:isBillable="project.is_billable"
-                v-model:billableRate="
-                    project.billable_rate
-                "></ProjectEditBillableSection>
+            <div class="lg:grid grid-cols-2 gap-12">
+                <div>
+                    <ProjectEditBillableSection
+                        :currency="currency"
+                        v-model:isBillable="project.is_billable"
+                        v-model:billableRate="
+                            project.billable_rate
+                        "></ProjectEditBillableSection>
+                </div>
+                <div>
+                    <EstimatedTimeSection
+                        v-if="isAllowedToPerformPremiumAction()"
+                        @submit="submit()"
+                        v-model="project.estimated_time"></EstimatedTimeSection>
+                </div>
+            </div>
         </template>
         <template #footer>
             <SecondaryButton @click="show = false"> Cancel</SecondaryButton>

resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue

@@ -4,6 +4,7 @@ import BillableRateInput from '@/packages/ui/src/Input/BillableRateInput.vue';
 import ProjectBillableSelect from '@/packages/ui/src/Project/ProjectBillableSelect.vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import type { BillableKey } from '@/types/projects';
+import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
 
 defineProps<{
     currency: string;
@@ -56,7 +57,11 @@ const emit = defineEmits(['submit']);
 <template>
     <div class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4 pt-6">
         <div>
-            <InputLabel for="billable" value="Billable Default" />
+            <div class="flex items-center space-x-1">
+                <BillableIcon
+                    class="text-text-quaternary h-4 ml-1 mr-0.5"></BillableIcon>
+                <InputLabel for="billable" value="Billable Default" />
+            </div>
             <ProjectBillableSelect
                 v-model="billableRateSelect"
                 class="mt-2"></ProjectBillableSelect>
@@ -72,7 +77,7 @@ const emit = defineEmits(['submit']);
                 name="billableRate" />
         </div>
     </div>
-    <div class="flex items-center text-muted pt-2 pl-1">
+    <div class="flex items-center text-muted text-xs pt-2 pl-1">
         <span>
             <span class="font-semibold"> Info: </span>
             {{ billableOptionInfoText }}

resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue

@@ -165,6 +165,8 @@ watchEffect(() => {
                     is_billable: false,
                     expanded: false,
                     tasks: [],
+                    estimated_time: null,
+                    spent_time: 0,
                 },
             ],
         });