Merge pull request #331 from captableinc/feat/create-share-page

feat: Allocate shares to stakeholders

biome.json

@@ -7,7 +7,8 @@
  ".next",
  "dist",
  "public/pdf.worker.min.js",
- "./prisma/enums.ts"
+ "./prisma/enums.ts",
+ "./src/components/ui/simple-multi-select.tsx"
  ]
  },
  "linter": {
@@ -25,7 +26,8 @@
  ".next",
  "dist",
  "public/pdf.worker.min.js",
- "./prisma/enums.ts"
+ "./prisma/enums.ts",
+ "./src/components/ui/simple-multi-select.tsx"
  ]
  },
  "formatter": {

prisma/migrations/20240531045514_uniq_certificate_on_share/migration.sql

@@ -0,0 +1,8 @@
+/*
+ Warnings:
+
+ - A unique constraint covering the columns `[companyId,certificateId]` on the table `Share` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Share_companyId_certificateId_key" ON "Share"("companyId", "certificateId");

prisma/schema.prisma

@@ -659,6 +659,7 @@ model Share {
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
 
+ @@unique([companyId, certificateId])
  @@index([companyId])
  @@index([shareClassId])
  @@index([stakeholderId])

src/app/(authenticated)/(dashboard)/[publicId]/securities/options/page.tsx

@@ -24,15 +24,7 @@ const OptionsPage = async () => {
  >
  <OptionModal
  title="Create an option"
- subtitle={
- <Tldr
- message="Please fill in the details to create an option. If you need help, click the link below."
- cta={{
- label: "Learn more",
- href: "https://captable.inc/help/stakeholder-options",
- }}
- />
- }
+ subtitle="Please fill in the details to create an option."
  trigger={
  <Button size="lg">
  <RiAddFill className="mr-2 h-5 w-5" />

src/app/(authenticated)/(dashboard)/[publicId]/securities/shares/page.tsx

@@ -1,21 +1,69 @@
 import EmptyState from "@/components/common/empty-state";
+import Tldr from "@/components/common/tldr";
+import { ShareModal } from "@/components/securities/shares/share-modal";
+import ShareTable from "@/components/securities/shares/share-table";
 import { Button } from "@/components/ui/button";
-import { RiPieChartFill } from "@remixicon/react";
-import { type Metadata } from "next";
+import { Card } from "@/components/ui/card";
+import { api } from "@/trpc/server";
+import { RiAddFill, RiPieChartFill } from "@remixicon/react";
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
- title: "Cap table",
+ title: "Captable | Shares",
 };
 
-const SharesPage = () => {
+const SharesPage = async () => {
+ const shares = await api.securities.getShares.query();
+
+ if (shares?.data?.length === 0) {
+ return (
+ <EmptyState
+ icon={<RiPieChartFill />}
+ title="You have not issued any shares"
+ subtitle="Please click the button below to start issuing shares."
+ >
+ <ShareModal
+ size="4xl"
+ title="Create a share"
+ subtitle="Please fill in the details to create and issue a share."
+ trigger={
+ <Button size="lg">
+ <RiAddFill className="mr-2 h-5 w-5" />
+ Create a share
+ </Button>
+ }
+ />
+ </EmptyState>
+ );
+ }
+
  return (
- <EmptyState
- icon={<RiPieChartFill />}
- title="Work in progress."
- subtitle="This page is not yet available."
- >
- <Button size="lg">Coming soon...</Button>
- </EmptyState>
+ <div className="flex flex-col gap-y-3">
+ <div className="flex items-center justify-between gap-y-3 ">
+ <div className="gap-y-3">
+ <h3 className="font-medium">Shares</h3>
+ <p className="mt-1 text-sm text-muted-foreground">
+ Issue shares to stakeholders
+ </p>
+ </div>
+ <div>
+ <ShareModal
+ size="4xl"
+ title="Create a share"
+ subtitle="Please fill in the details to create and issue a share."
+ trigger={
+ <Button>
+ <RiAddFill className="mr-2 h-5 w-5" />
+ Create a share
+ </Button>
+ }
+ />
+ </div>
+ </div>
+ <Card className="mx-auto mt-3 w-[28rem] sm:w-[38rem] md:w-full">
+ <ShareTable shares={shares.data} />
+ </Card>
+ </div>
  );
 };
 

src/app/(authenticated)/(dashboard)/[publicId]/settings/company/page.tsx

@@ -1,6 +1,6 @@
 import { CompanyForm } from "@/components/onboarding/company-form";
 import { api } from "@/trpc/server";
-import { type Metadata } from "next";
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
  title: "Company",

src/components/common/LoadingSpinner.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils";
+
+export interface ISVGProps extends React.SVGProps<SVGSVGElement> {
+ size?: number;
+ className?: string;
+}
+
+export const LoadingSpinner = ({
+ size = 24,
+ className,
+ ...props
+}: ISVGProps) => {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={size}
+ height={size}
+ {...props}
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className={cn("animate-spin", className)}
+ >
+ <title>Loading</title>
+ <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+ </svg>
+ );
+};

src/components/onboarding/company-form.tsx

@@ -82,6 +82,7 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
  state: data?.company.state ?? "",
  streetAddress: data?.company.streetAddress ?? "",
  zipcode: data?.company.zipcode ?? "",
+ country: data?.company.country ?? "",
  },
  },
  });

src/components/securities/options/steps/vesting-details.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import {
  Form,
@@ -31,6 +30,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { NumericFormat } from "react-number-format";
 import { z } from "zod";
+import { EmptySelect } from "../../shared/EmptySelect";
 
 const formSchema = z.object({
  equityPlanId: z.string(),
@@ -46,20 +46,6 @@ interface VestingDetailsProps {
  equityPlans: RouterOutputs["equityPlan"]["getPlans"];
 }
 
-interface EmptySelectProps {
- title: string;
- description: string;
-}
-
-function EmptySelect({ title, description }: EmptySelectProps) {
- return (
- <Alert variant="destructive">
- <AlertTitle>{title}</AlertTitle>
- <AlertDescription>{description}</AlertDescription>
- </Alert>
- );
-}
-
 export const VestingDetails = (props: VestingDetailsProps) => {
  const { stakeholders, equityPlans } = props;
 

src/components/securities/shared/EmptySelect.tsx

@@ -0,0 +1,15 @@
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+interface EmptySelectProps {
+ title: string;
+ description: string;
+}
+
+export function EmptySelect({ title, description }: EmptySelectProps) {
+ return (
+ <Alert variant="destructive">
+ <AlertTitle>{title}</AlertTitle>
+ <AlertDescription>{description}</AlertDescription>
+ </Alert>
+ );
+}

src/components/securities/shares/data.tsx

@@ -0,0 +1,7 @@
+import { SecuritiesStatusEnum } from "@prisma/client";
+import { capitalize } from "lodash-es";
+
+export const statusValues = Object.keys(SecuritiesStatusEnum).map((item) => ({
+ label: capitalize(item),
+ value: item,
+}));

src/components/securities/shares/share-modal.tsx

@@ -0,0 +1,51 @@
+import {
+ StepperModal,
+ StepperModalContent,
+ type StepperModalProps,
+ StepperStep,
+} from "@/components/ui/stepper";
+import { AddShareFormProvider } from "@/providers/add-share-form-provider";
+import { api } from "@/trpc/server";
+import { ContributionDetails } from "./steps/contribution-details";
+import { Documents } from "./steps/documents";
+import { GeneralDetails } from "./steps/general-details";
+import { RelevantDates } from "./steps/relevant-dates";
+
+async function ContributionDetailsStep() {
+ const stakeholders = await api.stakeholder.getStakeholders.query();
+ return <ContributionDetails stakeholders={stakeholders} />;
+}
+
+async function GeneralDetailsStep() {
+ const shareClasses = await api.shareClass.get.query();
+ return <GeneralDetails shareClasses={shareClasses} />;
+}
+
+export const ShareModal = (props: Omit<StepperModalProps, "children">) => {
+ return (
+ <StepperModal {...props}>
+ <AddShareFormProvider>
+ <StepperStep title="General details">
+ <StepperModalContent>
+ <GeneralDetailsStep />
+ </StepperModalContent>
+ </StepperStep>
+ <StepperStep title="Contribution details">
+ <StepperModalContent>
+ <ContributionDetailsStep />
+ </StepperModalContent>
+ </StepperStep>
+ <StepperStep title="Relevant dates">
+ <StepperModalContent>
+ <RelevantDates />
+ </StepperModalContent>
+ </StepperStep>
+ <StepperStep title="Documents">
+ <StepperModalContent>
+ <Documents />
+ </StepperModalContent>
+ </StepperStep>
+ </AddShareFormProvider>
+ </StepperModal>
+ );
+};

src/components/securities/shares/share-table-toolbar.tsx

@@ -0,0 +1,48 @@
+import { useDataTable } from "@/components/ui/data-table/data-table";
+import { ResetButton } from "@/components/ui/data-table/data-table-buttons";
+import { DataTableFacetedFilter } from "@/components/ui/data-table/data-table-faceted-filter";
+import { DataTableViewOptions } from "@/components/ui/data-table/data-table-view-options";
+import { Input } from "@/components/ui/input";
+import { statusValues } from "./data";
+
+export function ShareTableToolbar() {
+ const { table } = useDataTable();
+ const isFiltered = table.getState().columnFilters.length > 0;
+
+ return (
+ <div className="flex w-full items-center justify-between">
+ <div className="flex flex-col gap-2 sm:flex-1 sm:flex-row sm:items-center sm:gap-0 sm:space-x-2">
+ <Input
+ placeholder="Search by stakeholder name..."
+ value={
+ (table.getColumn("stakeholderName")?.getFilterValue() as string) ??
+ ""
+ }
+ onChange={(event) =>
+ table
+ .getColumn("stakeholderName")
+ ?.setFilterValue(event.target.value)
+ }
+ className="h-8 w-64"
+ />
+ <div className="space-x-2">
+ {table.getColumn("status") && (
+ <DataTableFacetedFilter
+ column={table.getColumn("status")}
+ title="Status"
+ options={statusValues}
+ />
+ )}
+
+ {isFiltered && (
+ <ResetButton
+ className="p-1"
+ onClick={() => table.resetColumnFilters()}
+ />
+ )}
+ </div>
+ </div>
+ <DataTableViewOptions />
+ </div>
+ );
+}