From 9be7b76e4b47ee1529a024c5c5ffd2eebf6e1585 Mon Sep 17 00:00:00 2001
From: Dev-CasperTheGhost
 <53900565+Dev-CasperTheGhost@users.noreply.github.com>
Date: Tue, 9 Nov 2021 17:49:28 +0100
Subject: [PATCH 1/5] :tada: initial suggested input

---
 .../src/controllers/leo/SearchController.ts   | 24 +++++--
 .../active-bolos/ManageBoloModal.tsx          | 33 +++++++---
 .../src/components/form/InputSuggestions.tsx  | 62 +++++++++++++++++++
 3 files changed, 108 insertions(+), 11 deletions(-)
 create mode 100644 packages/client/src/components/form/InputSuggestions.tsx

diff --git a/packages/api/src/controllers/leo/SearchController.ts b/packages/api/src/controllers/leo/SearchController.ts
index a3e716d11..0bc330358 100644
--- a/packages/api/src/controllers/leo/SearchController.ts
+++ b/packages/api/src/controllers/leo/SearchController.ts
@@ -1,7 +1,7 @@
 import { Controller, UseBeforeEach } from "@tsed/common";
 import { JsonRequestBody, Post } from "@tsed/schema";
 import { NotFound } from "@tsed/exceptions";
-import { BodyParams } from "@tsed/platform-params";
+import { BodyParams, QueryParams } from "@tsed/platform-params";
 import { prisma } from "../../lib/prisma";
 import { IsAuth } from "../../middlewares";
 import { ActiveOfficer } from "../../middlewares/ActiveOfficer";
@@ -113,12 +113,15 @@ export class SearchController {
   }
 
   @Post("/vehicle")
