add estimated project and tasks frontend

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 }}