add estimated project and tasks frontend

resources/js/Components/Common/Project/ProjectEditModal.vue

@@ -17,10 +17,12 @@ import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
 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 ProjectBillableRateModal from '@/packages/ui/src/Project/ProjectBillableRateModal.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import ProjectEditBillableSection from '@/packages/ui/src/Project/ProjectEditBillableSection.vue';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 
 const { updateProject } = useProjectsStore();
 const { clients } = storeToRefs(useClientsStore());
@@ -41,6 +43,7 @@ const project = ref<CreateProjectBody>({
     client_id: props.originalProject.client_id,
     billable_rate: props.originalProject.billable_rate,
     is_billable: props.originalProject.is_billable,
+    estimated_time: props.originalProject.estimated_time,
 });
 
 async function submit() {
@@ -127,13 +130,23 @@ async function submitBillableRate() {
                     </ClientDropdown>
                 </div>
             </div>
-            <ProjectEditBillableSection
-                @submit="submit"
-                :currency="getOrganizationCurrencyString()"
-                v-model:isBillable="project.is_billable"
-                v-model:billableRate="
-                    project.billable_rate
-                "></ProjectEditBillableSection>
+            <div class="lg:grid grid-cols-2 gap-12">
+                <div>
+                    <ProjectEditBillableSection
+                        @submit="submit"
+                        :currency="getOrganizationCurrencyString()"
+                        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/Components/Common/Project/ProjectTable.vue

@@ -49,7 +49,15 @@ const { clients } = storeToRefs(useClientsStore());
             <div
                 data-testid="project_table"
                 class="grid min-w-full"
-                style="grid-template-columns: 1fr 1fr 1fr 150px 80px">
+                style="
+                    grid-template-columns:
+                        1fr minmax(150px, auto) minmax(140px, auto)
+                        minmax(130px, auto) minmax(130px, auto) minmax(
+                            120px,
+                            auto
+                        )
+                        80px;
+                ">
                 <ProjectTableHeading></ProjectTableHeading>
                 <div
                     class="col-span-5 py-24 text-center"

resources/js/Components/Common/Project/ProjectTableHeading.vue

@@ -9,6 +9,12 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
             Name
         </div>
         <div class="px-3 py-1.5 text-left font-semibold text-white">Client</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">
             Billable Rate
         </div>

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -11,6 +11,10 @@ import TableRow from '@/Components/TableRow.vue';
 import ProjectEditModal from '@/Components/Common/Project/ProjectEditModal.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import { getOrganizationCurrencyString } from '@/utils/money';
+import EstimatedTimeProgress from '@/packages/ui/src/EstimatedTimeProgress.vue';
+import UpgradeBadge from '@/Components/Common/UpgradeBadge.vue';
+import { formatHumanReadableDuration } from '../../../packages/ui/src/utils/time';
+import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 
 const { clients } = storeToRefs(useClientsStore());
 const { tasks } = storeToRefs(useTasksStore());
@@ -76,12 +80,30 @@ const showEditProjectModal = ref(false);
             </span>
             <span class="text-muted"> {{ projectTasksCount }} Tasks </span>
         </div>
-        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-            <div v-if="project.client_id">
+        <div class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-muted">
+            <div
+                class="overflow-ellipsis overflow-hidden"
+                v-if="project.client_id">
                 {{ client?.name }}
             </div>
             <div v-else>No client</div>
         </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            <div v-if="project.spent_time">
+                {{ formatHumanReadableDuration(project.spent_time) }}
+            </div>
+            <div v-else>--</div>
+        </div>
+        <div
+            class="whitespace-nowrap px-3 flex items-center text-sm text-muted">
+            <UpgradeBadge
+                v-if="!isAllowedToPerformPremiumAction()"></UpgradeBadge>
+            <EstimatedTimeProgress
+                v-else-if="project.estimated_time"
+                :estimated="project.estimated_time"
+                :current="project.spent_time"></EstimatedTimeProgress>
+            <span v-else> -- </span>
+        </div>
         <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
             {{ billableRateInfo }}
         </div>