add estimated project and tasks frontend

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"

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>

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

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>

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"