refactor to shadcn components, dynamically load extension frontend

add jetstream permissions, add dynamic inertia module loading, add shadcn components, change modals and dropdowns to shadcn dismissable layer,

resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue

@@ -150,7 +150,7 @@ function onSelectChange(event: Event) {
                         "></BillableToggleButton>
                     <div class="flex-1">
                         <button
-                            class="hidden lg:block text-muted w-[110px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
+                            class="hidden lg:block text-text-secondary w-[110px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
                             @click="expanded = !expanded">
                             {{ formatStartEnd(timeEntry.start, timeEntry.end) }}
                         </button>

resources/js/packages/ui/src/TimeEntry/TimeEntryMoreOptionsDropdown.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { TrashIcon } from '@heroicons/vue/20/solid';
-import MoreOptionsDropdown from '@/packages/ui/src/MoreOptionsDropdown.vue';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/Components/ui/dropdown-menu';
 
 const emit = defineEmits<{
     delete: [];
@@ -8,15 +13,35 @@ const emit = defineEmits<{
 </script>
 
 <template>
-    <MoreOptionsDropdown label="Actions for the time entry">
-        <button
-            data-testid="time_entry_delete"
-            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-text-primary hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
-            @click="emit('delete')">
-            <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-            <span>Delete</span>
-        </button>
-    </MoreOptionsDropdown>
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <button
+                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity text-text-secondary"
+                aria-label="Actions for the time entry">
+                <svg
+                    class="h-8 w-8 p-1 rounded-full"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
+                </svg>
+            </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="min-w-[150px]" align="end">
+            <DropdownMenuItem
+                data-testid="time_entry_delete"
+                class="flex items-center space-x-3 cursor-pointer text-destructive focus:text-destructive"
+                @click="emit('delete')">
+                <TrashIcon class="w-5" />
+                <span>Delete</span>
+            </DropdownMenuItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
 </template>
 
 <style scoped></style>

resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue

@@ -26,7 +26,7 @@ const triggerElement = ref<HTMLButtonElement | null>(null);
     <div class="relative">
         <Dropdown
             v-model="open"
-            align="bottom"
+            align="center"
             :close-on-content-click="false"
             @submit="open = false">
             <template #trigger>
@@ -35,7 +35,7 @@ const triggerElement = ref<HTMLButtonElement | null>(null);
                     data-testid="time_entry_range_selector"
                     :class="
                         twMerge(
-                            'text-muted w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:text-text-primary focus-visible:ring-ring focus-visible:bg-tertiary',
+                            'text-text-secondary w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:text-text-primary focus-visible:ring-ring focus-visible:bg-tertiary',
                             showDate
                                 ? 'text-xs py-1.5 font-semibold'
                                 : 'text-sm py-1.5 font-medium',

resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue

@@ -52,11 +52,11 @@ function selectUnselectAll(value: boolean) {
                     <span class="font-semibold text-text-primary">
                         {{ formatWeekday(date) }}
                     </span>
-                    <span class="font-semibold text-muted">
+                    <span class="font-semibold text-text-secondary">
                         {{ formatDate(date) }}
                     </span>
                 </div>
-                <div class="text-muted pr-[90px] lg:pr-[92px]">
+                <div class="text-text-secondary pr-[90px] lg:pr-[92px]">
                     <span class="font-semibold">
                         {{ formatHumanReadableDuration(duration) }}
                     </span>

resources/js/packages/ui/src/TimeEntry/TimeEntryRowTagDropdown.vue

@@ -25,7 +25,7 @@ const timeEntryTags = computed<Tag[]>(() => {
     <TagDropdown
         v-model="model"
         :tags="tags"
-        align="bottom-end"
+        align="end"
         :create-tag
         @changed="emit('changed', model)">
         <template #trigger>