adamp/cookie-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Reports page mobile layout

Browse Source 
Add data-label attributes to all report table cells and hide bar chart
column on small screens so tables render as labeled cards on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adamp 2026-02-09 21:47:42 -06:00
parent 75caed2f29
commit de7156583b
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/index.css
View File

@ -372,6 +372,10 @@ th {
.table-wrap thead { .table-wrap thead {
display: none; display: none;
} }
.table-wrap tbody,
.table-wrap tfoot {
display: block;
}
.table-wrap tr { .table-wrap tr {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -394,6 +398,9 @@ th {
padding-top: 0.5rem; padding-top: 0.5rem;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
.table-wrap td.bar-cell {
display: none;
}
} }
.inventory-card-mobile { .inventory-card-mobile {

40
client/src/pages/Reports.jsx
View File

@ -106,17 +106,17 @@ export default function Reports() {
<tbody> <tbody>
{data.salesByProduct.map((row) => ( {data.salesByProduct.map((row) => (
<tr key={row.product_name}> <tr key={row.product_name}>
<td>{row.product_name}</td> <td data-label="Product">{row.product_name}</td>
<td>{row.units_sold}</td> <td data-label="Units sold">{row.units_sold}</td>
<td>${Number(row.revenue).toFixed(2)}</td> <td data-label="Revenue">${Number(row.revenue).toFixed(2)}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
<tfoot> <tfoot>
<tr style={{ fontWeight: 600 }}> <tr style={{ fontWeight: 600 }}>
<td>Total</td> <td data-label="Product">Total</td>
<td>{data.salesByProduct.reduce((s, r) => s + r.units_sold, 0)}</td> <td data-label="Units sold">{data.salesByProduct.reduce((s, r) => s + r.units_sold, 0)}</td>
<td>${data.salesByProduct.reduce((s, r) => s + r.revenue, 0).toFixed(2)}</td> <td data-label="Revenue">${data.salesByProduct.reduce((s, r) => s + r.revenue, 0).toFixed(2)}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
@ -138,9 +138,9 @@ export default function Reports() {
<tbody> <tbody>
{data.topCustomers.map((row) => ( {data.topCustomers.map((row) => (
<tr key={row.customer_name}> <tr key={row.customer_name}>
<td>{row.customer_name}</td> <td data-label="Customer">{row.customer_name}</td>
<td>{row.order_count}</td> <td data-label="Orders">{row.order_count}</td>
<td>${Number(row.total_spent).toFixed(2)}</td> <td data-label="Total spent">${Number(row.total_spent).toFixed(2)}</td>
</tr> </tr>
))} ))}
{data.topCustomers.length === 0 && ( {data.topCustomers.length === 0 && (
@ -169,10 +169,10 @@ export default function Reports() {
const maxRevenue = Math.max(...data.revenueOverTime.map((r) => r.revenue), 1); const maxRevenue = Math.max(...data.revenueOverTime.map((r) => r.revenue), 1);
return data.revenueOverTime.map((row) => ( return data.revenueOverTime.map((row) => (
<tr key={row.date}> <tr key={row.date}>
<td>{row.date}</td> <td data-label="Date">{row.date}</td>
<td>{row.order_count}</td> <td data-label="Orders">{row.order_count}</td>
<td>${Number(row.revenue).toFixed(2)}</td> <td data-label="Revenue">${Number(row.revenue).toFixed(2)}</td>
<td> <td className="bar-cell">
<div style={{ <div style={{
height: 18, height: 18,
width: `${(row.revenue / maxRevenue) * 100}%`, width: `${(row.revenue / maxRevenue) * 100}%`,
@ -232,8 +232,8 @@ export default function Reports() {
<tbody> <tbody>
{data.orderStatusBreakdown.map((row) => ( {data.orderStatusBreakdown.map((row) => (
<tr key={row.status}> <tr key={row.status}>
<td style={{ textTransform: 'capitalize' }}>{row.status}</td> <td data-label="Status" style={{ textTransform: 'capitalize' }}>{row.status}</td>
<td>{row.count}</td> <td data-label="Count">{row.count}</td>
</tr> </tr>
))} ))}
{data.orderStatusBreakdown.length === 0 && ( {data.orderStatusBreakdown.length === 0 && (
@ -266,14 +266,14 @@ export default function Reports() {
const lowStock = row.low_stock_threshold > 0 && row.current_stock <= row.low_stock_threshold; const lowStock = row.low_stock_threshold > 0 && row.current_stock <= row.low_stock_threshold;
return ( return (
<tr key={row.product_name} style={lowStock ? { backgroundColor: 'rgba(229, 62, 62, 0.1)' } : undefined}> <tr key={row.product_name} style={lowStock ? { backgroundColor: 'rgba(229, 62, 62, 0.1)' } : undefined}>
<td>{row.product_name}</td> <td data-label="Product">{row.product_name}</td>
<td style={lowStock ? { color: 'var(--danger, #e53e3e)', fontWeight: 600 } : undefined}> <td data-label="Current stock" style={lowStock ? { color: 'var(--danger, #e53e3e)', fontWeight: 600 } : undefined}>
{row.current_stock} {row.current_stock}
{lowStock && ' (low)'} {lowStock && ' (low)'}
</td> </td>
<td>{row.total_restocked}</td> <td data-label="Total restocked">{row.total_restocked}</td>
<td>{row.total_sold}</td> <td data-label="Total sold">{row.total_sold}</td>
<td>{row.restock_count}</td> <td data-label="Restock count">{row.restock_count}</td>
</tr> </tr>
); );
})} })}