fix billable toggle on time tracker, add billable toggle on time entries row

resources/js/Components/Common/BillableToggleButton.vue

@@ -2,10 +2,21 @@
 import { computed } from 'vue';
 import { twMerge } from 'tailwind-merge';
 const active = defineModel({ default: false });
+const emit = defineEmits(['changed']);
 function toggleBillable() {
     active.value = !active.value;
+    emit('changed', active.value);
 }
 
+const props = withDefaults(
+    defineProps<{
+        size: 'small' | 'base';
+    }>(),
+    {
+        size: 'base',
+    }
+);
+
 const iconColorClasses = computed(() => {
     if (active.value) {
         return 'text-accent-200/80 focus:text-accent-200 hover:text-accent-200';
@@ -13,6 +24,19 @@ const iconColorClasses = computed(() => {
         return 'text-icon-default focus:text-icon-active hover:text-icon-active';
     }
 });
+
+const iconSizeClasses = computed(() => {
+    if (props.size === 'small') {
+        return 'w-5 h-5';
+    } else {
+        return 'w-5 sm:w-6 h-5 sm:h-6';
+    }
+});
+
+const iconSizeWrapperClasses =
+    props.size === 'small'
+        ? 'w-6 sm:w-8 h-6 sm:h-8'
+        : 'w-7 sm:w-10 h-7 sm:h-10';
 </script>
 
 <template>
@@ -21,11 +45,12 @@ const iconColorClasses = computed(() => {
         :class="
             twMerge(
                 iconColorClasses,
-                'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-11 h-7 sm:h-11 flex items-center justify-center'
+                iconSizeWrapperClasses,
+                'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center'
             )
         ">
         <svg
-            class="w-5 sm:w-7 h-5 sm:h-7"
+            :class="iconSizeClasses"
             viewBox="0 0 8 14"
             fill="none"
             xmlns="http://www.w3.org/2000/svg">

resources/js/Components/Common/Tag/TagDropdown.vue

@@ -166,7 +166,7 @@ const highlightedItem = computed(() => {
                     v-if="searchValue.length > 0 && filteredTags.length === 0"
                     class="bg-card-background-active">
                     <div
-                        class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-separator">
+                        class="text-white flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-separator">
                         <PlusCircleIcon
                             class="w-5 flex-shrink-0"></PlusCircleIcon>
                         <span>Add "{{ searchValue }}" as a new Tag</span>

resources/js/Components/Common/TimeEntry/TimeEntryRow.vue

@@ -12,6 +12,7 @@ import dayjs from 'dayjs';
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
 import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
+import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
 
 const currentTimeEntryStore = useCurrentTimeEntryStore();
 const { stopTimer, updateTimer } = currentTimeEntryStore;
@@ -106,6 +107,15 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                     <TimeEntryRowTagDropdown
                         @changed="updateTimeEntryTags"
                         :modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
+                    <BillableToggleButton
+                        :modelValue="timeEntry.billable"
+                        size="small"
+                        @changed="
+                            updateTimeEntry({
+                                ...timeEntry,
+                                billable: $event,
+                            })
+                        "></BillableToggleButton>
                     <div class="flex-1">
                         <TimeEntryRangeSelector
                             :start="timeEntry.start"

resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue

@@ -25,10 +25,10 @@ const iconColorClasses = computed(() => {
                 :class="
                     twMerge(
                         iconColorClasses,
-                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-11 h-7 sm:h-11 flex items-center justify-center'
+                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-10 h-7 sm:h-10 flex items-center justify-center'
                     )
                 ">
-                <TagIcon class="w-5 sm:w-7 h-5 sm:h-7"></TagIcon>
+                <TagIcon class="w-5 sm:w-6 h-5 sm:h-6"></TagIcon>
                 <span
                     v-if="model.length > 1"
                     class="font-extrabold absolute rounded-full text-xs w-3 h-3 block top-[15px] rotate-[45deg] right-[14px] text-card-background">

resources/js/Components/TimeTracker.vue

@@ -180,7 +180,11 @@ function onTimeEntryEnterPress() {
                         v-model="
                             currentTimeEntry.tags
                         "></TimeTrackerTagDropdown>
-                    <BillableToggleButton></BillableToggleButton>
+                    <BillableToggleButton
+                        @changed="updateTimeEntry"
+                        v-model="
+                            currentTimeEntry.billable
+                        "></BillableToggleButton>
                 </div>
                 <div class="border-l border-card-border">
                     <input

resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue

@@ -61,7 +61,7 @@ const updateTeamName = () => {
                 </div>
                 <div>
                     <Link href="/billing">
-                        <PrimaryButton v-if="isBillingActivated()">
+                        <PrimaryButton type="button" v-if="isBillingActivated()">
                             <CreditCardIcon class="w-5 h-5 me-2" />
                             Go to Billing
                         </PrimaryButton>