@evenicanpm/portal-table-ui 2.1.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +2 -2
  2. package/src/features/table/components/dashboard/table/details/details.tsx +18 -3
  3. package/src/features/table/components/dashboard/table/details/templates/invoice-details.tsx +85 -24
  4. package/src/features/table/components/dashboard/table-dashboard.tsx +7 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evenicanpm/portal-table-ui",
3
- "version": "2.1.0",
3
+ "version": "2.2.1",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "author": "",
@@ -47,5 +47,5 @@
47
47
  "@tanstack/react-query": "^5.90.11",
48
48
  "date-fns": "^4.1.0"
49
49
  },
50
- "gitHead": "8227589295d3d63586f9b26fff8d643b070989b3"
50
+ "gitHead": "69aee6408276ef8e1428ef5c871c5dbf63e7b59a"
51
51
  }
package/src/features/table/components/dashboard/table/details/details.tsx CHANGED
@@ -87,13 +87,28 @@ const Details = ({
87
87
  mb={2}
88
88
  height="100%"
89
89
  >
90
- <Button onClick={handleBack} startIcon={<ArrowBackIcon />}>
90
+ <Button
91
+ onClick={handleBack}
92
+ startIcon={<ArrowBackIcon />}
93
+ sx={{ "@media print": { display: "none" } }}
94
+ >
91
95
  {documentTypeLabel}
92
96
  </Button>
93
- <H6 color="grey.800">
97
+ <H6 color="grey.800" sx={{ "@media print": { display: "none" } }}>
94
98
  {documentTypeLabel}-{id}
95
99
  </H6>
96
- <Subtitle>DETAILS</Subtitle>
100
+ <H6
101
+ color="grey.800"
102
+ sx={{
103
+ display: "none",
104
+ "@media print": { display: "inline-block" },
105
+ }}
106
+ >
107
+ {documentTypeLabel.slice(0, documentTypeLabel.length - 1)} #{id}
108
+ </H6>
109
+ <Subtitle sx={{ "@media print": { display: "none" } }}>
110
+ DETAILS
111
+ </Subtitle>
97
112
  </FlexBox>
98
113
  </Box>
99
114
 
package/src/features/table/components/dashboard/table/details/templates/invoice-details.tsx CHANGED
@@ -15,6 +15,7 @@ import {
15
15
  Typography,
16
16
  useMediaQuery,
17
17
  useTheme,
18
+ Button,
18
19
  } from "@mui/material";
19
20
  import Grid2 from "@mui/material/Grid2";
20
21
  import { StatusPill } from "../../status-pill";
@@ -79,6 +80,12 @@ interface InvoiceData {
79
80
  OrderedByCustomerName?: string;
80
81
  }
81
82
 
83
+ interface TableColumn {
84
+ label: string;
85
+ width: number;
86
+ aligned: "inherit" | "left" | "center" | "right" | "justify";
87
+ }
88
+
82
89
  const detailSkeletonKeys = ["from", "bill-to", "invoice-date", "due-date"];
83
90
  const tableSkeletonRowKeys = ["line-1", "line-2", "line-3", "line-4"];
84
91
  const totalSkeletonKeys = ["subtotal", "tax", "total"];
@@ -133,15 +140,15 @@ export const InvoiceDetailsTemplate = ({
133
140
  const total = invoice?.Amount ?? 0;
134
141
 
135
142
  // Fixed column definitions with specific widths
136
- const columns = [
137
- { label: "#", width: 60 },
138
- { label: "Product", width: 200 },
139
- { label: "Qty", width: 60 },
140
- { label: "Unit", width: 60 },
141
- { label: "Unit Price", width: 120 },
142
- { label: "Discount", width: 100 },
143
- { label: "Line Total", width: 120 },
144
- { label: "", width: 40 },
143
+ const columns: TableColumn[] = [
144
+ { label: "#", width: 60, aligned: "left" },
145
+ { label: "Product", width: 200, aligned: "left" },
146
+ { label: "Qty", width: 60, aligned: "right" },
147
+ { label: "Unit", width: 60, aligned: "right" },
148
+ { label: "Unit Price", width: 120, aligned: "right" },
149
+ { label: "Discount", width: 100, aligned: "right" },
150
+ { label: "Line Total", width: 120, aligned: "right" },
151
+ { label: "", width: 40, aligned: "center" },
145
152
  ];
146
153
 
147
154
  // Calculate total width for table container
@@ -221,8 +228,19 @@ export const InvoiceDetailsTemplate = ({
221
228
  );
222
229
  }
223
230
 
231
+ function handleOnClick() {
232
+ window.print();
233
+ }
234
+
224
235
  return (
225
- <Box sx={{ p: { xs: 2, sm: 3 }, width: containerWidth, mx: "auto" }}>
236
+ <Box
237
+ sx={{
238
+ p: { xs: 2, sm: 3 },
239
+ width: containerWidth,
240
+ mx: "auto",
241
+ "@media print": { p: 0, width: "100%" },
242
+ }}
243
+ >
226
244
  {/* Header */}
227
245
  <Box
228
246
  display="flex"
@@ -239,7 +257,12 @@ export const InvoiceDetailsTemplate = ({
239
257
  statusTextMap={statusTextMap}
240
258
  />
241
259
  )}
242
- <Box display="flex" gap={2} alignItems="center">
260
+ <Box
261
+ display="flex"
262
+ gap={2}
263
+ alignItems="center"
264
+ sx={{ "@media print": { display: "none" } }}
265
+ >
243
266
  {actions?.map((action) => {
244
267
  const enabled = !action.isEnabled || action.isEnabled(row);
245
268
  if (!enabled) {
@@ -263,14 +286,25 @@ export const InvoiceDetailsTemplate = ({
263
286
  />
264
287
  );
265
288
  })}
289
+ <Button
290
+ onClick={handleOnClick}
291
+ variant="outlined"
292
+ sx={{ "@media print": { display: "none" } }}
293
+ >
294
+ Print Invoice
295
+ </Button>
266
296
  </Box>
267
297
  </Box>
268
298
 
269
299
  {/* Notes Section */}
270
300
  {invoice?.Notes && (
271
301
  <Card
272
- variant="outlined"
273
- sx={{ p: { xs: 2, sm: 3 }, borderRadius: 3, mb: 3 }}
302
+ sx={{
303
+ p: { xs: 2, sm: 3 },
304
+ borderRadius: 3,
305
+ mb: 3,
306
+ "@media print": { border: "none", boxShadow: "none", p: 0 },
307
+ }}
274
308
  >
275
309
  <Typography variant="subtitle1" color="text.secondary" mb={1}>
276
310
  Notes
@@ -286,7 +320,13 @@ export const InvoiceDetailsTemplate = ({
286
320
  )}
287
321
 
288
322
  {/* Main Invoice Card */}
289
- <Card variant="outlined" sx={{ p: { xs: 2, sm: 3 }, borderRadius: 3 }}>
323
+ <Card
324
+ sx={{
325
+ p: { xs: 2, sm: 3 },
326
+ borderRadius: 3,
327
+ "@media print": { border: "none", boxShadow: "none", p: 0 },
328
+ }}
329
+ >
290
330
  {/* Details Section */}
291
331
  {(invoice?.CompanyName ||
292
332
  invoice?.Name ||
@@ -400,7 +440,17 @@ export const InvoiceDetailsTemplate = ({
400
440
  {items.length > 0 ? (
401
441
  <>
402
442
  <TableContainer>
403
- <Table sx={{ minWidth: totalTableWidth }}>
443
+ <Table
444
+ sx={{
445
+ minWidth: totalTableWidth,
446
+ "@media print": {
447
+ p: 0,
448
+ scrollbarWidth: "none !important",
449
+ msOverflowStyle: "none !important",
450
+ overflow: "visible !important",
451
+ },
452
+ }}
453
+ >
404
454
  <TableHead>
405
455
  <TableRow>
406
456
  {columns.map((col) => (
@@ -412,6 +462,7 @@ export const InvoiceDetailsTemplate = ({
412
462
  fontWeight: 600,
413
463
  backgroundColor: theme.palette.background.paper,
414
464
  }}
465
+ align={col.aligned}
415
466
  >
416
467
  <Typography variant="body2" fontWeight={600}>
417
468
  {col.label}
@@ -435,29 +486,35 @@ export const InvoiceDetailsTemplate = ({
435
486
  ].join("-");
436
487
 
437
488
  return (
438
- <TableRow key={itemKey}>
439
- <TableCell sx={{ width: 60, minWidth: 60 }}>
489
+ <TableRow key={`${item.ItemId}-${idx}`}>
490
+ <TableCell
491
+ sx={{
492
+ width: "100%",
493
+ textAlign: "left",
494
+ "@media print": { width: 60, px: 1 },
495
+ }}
496
+ >
440
497
  <Typography variant="body2">
441
498
  {item?.ItemId || idx + 1}
442
499
  </Typography>
443
500
  </TableCell>
444
- <TableCell sx={{ width: 200, minWidth: 200 }}>
501
+ <TableCell sx={{ width: "100%", textAlign: "left" }}>
445
502
  <Typography variant="body2">{productName}</Typography>
446
503
  </TableCell>
447
- <TableCell sx={{ width: 60, minWidth: 60 }}>
504
+ <TableCell sx={{ width: "100%", textAlign: "right" }}>
448
505
  <Typography variant="body2">{quantity}</Typography>
449
506
  </TableCell>
450
- <TableCell sx={{ width: 60, minWidth: 60 }}>
507
+ <TableCell sx={{ width: "100%", textAlign: "right" }}>
451
508
  <Typography variant="body2">
452
509
  {item?.UnitOfMeasure || "—"}
453
510
  </Typography>
454
511
  </TableCell>
455
- <TableCell sx={{ width: 120, minWidth: 120 }}>
512
+ <TableCell sx={{ width: "100%", textAlign: "right" }}>
456
513
  <Typography variant="body2">
457
514
  {formatCurrency(unitPrice)}
458
515
  </Typography>
459
516
  </TableCell>
460
- <TableCell sx={{ width: 100, minWidth: 100 }}>
517
+ <TableCell sx={{ width: "100%", textAlign: "right" }}>
461
518
  <Typography
462
519
  variant="body2"
463
520
  color={
@@ -469,13 +526,17 @@ export const InvoiceDetailsTemplate = ({
469
526
  : formatCurrency(0)}
470
527
  </Typography>
471
528
  </TableCell>
472
- <TableCell sx={{ width: 100, minWidth: 100 }}>
529
+ <TableCell sx={{ width: "100%", textAlign: "right" }}>
473
530
  <Typography variant="body2" fontWeight={500}>
474
531
  {formatCurrency(lineTotal)}
475
532
  </Typography>
476
533
  </TableCell>
477
534
  <TableCell
478
- sx={{ width: 40, minWidth: 40 }}
535
+ sx={{
536
+ width: "100%",
537
+ textAlign: "center",
538
+ "@media print": { width: "auto", minWidth: 0 },
539
+ }}
479
540
  align="center"
480
541
  >
481
542
  {item.HasDiscount && (
package/src/features/table/components/dashboard/table-dashboard.tsx CHANGED
@@ -39,7 +39,13 @@ export const TableDashboard = ({ resources, viewConfigQuery }: TableProps) => {
39
39
  return (
40
40
  <Box sx={{ width: "100%", minHeight: "70vh" }}>
41
41
  <TabContext value={value}>
42
- <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
42
+ <Box
43
+ sx={{
44
+ borderBottom: 1,
45
+ borderColor: "divider",
46
+ "@media print": { display: "none" },
47
+ }}
48
+ >
43
49
  <TabList onChange={handleChange}>
44
50
  {resources?.map((resource, i) => (
45
51
  <Tab