Add tasks panels

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console2/src/components/organizations/InviteUserDialog.tsx

@@ -0,0 +1,91 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Field,
+  useDialogRef,
+} from "@probo/ui";
+import type { PropsWithChildren } from "react";
+import { useTranslate } from "@probo/i18n";
+import { graphql } from "relay-runtime";
+import { useOrganizationId } from "/hooks/useOrganizationId";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
+import { z } from "zod";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+
+const inviteMutation = graphql`
+  mutation InviteUserDialogMutation($input: InviteUserInput!) {
+    inviteUser(input: $input) {
+      success
+    }
+  }
+`;
+
+const schema = z.object({
+  email: z.string().email(),
+  fullName: z.string(),
+});
+
+export function InviteUserDialog({ children }: PropsWithChildren) {
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+  const [inviteUser, isInviting] = useMutationWithToasts(inviteMutation, {
+    successMessage: __("User invited successfully"),
+    errorMessage: __("Failed to invite user"),
+  });
+  const { register, handleSubmit, formState } = useFormWithSchema(schema, {});
+
+  const dialogRef = useDialogRef();
+
+  const onSubmit = handleSubmit((data) => {
+    inviteUser({
+      variables: {
+        input: {
+          organizationId,
+          email: data.email,
+          fullName: data.fullName,
+        },
+      },
+      onSuccess: () => {
+        dialogRef.current?.close();
+      },
+    });
+  });
+
+  return (
+    <Dialog
+      title={__("Invite member")}
+      trigger={children}
+      className="max-w-lg"
+      ref={dialogRef}
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent padded className="space-y-4">
+          <p className="text-txt-secondary text-sm">
+            Send an invitation to join your workspace.
+          </p>
+          <Field
+            type="email"
+            label={__("Email")}
+            placeholder={__("Email")}
+            {...register("email")}
+            error={formState.errors.email?.message}
+          />
+          <Field
+            type="text"
+            label={__("Full name")}
+            placeholder={__("Full name")}
+            {...register("fullName")}
+            error={formState.errors.fullName?.message}
+          />
+        </DialogContent>
+        <DialogFooter>
+          <Button type="submit" disabled={isInviting}>
+            {__("Invite user")}
+          </Button>
+        </DialogFooter>
+      </form>
+    </Dialog>
+  );
+}

apps/console2/src/components/organizations/__generated__/InviteUserDialogMutation.graphql.ts

@@ -0,0 +1,94 @@
+/**
+ * @generated SignedSource<<1cf40085b2959d7ebb48ee4a90be41b1>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type InviteUserInput = {
+  email: string;
+  fullName: string;
+  organizationId: string;
+};
+export type InviteUserDialogMutation$variables = {
+  input: InviteUserInput;
+};
+export type InviteUserDialogMutation$data = {
+  readonly inviteUser: {
+    readonly success: boolean;
+  };
+};
+export type InviteUserDialogMutation = {
+  response: InviteUserDialogMutation$data;
+  variables: InviteUserDialogMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "InviteUserPayload",
+    "kind": "LinkedField",
+    "name": "inviteUser",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "success",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "InviteUserDialogMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "InviteUserDialogMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "aa667927b5e2cd0019a8457edc286181",
+    "id": null,
+    "metadata": {},
+    "name": "InviteUserDialogMutation",
+    "operationKind": "mutation",
+    "text": "mutation InviteUserDialogMutation(\n  $input: InviteUserInput!\n) {\n  inviteUser(input: $input) {\n    success\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "de4c5b5208a2ff0953e9d15b844df842";
+
+export default node;