Skip to content

Commit c058976

Browse files
StanBarrowsStanBarrows
committed
wip
1 parent 07fa1bb commit c058976

3 files changed

Lines changed: 122 additions & 89 deletions

File tree

‎changelog_internal.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,55 @@ Removed redundant status column from members table to maintain consistency with
244244
245245
**Result:** Members table now shows: Name → Email → Role → Billable Rate → Edit
246246
247+
### Remove Pie Chart from Reporting Pages
248+
249+
Removed the same pie chart component from reporting pages as was removed from dashboard.
250+
251+
**Files modified:**
252+
- `resources/js/Components/Common/Reporting/ReportingOverview.vue`
253+
- `resources/js/Pages/SharedReport.vue`
254+
255+
**Component removed:** `ReportingPieChart` (equivalent to the `ProjectsChartCard` removed from dashboard)
256+
257+
**Removed imports:**
258+
```js
259+
- import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
260+
```
261+
262+
**Removed from templates:**
263+
```vue
264+
- <div class="px-2 lg:px-4">
265+
- <ReportingPieChart
266+
- :data="groupedPieChartData"></ReportingPieChart>
267+
- </div>
268+
```
269+
270+
**Layout changes:**
271+
- Removed sidebar layout (grid-cols-4)
272+
- Table now spans full width
273+
- Bar chart (ReportingChart) remains for data visualization
274+
275+
**Result:** Reporting pages now show only the bar chart and data table, with the pie chart sidebar removed.
276+
277+
### Fix Client Table Column Positioning
278+
279+
Fixed layout issue where Projects column had excessive spacing from Name column.
280+
281+
**File:** `resources/js/Components/Common/Client/ClientTableRow.vue`
282+
283+
**Problem:** Projects column had excessive padding pushing it away from Name column.
284+
285+
**Fixed styling:**
286+
```vue
287+
- 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"
288+
+ 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"
289+
290+
- 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"
291+
+ class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary"
292+
```
293+
294+
**Result:** Projects column now appears directly next to Name column with proper spacing.
295+
247296
### Restore Weekly Project Overview API Query
248297
249298
Fixed issue where removing ProjectsChartCard accidentally broke other dashboard functionality.

‎resources/js/Components/Common/Reporting/ReportingOverview.vue‎

