Initial commit
This commit is contained in:
twotalesanimation
@@ -0,0 +1,205 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
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 {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { createProject } from "@/actions/projects";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
|
||||
const projectSchema = z.object({
|
||||
name: z.string().min(2, "Name must be at least 2 characters"),
|
||||
code: z.string().min(2, "Project code required").regex(/^[A-Z0-9_\-]+$/i, "Alphanumeric, dash, underscore"),
|
||||
showId: z.string().min(1, "Show ID required").max(10, "Max 10 chars").regex(/^[A-Z0-9_]+$/i, "Letters, numbers, underscore only"),
|
||||
projectType: z.enum(["STANDARD", "EPISODIC"]).default("STANDARD"),
|
||||
description: z.string().optional(),
|
||||
clientId: z.string().optional(),
|
||||
deadline: z.string().optional(),
|
||||
});
|
||||
|
||||
type ProjectFormValues = z.infer<typeof projectSchema>;
|
||||
|
||||
interface NewProjectDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
clients?: { id: string; company: string }[];
|
||||
onSuccess?: (projectId: string) => void;
|
||||
}
|
||||
|
||||
export function NewProjectDialog({
|
||||
open,
|
||||
onClose,
|
||||
clients = [],
|
||||
onSuccess,
|
||||
}: NewProjectDialogProps) {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const { toast } = useToast();
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<ProjectFormValues>({
|
||||
resolver: zodResolver(projectSchema),
|
||||
defaultValues: { projectType: "STANDARD" },
|
||||
});
|
||||
|
||||
const onSubmit = async (data: ProjectFormValues) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const result = await createProject({
|
||||
name: data.name,
|
||||
code: data.code.toUpperCase(),
|
||||
showId: data.showId.toUpperCase(),
|
||||
projectType: data.projectType,
|
||||
description: data.description,
|
||||
clientId: data.clientId || undefined,
|
||||
deadline: data.deadline ? new Date(data.deadline) : undefined,
|
||||
});
|
||||
toast({ title: "Project created" });
|
||||
reset();
|
||||
router.push(`/projects/${result.project.id}`);
|
||||
router.refresh();
|
||||
onSuccess?.(result.project.id);
|
||||
onClose();
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "Failed to create project",
|
||||
description: (err as Error).message,
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(o) => !o && onClose()}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>New Project</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="space-y-1.5 col-span-2">
|
||||
<Label htmlFor="name">Project Name *</Label>
|
||||
<Input id="name" placeholder="Stellar Montage" {...register("name")} />
|
||||
{errors.name && (
|
||||
<p className="text-xs text-destructive">{errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="code">Code *</Label>
|
||||
<Input
|
||||
id="code"
|
||||
placeholder="NOVA-25"
|
||||
className="uppercase"
|
||||
{...register("code")}
|
||||
/>
|
||||
{errors.code && (
|
||||
<p className="text-xs text-destructive">{errors.code.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="showId">Show ID *</Label>
|
||||
<Input
|
||||
id="showId"
|
||||
placeholder="PRJX"
|
||||
className="uppercase"
|
||||
maxLength={10}
|
||||
{...register("showId")}
|
||||
/>
|
||||
{errors.showId && (
|
||||
<p className="text-xs text-destructive">{errors.showId.message}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">Used in shot codes (e.g. PRJX_SC010_0010)</p>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Project Type *</Label>
|
||||
<Select
|
||||
defaultValue="STANDARD"
|
||||
onValueChange={(v) => setValue("projectType", v as "STANDARD" | "EPISODIC")}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="STANDARD">Standard</SelectItem>
|
||||
<SelectItem value="EPISODIC">Episodic</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Brief description of this project..."
|
||||
{...register("description")}
|
||||
className="min-h-[70px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{clients.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<Label>Client</Label>
|
||||
<Select onValueChange={(v) => setValue("clientId", v)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select client (optional)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{clients.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.company}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="deadline">Deadline</Label>
|
||||
<Input id="deadline" type="date" {...register("deadline")} />
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Creating..." : "Create Project"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { cn, getInitials, formatRelativeDate } from "@/lib/utils";
|
||||
import {
|
||||
Film,
|
||||
Layers,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
Users,
|
||||
ArrowUpRight,
|
||||
} from "lucide-react";
|
||||
|
||||
interface ProjectCardProps {
|
||||
project: {
|
||||
id: string;
|
||||
name: string;
|
||||
code: string;
|
||||
status: string;
|
||||
description?: string | null;
|
||||
deadline?: Date | null;
|
||||
createdAt: Date;
|
||||
client?: { company: string } | null;
|
||||
producer?: { name: string | null; image: string | null } | null;
|
||||
_count?: { shots: number };
|
||||
shotStats?: {
|
||||
total: number;
|
||||
approved: number;
|
||||
inProgress: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const STATUS_STYLES: Record<string, string> = {
|
||||
ACTIVE: "bg-green-900/60 text-green-300",
|
||||
ON_HOLD: "bg-yellow-900/60 text-yellow-300",
|
||||
COMPLETED: "bg-blue-900/60 text-blue-300",
|
||||
ARCHIVED: "bg-zinc-800 text-zinc-500",
|
||||
};
|
||||
|
||||
export function ProjectCard({ project }: ProjectCardProps) {
|
||||
const total = project.shotStats?.total ?? project._count?.shots ?? 0;
|
||||
const approved = project.shotStats?.approved ?? 0;
|
||||
const progress = total > 0 ? Math.round((approved / total) * 100) : 0;
|
||||
|
||||
return (
|
||||
<Card className="group hover:border-zinc-700 transition-all flex flex-col">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-0.5">
|
||||
<span className="font-mono text-xs text-zinc-500">{project.code}</span>
|
||||
{project.client && (
|
||||
<span className="text-xs text-zinc-600">• {project.client.company}</span>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="font-semibold text-base leading-tight text-white">{project.name}</h3>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs px-2 py-0.5 rounded-full border-0 font-medium shrink-0",
|
||||
STATUS_STYLES[project.status] ?? STATUS_STYLES.ACTIVE
|
||||
)}
|
||||
>
|
||||
{project.status.replace("_", " ")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{project.description && (
|
||||
<p className="text-sm text-zinc-400 line-clamp-2 mt-1">
|
||||
{project.description}
|
||||
</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex-1 pb-3 space-y-3">
|
||||
{/* Progress */}
|
||||
{total > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>Shot progress</span>
|
||||
<span className="text-foreground font-medium">{approved}/{total} approved</span>
|
||||
</div>
|
||||
<Progress value={progress} className="h-1.5" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-2 text-xs">
|
||||
<div className="flex flex-col items-center rounded-lg bg-zinc-800 py-2">
|
||||
<Layers className="h-3.5 w-3.5 text-zinc-400 mb-1" />
|
||||
<span className="font-semibold text-white">{total}</span>
|
||||
<span className="text-zinc-400">shots</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center rounded-lg bg-zinc-800 py-2">
|
||||
<CheckCircle2 className="h-3.5 w-3.5 text-green-400 mb-1" />
|
||||
<span className="font-semibold text-white">{approved}</span>
|
||||
<span className="text-zinc-400">done</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center rounded-lg bg-zinc-800 py-2">
|
||||
<Film className="h-3.5 w-3.5 text-blue-400 mb-1" />
|
||||
<span className="font-semibold text-white">
|
||||
{project.shotStats?.inProgress ?? 0}
|
||||
</span>
|
||||
<span className="text-zinc-400">active</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="pt-2 border-t border-zinc-800 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-400">
|
||||
{project.producer ? (
|
||||
<>
|
||||
<Avatar className="h-5 w-5">
|
||||
{project.producer.image && <AvatarImage src={project.producer.image} />}
|
||||
<AvatarFallback className="text-[9px]">
|
||||
{getInitials(project.producer.name)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span>{project.producer.name ?? "Producer"}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Clock className="h-3 w-3" />
|
||||
<span>{formatRelativeDate(project.createdAt)}</span>
|
||||
</>
|
||||
)}
|
||||
{project.deadline && (
|
||||
<span className="text-amber-400 ml-2">
|
||||
Due {formatRelativeDate(project.deadline)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button variant="ghost" size="sm" asChild className="h-7 text-xs gap-1">
|
||||
<Link href={`/projects/${project.id}`}>
|
||||
Open
|
||||
<ArrowUpRight className="h-3 w-3" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
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 { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { updateProject } from "@/actions/projects";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { Settings, Building2, Users, Webhook } from "lucide-react";
|
||||
|
||||
const settingsSchema = z.object({
|
||||
name: z.string().min(1, "Name is required").max(100),
|
||||
code: z.string().min(1, "Code is required").max(20).regex(/^[A-Z0-9_\-]+$/i, "Alphanumeric, dash, underscore"),
|
||||
showId: z.string().min(1, "Show ID is required").max(10).regex(/^[A-Z0-9_]+$/i, "Letters, numbers, underscore only"),
|
||||
projectType: z.enum(["STANDARD", "EPISODIC"]),
|
||||
description: z.string().optional(),
|
||||
status: z.enum(["ACTIVE", "ON_HOLD", "COMPLETED", "ARCHIVED"]),
|
||||
clientId: z.string().optional(),
|
||||
producerId: z.string().optional(),
|
||||
supervisorId: z.string().optional(),
|
||||
dueDate: z.string().optional(),
|
||||
startDate: z.string().optional(),
|
||||
slackWebhook: z.string().optional(),
|
||||
slackChannel: z.string().optional(),
|
||||
});
|
||||
|
||||
type SettingsFormValues = z.infer<typeof settingsSchema>;
|
||||
|
||||
interface Client {
|
||||
id: string;
|
||||
company: string;
|
||||
}
|
||||
|
||||
interface TeamMember {
|
||||
id: string;
|
||||
name: string | null;
|
||||
email: string;
|
||||
role: string;
|
||||
}
|
||||
|
||||
interface ProjectSettingsTabProps {
|
||||
project: {
|
||||
id: string;
|
||||
name: string;
|
||||
code: string;
|
||||
showId: string;
|
||||
projectType: "STANDARD" | "EPISODIC";
|
||||
description: string | null;
|
||||
status: string;
|
||||
clientId: string | null;
|
||||
producerId: string | null;
|
||||
supervisorId: string | null;
|
||||
dueDate: Date | null;
|
||||
startDate: Date | null;
|
||||
slackWebhook: string | null;
|
||||
slackChannel: string | null;
|
||||
};
|
||||
clients: Client[];
|
||||
teamMembers: TeamMember[];
|
||||
}
|
||||
|
||||
const NONE = "__none__";
|
||||
|
||||
function toDateInput(d: Date | null | undefined) {
|
||||
if (!d) return "";
|
||||
return new Date(d).toISOString().substring(0, 10);
|
||||
}
|
||||
|
||||
export function ProjectSettingsTab({ project, clients, teamMembers }: ProjectSettingsTabProps) {
|
||||
const { toast } = useToast();
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const producers = teamMembers.filter((m) => ["ADMIN", "PRODUCER"].includes(m.role));
|
||||
const supervisors = teamMembers.filter((m) => ["ADMIN", "PRODUCER", "SUPERVISOR"].includes(m.role));
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors, isDirty },
|
||||
} = useForm<SettingsFormValues>({
|
||||
resolver: zodResolver(settingsSchema),
|
||||
defaultValues: {
|
||||
name: project.name,
|
||||
code: project.code,
|
||||
showId: project.showId,
|
||||
projectType: project.projectType,
|
||||
description: project.description ?? "",
|
||||
status: project.status as SettingsFormValues["status"],
|
||||
clientId: project.clientId ?? NONE,
|
||||
producerId: project.producerId ?? NONE,
|
||||
supervisorId: project.supervisorId ?? NONE,
|
||||
dueDate: toDateInput(project.dueDate),
|
||||
startDate: toDateInput(project.startDate),
|
||||
slackWebhook: project.slackWebhook ?? "",
|
||||
slackChannel: project.slackChannel ?? "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: SettingsFormValues) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await updateProject({
|
||||
id: project.id,
|
||||
name: data.name,
|
||||
code: data.code,
|
||||
showId: data.showId,
|
||||
projectType: data.projectType,
|
||||
description: data.description || null,
|
||||
status: data.status as any,
|
||||
clientId: data.clientId === NONE ? null : data.clientId || null,
|
||||
producerId: data.producerId === NONE ? null : data.producerId || null,
|
||||
supervisorId: data.supervisorId === NONE ? null : data.supervisorId || null,
|
||||
dueDate: data.dueDate || null,
|
||||
startDate: data.startDate || null,
|
||||
slackWebhook: data.slackWebhook || null,
|
||||
slackChannel: data.slackChannel || null,
|
||||
});
|
||||
toast({ title: "Project settings saved" });
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "Failed to save settings",
|
||||
description: (err as Error).message,
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-8 max-w-2xl">
|
||||
|
||||
{/* ── General ── */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings className="h-4 w-4 text-zinc-400" />
|
||||
<h2 className="text-sm font-semibold text-zinc-200">General</h2>
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5 col-span-2">
|
||||
<Label htmlFor="name">Project Name</Label>
|
||||
<Input id="name" {...register("name")} />
|
||||
{errors.name && <p className="text-xs text-destructive">{errors.name.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="code">Project Code</Label>
|
||||
<Input id="code" className="uppercase font-mono" {...register("code")} />
|
||||
{errors.code && <p className="text-xs text-destructive">{errors.code.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Status</Label>
|
||||
<Select
|
||||
defaultValue={project.status}
|
||||
onValueChange={(v) => setValue("status", v as SettingsFormValues["status"], { shouldDirty: true })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="ACTIVE">Active</SelectItem>
|
||||
<SelectItem value="ON_HOLD">On Hold</SelectItem>
|
||||
<SelectItem value="COMPLETED">Completed</SelectItem>
|
||||
<SelectItem value="ARCHIVED">Archived</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5 col-span-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea id="description" className="min-h-[80px]" {...register("description")} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="startDate">Start Date</Label>
|
||||
<Input id="startDate" type="date" {...register("startDate")} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="dueDate">Due Date</Label>
|
||||
<Input id="dueDate" type="date" {...register("dueDate")} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Shot Naming ── */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings className="h-4 w-4 text-zinc-400" />
|
||||
<h2 className="text-sm font-semibold text-zinc-200">Shot Naming</h2>
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="showId">Show ID</Label>
|
||||
<Input id="showId" className="uppercase font-mono" maxLength={10} {...register("showId")} />
|
||||
{errors.showId && <p className="text-xs text-destructive">{errors.showId.message}</p>}
|
||||
<p className="text-xs text-muted-foreground">Used in shot codes, e.g. SHOWID_SC010_0010</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Project Type</Label>
|
||||
<Select
|
||||
defaultValue={project.projectType}
|
||||
onValueChange={(v) => setValue("projectType", v as "STANDARD" | "EPISODIC", { shouldDirty: true })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="STANDARD">Standard</SelectItem>
|
||||
<SelectItem value="EPISODIC">Episodic</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">Episodic adds an episode segment to shot codes</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Client & Team ── */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Building2 className="h-4 w-4 text-zinc-400" />
|
||||
<h2 className="text-sm font-semibold text-zinc-200">Client & Team</h2>
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5 col-span-2">
|
||||
<Label>Client</Label>
|
||||
<Select
|
||||
defaultValue={project.clientId ?? NONE}
|
||||
onValueChange={(v) => setValue("clientId", v, { shouldDirty: true })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="No client assigned" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE}>No client</SelectItem>
|
||||
{clients.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id}>
|
||||
{c.company}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Producer</Label>
|
||||
<Select
|
||||
defaultValue={project.producerId ?? NONE}
|
||||
onValueChange={(v) => setValue("producerId", v, { shouldDirty: true })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Not assigned" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE}>Not assigned</SelectItem>
|
||||
{producers.map((m) => (
|
||||
<SelectItem key={m.id} value={m.id}>
|
||||
{m.name ?? m.email}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Supervisor</Label>
|
||||
<Select
|
||||
defaultValue={project.supervisorId ?? NONE}
|
||||
onValueChange={(v) => setValue("supervisorId", v, { shouldDirty: true })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Not assigned" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={NONE}>Not assigned</SelectItem>
|
||||
{supervisors.map((m) => (
|
||||
<SelectItem key={m.id} value={m.id}>
|
||||
{m.name ?? m.email}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Integrations ── */}
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Webhook className="h-4 w-4 text-zinc-400" />
|
||||
<h2 className="text-sm font-semibold text-zinc-200">Slack Integration</h2>
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5 col-span-2">
|
||||
<Label htmlFor="slackWebhook">Webhook URL</Label>
|
||||
<Input
|
||||
id="slackWebhook"
|
||||
type="url"
|
||||
placeholder="https://hooks.slack.com/services/..."
|
||||
{...register("slackWebhook")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="slackChannel">Channel</Label>
|
||||
<Input
|
||||
id="slackChannel"
|
||||
placeholder="#vfx-pipeline"
|
||||
{...register("slackChannel")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Save */}
|
||||
<div className="flex justify-end pt-2">
|
||||
<Button type="submit" disabled={isSubmitting || !isDirty} className="min-w-[120px]">
|
||||
{isSubmitting ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user