Feat espace pro

.eslintrc.json

@@ -13,6 +13,7 @@
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:json/recommended",
     "plugin:@next/next/recommended",
+    "plugin:@tanstack/query/recommended",
     "next/core-web-vitals"
   ],
   "parser": "@typescript-eslint/parser",
@@ -35,6 +36,7 @@
     "no-underscore-dangle": 0,
     "react/no-find-dom-node": 0,
     "react/prop-types": 0,
+    "react/no-children-prop": ["error", { "allowFunctions": true }],
     "no-nested-ternary": 0,
     "react/no-unescaped-entities": 0,
     "no-console": ["warn", { "allow": ["warn", "error", "info"] }],

.vscode/settings.json

@@ -14,5 +14,6 @@
   "files.exclude": {
     "**/.git": true,
     "**/.DS_Store": true
-  }
+  },
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

package.json

@@ -32,7 +32,7 @@
     "db:new": "knex migrate:make",
     "db:revert": "knex migrate:rollback",
     "db:revert:one": "knex migrate:down",
-    "db:sync": "kysely-codegen --out-file ./src/db/kysely/database.ts --env-file=\"./.env.local\" --log-level=\"error\" --exclude-pattern=\"(public.spatial_ref_sys|topology.*|tiger.*|public.geography_columns|public.geometry_columns)\" && prettier --write ./src/db/kysely/database.ts",
+    "db:sync": "kysely-codegen --out-file ./src/server/db/kysely/database.ts --env-file=\"./.env.local\" --log-level=\"error\" --exclude-pattern=\"(public.spatial_ref_sys|topology.*|tiger.*|public.geography_columns|public.geometry_columns)\" && prettier --write ./src/db/kysely/database.ts",
     "db:verify": "yarn db:introspect --verify",
     "scalingo-postbuild": "yarn build && next-sitemap",
     "predev": "only-include-used-icons",
@@ -54,10 +54,15 @@
     "@next/bundle-analyzer": "^14.0.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@reach/combobox": "^0.18.0",
+    "@react-email/components": "0.0.31",
     "@react-hookz/web": "^24.0.4",
     "@rivercode/facebook-conversion-api-nextjs": "^4.3.2",
     "@sentry/nextjs": "^7.117.0",
     "@socialgouv/matomo-next": "^1.9.0",
+    "@tanstack/react-form": "^0.40.4",
+    "@tanstack/react-query": "^5.62.7",
+    "@tanstack/react-table": "^8.20.6",
+    "@tanstack/react-virtual": "^3.11.2",
     "@turf/area": "^7.1.0",
     "@turf/boolean-point-in-polygon": "^7.1.0",
     "@turf/center": "^7.1.0",
@@ -132,10 +137,11 @@
     "winston": "^3.11.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz",
     "yup": "^1.2.0",
-    "zod": "^3.22.2"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
+    "@tanstack/eslint-plugin-query": "^5.62.1",
     "@testing-library/react": "^14.1.2",
     "@types/archiver": "^5.3.2",
     "@types/base64-stream": "^1.0.2",
@@ -147,6 +153,7 @@
     "@types/jsonwebtoken": "^9.0.2",
     "@types/mapbox__mapbox-gl-draw": "^1.4.7",
     "@types/node": "^20.5.0",
+    "@types/nodemailer": "^6.4.17",
     "@types/papaparse": "^5.3.15",
     "@types/pg": "^8.11.10",
     "@types/react": "npm:types-react@rc",

src/components/Admin/AccountCreationForm.tsx

@@ -0,0 +1,95 @@
+import Input from '@codegouvfr/react-dsfr/Input';
+import Select from '@codegouvfr/react-dsfr/SelectNext';
+import { standardSchemaValidator, useForm } from '@tanstack/react-form';
+import { z } from 'zod';
+
+import Box from '@/components/ui/Box';
+import Button from '@/components/ui/Button';
+import { notify, toastErrors } from '@/services/notification';
+import { userRoles } from '@/types/enum/UserRole';
+import { postFetchJSON } from '@/utils/network';
+import { upperCaseFirstChar } from '@/utils/strings';
+
+export const zCreateUserRequest = z.strictObject({
+  email: z.string().email(),
+  role: z.enum(userRoles),
+});
+type CreateUserRequest = z.infer<typeof zCreateUserRequest>;
+
+const AccountCreationForm = () => {
+  const form = useForm({
+    defaultValues: {
+      email: '',
+      role: 'professionnel',
+    } as CreateUserRequest,
+    validatorAdapter: standardSchemaValidator(),
+    validators: {
+      onChange: zCreateUserRequest,
+    },
+    onSubmit: toastErrors(async ({ value }) => {
+      await postFetchJSON('/api/admin/users', value);
+      notify('success', "L'utilisateur a été créé avec succès. Il recevra un email l'invitant à définir son mot de passe.");
+    }),
+  });
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        form.handleSubmit();
+      }}
+    >
+      <Box display="flex" alignItems="center" gap="16px">
+        <form.Field
+          name="email"
+          children={(field) => (
+            <Input
+              label="Email"
+              nativeInputProps={{
+                required: true,
+                id: field.name,
+                name: field.name,
+                placeholder: 'Saisir votre email',
+                autoComplete: 'email',
+                value: field.state.value,
+                onChange: (e) => field.handleChange(e.target.value),
+                onBlur: field.handleBlur,
+              }}
+            />
+          )}
+        />
+        <form.Field
+          name="role"
+          children={(field) => (
+            <Select
+              label="Role"
+              options={userRoles.map((role) => ({
+                value: role,
+                label: upperCaseFirstChar(role),
+              }))}
+              nativeSelectProps={{
+                required: true,
+                id: field.name,
+                name: field.name,
+                value: field.state.value,
+                onChange: (e) => field.handleChange(e.target.value),
+                onBlur: field.handleBlur,
+              }}
+            />
+          )}
+        />
+        <form.Subscribe
+          selector={(state) => [state.canSubmit, state.isSubmitting]}
+          children={([canSubmit, isSubmitting]) => (
+            <Button type="submit" disabled={!canSubmit}>
+              {isSubmitting ? '...' : "Envoyer l'invitation"}
+            </Button>
+          )}
+        />
+      </Box>
+    </form>
+  );
+};
+
+export default AccountCreationForm;

src/components/Admin/UserRoleBadge.tsx

@@ -0,0 +1,42 @@
+import Badge from '@codegouvfr/react-dsfr/Badge';
+
+import { type UserRole } from '@/types/enum/UserRole';
+import { upperCaseFirstChar } from '@/utils/strings';
+
+const roleToColor = {
+  admin: {
+    backgroundColor: '#e31717',
+    color: '#fff',
+  },
+  demo: {
+    backgroundColor: '#e0eb26',
+    color: '#000',
+  },
+  gestionnaire: {
+    backgroundColor: '#7a00fb',
+    color: '#fff',
+  },
+  professionnel: {
+    backgroundColor: '#0d49fb',
+    color: '#fff',
+  },
+} satisfies Record<
+  UserRole,
+  {
+    backgroundColor: string;
+    color: string;
+  }
+>;
+
+type UserRoleBadgeProps = {
+  role: UserRole;
+};
+const UserRoleBadge = ({ role }: UserRoleBadgeProps) => {
+  return (
+    <Badge small style={roleToColor[role]}>
+      {upperCaseFirstChar(role)}
+    </Badge>
+  );
+};
+
+export default UserRoleBadge;