Initial commit
This commit is contained in:
twotalesanimation
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { TaskList } from "@/components/tasks/TaskList";
|
||||
import { NewTaskDialog } from "@/components/tasks/NewTaskDialog";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getInitials } from "@/lib/utils";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Package,
|
||||
CalendarDays,
|
||||
CheckCircle2,
|
||||
} from "lucide-react";
|
||||
import { ShotStatus } from "@prisma/client";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
|
||||
const STATUS_CONFIG: Record<
|
||||
ShotStatus,
|
||||
{ label: string; color: string }
|
||||
> = {
|
||||
WAITING: { label: "Waiting", color: "bg-zinc-500/10 text-zinc-400 border-zinc-500/20" },
|
||||
IN_PROGRESS: { label: "In Progress", color: "bg-blue-500/10 text-blue-400 border-blue-500/20" },
|
||||
IN_REVIEW: { label: "In Review", color: "bg-purple-500/10 text-purple-400 border-purple-500/20" },
|
||||
REVISIONS: { label: "Revisions", color: "bg-orange-500/10 text-orange-400 border-orange-500/20" },
|
||||
COMPLETE: { label: "Complete", color: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" },
|
||||
};
|
||||
|
||||
const PRIORITY_DOT: Record<string, string> = {
|
||||
LOW: "bg-zinc-500", NORMAL: "bg-blue-500", HIGH: "bg-amber-500", URGENT: "bg-red-500",
|
||||
};
|
||||
|
||||
interface Artist {
|
||||
id: string;
|
||||
name: string | null;
|
||||
email: string;
|
||||
}
|
||||
|
||||
interface AssetCardProps {
|
||||
asset: {
|
||||
id: string;
|
||||
assetCode: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
status: ShotStatus;
|
||||
priority: string;
|
||||
dueDate: Date | null;
|
||||
lead?: { id: string; name: string | null; email: string; image: string | null } | null;
|
||||
tasks: any[];
|
||||
_count?: { tasks: number };
|
||||
};
|
||||
projectId: string;
|
||||
artists: Artist[];
|
||||
canManage?: boolean;
|
||||
}
|
||||
|
||||
export function AssetCard({ asset, projectId, artists, canManage = false }: AssetCardProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const statusCfg = STATUS_CONFIG[asset.status] ?? STATUS_CONFIG.WAITING;
|
||||
const doneTasks = asset.tasks.filter((t: any) => t.status === "DONE").length;
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-border bg-card overflow-hidden">
|
||||
{/* Header */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-zinc-800/50 transition-colors text-left"
|
||||
>
|
||||
<div className={cn("w-1.5 h-1.5 rounded-full shrink-0", PRIORITY_DOT[asset.priority] ?? "bg-zinc-500")} />
|
||||
|
||||
<Package className="h-4 w-4 text-zinc-400 shrink-0" />
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-sm font-medium text-zinc-300">{asset.assetCode}</span>
|
||||
<span className="text-sm text-white">{asset.name}</span>
|
||||
</div>
|
||||
{asset.description && (
|
||||
<p className="text-xs text-zinc-500 truncate">{asset.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
{asset.tasks.length > 0 && (
|
||||
<span className="text-xs text-zinc-500">
|
||||
<CheckCircle2 className="h-3 w-3 inline mr-1" />
|
||||
{doneTasks}/{asset.tasks.length}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<Badge className={cn("text-xs border px-1.5 py-0 h-5", statusCfg.color)}>
|
||||
{statusCfg.label}
|
||||
</Badge>
|
||||
|
||||
{asset.dueDate && (
|
||||
<span className="text-xs text-zinc-500 hidden sm:flex items-center gap-1">
|
||||
<CalendarDays className="h-3 w-3" />
|
||||
{formatDistanceToNow(new Date(asset.dueDate), { addSuffix: true })}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{asset.lead && (
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarImage src={asset.lead.image ?? undefined} />
|
||||
<AvatarFallback className="text-[10px]">
|
||||
{getInitials(asset.lead.name ?? asset.lead.email)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
)}
|
||||
|
||||
{expanded ? (
|
||||
<ChevronDown className="h-4 w-4 text-zinc-500" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 text-zinc-500" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Expanded task list */}
|
||||
{expanded && (
|
||||
<div className="px-4 pb-4 pt-2 border-t border-border bg-zinc-900/50">
|
||||
<TaskList
|
||||
tasks={asset.tasks}
|
||||
projectId={projectId}
|
||||
assetId={asset.id}
|
||||
artists={artists}
|
||||
canManage={canManage}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
"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 { createAsset } from "@/actions/assets";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { ShotPriority } from "@prisma/client";
|
||||
|
||||
const assetSchema = z.object({
|
||||
assetCode: z
|
||||
.string()
|
||||
.min(1, "Asset code is required")
|
||||
.max(30)
|
||||
.regex(/^[A-Z0-9_\-]+$/i, "Alphanumeric, dash, underscore only"),
|
||||
name: z.string().min(1, "Name is required"),
|
||||
description: z.string().optional(),
|
||||
priority: z.nativeEnum(ShotPriority),
|
||||
dueDate: z.string().optional(),
|
||||
});
|
||||
|
||||
type AssetFormValues = z.infer<typeof assetSchema>;
|
||||
|
||||
interface Artist {
|
||||
id: string;
|
||||
name: string | null;
|
||||
email: string;
|
||||
}
|
||||
|
||||
interface NewAssetDialogProps {
|
||||
projectId: string;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
export function NewAssetDialog({ projectId, open, onClose, onSuccess }: NewAssetDialogProps) {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const { toast } = useToast();
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<AssetFormValues>({
|
||||
resolver: zodResolver(assetSchema),
|
||||
defaultValues: { priority: "NORMAL" },
|
||||
});
|
||||
|
||||
const onSubmit = async (data: AssetFormValues) => {
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await createAsset({ projectId, status: "WAITING", ...data });
|
||||
toast({ title: "Asset created" });
|
||||
reset();
|
||||
router.refresh();
|
||||
onSuccess?.();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: "Failed to create asset",
|
||||
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 Asset</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="assetCode">Asset Code *</Label>
|
||||
<Input
|
||||
id="assetCode"
|
||||
placeholder="CAR_01"
|
||||
className="uppercase"
|
||||
{...register("assetCode")}
|
||||
/>
|
||||
{errors.assetCode && (
|
||||
<p className="text-xs text-destructive">{errors.assetCode.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Priority</Label>
|
||||
<Select
|
||||
defaultValue="NORMAL"
|
||||
onValueChange={(v) => setValue("priority", v as ShotPriority)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="LOW">Low</SelectItem>
|
||||
<SelectItem value="NORMAL">Normal</SelectItem>
|
||||
<SelectItem value="HIGH">High</SelectItem>
|
||||
<SelectItem value="URGENT">Urgent</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="name">Asset Name *</Label>
|
||||
<Input id="name" placeholder="Hero Car" {...register("name")} />
|
||||
{errors.name && (
|
||||
<p className="text-xs text-destructive">{errors.name.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="dueDate">Due Date</Label>
|
||||
<Input id="dueDate" type="date" {...register("dueDate")} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="What is this asset?"
|
||||
rows={2}
|
||||
{...register("description")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Creating…" : "Create Asset"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user