Merge pull request #21 from codebar-ag/main

m/p

Author: StanBarrows

changelog_internal.md

@@ -244,6 +244,296 @@ Removed redundant status column from members table to maintain consistency with
 
 **Result:** Members table now shows: Name → Email → Role → Billable Rate → Edit
 
+### Remove Pie Chart from Reporting Pages
+
+Completely removed the ReportingPieChart component from the entire application.
+
+**Files modified:**
+- `resources/js/Components/Common/Reporting/ReportingOverview.vue`  
+- `resources/js/Pages/SharedReport.vue`
+
+**Component removed:** `ReportingPieChart` (equivalent to the `ProjectsChartCard` removed from dashboard)
+
+**Removed imports:**
+```js
+- import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
+```
+
+**Removed from templates:**
+```vue
+- <div class="px-2 lg:px-4">
+-     <ReportingPieChart
+-         :data="groupedPieChartData"></ReportingPieChart>
+- </div>
+```
+
+**Removed computed properties:**
+```js
+- const groupedPieChartData = computed(() => { ... });
+```
+
+**File to delete:** `resources/js/Components/Common/Reporting/ReportingPieChart.vue` (component file no longer needed)
+
+**Layout changes:**
+- Removed sidebar layout (grid-cols-4) 
+- Table now spans full width
+- Bar chart (ReportingChart) remains for data visualization
+
+**Result:** ReportingPieChart component completely removed from the application - no imports, no usage, no data generation.
+
+### Performance Optimization: Projects Search Filter
+
+Optimized the search filter in Projects.vue to improve performance when searching through projects and their associated clients.
+
+**File modified:** `resources/js/Pages/Projects.vue`
+
+**Problem:** O(n*m) complexity - the client lookup inside the filter loop was inefficient
+- For each project (n), was calling `clients.value.find()` (m operations)
+- With many projects and clients, this created performance bottlenecks
+
+**Solution:** Create clientsMap before filtering for O(1) lookup
+
+**Before:**
+```js
+// Search in client name
+const client = clients.value.find(client => client.id === project.client_id);
+const clientNameMatch = client?.name.toLowerCase().includes(query) || false;
+```
+
+**After:**
+```js
+// Create clients map for O(1) lookup performance
+const clientsMap = new Map(clients.value.map(c => [c.id, c]));
+
+filteredProjects = filteredProjects.filter((project) => {
+    // Search in client name
+    const client = clientsMap.get(project.client_id);
+    const clientNameMatch = client?.name.toLowerCase().includes(query) || false;
+    // ...
+});
+```
+
+**Performance improvement:** O(n*m) → O(n+m) complexity
+- Map creation: O(m) - done once
+- Lookups: O(1) per project instead of O(m)
+- Significant improvement with large datasets
+
+### CSS Cleanup: Remove Redundant Tailwind Classes
+
+Fixed duplicate and redundant CSS class declarations across all table components throughout the application.
+
+**Problem:** Many table components had duplicate `3xl:pl-12` classes in their Tailwind CSS declarations
+- Some had simple duplicates: `pl-4 sm:pl-6 lg:pl-8 3xl:pl-12` (redundant `3xl:pl-12`)
+- Some had double duplicates: `3xl:pl-12 ... pl-4 sm:pl-6 lg:pl-8 3xl:pl-12` (appearing twice!)
+
+**Files cleaned up:**
+- `resources/js/Components/Common/Client/ClientTableRow.vue`
+- `resources/js/Components/Common/Client/ClientTableHeading.vue`
+- `resources/js/Components/Common/Tag/TagTableHeading.vue`
+- `resources/js/Components/Common/Tag/TagTableRow.vue`
+- `resources/js/Components/Common/ProjectMember/ProjectMemberTableHeading.vue`
+- `resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue`
+- `resources/js/Components/Common/Invitation/InvitationTableRow.vue`
+- `resources/js/Components/Common/Invitation/InvitationTableHeading.vue`
+- `resources/js/Components/Common/Report/ReportTableHeading.vue`
+- `resources/js/Components/Common/Report/ReportTableRow.vue`
+- `resources/js/Components/Common/Member/MemberTableRow.vue`
+- `resources/js/Components/Common/Member/MemberTableHeading.vue`
+- `resources/js/Components/Common/Project/ProjectTableRow.vue`
+- `resources/js/Components/Common/Project/ProjectTableHeading.vue`
+- `resources/js/Components/Common/Task/TaskTableHeading.vue`
+- `resources/js/Components/Common/Task/TaskTableRow.vue`
+
+**Changes made:**
+```css
+/* Before - redundant classes */
+class="... pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
+class="... 3xl:pl-12 ... pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
+
+/* After - clean responsive padding */
+class="... pl-4 sm:pl-6 lg:pl-8"
+```
+
+**Benefits:**
+- Cleaner, more maintainable CSS
+- Eliminates potential conflicts from duplicate declarations
+- Consistent responsive padding across all table components
+- Smaller CSS bundle size
+
+### Fix Client Table Column Positioning
+
+Fixed layout issue where Projects column had excessive spacing from Name column.
+
+**File:** `resources/js/Components/Common/Client/ClientTableRow.vue`
+
+**Problem:** Projects column had excessive padding pushing it away from Name column.
+
+**Fixed styling:**
+```vue
+- 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"
++ class="whitespace-nowrap 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 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 px-3 py-4 text-sm text-text-secondary"
+```
+
+**Result:** Projects column now appears directly next to Name column with proper spacing.
+
+### Restore Weekly Project Overview API Query
+
+Fixed issue where removing ProjectsChartCard accidentally broke other dashboard functionality.
+
+**File:** `resources/js/Components/Dashboard/ThisWeekOverview.vue`
+
+**Problem:** When removing the ProjectsChartCard component, the `weeklyProjectOverview` API query was also removed, which might be used by other parts of the dashboard.
+
+**Fixed by restoring API query:**
+```js
+// Set up the queries
+const { data: weeklyProjectOverview } = useQuery({
+    queryKey: ['weeklyProjectOverview', organizationId],
+    queryFn: () => {
+        return api.weeklyProjectOverview({
+            params: {
+                organization: organizationId.value!,
+            },
+        });
+    },
+    enabled: computed(() => !!organizationId.value),
+});
+```
+
+**Result:** Dashboard data should now load properly without the ProjectsChartCard component being displayed.
+
+### Add Search/Filter Functionality to Projects and Clients Pages
+
+Added real-time search functionality with wildcard matching to improve user experience.
+
+#### Projects Page Search
+
+**File:** `resources/js/Pages/Projects.vue`
+
+**Added imports:**
+```js
+import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
+```
+
+**Added search state:**
+```js
+const searchQuery = ref('');
+```
+
+**Updated filtering logic:**
+```js
+const shownProjects = computed(() => {
+    let filteredProjects = projects.value.filter((project) => {
+        if (activeTab.value === 'active') {
+            return !project.is_archived;
+        }
+        return project.is_archived;
+    });
+
+    // Apply search filter
+    if (searchQuery.value.trim()) {
+        const query = searchQuery.value.toLowerCase().trim();
+        filteredProjects = filteredProjects.filter((project) => {
+            // Search in project name
+            const projectNameMatch = project.name.toLowerCase().includes(query);
+            
+            // Search in client name
+            const client = clients.value.find(client => client.id === project.client_id);
+            const clientNameMatch = client?.name.toLowerCase().includes(query) || false;
+            
+            return projectNameMatch || clientNameMatch;
+        });
+    }
+
+    return filteredProjects;
+});
+```
+
+**Added search input UI:**
+```vue
+<div class="flex items-center space-x-3">
+    <div class="relative">
+        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <MagnifyingGlassIcon class="h-5 w-5 text-text-secondary" />
+        </div>
+        <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="Search projects or clients..."
+            class="block w-64 pl-10 pr-3 py-2 border border-input-border rounded-md leading-5 bg-input-background text-text-primary placeholder-text-secondary focus:outline-none focus:ring-1 focus:ring-accent-500 focus:border-accent-500 sm:text-sm"
+        />
+    </div>
+    <SecondaryButton>Create Project</SecondaryButton>
+</div>
+```
+
+#### Clients Page Search
+
+**File:** `resources/js/Pages/Clients.vue`
+
+**Added imports:**
+```js
+import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
+```
+
+**Added search state:**
+```js
+const searchQuery = ref('');
+```
+
+**Updated filtering logic:**
+```js
+const shownClients = computed(() => {
+    let filteredClients = clients.value.filter((client) => {
+        if (activeTab.value === 'active') {
+            return !client.is_archived;
+        }
+        return client.is_archived;
+    });
+
+    // Apply search filter
+    if (searchQuery.value.trim()) {
+        const query = searchQuery.value.toLowerCase().trim();
+        filteredClients = filteredClients.filter((client) => {
+            return client.name.toLowerCase().includes(query);
+        });
+    }
+
+    return filteredClients;
+});
+```
+
+**Added search input UI:**
+```vue
+<div class="flex items-center space-x-3">
+    <div class="relative">
+        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <MagnifyingGlassIcon class="h-5 w-5 text-text-secondary" />
+        </div>
+        <input
+            v-model="searchQuery"
+            type="text"
+            placeholder="Search clients..."
+            class="block w-64 pl-10 pr-3 py-2 border border-input-border rounded-md leading-5 bg-input-background text-text-primary placeholder-text-secondary focus:outline-none focus:ring-1 focus:ring-accent-500 focus:border-accent-500 sm:text-sm"
+        />
+    </div>
+    <SecondaryButton>Create Client</SecondaryButton>
+</div>
+```
+
+#### Features
+
+- **Real-time filtering:** Results update as you type
+- **Wildcard search:** Substring/partial matching
+- **Projects page:** Searches both project names AND client names
+- **Clients page:** Searches client names
+- **Case-insensitive:** Search works regardless of capitalization
+- **Works with tabs:** Search applies to both Active and Archived tabs
+- **Clean UI:** Search input with magnifying glass icon, positioned next to action buttons
+
 ### Remove Pull Request Template
 
 **File:** `.github/PULL_REQUEST_TEMPLATE.md`

