fix: Share classes are missing on these select inputs

Fixes #118
captableinc · Feb 9, 2024 · c5c6910 · c5c6910
1 parent 502bdd1
commit c5c6910
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 11 deletions.
diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/form.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/form.tsx
@@ -8,6 +8,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/use-toast";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { type ShareClassMutationType } from "@/trpc/routers/share-class/schema";
 
 import {
   EquityPlanMutationSchema,
@@ -40,12 +41,14 @@ type EquityFormType = {
   className?: string;
   setOpen: (val: boolean) => void;
   equityPlan?: EquityPlanMutationType;
+  shareClasses: ShareClassMutationType[];
 };
 
 const EquityPlanForm = ({
   setOpen,
   className,
   type = "create",
+  shareClasses,
   equityPlan = {
     id: "",
     name: "",
@@ -214,8 +217,20 @@ const EquityPlanForm = ({
                     </FormControl>
                     <SelectContent>
                       <SelectGroup>
-                        <SelectLabel>No share classes</SelectLabel>
-                        {/* <SelectItem value="xxxxxx">xxxxxx</SelectItem> */}
+                        <SelectLabel>
+                          {shareClasses.length > 0
+                            ? "Share classes"
+                            : "No share classes"}
+                        </SelectLabel>
+
+                        {shareClasses.map((shareClass) => (
+                          <SelectItem
+                            key={shareClass.id}
+                            value={shareClass.id!}
+                          >
+                            {shareClass.name}
+                          </SelectItem>
+                        ))}
                       </SelectGroup>
                     </SelectContent>
                   </Select>

diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/modal.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/modal.tsx
@@ -4,20 +4,23 @@ import { useState } from "react";
 import EquityPlanForm from "./form";
 import Modal from "@/components/shared/modal";
 import { type EquityPlanMutationType } from "@/trpc/routers/equity-plan/schema";
+import { type ShareClassMutationType } from "@/trpc/routers/share-class/schema";
 
 type EquityPlanType = {
   type: string;
   title: string | React.ReactNode;
   subtitle: string | React.ReactNode;
   trigger: React.ReactNode;
   equityPlan?: EquityPlanMutationType;
+  shareClasses: ShareClassMutationType[];
 };
 
 const EquityPlanModal = ({
   title,
   subtitle,
   trigger,
   equityPlan,
+  shareClasses,
   type = "create",
 }: EquityPlanType) => {
   const [open, setOpen] = useState(false);
@@ -35,7 +38,12 @@ const EquityPlanModal = ({
         },
       }}
     >
-      <EquityPlanForm type={type} setOpen={setOpen} equityPlan={equityPlan} />
+      <EquityPlanForm
+        type={type}
+        setOpen={setOpen}
+        equityPlan={equityPlan}
+        shareClasses={shareClasses}
+      />
     </Modal>
   );
 };

diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/page.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/page.tsx
@@ -8,13 +8,20 @@ import { withServerSession } from "@/server/auth";
 import EmptyState from "@/components/shared/empty-state";
 import { RiPieChart2Line, RiAddFill } from "@remixicon/react";
 import { type EquityPlanMutationType } from "@/trpc/routers/equity-plan/schema";
+import { type ShareClassMutationType } from "@/trpc/routers/share-class/schema";
 
 const getEquityPlans = async (companyId: string) => {
   return await db.equityPlan.findMany({
     where: { companyId },
   });
 };
 
+const getShareClasses = async (companyId: string) => {
+  return await db.shareClass.findMany({
+    where: { companyId },
+  });
+};
+
 const EquityPlanPage = async () => {
   const session = await withServerSession();
   const companyId = session?.user?.companyId;
@@ -26,6 +33,10 @@ const EquityPlanPage = async () => {
     )) as unknown as EquityPlanMutationType[];
   }
 
+  const shareClasses: ShareClassMutationType[] = (await getShareClasses(
+    companyId,
+  )) as unknown as ShareClassMutationType[];
+
   if (equityPlans.length === 0) {
     return (
       <EmptyState
@@ -36,6 +47,7 @@ const EquityPlanPage = async () => {
         <EquityPlanModal
           type="create"
           title="Create an equity plan"
+          shareClasses={shareClasses}
           subtitle={
             <Tldr
               message="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."
@@ -71,6 +83,7 @@ const EquityPlanPage = async () => {
           <EquityPlanModal
             type="create"
             title="Create an equity plan"
+            shareClasses={shareClasses}
             subtitle={
               <Tldr
                 message="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."
@@ -93,7 +106,10 @@ const EquityPlanPage = async () => {
 
       <Card className="mt-3">
         <div className="p-6">
-          <EquityPlanTable equityPlans={equityPlans} />
+          <EquityPlanTable
+            equityPlans={equityPlans}
+            shareClasses={shareClasses}
+          />
         </div>
       </Card>
     </div>

diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/table.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/table.tsx
@@ -14,9 +14,11 @@ import type { EquityPlan } from "@prisma/client";
 const formatter = new Intl.NumberFormat("en-US");
 import { RiEqualizer2Line } from "@remixicon/react";
 import { type EquityPlanMutationType } from "@/trpc/routers/equity-plan/schema";
+import { type ShareClassMutationType } from "@/trpc/routers/share-class/schema";
 
 type EquityPlanTableProps = {
   equityPlans: EquityPlanMutationType[];
+  shareClasses: ShareClassMutationType[];
 };
 
 const getCancelationBehavior = (behavior: string) => {
@@ -34,7 +36,10 @@ const getCancelationBehavior = (behavior: string) => {
   }
 };
 
-const EquityPlanTable = ({ equityPlans }: EquityPlanTableProps) => {
+const EquityPlanTable = ({
+  equityPlans,
+  shareClasses,
+}: EquityPlanTableProps) => {
   return (
     <Card>
       <Table className="">
@@ -74,6 +79,7 @@ const EquityPlanTable = ({ equityPlans }: EquityPlanTableProps) => {
                   type="update"
                   title="Update an equity plan"
                   equityPlan={plan}
+                  shareClasses={shareClasses}
                   subtitle={
                     <Tldr
                       message="Equity plans are used to distribute ownership of your company using stock options, RSUs, and other instruments among employees and stakeholders."

diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/share-classes/form.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/share-classes/form.tsx
@@ -42,12 +42,14 @@ type ShareClassFormType = {
   className?: string;
   setOpen: (val: boolean) => void;
   shareClass?: ShareClassMutationType;
+  shareClasses: ShareClassMutationType[];
 };
 
 const ShareClassForm = ({
   setOpen,
   className,
   type = "create",
+  shareClasses,
   shareClass = {
     id: "",
     name: "",
@@ -78,7 +80,7 @@ const ShareClassForm = ({
   const [renderShareClassInput, setRenderShareClassInput] = useState(false);
 
   useEffect(() => {
-    if (watchConversionRights === "convertsToStockClassId") {
+    if (watchConversionRights === "convertsToShareClassId") {
       setRenderShareClassInput(true);
     } else {
       setRenderShareClassInput(false);
@@ -361,7 +363,7 @@ const ShareClassForm = ({
                       </FormItem>
                       <FormItem className="flex items-center space-x-3 space-y-0">
                         <FormControl>
-                          <RadioGroupItem value="convertsToStockClassId" />
+                          <RadioGroupItem value="convertsToShareClassId" />
                         </FormControl>
                         <FormLabel className="font-normal">
                           Converts to specific share class
@@ -377,7 +379,7 @@ const ShareClassForm = ({
 
           <div className="sm:col-span-3">
             {
-              // if conversionRights === "convertsToStockClassId"
+              // if conversionRights === "convertsToShareClassId"
               renderShareClassInput && (
                 <div className="sm:col-span-3">
                   <FormField
@@ -397,8 +399,20 @@ const ShareClassForm = ({
                           </FormControl>
                           <SelectContent>
                             <SelectGroup>
-                              <SelectLabel>No share classes</SelectLabel>
-                              {/* <SelectItem value="xxxxxx">xxxxxx</SelectItem> */}
+                              <SelectLabel>
+                                {shareClasses.length > 0
+                                  ? "Share classes"
+                                  : "No share classes"}
+                              </SelectLabel>
+
+                              {shareClasses.map((shareClass) => (
+                                <SelectItem
+                                  key={shareClass.id}
+                                  value={shareClass.id!}
+                                >
+                                  {shareClass.name}
+                                </SelectItem>
+                              ))}
                             </SelectGroup>
                           </SelectContent>
                         </Select>

diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/share-classes/modal.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/share-classes/modal.tsx
@@ -11,13 +11,15 @@ type ShareClassType = {
   subtitle: string | React.ReactNode;
   trigger: React.ReactNode;
   shareClass?: ShareClassMutationType;
+  shareClasses: ShareClassMutationType[];
 };
 
 const ShareClassModal = ({
   title,
   subtitle,
   trigger,
   shareClass,
+  shareClasses,
   type = "create",
 }: ShareClassType) => {
   const [open, setOpen] = useState(false);
@@ -35,7 +37,12 @@ const ShareClassModal = ({
         },
       }}
     >
-      <ShareClassForm type={type} setOpen={setOpen} shareClass={shareClass} />
+      <ShareClassForm
+        type={type}
+        setOpen={setOpen}
+        shareClass={shareClass}
+        shareClasses={shareClasses}
+      />
     </Modal>
   );
 };

diff --git a/src/app/(authenticated)/(dashboard)/[publicId]/share-classes/page.tsx b/src/app/(authenticated)/(dashboard)/[publicId]/share-classes/page.tsx
@@ -79,6 +79,7 @@ const SharesPage = async ({ params }: SharesPageParams) => {
           <ShareClassModal
             type="create"
             title="Create a share class"
+            shareClasses={shareClasses}
             subtitle={
               <Tldr
                 message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."