feat(frontend): Implement Phase 2 - Complete Projects UI with CRUD operations
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>
This commit is contained in:
@@ -13,6 +13,7 @@ import { useSearchParams } from 'next/navigation';
|
||||
const loginSchema = z.object({
|
||||
email: z.string().email('Invalid email address'),
|
||||
password: z.string().min(8, 'Password must be at least 8 characters'),
|
||||
tenantSlug: z.string().min(1, 'Tenant slug is required'),
|
||||
});
|
||||
|
||||
type LoginForm = z.infer<typeof loginSchema>;
|
||||
@@ -60,6 +61,20 @@ export default function LoginPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Label htmlFor="tenantSlug">Tenant Slug</Label>
|
||||
<Input
|
||||
id="tenantSlug"
|
||||
type="text"
|
||||
{...register('tenantSlug')}
|
||||
className="mt-1"
|
||||
placeholder="your-company"
|
||||
/>
|
||||
{errors.tenantSlug && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.tenantSlug.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
|
||||
Reference in New Issue
Block a user