2b134b0d6f
Implemented comprehensive Projects UI with full CRUD functionality following modern React best practices and using shadcn/ui components. Changes: - Created ProjectForm component with react-hook-form + zod validation - Auto-uppercase project key input - Comprehensive field validation (name, key, description) - Support for both create and edit modes - Toast notifications for success/error states - Enhanced Projects List Page (app/(dashboard)/projects/page.tsx) - Beautiful card-based grid layout with hover effects - Skeleton loading states for better UX - Empty state with call-to-action - Project metadata display (key badge, created date) - Integrated ProjectForm in Dialog for creation - Enhanced Project Detail Page (app/(dashboard)/projects/[id]/page.tsx) - Comprehensive project information display - Edit functionality with dialog form - Delete functionality with confirmation AlertDialog - Epics preview section with stats - Quick actions sidebar (Kanban, Epics) - Statistics card (Total/Active/Completed epics) - Skeleton loading states - Error handling with retry capability - Added toast notifications (Sonner) - Installed and configured sonner package - Added Toaster component to root layout - Success/error notifications for all CRUD operations - Installed required dependencies - date-fns for date formatting - sonner for toast notifications - shadcn/ui alert-dialog component Technical highlights: - TypeScript with strict type checking - React Query for data fetching and caching - Optimistic updates with automatic rollback - Responsive design (mobile-friendly) - Accessibility-focused components - Clean error handling throughout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
CircleCheckIcon,
|
|
InfoIcon,
|
|
Loader2Icon,
|
|
OctagonXIcon,
|
|
TriangleAlertIcon,
|
|
} from "lucide-react"
|
|
import { useTheme } from "next-themes"
|
|
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
|
|
|
const Toaster = ({ ...props }: ToasterProps) => {
|
|
const { theme = "system" } = useTheme()
|
|
|
|
return (
|
|
<Sonner
|
|
theme={theme as ToasterProps["theme"]}
|
|
className="toaster group"
|
|
icons={{
|
|
success: <CircleCheckIcon className="size-4" />,
|
|
info: <InfoIcon className="size-4" />,
|
|
warning: <TriangleAlertIcon className="size-4" />,
|
|
error: <OctagonXIcon className="size-4" />,
|
|
loading: <Loader2Icon className="size-4 animate-spin" />,
|
|
}}
|
|
style={
|
|
{
|
|
"--normal-bg": "var(--popover)",
|
|
"--normal-text": "var(--popover-foreground)",
|
|
"--normal-border": "var(--border)",
|
|
"--border-radius": "var(--radius)",
|
|
} as React.CSSProperties
|
|
}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { Toaster }
|