Comprehensive platform audit: security, UX, performance, and visual polish
Phase 1: Security - status transition validation, Zod tightening, DB indexes, transactions Phase 2: Admin UX - search/filter for awards, learning, partners pages Phase 3: Dashboard - Recent Activity feed, Pending Actions card, quick actions Phase 4: Jury - assignments progress/urgency, autosave indicator, divergence highlighting Phase 5: Portals - observer charts, mentor search, login/onboarding polish Phase 6: Messages preview dialog, CsvExportDialog with column selection Phase 7: Performance - query optimizations, loading skeletons, useDebounce hook Phase 8: Visual - AnimatedCard, hover effects, StatusBadge, empty state CTAs Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
28
src/components/shared/animated-container.tsx
Normal file
28
src/components/shared/animated-container.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'motion/react'
|
||||
import { type ReactNode } from 'react'
|
||||
|
||||
export function AnimatedCard({ children, index = 0 }: { children: ReactNode; index?: number }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05, ease: 'easeOut' }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export function AnimatedList({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
212
src/components/shared/csv-export-dialog.tsx
Normal file
212
src/components/shared/csv-export-dialog.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Download, Loader2 } from 'lucide-react'
|
||||
|
||||
/**
|
||||
* Converts a camelCase or snake_case column name to Title Case.
|
||||
* e.g. "projectTitle" -> "Project Title", "ai_meetsCriteria" -> "Ai Meets Criteria"
|
||||
*/
|
||||
function formatColumnName(col: string): string {
|
||||
// Replace underscores with spaces
|
||||
let result = col.replace(/_/g, ' ')
|
||||
// Insert space before uppercase letters (camelCase -> spaced)
|
||||
result = result.replace(/([a-z])([A-Z])/g, '$1 $2')
|
||||
// Capitalize first letter of each word
|
||||
return result
|
||||
.split(' ')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ')
|
||||
}
|
||||
|
||||
type ExportData = {
|
||||
data: Record<string, unknown>[]
|
||||
columns: string[]
|
||||
}
|
||||
|
||||
type CsvExportDialogProps = {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
exportData: ExportData | undefined
|
||||
isLoading: boolean
|
||||
filename: string
|
||||
onRequestData: () => Promise<ExportData | undefined>
|
||||
}
|
||||
|
||||
export function CsvExportDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
exportData,
|
||||
isLoading,
|
||||
filename,
|
||||
onRequestData,
|
||||
}: CsvExportDialogProps) {
|
||||
const [selectedColumns, setSelectedColumns] = useState<Set<string>>(new Set())
|
||||
const [dataLoaded, setDataLoaded] = useState(false)
|
||||
|
||||
// When dialog opens, fetch data if not already loaded
|
||||
useEffect(() => {
|
||||
if (open && !dataLoaded) {
|
||||
onRequestData().then((result) => {
|
||||
if (result?.columns) {
|
||||
setSelectedColumns(new Set(result.columns))
|
||||
}
|
||||
setDataLoaded(true)
|
||||
})
|
||||
}
|
||||
}, [open, dataLoaded, onRequestData])
|
||||
|
||||
// Sync selected columns when export data changes
|
||||
useEffect(() => {
|
||||
if (exportData?.columns) {
|
||||
setSelectedColumns(new Set(exportData.columns))
|
||||
}
|
||||
}, [exportData])
|
||||
|
||||
// Reset state when dialog closes
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setDataLoaded(false)
|
||||
}
|
||||
}, [open])
|
||||
|
||||
const toggleColumn = (col: string, checked: boolean) => {
|
||||
const next = new Set(selectedColumns)
|
||||
if (checked) {
|
||||
next.add(col)
|
||||
} else {
|
||||
next.delete(col)
|
||||
}
|
||||
setSelectedColumns(next)
|
||||
}
|
||||
|
||||
const toggleAll = () => {
|
||||
if (!exportData) return
|
||||
if (selectedColumns.size === exportData.columns.length) {
|
||||
setSelectedColumns(new Set())
|
||||
} else {
|
||||
setSelectedColumns(new Set(exportData.columns))
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownload = () => {
|
||||
if (!exportData) return
|
||||
|
||||
const columnsArray = exportData.columns.filter((col) => selectedColumns.has(col))
|
||||
|
||||
// Build CSV header with formatted names
|
||||
const csvHeader = columnsArray.map((col) => {
|
||||
const formatted = formatColumnName(col)
|
||||
// Escape quotes in header
|
||||
if (formatted.includes(',') || formatted.includes('"')) {
|
||||
return `"${formatted.replace(/"/g, '""')}"`
|
||||
}
|
||||
return formatted
|
||||
})
|
||||
|
||||
const csvContent = [
|
||||
csvHeader.join(','),
|
||||
...exportData.data.map((row) =>
|
||||
columnsArray
|
||||
.map((col) => {
|
||||
const value = row[col]
|
||||
if (value === null || value === undefined) return ''
|
||||
const str = String(value)
|
||||
if (str.includes(',') || str.includes('"') || str.includes('\n')) {
|
||||
return `"${str.replace(/"/g, '""')}"`
|
||||
}
|
||||
return str
|
||||
})
|
||||
.join(',')
|
||||
),
|
||||
].join('\n')
|
||||
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `${filename}-${new Date().toISOString().split('T')[0]}.csv`
|
||||
link.click()
|
||||
URL.revokeObjectURL(url)
|
||||
onOpenChange(false)
|
||||
}
|
||||
|
||||
const allSelected = exportData ? selectedColumns.size === exportData.columns.length : false
|
||||
const noneSelected = selectedColumns.size === 0
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Export CSV</DialogTitle>
|
||||
<DialogDescription>
|
||||
Select which columns to include in the export
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">Loading data...</span>
|
||||
</div>
|
||||
) : exportData ? (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-medium">
|
||||
{selectedColumns.size} of {exportData.columns.length} columns selected
|
||||
</Label>
|
||||
<Button variant="ghost" size="sm" onClick={toggleAll}>
|
||||
{allSelected ? 'Deselect all' : 'Select all'}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-1.5 max-h-60 overflow-y-auto rounded-lg border p-3">
|
||||
{exportData.columns.map((col) => (
|
||||
<div key={col} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id={`col-${col}`}
|
||||
checked={selectedColumns.has(col)}
|
||||
onCheckedChange={(checked) => toggleColumn(col, !!checked)}
|
||||
/>
|
||||
<Label htmlFor={`col-${col}`} className="text-sm cursor-pointer font-normal">
|
||||
{formatColumnName(col)}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{exportData.data.length} row{exportData.data.length !== 1 ? 's' : ''} will be exported
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">
|
||||
No data available for export.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleDownload}
|
||||
disabled={isLoading || !exportData || noneSelected}
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Download CSV
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -30,6 +30,21 @@ import {
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
const OFFICE_MIME_TYPES = [
|
||||
'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
|
||||
'application/vnd.ms-powerpoint', // .ppt
|
||||
'application/msword', // .doc
|
||||
]
|
||||
|
||||
const OFFICE_EXTENSIONS = ['.pptx', '.ppt', '.docx', '.doc']
|
||||
|
||||
function isOfficeFile(mimeType: string, fileName: string): boolean {
|
||||
if (OFFICE_MIME_TYPES.includes(mimeType)) return true
|
||||
const ext = fileName.toLowerCase().slice(fileName.lastIndexOf('.'))
|
||||
return OFFICE_EXTENSIONS.includes(ext)
|
||||
}
|
||||
|
||||
interface ProjectFile {
|
||||
id: string
|
||||
fileType: 'EXEC_SUMMARY' | 'PRESENTATION' | 'VIDEO' | 'OTHER' | 'BUSINESS_PLAN' | 'VIDEO_PITCH' | 'SUPPORTING_DOC'
|
||||
@@ -210,7 +225,8 @@ function FileItem({ file }: { file: ProjectFile }) {
|
||||
const canPreview =
|
||||
file.mimeType.startsWith('video/') ||
|
||||
file.mimeType === 'application/pdf' ||
|
||||
file.mimeType.startsWith('image/')
|
||||
file.mimeType.startsWith('image/') ||
|
||||
isOfficeFile(file.mimeType, file.fileName)
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
@@ -264,6 +280,7 @@ function FileItem({ file }: { file: ProjectFile }) {
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
<FileOpenButton file={file} />
|
||||
<FileDownloadButton file={file} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -462,6 +479,45 @@ function BulkDownloadButton({ projectId, fileIds }: { projectId: string; fileIds
|
||||
)
|
||||
}
|
||||
|
||||
function FileOpenButton({ file }: { file: ProjectFile }) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const { refetch } = trpc.file.getDownloadUrl.useQuery(
|
||||
{ bucket: file.bucket, objectKey: file.objectKey },
|
||||
{ enabled: false }
|
||||
)
|
||||
|
||||
const handleOpen = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const result = await refetch()
|
||||
if (result.data?.url) {
|
||||
window.open(result.data.url, '_blank')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to get URL:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleOpen}
|
||||
disabled={loading}
|
||||
aria-label="Open file in new tab"
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function FileDownloadButton({ file }: { file: ProjectFile }) {
|
||||
const [downloading, setDownloading] = useState(false)
|
||||
|
||||
@@ -475,8 +531,14 @@ function FileDownloadButton({ file }: { file: ProjectFile }) {
|
||||
try {
|
||||
const result = await refetch()
|
||||
if (result.data?.url) {
|
||||
// Open in new tab for download
|
||||
window.open(result.data.url, '_blank')
|
||||
// Force browser download via <a download>
|
||||
const link = document.createElement('a')
|
||||
link.href = result.data.url
|
||||
link.download = file.fileName
|
||||
link.rel = 'noopener noreferrer'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to get download URL:', error)
|
||||
@@ -562,6 +624,31 @@ function FilePreview({ file, url }: { file: ProjectFile; url: string }) {
|
||||
)
|
||||
}
|
||||
|
||||
// Office documents (PPTX, DOCX, PPT, DOC)
|
||||
if (isOfficeFile(file.mimeType, file.fileName)) {
|
||||
const viewerUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`
|
||||
return (
|
||||
<div className="relative">
|
||||
<iframe
|
||||
src={viewerUrl}
|
||||
className="w-full h-[600px]"
|
||||
title={file.fileName}
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="absolute top-2 right-2"
|
||||
asChild
|
||||
>
|
||||
<a href={url} target="_blank" rel="noopener noreferrer">
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
Open in new tab
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8 text-muted-foreground">
|
||||
Preview not available for this file type
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useRef, useCallback } from 'react'
|
||||
import Cropper from 'react-easy-crop'
|
||||
import type { Area } from 'react-easy-crop'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -13,8 +15,9 @@ import {
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { ProjectLogo } from './project-logo'
|
||||
import { Upload, Loader2, Trash2, ImagePlus } from 'lucide-react'
|
||||
import { Upload, Loader2, Trash2, ImagePlus, ZoomIn } from 'lucide-react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
@@ -32,6 +35,48 @@ type LogoUploadProps = {
|
||||
const MAX_SIZE_MB = 5
|
||||
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
|
||||
|
||||
/**
|
||||
* Crop an image client-side using canvas and return a Blob.
|
||||
*/
|
||||
async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<Blob> {
|
||||
const image = new Image()
|
||||
image.crossOrigin = 'anonymous'
|
||||
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
image.onload = () => resolve()
|
||||
image.onerror = reject
|
||||
image.src = imageSrc
|
||||
})
|
||||
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = pixelCrop.width
|
||||
canvas.height = pixelCrop.height
|
||||
const ctx = canvas.getContext('2d')!
|
||||
|
||||
ctx.drawImage(
|
||||
image,
|
||||
pixelCrop.x,
|
||||
pixelCrop.y,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height,
|
||||
0,
|
||||
0,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height
|
||||
)
|
||||
|
||||
return new Promise<Blob>((resolve, reject) => {
|
||||
canvas.toBlob(
|
||||
(blob) => {
|
||||
if (blob) resolve(blob)
|
||||
else reject(new Error('Canvas toBlob failed'))
|
||||
},
|
||||
'image/png',
|
||||
0.9
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
export function LogoUpload({
|
||||
project,
|
||||
currentLogoUrl,
|
||||
@@ -39,8 +84,10 @@ export function LogoUpload({
|
||||
children,
|
||||
}: LogoUploadProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [preview, setPreview] = useState<string | null>(null)
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||
const [imageSrc, setImageSrc] = useState<string | null>(null)
|
||||
const [crop, setCrop] = useState({ x: 0, y: 0 })
|
||||
const [zoom, setZoom] = useState(1)
|
||||
const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
@@ -50,6 +97,10 @@ export function LogoUpload({
|
||||
const confirmUpload = trpc.logo.confirmUpload.useMutation()
|
||||
const deleteLogo = trpc.logo.delete.useMutation()
|
||||
|
||||
const onCropComplete = useCallback((_croppedArea: Area, croppedPixels: Area) => {
|
||||
setCroppedAreaPixels(croppedPixels)
|
||||
}, [])
|
||||
|
||||
const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (!file) return
|
||||
@@ -66,34 +117,36 @@ export function LogoUpload({
|
||||
return
|
||||
}
|
||||
|
||||
setSelectedFile(file)
|
||||
|
||||
// Create preview
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
setPreview(e.target?.result as string)
|
||||
reader.onload = (ev) => {
|
||||
setImageSrc(ev.target?.result as string)
|
||||
setCrop({ x: 0, y: 0 })
|
||||
setZoom(1)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}, [])
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!selectedFile) return
|
||||
if (!imageSrc || !croppedAreaPixels) return
|
||||
|
||||
setIsUploading(true)
|
||||
try {
|
||||
// Get pre-signed upload URL (includes provider type for tracking)
|
||||
// Crop the image client-side
|
||||
const croppedBlob = await getCroppedImg(imageSrc, croppedAreaPixels)
|
||||
|
||||
// Get pre-signed upload URL
|
||||
const { uploadUrl, key, providerType } = await getUploadUrl.mutateAsync({
|
||||
projectId: project.id,
|
||||
fileName: selectedFile.name,
|
||||
contentType: selectedFile.type,
|
||||
fileName: 'logo.png',
|
||||
contentType: 'image/png',
|
||||
})
|
||||
|
||||
// Upload file directly to storage
|
||||
// Upload cropped blob directly to storage
|
||||
const uploadResponse = await fetch(uploadUrl, {
|
||||
method: 'PUT',
|
||||
body: selectedFile,
|
||||
body: croppedBlob,
|
||||
headers: {
|
||||
'Content-Type': selectedFile.type,
|
||||
'Content-Type': 'image/png',
|
||||
},
|
||||
})
|
||||
|
||||
@@ -109,8 +162,7 @@ export function LogoUpload({
|
||||
|
||||
toast.success('Logo updated successfully')
|
||||
setOpen(false)
|
||||
setPreview(null)
|
||||
setSelectedFile(null)
|
||||
resetState()
|
||||
onUploadComplete?.()
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error)
|
||||
@@ -136,9 +188,16 @@ export function LogoUpload({
|
||||
}
|
||||
}
|
||||
|
||||
const resetState = () => {
|
||||
setImageSrc(null)
|
||||
setCrop({ x: 0, y: 0 })
|
||||
setZoom(1)
|
||||
setCroppedAreaPixels(null)
|
||||
if (fileInputRef.current) fileInputRef.current.value = ''
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
setPreview(null)
|
||||
setSelectedFile(null)
|
||||
resetState()
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
@@ -156,37 +215,85 @@ export function LogoUpload({
|
||||
<DialogHeader>
|
||||
<DialogTitle>Update Project Logo</DialogTitle>
|
||||
<DialogDescription>
|
||||
Upload a logo for "{project.title}". Allowed formats: JPEG, PNG, GIF, WebP.
|
||||
Max size: {MAX_SIZE_MB}MB.
|
||||
{imageSrc
|
||||
? 'Drag to reposition and use the slider to zoom. The logo will be cropped to a square.'
|
||||
: `Upload a logo for "${project.title}". Allowed formats: JPEG, PNG, GIF, WebP. Max size: ${MAX_SIZE_MB}MB.`}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Preview */}
|
||||
<div className="flex justify-center">
|
||||
<ProjectLogo
|
||||
project={project}
|
||||
logoUrl={preview || currentLogoUrl}
|
||||
size="lg"
|
||||
/>
|
||||
</div>
|
||||
{imageSrc ? (
|
||||
<>
|
||||
{/* Cropper */}
|
||||
<div className="relative w-full h-64 bg-muted rounded-lg overflow-hidden">
|
||||
<Cropper
|
||||
image={imageSrc}
|
||||
crop={crop}
|
||||
zoom={zoom}
|
||||
aspect={1}
|
||||
cropShape="rect"
|
||||
showGrid
|
||||
onCropChange={setCrop}
|
||||
onCropComplete={onCropComplete}
|
||||
onZoomChange={setZoom}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* File input */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="logo">Select image</Label>
|
||||
<Input
|
||||
ref={fileInputRef}
|
||||
id="logo"
|
||||
type="file"
|
||||
accept={ALLOWED_TYPES.join(',')}
|
||||
onChange={handleFileSelect}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
{/* Zoom slider */}
|
||||
<div className="flex items-center gap-3 px-1">
|
||||
<ZoomIn className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<Slider
|
||||
value={[zoom]}
|
||||
min={1}
|
||||
max={3}
|
||||
step={0.1}
|
||||
onValueChange={([val]) => setZoom(val)}
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Change image button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
resetState()
|
||||
fileInputRef.current?.click()
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
Choose a different image
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Current logo preview */}
|
||||
<div className="flex justify-center">
|
||||
<ProjectLogo
|
||||
project={project}
|
||||
logoUrl={currentLogoUrl}
|
||||
size="lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* File input */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="logo">Select image</Label>
|
||||
<Input
|
||||
ref={fileInputRef}
|
||||
id="logo"
|
||||
type="file"
|
||||
accept={ALLOWED_TYPES.join(',')}
|
||||
onChange={handleFileSelect}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex-col gap-2 sm:flex-row">
|
||||
{currentLogoUrl && !preview && (
|
||||
{currentLogoUrl && !imageSrc && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
@@ -206,18 +313,20 @@ export function LogoUpload({
|
||||
<Button variant="outline" onClick={handleCancel} className="flex-1">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={!selectedFile || isUploading}
|
||||
className="flex-1"
|
||||
>
|
||||
{isUploading ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Upload
|
||||
</Button>
|
||||
{imageSrc && (
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={!croppedAreaPixels || isUploading}
|
||||
className="flex-1"
|
||||
>
|
||||
{isUploading ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Upload
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
55
src/components/shared/status-badge.tsx
Normal file
55
src/components/shared/status-badge.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { Badge, type BadgeProps } from '@/components/ui/badge'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const STATUS_STYLES: Record<string, { variant: BadgeProps['variant']; className?: string }> = {
|
||||
// Round statuses
|
||||
DRAFT: { variant: 'secondary' },
|
||||
ACTIVE: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
|
||||
EVALUATION: { variant: 'default', className: 'bg-violet-500/10 text-violet-700 border-violet-200 dark:text-violet-400' },
|
||||
CLOSED: { variant: 'secondary', className: 'bg-slate-500/10 text-slate-600 border-slate-200' },
|
||||
|
||||
// Project statuses
|
||||
SUBMITTED: { variant: 'secondary', className: 'bg-indigo-500/10 text-indigo-700 border-indigo-200 dark:text-indigo-400' },
|
||||
ELIGIBLE: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
|
||||
ASSIGNED: { variant: 'default', className: 'bg-violet-500/10 text-violet-700 border-violet-200 dark:text-violet-400' },
|
||||
UNDER_REVIEW: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
|
||||
SHORTLISTED: { variant: 'default', className: 'bg-amber-500/10 text-amber-700 border-amber-200 dark:text-amber-400' },
|
||||
SEMIFINALIST: { variant: 'default', className: 'bg-amber-500/10 text-amber-700 border-amber-200 dark:text-amber-400' },
|
||||
FINALIST: { variant: 'default', className: 'bg-orange-500/10 text-orange-700 border-orange-200 dark:text-orange-400' },
|
||||
WINNER: { variant: 'default', className: 'bg-yellow-500/10 text-yellow-800 border-yellow-300 dark:text-yellow-400' },
|
||||
REJECTED: { variant: 'destructive' },
|
||||
WITHDRAWN: { variant: 'secondary' },
|
||||
|
||||
// Evaluation statuses
|
||||
IN_PROGRESS: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
|
||||
COMPLETED: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
|
||||
|
||||
// User statuses
|
||||
INVITED: { variant: 'secondary', className: 'bg-sky-500/10 text-sky-700 border-sky-200 dark:text-sky-400' },
|
||||
INACTIVE: { variant: 'secondary' },
|
||||
SUSPENDED: { variant: 'destructive' },
|
||||
}
|
||||
|
||||
type StatusBadgeProps = {
|
||||
status: string
|
||||
className?: string
|
||||
size?: 'sm' | 'default'
|
||||
}
|
||||
|
||||
export function StatusBadge({ status, className, size = 'default' }: StatusBadgeProps) {
|
||||
const style = STATUS_STYLES[status] || { variant: 'secondary' as const }
|
||||
const label = status.replace(/_/g, ' ')
|
||||
|
||||
return (
|
||||
<Badge
|
||||
variant={style.variant}
|
||||
className={cn(
|
||||
style.className,
|
||||
size === 'sm' && 'text-[10px] px-1.5 py-0',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user