Merge branch 'main' into role-based-access

docker/Dockerfile

@@ -1,21 +1,29 @@
 # Dockerfile for Open Archiver
 
-# 1. Build Stage: Install all dependencies and build the project
-FROM node:22-alpine AS build
+ARG BASE_IMAGE=node:22-alpine
+
+# 0. Base Stage: Define all common dependencies and setup
+FROM ${BASE_IMAGE} AS base
 WORKDIR /app
 
 # Install pnpm
-RUN npm install -g pnpm
+RUN --mount=type=cache,target=/root/.npm \
+    npm install -g pnpm
 
 # Copy manifests and lockfile
 COPY package.json pnpm-workspace.yaml pnpm-lock.yaml* ./
 COPY packages/backend/package.json ./packages/backend/
 COPY packages/frontend/package.json ./packages/frontend/
 COPY packages/types/package.json ./packages/types/
+
+# 1. Build Stage: Install all dependencies and build the project
+FROM base AS build
 COPY packages/frontend/svelte.config.js ./packages/frontend/
 
 # Install all dependencies. Use --shamefully-hoist to create a flat node_modules structure
-RUN pnpm install --shamefully-hoist --frozen-lockfile --prod=false
+ENV PNPM_HOME="/pnpm"
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
+    pnpm install --shamefully-hoist --frozen-lockfile --prod=false
 
 # Copy the rest of the source code
 COPY . .
@@ -24,17 +32,7 @@ COPY . .
 RUN pnpm build
 
 # 2. Production Stage: Install only production dependencies and copy built artifacts
-FROM node:22-alpine AS production
-WORKDIR /app
-
-# Install pnpm
-RUN npm install -g pnpm
-
-# Copy manifests and lockfile
-COPY package.json pnpm-workspace.yaml pnpm-lock.yaml* ./
-COPY packages/backend/package.json ./packages/backend/
-COPY packages/frontend/package.json ./packages/frontend/
-COPY packages/types/package.json ./packages/types/
+FROM base AS production
 
 
 # Copy built application from build stage
@@ -46,7 +44,6 @@ COPY --from=build /app/packages/backend/src/database/migrations ./packages/backe
 
 # Copy the entrypoint script and make it executable
 COPY docker/docker-entrypoint.sh /usr/local/bin/
-RUN chmod +x /usr/local/bin/docker-entrypoint.sh
 
 # Expose the port the app runs on
 EXPOSE 4000

packages/frontend/src/lib/components/custom/charts/IngestionHistoryChart.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Chart from '$lib/components/ui/chart/index.js';
 	import { AreaChart } from 'layerchart';
-	import { curveCatmullRom } from 'd3-shape';
+	import { curveMonotoneX } from 'd3-shape';
 	import type { ChartConfig } from '$lib/components/ui/chart';
 
 	export let data: { date: Date; count: number }[];
@@ -39,16 +39,24 @@
 		props={{
 			xAxis: {
 				format: (d) =>
-					new Date(d).toLocaleDateString('en-US', {
+					new Date(d).toLocaleDateString(undefined, {
 						month: 'short',
 						day: 'numeric',
 					}),
 			},
-			area: { curve: curveCatmullRom },
+			area: { curve: curveMonotoneX },
 		}}
 	>
 		{#snippet tooltip()}
-			<Chart.Tooltip />
+			<Chart.Tooltip
+				labelFormatter={(value) =>
+					(value instanceof Date ? value : new Date(value)).toLocaleString(undefined, {
+						month: 'short',
+						day: 'numeric',
+						hour: '2-digit',
+						minute: '2-digit',
+					})}
+			/>
 		{/snippet}
 	</AreaChart>
 </Chart.Container>

packages/frontend/src/lib/components/custom/charts/StorageBySourceChart.svelte

@@ -3,6 +3,7 @@
 	import { PieChart } from 'layerchart';
 	import type { IngestionSourceStats } from '@open-archiver/types';
 	import type { ChartConfig } from '$lib/components/ui/chart';
+	import { formatBytes } from '$lib/utils';
 
 	export let data: IngestionSourceStats[];
 
@@ -29,7 +30,11 @@
 		]}
 	>
 		{#snippet tooltip()}
-			<Chart.Tooltip></Chart.Tooltip>
+			<Chart.Tooltip>
+				{#snippet formatter({ value, item })}
+					{item.payload.name}: {formatBytes(value as number)}
+				{/snippet}
+			</Chart.Tooltip>
 		{/snippet}
 	</PieChart>
 </Chart.Container>

packages/frontend/src/lib/components/ui/chart/chart-tooltip.svelte

@@ -105,10 +105,10 @@
 						indicator === "dot" && "items-center"
 					)}
 				>
-					{#if formatter && item.value !== undefined && item.name}
+					{#if formatter && item.value !== undefined}
 						{@render formatter({
 							value: item.value,
-							name: item.name,
+							name: item.name || '',
 							item,
 							index: i,
 							payload: tooltipCtx.payload,

packages/frontend/src/routes/dashboard/+page.svelte

@@ -111,7 +111,7 @@
 				<div class=" lg:col-span-1">
 					<Card.Root class="h-full">
 						<Card.Header>
-							<Card.Title>Storage by Ingestion Source (Bytes)</Card.Title>
+							<Card.Title>Storage by Ingestion Source</Card.Title>
 						</Card.Header>
 						<Card.Content class="h-full">
 							{#if data.ingestionSources && data.ingestionSources.length > 0}

packages/frontend/src/routes/dashboard/archived-emails/[id]/+page.svelte

@@ -139,7 +139,9 @@
 											class="flex items-center justify-between rounded-md border p-2"
 										>
 											<span
-												>{attachment.filename} ({attachment.sizeBytes} bytes)</span
+												>{attachment.filename} ({formatBytes(
+													attachment.sizeBytes
+												)})</span
 											>
 											<Button
 												variant="outline"