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.

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 && (

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}`;
+};