Lines changed: 39 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
3232
import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
3333
import ReportSaveButton from '@/Components/Common/Report/ReportSaveButton.vue';
3434
import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
35-
import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
3635
3736
import { computed, type ComputedRef, inject, onMounted, ref, watch } from 'vue';
3837
import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
@@ -433,9 +432,9 @@ const tableData = computed(() => {
433432
</div>
434433
</MainContainer>
435434
<MainContainer>
436-
<div class="sm:grid grid-cols-4 pt-6 items-start">
435+
<div class="pt-6 items-start">
437436
<div
438-
class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
437+
class="bg-card-background rounded-lg border border-card-border pt-3">
439438
<div
440439
class="text-sm flex text-text-primary items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
441440
<span>Group by</span>
@@ -455,33 +454,28 @@ const tableData = computed(() => {
455454
updateTableReporting
456455
"></ReportingGroupBySelect>
457456
</div>
458-
<div
459-
class="grid items-center"
460-
style="grid-template-columns: 1fr 100px 150px">
461-
<div
462-
class="contents [&>*]:border-card-background-separator [&>*]:border-b [&>*]:bg-tertiary [&>*]:pb-1.5 [&>*]:pt-1 text-text-secondary text-sm">
463-
<div class="pl-6">Name</div>
464-
<div class="text-right">Duration</div>
465-
<div class="text-right pr-6">Cost</div>
466-
</div>
457+
<div class="px-6 pt-6 pb-3">
467458
<template
468-
v-if="
469-
aggregatedTableTimeEntries?.grouped_data &&
470-
aggregatedTableTimeEntries.grouped_data?.length > 0
471-
">
459+
v-for="reportingRowEntry in aggregatedTableTimeEntries?.grouped_data"
460+
:key="reportingRowEntry.key">
472461
<ReportingRow
473-
v-for="entry in tableData"
474-
:key="entry.description ?? 'none'"
475-
:currency="getOrganizationCurrencyString()"
476-
:type="aggregatedTableTimeEntries.grouped_type"
477-
:entry="entry"></ReportingRow>
478-
<div
479-
class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
480-
<div class="flex items-center pl-6 font-medium">
481-
<span>Total</span>
482-
</div>
483-
<div
484-
class="justify-end flex items-center font-medium">
462+
:reporting-row-entry="reportingRowEntry"
463+
:grouped-type="
464+
aggregatedTableTimeEntries?.grouped_type
465+
"
466+
:show-seconds="showSeconds"
467+
:group="group"
468+
:sub-group="subGroup"></ReportingRow>
469+
</template>
470+
<div
471+
v-if="
472+
aggregatedTableTimeEntries &&
473+
aggregatedTableTimeEntries.grouped_data.length > 0
474+
"
475+
class="border-t border-background-separator pt-3 mt-6 text-sm space-y-2">
476+
<div class="justify-between items-center flex">
477+
<div class="font-medium">Total</div>
478+
<div class="font-medium">
485479
{{
486480
formatHumanReadableDuration(
487481
aggregatedTableTimeEntries.seconds,
@@ -490,36 +484,37 @@ const tableData = computed(() => {
490484
)
491485
}}
492486
</div>
493-
<div
494-
class="justify-end pr-6 flex items-center font-medium">
487+
</div>
488+
<div
489+
v-if="
490+
aggregatedTableTimeEntries.cost !== null &&
491+
showBillableRate
492+
"
493+
class="justify-between items-center flex">
494+
<div class="font-medium">Total Billable</div>
495+
<div class="justify-end pr-6 flex items-center font-medium">
495496
{{
496-
aggregatedTableTimeEntries.cost
497-
? formatCents(
498-
aggregatedTableTimeEntries.cost,
499-
getOrganizationCurrencyString(),
500-
organization?.currency_format,
501-
organization?.currency_symbol,
502-
organization?.number_format
503-
)
504-
: '--'
497+
formatCents(
498+
aggregatedTableTimeEntries.cost,
499+
getOrganizationCurrencyString(),
500+
organization?.currency_format,
501+
organization?.currency_symbol,
502+
organization?.number_format
503+
)
505504
}}
506505
</div>
507506
</div>
508507
</template>
509508
<div
510509
v-else
511-
class="chart flex flex-col items-center justify-center py-12 col-span-3">
510+
class="chart flex flex-col items-center justify-center py-12">
512511
<p class="text-lg text-text-primary font-medium">
513512
No time entries found
514513
</p>
515514
<p>Try to change the filters and time range</p>
516515
</div>
517516
</div>
518517
</div>
519-
<div class="px-2 lg:px-4">
520-
<ReportingPieChart
521-
:data="groupedPieChartData"></ReportingPieChart>
522-
</div>
523518
</div>
524519
</MainContainer>
525520
</template>

‎resources/js/Pages/SharedReport.vue‎

Lines changed: 34 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { ChartBarIcon } from '@heroicons/vue/20/solid';
55
import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
66
import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
77
import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
8-
import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
98
import { formatCents } from '@/packages/ui/src/utils/money';
109
import type { CurrencyFormat } from '@/packages/ui/src/utils/money';
1110
import { computed, onMounted, provide, ref } from 'vue';
@@ -200,56 +199,50 @@ onMounted(async () => {
200199
</div>
201200
</MainContainer>
202201
<MainContainer>
203-
<div class="sm:grid grid-cols-4 pt-6 items-start">
202+
<div class="pt-6 items-start">
204203
<div
205-
class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
204+
class="bg-card-background rounded-lg border border-card-border pt-3">
206205
<div
207-
class="text-sm flex text-text-primary items-center font-medium px-6 border-b border-card-background-separator pb-3">
208-
Group by
209-
<strong class="px-2">{{ getGroupLabel(group) }}</strong>
210-
and
211-
<strong class="px-2">{{
212-
getGroupLabel(subGroup)
213-
}}</strong>
206+
class="text-sm flex text-text-primary items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
207+
<span>{{ sharedReportResponseData?.name }}</span>
214208
</div>
215-
<div
216-
class="grid items-center"
217-
style="grid-template-columns: 1fr 100px 150px">
218-
<div
219-
class="contents [&>*]:border-card-background-separator [&>*]:border-b [&>*]:bg-tertiary [&>*]:pb-1.5 [&>*]:pt-1 text-text-secondary text-sm">
220-
<div class="pl-6">Name</div>
221-
<div class="text-right">Duration</div>
222-
<div class="text-right pr-6">Cost</div>
223-
</div>
209+
<div class="px-6 pt-6 pb-3">
224210
<template
225-
v-if="
226-
aggregatedTableTimeEntries?.grouped_data &&
227-
aggregatedTableTimeEntries.grouped_data
228-
?.length > 0
229-
">
211+
v-for="reportingRowEntry in aggregatedTableTimeEntries?.grouped_data"
212+
:key="reportingRowEntry.key">
230213
<ReportingRow
231-
v-for="entry in tableData"
232-
:key="entry.description ?? 'none'"
233-
:currency="reportCurrency"
234-
:currency-format="reportCurrencyFormat"
235-
:entry="entry"></ReportingRow>
236-
<div
237-
class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
238-
<div class="flex items-center pl-6 font-medium">
239-
<span>Total</span>
240-
</div>
241-
<div
242-
class="justify-end flex items-center font-medium">
214+
:reporting-row-entry="reportingRowEntry"
215+
:grouped-type="
216+
aggregatedTableTimeEntries?.grouped_type
217+
"
218+
:show-seconds="false"
219+
:group="group"
220+
:sub-group="subGroup"></ReportingRow>
221+
</template>
222+
<div
223+
v-if="
224+
aggregatedTableTimeEntries &&
225+
aggregatedTableTimeEntries.grouped_data.length >
226+
0
227+
"
228+
class="border-t border-background-separator pt-3 mt-6 text-sm space-y-2">
229+
<div class="justify-between items-center flex">
230+
<div class="font-medium">Total</div>
231+
<div class="font-medium">
243232
{{
244233
formatHumanReadableDuration(
245234
aggregatedTableTimeEntries.seconds,
246235
reportIntervalFormat,
247-
reportNumberFormat
236+
'german'
248237
)
249238
}}
250239
</div>
251-
<div
252-
class="justify-end pr-6 flex items-center font-medium">
240+
</div>
241+
<div
242+
v-if="aggregatedTableTimeEntries.cost !== null"
243+
class="justify-between items-center flex">
244+
<div class="font-medium">Total Billable</div>
245+
<div class="justify-end pr-6 flex items-center font-medium">
253246
{{
254247
formatCents(
255248
aggregatedTableTimeEntries.cost,
@@ -260,21 +253,17 @@ onMounted(async () => {
260253
}}
261254
</div>
262255
</div>
263-
</template>
256+
</div>
264257
<div
265258
v-else
266-
class="chart flex flex-col items-center justify-center py-12 col-span-3">
259+
class="chart flex flex-col items-center justify-center py-12">
267260
<p class="text-lg text-text-primary font-semibold">
268261
No time entries found
269262
</p>
270263
<p>Try to change the filters and time range</p>
271264
</div>
272265
</div>
273266
</div>
274-
<div class="px-2 lg:px-4">
275-
<ReportingPieChart
276-
:data="groupedPieChartData"></ReportingPieChart>
277-
</div>
278267
</div>
279268
</MainContainer>
280269
</div>

0 commit comments

Comments
 (0)