405 lines
14 KiB
TypeScript
405 lines
14 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Layout from "@/components/Layout";
|
|
import SEO from "@/components/SEO";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import TrackUploadModal from "@/components/ethos/TrackUploadModal";
|
|
import TrackMetadataForm from "@/components/ethos/TrackMetadataForm";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { useAethexToast } from "@/hooks/use-aethex-toast";
|
|
import { Upload, Music, Settings } from "lucide-react";
|
|
|
|
const SKILLS = [
|
|
"Synthwave",
|
|
"Orchestral",
|
|
"SFX Design",
|
|
"Game Audio",
|
|
"Ambient",
|
|
"Electronic",
|
|
"Cinematic",
|
|
"Jazz",
|
|
"Hip-Hop",
|
|
"Folk",
|
|
];
|
|
|
|
interface ArtistProfile {
|
|
skills: string[];
|
|
for_hire: boolean;
|
|
bio?: string;
|
|
portfolio_url?: string;
|
|
sample_price_track?: number;
|
|
sample_price_sfx?: number;
|
|
sample_price_score?: number;
|
|
turnaround_days?: number;
|
|
}
|
|
|
|
export default function ArtistSettings() {
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const toast = useAethexToast();
|
|
|
|
const [profile, setProfile] = useState<ArtistProfile>({
|
|
skills: [],
|
|
for_hire: true,
|
|
});
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [uploadModalOpen, setUploadModalOpen] = useState(false);
|
|
const [currentFile, setCurrentFile] = useState<File | null>(null);
|
|
const [showMetadataForm, setShowMetadataForm] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!user) {
|
|
navigate("/login");
|
|
return;
|
|
}
|
|
|
|
const fetchProfile = async () => {
|
|
try {
|
|
const res = await fetch(`/api/ethos/artists?id=${user.id}`, {
|
|
headers: { "x-user-id": user.id },
|
|
});
|
|
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setProfile({
|
|
skills: data.skills || [],
|
|
for_hire: data.for_hire ?? true,
|
|
bio: data.bio,
|
|
portfolio_url: data.portfolio_url,
|
|
sample_price_track: data.sample_price_track,
|
|
sample_price_sfx: data.sample_price_sfx,
|
|
sample_price_score: data.sample_price_score,
|
|
turnaround_days: data.turnaround_days,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch profile:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchProfile();
|
|
}, [user, navigate]);
|
|
|
|
const toggleSkill = (skill: string) => {
|
|
setProfile((prev) => ({
|
|
...prev,
|
|
skills: prev.skills.includes(skill)
|
|
? prev.skills.filter((s) => s !== skill)
|
|
: [...prev.skills, skill],
|
|
}));
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!user) return;
|
|
|
|
setSaving(true);
|
|
try {
|
|
const res = await fetch(`/api/ethos/artists`, {
|
|
method: "PUT",
|
|
headers: {
|
|
"x-user-id": user.id,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(profile),
|
|
});
|
|
|
|
if (res.ok) {
|
|
toast.success({
|
|
title: "Profile updated",
|
|
description: "Your Ethos artist profile has been saved",
|
|
});
|
|
} else {
|
|
throw new Error("Failed to save profile");
|
|
}
|
|
} catch (error) {
|
|
toast.error({
|
|
title: "Error",
|
|
description: String(error),
|
|
});
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleFileSelected = (file: File) => {
|
|
setCurrentFile(file);
|
|
setShowMetadataForm(true);
|
|
};
|
|
|
|
const handleMetadataSubmit = async (metadata: any) => {
|
|
if (!user || !currentFile) return;
|
|
|
|
try {
|
|
// TODO: Upload file to Supabase Storage
|
|
// For now, just create track record with placeholder file_url
|
|
const res = await fetch(`/api/ethos/tracks`, {
|
|
method: "POST",
|
|
headers: {
|
|
"x-user-id": user.id,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
...metadata,
|
|
file_url: `ethos-tracks/${user.id}/${currentFile.name}`,
|
|
duration_seconds: Math.floor(currentFile.size / 16000), // Rough estimate
|
|
}),
|
|
});
|
|
|
|
if (res.ok) {
|
|
toast.success({
|
|
title: "Track uploaded",
|
|
description: "Your track has been added to your portfolio",
|
|
});
|
|
setShowMetadataForm(false);
|
|
setCurrentFile(null);
|
|
} else {
|
|
throw new Error("Failed to upload track");
|
|
}
|
|
} catch (error) {
|
|
toast.error({
|
|
title: "Error",
|
|
description: String(error),
|
|
});
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <Layout><div className="py-20 text-center">Loading settings...</div></Layout>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SEO pageTitle="Artist Settings - Ethos Guild" />
|
|
<Layout>
|
|
<div className="bg-slate-950 text-foreground min-h-screen">
|
|
<div className="container mx-auto px-4 max-w-4xl py-12">
|
|
<div className="space-y-8">
|
|
{/* Header */}
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-white flex items-center gap-3 mb-2">
|
|
<Settings className="h-8 w-8" />
|
|
Artist Settings
|
|
</h1>
|
|
<p className="text-slate-400">
|
|
Manage your Ethos Guild profile, portfolio, and services
|
|
</p>
|
|
</div>
|
|
|
|
{/* Profile Section */}
|
|
<Card className="bg-slate-900/50 border-slate-800">
|
|
<CardHeader>
|
|
<CardTitle className="text-white">Profile Information</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label className="text-white">Bio</Label>
|
|
<Textarea
|
|
value={profile.bio || ""}
|
|
onChange={(e) =>
|
|
setProfile({ ...profile, bio: e.target.value })
|
|
}
|
|
placeholder="Tell us about yourself, your musical style, and experience..."
|
|
className="bg-slate-800 border-slate-700 h-24"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-white">Portfolio URL</Label>
|
|
<Input
|
|
value={profile.portfolio_url || ""}
|
|
onChange={(e) =>
|
|
setProfile({ ...profile, portfolio_url: e.target.value })
|
|
}
|
|
placeholder="https://yourportfolio.com"
|
|
type="url"
|
|
className="bg-slate-800 border-slate-700"
|
|
/>
|
|
</div>
|
|
|
|
<label className="flex items-center gap-2 p-3 rounded-lg bg-slate-800/50 border border-slate-700 cursor-pointer">
|
|
<Checkbox
|
|
checked={profile.for_hire}
|
|
onCheckedChange={(checked) =>
|
|
setProfile({ ...profile, for_hire: checked as boolean })
|
|
}
|
|
className="border-slate-600"
|
|
/>
|
|
<span className="text-sm text-slate-300">
|
|
I'm available for commissions
|
|
</span>
|
|
</label>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Skills Section */}
|
|
<Card className="bg-slate-900/50 border-slate-800">
|
|
<CardHeader>
|
|
<CardTitle className="text-white">Skills</CardTitle>
|
|
<CardDescription>Select the skills you specialize in</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
{SKILLS.map((skill) => (
|
|
<label
|
|
key={skill}
|
|
className="flex items-center gap-2 p-2 rounded-lg bg-slate-800/50 border border-slate-700 cursor-pointer hover:border-slate-600 transition"
|
|
>
|
|
<Checkbox
|
|
checked={profile.skills.includes(skill)}
|
|
onCheckedChange={() => toggleSkill(skill)}
|
|
className="border-slate-600"
|
|
/>
|
|
<span className="text-sm text-slate-300">{skill}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Services & Pricing */}
|
|
{profile.for_hire && (
|
|
<Card className="bg-slate-900/50 border-slate-800">
|
|
<CardHeader>
|
|
<CardTitle className="text-white">Services & Pricing</CardTitle>
|
|
<CardDescription>
|
|
Set your sample pricing for common services
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="space-y-2">
|
|
<Label className="text-white">Custom Track</Label>
|
|
<Input
|
|
type="number"
|
|
value={profile.sample_price_track || ""}
|
|
onChange={(e) =>
|
|
setProfile({
|
|
...profile,
|
|
sample_price_track: Number(e.target.value) || undefined,
|
|
})
|
|
}
|
|
placeholder="500"
|
|
className="bg-slate-800 border-slate-700"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-white">SFX Pack</Label>
|
|
<Input
|
|
type="number"
|
|
value={profile.sample_price_sfx || ""}
|
|
onChange={(e) =>
|
|
setProfile({
|
|
...profile,
|
|
sample_price_sfx: Number(e.target.value) || undefined,
|
|
})
|
|
}
|
|
placeholder="150"
|
|
className="bg-slate-800 border-slate-700"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-white">Full Score</Label>
|
|
<Input
|
|
type="number"
|
|
value={profile.sample_price_score || ""}
|
|
onChange={(e) =>
|
|
setProfile({
|
|
...profile,
|
|
sample_price_score: Number(e.target.value) || undefined,
|
|
})
|
|
}
|
|
placeholder="2000"
|
|
className="bg-slate-800 border-slate-700"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-white">Turnaround Time (days)</Label>
|
|
<Input
|
|
type="number"
|
|
value={profile.turnaround_days || ""}
|
|
onChange={(e) =>
|
|
setProfile({
|
|
...profile,
|
|
turnaround_days: Number(e.target.value) || undefined,
|
|
})
|
|
}
|
|
placeholder="5"
|
|
className="bg-slate-800 border-slate-700"
|
|
min="1"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Upload Track */}
|
|
<Card className="bg-slate-900/50 border-slate-800">
|
|
<CardHeader>
|
|
<CardTitle className="text-white flex items-center gap-2">
|
|
<Music className="h-5 w-5" />
|
|
Upload Track
|
|
</CardTitle>
|
|
<CardDescription>Add a new track to your portfolio</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
onClick={() => setUploadModalOpen(true)}
|
|
className="bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-700 hover:to-purple-700"
|
|
>
|
|
<Upload className="h-4 w-4 mr-2" />
|
|
Upload New Track
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Save Button */}
|
|
<div className="flex gap-3">
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-700 hover:to-purple-700 flex-1"
|
|
>
|
|
{saving ? "Saving..." : "Save Settings"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<TrackUploadModal
|
|
open={uploadModalOpen}
|
|
onOpenChange={setUploadModalOpen}
|
|
onFileSelected={handleFileSelected}
|
|
/>
|
|
|
|
{/* Metadata Form Modal */}
|
|
{showMetadataForm && currentFile && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<Card className="bg-slate-900 border-slate-800 max-w-2xl w-full">
|
|
<CardHeader>
|
|
<CardTitle className="text-white">Track Details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<TrackMetadataForm
|
|
onSubmit={handleMetadataSubmit}
|
|
isLoading={false}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|