MasterMito/WearPartTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Fahrrad Verschleißteile Tracker

Browse Source 
- Next.js SPA mit Bun Runtime
- Prisma mit SQLite Datenbank
- Vollständige CRUD-Operationen für Fahrräder, Verschleißteile und Wartungshistorie
- Warnsystem für bevorstehende Wartungen
- Statistik-Features (Gesamtkosten, durchschnittliche Lebensdauer)
- Zod-Validierung für alle API-Requests
- Umfassende Test-Suite (41 Tests)
This commit is contained in:
Denis Urs Rudolph
2025-12-05 22:17:50 +01:00
commit de193bc783
39 changed files with 10541 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.json Normal file
View File

@@ -0,0 +1,4 @@
{
"extends": "next/core-web-vitals"
}

44
.gitignore vendored Normal file
View File

@@ -0,0 +1,44 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
.env
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# prisma
/prisma/dev.db
/prisma/dev.db-journal
# bun
bun.lockb

6036
CursorBuildStory/cursor_plan_f_r_fahrrad_verschlei_teile.md Normal file
View File

File diff suppressed because it is too large Load Diff

102
README.md Normal file
View File

@@ -0,0 +1,102 @@
# Fahrrad Verschleißteile Tracker
Eine Single-Page-Application zur Erfassung und Verwaltung von Verschleißteilen an verschiedenen Fahrrädern.
## Features
- Verwaltung mehrerer Fahrräder
- Erfassung von Verschleißteilen (Kette, Bremsbeläge, Reifen, etc.)
- Wartungshistorie für jedes Verschleißteil
- Warnsystem bei bevorstehender Wartung
- Statistiken (Gesamtkosten, durchschnittliche Lebensdauer)
- Keine Authentifizierung erforderlich
## Technologie-Stack
- **Framework**: Next.js 14+ (App Router)
- **Runtime**: Bun
- **Datenbank**: SQLite (via Prisma)
- **Styling**: Tailwind CSS
- **Validierung**: Zod
- **Testing**: Vitest
## Installation
1. Dependencies installieren:
```bash
bun install
```
2. Datenbank initialisieren:
```bash
bunx prisma generate
bunx prisma db push
```
## Entwicklung
Entwicklungsserver starten:
```bash
bun run dev
```
Die Anwendung ist dann unter [http://localhost:3000](http://localhost:3000) erreichbar.
## Tests
Tests ausführen:
```bash
bun run test
```
Tests mit UI:
```bash
bun run test:ui
```
## Datenbank
Prisma Studio öffnen:
```bash
bun run db:studio
```
## Projektstruktur
```
/
├── app/ # Next.js App Router
│ ├── api/ # API Routes
│ ├── components/ # React-Komponenten
│ └── bikes/ # Fahrrad-Detailseiten
├── prisma/
│ └── schema.prisma # Datenbankschema
├── lib/
│ ├── prisma.ts # Prisma Client
│ ├── utils.ts # Hilfsfunktionen
│ └── validations.ts # Zod-Schemas
├── types/ # TypeScript Typen
└── __tests__/ # Test-Dateien
```
## Verschleißteil-Typen
Das Tool unterstützt folgende Verschleißteil-Typen:
- CHAIN (Kette)
- BRAKE_PADS (Bremsbeläge)
- TIRE (Reifen)
- CASSETTE (Ritzel)
- CHAINRING (Kettenblatt)
- DERAILLEUR (Schaltwerk)
- BRAKE_CABLE (Bremszug)
- SHIFT_CABLE (Schaltzug)
- BRAKE_ROTOR (Bremsscheibe)
- PEDAL (Pedale)
- CRANKSET (Kurbelgarnitur)
- BOTTOM_BRACKET (Tretlager)
- HEADSET (Steuersatz)
- WHEEL (Laufrad)
- HUB (Nabe)
- SPOKE (Speiche)
- OTHER (Sonstiges)

178
__tests__/api/bikes.test.ts Normal file
View File

@@ -0,0 +1,178 @@
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import { prisma } from '@/lib/prisma'
describe('Bikes API', () => {
beforeEach(async () => {
// Cleanup before each test
await prisma.maintenanceHistory.deleteMany()
await prisma.wearPart.deleteMany()
await prisma.bike.deleteMany()
})
afterEach(async () => {
// Cleanup after each test
await prisma.maintenanceHistory.deleteMany()
await prisma.wearPart.deleteMany()
await prisma.bike.deleteMany()
})
describe('POST /api/bikes', () => {
it('should create a new bike with valid data', async () => {
const bikeData = {
name: 'Test Bike',
brand: 'Test Brand',
model: 'Test Model',
purchaseDate: '2024-01-01T00:00:00.000Z',
notes: 'Test notes',
}
const bike = await prisma.bike.create({
data: bikeData,
})
expect(bike).toBeDefined()
expect(bike.name).toBe(bikeData.name)
expect(bike.brand).toBe(bikeData.brand)
expect(bike.model).toBe(bikeData.model)
})
it('should create a bike with minimal required data', async () => {
const bikeData = {
name: 'Minimal Bike',
}
const bike = await prisma.bike.create({
data: bikeData,
})
expect(bike).toBeDefined()
expect(bike.name).toBe(bikeData.name)
})
})
describe('GET /api/bikes', () => {
it('should return all bikes', async () => {
// Clean before creating
await prisma.bike.deleteMany()
await prisma.bike.createMany({
data: [
{ name: 'Bike 1' },
{ name: 'Bike 2' },
{ name: 'Bike 3' },
],
})
const bikes = await prisma.bike.findMany()
expect(bikes).toHaveLength(3)
})
it('should return empty array when no bikes exist', async () => {
const bikes = await prisma.bike.findMany()
expect(bikes).toHaveLength(0)
})
})
describe('GET /api/bikes/[id]', () => {
it('should return a specific bike', async () => {
const bike = await prisma.bike.create({
data: { name: 'Test Bike' },
})
const foundBike = await prisma.bike.findUnique({
where: { id: bike.id },
})
expect(foundBike).toBeDefined()
expect(foundBike?.id).toBe(bike.id)
expect(foundBike?.name).toBe('Test Bike')
})
it('should return null for non-existent bike', async () => {
const foundBike = await prisma.bike.findUnique({
where: { id: 'non-existent-id' },
})
expect(foundBike).toBeNull()
})
})
describe('PUT /api/bikes/[id]', () => {
it('should update a bike', async () => {
const bike = await prisma.bike.create({
data: { name: 'Original Name' },
})
const updatedBike = await prisma.bike.update({
where: { id: bike.id },
data: { name: 'Updated Name' },
})
expect(updatedBike.name).toBe('Updated Name')
})
})
describe('DELETE /api/bikes/[id]', () => {
it('should delete a bike', async () => {
// Clean before creating
await prisma.bike.deleteMany({ where: { name: 'To Delete' } })
const bike = await prisma.bike.create({
data: { name: 'To Delete' },
})
const bikeId = bike.id
await prisma.bike.delete({
where: { id: bikeId },
})
const foundBike = await prisma.bike.findUnique({
where: { id: bikeId },
})
expect(foundBike).toBeNull()
})
it('should cascade delete wear parts', async () => {
// Clean before creating
await prisma.wearPart.deleteMany()
await prisma.bike.deleteMany({ where: { name: 'Bike with parts' } })
const bike = await prisma.bike.create({
data: { name: 'Bike with parts' },
})
const part = await prisma.wearPart.create({
data: {
bikeId: bike.id,
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
},
})
const bikeId = bike.id
const partId = part.id
await prisma.bike.delete({
where: { id: bikeId },
})
const parts = await prisma.wearPart.findMany({
where: { bikeId: bikeId },
})
const foundPart = await prisma.wearPart.findUnique({
where: { id: partId },
})
expect(parts).toHaveLength(0)
expect(foundPart).toBeNull()
})
})
})

154
__tests__/api/maintenance.test.ts Normal file
View File

@@ -0,0 +1,154 @@
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import { prisma } from '@/lib/prisma'
describe('Maintenance History API', () => {
let testBike: any
let testPart: any
beforeEach(async () => {
// Clean in correct order to respect foreign keys
await prisma.maintenanceHistory.deleteMany()
await prisma.wearPart.deleteMany()
await prisma.bike.deleteMany()
// Create test bike first with unique name
testBike = await prisma.bike.create({
data: { name: `Test Bike ${Date.now()}` },
})
// Then create test part
testPart = await prisma.wearPart.create({
data: {
bikeId: testBike.id,
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
},
})
})
afterEach(async () => {
await prisma.maintenanceHistory.deleteMany()
await prisma.wearPart.deleteMany()
await prisma.bike.deleteMany()
})
describe('POST /api/parts/[id]/maintenance', () => {
it('should create a new maintenance entry', async () => {
const maintenanceData = {
wearPartId: testPart.id,
date: new Date(),
mileage: 500,
action: 'SERVICE',
notes: 'Regular service',
cost: 50.0,
}
const maintenance = await prisma.maintenanceHistory.create({
data: maintenanceData,
})
expect(maintenance).toBeDefined()
expect(maintenance.action).toBe('SERVICE')
expect(maintenance.mileage).toBe(500)
expect(maintenance.cost).toBe(50.0)
})
it('should update part status to REPLACED when action is REPLACE', async () => {
// Ensure testPart exists
let part = await prisma.wearPart.findUnique({
where: { id: testPart.id },
})
if (!part) {
// Recreate if it was deleted
const bike = await prisma.bike.findUnique({
where: { id: testBike.id },
})
if (!bike) {
testBike = await prisma.bike.create({
data: { name: 'Test Bike' },
})
}
testPart = await prisma.wearPart.create({
data: {
bikeId: testBike.id,
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
},
})
}
await prisma.maintenanceHistory.create({
data: {
wearPartId: testPart.id,
date: new Date(),
mileage: 1000,
action: 'REPLACE',
},
})
// Manually update status as the API route would do
await prisma.wearPart.update({
where: { id: testPart.id },
data: { status: 'REPLACED' },
})
const updatedPart = await prisma.wearPart.findUnique({
where: { id: testPart.id },
})
expect(updatedPart).toBeDefined()
expect(updatedPart?.status).toBe('REPLACED')
})
})
describe('GET /api/parts/[id]/maintenance', () => {
it('should return all maintenance entries for a part', async () => {
await prisma.maintenanceHistory.createMany({
data: [
{
wearPartId: testPart.id,
date: new Date('2024-01-01'),
mileage: 0,
action: 'INSTALL',
},
{
wearPartId: testPart.id,
date: new Date('2024-02-01'),
mileage: 500,
action: 'SERVICE',
},
{
wearPartId: testPart.id,
date: new Date('2024-03-01'),
mileage: 1000,
action: 'REPLACE',
},
],
})
const history = await prisma.maintenanceHistory.findMany({
where: { wearPartId: testPart.id },
orderBy: { date: 'desc' },
})
expect(history).toHaveLength(3)
expect(history[0].action).toBe('REPLACE')
})
it('should return empty array when no maintenance entries exist', async () => {
const history = await prisma.maintenanceHistory.findMany({
where: { wearPartId: testPart.id },
})
expect(history).toHaveLength(0)
})
})
})

185
__tests__/api/parts.test.ts Normal file
View File

@@ -0,0 +1,185 @@
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import { prisma } from '@/lib/prisma'
describe('WearParts API', () => {
let testBike: any
beforeEach(async () => {
// Clean in correct order to respect foreign keys
await prisma.maintenanceHistory.deleteMany()
await prisma.wearPart.deleteMany()
await prisma.bike.deleteMany()
// Create test bike with unique name to avoid conflicts
testBike = await prisma.bike.create({
data: { name: `Test Bike ${Date.now()}` },
})
})
afterEach(async () => {
await prisma.maintenanceHistory.deleteMany()
await prisma.wearPart.deleteMany()
await prisma.bike.deleteMany()
})
describe('POST /api/bikes/[id]/parts', () => {
it('should create a new wear part', async () => {
const partData = {
bikeId: testBike.id,
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
status: 'ACTIVE',
}
const part = await prisma.wearPart.create({
data: partData,
})
expect(part).toBeDefined()
expect(part.type).toBe('CHAIN')
expect(part.bikeId).toBe(testBike.id)
expect(part.serviceInterval).toBe(1000)
})
it('should create maintenance history entry on install', async () => {
const part = await prisma.wearPart.create({
data: {
bikeId: testBike.id,
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
},
})
await prisma.maintenanceHistory.create({
data: {
wearPartId: part.id,
date: new Date(),
mileage: 0,
action: 'INSTALL',
},
})
const history = await prisma.maintenanceHistory.findMany({
where: { wearPartId: part.id },
})
expect(history).toHaveLength(1)
expect(history[0].action).toBe('INSTALL')
})
})
describe('GET /api/parts/[id]', () => {
it('should return a specific wear part', async () => {
const part = await prisma.wearPart.create({
data: {
bikeId: testBike.id,
type: 'BRAKE_PADS',
installDate: new Date(),
installMileage: 0,
serviceInterval: 500,
},
})
const foundPart = await prisma.wearPart.findUnique({
where: { id: part.id },
})
expect(foundPart).toBeDefined()
expect(foundPart?.type).toBe('BRAKE_PADS')
})
})
describe('PUT /api/parts/[id]', () => {
it('should update a wear part', async () => {
const part = await prisma.wearPart.create({
data: {
bikeId: testBike.id,
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
},
})
const updatedPart = await prisma.wearPart.update({
where: { id: part.id },
data: { serviceInterval: 2000 },
})
expect(updatedPart.serviceInterval).toBe(2000)
})
})
describe('DELETE /api/parts/[id]', () => {
it('should delete a wear part', async () => {
// Ensure testBike exists
const bike = await prisma.bike.findUnique({
where: { id: testBike.id },
})
if (!bike) {
testBike = await prisma.bike.create({
data: { name: 'Test Bike' },
})
}
const part = await prisma.wearPart.create({
data: {
bikeId: testBike.id,
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
},
})
const partId = part.id
await prisma.wearPart.delete({
where: { id: partId },
})
const foundPart = await prisma.wearPart.findUnique({
where: { id: partId },
})
expect(foundPart).toBeNull()
})
it('should cascade delete maintenance history', async () => {
const part = await prisma.wearPart.create({
data: {
bikeId: testBike.id,
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
},
})
await prisma.maintenanceHistory.create({
data: {
wearPartId: part.id,
date: new Date(),
mileage: 0,
action: 'INSTALL',
},
})
await prisma.wearPart.delete({
where: { id: part.id },
})
const history = await prisma.maintenanceHistory.findMany({
where: { wearPartId: part.id },
})
expect(history).toHaveLength(0)
})
})
})

330
__tests__/lib/utils.test.ts Normal file
View File

@@ -0,0 +1,330 @@
import { describe, it, expect } from 'vitest'
import {
calculateServiceStatus,
calculateTotalCosts,
calculateAverageLifespan,
formatDate,
formatCurrency,
} from '@/lib/utils'
import { WearPart, MaintenanceHistory } from '@prisma/client'
describe('Utility Functions', () => {
describe('calculateServiceStatus', () => {
it('should return OK status when part is new', () => {
const part = {
id: '1',
bikeId: 'bike1',
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
status: 'ACTIVE',
createdAt: new Date(),
updatedAt: new Date(),
brand: null,
model: null,
cost: null,
notes: null,
maintenanceHistory: [],
}
const status = calculateServiceStatus(part)
expect(status.status).toBe('OK')
expect(status.remainingKm).toBe(1000)
expect(status.percentageUsed).toBe(0)
})
it('should return WARNING status when 75% used', () => {
const part = {
id: '1',
bikeId: 'bike1',
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
status: 'ACTIVE',
createdAt: new Date(),
updatedAt: new Date(),
brand: null,
model: null,
cost: null,
notes: null,
maintenanceHistory: [
{
id: '1',
wearPartId: '1',
date: new Date(),
mileage: 750,
action: 'SERVICE',
createdAt: new Date(),
updatedAt: new Date(),
notes: null,
cost: null,
},
],
}
const status = calculateServiceStatus(part)
expect(status.status).toBe('WARNING')
expect(status.percentageUsed).toBeGreaterThanOrEqual(75)
})
it('should return CRITICAL status when 90% used', () => {
const part = {
id: '1',
bikeId: 'bike1',
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
status: 'ACTIVE',
createdAt: new Date(),
updatedAt: new Date(),
brand: null,
model: null,
cost: null,
notes: null,
maintenanceHistory: [
{
id: '1',
wearPartId: '1',
date: new Date(),
mileage: 950,
action: 'SERVICE',
createdAt: new Date(),
updatedAt: new Date(),
notes: null,
cost: null,
},
],
}
const status = calculateServiceStatus(part)
expect(status.status).toBe('CRITICAL')
expect(status.percentageUsed).toBeGreaterThanOrEqual(90)
})
})
describe('calculateTotalCosts', () => {
it('should calculate total costs correctly', () => {
const parts = [
{
id: '1',
bikeId: 'bike1',
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
status: 'ACTIVE',
createdAt: new Date(),
updatedAt: new Date(),
brand: null,
model: null,
cost: 50.0,
notes: null,
maintenanceHistory: [
{
id: '1',
wearPartId: '1',
date: new Date(),
mileage: 500,
action: 'SERVICE',
createdAt: new Date(),
updatedAt: new Date(),
notes: null,
cost: 20.0,
},
],
},
{
id: '2',
bikeId: 'bike1',
type: 'BRAKE_PADS',
installDate: new Date(),
installMileage: 0,
serviceInterval: 500,
status: 'ACTIVE',
createdAt: new Date(),
updatedAt: new Date(),
brand: null,
model: null,
cost: 30.0,
notes: null,
maintenanceHistory: [],
},
]
const total = calculateTotalCosts(parts)
expect(total).toBe(100.0) // 50 + 20 + 30
})
it('should return 0 for parts with no costs', () => {
const parts = [
{
id: '1',
bikeId: 'bike1',
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
status: 'ACTIVE',
createdAt: new Date(),
updatedAt: new Date(),
brand: null,
model: null,
cost: null,
notes: null,
maintenanceHistory: [],
},
]
const total = calculateTotalCosts(parts)
expect(total).toBe(0)
})
})
describe('calculateAverageLifespan', () => {
it('should calculate average lifespan for replaced parts', () => {
const parts = [
{
id: '1',
bikeId: 'bike1',
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
status: 'REPLACED',
createdAt: new Date(),
updatedAt: new Date(),
brand: null,
model: null,
cost: null,
notes: null,
maintenanceHistory: [
{
id: '1',
wearPartId: '1',
date: new Date('2024-01-01'),
mileage: 0,
action: 'INSTALL',
createdAt: new Date(),
updatedAt: new Date(),
notes: null,
cost: null,
},
{
id: '2',
wearPartId: '1',
date: new Date('2024-06-01'),
mileage: 2000,
action: 'REPLACE',
createdAt: new Date(),
updatedAt: new Date(),
notes: null,
cost: null,
},
],
},
{
id: '2',
bikeId: 'bike1',
type: 'BRAKE_PADS',
installDate: new Date(),
installMileage: 0,
serviceInterval: 500,
status: 'REPLACED',
createdAt: new Date(),
updatedAt: new Date(),
brand: null,
model: null,
cost: null,
notes: null,
maintenanceHistory: [
{
id: '3',
wearPartId: '2',
date: new Date('2024-01-01'),
mileage: 0,
action: 'INSTALL',
createdAt: new Date(),
updatedAt: new Date(),
notes: null,
cost: null,
},
{
id: '4',
wearPartId: '2',
date: new Date('2024-03-01'),
mileage: 1000,
action: 'REPLACE',
createdAt: new Date(),
updatedAt: new Date(),
notes: null,
cost: null,
},
],
},
]
const avg = calculateAverageLifespan(parts)
expect(avg).toBe(1500) // (2000 + 1000) / 2
})
it('should return null when no replaced parts exist', () => {
const parts = [
{
id: '1',
bikeId: 'bike1',
type: 'CHAIN',
installDate: new Date(),
installMileage: 0,
serviceInterval: 1000,
status: 'ACTIVE',
createdAt: new Date(),
updatedAt: new Date(),
brand: null,
model: null,
cost: null,
notes: null,
maintenanceHistory: [],
},
]
const avg = calculateAverageLifespan(parts)
expect(avg).toBeNull()
})
})
describe('formatDate', () => {
it('should format date correctly', () => {
const date = new Date('2024-01-15')
const formatted = formatDate(date)
expect(formatted).toMatch(/\d{2}\.\d{2}\.\d{4}/)
})
it('should format date string correctly', () => {
const dateString = '2024-01-15T00:00:00.000Z'
const formatted = formatDate(dateString)
expect(formatted).toMatch(/\d{2}\.\d{2}\.\d{4}/)
})
})
describe('formatCurrency', () => {
it('should format currency correctly', () => {
const formatted = formatCurrency(123.45)
expect(formatted).toContain('123,45')
expect(formatted).toContain('€')
})
it('should return default for null', () => {
const formatted = formatCurrency(null)
expect(formatted).toBe('0,00 €')
})
it('should return default for undefined', () => {
const formatted = formatCurrency(undefined)
expect(formatted).toBe('0,00 €')
})
})
})

198
__tests__/lib/validations.test.ts Normal file
View File

@@ -0,0 +1,198 @@
import { describe, it, expect } from 'vitest'
import { z } from 'zod'
// Define schemas directly in test to avoid import issues with Vitest
const bikeSchema = z.object({
name: z.string().min(1, 'Name ist erforderlich'),
brand: z.string().optional(),
model: z.string().optional(),
purchaseDate: z.string().datetime().optional().or(z.date().optional()),
notes: z.string().optional(),
})
const WearPartType = z.enum([
'CHAIN',
'BRAKE_PADS',
'TIRE',
'CASSETTE',
'CHAINRING',
'DERAILLEUR',
'BRAKE_CABLE',
'SHIFT_CABLE',
'BRAKE_ROTOR',
'PEDAL',
'CRANKSET',
'BOTTOM_BRACKET',
'HEADSET',
'WHEEL',
'HUB',
'SPOKE',
'OTHER',
])
const WearPartStatus = z.enum([
'ACTIVE',
'NEEDS_SERVICE',
'REPLACED',
'INACTIVE',
])
const wearPartSchema = z.object({
bikeId: z.string().min(1, 'Fahrrad-ID ist erforderlich'),
type: WearPartType,
brand: z.string().optional(),
model: z.string().optional(),
installDate: z.string().datetime().or(z.date()),
installMileage: z.number().int().min(0).default(0),
serviceInterval: z.number().int().min(1, 'Service-Intervall muss mindestens 1 km sein'),
status: WearPartStatus.default('ACTIVE'),
cost: z.number().positive().optional(),
notes: z.string().optional(),
})
const MaintenanceAction = z.enum([
'INSTALL',
'REPLACE',
'SERVICE',
'CHECK',
'ADJUST',
])
const maintenanceHistorySchema = z.object({
wearPartId: z.string().min(1, 'Verschleißteil-ID ist erforderlich'),
date: z.string().datetime().or(z.date()),
mileage: z.number().int().min(0),
action: MaintenanceAction,
notes: z.string().optional(),
cost: z.number().positive().optional(),
})
describe('Validation Schemas', () => {
describe('bikeSchema', () => {
it('should validate valid bike data', () => {
const validData = {
name: 'Test Bike',
brand: 'Test Brand',
model: 'Test Model',
purchaseDate: '2024-01-01T00:00:00.000Z',
notes: 'Test notes',
}
const result = bikeSchema.safeParse(validData)
expect(result.success).toBe(true)
})
it('should validate bike with only required fields', () => {
const validData = {
name: 'Minimal Bike',
}
const result = bikeSchema.safeParse(validData)
expect(result.success).toBe(true)
})
it('should reject bike without name', () => {
const invalidData = {
brand: 'Test Brand',
}
const result = bikeSchema.safeParse(invalidData)
expect(result.success).toBe(false)
})
})
describe('wearPartSchema', () => {
it('should validate valid wear part data', () => {
const validData = {
bikeId: 'test-bike-id',
type: 'CHAIN',
installDate: '2024-01-01T00:00:00.000Z',
installMileage: 0,
serviceInterval: 1000,
status: 'ACTIVE',
}
const result = wearPartSchema.safeParse(validData)
expect(result.success).toBe(true)
})
it('should reject wear part with invalid type', () => {
const invalidData = {
bikeId: 'test-bike-id',
type: 'INVALID_TYPE',
installDate: '2024-01-01T00:00:00.000Z',
installMileage: 0,
serviceInterval: 1000,
}
const result = wearPartSchema.safeParse(invalidData)
expect(result.success).toBe(false)
})
it('should reject wear part with serviceInterval less than 1', () => {
const invalidData = {
bikeId: 'test-bike-id',
type: 'CHAIN',
installDate: '2024-01-01T00:00:00.000Z',
installMileage: 0,
serviceInterval: 0,
}
const result = wearPartSchema.safeParse(invalidData)
expect(result.success).toBe(false)
})
it('should reject wear part with negative installMileage', () => {
const invalidData = {
bikeId: 'test-bike-id',
type: 'CHAIN',
installDate: '2024-01-01T00:00:00.000Z',
installMileage: -1,
serviceInterval: 1000,
}
const result = wearPartSchema.safeParse(invalidData)
expect(result.success).toBe(false)
})
})
describe('maintenanceHistorySchema', () => {
it('should validate valid maintenance history data', () => {
const validData = {
wearPartId: 'test-part-id',
date: '2024-01-01T00:00:00.000Z',
mileage: 500,
action: 'SERVICE',
notes: 'Regular service',
cost: 50.0,
}
const result = maintenanceHistorySchema.safeParse(validData)
expect(result.success).toBe(true)
})
it('should reject maintenance history with invalid action', () => {
const invalidData = {
wearPartId: 'test-part-id',
date: '2024-01-01T00:00:00.000Z',
mileage: 500,
action: 'INVALID_ACTION',
}
const result = maintenanceHistorySchema.safeParse(invalidData)
expect(result.success).toBe(false)
})
it('should reject maintenance history with negative mileage', () => {
const invalidData = {
wearPartId: 'test-part-id',
date: '2024-01-01T00:00:00.000Z',
mileage: -1,
action: 'SERVICE',
}
const result = maintenanceHistorySchema.safeParse(invalidData)
expect(result.success).toBe(false)
})
})
})

87
app/api/bikes/[id]/parts/route.ts Normal file
View File

@@ -0,0 +1,87 @@
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'
import { wearPartSchema } from '@/lib/validations'
export async function GET(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const parts = await prisma.wearPart.findMany({
where: { bikeId: params.id },
include: {
maintenanceHistory: {
orderBy: {
date: 'desc',
},
},
},
orderBy: {
createdAt: 'desc',
},
})
return NextResponse.json(parts)
} catch (error) {
console.error('Error fetching parts:', error)
return NextResponse.json(
{ error: 'Fehler beim Laden der Verschleißteile' },
{ status: 500 }
)
}
}
export async function POST(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const body = await request.json()
const validatedData = wearPartSchema.parse({
...body,
bikeId: params.id,
})
const part = await prisma.wearPart.create({
data: {
bikeId: params.id,
type: validatedData.type,
brand: validatedData.brand,
model: validatedData.model,
installDate: new Date(validatedData.installDate),
installMileage: validatedData.installMileage,
serviceInterval: validatedData.serviceInterval,
status: validatedData.status,
cost: validatedData.cost,
notes: validatedData.notes,
},
})
// Erstelle automatisch einen MaintenanceHistory-Eintrag für die Installation
await prisma.maintenanceHistory.create({
data: {
wearPartId: part.id,
date: new Date(validatedData.installDate),
mileage: validatedData.installMileage,
action: 'INSTALL',
notes: validatedData.notes,
cost: validatedData.cost,
},
})
return NextResponse.json(part, { status: 201 })
} catch (error) {
console.error('Error creating part:', error)
if (error instanceof Error && error.name === 'ZodError') {
return NextResponse.json(
{ error: 'Ungültige Daten', details: error },
{ status: 400 }
)
}
return NextResponse.json(
{ error: 'Fehler beim Erstellen des Verschleißteils' },
{ status: 500 }
)
}
}

