Ethos artist settings - Manage profile, skills, pricing
cgen-b300efe22cb949c896a3daac62c47064
This commit is contained in:
Builder.io
parent
5d519571ca
commit
80527af5e4
1 changed files with 405 additions and 0 deletions
405
client/pages/ethos/ArtistSettings.tsx
Normal file
405
client/pages/ethos/ArtistSettings.tsx
Normal file
|
|
@ -0,0 +1,405 @@
|
|||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue