add estimated project and tasks frontend

resources/js/Components/Common/Task/TaskCreateModal.vue

@@ -7,12 +7,15 @@ import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
 import { useTasksStore } from '@/utils/useTasks';
 import ProjectDropdown from '@/Components/Common/Project/ProjectDropdown.vue';
+import EstimatedTimeSection from '@/packages/ui/src/EstimatedTimeSection.vue';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 
 const { createTask } = useTasksStore();
 const show = defineModel('show', { default: false });
 const saving = ref(false);
 
 const taskName = ref('');
+const estimatedTime = ref<number | null>(null);
 
 const props = defineProps<{
     projectId: string;
@@ -22,6 +25,7 @@ async function submit() {
     await createTask({
         name: taskName.value,
         project_id: props.projectId,
+        estimated_time: estimatedTime.value,
     });
     show.value = false;
     taskName.value = '';
@@ -58,6 +62,10 @@ useFocus(taskNameInput, { initialValue: true });
                     <ProjectDropdown :modelValue="projectId"></ProjectDropdown>
                 </div>
             </div>
+            <EstimatedTimeSection
+                v-if="isAllowedToPerformPremiumAction()"
+                @submit="submit()"
+                v-model="estimatedTime"></EstimatedTimeSection>
         </template>
         <template #footer>
             <SecondaryButton @click="show = false"> Cancel </SecondaryButton>

resources/js/Components/Common/Task/TaskEditModal.vue

@@ -7,6 +7,8 @@ import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
 import { useTasksStore } from '@/utils/useTasks';
 import type { Task, UpdateTaskBody } from '@/packages/api/src';
+import EstimatedTimeSection from '@/packages/ui/src/EstimatedTimeSection.vue';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 
 const { updateTask } = useTasksStore();
 const show = defineModel('show', { default: false });
@@ -18,6 +20,7 @@ const props = defineProps<{
 
 const taskBody = ref<UpdateTaskBody>({
     name: props.task.name,
+    estimated_time: props.task.estimated_time,
 });
 
 async function submit() {
@@ -34,7 +37,7 @@ useFocus(taskNameInput, { initialValue: true });
     <DialogModal closeable :show="show" @close="show = false">
         <template #title>
             <div class="flex space-x-2">
-                <span> Create Task </span>
+                <span> Update Task </span>
             </div>
         </template>
 
@@ -53,6 +56,10 @@ useFocus(taskNameInput, { initialValue: true });
                         autocomplete="taskName" />
                 </div>
             </div>
+            <EstimatedTimeSection
+                v-if="isAllowedToPerformPremiumAction()"
+                @submit="submit()"
+                v-model="taskBody.estimated_time"></EstimatedTimeSection>
         </template>
         <template #footer>
             <SecondaryButton @click="show = false"> Cancel </SecondaryButton>

resources/js/Components/Common/Task/TaskTable.vue

@@ -27,7 +27,14 @@ const createTask = ref(false);
                 data-testid="task_table"
                 role="table"
                 class="grid min-w-full"
-                style="grid-template-columns: 1fr 150px 80px">
+                style="
+                    grid-template-columns:
+                        1fr minmax(80px, auto) minmax(120px, auto) minmax(
+                            50px,
+                            auto
+                        )
+                        80px;
+                ">
                 <TaskTableHeading></TaskTableHeading>
                 <div
                     class="col-span-5 py-24 text-center"

resources/js/Components/Common/Task/TaskTableHeading.vue

@@ -8,6 +8,12 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
             class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Task Name
         </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Total Time
+        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Progress
+        </div>
         <div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>

resources/js/Components/Common/Task/TaskTableRow.vue

@@ -7,6 +7,10 @@ import TableRow from '@/Components/TableRow.vue';
 import { canDeleteTasks } from '@/utils/permissions';
 import TaskEditModal from '@/Components/Common/Task/TaskEditModal.vue';
 import { ref } from 'vue';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+import EstimatedTimeProgress from '@/packages/ui/src/EstimatedTimeProgress.vue';
+import UpgradeBadge from '@/Components/Common/UpgradeBadge.vue';
+import { formatHumanReadableDuration } from '../../../packages/ui/src/utils/time';
 
 const props = defineProps<{
     task: Task;
@@ -29,11 +33,28 @@ const showTaskEditModal = ref(false);
 <template>
     <TableRow>
         <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
-            <span>
+            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            <span class="overflow-ellipsis overflow-hidden">
                 {{ task.name }}
             </span>
         </div>
+        <div
+            class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
+            <span v-if="task.spent_time">
+                {{ formatHumanReadableDuration(task.spent_time) }}
+            </span>
+            <span v-else> -- </span>
+        </div>
+        <div
+            class="whitespace-nowrap px-3 flex items-center text-sm text-muted">
+            <UpgradeBadge
+                v-if="!isAllowedToPerformPremiumAction()"></UpgradeBadge>
+            <EstimatedTimeProgress
+                v-else-if="task.estimated_time"
+                :estimated="task.estimated_time"
+                :current="task.spent_time"></EstimatedTimeProgress>
+            <span v-else> -- </span>
+        </div>
         <div
             class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
             <template v-if="task.is_done">