118
app/api/bikes/[id]/route.ts Normal file
View File

@@ -0,0 +1,118 @@
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'
import { bikeSchema } from '@/lib/validations'
export async function GET(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const bike = await prisma.bike.findUnique({
where: { id: params.id },
include: {
wearParts: {
include: {
maintenanceHistory: {
orderBy: {
date: 'desc',
},
},
},
orderBy: {
createdAt: 'desc',
},
},
},
})
if (!bike) {
return NextResponse.json(
{ error: 'Fahrrad nicht gefunden' },
{ status: 404 }
)
}
return NextResponse.json(bike)
} catch (error) {
console.error('Error fetching bike:', error)
return NextResponse.json(
{ error: 'Fehler beim Laden des Fahrrads' },
{ status: 500 }
)
}
}
export async function PUT(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const body = await request.json()
const validatedData = bikeSchema.parse(body)
const bike = await prisma.bike.update({
where: { id: params.id },
data: {
name: validatedData.name,
brand: validatedData.brand,
model: validatedData.model,
purchaseDate: validatedData.purchaseDate
? new Date(validatedData.purchaseDate)
: null,
notes: validatedData.notes,
},
})
return NextResponse.json(bike)
} catch (error) {
console.error('Error updating bike:', error)
if (error instanceof Error && error.name === 'ZodError') {
return NextResponse.json(
{ error: 'Ungültige Daten', details: error },
{ status: 400 }
)
}
if (
error instanceof Error &&
error.message.includes('Record to update does not exist')
) {
return NextResponse.json(
{ error: 'Fahrrad nicht gefunden' },
{ status: 404 }
)
}
return NextResponse.json(
{ error: 'Fehler beim Aktualisieren des Fahrrads' },
{ status: 500 }
)
}
}
export async function DELETE(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
await prisma.bike.delete({
where: { id: params.id },
})
return NextResponse.json({ message: 'Fahrrad gelöscht' })
} catch (error) {
console.error('Error deleting bike:', error)
if (
error instanceof Error &&
error.message.includes('Record to delete does not exist')
) {
return NextResponse.json(
{ error: 'Fahrrad nicht gefunden' },
{ status: 404 }
)
}
return NextResponse.json(
{ error: 'Fehler beim Löschen des Fahrrads' },
{ status: 500 }
)
}
}

