Release 2.0.8 (#162)

.gitignore

@@ -1,4 +1,4 @@
-# builds 
+# builds
 dist
 build
 .next
@@ -16,14 +16,16 @@ src/config.ts
 
 public/citizen-images/*
 public/bleeter-images/*
+public/mugshots/*
 !public/bleeter-images/.gitkeep
 !public/citizen-images/.gitkeep
 !public/citizen-images/default.svg
+!public/mugshots/.gitkeep
 
 .DS_Store
 
 .eslintcache
 
 .vscode
 
-data.json
+data.json

docs/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 **If you need help updating/installing or have found any bugs, please join [our Discord server](https://discord.gg/eGnrPqEH7U) or open a [GitHub issue here](https://github.com/Dev-CasperTheGhost/snaily-cadv3/issues/new/choose)**
 
+## 2.0.8
+
+- New: able to suspend an officer
+- New: able to upload mugshots
+- New: added `Jail time` to penal codes
+- New: added `Fine Amount` to penal codes
+- Minor: minor code changes
+
 ## 2.0.7
 
 - New: link officer with citizen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "snaily-cadv3",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "An open source Computer Aided Dispatch (CAD) for FiveM, this is a web based integration for communities who love police roleplaying and dispatching. ",
   "main": "index.js",
   "scripts": {
@@ -26,6 +26,7 @@
   },
   "homepage": "https://github.com/Dev-CasperTheGhost/snaily-cadv3#readme",
   "dependencies": {
+    "@casper124578/useful": "^0.0.7",
     "axios": "^0.21.1",
     "bcryptjs": "^2.4.3",
     "concurrently": "^6.0.2",

scripts/generate-lang.js

@@ -154,6 +154,14 @@ const ProbablyNotInTheTranslateFile = {
     firearms_involved: "Firearm(s) Involved",
     deleted_incident: "Successfully deleted incident",
     officer_linked_to_citizen: "Officer linked to citizen?",
+    select_mugshot_files: "Select mugshot files",
+    upload_mugshots: "Upload mugshots",
+    mugshots: "Mugshots",
+    delete_current_mugshot: "Delete current mugshot",
+    delete_mugshot_success: "Successfully deleted mugshot",
+    no_mugshots: "This citizen doesn't have any mugshots",
+    suspend: "Suspend",
+    revoke: "Revoke",
   },
   admin: {
     ...file.admin,
@@ -212,6 +220,11 @@ const ProbablyNotInTheTranslateFile = {
     updated_10_code: "Successfully updated 10 code",
     success_penal_code: "Successfully added penal code",
     updated_penal_code: "Successfully updated 10 code",
+    jail_time: "Jail time in seconds (Optional)",
+    jail_time2: "Jail time",
+    seconds: "Seconds",
+    fine_amount: "Fine amount (Optional)",
+    fine_amount2: "Fine Amount",
   },
   dispatch: {
     ...file.dispatch,

snaily-cad.sql

@@ -359,6 +359,20 @@ CREATE TABLE `medical_records` (
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
 
 -- --------------------------------------------------------
+--
+-- Table structure for table `mugshots`
+--
+
+CREATE TABLE `mugshots` (
+    `id` varchar(255) NOT NULL,
+    `citizen_id` varchar(255) NOT NULL,
+    `data` text NOT NULL DEFAULT '[]',
+    `officer_name` varchar(255) NOT NULL,
+    `full_date` text NOT NULL,
+    `officer_id` varchar(255) NOT NULL,
+    PRIMARY KEY (`id`)
+  ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+-- --------------------------------------------------------
 
 --
 -- Table structure for table `notifications`

src/components/GlobalSearch/GlobalSearch.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import { connect } from "react-redux";
 import Link from "next/link";
+import { usePortal } from "@casper124578/useful/hooks/usePortal";
 import { Options, useHotkeys } from "react-hotkeys-hook";
 import { Items } from "./items";
 import { Nullable, State } from "types/State";
 import { User } from "types/User";
-import { usePortal } from "@hooks/usePortal";
 import { useModalOpen } from "@hooks/useModalOpen";
 import { ModalIds } from "types/ModalIds";
 
@@ -24,7 +24,7 @@ const GlobalSearchC: React.FC<Props> = ({ user }) => {
   const [search, setSearch] = React.useState("");
 
   const inputRef = useModalOpen<HTMLInputElement>("globalSearch" as ModalIds);
-  const ref = usePortal("GlobalSearch");
+  const ref = usePortal("React_Portal_GlobalSearch");
   const filteredItems = React.useMemo(() => {
     return Items.filter((item) => item.query.join(" ").includes(search.toLowerCase()));
   }, [search]);

src/components/Modal/Modal.tsx

@@ -2,16 +2,17 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import { modal } from "@lib/utils";
 import { ModalIds } from "types/ModalIds";
-import { usePortal } from "@hooks/usePortal";
+import { usePortal } from "@casper124578/useful/hooks/usePortal";
 
 interface Props {
   id: ModalIds;
   title: string;
   size?: "sm" | "lg" | "xl";
+  styles?: React.CSSProperties;
 }
 
-export const Modal: React.FC<Props> = ({ id, size, title, children }) => {
-  const portal = usePortal(id);
+export const Modal: React.FC<Props> = ({ styles, id, size, title, children }) => {
+  const portal = usePortal(`Modal_Portal_${id}`);
   const [mounted, setMounted] = React.useState(false);
 
   React.useEffect(() => {
@@ -26,6 +27,7 @@ export const Modal: React.FC<Props> = ({ id, size, title, children }) => {
           tabIndex={-1}
           aria-labelledby={`${id}-label`}
           aria-hidden="true"
+          style={styles}
         >
           <div className={`modal-dialog modal-${size} modal-dialog-centered`}>
             <div className="modal-content bg-dark border-dark">

src/components/modals/admin/penal-codes/CreatePenalCodeModal.tsx

@@ -15,6 +15,8 @@ interface Props {
 const CreatePenalCodeModalC: React.FC<Props> = ({ addPenalCode }) => {
   const [title, setTitle] = React.useState("");
   const [des, setDes] = React.useState("");
+  const [jailTime, setJailTime] = React.useState("");
+  const [fineAmount, setFineAmount] = React.useState("");
   const ref = useModalOpen<HTMLInputElement>(ModalIds.CreatePenalCode);
 
   async function onSubmit(e: React.FormEvent) {
@@ -23,11 +25,15 @@ const CreatePenalCodeModalC: React.FC<Props> = ({ addPenalCode }) => {
     const added = await addPenalCode({
       title,
       des,
+      jail_time: jailTime,
+      fine_amount: fineAmount,
     });
 
     if (added === true) {
       setTitle("");
       setDes("");
+      setJailTime("");
+      setFineAmount("");
       modal(ModalIds.CreatePenalCode)?.hide();
     }
   }
@@ -48,6 +54,29 @@ const CreatePenalCodeModalC: React.FC<Props> = ({ addPenalCode }) => {
               className="form-control bg-secondary border-secondary text-light"
             />
           </div>
+          <div className="mb-3">
+            <label className="form-label" htmlFor="add_jail_time">
+              {lang.codes.jail_time}
+            </label>
+            <input
+              id="add_jail_time"
+              value={jailTime}
+              onChange={(e) => setJailTime(e.currentTarget.value)}
+              className="form-control bg-secondary border-secondary text-light"
+            />
+          </div>
+          <div className="mb-3">
+            <label className="form-label" htmlFor="fine_amount">
+              {lang.codes.fine_amount}
+            </label>
+            <input
+              type="number"
+              id="fine_amount"
+              value={fineAmount}
+              onChange={(e) => setFineAmount(e.currentTarget.value)}
+              className="form-control bg-secondary border-secondary text-light"
+            />
+          </div>
           <div className="mb-3">
             <label className="form-label" htmlFor="code">
               {lang.global.description}

src/components/modals/admin/penal-codes/EditPenalCodeModal.tsx

@@ -16,13 +16,17 @@ interface Props {
 const EditPenalCodeC: React.FC<Props> = ({ updatePenalCode, code }) => {
   const [title, setTitle] = React.useState("");
   const [des, setDes] = React.useState<string>("");
+  const [fineAmount, setFineAmount] = React.useState("");
+  const [jailTime, setJailTime] = React.useState("");
   const ref = useModalOpen<HTMLInputElement>(ModalIds.EditPenalCode);
 
   React.useEffect(() => {
     if (!code) return;
 
     setTitle(code?.title);
     setDes(code?.des);
+    setJailTime(code.jail_time ?? "");
+    setFineAmount(code.fine_amount ?? "");
   }, [code]);
 
   async function onSubmit(e: React.FormEvent) {
@@ -32,6 +36,8 @@ const EditPenalCodeC: React.FC<Props> = ({ updatePenalCode, code }) => {
     const updated = await updatePenalCode(code?.id, {
       title,
       des,
+      jail_time: jailTime,
+      fine_amount: fineAmount,
     });
 
     if (updated === true) {
@@ -55,6 +61,30 @@ const EditPenalCodeC: React.FC<Props> = ({ updatePenalCode, code }) => {
               className="form-control bg-secondary border-secondary text-light"
             />
           </div>
+          <div className="mb-3">
+            <label className="form-label" htmlFor="code">
+              {lang.codes.jail_time}
+            </label>
+            <input
+              type="number"
+              id="add_jail_time"
+              value={jailTime}
+              onChange={(e) => setJailTime(e.currentTarget.value)}
+              className="form-control bg-secondary border-secondary text-light"
+            />
+          </div>
+          <div className="mb-3">
+            <label className="form-label" htmlFor="fine_amount">
+              {lang.codes.fine_amount}
+            </label>
+            <input
+              type="number"
+              id="fine_amount"
+              value={fineAmount}
+              onChange={(e) => setFineAmount(e.currentTarget.value)}
+              className="form-control bg-secondary border-secondary text-light"
+            />
+          </div>
           <div className="mb-3">
             <label className="form-label" htmlFor="code">
               {lang.global.description}

src/components/modals/leo/CreateArrestReportModal.tsx

@@ -9,9 +9,10 @@ import { Officer } from "types/Officer";
 import { Select, SelectValue } from "@components/Select/Select";
 import { PenalCode } from "types/PenalCode";
 import { ModalIds } from "types/ModalIds";
-import { modal } from "@lib/utils";
+import { getTotalJailTimeAndFineAmount, modal } from "@lib/utils";
 import { ArrestReport } from "types/Record";
 import { Name } from "@actions/officer/OfficerTypes";
+import { Item, Span } from "@components/Item";
 
 interface Props {
   officer: Officer | null;
@@ -30,10 +31,17 @@ const CreateArrestReportModalC: React.FC<Props> = ({
   creatArrestReport,
 }) => {
   const [name, setName] = React.useState<SelectValue | null>(null);
-  const [charges, setCharges] = React.useState([]);
+  const [charges, setCharges] = React.useState<SelectValue[]>([]);
   const [postal, setPostal] = React.useState("");
   const [notes, setNotes] = React.useState("");
   const [loading, setLoading] = React.useState(false);
+  const { fineAmount, jailTime } = React.useMemo(() => {
+    const codes = charges.map(
+      (c) => penalCodes.find((v) => v.title === c.value) ?? ({} as PenalCode),
+    );
+
+    return getTotalJailTimeAndFineAmount(codes);
+  }, [charges, penalCodes]);
 
   async function onSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -129,6 +137,20 @@ const CreateArrestReportModalC: React.FC<Props> = ({
         </div>
 
         <div className="modal-footer">
+          {jailTime ? (
+            <Item className="mx-0">
+              <>
+                <Span>{lang.codes.jail_time2}: </Span> {jailTime} {lang.codes.seconds}
+              </>
+            </Item>
+          ) : null}
+          {fineAmount ? (
+            <Item className="mx-5">
+              <>
+                <Span>{lang.codes.fine_amount2}: </Span> {fineAmount}
+              </>
+            </Item>
+          ) : null}
           <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">
             {lang.global.cancel}
           </button>