add select and deselect all on time and detailed reporting view

resources/css/filament/admin/tailwind.config.js

@@ -1,4 +1,4 @@
-import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
+import preset from '../../../../vendor/filament/filament/tailwind.config.preset';
 
 export default {
     presets: [preset],
@@ -7,4 +7,4 @@ export default {
         './resources/views/filament/**/*.blade.php',
         './vendor/filament/**/*.blade.php',
     ],
-}
+};

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

@@ -5,15 +5,19 @@ import TimeEntryMassUpdateModal from '@/Components/Common/TimeEntry/TimeEntryMas
 import type { TimeEntry } from '@/packages/api/src';
 import { ref } from 'vue';
 import { twMerge } from 'tailwind-merge';
+import { Checkbox, InputLabel } from '@/packages/ui/src';
 
 const props = defineProps<{
     selectedTimeEntries: TimeEntry[];
     deleteSelected: () => void;
     class?: string;
+    allSelected: boolean;
 }>();
 
 const emit = defineEmits<{
     submit: [];
+    selectAll: [];
+    unselectAll: [];
 }>();
 
 const showMassUpdateModal = ref(false);
@@ -25,14 +29,31 @@ const showMassUpdateModal = ref(false);
         @submit="emit('submit')"
         v-model:show="showMassUpdateModal"></TimeEntryMassUpdateModal>
     <MainContainer
-        v-if="selectedTimeEntries.length > 0"
         :class="
             twMerge(
                 props.class,
-                'text-sm py-1.5 font-medium border-b border-t border-border-primary flex items-center space-x-3'
+                'text-sm py-1.5 font-medium border-b border-t border-border-secondary flex items-center space-x-3'
             )
         ">
-        <div>{{ selectedTimeEntries.length }} selected</div>
+        <Checkbox
+            :checked="allSelected"
+            id="selectAll"
+            @update:checked="
+                allSelected ? emit('unselectAll') : emit('selectAll')
+            ">
+        </Checkbox>
+        <InputLabel
+            for="selectAll"
+            class="select-none text-text-secondary"
+            v-if="selectedTimeEntries.length > 0">
+            {{ selectedTimeEntries.length }} selected
+        </InputLabel>
+        <InputLabel
+            for="selectAll"
+            class="text-text-secondary select-none"
+            v-else
+            >Select All</InputLabel
+        >
         <button
             class="text-text-tertiary flex space-x-1 items-center hover:text-text-secondary transition focus-visible:ring-2 outline-0 focus-visible:text-text-primary focus-visible:ring-white/80 rounded h-full px-2"
             @click="showMassUpdateModal = true"

resources/js/Pages/ReportingDetailed.vue

@@ -339,7 +339,12 @@ async function clearSelectionAndState() {
         <TimeEntryMassActionRow
             :selected-time-entries="selectedTimeEntries"
             @submit="clearSelectionAndState"
-            :delete-selected="deleteSelected"></TimeEntryMassActionRow>
+            :delete-selected="deleteSelected"
+            @select-all="selectedTimeEntries = [...timeEntries]"
+            @unselect-all="selectedTimeEntries = []"
+            :all-selected="
+                selectedTimeEntries.length === timeEntries.length
+            "></TimeEntryMassActionRow>
         <div class="w-full relative">
             <div v-for="entry in timeEntries" :key="entry.id">
                 <TimeEntryRow

resources/js/Pages/Time.vue

@@ -136,6 +136,9 @@ function deleteSelected() {
         <TimeEntryMassActionRow
             :selected-time-entries="selectedTimeEntries"
             @submit="clearSelectionAndState"
+            :all-selected="selectedTimeEntries.length === timeEntries.length"
+            @select-all="selectedTimeEntries = [...timeEntries]"
+            @unselect-all="selectedTimeEntries = []"
             :delete-selected="deleteSelected"></TimeEntryMassActionRow>
         <TimeEntryGroupedTable
             v-model:selected="selectedTimeEntries"

resources/js/packages/ui/src/Input/Checkbox.vue

@@ -35,5 +35,5 @@ const proxyChecked = computed({
         type="checkbox"
         :id="id"
         :value="value"
-        class="rounded bg-input-background border-input-border text-indigo-600 shadow-sm focus:ring-indigo-500" />
+        class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
 </template>

resources/js/packages/ui/src/Input/InputLabel.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-defineProps({
-    value: String,
-});
+import { twMerge } from 'tailwind-merge';
+
+const props = defineProps<{
+    value?: string;
+    class?: string;
+}>();
 </script>
 
 <template>
-    <label class="block font-medium text-sm text-white">
+    <label
+        :class="twMerge('block font-medium text-sm text-white', props.class)">
         <span v-if="value">{{ value }}</span>
         <span v-else><slot /></span>
     </label>

vite.config.js

@@ -8,7 +8,11 @@ import {
 } from './vite-module-loader.js';
 
 async function getConfig() {
-    const paths = ['resources/js/app.ts', 'resources/css/app.css', 'resources/css/filament/admin/theme.css'];
+    const paths = [
+        'resources/js/app.ts',
+        'resources/css/app.css',
+        'resources/css/filament/admin/theme.css',
+    ];
     const modulePaths = await collectModuleAssetsPaths('extensions');
     const additionalPlugins = await collectModulePlugins('extensions');