MacPro
613 lines
21 KiB
TypeScript
613 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef } from "react";
|
|
import { ChevronLeft, Upload, Trash2, Check, X } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
interface ParsedSet {
|
|
setNumber: number;
|
|
weight?: number;
|
|
weightUnit: string;
|
|
reps?: number;
|
|
notes?: string;
|
|
}
|
|
|
|
interface ParsedExercise {
|
|
exerciseId: string;
|
|
exerciseName: string;
|
|
sets: ParsedSet[];
|
|
}
|
|
|
|
interface ParsedWorkout {
|
|
date: string;
|
|
exercises: ParsedExercise[];
|
|
}
|
|
|
|
interface WorkoutState extends ParsedWorkout {
|
|
status: "pending" | "approved" | "skipped";
|
|
}
|
|
|
|
export default function ImportCSVPage() {
|
|
const [workouts, setWorkouts] = useState<WorkoutState[]>([]);
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [unmapped, setUnmapped] = useState<string[]>([]);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const currentWorkout = workouts[currentIndex];
|
|
const approved = workouts.filter((w) => w.status === "approved").length;
|
|
const skipped = workouts.filter((w) => w.status === "skipped").length;
|
|
const remaining = workouts.filter((w) => w.status === "pending").length;
|
|
|
|
const handleFileChange = async (
|
|
event: React.ChangeEvent<HTMLInputElement>
|
|
) => {
|
|
const file = event.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
|
|
const response = await fetch("/api/import/parse", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || "Failed to parse CSV");
|
|
}
|
|
|
|
const data = await response.json();
|
|
const initialWorkouts: WorkoutState[] = data.workouts.map(
|
|
(w: ParsedWorkout) => ({
|
|
...w,
|
|
status: "pending" as const,
|
|
})
|
|
);
|
|
|
|
setWorkouts(initialWorkouts);
|
|
setUnmapped(data.unmapped || []);
|
|
setCurrentIndex(0);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to parse CSV");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
const file = files[0];
|
|
if (fileInputRef.current) {
|
|
const dataTransfer = new DataTransfer();
|
|
dataTransfer.items.add(file);
|
|
fileInputRef.current.files = dataTransfer.files;
|
|
|
|
const event = new Event("change", { bubbles: true });
|
|
fileInputRef.current.dispatchEvent(event);
|
|
}
|
|
}
|
|
};
|
|
|
|
const updateSet = (
|
|
exerciseIdx: number,
|
|
setIdx: number,
|
|
field: keyof ParsedSet,
|
|
value: any
|
|
) => {
|
|
if (!currentWorkout) return;
|
|
|
|
const updatedWorkouts = [...workouts];
|
|
const workout = updatedWorkouts[currentIndex];
|
|
const set = workout.exercises[exerciseIdx].sets[setIdx];
|
|
|
|
if (field === "setNumber") {
|
|
set[field] = value ? parseInt(value, 10) : 0;
|
|
} else if (field === "reps") {
|
|
set[field] = value ? parseInt(value, 10) : undefined;
|
|
} else if (field === "weight") {
|
|
set[field] = value ? parseFloat(value) : undefined;
|
|
} else {
|
|
(set[field] as any) = value;
|
|
}
|
|
|
|
setWorkouts(updatedWorkouts);
|
|
};
|
|
|
|
const deleteSet = (exerciseIdx: number, setIdx: number) => {
|
|
if (!currentWorkout) return;
|
|
|
|
const updatedWorkouts = [...workouts];
|
|
const workout = updatedWorkouts[currentIndex];
|
|
const exercise = workout.exercises[exerciseIdx];
|
|
|
|
// Remove the set
|
|
exercise.sets.splice(setIdx, 1);
|
|
|
|
// Renumber remaining sets
|
|
exercise.sets.forEach((set, idx) => {
|
|
set.setNumber = idx + 1;
|
|
});
|
|
|
|
// If no sets left, remove the exercise
|
|
if (exercise.sets.length === 0) {
|
|
workout.exercises.splice(exerciseIdx, 1);
|
|
}
|
|
|
|
setWorkouts(updatedWorkouts);
|
|
};
|
|
|
|
const deleteExercise = (exerciseIdx: number) => {
|
|
if (!currentWorkout) return;
|
|
|
|
const updatedWorkouts = [...workouts];
|
|
const workout = updatedWorkouts[currentIndex];
|
|
workout.exercises.splice(exerciseIdx, 1);
|
|
|
|
setWorkouts(updatedWorkouts);
|
|
};
|
|
|
|
const approveWorkout = async () => {
|
|
if (!currentWorkout) return;
|
|
|
|
try {
|
|
setLoading(true);
|
|
|
|
// Transform workout to API format
|
|
const setLogs = [];
|
|
for (const exercise of currentWorkout.exercises) {
|
|
for (const set of exercise.sets) {
|
|
setLogs.push({
|
|
exerciseId: exercise.exerciseId,
|
|
setNumber: set.setNumber,
|
|
weight: set.weight || null,
|
|
weightUnit: set.weightUnit,
|
|
reps: set.reps || null,
|
|
notes: set.notes || null,
|
|
});
|
|
}
|
|
}
|
|
|
|
const response = await fetch("/api/workouts", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
date: currentWorkout.date,
|
|
sets: setLogs,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Failed to save workout");
|
|
}
|
|
|
|
// Mark as approved and move to next
|
|
const updatedWorkouts = [...workouts];
|
|
updatedWorkouts[currentIndex].status = "approved";
|
|
setWorkouts(updatedWorkouts);
|
|
|
|
// Find next pending workout
|
|
const nextPending = updatedWorkouts.findIndex(
|
|
(w) => w.status === "pending"
|
|
);
|
|
if (nextPending !== -1) {
|
|
setCurrentIndex(nextPending);
|
|
} else {
|
|
setCurrentIndex(currentIndex + 1);
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to save workout");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const skipWorkout = () => {
|
|
if (!currentWorkout) return;
|
|
|
|
const updatedWorkouts = [...workouts];
|
|
updatedWorkouts[currentIndex].status = "skipped";
|
|
setWorkouts(updatedWorkouts);
|
|
|
|
// Find next pending workout
|
|
const nextPending = updatedWorkouts.findIndex(
|
|
(w, idx) => w.status === "pending" && idx > currentIndex
|
|
);
|
|
if (nextPending !== -1) {
|
|
setCurrentIndex(nextPending);
|
|
} else {
|
|
setCurrentIndex(currentIndex + 1);
|
|
}
|
|
};
|
|
|
|
const deleteWorkout = () => {
|
|
const updatedWorkouts = workouts.filter((_, idx) => idx !== currentIndex);
|
|
setWorkouts(updatedWorkouts);
|
|
|
|
if (updatedWorkouts.length > 0) {
|
|
setCurrentIndex(Math.min(currentIndex, updatedWorkouts.length - 1));
|
|
}
|
|
};
|
|
|
|
// Upload step
|
|
if (workouts.length === 0) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0A0A0A] pb-24 md:pb-8">
|
|
{/* Header */}
|
|
<div className="border-b border-zinc-800 sticky top-0 z-40 bg-[#0A0A0A]">
|
|
<div className="max-w-4xl mx-auto px-4 py-4 flex items-center gap-4">
|
|
<Link
|
|
href="/main/workouts"
|
|
className="p-2 hover:bg-zinc-900 rounded-lg -ml-2 text-zinc-400 hover:text-white"
|
|
aria-label="Back"
|
|
>
|
|
<ChevronLeft className="w-6 h-6" />
|
|
</Link>
|
|
<h1 className="text-2xl font-display text-white tracking-wider">
|
|
Import Workouts
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Upload Area */}
|
|
<div className="max-w-4xl mx-auto px-4 py-12">
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-900/20 border border-red-800 rounded-lg">
|
|
<p className="text-red-200">{error}</p>
|
|
<button
|
|
onClick={() => setError(null)}
|
|
className="mt-2 text-sm text-red-300 hover:text-red-200"
|
|
>
|
|
Dismiss
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-zinc-900 rounded-lg p-12 border-2 border-dashed border-zinc-700 hover:border-zinc-600 transition-colors cursor-pointer"
|
|
onDragOver={handleDragOver}
|
|
onDrop={handleDrop}
|
|
onClick={() => fileInputRef.current?.click()}
|
|
>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".csv"
|
|
onChange={handleFileChange}
|
|
className="hidden"
|
|
/>
|
|
|
|
<div className="flex flex-col items-center gap-4">
|
|
<div className="p-4 bg-zinc-800 rounded-lg">
|
|
<Upload className="w-8 h-8 text-zinc-400" />
|
|
</div>
|
|
<div className="text-center">
|
|
<h2 className="text-xl font-semibold text-white mb-2">
|
|
Upload CSV File
|
|
</h2>
|
|
<p className="text-zinc-400 mb-4">
|
|
Drag and drop your CSV file here or click to select
|
|
</p>
|
|
<p className="text-sm text-zinc-500">
|
|
CSV columns: date, exercise, weight, reps, notes
|
|
</p>
|
|
</div>
|
|
{loading && (
|
|
<p className="text-zinc-400 text-sm">Parsing CSV...</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Example Format */}
|
|
<div className="mt-12 bg-zinc-900 rounded-lg p-6 border border-zinc-800">
|
|
<h3 className="text-lg font-semibold text-white mb-4">
|
|
CSV Format Example
|
|
</h3>
|
|
<pre className="text-xs text-zinc-400 overflow-x-auto bg-zinc-950 p-4 rounded border border-zinc-800">
|
|
{`date,exercise,weight,reps,notes
|
|
2025-02-15,Bench,225,5,good form
|
|
2025-02-15,Bench,225,5,
|
|
2025-02-15,Bench,225,3,
|
|
2025-02-16,Squat,315,8,30kg per leg
|
|
2025-02-16,Squat,315,6,`}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Review step
|
|
if (!currentWorkout) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0A0A0A] pb-24 md:pb-8">
|
|
<div className="border-b border-zinc-800 sticky top-0 z-40 bg-[#0A0A0A]">
|
|
<div className="max-w-4xl mx-auto px-4 py-4 flex items-center gap-4">
|
|
<Link
|
|
href="/main/workouts"
|
|
className="p-2 hover:bg-zinc-900 rounded-lg -ml-2 text-zinc-400 hover:text-white"
|
|
aria-label="Back"
|
|
>
|
|
<ChevronLeft className="w-6 h-6" />
|
|
</Link>
|
|
<h1 className="text-2xl font-display text-white tracking-wider">
|
|
Import Complete
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto px-4 py-12">
|
|
<div className="bg-zinc-900 rounded-lg p-8 border border-zinc-800 text-center">
|
|
<Check className="w-12 h-12 text-green-500 mx-auto mb-4" />
|
|
<h2 className="text-2xl font-semibold text-white mb-2">
|
|
All Done!
|
|
</h2>
|
|
<p className="text-zinc-400 mb-6">
|
|
{approved} workouts approved, {skipped} skipped
|
|
</p>
|
|
<Link
|
|
href="/main/workouts"
|
|
className="inline-block px-6 py-2 bg-white text-black font-semibold rounded-lg hover:bg-zinc-200 transition-colors"
|
|
>
|
|
View Workouts
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0A0A0A] pb-24 md:pb-8">
|
|
{/* Header */}
|
|
<div className="border-b border-zinc-800 sticky top-0 z-40 bg-[#0A0A0A]">
|
|
<div className="max-w-4xl mx-auto px-4 py-4">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => setWorkouts([])}
|
|
className="p-2 hover:bg-zinc-900 rounded-lg -ml-2 text-zinc-400 hover:text-white"
|
|
aria-label="Back"
|
|
>
|
|
<ChevronLeft className="w-6 h-6" />
|
|
</button>
|
|
<h1 className="text-2xl font-display text-white tracking-wider">
|
|
Review Workouts
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Progress Bar */}
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-zinc-400">
|
|
{approved} approved, {skipped} skipped, {remaining} remaining
|
|
</span>
|
|
<span className="text-zinc-500">
|
|
{currentIndex + 1} of {workouts.length}
|
|
</span>
|
|
</div>
|
|
<div className="w-full bg-zinc-800 h-2 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-white transition-all duration-300"
|
|
style={{
|
|
width: `${((approved + skipped) / workouts.length) * 100}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="max-w-4xl mx-auto px-4 py-6">
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-900/20 border border-red-800 rounded-lg">
|
|
<p className="text-red-200">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Unmapped Exercises Warning */}
|
|
{unmapped.length > 0 && (
|
|
<div className="mb-6 p-4 bg-yellow-900/20 border border-yellow-800 rounded-lg">
|
|
<p className="text-yellow-200 font-semibold mb-2">
|
|
Unmapped exercises (not in your database):
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{unmapped.map((name) => (
|
|
<span
|
|
key={name}
|
|
className="px-3 py-1 bg-yellow-900/30 border border-yellow-700 rounded text-sm text-yellow-200"
|
|
>
|
|
{name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Workout Card */}
|
|
<div className="bg-zinc-900 rounded-lg border border-zinc-800 overflow-hidden">
|
|
{/* Date Header */}
|
|
<div className="bg-zinc-800 px-6 py-4 border-b border-zinc-700">
|
|
<h2 className="text-xl font-semibold text-white">
|
|
{new Date(currentWorkout.date).toLocaleDateString("en-US", {
|
|
weekday: "long",
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Exercises */}
|
|
<div className="divide-y divide-zinc-800">
|
|
{currentWorkout.exercises.map((exercise, exIdx) => (
|
|
<div key={exIdx} className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-semibold text-white">
|
|
{exercise.exerciseName}
|
|
</h3>
|
|
<button
|
|
onClick={() => deleteExercise(exIdx)}
|
|
className="p-2 hover:bg-zinc-800 rounded text-zinc-400 hover:text-red-400 transition-colors"
|
|
>
|
|
<Trash2 className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Sets Table */}
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-zinc-700">
|
|
<th className="text-left py-2 px-3 text-zinc-400 font-medium">
|
|
Set
|
|
</th>
|
|
<th className="text-left py-2 px-3 text-zinc-400 font-medium">
|
|
Weight
|
|
</th>
|
|
<th className="text-left py-2 px-3 text-zinc-400 font-medium">
|
|
Unit
|
|
</th>
|
|
<th className="text-left py-2 px-3 text-zinc-400 font-medium">
|
|
Reps
|
|
</th>
|
|
<th className="text-left py-2 px-3 text-zinc-400 font-medium">
|
|
Notes
|
|
</th>
|
|
<th className="text-right py-2 px-3 text-zinc-400 font-medium">
|
|
Action
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-zinc-800">
|
|
{exercise.sets.map((set, setIdx) => (
|
|
<tr key={setIdx}>
|
|
<td className="py-3 px-3">
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
value={set.setNumber}
|
|
onChange={(e) =>
|
|
updateSet(exIdx, setIdx, "setNumber", e.target.value)
|
|
}
|
|
className="w-12 bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-white text-center"
|
|
/>
|
|
</td>
|
|
<td className="py-3 px-3">
|
|
<input
|
|
type="number"
|
|
step="0.5"
|
|
placeholder="—"
|
|
value={set.weight || ""}
|
|
onChange={(e) =>
|
|
updateSet(exIdx, setIdx, "weight", e.target.value)
|
|
}
|
|
className="w-20 bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-white"
|
|
/>
|
|
</td>
|
|
<td className="py-3 px-3">
|
|
<select
|
|
value={set.weightUnit}
|
|
onChange={(e) =>
|
|
updateSet(
|
|
exIdx,
|
|
setIdx,
|
|
"weightUnit",
|
|
e.target.value
|
|
)
|
|
}
|
|
className="bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-white text-sm"
|
|
>
|
|
<option>lbs</option>
|
|
<option>kg</option>
|
|
</select>
|
|
</td>
|
|
<td className="py-3 px-3">
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
placeholder="—"
|
|
value={set.reps || ""}
|
|
onChange={(e) =>
|
|
updateSet(exIdx, setIdx, "reps", e.target.value)
|
|
}
|
|
className="w-16 bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-white"
|
|
/>
|
|
</td>
|
|
<td className="py-3 px-3">
|
|
<input
|
|
type="text"
|
|
placeholder="—"
|
|
value={set.notes || ""}
|
|
onChange={(e) =>
|
|
updateSet(exIdx, setIdx, "notes", e.target.value)
|
|
}
|
|
className="flex-1 bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-white text-sm"
|
|
/>
|
|
</td>
|
|
<td className="py-3 px-3 text-right">
|
|
<button
|
|
onClick={() => deleteSet(exIdx, setIdx)}
|
|
className="p-1 hover:bg-zinc-800 rounded text-zinc-400 hover:text-red-400 transition-colors"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="mt-6 flex gap-3 justify-between">
|
|
<button
|
|
onClick={deleteWorkout}
|
|
className="px-4 py-2 bg-red-900/20 border border-red-800 text-red-200 rounded-lg hover:bg-red-900/30 transition-colors font-medium"
|
|
>
|
|
Delete Workout
|
|
</button>
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={skipWorkout}
|
|
disabled={loading}
|
|
className="px-6 py-2 bg-zinc-800 border border-zinc-700 text-white rounded-lg hover:bg-zinc-700 transition-colors font-medium disabled:opacity-50"
|
|
>
|
|
Skip
|
|
</button>
|
|
<button
|
|
onClick={approveWorkout}
|
|
disabled={loading || currentWorkout.exercises.length === 0}
|
|
className="px-6 py-2 bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors font-medium disabled:opacity-50 flex items-center gap-2"
|
|
>
|
|
{loading ? "Saving..." : "Approve"}
|
|
<Check className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|