From a6528102fe924260ae49c15af843d405ce3efe12 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Sat, 28 Sep 2024 22:56:33 +0200
Subject: [PATCH] add estimated project and tasks frontend

---
 .../Common/Member/MemberInviteModal.vue       | 17 ++---
 .../Common/Project/ProjectEditModal.vue       | 27 +++++--
 .../Common/Project/ProjectTable.vue           | 10 ++-
 .../Common/Project/ProjectTableHeading.vue    |  6 ++
 .../Common/Project/ProjectTableRow.vue        | 26 ++++++-
 .../Common/Task/TaskCreateModal.vue           |  8 +++
 .../Components/Common/Task/TaskEditModal.vue  |  9 ++-
 .../js/Components/Common/Task/TaskTable.vue   |  9 ++-
 .../Common/Task/TaskTableHeading.vue          |  6 ++
 .../Components/Common/Task/TaskTableRow.vue   | 25 ++++++-
 .../js/Components/Common/UpgradeBadge.vue     | 13 ++++
 .../Components/Dashboard/ThisWeekOverview.vue |  2 +-
 resources/js/Layouts/AppLayout.vue            |  2 +-
 .../packages/api/src/openapi.json.client.ts   | 13 +++-
 .../packages/ui/src/EstimatedTimeProgress.vue | 35 +++++++++
 .../packages/ui/src/EstimatedTimeSection.vue  | 23 ++++++
 .../packages/ui/src/Input/DurationInput.vue   | 71 +++++++++++++++++++
 .../ui/src/Project/ProjectCreateModal.vue     | 26 +++++--
 .../Project/ProjectEditBillableSection.vue    |  9 ++-
 .../TimeTrackerProjectTaskDropdown.vue        |  2 +
 resources/js/utils/billing.ts                 |  9 +++
 21 files changed, 310 insertions(+), 38 deletions(-)
 create mode 100644 resources/js/Components/Common/UpgradeBadge.vue
 create mode 100644 resources/js/packages/ui/src/EstimatedTimeProgress.vue
 create mode 100644 resources/js/packages/ui/src/EstimatedTimeSection.vue
 create mode 100644 resources/js/packages/ui/src/Input/DurationInput.vue

diff --git a/resources/js/Components/Common/Member/MemberInviteModal.vue b/resources/js/Components/Common/Member/MemberInviteModal.vue
index b44c865c..40e0f91a 100644
--- a/resources/js/Components/Common/Member/MemberInviteModal.vue
+++ b/resources/js/Components/Common/Member/MemberInviteModal.vue
@@ -2,7 +2,7 @@
 import TextInput from '@/packages/ui/src/Input/TextInput.vue';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
 import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