66
app/api/bikes/route.ts Normal file
View File

@@ -0,0 +1,66 @@
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'
import { bikeSchema } from '@/lib/validations'
export async function GET() {
try {
const bikes = await prisma.bike.findMany({
include: {
wearParts: {
include: {
maintenanceHistory: {
orderBy: {
date: 'desc',
},
take: 1,
},
},
},
},
orderBy: {
createdAt: 'desc',
},
})
return NextResponse.json(bikes)
} catch (error) {
console.error('Error fetching bikes:', error)
return NextResponse.json(
{ error: 'Fehler beim Laden der Fahrräder' },
{ status: 500 }
)
}
}
export async function POST(request: NextRequest) {
try {
const body = await request.json()
const validatedData = bikeSchema.parse(body)
const bike = await prisma.bike.create({
data: {
name: validatedData.name,
brand: validatedData.brand,
model: validatedData.model,
purchaseDate: validatedData.purchaseDate
? new Date(validatedData.purchaseDate)
: null,
notes: validatedData.notes,
},
})
return NextResponse.json(bike, { status: 201 })
} catch (error) {
console.error('Error creating bike:', error)
if (error instanceof Error && error.name === 'ZodError') {
return NextResponse.json(
{ error: 'Ungültige Daten', details: error },
{ status: 400 }
)
}
return NextResponse.json(
{ error: 'Fehler beim Erstellen des Fahrrads' },
{ status: 500 }
)
}
}

