Merge pull request #19 from codebar-ag/main

main/production

Author: StanBarrows

changelog_internal.md

@@ -43,3 +43,17 @@ const counts = computed(() => page.props.auth.user.current_team?.counts || {});
 
 resources/js/Components/NavigationSidebarLink.vue
 resources/js/Components/NavigationSidebarItem.vue
+
+
+### Hide ProjectsChartCard on Dashboard
+
+Disable Dashboard.ThisWeekOverview.ProjectsChartCard
+
+
+### Remove Active from Clients & Projects
+
+Remove Active Icon + Label from clients & projects pages.
+
+### Projects.index
+- Sort by clients.name asc then projects.name asc
+- move clients.name column before projects.name column

resources/js/Components/Common/Client/ClientTable.vue

@@ -27,7 +27,7 @@ const sortedClients = computed(() => {
             <div
                 data-testid="client_table"
                 class="grid min-w-full"
-                style="grid-template-columns: 1fr 150px 200px 80px">
+                style="grid-template-columns: 1fr 150px 80px">
                 <ClientTableHeading></ClientTableHeading>
                 <div
                     v-if="clients.length === 0"

resources/js/Components/Common/Client/ClientTableHeading.vue

@@ -9,7 +9,6 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
             Name
         </div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary"></div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">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>
         </div>

resources/js/Components/Common/Client/ClientTableRow.vue

@@ -50,11 +50,6 @@ const showEditModal = ref(false);
             class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <span class="text-text-secondary"> {{ projectCount }} Projects </span>
         </div>
-        <div
-            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1 items-center font-medium">
-            <CheckCircleIcon class="w-5"></CheckCircleIcon>
-            <span>Active</span>
-        </div>
         <div
             class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <ClientMoreOptionsDropdown

resources/js/Components/Common/Project/ProjectTable.vue

@@ -38,12 +38,25 @@ async function createClient(
 const { clients } = storeToRefs(useClientsStore());
 
 const gridTemplate = computed(() => {
-    return `grid-template-columns: minmax(300px, 1fr) minmax(150px, auto) minmax(140px, auto) minmax(130px, auto) ${props.showBillableRate ? 'minmax(130px, auto)' : ''} minmax(120px, auto) 80px;`;
+    return `grid-template-columns: minmax(300px, 1fr) minmax(150px, auto) minmax(140px, auto) minmax(130px, auto) ${props.showBillableRate ? 'minmax(130px, auto)' : ''} 80px;`;
 });
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 
 const sortedProjects = computed(() => {
-  return [...props.projects].sort((a, b) => a.name.localeCompare(b.name));
+  return [...props.projects].sort((a, b) => {
+    // Get client names, handling null clients
+    const clientA = clients.value.find(client => client.id === a.client_id)?.name || '';
+    const clientB = clients.value.find(client => client.id === b.client_id)?.name || '';
+    
+    // First sort by client name
+    const clientComparison = clientA.localeCompare(clientB);
+    if (clientComparison !== 0) {
+      return clientComparison;
+    }
+    
+    // Then sort by project name
+    return a.name.localeCompare(b.name);
+  });
 });
 </script>
 

resources/js/Components/Common/Project/ProjectTableHeading.vue

@@ -7,11 +7,11 @@ defineProps<{
 
 <template>
     <TableHeading>
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">Client</div>
         <div
-            class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="py-1.5 pr-3 text-left font-semibold text-text-primary">
             Name
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Client</div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
             Total Time
         </div>
@@ -23,7 +23,6 @@ defineProps<{
             class="px-3 py-1.5 text-left font-semibold text-text-primary">
             Billable Rate
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">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>
         </div>

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -76,7 +76,16 @@ const showEditProjectModal = ref(false);
         :original-project="project"></ProjectEditModal>
     <TableRow :href="route('projects.show', { project: project.id })">
         <div
-            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-text-secondary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            <div
+                v-if="project.client_id"
+                class="overflow-ellipsis overflow-hidden">
+                {{ client?.name }}
+            </div>
+            <div v-else>No client</div>
+        </div>
+        <div
+            class="whitespace-nowrap min-w-0 flex items-center space-x-5 py-4 pr-3 text-sm font-medium text-text-primary">
             <div
                 :style="{
                     backgroundColor: project.color,
@@ -90,15 +99,6 @@ const showEditProjectModal = ref(false);
                 {{ projectTasksCount }} Tasks
             </span>
         </div>
-        <div
-            class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-text-secondary">
-            <div
-                v-if="project.client_id"
-                class="overflow-ellipsis overflow-hidden">
-                {{ client?.name }}
-            </div>
-            <div v-else>No client</div>
-        </div>
         <div class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary">
             <div v-if="project.spent_time">
                 {{
@@ -126,11 +126,6 @@ const showEditProjectModal = ref(false);
             class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary">
             {{ billableRateInfo }}
         </div>
-        <div
-            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1 items-center font-medium">
-            <CheckCircleIcon class="w-5"></CheckCircleIcon>
-            <span>Active</span>
-        </div>
         <div
             class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <ProjectMoreOptionsDropdown

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -14,7 +14,6 @@ import StatCard from '@/Components/Common/StatCard.vue';
 import { ClockIcon } from '@heroicons/vue/20/solid';
 import CardTitle from '@/packages/ui/src/CardTitle.vue';
 import LinearGradient from 'zrender/lib/graphic/LinearGradient';
-import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import { getWeekStart } from '@/packages/ui/src/utils/settings';
@@ -67,19 +66,6 @@ const organizationId = computed(() => getCurrentOrganizationId());
 
 const organization = inject<ComputedRef<Organization>>('organization');
 
-// Set up the queries
-const { data: weeklyProjectOverview } = useQuery({
-    queryKey: ['weeklyProjectOverview', organizationId],
-    queryFn: () => {
-        return api.weeklyProjectOverview({
-            params: {
-                organization: organizationId.value!,
-            },
-        });
-    },
-    enabled: computed(() => !!organizationId.value),
-});
-
 const { data: totalWeeklyTime } = useQuery({
     queryKey: ['totalWeeklyTime', organizationId],
     queryFn: () => {
@@ -292,11 +278,6 @@ const option = computed(() => {
                           )
                         : '--'
                 " />
-            <ProjectsChartCard
-                v-if="weeklyProjectOverview"
-                :weekly-project-overview="
-                    weeklyProjectOverview
-                "></ProjectsChartCard>
         </div>
     </div>
 </template>