mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-11-20 18:41:14 +01:00
feat(web): add submission details dialog component with review and approval functionality
This commit is contained in:
Thomas Camlong
403
web/src/components/submission-details.tsx
Normal file
403
web/src/components/submission-details.tsx
Normal file
@@ -0,0 +1,403 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
|
import { Badge } from "@/components/ui/badge"
|
||||||
|
import { Separator } from "@/components/ui/separator"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Calendar, User as UserIcon, FileType, Tag, FolderOpen, Palette, ExternalLink, Download, Check, X } from "lucide-react"
|
||||||
|
import { MagicCard } from "@/components/magicui/magic-card"
|
||||||
|
import { IconCard } from "@/components/icon-card"
|
||||||
|
import { formatIconName } from "@/lib/utils"
|
||||||
|
import type { Icon } from "@/types/icons"
|
||||||
|
import { pb, type Submission, type User } from "@/lib/pb"
|
||||||
|
import Link from "next/link"
|
||||||
|
import Image from "next/image"
|
||||||
|
import { UserDisplay } from "@/components/user-display"
|
||||||
|
|
||||||
|
// Utility function to get display name with priority: username > email > created_by field
|
||||||
|
const getDisplayName = (submission: Submission, expandedData?: { created_by: User, approved_by: User }): string => {
|
||||||
|
// Check if we have expanded user data
|
||||||
|
if (expandedData && expandedData.created_by) {
|
||||||
|
const user = expandedData.created_by
|
||||||
|
|
||||||
|
// Priority: username > email
|
||||||
|
if (user.username) {
|
||||||
|
return user.username
|
||||||
|
}
|
||||||
|
if (user.email) {
|
||||||
|
return user.email
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback to created_by field (could be user ID or username)
|
||||||
|
return submission.created_by
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SubmissionDetailsProps {
|
||||||
|
submission: Submission
|
||||||
|
isAdmin: boolean
|
||||||
|
onUserClick?: (userId: string, displayName: string) => void
|
||||||
|
onApprove?: () => void
|
||||||
|
onReject?: () => void
|
||||||
|
isApproving?: boolean
|
||||||
|
isRejecting?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SubmissionDetails({ submission, isAdmin, onUserClick, onApprove, onReject, isApproving, isRejecting }: SubmissionDetailsProps) {
|
||||||
|
const expandedData = submission.expand
|
||||||
|
const displayName = getDisplayName(submission, expandedData)
|
||||||
|
|
||||||
|
// Sanitize extras to ensure we have safe defaults
|
||||||
|
const sanitizedExtras = {
|
||||||
|
base: submission.extras?.base || "svg",
|
||||||
|
aliases: submission.extras?.aliases || [],
|
||||||
|
categories: submission.extras?.categories || [],
|
||||||
|
colors: submission.extras?.colors || null,
|
||||||
|
wordmark: submission.extras?.wordmark || null
|
||||||
|
}
|
||||||
|
|
||||||
|
const formattedCreated = new Date(submission.created).toLocaleDateString("en-GB", {
|
||||||
|
day: "numeric",
|
||||||
|
month: "long",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
})
|
||||||
|
|
||||||
|
const formattedUpdated = new Date(submission.updated).toLocaleDateString("en-GB", {
|
||||||
|
day: "numeric",
|
||||||
|
month: "long",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
})
|
||||||
|
|
||||||
|
// Create a mock Icon object for the IconCard component
|
||||||
|
const mockIconData: Icon = {
|
||||||
|
base: sanitizedExtras.base,
|
||||||
|
aliases: sanitizedExtras.aliases,
|
||||||
|
categories: sanitizedExtras.categories,
|
||||||
|
update: {
|
||||||
|
timestamp: submission.updated,
|
||||||
|
author: {
|
||||||
|
id: 1,
|
||||||
|
name: displayName
|
||||||
|
}
|
||||||
|
},
|
||||||
|
colors: sanitizedExtras.colors ? {
|
||||||
|
dark: sanitizedExtras.colors.dark,
|
||||||
|
light: sanitizedExtras.colors.light
|
||||||
|
} : undefined,
|
||||||
|
wordmark: sanitizedExtras.wordmark ? {
|
||||||
|
dark: sanitizedExtras.wordmark.dark,
|
||||||
|
light: sanitizedExtras.wordmark.light
|
||||||
|
} : undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDownload = async (url: string, filename: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url)
|
||||||
|
const blob = await response.blob()
|
||||||
|
const blobUrl = URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement("a")
|
||||||
|
link.href = blobUrl
|
||||||
|
link.download = filename
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
setTimeout(() => URL.revokeObjectURL(blobUrl), 100)
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Download error:", error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Left Column - Assets Preview */}
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
<Card className="h-full bg-background/50 border">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-lg flex items-center gap-2">
|
||||||
|
<FileType className="w-5 h-5" />
|
||||||
|
Assets Preview
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-0">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{submission.assets.map((asset, index) => (
|
||||||
|
<MagicCard key={index} className="p-0 rounded-md">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="aspect-square rounded-lg border flex items-center justify-center p-8 bg-muted/30">
|
||||||
|
<Image
|
||||||
|
src={`${pb.baseUrl}/api/files/submissions/${submission.id}/${asset}` || "/placeholder.svg"}
|
||||||
|
alt={`${submission.name} asset ${index + 1}`}
|
||||||
|
width={200}
|
||||||
|
height={200}
|
||||||
|
className="max-w-full max-h-full object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-2 right-2 flex gap-1">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
className="h-8 w-8 p-0"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
window.open(`${pb.baseUrl}/api/files/submissions/${submission.id}/${asset}`, '_blank')
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ExternalLink className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
className="h-8 w-8 p-0"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
handleDownload(`${pb.baseUrl}/api/files/submissions/${submission.id}/${asset}`, `${submission.name}-${index + 1}.${sanitizedExtras.base}`)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Download className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</MagicCard>
|
||||||
|
))}
|
||||||
|
{submission.assets.length === 0 && (
|
||||||
|
<div className="text-center py-8 text-muted-foreground text-sm">
|
||||||
|
No assets available
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Middle Column - Submission Details */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<Card className="h-full bg-background/50 border">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<CardTitle className="text-lg flex items-center gap-2">
|
||||||
|
<Tag className="w-5 h-5" />
|
||||||
|
Submission Details
|
||||||
|
</CardTitle>
|
||||||
|
{(onApprove || onReject) && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{onApprove && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
color="green"
|
||||||
|
variant="outline"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
onApprove()
|
||||||
|
}}
|
||||||
|
disabled={isApproving || isRejecting}
|
||||||
|
>
|
||||||
|
<Check className="w-4 h-4 mr-2" />
|
||||||
|
{isApproving ? "Approving..." : "Approve"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{onReject && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
color="red"
|
||||||
|
variant="destructive"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
onReject()
|
||||||
|
}}
|
||||||
|
disabled={isApproving || isRejecting}
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4 mr-2" />
|
||||||
|
{isRejecting ? "Rejecting..." : "Reject"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-0">
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||||
|
<FileType className="w-4 h-4" />
|
||||||
|
Icon Name
|
||||||
|
</h3>
|
||||||
|
<p className="text-lg font-medium capitalize">{formatIconName(submission.name)}</p>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">Filename: {submission.name}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||||
|
<FileType className="w-4 h-4" />
|
||||||
|
Base Format
|
||||||
|
</h3>
|
||||||
|
<Badge variant="outline" className="uppercase font-mono">
|
||||||
|
{sanitizedExtras.base}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{sanitizedExtras.colors && (Object.keys(sanitizedExtras.colors).length > 0) && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||||
|
<Palette className="w-4 h-4" />
|
||||||
|
Color Variants
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{sanitizedExtras.colors.dark && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground min-w-12">Dark:</span>
|
||||||
|
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||||
|
{sanitizedExtras.colors.dark}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{sanitizedExtras.colors.light && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground min-w-12">Light:</span>
|
||||||
|
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||||
|
{sanitizedExtras.colors.light}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{sanitizedExtras.wordmark && (Object.keys(sanitizedExtras.wordmark).length > 0) && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||||
|
<FileType className="w-4 h-4" />
|
||||||
|
Wordmark Variants
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{sanitizedExtras.wordmark.dark && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground min-w-12">Dark:</span>
|
||||||
|
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||||
|
{sanitizedExtras.wordmark.dark}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{sanitizedExtras.wordmark.light && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground min-w-12">Light:</span>
|
||||||
|
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||||
|
{sanitizedExtras.wordmark.light}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||||
|
<UserIcon className="w-4 h-4" />
|
||||||
|
Submitted By
|
||||||
|
</h3>
|
||||||
|
<UserDisplay
|
||||||
|
userId={submission.created_by}
|
||||||
|
avatar={expandedData.created_by.avatar}
|
||||||
|
displayName={displayName}
|
||||||
|
onClick={onUserClick}
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{submission.approved_by && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||||
|
<UserIcon className="w-4 h-4" />
|
||||||
|
{submission.status === 'approved' ? 'Approved By' : 'Reviewed By'}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<UserDisplay
|
||||||
|
userId={expandedData.approved_by.id}
|
||||||
|
displayName={expandedData.approved_by.username}
|
||||||
|
avatar={expandedData.approved_by.avatar}
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
Created
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm">{formattedCreated}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
Last Updated
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm">{formattedUpdated}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-3 flex items-center gap-2">
|
||||||
|
<FolderOpen className="w-4 h-4" />
|
||||||
|
Categories
|
||||||
|
</h3>
|
||||||
|
{sanitizedExtras.categories.length > 0 ? (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{sanitizedExtras.categories.map((category) => (
|
||||||
|
<Badge key={category} variant="outline" className="border-primary/20 hover:border-primary">
|
||||||
|
{category
|
||||||
|
.split("-")
|
||||||
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||||
|
.join(" ")}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground">No categories assigned</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-3 flex items-center gap-2">
|
||||||
|
<Tag className="w-4 h-4" />
|
||||||
|
Aliases
|
||||||
|
</h3>
|
||||||
|
{sanitizedExtras.aliases.length > 0 ? (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{sanitizedExtras.aliases.map((alias) => (
|
||||||
|
<Badge key={alias} variant="outline" className="text-xs font-mono">
|
||||||
|
{alias}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground">No aliases assigned</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isAdmin && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Submission ID</h3>
|
||||||
|
<code className="bg-muted px-2 py-1 rounded block break-all font-mono">
|
||||||
|
{submission.id}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user