-  async searchVehicle(@BodyParams("plateOrVin") plateOrVin: string) {
+  async searchVehicle(
+    @QueryParams("includeMany") includeMany: boolean,
+    @BodyParams("plateOrVin") plateOrVin: string,
+  ) {
     if (!plateOrVin || plateOrVin.length < 3) {
       return null;
     }
 
-    const vehicle = await prisma.registeredVehicle.findFirst({
+    const data = {
       where: {
         OR: [
           { plate: { startsWith: plateOrVin.toUpperCase() } },
@@ -130,7 +133,20 @@ export class SearchController {
         model: { include: { value: true } },
         registrationStatus: true,
       },
-    });
+    };
+
+    if (includeMany) {
+      const vehicles = await prisma.registeredVehicle.findMany({
+        where: { plate: { startsWith: plateOrVin.toUpperCase() } },
+        include: data.include,
+      });
+
+      console.log({ vehicles });
+
+      return vehicles;
+    }
+
+    const vehicle = await prisma.registeredVehicle.findFirst(data);
 
     if (!vehicle) {
       throw new NotFound("vehicleNotFound");
diff --git a/packages/client/src/components/active-bolos/ManageBoloModal.tsx b/packages/client/src/components/active-bolos/ManageBoloModal.tsx
index 0c9faf829..47fad04e2 100644
--- a/packages/client/src/components/active-bolos/ManageBoloModal.tsx
+++ b/packages/client/src/components/active-bolos/ManageBoloModal.tsx
@@ -10,13 +10,14 @@ import { Form, Formik } from "formik";
 import { handleValidate } from "lib/handleValidate";
 import useFetch from "lib/useFetch";
 import { ModalIds } from "types/ModalIds";
-import { BoloType } from "types/prisma";
+import { BoloType, RegisteredVehicle } from "types/prisma";
 import { useTranslations } from "use-intl";
 import { CREATE_BOLO_SCHEMA } from "@snailycad/schemas";
 import { FullBolo, useDispatchState } from "state/dispatchState";
 import { Person, ThreeDots } from "react-bootstrap-icons";
 import { FormRow } from "components/form/FormRow";
 import { classNames } from "lib/classNames";
+import { InputSuggestions } from "components/form/InputSuggestions";
 
 interface Props {
   onClose?: () => void;
@@ -133,11 +134,29 @@ export const ManageBoloModal = ({ onClose, bolo }: Props) => {
             {values.type === BoloType.VEHICLE ? (
               <>
                 <FormField label={"Plate"}>
-                  <Input
-                    id="plate"
-                    onChange={handleChange}
-                    hasError={!!errors.plate}
-                    value={values.plate}
+                  <InputSuggestions
+                    inputProps={{
+                      id: "plate",
+                      onChange: handleChange,
+                      hasError: !!errors.plate,
+                      value: values.plate,
+                    }}
+                    options={{
+                      apiPath: "/search/vehicle?includeMany=true",
+                      method: "POST",
+                      data: { plateOrVin: values.plate },
+                    }}
+                    onSuggestionClick={(suggestion: RegisteredVehicle) => {
+                      setFieldValue("plate", suggestion.plate);
+                      setFieldValue("model", suggestion.model);
+                      setFieldValue("color", suggestion.color);
+                    }}
+                    Component={({ suggestion }: { suggestion: RegisteredVehicle }) => (
+                      <p>
+                        {suggestion.plate.toUpperCase()} (
+                        {suggestion.model?.value?.value?.toUpperCase() ?? null})
+                      </p>
+                    )}
                   />
                   <Error>{errors.plate}</Error>
                 </FormField>
@@ -186,7 +205,7 @@ export const ManageBoloModal = ({ onClose, bolo }: Props) => {
               <Error>{errors.description}</Error>
             </FormField>
 
-            <footer className="mt-5 flex justify-end">
+            <footer className="flex justify-end mt-5">
               <Button type="reset" onClick={handleClose} variant="cancel">
                 {common("cancel")}
               </Button>
diff --git a/packages/client/src/components/form/InputSuggestions.tsx b/packages/client/src/components/form/InputSuggestions.tsx
new file mode 100644
index 000000000..c798aee5c
--- /dev/null
+++ b/packages/client/src/components/form/InputSuggestions.tsx
@@ -0,0 +1,62 @@
+import { Method } from "axios";
+import useFetch from "lib/useFetch";
+import * as React from "react";
+import { Input } from "./Input";
+
+interface Props {
+  inputProps?: JSX.IntrinsicElements["input"] & { hasError?: boolean };
+  onSuggestionClick?: (suggestion: any) => void;
+  Component: ({ suggestion }: { suggestion: any }) => JSX.Element;
+  options: { apiPath: string; method: Method; data: any };
+}
+
+export const InputSuggestions = ({ Component, onSuggestionClick, options, inputProps }: Props) => {
+  const [suggestions, setSuggestions] = React.useState<any[]>([]);
+  const { execute } = useFetch();
+
+  async function onSearch(e: React.ChangeEvent<HTMLInputElement>) {
+    const target = e.target as HTMLInputElement;
+    const value = target.value;
+
+    if (value.length < 3) return;
+
+    const { json } = await execute(options.apiPath, {
+      ...options,
+    });
+
+    if (json && Array.isArray(json)) {
+      setSuggestions(json);
+    }
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    onSearch(e);
+    inputProps?.onChange?.(e);
+  }
+
+  return (
+    <div className="relative w-full">
+      <Input {...(inputProps as any)} onChange={handleChange} />
+
+      {suggestions.length > 0 ? (
+        <div className="absolute w-full p-2 bg-white rounded-md shadow-md top-11 dark:bg-dark-bright max-h-72">
+          <ul>
+            {suggestions.map((suggestion) => (
+              <li
+                className="p-1.5 px-2 transition-colors rounded-md cursor-pointer hover:bg-gray-200 dark:hover:bg-dark-bg"
+                key={suggestion.id}
+                onClick={() => onSuggestionClick?.(suggestion)}
+              >
+                {Component ? (
+                  <Component suggestion={suggestion} />
+                ) : (
+                  <p>{JSON.stringify(suggestion)}</p>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+};

From 98f4160115e17b2436286a6ae8b8acbb3bfa74f5 Mon Sep 17 00:00:00 2001
From: Dev-CasperTheGhost
 <53900565+Dev-CasperTheGhost@users.noreply.github.com>
Date: Tue, 9 Nov 2021 18:29:13 +0100
Subject: [PATCH 2/5] :tada: progress on input suggestions

---
 .../src/controllers/leo/SearchController.ts   |  2 -
 packages/client/package.json                  |  1 +
 .../active-bolos/ManageBoloModal.tsx          | 50 ++++++++++++++++---
 .../src/components/form/InputSuggestions.tsx  | 31 ++++++++----
 yarn.lock                                     | 10 ++++
 5 files changed, 75 insertions(+), 19 deletions(-)

diff --git a/packages/api/src/controllers/leo/SearchController.ts b/packages/api/src/controllers/leo/SearchController.ts
index 0bc330358..6627d70a4 100644
--- a/packages/api/src/controllers/leo/SearchController.ts
+++ b/packages/api/src/controllers/leo/SearchController.ts
@@ -141,8 +141,6 @@ export class SearchController {
         include: data.include,
       });
 
-      console.log({ vehicles });
-
       return vehicles;
     }
 
diff --git a/packages/client/package.json b/packages/client/package.json
index 99e4dbeb2..19d9a7bc1 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -26,6 +26,7 @@
     "react": "^17.0.2",
     "react-bootstrap-icons": "^1.6.1",
     "react-colorful": "^5.5.0",
+    "react-cool-onclickoutside": "^1.7.0",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.1.1",
     "react-markdown": "^7.1.0",
diff --git a/packages/client/src/components/active-bolos/ManageBoloModal.tsx b/packages/client/src/components/active-bolos/ManageBoloModal.tsx
index 47fad04e2..72eb10be0 100644
--- a/packages/client/src/components/active-bolos/ManageBoloModal.tsx
+++ b/packages/client/src/components/active-bolos/ManageBoloModal.tsx
@@ -10,14 +10,15 @@ import { Form, Formik } from "formik";
 import { handleValidate } from "lib/handleValidate";
 import useFetch from "lib/useFetch";
 import { ModalIds } from "types/ModalIds";
-import { BoloType, RegisteredVehicle } from "types/prisma";
+import { BoloType, Citizen, RegisteredVehicle } from "types/prisma";
 import { useTranslations } from "use-intl";
 import { CREATE_BOLO_SCHEMA } from "@snailycad/schemas";
 import { FullBolo, useDispatchState } from "state/dispatchState";
-import { Person, ThreeDots } from "react-bootstrap-icons";
+import { Person, PersonFill, ThreeDots } from "react-bootstrap-icons";
 import { FormRow } from "components/form/FormRow";
 import { classNames } from "lib/classNames";
 import { InputSuggestions } from "components/form/InputSuggestions";
+import { useImageUrl } from "hooks/useImageUrl";
 
 interface Props {
   onClose?: () => void;
@@ -29,6 +30,7 @@ export const ManageBoloModal = ({ onClose, bolo }: Props) => {
   const { isOpen, closeModal } = useModal();
   const { state, execute } = useFetch();
   const { bolos, setBolos } = useDispatchState();
+  const { makeImageUrl } = useImageUrl();
 
   async function onSubmit(values: typeof INITIAL_VALUES) {
     if (bolo) {
@@ -148,7 +150,7 @@ export const ManageBoloModal = ({ onClose, bolo }: Props) => {
                     }}
                     onSuggestionClick={(suggestion: RegisteredVehicle) => {
                       setFieldValue("plate", suggestion.plate);
-                      setFieldValue("model", suggestion.model);
+                      setFieldValue("model", suggestion.model.value.value);
                       setFieldValue("color", suggestion.color);
                     }}
                     Component={({ suggestion }: { suggestion: RegisteredVehicle }) => (
@@ -185,11 +187,43 @@ export const ManageBoloModal = ({ onClose, bolo }: Props) => {
 
             {values.type === BoloType.PERSON ? (
               <FormField label={"Name"}>
-                <Input
-                  id="name"
-                  onChange={handleChange}
-                  hasError={!!errors.name}
-                  value={values.name}
+                <InputSuggestions
+                  inputProps={{
+                    id: "name",
+                    onChange: handleChange,
+                    hasError: !!errors.name,
+                    value: values.name,
+                    autoComplete: "false",
+                    autoCorrect: "false",
+                    list: "null",
+                  }}
+                  options={{
+                    apiPath: "/search/name?includeMany=true",
+                    method: "POST",
+                    data: { name: values.name },
+                    minLength: 2,
+                  }}
+                  onSuggestionClick={(suggestion: Citizen) => {
+                    setFieldValue("name", `${suggestion.name} ${suggestion.surname}`);
+                  }}
+                  Component={({ suggestion }: { suggestion: Citizen }) => (
+                    <div className="flex items-center">
+                      <div className="mr-2 min-w-[25px]">
+                        {suggestion.imageId ? (
+                          <img
+                            className="rounded-md w-[35px] h-[35px] object-cover"
+                            draggable={false}
+                            src={makeImageUrl("citizens", suggestion.imageId)}
+                          />
+                        ) : (
+                          <PersonFill className="text-gray-500/60 w-[25px] h-[25px]" />
+                        )}
+                      </div>
+                      <p>
+                        {suggestion.name} {suggestion.surname}
+                      </p>
+                    </div>
+                  )}
                 />
                 <Error>{errors.name}</Error>
               </FormField>
diff --git a/packages/client/src/components/form/InputSuggestions.tsx b/packages/client/src/components/form/InputSuggestions.tsx
index c798aee5c..bea8147b4 100644
--- a/packages/client/src/components/form/InputSuggestions.tsx
+++ b/packages/client/src/components/form/InputSuggestions.tsx
@@ -1,24 +1,30 @@
 import { Method } from "axios";
 import useFetch from "lib/useFetch";
 import * as React from "react";
+import useOnclickOutside from "react-cool-onclickoutside";
 import { Input } from "./Input";
 
 interface Props {
   inputProps?: JSX.IntrinsicElements["input"] & { hasError?: boolean };
   onSuggestionClick?: (suggestion: any) => void;
   Component: ({ suggestion }: { suggestion: any }) => JSX.Element;
-  options: { apiPath: string; method: Method; data: any };
+  options: { apiPath: string; method: Method; data: any; minLength?: number };
 }
 
 export const InputSuggestions = ({ Component, onSuggestionClick, options, inputProps }: Props) => {
+  const [isOpen, setOpen] = React.useState(false);
   const [suggestions, setSuggestions] = React.useState<any[]>([]);
   const { execute } = useFetch();
+  const ref = useOnclickOutside(() => setOpen(false));
 
   async function onSearch(e: React.ChangeEvent<HTMLInputElement>) {
     const target = e.target as HTMLInputElement;
     const value = target.value;
 
-    if (value.length < 3) return;
+    if (value.length < (options.minLength ?? 3)) {
+      setOpen(false);
+      return;
+    }
 
     const { json } = await execute(options.apiPath, {
       ...options,
@@ -26,26 +32,33 @@ export const InputSuggestions = ({ Component, onSuggestionClick, options, inputP
 
     if (json && Array.isArray(json)) {
       setSuggestions(json);
+      setOpen(true);
     }
   }
 
-  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    onSearch(e);
+  function handleSuggestionClick(suggestion: any) {
+    onSuggestionClick?.(suggestion);
+    setOpen(false);
+  }
+
+  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     inputProps?.onChange?.(e);
+    // todo: debounce
+    onSearch(e);
   }
 
   return (
-    <div className="relative w-full">
-      <Input {...(inputProps as any)} onChange={handleChange} />
+    <div ref={ref} className="relative w-full">
+      <Input {...(inputProps as any)} onFocus={() => setOpen(true)} onChange={handleChange} />
 
-      {suggestions.length > 0 ? (
-        <div className="absolute w-full p-2 bg-white rounded-md shadow-md top-11 dark:bg-dark-bright max-h-72">
+      {isOpen && suggestions.length > 0 ? (
+        <div className="absolute z-50 w-full p-2 bg-white rounded-md shadow-md top-11 dark:bg-dark-bright max-h-72">
           <ul>
             {suggestions.map((suggestion) => (
               <li
                 className="p-1.5 px-2 transition-colors rounded-md cursor-pointer hover:bg-gray-200 dark:hover:bg-dark-bg"
                 key={suggestion.id}
-                onClick={() => onSuggestionClick?.(suggestion)}
+                onClick={() => handleSuggestionClick(suggestion)}
               >
                 {Component ? (
                   <Component suggestion={suggestion} />
diff --git a/yarn.lock b/yarn.lock
index f951bae50..92f95a517 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1067,6 +1067,7 @@ __metadata:
     react: ^17.0.2
     react-bootstrap-icons: ^1.6.1
     react-colorful: ^5.5.0
+    react-cool-onclickoutside: ^1.7.0
     react-dom: ^17.0.2
     react-hot-toast: ^2.1.1
     react-markdown: ^7.1.0
@@ -8674,6 +8675,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-cool-onclickoutside@npm:^1.7.0":
+  version: 1.7.0
+  resolution: "react-cool-onclickoutside@npm:1.7.0"
+  peerDependencies:
+    react: ">= 16.8.0"
+  checksum: 52041d867ff275ee9e925b2fc0616febd17964a372b2319007e4c8ae375a9c583da79ab0f27238a36d7fb7e486ec2293f94b2a2362e9c48db44303884c97b2d4
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^17.0.2":
   version: 17.0.2
   resolution: "react-dom@npm:17.0.2"

From 602598f7fc13cdcefbcfd860c3cc9c22244902e1 Mon Sep 17 00:00:00 2001
From: Dev-CasperTheGhost
 <53900565+Dev-CasperTheGhost@users.noreply.github.com>
Date: Wed, 10 Nov 2021 13:39:27 +0100
Subject: [PATCH 3/5] :tada: implement suggestions input

---
 .../controllers/record/RecordsController.ts   |  2 +-
 packages/client/locales/en/common.json        |  3 +-
 .../leo/modals/CreateTicketModal.tsx          | 60 ++++++++++++++-----
 .../NameSearchModal/NameSearchModal.tsx       |  7 ++-
 packages/schemas/src/records.ts               |  1 +
 5 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/packages/api/src/controllers/record/RecordsController.ts b/packages/api/src/controllers/record/RecordsController.ts
index 7a83b31c8..0f996e803 100644
--- a/packages/api/src/controllers/record/RecordsController.ts
+++ b/packages/api/src/controllers/record/RecordsController.ts
@@ -53,7 +53,7 @@ export class RecordsController {
       },
     });
 
-    if (!citizen) {
+    if (!citizen || `${citizen.name} ${citizen.surname}` !== body.get("citizenName")) {
       throw new NotFound("citizenNotFound");
     }
 
diff --git a/packages/client/locales/en/common.json b/packages/client/locales/en/common.json
index 70243a058..20f6bfafa 100644
--- a/packages/client/locales/en/common.json
+++ b/packages/client/locales/en/common.json
@@ -50,6 +50,7 @@
     "dateLargerThanNow": "Please provide a date smaller than the current date.",
     "divisionNotInDepartment": "This division does not exist in this department.",
     "passwordsDoNotMatch": "Passwords do not match",
-    "currentPasswordIncorrect": "Current password is incorrect"
+    "currentPasswordIncorrect": "Current password is incorrect",
+    "citizenNotFound": "That citizen was not found"
   }
 }
diff --git a/packages/client/src/components/leo/modals/CreateTicketModal.tsx b/packages/client/src/components/leo/modals/CreateTicketModal.tsx
index f402f6464..83ce3dcf3 100644
--- a/packages/client/src/components/leo/modals/CreateTicketModal.tsx
+++ b/packages/client/src/components/leo/modals/CreateTicketModal.tsx
@@ -14,8 +14,10 @@ import useFetch from "lib/useFetch";
 import { ModalIds } from "types/ModalIds";
 import { useTranslations } from "use-intl";
 import { Textarea } from "components/form/Textarea";
-import { useCitizen } from "context/CitizenContext";
-import { RecordType } from "types/prisma";
+import { Citizen, RecordType } from "types/prisma";
+import { InputSuggestions } from "components/form/InputSuggestions";
+import { PersonFill } from "react-bootstrap-icons";
+import { useImageUrl } from "hooks/useImageUrl";
 
 export const CreateTicketModal = ({ type }: { type: RecordType }) => {
   const { isOpen, closeModal, getPayload } = useModal();
@@ -39,7 +41,7 @@ export const CreateTicketModal = ({ type }: { type: RecordType }) => {
 
   const { state, execute } = useFetch();
   const { penalCode } = useValues();
-  const { citizens } = useCitizen();
+  const { makeImageUrl } = useImageUrl();
 
   async function onSubmit(values: typeof INITIAL_VALUES) {
     const { json } = await execute("/records", {
@@ -56,10 +58,12 @@ export const CreateTicketModal = ({ type }: { type: RecordType }) => {
     }
   }
 
+  const payload = getPayload<{ citizenId: string; citizenName: string }>(data[type].id);
   const validate = handleValidate(CREATE_TICKET_SCHEMA);
   const INITIAL_VALUES = {
     type,
-    citizenId: getPayload<{ citizenId: string }>(data[type].id)?.citizenId ?? "",
+    citizenId: payload?.citizenId ?? "",
+    citizenName: payload?.citizenName ?? "",
     violations: [] as SelectValue[],
     postal: "",
     notes: "",
@@ -73,18 +77,44 @@ export const CreateTicketModal = ({ type }: { type: RecordType }) => {
       className="w-[600px]"
     >
       <Formik validate={validate} initialValues={INITIAL_VALUES} onSubmit={onSubmit}>
-        {({ handleChange, errors, values, isValid }) => (
+        {({ handleChange, setFieldValue, errors, values, isValid }) => (
           <Form>
             <FormField label={t("citizen")}>
-              <Select
-                value={values.citizenId}
-                hasError={!!errors.citizenId}
-                name="citizenId"
-                onChange={handleChange}
-                values={citizens.map((v) => ({
-                  label: `${v.name} ${v.surname}`,
-                  value: v.id,
-                }))}
+              <InputSuggestions
+                inputProps={{
+                  value: values.citizenName,
+                  hasError: !!errors.citizenName,
+                  name: "citizenName",
+                  onChange: handleChange,
+                }}
+                onSuggestionClick={(suggestion) => {
+                  setFieldValue("citizenId", suggestion.id);
+                  setFieldValue("citizenName", `${suggestion.name} ${suggestion.surname}`);
+                }}
+                options={{
+                  apiPath: "/search/name",
+                  data: { name: values.citizenName },
+                  method: "POST",
+                  minLength: 2,
+                }}
+                Component={({ suggestion }: { suggestion: Citizen }) => (
+                  <div className="flex items-center">
+                    <div className="mr-2 min-w-[25px]">
+                      {suggestion.imageId ? (
+                        <img
+                          className="rounded-md w-[35px] h-[35px] object-cover"
+                          draggable={false}
+                          src={makeImageUrl("citizens", suggestion.imageId)}
+                        />
+                      ) : (
+                        <PersonFill className="text-gray-500/60 w-[25px] h-[25px]" />
+                      )}
+                    </div>
+                    <p>
+                      {suggestion.name} {suggestion.surname}
+                    </p>
+                  </div>
+                )}
               />
               <Error>{errors.citizenId}</Error>
             </FormField>
@@ -124,7 +154,7 @@ export const CreateTicketModal = ({ type }: { type: RecordType }) => {
               <Error>{errors.notes}</Error>
             </FormField>
 
-            <footer className="mt-5 flex justify-end">
+            <footer className="flex justify-end mt-5">
               <Button type="reset" onClick={() => closeModal(data[type].id)} variant="cancel">
                 {common("cancel")}
               </Button>
diff --git a/packages/client/src/components/leo/modals/NameSearchModal/NameSearchModal.tsx b/packages/client/src/components/leo/modals/NameSearchModal/NameSearchModal.tsx
index c434da0b9..83b913b76 100644
--- a/packages/client/src/components/leo/modals/NameSearchModal/NameSearchModal.tsx
+++ b/packages/client/src/components/leo/modals/NameSearchModal/NameSearchModal.tsx
@@ -94,7 +94,7 @@ export const NameSearchModal = () => {
   }
 
   function handleOpenCreateRecord(type: RecordType) {
-    if (typeof results === "boolean" || !results) return;
+    if (!currentResult) return;
 
     const modalId = {
       [RecordType.ARREST_REPORT]: ModalIds.CreateArrestReport,
@@ -102,7 +102,10 @@ export const NameSearchModal = () => {
       [RecordType.WRITTEN_WARNING]: ModalIds.CreateWrittenWarning,
     };
 
-    openModal(modalId[type], { citizenId: currentResult?.id });
+    openModal(modalId[type], {
+      citizenName: `${currentResult.name} ${currentResult.surname}`,
+      citizenId: currentResult.id,
+    });
   }
 
   const hasWarrants =
diff --git a/packages/schemas/src/records.ts b/packages/schemas/src/records.ts
index 42f8375ae..5e02e881d 100644
--- a/packages/schemas/src/records.ts
+++ b/packages/schemas/src/records.ts
@@ -7,6 +7,7 @@ export const CREATE_TICKET_SCHEMA = z.object({
     .max(255)
     .regex(/ARREST_REPORT|TICKET|WRITTEN_WARNING/),
   citizenId: z.string().min(2).max(255),
+  citizenName: z.string().min(2).max(255),
   violations: z.array(z.any()),
   postal: z.string().min(1).max(255).nullable(),
   notes: z.string(),

From 5ffe444e127fc2b06f913352605ec619b8516b2a Mon Sep 17 00:00:00 2001
From: Dev-CasperTheGhost
 <53900565+Dev-CasperTheGhost@users.noreply.github.com>
Date: Wed, 10 Nov 2021 13:41:05 +0100
Subject: [PATCH 4/5] :tada: add suggestions to warrant input

---
 .../leo/modals/CreateWarrantModal.tsx         | 50 ++++++++++++++++---
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/leo/modals/CreateWarrantModal.tsx b/packages/client/src/components/leo/modals/CreateWarrantModal.tsx
index 06c765dcb..7b0ae0852 100644
--- a/packages/client/src/components/leo/modals/CreateWarrantModal.tsx
+++ b/packages/client/src/components/leo/modals/CreateWarrantModal.tsx
@@ -2,7 +2,6 @@ import { Form, Formik, FormikHelpers } from "formik";
 import { useTranslations } from "use-intl";
 import { Button } from "components/Button";
 import { FormField } from "components/form/FormField";
-import { Input } from "components/form/Input";
 import { Select } from "components/form/Select";
 import { Textarea } from "components/form/Textarea";
 import { Loader } from "components/Loader";
@@ -10,11 +9,16 @@ import useFetch from "lib/useFetch";
 import { Modal } from "components/modal/Modal";
 import { useModal } from "context/ModalContext";
 import { ModalIds } from "types/ModalIds";
+import { InputSuggestions } from "components/form/InputSuggestions";
+import { Citizen } from "types/prisma";
+import { PersonFill } from "react-bootstrap-icons";
+import { useImageUrl } from "hooks/useImageUrl";
 
 export const CreateWarrantModal = () => {
   const { isOpen, closeModal } = useModal();
   const { state, execute } = useFetch();
   const common = useTranslations("Common");
+  const { makeImageUrl } = useImageUrl();
 
   async function onSubmit(
     values: typeof INITIAL_VALUES,
@@ -28,11 +32,13 @@ export const CreateWarrantModal = () => {
     if (json.id) {
       // todo: alert success
       helpers.resetForm();
+      closeModal(ModalIds.CreateWarrant);
     }
   }
 
   const INITIAL_VALUES = {
     citizenId: "",
+    citizenName: "",
     status: "",
     description: "",
   };
@@ -45,14 +51,44 @@ export const CreateWarrantModal = () => {
       className="w-[600px]"
     >
       <Formik onSubmit={onSubmit} initialValues={INITIAL_VALUES}>
-        {({ handleChange, values, errors, isValid }) => (
+        {({ handleChange, setFieldValue, values, errors, isValid }) => (
           <Form>
             <FormField label="Name">
-              <Input
-                name="citizenId"
-                onChange={handleChange}
-                value={values.citizenId}
-                hasError={!!errors.citizenId}
+              <InputSuggestions
+                inputProps={{
+                  value: values.citizenName,
+                  hasError: !!errors.citizenName,
+                  name: "citizenName",
+                  onChange: handleChange,
+                }}
+                onSuggestionClick={(suggestion) => {
+                  setFieldValue("citizenId", suggestion.id);
+                  setFieldValue("citizenName", `${suggestion.name} ${suggestion.surname}`);
+                }}
+                options={{
+                  apiPath: "/search/name",
+                  data: { name: values.citizenName },
+                  method: "POST",
+                  minLength: 2,
+                }}
+                Component={({ suggestion }: { suggestion: Citizen }) => (
+                  <div className="flex items-center">
+                    <div className="mr-2 min-w-[25px]">
+                      {suggestion.imageId ? (
+                        <img
+                          className="rounded-md w-[35px] h-[35px] object-cover"
+                          draggable={false}
+                          src={makeImageUrl("citizens", suggestion.imageId)}
+                        />
+                      ) : (
+                        <PersonFill className="text-gray-500/60 w-[25px] h-[25px]" />
+                      )}
+                    </div>
+                    <p>
+                      {suggestion.name} {suggestion.surname}
+                    </p>
+                  </div>
+                )}
               />
             </FormField>
 

From 0b3f22527cf7325df88b15758c259376dbb278e7 Mon Sep 17 00:00:00 2001
From: Dev-CasperTheGhost
 <53900565+Dev-CasperTheGhost@users.noreply.github.com>
Date: Wed, 10 Nov 2021 13:42:41 +0100
Subject: [PATCH 5/5] :hammer: chore: fix overflow

---
 packages/client/src/components/form/InputSuggestions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/form/InputSuggestions.tsx b/packages/client/src/components/form/InputSuggestions.tsx
index bea8147b4..28ea37fe5 100644
--- a/packages/client/src/components/form/InputSuggestions.tsx
+++ b/packages/client/src/components/form/InputSuggestions.tsx
@@ -52,7 +52,7 @@ export const InputSuggestions = ({ Component, onSuggestionClick, options, inputP
       <Input {...(inputProps as any)} onFocus={() => setOpen(true)} onChange={handleChange} />
 
       {isOpen && suggestions.length > 0 ? (
-        <div className="absolute z-50 w-full p-2 bg-white rounded-md shadow-md top-11 dark:bg-dark-bright max-h-72">
+        <div className="absolute z-50 w-full p-2 overflow-auto bg-white rounded-md shadow-md top-11 dark:bg-dark-bright max-h-60">
           <ul>
             {suggestions.map((suggestion) => (
               <li