styling 2

gui/app/layout.tsx

@@ -18,8 +18,8 @@ const fontIbm = IBM_Plex_Sans_Condensed({
 });
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "ChainFlow dashboard",
+  description: "",
 };
 
 export default function RootLayout({

gui/app/page.module.scss

@@ -0,0 +1,22 @@
+.container {
+  flex: 1 0 auto;
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
+}
+
+.dashboard {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.definition {
+  display: block;
+  padding: 8px 0;
+  font-size: 14px;
+}
+
+.list {
+  margin: -16px;
+}

gui/app/page.tsx

@@ -1,7 +1,63 @@
-import { FC } from "react";
+import Panel from "@/src/components/Panel";
+import styles from "./page.module.scss";
+import {
+  getDefinitionStats,
+  getDefinitions,
+  getInstances,
+  getTasks,
+} from "@/src/utils/processUtils";
+import Box from "@/src/components/Box";
 
-const HomePage: FC = () => {
-  return <h1>chainflow</h1>;
-};
+export default async function TasksPage() {
+  const { stats, tasks, definitions, instances } = await getData();
 
-export default HomePage;
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1 className={styles.title}>Dashboard</h1>
+        <div className={styles.tools}></div>
+      </div>
+      <div className={styles.body}>
+        <div className={styles.dashboard}>
+          <Panel title={`Definitions`}>
+            <table>
+              <thead>
+                <tr>
+                  <th>Definition</th>
+                  <th>Instances</th>
+                  <th>Failed Jobs</th>
+                  <th>Incidents</th>
+                </tr>
+              </thead>
+              <tbody>
+                {stats.map((stat, idx) => (
+                  <tr key={idx}>
+                    <td>
+                      <strong>{stat.definition.name}</strong>
+                    </td>
+                    <td>{stat.instances}</td>
+                    <td>{stat.failedJobs}</td>
+                    <td>{stat.incidents.length}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </Panel>
+          <Panel title="Tasks">
+            <Box>
+              {tasks.filter((task) => !task.assignee).length} of {tasks.length}{" "}
+              unassigned
+            </Box>
+          </Panel>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+async function getData() {
+  return {
+    stats: await getDefinitionStats(),
+    tasks: await getTasks(),
+  };
+}

gui/app/processes/[id]/[instanceId]/page.module.scss

@@ -85,12 +85,4 @@
 
 .variables {
   flex: 0 0 auto;
-
-  &Table {
-    border-spacing: 4px;
-  }
-
-  &TH {
-    text-align: left;
-  }
 }

gui/app/processes/[id]/[instanceId]/page.tsx

@@ -52,23 +52,28 @@ export default async function InstancePage({
         </aside>
         <main className={styles.content}>
           <Viewer process={instance.definitionId} className={styles.viewer} />
-          <div className={styles.variables}>
-            <table className={styles.variablesTable}>
-              <tbody className={styles.variablesTBody}>
+          <Panel title="Variables" className={styles.variables}>
+            <table>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Type</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
                 {Object.entries(variables).map(([varKey, varValue]) => {
                   return (
-                    <tr className={styles.variablesTBody} key={varKey}>
-                      <th className={styles.variablesTH}>{varKey}</th>
-                      <td className={styles.variablesTD}>{varValue.type}</td>
-                      <td className={styles.variablesTD}>
-                        {JSON.stringify(varValue.value)}
-                      </td>
+                    <tr key={varKey}>
+                      <th>{varKey}</th>
+                      <td>{varValue.type}</td>
+                      <td>{`${varValue.value}`}</td>
                     </tr>
                   );
                 })}
               </tbody>
             </table>
-          </div>
+          </Panel>
         </main>
       </div>
     </div>
@@ -79,6 +84,6 @@ async function getData(id: string) {
   return {
     instance: await getInstance(id),
     variables: await getVariables(id),
-    tasks: await getTasks(null, null, id),
+    tasks: await getTasks(null, id),
   };
 }

gui/app/processes/[id]/page.module.scss

@@ -53,16 +53,15 @@
   &TR {
     display: flex;
     flex-flow: column;
-    gap: 2px;
-  }
-
-  &TH {
-    display: block;
-    text-align: left;
+    padding: 8px 16px;
+    gap: 4px;
   }
 
+  &TH,
   &TD {
     display: block;
+    text-align: left;
+    padding: 0 !important;
   }
 }
 
@@ -82,10 +81,6 @@
 .instances {
   flex: 0 0 auto;
 
-  &Table {
-    border-spacing: 4px;
-  }
-
   &TH {
     text-align: left;
   }

gui/app/processes/[id]/page.tsx

@@ -48,34 +48,36 @@ export default async function InstancesPage({
             title="Instances"
             tools={<Button caption="New Instance" icon={<FaPlay />} disabled />}
           >
-            <div className={styles.instances}>
-              <table className={styles.instancesTable}>
-                <tbody className={styles.instancesTBody}>
-                  {instances.map((instance) => {
-                    return (
-                      <tr className={styles.instancesTBody} key={instance.id}>
-                        <th className={styles.instancesTH}>
-                          <Link
-                            href={`/processes/${process.id}/${instance.id}`}
-                          >
-                            {instance.id}
-                          </Link>
-                        </th>
-                        <td className={styles.instancesTD}>
-                          {instance.ended ? "Ended" : "In progress"}{" "}
-                        </td>
-                        <td className={styles.instancesTD}>
-                          {instance.suspended ? "Suspended" : "Active"}
-                        </td>
-                        <td className={styles.instancesTD}>
-                          <InstanceSuspender instance={instance} />
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
+            {!!instances.length && (
+              <div className={styles.instances}>
+                <table className={styles.instancesTable}>
+                  <tbody className={styles.instancesTBody}>
+                    {instances.map((instance) => {
+                      return (
+                        <tr className={styles.instancesTBody} key={instance.id}>
+                          <th className={styles.instancesTH}>
+                            <Link
+                              href={`/processes/${process.id}/${instance.id}`}
+                            >
+                              {instance.id}
+                            </Link>
+                          </th>
+                          <td className={styles.instancesTD}>
+                            {instance.ended ? "Ended" : "In progress"}{" "}
+                          </td>
+                          <td className={styles.instancesTD}>
+                            {instance.suspended ? "Suspended" : "Active"}
+                          </td>
+                          <td className={styles.instancesTD}>
+                            <InstanceSuspender instance={instance} />
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
           </Panel>
         </aside>
 

gui/app/processes/page.tsx

@@ -1,29 +1,62 @@
-import List from "@/src/components/List";
 import styles from "./page.module.scss";
-import ProcessCard from "@/src/components/ProcessCard";
 import { getDefinitions } from "@/src/utils/processUtils";
+import Link from "next/link";
+import Button from "@/src/components/Button";
+import { FaPlay } from "react-icons/fa6";
 
 export default async function ProjectsPage() {
   const processes = await getData();
 
+  const handleNewInstance = () => {
+    //
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
         <h1 className={styles.title}>Processes</h1>
         <div className={styles.tools}></div>
       </div>
       <div className={styles.body}>
-        <List className={styles.list}>
-          {processes?.map((process) => {
-            return (
-              <ProcessCard
-                process={process}
-                className={styles.card}
-                key={process.key}
-              />
-            );
-          })}
-        </List>
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Instances</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {processes?.map((process, idx) => {
+              return (
+                <tr key={idx}>
+                  <td>
+                    <Link
+                      href={`/processes/${process.id}`}
+                      className={styles.title}
+                    >
+                      {process.name}
+                    </Link>
+                  </td>
+                  <td>
+                    {process.instanceCount || "No"} instance
+                    {!process?.instanceCount || process?.instanceCount > 1
+                      ? "s"
+                      : ""}
+                  </td>
+                  <td>
+                    {/* <Button
+                      icon={<FaPlay />}
+                      caption="New Instance"
+                      disabled
+                      onClick={handleNewInstance}
+                    /> */}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
       </div>
     </div>
   );

gui/app/tasks/[id]/page.tsx

@@ -1,30 +1,31 @@
-import { getTaskVariables, getTasks } from "@/src/utils/processUtils";
+import { getTask, getTaskVariables } from "@/src/utils/processUtils";
 import styles from "./page.module.scss";
-import { Tasks } from "@/src/components/Tasks/Tasks";
 import Panel from "@/src/components/Panel";
 import { TaskForm } from "./taskForm";
+import Button from "@/src/components/Button";
+import { FaCrown } from "react-icons/fa6";
 
 export default async function TaskPage({
   params: { id },
 }: {
   params: { id: string };
 }) {
-  const tasks = await getData(id);
+  const task = await getData(id);
 
-  if (!tasks.length) {
+  if (!task) {
     return null;
   }
 
-  const task = tasks[0];
-
   const formVars = await getTaskVariables(task.id);
-  const abi = JSON.parse(formVars?.abi?.value || "{}");
+  const abi = formVars?.abi?.value ? JSON.parse(formVars?.abi?.value) : null;
 
   return (
     <div className={styles.container}>
       <div className={styles.header}>
         <h1 className={styles.title}>Task {task.name}</h1>
-        <div className={styles.tools}></div>
+        <div className={styles.tools}>
+          <Button icon={<FaCrown />} disabled caption="Claim" />
+        </div>
       </div>
       <div className={styles.body}>
         <aside className={styles.aside}>
@@ -56,5 +57,5 @@ export default async function TaskPage({
 }
 
 async function getData(id: string) {
-  return await getTasks(id);
+  return await getTask(id);
 }

gui/app/tasks/[id]/taskForm.tsx

@@ -58,7 +58,7 @@ export const TaskForm: FC<TaskFormProps> = ({ vars, abi }) => {
           sendTransaction?.() || console.log("sendTransaction is not defined")
       )}
     >
-      {abi.inputs.map((abiParam, idx) => {
+      {abi?.inputs?.map((abiParam, idx) => {
         return (
           <label key={idx} className={styles.formField}>
             <strong className={styles.formFieldTitle}>