working on onboarding flow
This commit is contained in:
dimitar committed
1 parent
868eaa5e3d
commit
d3a36b6103
19 files changed
+2062
-393
No files matched your search
@@ -2,174 +2,485 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import { Database, Download, RefreshCw, AlertTriangle, Check, Loader2 } from "lucide-react";
|
||||
import {
|
||||
Database,
|
||||
Download,
|
||||
RefreshCw,
|
||||
AlertTriangle,
|
||||
Check,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useUser } from "@clerk/nextjs";
|
||||
|
||||
interface Backup {
|
||||
name: string;
|
||||
size: number;
|
||||
createdAt: string;
|
||||
name: string;
|
||||
size: number;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface Gym {
|
||||
id: string;
|
||||
name: string;
|
||||
location?: string | null;
|
||||
status: "active" | "inactive";
|
||||
adminUserId: string;
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [backups, setBackups] = useState<Backup[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [creatingBackup, setCreatingBackup] = useState(false);
|
||||
const [restoring, setRestoring] = useState<string | null>(null);
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
|
||||
const { user } = useUser();
|
||||
const [backups, setBackups] = useState<Backup[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [creatingBackup, setCreatingBackup] = useState(false);
|
||||
const [restoring, setRestoring] = useState<string | null>(null);
|
||||
const [message, setMessage] = useState<{
|
||||
type: "success" | "error";
|
||||
text: string;
|
||||
} | null>(null);
|
||||
|
||||
const fetchBackups = async () => {
|
||||
try {
|
||||
const response = await axios.get("/api/admin/backups");
|
||||
setBackups(response.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch backups:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
// Gym picker state
|
||||
const [gyms, setGyms] = useState<Gym[]>([]);
|
||||
const [gymsLoading, setGymsLoading] = useState<boolean>(true);
|
||||
const [gymMessage, setGymMessage] = useState<{
|
||||
type: "success" | "error";
|
||||
text: string;
|
||||
} | null>(null);
|
||||
// Create Gym modal state
|
||||
const [showCreateGym, setShowCreateGym] = useState(false);
|
||||
const [gymName, setGymName] = useState("");
|
||||
const [gymLocation, setGymLocation] = useState("");
|
||||
const [creatingGym, setCreatingGym] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchBackups();
|
||||
}, []);
|
||||
const fetchBackups = async () => {
|
||||
try {
|
||||
const response = await axios.get("/api/admin/backups");
|
||||
setBackups(response.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch backups:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateBackup = async () => {
|
||||
setCreatingBackup(true);
|
||||
setMessage(null);
|
||||
try {
|
||||
await axios.post("/api/admin/backups");
|
||||
await fetchBackups();
|
||||
setMessage({ type: 'success', text: 'Backup created successfully' });
|
||||
} catch (error) {
|
||||
console.error("Failed to create backup:", error);
|
||||
setMessage({ type: 'error', text: 'Failed to create backup' });
|
||||
} finally {
|
||||
setCreatingBackup(false);
|
||||
}
|
||||
};
|
||||
const fetchGyms = async () => {
|
||||
setGymsLoading(true);
|
||||
setGymMessage(null);
|
||||
try {
|
||||
const res = await axios.get("/api/gyms");
|
||||
setGyms(Array.isArray(res.data) ? res.data : []);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch gyms:", error);
|
||||
setGymMessage({ type: "error", text: "Failed to load gyms" });
|
||||
} finally {
|
||||
setGymsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestore = async (filename: string) => {
|
||||
if (!window.confirm(`Are you sure you want to restore from ${filename}? This will overwrite the current database.`)) {
|
||||
return;
|
||||
}
|
||||
useEffect(() => {
|
||||
fetchBackups();
|
||||
fetchGyms();
|
||||
}, []);
|
||||
|
||||
setRestoring(filename);
|
||||
setMessage(null);
|
||||
try {
|
||||
await axios.post("/api/admin/backups/restore", { filename });
|
||||
setMessage({ type: 'success', text: 'Database restored successfully' });
|
||||
// Optional: Refresh page or force re-login if session is invalidated
|
||||
} catch (error) {
|
||||
console.error("Failed to restore backup:", error);
|
||||
setMessage({ type: 'error', text: 'Failed to restore backup' });
|
||||
} finally {
|
||||
setRestoring(null);
|
||||
}
|
||||
};
|
||||
const handleCreateBackup = async () => {
|
||||
setCreatingBackup(true);
|
||||
setMessage(null);
|
||||
try {
|
||||
await axios.post("/api/admin/backups");
|
||||
await fetchBackups();
|
||||
setMessage({ type: "success", text: "Backup created successfully" });
|
||||
} catch (error) {
|
||||
console.error("Failed to create backup:", error);
|
||||
setMessage({ type: "error", text: "Failed to create backup" });
|
||||
} finally {
|
||||
setCreatingBackup(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatSize = (bytes: number) => {
|
||||
const units = ['B', 'KB', 'MB', 'GB'];
|
||||
let size = bytes;
|
||||
let unitIndex = 0;
|
||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||
size /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
return `${size.toFixed(2)} ${units[unitIndex]}`;
|
||||
};
|
||||
const handleRestore = async (filename: string) => {
|
||||
if (
|
||||
!window.confirm(
|
||||
`Are you sure you want to restore from ${filename}? This will overwrite the current database.`,
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
setRestoring(filename);
|
||||
setMessage(null);
|
||||
try {
|
||||
await axios.post("/api/admin/backups/restore", { filename });
|
||||
setMessage({ type: "success", text: "Database restored successfully" });
|
||||
// Optional: Refresh page or force re-login if session is invalidated
|
||||
} catch (error) {
|
||||
console.error("Failed to restore backup:", error);
|
||||
setMessage({ type: "error", text: "Failed to restore backup" });
|
||||
} finally {
|
||||
setRestoring(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8 p-8">
|
||||
const formatSize = (bytes: number) => {
|
||||
const units = ["B", "KB", "MB", "GB"];
|
||||
let size = bytes;
|
||||
let unitIndex = 0;
|
||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||
size /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
return `${size.toFixed(2)} ${units[unitIndex]}`;
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
|
||||
const handleSelectGym = async (gymId: string | null) => {
|
||||
setGymMessage(null);
|
||||
try {
|
||||
// Update current user's gym selection
|
||||
await axios.patch("/api/users/gym", { gymId });
|
||||
setGymMessage({
|
||||
type: "success",
|
||||
text: gymId ? "Gym selected successfully" : "Proceeding without gym",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to set gym:", error);
|
||||
setGymMessage({ type: "error", text: "Failed to set gym" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8 p-8">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-slate-900">Settings</h2>
|
||||
<p className="text-slate-500 mt-2">
|
||||
Manage your application settings and database.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Gym Picker */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-50 rounded-lg">
|
||||
<Database className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-slate-900">Settings</h2>
|
||||
<p className="text-slate-500 mt-2">Manage your application settings and database.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-50 rounded-lg">
|
||||
<Database className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-slate-900">Database Management</h3>
|
||||
<p className="text-sm text-slate-500">Create backups and restore your database</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleCreateBackup}
|
||||
disabled={creatingBackup}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{creatingBackup ? <Loader2 className="w-4 h-4 animate-spin" /> : <Download className="w-4 h-4" />}
|
||||
Create Backup
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className={`p-4 rounded-lg mb-6 flex items-center gap-2 ${message.type === 'success' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'
|
||||
}`}>
|
||||
{message.type === 'success' ? <Check className="w-5 h-5" /> : <AlertTriangle className="w-5 h-5" />}
|
||||
{message.text}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-900">
|
||||
Gym Selection
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500">
|
||||
Select your gym or proceed without a gym
|
||||
</p>
|
||||
<p className="text-xs text-blue-600 mt-1">
|
||||
{user ? (
|
||||
<>
|
||||
Current role:{" "}
|
||||
<span className="font-medium">
|
||||
{String(user.publicMetadata?.role ?? "unknown")}
|
||||
</span>
|
||||
{" • "}
|
||||
Gym ID:{" "}
|
||||
<span className="font-medium">
|
||||
{String(user.publicMetadata?.gymId ?? "none")}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
"Loading user metadata..."
|
||||
)}
|
||||
|
||||
<div className="border rounded-lg overflow-hidden">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-slate-50 border-b">
|
||||
<tr>
|
||||
<th className="px-6 py-4 font-semibold text-slate-900">Filename</th>
|
||||
<th className="px-6 py-4 font-semibold text-slate-900">Size</th>
|
||||
<th className="px-6 py-4 font-semibold text-slate-900">Created At</th>
|
||||
<th className="px-6 py-4 font-semibold text-slate-900 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-6 py-8 text-center text-slate-500">
|
||||
Loading backups...
|
||||
</td>
|
||||
</tr>
|
||||
) : backups.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-6 py-8 text-center text-slate-500">
|
||||
No backups found
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
backups.map((backup) => (
|
||||
<tr key={backup.name} className="hover:bg-slate-50 transition-colors">
|
||||
<td className="px-6 py-4 font-medium text-slate-900">{backup.name}</td>
|
||||
<td className="px-6 py-4 text-slate-600">{formatSize(backup.size)}</td>
|
||||
<td className="px-6 py-4 text-slate-600">{formatDate(backup.createdAt)}</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRestore(backup.name)}
|
||||
disabled={!!restoring}
|
||||
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
{restoring === backup.name ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
Restore
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
onClick={fetchGyms}
|
||||
disabled={gymsLoading}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{gymsLoading ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
)}
|
||||
Refresh Gyms
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setShowCreateGym(true)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
Create Gym
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
{gymMessage && (
|
||||
<div
|
||||
className={`p-4 rounded-lg mb-6 flex items-center gap-2 ${gymMessage.type === "success" ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"}`}
|
||||
>
|
||||
{gymMessage.type === "success" ? (
|
||||
<Check className="w-5 h-5" />
|
||||
) : (
|
||||
<AlertTriangle className="w-5 h-5" />
|
||||
)}
|
||||
{gymMessage.text}
|
||||
</div>
|
||||
)}
|
||||
{showCreateGym && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
|
||||
<h3 className="text-lg font-semibold mb-4">Create Gym</h3>
|
||||
<form
|
||||
onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
setCreatingGym(true);
|
||||
await axios.post("/api/gyms", {
|
||||
name: gymName.trim(),
|
||||
location: gymLocation.trim() || undefined,
|
||||
});
|
||||
setGymMessage({
|
||||
type: "success",
|
||||
text: "Gym created successfully",
|
||||
});
|
||||
setShowCreateGym(false);
|
||||
setGymName("");
|
||||
setGymLocation("");
|
||||
fetchGyms();
|
||||
} catch (error) {
|
||||
console.error("Failed to create gym:", error);
|
||||
setGymMessage({
|
||||
type: "error",
|
||||
text: "Failed to create gym",
|
||||
});
|
||||
} finally {
|
||||
setCreatingGym(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Gym Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={gymName}
|
||||
onChange={(e) => setGymName(e.target.value)}
|
||||
className="w-full border border-gray-300 rounded px-3 py-2"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Location (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={gymLocation}
|
||||
onChange={(e) => setGymLocation(e.target.value)}
|
||||
className="w-full border border-gray-300 rounded px-3 py-2"
|
||||
placeholder="Enter location"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowCreateGym(false);
|
||||
setGymName("");
|
||||
setGymLocation("");
|
||||
}}
|
||||
className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={creatingGym}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center gap-2"
|
||||
>
|
||||
{creatingGym ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : null}
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="border rounded-lg p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900">
|
||||
Proceed without gym
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
You can select a gym later.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
onClick={() => handleSelectGym(null)}
|
||||
>
|
||||
Proceed without gym
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{gymsLoading ? (
|
||||
<div className="col-span-full flex items-center justify-center p-8 text-slate-500">
|
||||
<Loader2 className="w-5 h-5 animate-spin mr-2" />
|
||||
Loading gyms...
|
||||
</div>
|
||||
) : gyms.length === 0 ? (
|
||||
<div className="col-span-full p-8 text-center text-slate-500">
|
||||
No active gyms found.
|
||||
</div>
|
||||
) : (
|
||||
gyms.map((gym) => (
|
||||
<div
|
||||
key={gym.id}
|
||||
className="border rounded-lg p-4 flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900">{gym.name}</h4>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
{gym.location || "No location provided"}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="default"
|
||||
className="mt-4"
|
||||
onClick={() => handleSelectGym(gym.id)}
|
||||
>
|
||||
Select this gym
|
||||
</Button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-50 rounded-lg">
|
||||
<Database className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-slate-900">
|
||||
Database Management
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500">
|
||||
Create backups and restore your database
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleCreateBackup}
|
||||
disabled={creatingBackup}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{creatingBackup ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Download className="w-4 h-4" />
|
||||
)}
|
||||
Create Backup
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div
|
||||
className={`p-4 rounded-lg mb-6 flex items-center gap-2 ${
|
||||
message.type === "success"
|
||||
? "bg-green-50 text-green-700"
|
||||
: "bg-red-50 text-red-700"
|
||||
}`}
|
||||
>
|
||||
{message.type === "success" ? (
|
||||
<Check className="w-5 h-5" />
|
||||
) : (
|
||||
<AlertTriangle className="w-5 h-5" />
|
||||
)}
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="border rounded-lg overflow-hidden">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-slate-50 border-b">
|
||||
<tr>
|
||||
<th className="px-6 py-4 font-semibold text-slate-900">
|
||||
Filename
|
||||
</th>
|
||||
<th className="px-6 py-4 font-semibold text-slate-900">Size</th>
|
||||
<th className="px-6 py-4 font-semibold text-slate-900">
|
||||
Created At
|
||||
</th>
|
||||
<th className="px-6 py-4 font-semibold text-slate-900 text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
className="px-6 py-8 text-center text-slate-500"
|
||||
>
|
||||
Loading backups...
|
||||
</td>
|
||||
</tr>
|
||||
) : backups.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
className="px-6 py-8 text-center text-slate-500"
|
||||
>
|
||||
No backups found
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
backups.map((backup) => (
|
||||
<tr
|
||||
key={backup.name}
|
||||
className="hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<td className="px-6 py-4 font-medium text-slate-900">
|
||||
{backup.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-slate-600">
|
||||
{formatSize(backup.size)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-slate-600">
|
||||
{formatDate(backup.createdAt)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRestore(backup.name)}
|
||||
disabled={!!restoring}
|
||||
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
{restoring === backup.name ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
Restore
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user