From c593fc0e47cd3e6afaa1cf582db024ac9e7dea27 Mon Sep 17 00:00:00 2001
From: Jaronim Pracht <pracht@MacBook-Air-von-Jaronim.local>
Date: Fri, 20 Jun 2025 18:50:08 +0200
Subject: [PATCH] Add date to PitchBooksTable and reorder table

Add new date formatting utility and update PitchBooksTable to display
the upload date for each pitch book. The sorting order
for pitch books has been reversed to show the most recent uploads first.
---
 .../src/components/PitchBooksTable.tsx        | 134 ++++++++++--------
 project/frontend/src/util/date.ts             |  11 ++
 2 files changed, 85 insertions(+), 60 deletions(-)
 create mode 100644 project/frontend/src/util/date.ts

diff --git a/project/frontend/src/components/PitchBooksTable.tsx b/project/frontend/src/components/PitchBooksTable.tsx
index 1398a18..bd7e5e7 100644
--- a/project/frontend/src/components/PitchBooksTable.tsx
+++ b/project/frontend/src/components/PitchBooksTable.tsx
@@ -21,6 +21,7 @@ import { useCallback, useEffect, useState } from "react";
 import { socket } from "../socket";
 import { fetchPitchBooksById } from "../util/api";
 import { pitchBooksQueryOptions } from "../util/query";
+import { formatDate } from "../util/date"
 
 interface PitchBook {
 	id: number;
@@ -46,6 +47,7 @@ export function PitchBooksTable() {
 			id: number;
 			progress: number;
 			filename?: string;
+			created_at?: string;
 			buffer: number;
 			intervalId?: number;
 		}[]
@@ -76,7 +78,6 @@ export function PitchBooksTable() {
 					const intervalId = prev.find(
 						(item) => item.id === progress.id,
 					)?.intervalId;
-					console.log(intervalId, prev);
 					intervalId && clearInterval(intervalId);
 
 					return [...prev.filter((item) => item.id !== progress.id)];
@@ -102,6 +103,7 @@ export function PitchBooksTable() {
 										filename: oldItem?.filename,
 										buffer: oldItem ? oldItem.buffer + 0.5 : 0,
 										intervalId: oldItem.intervalId,
+										created_at: oldItem?.created_at,
 									},
 								];
 							});
@@ -117,6 +119,7 @@ export function PitchBooksTable() {
 										filename: res.filename,
 										buffer: 0,
 										intervalId,
+										created_at: res.created_at,
 									},
 								]);
 							})
@@ -130,6 +133,7 @@ export function PitchBooksTable() {
 							id: progress.id,
 							progress: progress.progress,
 							filename: oldItem?.filename,
+							created_at: oldItem?.created_at,
 							buffer: 0,
 							intervalId,
 						},