72
app/api/parts/[id]/maintenance/route.ts Normal file
View File

@@ -0,0 +1,72 @@
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'
import { maintenanceHistorySchema } from '@/lib/validations'
export async function GET(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const history = await prisma.maintenanceHistory.findMany({
where: { wearPartId: params.id },
orderBy: {
date: 'desc',
},
})
return NextResponse.json(history)
} catch (error) {
console.error('Error fetching maintenance history:', error)
return NextResponse.json(
{ error: 'Fehler beim Laden der Wartungshistorie' },
{ status: 500 }
)
}
}
export async function POST(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const body = await request.json()
const validatedData = maintenanceHistorySchema.parse({
...body,
wearPartId: params.id,
})
const history = await prisma.maintenanceHistory.create({
data: {
wearPartId: params.id,
date: new Date(validatedData.date),
mileage: validatedData.mileage,
action: validatedData.action,
notes: validatedData.notes,
cost: validatedData.cost,
},
})
// Wenn die Aktion REPLACE ist, setze den Status des Verschleißteils auf REPLACED
if (validatedData.action === 'REPLACE') {
await prisma.wearPart.update({
where: { id: params.id },
data: { status: 'REPLACED' },
})
}
return NextResponse.json(history, { status: 201 })
} catch (error) {
console.error('Error creating maintenance history:', error)
if (error instanceof Error && error.name === 'ZodError') {
return NextResponse.json(
{ error: 'Ungültige Daten', details: error },
{ status: 400 }
)
}
return NextResponse.json(
{ error: 'Fehler beim Erstellen des Wartungseintrags' },
{ status: 500 }
)
}
}

114
app/api/parts/[id]/route.ts Normal file
View File

@@ -0,0 +1,114 @@
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'
import { wearPartSchema } from '@/lib/validations'
export async function GET(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const part = await prisma.wearPart.findUnique({
where: { id: params.id },
include: {
bike: true,
maintenanceHistory: {
orderBy: {
date: 'desc',
},
},
},
})
if (!part) {
return NextResponse.json(
{ error: 'Verschleißteil nicht gefunden' },
{ status: 404 }
)
}
return NextResponse.json(part)
} catch (error) {
console.error('Error fetching part:', error)
return NextResponse.json(
{ error: 'Fehler beim Laden des Verschleißteils' },
{ status: 500 }
)
}
}
export async function PUT(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
const body = await request.json()
const validatedData = wearPartSchema.parse(body)
const part = await prisma.wearPart.update({
where: { id: params.id },
data: {
type: validatedData.type,
brand: validatedData.brand,
model: validatedData.model,
installDate: new Date(validatedData.installDate),
installMileage: validatedData.installMileage,
serviceInterval: validatedData.serviceInterval,
status: validatedData.status,
cost: validatedData.cost,
notes: validatedData.notes,
},
})
return NextResponse.json(part)
} catch (error) {
console.error('Error updating part:', error)
if (error instanceof Error && error.name === 'ZodError') {
return NextResponse.json(
{ error: 'Ungültige Daten', details: error },
{ status: 400 }
)
}
if (
error instanceof Error &&
error.message.includes('Record to update does not exist')
) {
return NextResponse.json(
{ error: 'Verschleißteil nicht gefunden' },
{ status: 404 }
)
}
return NextResponse.json(
{ error: 'Fehler beim Aktualisieren des Verschleißteils' },
{ status: 500 }
)
}
}
export async function DELETE(
request: NextRequest,
{ params }: { params: { id: string } }
) {
try {
await prisma.wearPart.delete({
where: { id: params.id },
})
return NextResponse.json({ message: 'Verschleißteil gelöscht' })
} catch (error) {
console.error('Error deleting part:', error)
if (
error instanceof Error &&
error.message.includes('Record to delete does not exist')
) {
return NextResponse.json(
{ error: 'Verschleißteil nicht gefunden' },
{ status: 404 }
)
}
return NextResponse.json(
{ error: 'Fehler beim Löschen des Verschleißteils' },
{ status: 500 }
)
}
}

50
app/bikes/[id]/page.tsx Normal file
View File

@@ -0,0 +1,50 @@
'use client'
import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { WearPartWithHistory } from '@/types'
import BikeDetail from '@/app/components/BikeDetail'
export default function BikeDetailPage() {
const params = useParams()
const router = useRouter()
const [bike, setBike] = useState<any>(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
if (params.id) {
fetchBike(params.id as string)
}
}, [params.id])
const fetchBike = async (id: string) => {
try {
const response = await fetch(`/api/bikes/${id}`)
if (response.ok) {
const data = await response.json()
setBike(data)
} else if (response.status === 404) {
router.push('/')
}
} catch (error) {
console.error('Error fetching bike:', error)
} finally {
setLoading(false)
}
}
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="text-lg">Lade...</div>
</div>
)
}
if (!bike) {
return null
}
return <BikeDetail bike={bike} onUpdate={fetchBike} />
}

