feat(invoice form): added new invoice form

frontend/src/components/navBar/ForkliftSideBar.tsx

@@ -37,7 +37,7 @@ export default function ForkliftSideBar() {
 		},
 		{
 			title: "Invoices",
-			url: "/lst/app/admin/settings",
+			url: "/lst/app/forklifts/invoices",
 			icon: ReceiptText,
 			role: ["systemAdmin", "admin", "manager"],
 			module: "forklifts",

frontend/src/components/navBar/Nav.tsx

@@ -1,6 +1,7 @@
 import { Link, useRouterState } from "@tanstack/react-router";
 import { useState } from "react";
 import NewCompanyForm from "@/routes/_app/_forklifts/-components/NewCompany";
+import NewInvoice from "@/routes/_app/_forklifts/-components/NewInvoice";
 import NewLeaseForm from "@/routes/_app/_forklifts/-components/NewLease";
 import { useAuth, useLogout } from "../../lib/authClient";
 import { ModeToggle } from "../mode-toggle";
@@ -23,6 +24,7 @@ export default function Nav() {
 	const currentPath = router.location.href;
 	const [openDialog, setOpenDialog] = useState(false);
 	const [openLeaseDialog, setOpenLeaseDialog] = useState(false);
+	const [openInvoiceDialog, setOpenInvoiceDialog] = useState(false);
 	return (
 		<nav className="flex justify-end w-full shadow ">
 			<div className="m-2 flex flex-row gap-1">
@@ -65,6 +67,14 @@ export default function Nav() {
 									>
 										New Lease
 									</DropdownMenuItem>
+									<DropdownMenuItem
+										onSelect={() => {
+											// just open the dialog when clicked
+											setOpenInvoiceDialog(true);
+										}}
+									>
+										New Invoice
+									</DropdownMenuItem>
 								</DropdownMenuContent>
 							</DropdownMenu>
 							{/* Company */}
@@ -85,6 +95,16 @@ export default function Nav() {
 									</DialogContent>
 								</Dialog>
 							)}
+							{openInvoiceDialog && (
+								<Dialog
+									open={openInvoiceDialog}
+									onOpenChange={setOpenInvoiceDialog}
+								>
+									<DialogContent className="sm:max-w-fit">
+										<NewInvoice setOpenInvoiceDialog={setOpenInvoiceDialog} />
+									</DialogContent>
+								</Dialog>
+							)}
 						</>
 					)}
 				</div>