@@ -211,6 +215,7 @@ export function PitchBooksTable() {
 						<TableCell sx={{ width: "60px" }} />
 						<TableCell sx={{ fontWeight: "bold" }}>Fondsname</TableCell>
 						<TableCell sx={{ fontWeight: "bold" }}>Fondsmanager</TableCell>
+						<TableCell sx={{ fontWeight: "bold" }}>Hochgeladen am</TableCell>
 						<TableCell sx={{ fontWeight: "bold" }}>Dateiname</TableCell>
 						<TableCell sx={{ fontWeight: "bold", width: "120px" }}>
 							Status
@@ -218,6 +223,71 @@ export function PitchBooksTable() {
 					</TableRow>
 				</TableHead>
 				<TableBody>
+				{loadingPitchBooks
+					.sort((a, b) => a.id - b.id)
+					.map((pitchBook) => (
+						<TableRow key={pitchBook.id}>
+							<TableCell>
+								<Box
+									sx={{
+										width: 40,
+										height: 50,
+										backgroundColor: "#f0f0f0",
+										borderRadius: 1,
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "center",
+										border: "1px solid #e0e0e0",
+									}}
+								>
+									<PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} />
+								</Box>
+							</TableCell>
+							<TableCell colSpan={2}>
+								<LinearProgress
+									variant="buffer"
+									value={pitchBook.progress}
+									valueBuffer={
+										pitchBook.buffer
+											? pitchBook.progress + pitchBook.buffer
+											: pitchBook.progress
+									}
+								/>
+							</TableCell>
+							<TableCell>
+								<Typography
+									variant="body2"
+									color="text.secondary"
+									fontSize="0.875rem"
+								>
+									{pitchBook.created_at && formatDate(pitchBook.created_at)}
+								</Typography>
+							</TableCell>
+							<TableCell>
+								<Typography
+									variant="body2"
+									color="text.secondary"
+									fontSize="0.875rem"
+								>
+									{pitchBook.filename}
+								</Typography>
+							</TableCell>
+							<TableCell>
+								<Chip
+									icon={<HourglassEmptyIcon />}
+									label="In Bearbeitung"
+									size="small"
+									sx={{
+										backgroundColor: "#fff3e0",
+										color: "#e65100",
+										"& .MuiChip-icon": {
+											color: "#e65100",
+										},
+									}}
+								/>
+							</TableCell>
+						</TableRow>
+					))}
 					{pitchBooks
 						.filter(
 							(pitchbook: PitchBook) =>
@@ -225,8 +295,8 @@ export function PitchBooksTable() {
 						)
 						.sort(
 							(a: PitchBook, b: PitchBook) =>
-								new Date(a.created_at).getTime() -
-								new Date(b.created_at).getTime(),
+								new Date(b.created_at).getTime() -
+								new Date(a.created_at).getTime(),
 						)
 						.map((pitchBook: PitchBook) => {
 							const status = getStatus(pitchBook);
@@ -276,6 +346,7 @@ export function PitchBooksTable() {
 										</Typography>
 									</TableCell>
 									<TableCell>{manager}</TableCell>
+                  <TableCell>{formatDate(pitchBook.created_at)}</TableCell>
 									<TableCell>
 										<Typography
 											variant="body2"
@@ -317,63 +388,6 @@ export function PitchBooksTable() {
 								</TableRow>
 							);
 						})}
-					{loadingPitchBooks
-						.sort((a, b) => a.id - b.id)
-						.map((pitchBook) => (
-							<TableRow key={pitchBook.id}>
-								<TableCell>
-									<Box
-										sx={{
-											width: 40,
-											height: 50,
-											backgroundColor: "#f0f0f0",
-											borderRadius: 1,
-											display: "flex",
-											alignItems: "center",
-											justifyContent: "center",
-											border: "1px solid #e0e0e0",
-										}}
-									>
-										<PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} />
-									</Box>
-								</TableCell>
-								<TableCell colSpan={2}>
-									<LinearProgress
-										variant="buffer"
-										value={pitchBook.progress}
-										valueBuffer={
-											pitchBook.buffer
-												? pitchBook.progress + pitchBook.buffer
-												: pitchBook.progress
-										}
-									/>
-								</TableCell>
-								<TableCell>
-									{" "}
-									<Typography
-										variant="body2"
-										color="text.secondary"
-										fontSize="0.875rem"
-									>
-										{pitchBook.filename}
-									</Typography>
-								</TableCell>
-								<TableCell>
-									<Chip
-										icon={<HourglassEmptyIcon />}
-										label="In Bearbeitung"
-										size="small"
-										sx={{
-											backgroundColor: "#fff3e0",
-											color: "#e65100",
-											"& .MuiChip-icon": {
-												color: "#e65100",
-											},
-										}}
-									/>
-								</TableCell>
-							</TableRow>
-						))}
 				</TableBody>
 			</Table>
 			{pitchBooks.length === 0 && (
diff --git a/project/frontend/src/util/date.ts b/project/frontend/src/util/date.ts
new file mode 100644
index 0000000..13dbfa8
--- /dev/null
+++ b/project/frontend/src/util/date.ts
@@ -0,0 +1,11 @@
+export const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+  const day = String(date.getDate()).padStart(2, '0');
+  const year = date.getFullYear();
+
+  return `${hours}:${minutes} ${day}.${month}.${year}`;
+};
-- 
2.43.0