finished taskgen

app/page.tsx

@@ -96,10 +96,14 @@ export default function Home() {
 
   const [stackInput, setStackInput] = useState("");
   const [features, setFeatures] = useState<Feature[]>([]);
+  const [tasks, setTasks] = useState<Task[]>([]);
 
   const { setValue } = form;
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
+    setFeatures([]);
+    setTasks([]);
+
     try {
       const feature_gen_prompt = `You are an AI software project manager. You use agile methodology and the best software project management techniques to plan software projects for indie developers.
 
@@ -190,13 +194,15 @@ Instructions: For each feature, we need to figure out what other features need t
           dependencies: z
             .array(
               z.object({
-                uid: z.enum(featureUids),
+                uid: z.enum(featureUids).describe("The UID of this feature"),
                 dependencies: z
                   .array(
                     z.object({
                       uid: z
                         .enum(featureUids)
-                        .describe("The UID of the feature"),
+                        .describe(
+                          "The UID of the feature this feature depends on"
+                        ),
                     })
                   )
                   .describe("The UID of the dependencies of the feature"),
@@ -259,7 +265,7 @@ Instructions: For each feature, we need to figure out what other features need t
         .filter((dep) => dep.uid === feature.uid)
         .map((dep) => _features.find((f) => f.uid === dep.depUid));
 
-      generateTask(
+      return generateTask(
         p_name,
         p_desc,
         p_stack,
@@ -268,9 +274,8 @@ Instructions: For each feature, we need to figure out what other features need t
         feature
       );
     });
-
-    const tasks = await Promise.all(featurePromises);
-    console.log("all tasks", tasks);
+    const tasks: Task[][] = await Promise.all(featurePromises);
+    setTasks(tasks.flat());
   }
 
   async function generateTask(
@@ -413,6 +418,8 @@ Dependency-Based Order (numeric)
                 </FormControl>
                 <FormDescription>
                   This is your project tech stack.
+                </FormDescription>
+                <div>
                   {form.getValues("stack").map((stack) => (
                     <Badge
                       key={stack}
@@ -432,12 +439,15 @@ Dependency-Based Order (numeric)
                       />
                     </Badge>
                   ))}
-                </FormDescription>
+                </div>
                 <FormMessage />
               </FormItem>
             )}
           />
           <Button type="submit">Submit</Button>
+          <Button type="button" onClick={() => setDogs(form)}>
+            Prefill Uber Dogs
+          </Button>
         </form>
       </Form>
       <h1></h1>
@@ -459,7 +469,7 @@ Dependency-Based Order (numeric)
             <TableBody>
               {features!.map((feature) => {
                 return (
-                  <TableRow key={feature.name}>
+                  <TableRow key={feature.uid}>
                     <TableCell
                       className="max-w-xs whitespace-nowrap"
                       style={{
@@ -478,7 +488,23 @@ Dependency-Based Order (numeric)
             </TableBody>
           </Table>
         </TabsContent>
-        <TabsContent value="tasks">{}</TabsContent>
+        <TabsContent value="tasks">
+          {features.map((_feature) => {
+            return (
+              <>
+                <div key={_feature.uid}>
+                  <TaskTable
+                    feature={_feature}
+                    tasks={tasks.filter(
+                      (task) => task.feature === _feature.uid
+                    )}
+                  />
+                  <hr className="my-10" />
+                </div>
+              </>
+            );
+          })}
+        </TabsContent>
       </Tabs>
     </div>
   );
@@ -523,6 +549,15 @@ const TaskTable = (props: any) => {
   );
 };
 
+const setDogs = (form: any) => {
+  form.setValue("name", "Uber Dogs");
+  form.setValue(
+    "description",
+    "Uber Dogs is a mobile app that allows users to order dogs on demand."
+  );
+  form.setValue("stack", ["Django", "google-maps-api", "GraphQL"]);
+};
+
 /*
 
 Electronic Medical Record System