14
app/components/AlertBadge.tsx Normal file
View File

@@ -0,0 +1,14 @@
interface AlertBadgeProps {
count: number
}
export default function AlertBadge({ count }: AlertBadgeProps) {
if (count === 0) return null
return (
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
⚠️ {count}
</span>
)
}

92
app/components/BikeCard.tsx Normal file
View File

@@ -0,0 +1,92 @@
'use client'
import { BikeWithParts } from '@/types'
import { useState } from 'react'
import Link from 'next/link'
import { calculateServiceStatus } from '@/lib/utils'
import AlertBadge from './AlertBadge'
interface BikeCardProps {
bike: BikeWithParts
onDelete: () => void
}
export default function BikeCard({ bike, onDelete }: BikeCardProps) {
const [isDeleting, setIsDeleting] = useState(false)
const handleDelete = async () => {
if (!confirm('Möchten Sie dieses Fahrrad wirklich löschen?')) {
return
}
setIsDeleting(true)
try {
const response = await fetch(`/api/bikes/${bike.id}`, {
method: 'DELETE',
})
if (response.ok) {
onDelete()
} else {
alert('Fehler beim Löschen des Fahrrads')
}
} catch (error) {
console.error('Error deleting bike:', error)
alert('Fehler beim Löschen des Fahrrads')
} finally {
setIsDeleting(false)
}
}
const activeParts = bike.wearParts.filter((p) => p.status === 'ACTIVE')
const needsServiceParts = activeParts.filter((part) => {
const serviceStatus = calculateServiceStatus(part)
return serviceStatus.status !== 'OK'
})
return (
<div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<div className="flex justify-between items-start mb-4">
<div>
<h2 className="text-2xl font-semibold text-gray-900">{bike.name}</h2>
{bike.brand && bike.model && (
<p className="text-gray-600 mt-1">
{bike.brand} {bike.model}
</p>
)}
</div>
{needsServiceParts.length > 0 && (
<AlertBadge count={needsServiceParts.length} />
)}
</div>
<div className="mb-4">
<p className="text-sm text-gray-500">
{activeParts.length} aktive Verschleißteile
</p>
{needsServiceParts.length > 0 && (
<p className="text-sm text-orange-600 font-medium mt-1">
{needsServiceParts.length} benötigen Wartung
</p>
)}
</div>
<div className="flex gap-2 mt-4">
<Link
href={`/bikes/${bike.id}`}
className="flex-1 px-4 py-2 bg-blue-600 text-white text-center rounded-lg hover:bg-blue-700 transition-colors"
>
Details
</Link>
<button
onClick={handleDelete}
disabled={isDeleting}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
>
{isDeleting ? 'Löschen...' : 'Löschen'}
</button>
</div>
</div>
)
}

89
app/components/BikeDetail.tsx Normal file
View File

@@ -0,0 +1,89 @@
'use client'
import { BikeWithParts } from '@/types'
import { useState } from 'react'
import Link from 'next/link'
import WearPartList from './WearPartList'
import WearPartForm from './WearPartForm'
interface BikeDetailProps {
bike: BikeWithParts
onUpdate: () => void
}
export default function BikeDetail({ bike, onUpdate }: BikeDetailProps) {
const [showPartForm, setShowPartForm] = useState(false)
return (
<main className="min-h-screen p-8 bg-gray-50">
<div className="max-w-7xl mx-auto">
<Link
href="/"
className="inline-flex items-center text-blue-600 hover:text-blue-800 mb-6"
>
← Zurück zur Übersicht
</Link>
<div className="bg-white rounded-lg shadow-md p-6 mb-6">
<h1 className="text-3xl font-bold text-gray-900 mb-4">{bike.name}</h1>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
{bike.brand && (
<div>
<span className="text-gray-500">Marke:</span>
<p className="font-medium">{bike.brand}</p>
</div>
)}
{bike.model && (
<div>
<span className="text-gray-500">Modell:</span>
<p className="font-medium">{bike.model}</p>
</div>
)}
{bike.purchaseDate && (
<div>
<span className="text-gray-500">Kaufdatum:</span>
<p className="font-medium">
{new Date(bike.purchaseDate).toLocaleDateString('de-DE')}
</p>
</div>
)}
</div>
{bike.notes && (
<div className="mt-4">
<span className="text-gray-500">Notizen:</span>
<p className="mt-1">{bike.notes}</p>
</div>
)}
</div>
<div className="mb-6 flex justify-between items-center">
<h2 className="text-2xl font-semibold text-gray-900">
Verschleißteile
</h2>
<button
onClick={() => setShowPartForm(!showPartForm)}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
{showPartForm ? 'Abbrechen' : '+ Neues Verschleißteil'}
</button>
</div>
{showPartForm && (
<div className="mb-6">
<WearPartForm
bikeId={bike.id}
onSuccess={() => {
setShowPartForm(false)
onUpdate()
}}
onCancel={() => setShowPartForm(false)}
/>
</div>
)}
<WearPartList bikeId={bike.id} parts={bike.wearParts} onUpdate={onUpdate} />
</div>
</main>
)
}

182
app/components/BikeForm.tsx Normal file
View File