composer.lock

@@ -4,7 +4,7 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 
 <template>
     <TableHeading>
-        <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">Name</div>
+        <div class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8">Name</div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Projects</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/Client/ClientTableHeading.vue

@@ -40,15 +40,14 @@ const showEditModal = ref(false);
         <ClientEditModal
             v-model:show="showEditModal"
             :client="client"></ClientEditModal>
-        <div
-            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">
+        <div class="whitespace-nowrap py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8">
             <span>
                 {{ client.name }}
             </span>
         </div>
         <div
-            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>
+            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary">
+            <span> {{ projectCount }} Projects </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">

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

@@ -5,7 +5,7 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 <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">
+            class="px-3 py-1.5 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8">
             Email
         </div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Role</div>

resources/js/Components/Common/Invitation/InvitationTableHeading.vue

@@ -57,7 +57,7 @@ async function resendInvitation() {
 <template>
     <TableRow>
         <div
-            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary pl-4 sm:pl-6 lg:pl-8">
             {{ invitation.email }}
         </div>
         <div class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary">

resources/js/Components/Common/Invitation/InvitationTableRow.vue

@@ -5,7 +5,7 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
 <template>
     <TableHeading>
         <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 pl-4 sm:pl-6 lg:pl-8">
             Name
         </div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Email</div>

resources/js/Components/Common/Member/MemberTableHeading.vue

@@ -60,7 +60,7 @@ const userHasValidMailAddress = computed(() => {
 <template>
     <TableRow>
         <div
-            class="whitespace-nowrap flex items-center space-x-5 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 flex items-center space-x-5 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8">
             <span>
                 {{ member.name }}
             </span>