Initial commit

components/features/projects/CreateProjectDialog.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useCreateProject } from '@/lib/hooks/use-projects';
+import type { CreateProjectDto } from '@/types/project';
+
+const projectSchema = z.object({
+  name: z.string().min(1, 'Project name is required').max(200, 'Project name cannot exceed 200 characters'),
+  description: z.string().max(2000, 'Description cannot exceed 2000 characters'),
+  key: z
+    .string()
+    .min(2, 'Project key must be at least 2 characters')
+    .max(10, 'Project key cannot exceed 10 characters')
+    .regex(/^[A-Z]+$/, 'Project key must contain only uppercase letters'),
+});
+
+interface CreateProjectDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function CreateProjectDialog({
+  open,
+  onOpenChange,
+}: CreateProjectDialogProps) {
+  const createProject = useCreateProject();
+
+  const form = useForm<CreateProjectDto>({
+    resolver: zodResolver(projectSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      key: '',
+    },
+  });
+
+  const onSubmit = async (data: CreateProjectDto) => {
+    try {
+      // TODO: Replace with actual user ID from auth context
+      const projectData = {
+        ...data,
+        ownerId: '00000000-0000-0000-0000-000000000001',
+      };
+      await createProject.mutateAsync(projectData);
+      form.reset();
+      onOpenChange(false);
+    } catch (error) {
+      console.error('Failed to create project:', error);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[525px]">
+        <DialogHeader>
+          <DialogTitle>Create New Project</DialogTitle>
+          <DialogDescription>
+            Add a new project to organize your work. Click create when you're done.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Project Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="My Awesome Project" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    The name of your project.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="key"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Project Key</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="MAP"
+                      {...field}
+                      onChange={(e) => {
+                        field.onChange(e.target.value.toUpperCase());
+                      }}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    A unique identifier for the project (2-10 uppercase letters).
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="A brief description of the project..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Optional description for your project.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={createProject.isPending}>
+                {createProject.isPending ? 'Creating...' : 'Create Project'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}