Compare commits
4 Commits
v0.1.1.24
...
fafefff29b
| Author | SHA1 | Date | |
|---|---|---|---|
| fafefff29b | |||
| 4fd7f3c6cf | |||
| 262c48a01a | |||
| 9ad3c2cf38 |
@@ -34,6 +34,8 @@ ORIGIN=http://localhost:5173
|
|||||||
# POSTGRES_USER=postgres
|
# POSTGRES_USER=postgres
|
||||||
# POSTGRES_PASSWORD=
|
# POSTGRES_PASSWORD=
|
||||||
# POSTGRES_DB=daagbox
|
# POSTGRES_DB=daagbox
|
||||||
|
# Optional: lock Docker Compose to a specific configuration file (e.g. staging or production) on the server:
|
||||||
|
# COMPOSE_FILE=docker-compose.staging.yml
|
||||||
# Optional: comma-separated CORS origins (defaults to ORIGIN; 127.0.0.1 may be allowed for CORS but not for login)
|
# Optional: comma-separated CORS origins (defaults to ORIGIN; 127.0.0.1 may be allowed for CORS but not for login)
|
||||||
# CORS_ORIGINS=http://localhost:5173
|
# CORS_ORIGINS=http://localhost:5173
|
||||||
|
|
||||||
|
|||||||
@@ -7,12 +7,22 @@ import {
|
|||||||
type AdminTimeSeriesResponse,
|
type AdminTimeSeriesResponse,
|
||||||
type AdminTimeBucket
|
type AdminTimeBucket
|
||||||
} from '../services/adminApi.js'
|
} from '../services/adminApi.js'
|
||||||
import { BarChart2, Bookmark, ChevronLeft, Image, MapPin, Mic, Users } from 'lucide-react'
|
import { BarChart2, Bookmark, ChevronLeft, Database, Image, MapPin, Mic, Users } from 'lucide-react'
|
||||||
|
|
||||||
function formatNumber(value: number): string {
|
function formatNumber(value: number): string {
|
||||||
return value.toLocaleString()
|
return value.toLocaleString()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function formatBytes(bytes: number | undefined): string {
|
||||||
|
if (bytes === undefined || bytes === null) return '—'
|
||||||
|
if (bytes === 0) return '0 B'
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
const num = bytes / Math.pow(k, i)
|
||||||
|
return `${num.toFixed(1)} ${sizes[i]}`
|
||||||
|
}
|
||||||
|
|
||||||
function KpiCard({
|
function KpiCard({
|
||||||
icon,
|
icon,
|
||||||
label,
|
label,
|
||||||
@@ -20,14 +30,14 @@ function KpiCard({
|
|||||||
}: {
|
}: {
|
||||||
icon: ReactNode
|
icon: ReactNode
|
||||||
label: string
|
label: string
|
||||||
value: number
|
value: number | string
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="stats-kpi-card glass">
|
<div className="stats-kpi-card glass">
|
||||||
<div className="stats-kpi-icon">{icon}</div>
|
<div className="stats-kpi-icon">{icon}</div>
|
||||||
<div className="stats-kpi-body">
|
<div className="stats-kpi-body">
|
||||||
<span className="stats-kpi-label">{label}</span>
|
<span className="stats-kpi-label">{label}</span>
|
||||||
<span className="stats-kpi-value">{formatNumber(value)}</span>
|
<span className="stats-kpi-value">{typeof value === 'number' ? formatNumber(value) : value}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -194,6 +204,7 @@ export default function AdminDashboard({ onBack }: AdminDashboardProps) {
|
|||||||
label="Einträge mit AI-Zusammenfassung"
|
label="Einträge mit AI-Zusammenfassung"
|
||||||
value={summary.aiSummaryEntries}
|
value={summary.aiSummaryEntries}
|
||||||
/>
|
/>
|
||||||
|
<KpiCard icon={<Database size={20} />} label="Datenbankgröße" value={formatBytes(summary.dbSize)} />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="admin-controls">
|
<section className="admin-controls">
|
||||||
@@ -233,6 +244,7 @@ export default function AdminDashboard({ onBack }: AdminDashboardProps) {
|
|||||||
<TimeSeriesChart title="Neue Benutzer" seriesKey="users_created" data={timeSeries} />
|
<TimeSeriesChart title="Neue Benutzer" seriesKey="users_created" data={timeSeries} />
|
||||||
<TimeSeriesChart title="Neue Logbücher" seriesKey="logbooks_created" data={timeSeries} />
|
<TimeSeriesChart title="Neue Logbücher" seriesKey="logbooks_created" data={timeSeries} />
|
||||||
<TimeSeriesChart title="Foto-Aktivität" seriesKey="photos_updated" data={timeSeries} />
|
<TimeSeriesChart title="Foto-Aktivität" seriesKey="photos_updated" data={timeSeries} />
|
||||||
|
<TimeSeriesChart title="Datenbankgröße (MB)" seriesKey="database_size" data={timeSeries} />
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useEffect, useMemo, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { Users } from 'lucide-react'
|
import { Users, ChevronDown, ChevronUp } from 'lucide-react'
|
||||||
import type { EntryCrewFields, PersonSnapshot } from '../types/person.js'
|
import type { EntryCrewFields, PersonSnapshot } from '../types/person.js'
|
||||||
import { loadPersonPool } from '../services/personPool.js'
|
import { loadPersonPool } from '../services/personPool.js'
|
||||||
import { loadLogbookCrewSelection } from '../services/logbookCrewSelection.js'
|
import { loadLogbookCrewSelection } from '../services/logbookCrewSelection.js'
|
||||||
@@ -24,6 +24,7 @@ export default function EntryCrewSection({
|
|||||||
preloadedPool
|
preloadedPool
|
||||||
}: EntryCrewSectionProps) {
|
}: EntryCrewSectionProps) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
const [collapsed, setCollapsed] = useState(true)
|
||||||
const [pool, setPool] = useState<Map<string, PersonData>>(preloadedPool ?? new Map())
|
const [pool, setPool] = useState<Map<string, PersonData>>(preloadedPool ?? new Map())
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -90,54 +91,78 @@ export default function EntryCrewSection({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="form-card" data-tour="entry-crew">
|
<div className="form-card" data-tour="entry-crew">
|
||||||
<div className="form-header">
|
<div
|
||||||
<Users size={22} className="form-icon" />
|
className="form-header accordion-header"
|
||||||
<h3>{t('entry_crew.title')}</h3>
|
onClick={() => setCollapsed(!collapsed)}
|
||||||
</div>
|
onKeyDown={(e) => {
|
||||||
<p className="help-text mb-3">{t('entry_crew.subtitle')}</p>
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
e.preventDefault()
|
||||||
<div className="input-group mb-3">
|
setCollapsed(!collapsed)
|
||||||
<label>{t('entry_crew.day_skipper')}</label>
|
}
|
||||||
{skippers.length === 0 ? (
|
}}
|
||||||
<p className="help-text">{t('entry_crew.no_skipper')}</p>
|
role="button"
|
||||||
|
aria-expanded={!collapsed}
|
||||||
|
tabIndex={0}
|
||||||
|
>
|
||||||
|
<div className="accordion-header-title">
|
||||||
|
<Users size={22} className="form-icon" />
|
||||||
|
<h3>{t('entry_crew.title')}</h3>
|
||||||
|
</div>
|
||||||
|
{collapsed ? (
|
||||||
|
<ChevronDown size={20} className="accordion-chevron" />
|
||||||
) : (
|
) : (
|
||||||
<div className="crew-selection-list">
|
<ChevronUp size={20} className="accordion-chevron" />
|
||||||
{skippers.map(([id, data]) => (
|
|
||||||
<label key={id} className="crew-selection-item">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name={`entry-skipper-${logbookId}`}
|
|
||||||
checked={value.selectedSkipperId === id}
|
|
||||||
onChange={() => !readOnly && applyChange(id, value.selectedCrewIds)}
|
|
||||||
disabled={readOnly}
|
|
||||||
/>
|
|
||||||
<span>{data.name || t('logbook_crew.unnamed')}</span>
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="input-group">
|
{!collapsed && (
|
||||||
<label>{t('entry_crew.day_crew')}</label>
|
<>
|
||||||
{crewEntries.length === 0 ? (
|
<p className="help-text mb-3" style={{ marginTop: '16px' }}>{t('entry_crew.subtitle')}</p>
|
||||||
<p className="help-text">{t('entry_crew.no_crew')}</p>
|
|
||||||
) : (
|
<div className="input-group mb-3">
|
||||||
<div className="crew-selection-list">
|
<label>{t('entry_crew.day_skipper')}</label>
|
||||||
{crewEntries.map(([id, data]) => (
|
{skippers.length === 0 ? (
|
||||||
<label key={id} className="crew-selection-item">
|
<p className="help-text">{t('entry_crew.no_skipper')}</p>
|
||||||
<input
|
) : (
|
||||||
type="checkbox"
|
<div className="crew-selection-list">
|
||||||
checked={value.selectedCrewIds.includes(id)}
|
{skippers.map(([id, data]) => (
|
||||||
onChange={() => toggleCrew(id)}
|
<label key={id} className="crew-selection-item">
|
||||||
disabled={readOnly}
|
<input
|
||||||
/>
|
type="radio"
|
||||||
<span>{data.name || t('logbook_crew.unnamed')}</span>
|
name={`entry-skipper-${logbookId}`}
|
||||||
</label>
|
checked={value.selectedSkipperId === id}
|
||||||
))}
|
onChange={() => !readOnly && applyChange(id, value.selectedCrewIds)}
|
||||||
|
disabled={readOnly}
|
||||||
|
/>
|
||||||
|
<span>{data.name || t('logbook_crew.unnamed')}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
<div className="input-group">
|
||||||
|
<label>{t('entry_crew.day_crew')}</label>
|
||||||
|
{crewEntries.length === 0 ? (
|
||||||
|
<p className="help-text">{t('entry_crew.no_crew')}</p>
|
||||||
|
) : (
|
||||||
|
<div className="crew-selection-list">
|
||||||
|
{crewEntries.map(([id, data]) => (
|
||||||
|
<label key={id} className="crew-selection-item">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={value.selectedCrewIds.includes(id)}
|
||||||
|
onChange={() => toggleCrew(id)}
|
||||||
|
disabled={readOnly}
|
||||||
|
/>
|
||||||
|
<span>{data.name || t('logbook_crew.unnamed')}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ export interface AdminSummary {
|
|||||||
totalCollaborations: number
|
totalCollaborations: number
|
||||||
totalInvitations: number
|
totalInvitations: number
|
||||||
aiSummaryEntries: number
|
aiSummaryEntries: number
|
||||||
|
dbSize: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export type AdminTimeBucket = 'day' | 'week' | 'month'
|
export type AdminTimeBucket = 'day' | 'week' | 'month'
|
||||||
|
|||||||
@@ -23,6 +23,11 @@ router.get('/summary', requireUser, requireAdmin, async (_req, res) => {
|
|||||||
prisma.aiSummaryUsage.count()
|
prisma.aiSummaryUsage.count()
|
||||||
])
|
])
|
||||||
|
|
||||||
|
const rawDbSize = await prisma.$queryRaw<[{ size: string }]>`
|
||||||
|
SELECT pg_database_size(current_database())::text as size
|
||||||
|
`
|
||||||
|
const dbSize = Number(rawDbSize[0]?.size || '0')
|
||||||
|
|
||||||
res.json({
|
res.json({
|
||||||
totalUsers,
|
totalUsers,
|
||||||
totalLogbooks,
|
totalLogbooks,
|
||||||
@@ -31,7 +36,8 @@ router.get('/summary', requireUser, requireAdmin, async (_req, res) => {
|
|||||||
totalGpsTracks,
|
totalGpsTracks,
|
||||||
totalCollaborations,
|
totalCollaborations,
|
||||||
totalInvitations,
|
totalInvitations,
|
||||||
aiSummaryEntries
|
aiSummaryEntries,
|
||||||
|
dbSize
|
||||||
})
|
})
|
||||||
} catch (error: unknown) {
|
} catch (error: unknown) {
|
||||||
console.error('admin/summary error', error)
|
console.error('admin/summary error', error)
|
||||||
@@ -91,7 +97,7 @@ async function buildTimeSeries(bucket: TimeBucket, windowDays: number): Promise<
|
|||||||
const since = new Date()
|
const since = new Date()
|
||||||
since.setUTCDate(since.getUTCDate() - windowDays)
|
since.setUTCDate(since.getUTCDate() - windowDays)
|
||||||
|
|
||||||
const [users, logbooks, photos] = await Promise.all([
|
const [users, logbooks, photos, dbSizeRaw, photosSize, voiceSize, tracksSize, entriesSize] = await Promise.all([
|
||||||
prisma.user.findMany({
|
prisma.user.findMany({
|
||||||
where: { createdAt: { gte: since } },
|
where: { createdAt: { gte: since } },
|
||||||
select: { createdAt: true }
|
select: { createdAt: true }
|
||||||
@@ -103,9 +109,72 @@ async function buildTimeSeries(bucket: TimeBucket, windowDays: number): Promise<
|
|||||||
prisma.photoPayload.findMany({
|
prisma.photoPayload.findMany({
|
||||||
where: { updatedAt: { gte: since } },
|
where: { updatedAt: { gte: since } },
|
||||||
select: { updatedAt: true }
|
select: { updatedAt: true }
|
||||||
|
}),
|
||||||
|
prisma.$queryRaw<[{ size: string }]>`
|
||||||
|
SELECT pg_database_size(current_database())::text as size
|
||||||
|
`,
|
||||||
|
prisma.photoPayload.findMany({
|
||||||
|
select: { updatedAt: true, encryptedData: true }
|
||||||
|
}),
|
||||||
|
prisma.voiceMemoPayload.findMany({
|
||||||
|
select: { updatedAt: true, encryptedData: true }
|
||||||
|
}),
|
||||||
|
prisma.gpsTrackPayload.findMany({
|
||||||
|
select: { updatedAt: true, encryptedData: true }
|
||||||
|
}),
|
||||||
|
prisma.entryPayload.findMany({
|
||||||
|
select: { updatedAt: true, encryptedData: true }
|
||||||
})
|
})
|
||||||
])
|
])
|
||||||
|
|
||||||
|
const dbSizeVal = Number(dbSizeRaw[0]?.size || '0')
|
||||||
|
|
||||||
|
const payloads: { date: Date; size: number }[] = []
|
||||||
|
for (const p of photosSize) {
|
||||||
|
payloads.push({ date: p.updatedAt, size: p.encryptedData.length })
|
||||||
|
}
|
||||||
|
for (const v of voiceSize) {
|
||||||
|
payloads.push({ date: v.updatedAt, size: v.encryptedData.length })
|
||||||
|
}
|
||||||
|
for (const g of tracksSize) {
|
||||||
|
payloads.push({ date: g.updatedAt, size: g.encryptedData.length })
|
||||||
|
}
|
||||||
|
for (const e of entriesSize) {
|
||||||
|
payloads.push({ date: e.updatedAt, size: e.encryptedData.length })
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalPayloadsSize = payloads.reduce((acc, p) => acc + p.size, 0)
|
||||||
|
const baseDbSize = Math.max(0, dbSizeVal - totalPayloadsSize)
|
||||||
|
|
||||||
|
payloads.sort((a, b) => a.date.getTime() - b.date.getTime())
|
||||||
|
|
||||||
|
// Generate complete list of date keys for the window
|
||||||
|
const dateKeys: string[] = []
|
||||||
|
const current = new Date(since)
|
||||||
|
const todayStr = bucketDate(new Date(), bucket)
|
||||||
|
while (true) {
|
||||||
|
const key = bucketDate(current, bucket)
|
||||||
|
if (!dateKeys.includes(key)) {
|
||||||
|
dateKeys.push(key)
|
||||||
|
}
|
||||||
|
if (key >= todayStr) break
|
||||||
|
current.setUTCDate(current.getUTCDate() + 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const dbSizePoints = dateKeys.map((key) => {
|
||||||
|
let sizeSum = 0
|
||||||
|
for (const p of payloads) {
|
||||||
|
if (bucketDate(p.date, bucket) <= key) {
|
||||||
|
sizeSum += p.size
|
||||||
|
} else {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const totalBytes = baseDbSize + sizeSum
|
||||||
|
const sizeInMb = Math.round((totalBytes / (1024 * 1024)) * 10) / 10
|
||||||
|
return { date: key, count: sizeInMb }
|
||||||
|
})
|
||||||
|
|
||||||
function aggregate(dates: Date[], metric: string): TimeSeries {
|
function aggregate(dates: Date[], metric: string): TimeSeries {
|
||||||
const map = new Map<string, number>()
|
const map = new Map<string, number>()
|
||||||
for (const d of dates) {
|
for (const d of dates) {
|
||||||
@@ -130,7 +199,11 @@ async function buildTimeSeries(bucket: TimeBucket, windowDays: number): Promise<
|
|||||||
aggregate(
|
aggregate(
|
||||||
photos.map((p) => p.updatedAt),
|
photos.map((p) => p.updatedAt),
|
||||||
'photos_updated'
|
'photos_updated'
|
||||||
)
|
),
|
||||||
|
{
|
||||||
|
metric: 'database_size',
|
||||||
|
points: dbSizePoints
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user