@@ -12,9 +12,8 @@ import { Link, useForm } from '@inertiajs/vue3';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { filterRoles } from '@/utils/roles';
 import {
-    hasActiveSubscription,
+    isAllowedToPerformPremiumAction,
     isBillingActivated,
-    isInTrial,
 } from '@/utils/billing';
 import { CreditCardIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
 import { canManageBilling, canUpdateOrganization } from '@/utils/permissions';
@@ -84,14 +83,6 @@ async function submit() {
 
 const clientNameInput = ref<HTMLInputElement | null>(null);
 useFocus(clientNameInput, { initialValue: true });
-
-const inviteMembersIsAllowed = computed(() => {
-    return (
-        !isBillingActivated() ||
-        (isBillingActivated() && hasActiveSubscription()) ||
-        (isBillingActivated() && isInTrial())
-    );
-});
 </script>
 
 <template>
@@ -103,7 +94,7 @@ const inviteMembersIsAllowed = computed(() => {
         </template>
 
         <template #content>
-            <div v-if="!inviteMembersIsAllowed">
+            <div v-if="!isAllowedToPerformPremiumAction()">
                 <div
                     class="rounded-full flex items-center justify-center w-20 h-20 mx-auto border border-border-tertiary bg-secondary">
                     <UserGroupIcon class="w-12"></UserGroupIcon>
@@ -215,7 +206,7 @@ const inviteMembersIsAllowed = computed(() => {
         <template #footer>
             <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
             <PrimaryButton
-                v-if="inviteMembersIsAllowed"
+                v-if="isAllowedToPerformPremiumAction()"
                 class="ms-3"
                 :class="{ 'opacity-25': saving }"
                 :disabled="saving"
diff --git a/resources/js/Components/Common/Project/ProjectEditModal.vue b/resources/js/Components/Common/Project/ProjectEditModal.vue
index c7ac545a..987b84a6 100644
--- a/resources/js/Components/Common/Project/ProjectEditModal.vue
+++ b/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>
diff --git a/resources/js/Components/Common/Project/ProjectTable.vue b/resources/js/Components/Common/Project/ProjectTable.vue
index 9937b65a..c7766e1a 100644
--- a/resources/js/Components/Common/Project/ProjectTable.vue
+++ b/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"
diff --git a/resources/js/Components/Common/Project/ProjectTableHeading.vue b/resources/js/Components/Common/Project/ProjectTableHeading.vue
index 41c281a7..66d3ae65 100644
--- a/resources/js/Components/Common/Project/ProjectTableHeading.vue
+++ b/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>
diff --git a/resources/js/Components/Common/Project/ProjectTableRow.vue b/resources/js/Components/Common/Project/ProjectTableRow.vue
index 54575cbf..28cd4a20 100644
--- a/resources/js/Components/Common/Project/ProjectTableRow.vue
+++ b/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>
diff --git a/resources/js/Components/Common/Task/TaskCreateModal.vue b/resources/js/Components/Common/Task/TaskCreateModal.vue
index 18e98e9b..3fe6773f 100644
--- a/resources/js/Components/Common/Task/TaskCreateModal.vue
+++ b/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>
diff --git a/resources/js/Components/Common/Task/TaskEditModal.vue b/resources/js/Components/Common/Task/TaskEditModal.vue
index 2cacef25..56b22c90 100644
--- a/resources/js/Components/Common/Task/TaskEditModal.vue
+++ b/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>
diff --git a/resources/js/Components/Common/Task/TaskTable.vue b/resources/js/Components/Common/Task/TaskTable.vue
index a7192994..7d34bad8 100644
--- a/resources/js/Components/Common/Task/TaskTable.vue
+++ b/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"
diff --git a/resources/js/Components/Common/Task/TaskTableHeading.vue b/resources/js/Components/Common/Task/TaskTableHeading.vue
index 001d6c34..4afe5032 100644
--- a/resources/js/Components/Common/Task/TaskTableHeading.vue
+++ b/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>
diff --git a/resources/js/Components/Common/Task/TaskTableRow.vue b/resources/js/Components/Common/Task/TaskTableRow.vue
index 16e9f812..fca220e2 100644
--- a/resources/js/Components/Common/Task/TaskTableRow.vue
+++ b/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">
diff --git a/resources/js/Components/Common/UpgradeBadge.vue b/resources/js/Components/Common/UpgradeBadge.vue
new file mode 100644
index 00000000..62ef4c9a
--- /dev/null
+++ b/resources/js/Components/Common/UpgradeBadge.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { LockClosedIcon } from '@heroicons/vue/20/solid';
+</script>
+
+<template>
+    <div
+        class="inline-flex bg-secondary hover:bg-tertiary px-2 py-1 rounded border border-border-secondary hover:border-border-tertiary items-center space-x-1">
+        <LockClosedIcon class="w-3 text-text-tertiary"></LockClosedIcon>
+        <span class="text-xs text-text-secondary font-semibold"> Upgrade </span>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Dashboard/ThisWeekOverview.vue b/resources/js/Components/Dashboard/ThisWeekOverview.vue
index 285bc000..08ed15cf 100644
--- a/resources/js/Components/Dashboard/ThisWeekOverview.vue
+++ b/resources/js/Components/Dashboard/ThisWeekOverview.vue
@@ -189,7 +189,7 @@ const option = ref({
         </div>
         <div class="space-y-6">
             <StatCard
-                title="Total Time"
+                title="Spent Time"
                 :value="formatHumanReadableDuration(props.totalWeeklyTime)" />
             <StatCard
                 title="Billable Time"
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 47d815d1..99bfc784 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -92,7 +92,7 @@ const page = usePage<{
                     <CurrentSidebarTimer></CurrentSidebarTimer>
                 </div>
                 <div
-                    class="overflow-y-scroll flex-1 w-[calc(100%+10px)]"
+                    class="overflow-y-scroll flex-1 w-full"
                     style="
                         scrollbar-width: thin;
                         scrollbar-color: var(--color-bg-primary) transparent;
diff --git a/resources/js/packages/api/src/openapi.json.client.ts b/resources/js/packages/api/src/openapi.json.client.ts
index e1c9df03..ea962f36 100644
--- a/resources/js/packages/api/src/openapi.json.client.ts
+++ b/resources/js/packages/api/src/openapi.json.client.ts
@@ -68,6 +68,8 @@ const ProjectResource = z
         is_archived: z.boolean(),
         billable_rate: z.union([z.number(), z.null()]),
         is_billable: z.boolean(),
+        estimated_time: z.union([z.number(), z.null()]),
+        spent_time: z.number().int(),
     })
     .passthrough();
 const ProjectStoreRequest = z
@@ -77,6 +79,7 @@ const ProjectStoreRequest = z
         is_billable: z.boolean(),
         billable_rate: z.union([z.number(), z.null()]).optional(),
         client_id: z.union([z.string(), z.null()]).optional(),
+        estimated_time: z.union([z.number(), z.null()]).optional(),
     })
     .passthrough();
 const ProjectUpdateRequest = z
@@ -87,6 +90,7 @@ const ProjectUpdateRequest = z
         is_archived: z.boolean().optional(),
         client_id: z.union([z.string(), z.null()]).optional(),
         billable_rate: z.union([z.number(), z.null()]).optional(),
+        estimated_time: z.union([z.number(), z.null()]).optional(),
     })
     .passthrough();
 const ProjectMemberResource = z
@@ -128,17 +132,24 @@ const TaskResource = z
         name: z.string(),
         is_done: z.boolean(),
         project_id: z.string(),
+        estimated_time: z.union([z.number(), z.null()]),
+        spent_time: z.number().int(),
         created_at: z.string(),
         updated_at: z.string(),
     })
     .passthrough();
 const TaskStoreRequest = z
-    .object({ name: z.string().min(1).max(255), project_id: z.string() })
+    .object({
+        name: z.string().min(1).max(255),
+        project_id: z.string(),
+        estimated_time: z.union([z.number(), z.null()]).optional(),
+    })
     .passthrough();
 const TaskUpdateRequest = z
     .object({
         name: z.string().min(1).max(255),
         is_done: z.boolean().optional(),
+        estimated_time: z.union([z.number(), z.null()]).optional(),
     })
     .passthrough();
 const start = z.union([z.string(), z.null()]).optional();
diff --git a/resources/js/packages/ui/src/EstimatedTimeProgress.vue b/resources/js/packages/ui/src/EstimatedTimeProgress.vue
new file mode 100644
index 00000000..b7a487c7
--- /dev/null
+++ b/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>
diff --git a/resources/js/packages/ui/src/EstimatedTimeSection.vue b/resources/js/packages/ui/src/EstimatedTimeSection.vue
new file mode 100644
index 00000000..56138535
--- /dev/null
+++ b/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>
diff --git a/resources/js/packages/ui/src/Input/DurationInput.vue b/resources/js/packages/ui/src/Input/DurationInput.vue
new file mode 100644
index 00000000..8b6b2fcb
--- /dev/null
+++ b/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>
diff --git a/resources/js/packages/ui/src/Project/ProjectCreateModal.vue b/resources/js/packages/ui/src/Project/ProjectCreateModal.vue
index f418c94e..37174f55 100644
--- a/resources/js/packages/ui/src/Project/ProjectCreateModal.vue
+++ b/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>
diff --git a/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue b/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
index f4ea40e0..b93bd046 100644
--- a/resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue
+++ b/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 }}
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index 2117f43a..91d640c8 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/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,
                 },
             ],
         });
diff --git a/resources/js/utils/billing.ts b/resources/js/utils/billing.ts
index dbef354a..34ba995f 100644
--- a/resources/js/utils/billing.ts
+++ b/resources/js/utils/billing.ts
@@ -57,3 +57,12 @@ export function hasActiveSubscription() {
 
     return page.props.billing.has_subscription;
 }
+
+export function isAllowedToPerformPremiumAction() {
+    return true;
+    return (
+        !isBillingActivated() ||
+        (isBillingActivated() && hasActiveSubscription()) ||
+        (isBillingActivated() && isInTrial())
+    );
+}