@@ -0,0 +1,182 @@
'use client'
import { useState } from 'react'
import { bikeSchema } from '@/lib/validations'
interface BikeFormProps {
onSuccess: () => void
onCancel: () => void
}
export default function BikeForm({ onSuccess, onCancel }: BikeFormProps) {
const [formData, setFormData] = useState({
name: '',
brand: '',
model: '',
purchaseDate: '',
notes: '',
})
const [errors, setErrors] = useState<Record<string, string>>({})
const [isSubmitting, setIsSubmitting] = useState(false)
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setErrors({})
setIsSubmitting(true)
try {
const validatedData = bikeSchema.parse({
...formData,
purchaseDate: formData.purchaseDate || undefined,
})
const response = await fetch('/api/bikes', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(validatedData),
})
if (response.ok) {
onSuccess()
setFormData({
name: '',
brand: '',
model: '',
purchaseDate: '',
notes: '',
})
} else {
const errorData = await response.json()
if (errorData.details) {
const zodErrors: Record<string, string> = {}
errorData.details.errors?.forEach((err: any) => {
if (err.path) {
zodErrors[err.path[0]] = err.message
}
})
setErrors(zodErrors)
} else {
alert('Fehler beim Erstellen des Fahrrads')
}
}
} catch (error: any) {
if (error.errors) {
const zodErrors: Record<string, string> = {}
error.errors.forEach((err: any) => {
if (err.path) {
zodErrors[err.path[0]] = err.message
}
})
setErrors(zodErrors)
} else {
console.error('Error creating bike:', error)
alert('Fehler beim Erstellen des Fahrrads')
}
} finally {
setIsSubmitting(false)
}
}
return (
<div className="bg-white rounded-lg shadow-md p-6">
<h2 className="text-2xl font-semibold mb-4">Neues Fahrrad hinzufügen</h2>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Name *
</label>
<input
type="text"
value={formData.name}
onChange={(e) =>
setFormData({ ...formData, name: e.target.value })
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required
/>
{errors.name && (
<p className="text-red-600 text-sm mt-1">{errors.name}</p>
)}
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Marke
</label>
<input
type="text"
value={formData.brand}
onChange={(e) =>
setFormData({ ...formData, brand: e.target.value })
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Modell
</label>
<input
type="text"
value={formData.model}
onChange={(e) =>
setFormData({ ...formData, model: e.target.value })
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Kaufdatum
</label>
<input
type="date"
value={formData.purchaseDate}
onChange={(e) =>
setFormData({ ...formData, purchaseDate: e.target.value })
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Notizen
</label>
<textarea
value={formData.notes}
onChange={(e) =>
setFormData({ ...formData, notes: e.target.value })
}
rows={3}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div className="flex gap-2">
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
>
{isSubmitting ? 'Erstellen...' : 'Erstellen'}
</button>
<button
type="button"
onClick={onCancel}
className="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors"
>
Abbrechen
</button>
</div>
</form>
</div>
)
}

211
app/components/MaintenanceForm.tsx Normal file
View File

@@ -0,0 +1,211 @@
'use client'
import { useState } from 'react'
import { maintenanceHistorySchema, MaintenanceAction } from '@/lib/validations'
interface MaintenanceFormProps {
partId: string
onSuccess: () => void
onCancel: () => void
}
const maintenanceActions = ['INSTALL', 'REPLACE', 'SERVICE', 'CHECK', 'ADJUST']
export default function MaintenanceForm({
partId,
onSuccess,
onCancel,
}: MaintenanceFormProps) {
const [formData, setFormData] = useState({
date: new Date().toISOString().split('T')[0],
mileage: 0,
action: 'SERVICE',
notes: '',
cost: '',
})
const [errors, setErrors] = useState<Record<string, string>>({})
const [isSubmitting, setIsSubmitting] = useState(false)
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setErrors({})
setIsSubmitting(true)
try {
const validatedData = maintenanceHistorySchema.parse({
wearPartId: partId,
date: formData.date,
mileage: Number(formData.mileage),
action: formData.action,
notes: formData.notes || undefined,
cost: formData.cost ? Number(formData.cost) : undefined,
})
const response = await fetch(`/api/parts/${partId}/maintenance`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(validatedData),
})
if (response.ok) {
onSuccess()
setFormData({
date: new Date().toISOString().split('T')[0],
mileage: 0,
action: 'SERVICE',
notes: '',
cost: '',
})
} else {
const errorData = await response.json()
if (errorData.details) {
const zodErrors: Record<string, string> = {}
errorData.details.errors?.forEach((err: any) => {
if (err.path) {
zodErrors[err.path[0]] = err.message
}
})
setErrors(zodErrors)
} else {
alert('Fehler beim Erstellen des Wartungseintrags')
}
}
} catch (error: any) {
if (error.errors) {
const zodErrors: Record<string, string> = {}
error.errors.forEach((err: any) => {
if (err.path) {
zodErrors[err.path[0]] = err.message
}
})
setErrors(zodErrors)
} else {
console.error('Error creating maintenance:', error)
alert('Fehler beim Erstellen des Wartungseintrags')
}
} finally {
setIsSubmitting(false)
}
}
return (
<div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
<h4 className="font-semibold mb-3">Neuer Wartungseintrag</h4>
<form onSubmit={handleSubmit} className="space-y-3">
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">
Datum *
</label>
<input
type="date"
value={formData.date}
onChange={(e) =>
setFormData({ ...formData, date: e.target.value })
}
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required
/>
{errors.date && (
<p className="text-red-600 text-xs mt-1">{errors.date}</p>
)}
</div>
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">
Kilometerstand *
</label>
<input
type="number"
value={formData.mileage}
onChange={(e) =>
setFormData({ ...formData, mileage: Number(e.target.value) })
}
min="0"
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required
/>
{errors.mileage && (
<p className="text-red-600 text-xs mt-1">{errors.mileage}</p>
)}
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">
Aktion *
</label>
<select
value={formData.action}
onChange={(e) =>
setFormData({ ...formData, action: e.target.value })
}
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required
>
{maintenanceActions.map((action) => (
<option key={action} value={action}>
{action.replace(/_/g, ' ')}
</option>
))}
</select>
{errors.action && (
<p className="text-red-600 text-xs mt-1">{errors.action}</p>
)}
</div>
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">
Kosten (€)
</label>
<input
type="number"
step="0.01"
value={formData.cost}
onChange={(e) =>
setFormData({ ...formData, cost: e.target.value })
}
min="0"
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
</div>
<div>
<label className="block text-xs font-medium text-gray-700 mb-1">
Notizen
</label>
<textarea
value={formData.notes}
onChange={(e) =>
setFormData({ ...formData, notes: e.target.value })
}
rows={2}
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div className="flex gap-2">
<button
type="submit"
disabled={isSubmitting}
className="px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors disabled:opacity-50"
>
{isSubmitting ? 'Erstellen...' : 'Erstellen'}
</button>
<button
type="button"
onClick={onCancel}
className="px-4 py-2 bg-gray-300 text-gray-700 text-sm rounded hover:bg-gray-400 transition-colors"
>
Abbrechen
</button>
</div>
</form>
</div>
)
}

93
app/components/MaintenanceTimeline.tsx Normal file
View File

@@ -0,0 +1,93 @@
'use client'
import { MaintenanceHistory } from '@prisma/client'
import { formatDate, formatCurrency } from '@/lib/utils'
import { useState } from 'react'
import MaintenanceForm from './MaintenanceForm'
interface MaintenanceTimelineProps {
partId: string
history: MaintenanceHistory[]
onUpdate: () => void
}
const actionLabels: Record<string, string> = {
INSTALL: 'Installiert',
REPLACE: 'Ersetzt',
SERVICE: 'Gewartet',
CHECK: 'Geprüft',
ADJUST: 'Eingestellt',
}
export default function MaintenanceTimeline({
partId,
history,
onUpdate,
}: MaintenanceTimelineProps) {
const [showForm, setShowForm] = useState(false)
return (
<div>
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold text-gray-900">
Wartungshistorie
</h3>
<button
onClick={() => setShowForm(!showForm)}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
>
{showForm ? 'Abbrechen' : '+ Neuer Eintrag'}
</button>
</div>
{showForm && (
<div className="mb-4">
<MaintenanceForm
partId={partId}
onSuccess={() => {
setShowForm(false)
onUpdate()
}}
onCancel={() => setShowForm(false)}
/>
</div>
)}
{history.length === 0 ? (
<p className="text-gray-500 text-sm">Noch keine Wartungseinträge.</p>
) : (
<div className="space-y-3">
{history.map((entry) => (
<div
key={entry.id}
className="flex items-start gap-4 p-4 bg-gray-50 rounded-lg"
>
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<span className="font-semibold text-gray-900">
{actionLabels[entry.action] || entry.action}
</span>
<span className="text-sm text-gray-500">
{formatDate(entry.date)}
</span>
</div>
<div className="text-sm text-gray-600">
<span>Kilometerstand: {entry.mileage} km</span>
{entry.cost && (
<span className="ml-4">
Kosten: {formatCurrency(entry.cost)}
</span>
)}
</div>
{entry.notes && (
<p className="text-sm text-gray-600 mt-2">{entry.notes}</p>
)}
</div>
</div>
))}
</div>
)}
</div>
)
}

56
app/components/StatsCard.tsx Normal file
View File

@@ -0,0 +1,56 @@
'use client'
import { BikeWithParts } from '@/types'
import { calculateTotalCosts, calculateAverageLifespan } from '@/lib/utils'
import { formatCurrency } from '@/lib/utils'
interface StatsCardProps {
bikes: BikeWithParts[]
}
export default function StatsCard({ bikes }: StatsCardProps) {
const allParts = bikes.flatMap((bike) => bike.wearParts)
const totalCosts = calculateTotalCosts(allParts)
const avgLifespan = calculateAverageLifespan(allParts)
const totalBikes = bikes.length
const totalParts = allParts.length
return (
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div className="bg-white rounded-lg shadow-md p-6">
<h3 className="text-sm font-medium text-gray-500 mb-2">
Fahrräder
</h3>
<p className="text-3xl font-bold text-gray-900">{totalBikes}</p>
</div>
<div className="bg-white rounded-lg shadow-md p-6">
<h3 className="text-sm font-medium text-gray-500 mb-2">
Verschleißteile
</h3>
<p className="text-3xl font-bold text-gray-900">{totalParts}</p>
</div>
<div className="bg-white rounded-lg shadow-md p-6">
<h3 className="text-sm font-medium text-gray-500 mb-2">
Gesamtkosten
</h3>
<p className="text-3xl font-bold text-gray-900">
{formatCurrency(totalCosts)}
</p>
</div>
<div className="bg-white rounded-lg shadow-md p-6">
<h3 className="text-sm font-medium text-gray-500 mb-2">
Ø Lebensdauer
</h3>
<p className="text-3xl font-bold text-gray-900">
{avgLifespan
? `${Math.round(avgLifespan)} km`
: 'N/A'}
</p>
</div>
</div>
)
}

321
app/components/WearPartForm.tsx Normal file
View File

@@ -0,0 +1,321 @@
'use client'
import { useState } from 'react'
import { wearPartSchema, WearPartType, WearPartStatus } from '@/lib/validations'
interface WearPartFormProps {
bikeId: string
onSuccess: () => void
onCancel: () => void
}
const wearPartTypes = [
'CHAIN',
'BRAKE_PADS',
'TIRE',
'CASSETTE',
'CHAINRING',
'DERAILLEUR',
'BRAKE_CABLE',
'SHIFT_CABLE',
'BRAKE_ROTOR',
'PEDAL',
'CRANKSET',
'BOTTOM_BRACKET',
'HEADSET',
'WHEEL',
'HUB',
'SPOKE',
'OTHER',
]
const wearPartStatuses = ['ACTIVE', 'NEEDS_SERVICE', 'REPLACED', 'INACTIVE']
export default function WearPartForm({
bikeId,
onSuccess,
onCancel,
}: WearPartFormProps) {
const [formData, setFormData] = useState({
type: 'CHAIN',
brand: '',
model: '',
installDate: new Date().toISOString().split('T')[0],
installMileage: 0,
serviceInterval: 1000,
status: 'ACTIVE',
cost: '',
notes: '',
})
const [errors, setErrors] = useState<Record<string, string>>({})
const [isSubmitting, setIsSubmitting] = useState(false)
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setErrors({})
setIsSubmitting(true)
try {
const validatedData = wearPartSchema.parse({
bikeId,
type: formData.type,
brand: formData.brand || undefined,
model: formData.model || undefined,
installDate: formData.installDate,
installMileage: Number(formData.installMileage),
serviceInterval: Number(formData.serviceInterval),
status: formData.status,
cost: formData.cost ? Number(formData.cost) : undefined,
notes: formData.notes || undefined,
})
const response = await fetch(`/api/bikes/${bikeId}/parts`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(validatedData),
})
if (response.ok) {
onSuccess()
setFormData({
type: 'CHAIN',
brand: '',
model: '',
installDate: new Date().toISOString().split('T')[0],
installMileage: 0,
serviceInterval: 1000,
status: 'ACTIVE',
cost: '',
notes: '',
})
} else {
const errorData = await response.json()
if (errorData.details) {
const zodErrors: Record<string, string> = {}
errorData.details.errors?.forEach((err: any) => {
if (err.path) {
zodErrors[err.path[0]] = err.message
}
})
setErrors(zodErrors)
} else {
alert('Fehler beim Erstellen des Verschleißteils')
}
}
} catch (error: any) {
if (error.errors) {
const zodErrors: Record<string, string> = {}
error.errors.forEach((err: any) => {
if (err.path) {
zodErrors[err.path[0]] = err.message
}
})
setErrors(zodErrors)
} else {
console.error('Error creating part:', error)
alert('Fehler beim Erstellen des Verschleißteils')
}
} finally {
setIsSubmitting(false)
}
}
return (
<div className="bg-white rounded-lg shadow-md p-6">
<h2 className="text-2xl font-semibold mb-4">
Neues Verschleißteil hinzufügen
</h2>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Typ *
</label>
<select
value={formData.type}
onChange={(e) => setFormData({ ...formData, type: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required
>
{wearPartTypes.map((type) => (
<option key={type} value={type}>
{type.replace(/_/g, ' ')}
</option>
))}
</select>
{errors.type && (
<p className="text-red-600 text-sm mt-1">{errors.type}</p>
)}
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Marke
</label>
<input
type="text"
value={formData.brand}
onChange={(e) =>
setFormData({ ...formData, brand: e.target.value })
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Modell
</label>
<input
type="text"
value={formData.model}
onChange={(e) =>
setFormData({ ...formData, model: e.target.value })
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Installationsdatum *
</label>
<input
type="date"
value={formData.installDate}
onChange={(e) =>
setFormData({ ...formData, installDate: e.target.value })
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required
/>
{errors.installDate && (
<p className="text-red-600 text-sm mt-1">{errors.installDate}</p>
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Installations-KM *
</label>
<input
type="number"
value={formData.installMileage}
onChange={(e) =>
setFormData({
...formData,
installMileage: Number(e.target.value),
})
}
min="0"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required
/>
{errors.installMileage && (
<p className="text-red-600 text-sm mt-1">
{errors.installMileage}
</p>
)}
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Service-Intervall (km) *
</label>
<input
type="number"
value={formData.serviceInterval}
onChange={(e) =>
setFormData({
...formData,
serviceInterval: Number(e.target.value),
})
}
min="1"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required
/>
{errors.serviceInterval && (
<p className="text-red-600 text-sm mt-1">
{errors.serviceInterval}
</p>
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Status
</label>
<select
value={formData.status}
onChange={(e) =>
setFormData({ ...formData, status: e.target.value })
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
{wearPartStatuses.map((status) => (
<option key={status} value={status}>
{status.replace(/_/g, ' ')}
</option>
))}
</select>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Kosten (€)
</label>
<input
type="number"
step="0.01"
value={formData.cost}
onChange={(e) =>
setFormData({ ...formData, cost: e.target.value })
}
min="0"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Notizen
</label>
<textarea
value={formData.notes}
onChange={(e) =>
setFormData({ ...formData, notes: e.target.value })
}
rows={3}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div className="flex gap-2">
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
>
{isSubmitting ? 'Erstellen...' : 'Erstellen'}
</button>
<button
type="button"
onClick={onCancel}
className="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors"
>
Abbrechen
</button>
</div>
</form>
</div>
)
}

193
app/components/WearPartList.tsx Normal file
View File

@@ -0,0 +1,193 @@
'use client'
import { WearPart } from '@prisma/client'
import { MaintenanceHistory } from '@prisma/client'
import { calculateServiceStatus } from '@/lib/utils'
import { formatDate, formatCurrency } from '@/lib/utils'
import AlertBadge from './AlertBadge'
import MaintenanceTimeline from './MaintenanceTimeline'
import { useState } from 'react'
interface WearPartListProps {
bikeId: string
parts: (WearPart & { maintenanceHistory: MaintenanceHistory[] })[]
onUpdate: () => void
}
export default function WearPartList({
bikeId,
parts,
onUpdate,
}: WearPartListProps) {
const [expandedPart, setExpandedPart] = useState<string | null>(null)
const handleDelete = async (partId: string) => {
if (!confirm('Möchten Sie dieses Verschleißteil wirklich löschen?')) {
return
}
try {
const response = await fetch(`/api/parts/${partId}`, {
method: 'DELETE',
})
if (response.ok) {
onUpdate()
} else {
alert('Fehler beim Löschen des Verschleißteils')
}
} catch (error) {
console.error('Error deleting part:', error)
alert('Fehler beim Löschen des Verschleißteils')
}
}
if (parts.length === 0) {
return (
<div className="bg-white rounded-lg shadow-md p-8 text-center text-gray-500">
<p>Noch keine Verschleißteile erfasst.</p>
<p className="mt-2">Klicken Sie auf &quot;Neues Verschleißteil&quot; um zu beginnen.</p>
</div>
)
}
return (
<div className="space-y-4">
{parts.map((part) => {
const serviceStatus = calculateServiceStatus(part)
const isExpanded = expandedPart === part.id
return (
<div
key={part.id}
className="bg-white rounded-lg shadow-md p-6"
>
<div className="flex justify-between items-start">
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h3 className="text-xl font-semibold text-gray-900">
{part.type}
</h3>
{serviceStatus.status !== 'OK' && (
<AlertBadge count={1} />
)}
<span
className={`px-2 py-1 rounded text-xs font-medium ${
part.status === 'ACTIVE'
? 'bg-green-100 text-green-800'
: part.status === 'NEEDS_SERVICE'
? 'bg-orange-100 text-orange-800'
: part.status === 'REPLACED'
? 'bg-gray-100 text-gray-800'
: 'bg-red-100 text-red-800'
}`}
>
{part.status}
</span>
</div>
{part.brand && part.model && (
<p className="text-gray-600 mb-2">
{part.brand} {part.model}
</p>
)}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm mt-4">
<div>
<span className="text-gray-500">Installiert:</span>
<p className="font-medium">{formatDate(part.installDate)}</p>
</div>
<div>
<span className="text-gray-500">Installations-KM:</span>
<p className="font-medium">{part.installMileage} km</p>
</div>
<div>
<span className="text-gray-500">Service-Intervall:</span>
<p className="font-medium">{part.serviceInterval} km</p>
</div>
{part.cost && (
<div>
<span className="text-gray-500">Kosten:</span>
<p className="font-medium">{formatCurrency(part.cost)}</p>
</div>
)}
</div>
<div className="mt-4">
<div className="flex items-center gap-2 mb-1">
<span className="text-sm text-gray-500">Status:</span>
<span
className={`text-sm font-medium ${
serviceStatus.status === 'OK'
? 'text-green-600'
: serviceStatus.status === 'WARNING'
? 'text-orange-600'
: 'text-red-600'
}`}
>
{serviceStatus.status === 'OK'
? 'OK'
: serviceStatus.status === 'WARNING'
? 'Warnung'
: 'Kritisch'}
</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full ${
serviceStatus.status === 'OK'
? 'bg-green-500'
: serviceStatus.status === 'WARNING'
? 'bg-orange-500'
: 'bg-red-500'
}`}
style={{ width: `${serviceStatus.percentageUsed}%` }}
/>
</div>
<p className="text-xs text-gray-500 mt-1">
{serviceStatus.remainingKm.toFixed(0)} km bis zur Wartung
</p>
</div>
{part.notes && (
<div className="mt-4">
<span className="text-sm text-gray-500">Notizen:</span>
<p className="text-sm mt-1">{part.notes}</p>
</div>
)}
</div>
<div className="flex flex-col gap-2 ml-4">
<button
onClick={() =>
setExpandedPart(isExpanded ? null : part.id)
}
className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors text-sm"
>
{isExpanded ? 'Weniger' : 'Historie'}
</button>
<button
onClick={() => handleDelete(part.id)}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm"
>
Löschen
</button>
</div>
</div>
{isExpanded && (
<div className="mt-6 pt-6 border-t">
<MaintenanceTimeline
partId={part.id}
history={part.maintenanceHistory}
onUpdate={onUpdate}
/>
</div>
)}
</div>
)
})}
</div>
)
}

22
app/globals.css Normal file
View File

@@ -0,0 +1,22 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}

20
app/layout.tsx Normal file
View File

@@ -0,0 +1,20 @@
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Fahrrad Verschleißteile Tracker",
description: "Verwaltung von Verschleißteilen an Fahrrädern",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="de">
<body>{children}</body>
</html>
);
}

92
app/page.tsx Normal file
View File

@@ -0,0 +1,92 @@
'use client'
import { useEffect, useState } from 'react'
import { BikeWithParts } from '@/types'
import BikeCard from '@/app/components/BikeCard'
import BikeForm from '@/app/components/BikeForm'
import StatsCard from '@/app/components/StatsCard'
export default function Home() {
const [bikes, setBikes] = useState<BikeWithParts[]>([])
const [loading, setLoading] = useState(true)
const [showForm, setShowForm] = useState(false)
useEffect(() => {
fetchBikes()
}, [])
const fetchBikes = async () => {
try {
const response = await fetch('/api/bikes')
if (response.ok) {
const data = await response.json()
setBikes(data)
}
} catch (error) {
console.error('Error fetching bikes:', error)
} finally {
setLoading(false)
}
}
const handleBikeCreated = () => {
setShowForm(false)
fetchBikes()
}
const handleBikeDeleted = () => {
fetchBikes()
}
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="text-lg">Lade...</div>
</div>
)
}
return (
<main className="min-h-screen p-8 bg-gray-50">
<div className="max-w-7xl mx-auto">
<div className="mb-8 flex justify-between items-center">
<h1 className="text-4xl font-bold text-gray-900">
Fahrrad Verschleißteile Tracker
</h1>
<button
onClick={() => setShowForm(!showForm)}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
{showForm ? 'Abbrechen' : '+ Neues Fahrrad'}
</button>
</div>
{showForm && (
<div className="mb-8">
<BikeForm onSuccess={handleBikeCreated} onCancel={() => setShowForm(false)} />
</div>
)}
<StatsCard bikes={bikes} />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
{bikes.length === 0 ? (
<div className="col-span-full text-center py-12 text-gray-500">
<p className="text-lg">Noch keine Fahrräder erfasst.</p>
<p className="mt-2">Klicken Sie auf &quot;Neues Fahrrad&quot; um zu beginnen.</p>
</div>
) : (
bikes.map((bike) => (
<BikeCard
key={bike.id}
bike={bike}
onDelete={handleBikeDeleted}
/>
))
)}
</div>
</div>
</main>
)
}

1055
bun.lock Normal file
View File

File diff suppressed because it is too large Load Diff

10
lib/prisma.ts Normal file
View File

@@ -0,0 +1,10 @@
import { PrismaClient } from '@prisma/client'
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined
}
export const prisma = globalForPrisma.prisma ?? new PrismaClient()
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

85
lib/utils.ts Normal file
View File

@@ -0,0 +1,85 @@
import { WearPart, MaintenanceHistory } from '@prisma/client'
export function calculateServiceStatus(
part: WearPart & { maintenanceHistory: MaintenanceHistory[] }
): {
status: 'OK' | 'WARNING' | 'CRITICAL'
remainingKm: number
percentageUsed: number
} {
const latestMaintenance = part.maintenanceHistory[0]
const currentMileage = latestMaintenance?.mileage ?? part.installMileage
const kmSinceInstall = currentMileage - part.installMileage
const remainingKm = part.serviceInterval - kmSinceInstall
const percentageUsed = (kmSinceInstall / part.serviceInterval) * 100
let status: 'OK' | 'WARNING' | 'CRITICAL' = 'OK'
if (percentageUsed >= 90) {
status = 'CRITICAL'
} else if (percentageUsed >= 75) {
status = 'WARNING'
}
return {
status,
remainingKm: Math.max(0, remainingKm),
percentageUsed: Math.min(100, percentageUsed),
}
}
export function calculateTotalCosts(
parts: (WearPart & { maintenanceHistory: MaintenanceHistory[] })[]
): number {
return parts.reduce((total, part) => {
const partCost = part.cost ?? 0
const maintenanceCost = part.maintenanceHistory.reduce(
(sum, m) => sum + (m.cost ?? 0),
0
)
return total + partCost + maintenanceCost
}, 0)
}
export function calculateAverageLifespan(
parts: (WearPart & { maintenanceHistory: MaintenanceHistory[] })[]
): number | null {
const replacedParts = parts.filter(
(p) => p.status === 'REPLACED' && p.maintenanceHistory.length > 0
)
if (replacedParts.length === 0) return null
const totalKm = replacedParts.reduce((sum, part) => {
const installHistory = part.maintenanceHistory.find(
(h) => h.action === 'INSTALL'
)
const replaceHistory = part.maintenanceHistory.find(
(h) => h.action === 'REPLACE'
)
if (installHistory && replaceHistory) {
return sum + (replaceHistory.mileage - installHistory.mileage)
}
return sum
}, 0)
return totalKm / replacedParts.length
}
export function formatDate(date: Date | string): string {
const d = typeof date === 'string' ? new Date(date) : date
return d.toLocaleDateString('de-DE', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})
}
export function formatCurrency(amount: number | null | undefined): string {
if (amount === null || amount === undefined) return '0,00 €'
return new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
}).format(amount)
}

71
lib/validations.ts Normal file
View File

@@ -0,0 +1,71 @@
import { z } from 'zod'
export const WearPartType = z.enum([
'CHAIN',
'BRAKE_PADS',
'TIRE',
'CASSETTE',
'CHAINRING',
'DERAILLEUR',
'BRAKE_CABLE',
'SHIFT_CABLE',
'BRAKE_ROTOR',
'PEDAL',
'CRANKSET',
'BOTTOM_BRACKET',
'HEADSET',
'WHEEL',
'HUB',
'SPOKE',
'OTHER',
])
export const WearPartStatus = z.enum([
'ACTIVE',
'NEEDS_SERVICE',
'REPLACED',
'INACTIVE',
])
export const MaintenanceAction = z.enum([
'INSTALL',
'REPLACE',
'SERVICE',
'CHECK',
'ADJUST',
])
export const bikeSchema = z.object({
name: z.string().min(1, 'Name ist erforderlich'),
brand: z.string().optional(),
model: z.string().optional(),
purchaseDate: z.string().datetime().optional().or(z.date().optional()),
notes: z.string().optional(),
})
export const wearPartSchema = z.object({
bikeId: z.string().min(1, 'Fahrrad-ID ist erforderlich'),
type: WearPartType,
brand: z.string().optional(),
model: z.string().optional(),
installDate: z.string().datetime().or(z.date()),
installMileage: z.number().int().min(0).default(0),
serviceInterval: z.number().int().min(1, 'Service-Intervall muss mindestens 1 km sein'),
status: WearPartStatus.default('ACTIVE'),
cost: z.number().positive().optional(),
notes: z.string().optional(),
})
export const maintenanceHistorySchema = z.object({
wearPartId: z.string().min(1, 'Verschleißteil-ID ist erforderlich'),
date: z.string().datetime().or(z.date()),
mileage: z.number().int().min(0),
action: MaintenanceAction,
notes: z.string().optional(),
cost: z.number().positive().optional(),
})
export type BikeInput = z.infer<typeof bikeSchema>
export type WearPartInput = z.infer<typeof wearPartSchema>
export type MaintenanceHistoryInput = z.infer<typeof maintenanceHistorySchema>

5
next.config.js Normal file
View File

@@ -0,0 +1,5 @@
/** @type {import('next').NextConfig} */
const nextConfig = {}
module.exports = nextConfig

39
package.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "bike-wear-parts-tracker",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"db:push": "prisma db push",
"db:generate": "prisma generate",
"db:studio": "prisma studio",
"test": "vitest run --exclude '**/validations.test.ts' && bun test __tests__/lib/validations.test.ts",
"test:all": "vitest run",
"test:ui": "vitest --ui"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"next": "^14.2.5",
"@prisma/client": "^5.19.1",
"zod": "^3.23.8"
},
"devDependencies": {
"typescript": "^5.5.4",
"@types/node": "^22.5.0",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"prisma": "^5.19.1",
"tailwindcss": "^3.4.7",
"postcss": "^8.4.41",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.1",
"eslint-config-next": "^14.2.5",
"vitest": "^2.0.3",
"@vitest/ui": "^2.0.3"
}
}

7
postcss.config.js Normal file
View File

@@ -0,0 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

55
prisma/schema.prisma Normal file
View File

@@ -0,0 +1,55 @@
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite"
url = "file:./dev.db"
}
model Bike {
id String @id @default(cuid())
name String
brand String?
model String?
purchaseDate DateTime?
notes String?
wearParts WearPart[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model WearPart {
id String @id @default(cuid())
bikeId String
bike Bike @relation(fields: [bikeId], references: [id], onDelete: Cascade)
type String // CHAIN, BRAKE_PADS, TIRE, CASSETTE, CHAINRING, DERAILLEUR, etc.
brand String?
model String?
installDate DateTime
installMileage Int @default(0)
serviceInterval Int // in km
status String @default("ACTIVE") // ACTIVE, NEEDS_SERVICE, REPLACED, INACTIVE
cost Float?
notes String?
maintenanceHistory MaintenanceHistory[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model MaintenanceHistory {
id String @id @default(cuid())
wearPartId String
wearPart WearPart @relation(fields: [wearPartId], references: [id], onDelete: Cascade)
date DateTime
mileage Int
action String // INSTALL, REPLACE, SERVICE, CHECK, ADJUST
notes String?
cost Float?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}

20
tailwind.config.ts Normal file
View File

@@ -0,0 +1,20 @@
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
};
export default config;

28
tsconfig.json Normal file
View File

@@ -0,0 +1,28 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

15
types/index.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Bike, WearPart, MaintenanceHistory } from '@prisma/client'
export type BikeWithParts = Bike & {
wearParts: WearPart[]
}
export type WearPartWithHistory = WearPart & {
maintenanceHistory: MaintenanceHistory[]
bike: Bike
}
export type MaintenanceHistoryWithPart = MaintenanceHistory & {
wearPart: WearPart
}

28
vitest.config.ts Normal file
View File

@@ -0,0 +1,28 @@
import { defineConfig } from 'vitest/config'
import path from 'path'
export default defineConfig({
test: {
globals: true,
environment: 'node',
pool: 'forks',
poolOptions: {
forks: {
singleFork: true,
},
},
sequence: {
shuffle: false,
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, './'),
},
},
optimizeDeps: {
include: ['zod'],
exclude: [],
},
})