fixed equity subroutes

Author: stefanbinoj

frontend/app/(dashboardLayout)/equity/cap_table/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { CircleCheck } from "lucide-react";
-import { useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import React, { useMemo } from "react";
 import CopyButton from "@/components/CopyButton";
 import DataTable, { createColumnHelper, useTable } from "@/components/DataTable";
@@ -18,12 +18,15 @@ import {
 import type { RouterOutput } from "@/trpc";
 import { trpc } from "@/trpc/client";
 import { formatOwnershipPercentage } from "@/utils/numbers";
+import { PageHeader } from "@/components/layouts/PageHeader";
+import { navLinks } from "@/app/(dashboardLayout)/equity";
 
 type Data = RouterOutput["capTable"]["show"];
 
 export default function CapTable() {
   const company = useCurrentCompany();
   const searchParams = useSearchParams();
+  const pathname = usePathname();
   const newSchema = searchParams.get("new_schema") !== null;
   const [data] = trpc.capTable.show.useSuspenseQuery({ companyId: company.id, newSchema });
   const user = useCurrentUser();
@@ -156,9 +159,10 @@ export default function CapTable() {
   );
 
   const shareClassesTable = useTable({ data: shareClassesData, columns: shareClassesColumns });
-
+  const currentLink = navLinks(user, company).find((link) => link.route === pathname);
   return (
     <>
+      {currentLink && <PageHeader currentLink={currentLink} />}
       {selectedInvestors.length > 0 && (
         <Alert className="mb-4">
           <AlertDescription className="flex items-center justify-between">

frontend/app/(dashboardLayout)/equity/convertibles/page.tsx

@@ -8,6 +8,9 @@ import type { RouterOutput } from "@/trpc";
 import { trpc } from "@/trpc/client";
 import { formatMoney, formatMoneyFromCents } from "@/utils/formatMoney";
 import { formatDate } from "@/utils/time";
+import { navLinks } from "@/app/(dashboardLayout)/equity";
+import { usePathname } from "next/navigation";
+import { PageHeader } from "@/components/layouts/PageHeader";
 
 const columnHelper =
   createColumnHelper<RouterOutput["convertibleSecurities"]["list"]["convertibleSecurities"][number]>();
@@ -21,15 +24,18 @@ const columns = [
 export default function Convertibles() {
   const company = useCurrentCompany();
   const user = useCurrentUser();
+  const pathname = usePathname();
   const [data] = trpc.convertibleSecurities.list.useSuspenseQuery({
     companyId: company.id,
     investorId: user.roles.investor?.id ?? "",
   });
 
   const table = useTable({ columns, data: data.convertibleSecurities });
+  const currentLink = navLinks(user, company).find((link) => link.route === pathname);
 
   return (
     <>
+      {currentLink && <PageHeader currentLink={currentLink} />}
       {data.convertibleSecurities.length > 0 ? (
         <DataTable table={table} />
       ) : (

frontend/app/(dashboardLayout)/equity/dividend_rounds/[id]/layout.tsx

@@ -1,14 +1,14 @@
 "use client";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
-import React, { useEffect } from "react";
+import React from "react";
 import DividendStatusIndicator from "@/app/(dashboardLayout)/equity/DividendStatusIndicator";
 import DataTable, { createColumnHelper, useTable } from "@/components/DataTable";
 import { useCurrentCompany } from "@/global";
 import type { RouterOutput } from "@/trpc";
 import { trpc } from "@/trpc/client";
 import { formatMoneyFromCents } from "@/utils/formatMoney";
-import { useLayoutStore } from "@/components/layouts/LayoutStore";
+import { PageHeader } from "@/components/layouts/PageHeader";
 
 type Dividend = RouterOutput["dividends"]["list"][number];
 const rowLink = (row: Dividend) => `/people/${row.investor.user.id}?tab=dividends` as const;
@@ -41,12 +41,10 @@ export default function DividendRound() {
 
   const table = useTable({ columns, data });
 
-  const setTitle = useLayoutStore((state) => state.setTitle);
-  const setHeaderActions = useLayoutStore((state) => state.setHeaderActions);
-  useEffect(() => {
-    setTitle("Dividend");
-    setHeaderActions(null);
-  }, []);
-
-  return <DataTable table={table} onRowClicked={(row) => router.push(rowLink(row))} />;
+  return (
+    <>
+      <PageHeader title={"Dividend"} />
+      <DataTable table={table} onRowClicked={(row) => router.push(rowLink(row))} />
+    </>
+  );
 }

frontend/app/(dashboardLayout)/equity/dividend_rounds/[id]/page.tsx

@@ -1,15 +1,17 @@
 "use client";
 import { CircleCheck } from "lucide-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import React from "react";
 import DataTable, { createColumnHelper, useTable } from "@/components/DataTable";
 import Placeholder from "@/components/Placeholder";
-import { useCurrentCompany } from "@/global";
+import { useCurrentCompany, useCurrentUser } from "@/global";
 import type { RouterOutput } from "@/trpc";
 import { trpc } from "@/trpc/client";
 import { formatMoneyFromCents } from "@/utils/formatMoney";
 import { formatDate } from "@/utils/time";
+import { navLinks } from "@/app/(dashboardLayout)/equity";
+import { PageHeader } from "@/components/layouts/PageHeader";
 
 type DividendRound = RouterOutput["dividendRounds"]["list"][number];
 const columnHelper = createColumnHelper<DividendRound>();
@@ -29,12 +31,15 @@ const columns = [
 export default function DividendRounds() {
   const company = useCurrentCompany();
   const router = useRouter();
+  const user = useCurrentUser();
+  const pathname = usePathname();
   const [dividendRounds] = trpc.dividendRounds.list.useSuspenseQuery({ companyId: company.id });
-
   const table = useTable({ columns, data: dividendRounds });
+  const currentLink = navLinks(user, company).find((link) => link.route === pathname);
 
   return (
     <>
+      {currentLink && <PageHeader currentLink={currentLink} />}
       {dividendRounds.length > 0 ? (
         <DataTable table={table} onRowClicked={(row) => router.push(`/equity/dividend_rounds/${row.id}`)} />
       ) : (

frontend/app/(dashboardLayout)/equity/dividend_rounds/page.tsx

@@ -30,11 +30,15 @@ import { Separator } from "@/components/ui/separator";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import RichText from "@/components/RichText";
 import MutationButton from "@/components/MutationButton";
+import { navLinks } from "@/app/(dashboardLayout)/equity";
+import { usePathname } from "next/navigation";
+import { PageHeader } from "@/components/layouts/PageHeader";
 
 type Dividend = RouterOutput["dividends"]["list"][number];
 const columnHelper = createColumnHelper<Dividend>();
 export default function Dividends() {
   const company = useCurrentCompany();
+  const pathname = usePathname();
   const user = useCurrentUser();
   const [data, { refetch }] = trpc.dividends.list.useSuspenseQuery({
     companyId: company.id,
@@ -114,9 +118,10 @@ export default function Dividends() {
     [],
   );
   const table = useTable({ columns, data });
-
+  const currentLink = navLinks(user, company).find((link) => link.route === pathname);
   return (
     <>
+      {currentLink && <PageHeader currentLink={currentLink} />}
       {!user.legalName ? (
         <Alert>
           <Info />

frontend/app/(dashboardLayout)/equity/dividends/page.tsx

@@ -1,14 +1,14 @@
 "use client";
 import { CircleCheck, CircleAlert, Pencil, Info } from "lucide-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import DataTable, { createColumnHelper, useTable } from "@/components/DataTable";
 import { linkClasses } from "@/components/Link";
 import Placeholder from "@/components/Placeholder";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { DocumentTemplateType } from "@/db/enums";
-import { useCurrentCompany } from "@/global";
+import { useCurrentCompany, useCurrentUser } from "@/global";
 import type { RouterOutput } from "@/trpc";
 import { trpc } from "@/trpc/client";
 import { formatMoney } from "@/utils/formatMoney";
@@ -23,12 +23,15 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import MutationButton from "@/components/MutationButton";
-import { useLayoutStore } from "@/components/layouts/LayoutStore";
+import { navLinks } from "@/app/(dashboardLayout)/equity";
+import { PageHeader } from "@/components/layouts/PageHeader";
 type EquityGrant = RouterOutput["equityGrants"]["list"][number];
 
 export default function GrantsPage() {
   const router = useRouter();
   const company = useCurrentCompany();
+  const user = useCurrentUser();
+  const pathname = usePathname();
   const [data, { refetch }] = trpc.equityGrants.list.useSuspenseQuery({ companyId: company.id });
   const [cancellingGrantId, setCancellingGrantId] = useState<string | null>(null);
   const cancellingGrant = data.find((grant) => grant.id === cancellingGrantId);
@@ -76,7 +79,7 @@ export default function GrantsPage() {
     type: DocumentTemplateType.EquityPlanContract,
     signable: true,
   });
-  const setHeaderActions = useLayoutStore((state) => state.setHeaderActions);
+  const [headerActions, setHeaderActions] = useState<React.ReactNode>(null);
   useEffect(() => {
     setHeaderActions(
       equityPlanContractTemplates.length > 0 ? (
@@ -86,14 +89,14 @@ export default function GrantsPage() {
             New option grant
           </Link>
         </Button>
-      ) : (
-        <Button>jjj</Button>
-      ),
+      ) : null,
     );
   }, [equityPlanContractTemplates.length]);
+  const currentLink = navLinks(user, company).find((link) => link.route === pathname);
 
   return (
     <>
+      {currentLink && <PageHeader currentLink={currentLink} headerActions={headerActions} />}
       {equityPlanContractTemplates.length === 0 ? (
         <Alert>
           <Info />

frontend/app/(dashboardLayout)/equity/grants/page.tsx

@@ -4,9 +4,12 @@ import React from "react";
 import DataTable, { createColumnHelper, useTable } from "@/components/DataTable";
 import Placeholder from "@/components/Placeholder";
 import { Progress } from "@/components/ui/progress";
-import { useCurrentCompany } from "@/global";
+import { useCurrentCompany, useCurrentUser } from "@/global";
 import type { RouterOutput } from "@/trpc";
 import { trpc } from "@/trpc/client";
+import { usePathname } from "next/navigation";
+import { navLinks } from "@/app/(dashboardLayout)/equity";
+import { PageHeader } from "@/components/layouts/PageHeader";
 
 type OptionPool = RouterOutput["optionPools"]["list"][number];
 
@@ -26,12 +29,16 @@ const columns = [
 
 export default function OptionPools() {
   const company = useCurrentCompany();
+  const user = useCurrentUser();
+  const pathname = usePathname();
   const [data] = trpc.optionPools.list.useSuspenseQuery({ companyId: company.id });
 
   const table = useTable({ columns, data });
+  const currentLink = navLinks(user, company).find((link) => link.route === pathname);
 
   return (
     <>
+      {currentLink && <PageHeader currentLink={currentLink} />}
       {data.length > 0 ? (
         <DataTable table={table} />
       ) : (

frontend/app/(dashboardLayout)/equity/layout.tsx

@@ -17,8 +17,10 @@ import DetailsModal from "@/app/(dashboardLayout)/equity/grants/DetailsModal";
 import ExerciseModal from "@/app/(dashboardLayout)/equity/grants/ExerciseModal";
 import type { RouterOutput } from "@/trpc";
 import { resend_company_equity_grant_exercise_path } from "@/utils/routes";
-import { forbidden } from "next/navigation";
+import { forbidden, usePathname } from "next/navigation";
 import { CircleCheck, Info } from "lucide-react";
+import { navLinks } from "@/app/(dashboardLayout)/equity";
+import { PageHeader } from "@/components/layouts/PageHeader";
 const pluralizeGrants = (number: number) => `${number} ${pluralize("stock option grant", number)}`;
 
 type EquityGrant = RouterOutput["equityGrants"]["list"][number];
@@ -39,6 +41,7 @@ const investorGrantColumns = [
 export default function OptionsPage() {
   const company = useCurrentCompany();
   const user = useCurrentUser();
+  const pathname = usePathname();
   if (!user.roles.investor) forbidden();
   const [data] = trpc.equityGrants.list.useSuspenseQuery({
     companyId: company.id,
@@ -91,9 +94,11 @@ export default function OptionsPage() {
     },
     onSuccess: () => setTimeout(() => resendPaymentInstructions.reset(), 5000),
   });
+  const currentLink = navLinks(user, company).find((link) => link.route === pathname);
 
   return (
     <>
+      {currentLink && <PageHeader currentLink={currentLink} />}
       {data.length === 0 ? (
         <Placeholder icon={CircleCheck}>You don't have any option grants right now.</Placeholder>
       ) : (