feat: render share classes on a table (#112)

* feat: update share class page

* feat: update share class form

* feat: more updates to share class page

* chore: make error message smaller and lighter

* feat: create share class table

* chore: update typeof ShareClass

* fix: build warning about sharp

package.json

@@ -68,6 +68,7 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.3",
     "server-only": "^0.0.1",
+    "sharp": "^0.33.2",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",

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

@@ -19,7 +19,7 @@ const OverviewPage = ({
         </p>
       </header>
 
-      <div className="grid  gap-8 md:grid-cols-12">
+      <div className="grid gap-8 md:grid-cols-12">
         <div className="sm:col-span-12 md:col-span-6 lg:col-span-8">
           {/* Overview */}
           <section className="mt-6">

src/app/(authenticated)/(dashboard)/[publicId]/share-classes/components/form.tsx

@@ -110,7 +110,8 @@ const ShareClassForm = ({
                 Basic Information:
               </h2>
               <p className="mt-1 text-sm leading-6 text-gray-600">
-                Let{`'`}s start with share class name and type.
+                Let{`'`}s start with share class name, type of share and
+                authorized number of shares.
               </p>
             </div>
 
@@ -184,8 +185,9 @@ const ShareClassForm = ({
                 Financial Details:
               </h2>
               <p className="mt-1 text-sm leading-6 text-gray-600">
-                Specify votes per share, par value, and price per share to
-                outline the financial characteristics of the Share Class.
+                Please provide the number of votes each share carries, mention
+                the par value, and state the price per share to describe the
+                financial features of the share class.
               </p>
             </div>
 
@@ -296,7 +298,7 @@ const ShareClassForm = ({
               <p className="mt-1 text-sm leading-6 text-gray-600">
                 Specify seniority, conversion rights, and participation cap
                 multiples to highlight conversion options and preferences for
-                the Share Class.
+                the share class.
               </p>
             </div>
 

src/app/(authenticated)/(dashboard)/[publicId]/share-classes/page.tsx

@@ -1,27 +1,78 @@
-"use client";
 import Link from "next/link";
-import { useParams } from "next/navigation";
+import { db } from "@/server/db";
+import ShareClassTable from "./table";
+import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import type { ShareClass } from "@prisma/client";
+import { withServerSession } from "@/server/auth";
 import EmptyState from "@/components/shared/empty-state";
 import { RiPieChart2Line, RiAddFill } from "@remixicon/react";
 
-const SharesPage = () => {
-  const params = useParams<{ publicId: string }>();
-  const publicCompanyId = params.publicId;
+type SharesPageParams = {
+  params: {
+    publicId: string;
+  };
+};
+
+const getShareClasses = async (companyId: string) => {
+  return await db.shareClass.findMany({
+    where: { companyId },
+  });
+};
+
+const SharesPage = async ({ params }: SharesPageParams) => {
+  const { publicId } = params;
+  const session = await withServerSession();
+  const companyId = session?.user?.companyId;
+  let shareClasses: ShareClass[] = [];
+
+  if (companyId) {
+    shareClasses = await getShareClasses(companyId);
+  }
+
+  if (shareClasses.length === 0) {
+    return (
+      <EmptyState
+        icon={<RiPieChart2Line />}
+        title="You do not have any share classes!"
+        subtitle="Please click the button below to create a new share class."
+      >
+        <Link href={`/${publicId}/share-classes/new`} passHref>
+          <Button size="lg">
+            <RiAddFill className="mr-2 h-5 w-5" />
+            Create a share class
+          </Button>
+        </Link>
+      </EmptyState>
+    );
+  }
 
   return (
-    <EmptyState
-      icon={<RiPieChart2Line />}
-      title="You do not have any share classes!"
-      subtitle="Please click the button below to create a new share class."
-    >
-      <Link href={`/${publicCompanyId}/share-classes/new`} passHref>
-        <Button size="lg">
-          <RiAddFill className="mr-2 h-5 w-5" />
-          Create a share class
-        </Button>
-      </Link>
-    </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">Share classes</h3>
+          <p className="text-sm text-muted-foreground">
+            Manage the share classes for your company
+          </p>
+        </div>
+
+        <div>
+          <Link href={`/${publicId}/share-classes/new`} passHref>
+            <Button>
+              <RiAddFill className="mr-2 h-5 w-5" />
+              Create a share class
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <Card className="mt-3">
+        <div className="p-6">
+          <ShareClassTable shareClasses={shareClasses} />
+        </div>
+      </Card>
+    </div>
   );
 };
 

src/app/(authenticated)/(dashboard)/[publicId]/share-classes/table.tsx

@@ -0,0 +1,58 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import { Card } from "@/components/ui/card";
+import type { ShareClass } from "@prisma/client";
+const formatter = new Intl.NumberFormat("en-US");
+import { RiEqualizer2Line } from "@remixicon/react";
+
+type ShareClassTableProps = {
+  shareClasses: ShareClass[];
+};
+
+const ShareClassTable = ({ shareClasses }: ShareClassTableProps) => {
+  return (
+    <Card>
+      <Table className="">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Type</TableHead>
+            <TableHead>Authorized shares</TableHead>
+            <TableHead>Board approval date</TableHead>
+            <TableHead>Stockholder approval date</TableHead>
+            <TableHead></TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {shareClasses.map((klass) => (
+            <TableRow key={klass.id} className="border-none">
+              <TableCell className="font-medium">{klass.name}</TableCell>
+              <TableCell>{klass.classType}</TableCell>
+              <TableCell>
+                {formatter.format(klass.initialSharesAuthorized)}
+              </TableCell>
+              <TableCell>{`${new Date(
+                klass.boardApprovalDate,
+              ).toLocaleDateString("en-US")}`}</TableCell>
+              <TableCell>{`${new Date(
+                klass.stockholderApprovalDate,
+              ).toLocaleDateString("en-US")}`}</TableCell>
+              <TableCell>
+                <RiEqualizer2Line className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700" />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Card>
+  );
+};
+
+export default ShareClassTable;

src/components/ui/form.tsx

@@ -156,7 +156,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+      className={cn("text-xs font-light text-destructive", className)}
       {...props}
     >
       {body}