feat: add server side pagination and filteration

package.json

@@ -67,13 +67,13 @@
     "@sindresorhus/slugify": "^2.2.1",
     "@stripe/stripe-js": "^4.1.0",
     "@t3-oss/env-nextjs": "^0.10.1",
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "^5.53.3",
     "@tanstack/react-table": "^8.20.1",
     "@tremor/react": "^3.17.4",
-    "@trpc/client": "^10.43.6",
-    "@trpc/next": "^10.45.2",
-    "@trpc/react-query": "^10.43.6",
-    "@trpc/server": "^10.43.6",
+    "@trpc/client": "11.0.0-rc.498",
+    "@trpc/next": "11.0.0-rc.498",
+    "@trpc/react-query": "11.0.0-rc.498",
+    "@trpc/server": "11.0.0-rc.498",
     "@types/bcryptjs": "^2.4.6",
     "@types/papaparse": "^5.3.14",
     "@wojtekmaj/react-hooks": "^1.20.0",
@@ -94,6 +94,7 @@
     "next-auth": "^4.24.7",
     "next-nprogress-bar": "^2.3.13",
     "nodemailer": "^6.9.14",
+    "nuqs": "^1.17.8",
     "papaparse": "^5.4.1",
     "pdf-lib": "^1.17.1",
     "pg-boss": "^9.0.3",
@@ -106,6 +107,7 @@
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-email": "2.1.6",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.52.1",
     "react-number-format": "^5.3.4",
     "react-pdf": "^8.0.2",
@@ -146,7 +148,7 @@
     "prisma": "^5.13.0",
     "tailwindcss": "^3.4.3",
     "tsx": "^4.7.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.3",
     "vitest": "^1.6.0"
   },
   "ct3aMetadata": {

prisma/seeds/companies.ts

@@ -1,5 +1,5 @@
 import { generatePublicId } from "@/common/id";
-import { db } from "@/server/db";
+import type { TPrismaOrTransaction } from "@/server/db";
 import { faker } from "@faker-js/faker";
 import colors from "colors";
 import { sample } from "lodash-es";
@@ -19,7 +19,7 @@ type CompanyType = {
   zipcode: string;
   country: string;
 };
-const seedCompanies = async (count = 4) => {
+const seedCompanies = async (tx: TPrismaOrTransaction, count = 4) => {
   const companies: CompanyType[] = [];
 
   for (let i = 0; i < count; i++) {
@@ -41,11 +41,15 @@ const seedCompanies = async (count = 4) => {
 
   console.log(`Seeding ${companies.length} companies`.blue);
 
-  const records = await db.company.createMany({
+  const records = await tx.company.createManyAndReturn({
     data: companies,
+    select: {
+      id: true,
+      name: true,
+    },
   });
 
-  console.log(`🎉 Seeded ${records.count} companies`.green);
+  console.log(`🎉 Seeded ${records.length} companies`.green);
   return records;
 };
 

prisma/seeds/index.ts

@@ -3,8 +3,10 @@ import colors from "colors";
 import inquirer from "inquirer";
 colors.enable();
 
+import { Prisma } from "@prisma/client";
 import type { QuestionCollection } from "inquirer";
 import seedCompanies from "./companies";
+import { seedStakeholders } from "./stakeholder";
 import seedTeam from "./team";
 
 if (process.env.NODE_ENV === "production") {
@@ -23,47 +25,86 @@ const seed = async () => {
   const answer = inquiry.answer as boolean;
 
   if (answer) {
-    await nuke();
+    await cleanupDb();
 
     console.log("Seeding database".underline.cyan);
-    return db.$transaction(async () => {
-      await seedCompanies();
-      await seedTeam();
+    return db.$transaction(async (tx) => {
+      const companies = await seedCompanies(tx);
+      await seedTeam(tx);
+
+      for (const company of companies) {
+        await seedStakeholders(tx, company.id, company.name, 500);
+      }
     });
-  } else {
-    throw new Error("Seeding aborted");
   }
-};
-
-const nuke = async () => {
-  console.log("🚀 Nuking database records".yellow);
-  return db.$transaction(async (db) => {
-    await db.user.deleteMany();
-    await db.member.deleteMany();
-    await db.company.deleteMany();
-    await db.shareClass.deleteMany();
-    await db.equityPlan.deleteMany();
-    await db.document.deleteMany();
-    await db.bucket.deleteMany();
-    await db.audit.deleteMany();
-    await db.session.deleteMany();
-  });
+  throw new Error("Seeding aborted");
 };
 
 await seed()
-  .then(async () => {
+  .then(() => {
     console.log("✅ Database seeding completed".green);
     console.log(
-      `💌 We have created four admin accounts for you. Please login with one of these emails:\n`
+      "💌 We have created four admin accounts for you. Please login with one of these emails:\n"
         .cyan,
-      `[email protected]\n`.underline.yellow,
-      `[email protected]\n`.underline.yellow,
-      `[email protected]\n`.underline.yellow,
-      `[email protected]\n`.underline.yellow,
+      "[email protected]\n".underline.yellow,
+      "[email protected]\n".underline.yellow,
+      "[email protected]\n".underline.yellow,
+      "[email protected]\n".underline.yellow,
     );
-    await db.$disconnect();
   })
-  .catch(async (error: Error) => {
+  .catch((error: Error) => {
     console.log(`❌ ${error.message}`.red);
+  })
+  .finally(async () => {
     await db.$disconnect();
   });
+
+export async function cleanupDb() {
+  console.log("🚀 Nuking database records".yellow);
+
+  try {
+    const tables = await db.$queryRaw<{ tablename: string }[]>`
+    SELECT tablename FROM pg_tables 
+    WHERE schemaname = 'public' AND tablename != '_prisma_migrations'
+  `;
+
+    // Disable foreign key checks
+    await db.$executeRaw`SET CONSTRAINTS ALL DEFERRED`;
+
+    for (const { tablename } of tables) {
+      try {
+        // Check if the table exists before attempting to truncate
+        const tableExists = await db.$queryRaw<[{ exists: boolean }]>`
+          SELECT EXISTS (
+            SELECT FROM information_schema.tables 
+            WHERE table_schema = 'public' AND table_name = ${tablename}
+          )
+        `;
+
+        if (tableExists[0].exists) {
+          await db.$executeRaw(
+            Prisma.sql`TRUNCATE TABLE "${Prisma.raw(tablename)}" CASCADE`,
+          );
+          console.log(`Table ${tablename} truncated successfully`.green);
+        } else {
+          console.log(`Table ${tablename} doesn't exist, skipping`.yellow);
+        }
+      } catch (err) {
+        if (err instanceof Prisma.PrismaClientKnownRequestError) {
+          console.error(`Error truncating table ${tablename}:`, err.message);
+        } else {
+          console.error(`Unexpected error truncating table ${tablename}:`, err);
+        }
+      }
+    }
+
+    // Re-enable foreign key checks
+    await db.$executeRaw`SET CONSTRAINTS ALL IMMEDIATE`;
+
+    console.log(
+      "All tables reset successfully, except _prisma_migrations".yellow,
+    );
+  } catch (error) {
+    console.error("Error resetting tables:", error);
+  }
+}

prisma/seeds/stakeholder.ts

@@ -0,0 +1,45 @@
+import type { TPrismaOrTransaction } from "@/server/db";
+import { faker } from "@faker-js/faker";
+import colors from "colors";
+import { StakeholderRelationshipEnum, StakeholderTypeEnum } from "../enums";
+colors.enable();
+
+export async function seedStakeholders(
+  tx: TPrismaOrTransaction,
+  companyId: string,
+  companyName: string,
+  count = 100,
+) {
+  const stakeholders = [];
+
+  for (let index = 0; index < count; index++) {
+    stakeholders.push({
+      name: faker.person.fullName(),
+      email: faker.internet.email(),
+      institutionName: faker.company.name(),
+      stakeholderType: faker.helpers.arrayElement(
+        Object.values(StakeholderTypeEnum),
+      ),
+      currentRelationship: faker.helpers.arrayElement(
+        Object.values(StakeholderRelationshipEnum),
+      ),
+      taxId: faker.finance.accountNumber(),
+
+      streetAddress: faker.location.streetAddress(),
+      city: faker.location.city(),
+      state: faker.location.state(),
+      zipcode: faker.location.zipCode(),
+      country: faker.location.country(),
+      companyId,
+    });
+  }
+  console.log(
+    `Seeding ${stakeholders.length} stakeholders for ${companyName}`.blue,
+  );
+
+  const record = await tx.stakeholder.createMany({ data: stakeholders });
+
+  console.log(
+    `🎉 Seeded ${record.count} stakeholders for ${companyName}`.green,
+  );
+}

prisma/seeds/team.ts

@@ -1,5 +1,6 @@
 import type { MemberStatusEnum } from "@/prisma/enums";
-import { db } from "@/server/db";
+import type { TPrismaOrTransaction } from "@/server/db";
+
 import { faker } from "@faker-js/faker";
 import bcrypt from "bcryptjs";
 import colors from "colors";
@@ -14,7 +15,7 @@ type UserType = {
   status?: MemberStatusEnum;
 };
 
-const seedTeam = async () => {
+const seedTeam = async (tx: TPrismaOrTransaction) => {
   const team = [
     {
       name: faker.person.fullName(),
@@ -60,14 +61,15 @@ const seedTeam = async () => {
   ];
 
   console.log(`Seeding ${team.length} team members`.blue);
-  const companies = await db.company.findMany();
+  const companies = await tx.company.findMany();
 
+  // biome-ignore lint/complexity/noForEach: <explanation>
   team.forEach(async (t) => {
     // const { name, email, image, title, status, isOnboarded } = t
     const salt = await bcrypt.genSalt(10);
     const hashedPassword = await bcrypt.hash("P@ssw0rd!", salt);
     const { name, email, title, status, isOnboarded } = t;
-    const user = await db.user.create({
+    const user = await tx.user.create({
       data: {
         name,
         email,
@@ -77,8 +79,9 @@ const seedTeam = async () => {
       },
     });
 
+    // biome-ignore lint/complexity/noForEach: <explanation>
     companies.forEach(async (company) => {
-      await db.member.create({
+      await tx.member.create({
         data: {
           title,
           isOnboarded,

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

@@ -18,7 +18,7 @@ const AuditsPage = async () => {
     return <UnAuthorizedState />;
   }
 
-  const audits = await api.audit.getAudits.query({});
+  const audits = await api.audit.getAudits({});
   return (
     <div className="flex flex-col gap-y-3">
       <div className="flex items-center justify-between gap-y-3 ">

src/app/(authenticated)/(dashboard)/[publicId]/documents/data-rooms/[dataRoomPublicId]/page.tsx

@@ -10,15 +10,15 @@ const DataRoomSettinsPage = async ({
 }: {
   params: { publicId: string; dataRoomPublicId: string };
 }) => {
-  const { dataRoom, documents } = await api.dataRoom.getDataRoom.query({
+  const { dataRoom, documents } = await api.dataRoom.getDataRoom({
     dataRoomPublicId,
     include: {
       company: false,
       recipients: true,
       documents: true,
     },
   });
-  const contacts = await api.common.getContacts.query();
+  const contacts = await api.common.getContacts();
 
   if (!dataRoom) {
     return notFound();

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

@@ -13,11 +13,10 @@ const EsignTemplateDetailPage = async ({
 }) => {
   const session = await withServerComponentSession();
 
-  const { name, status, url, fields, recipients } =
-    await api.template.get.query({
-      publicId: templatePublicId,
-      isDraftOnly: true,
-    });
+  const { name, status, url, fields, recipients } = await api.template.get({
+    publicId: templatePublicId,
+    isDraftOnly: true,
+  });
 
   return (
     <TemplateFieldProvider recipients={recipients} fields={fields}>

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

@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 
 const EsignDocumentPage = async () => {
   const session = await withServerComponentSession();
-  const { documents } = await api.template.all.query();
+  const { documents } = await api.template.all();
 
   if (documents.length === 0) {
     return (

src/app/(authenticated)/(dashboard)/[publicId]/documents/esign/v/[templatePublicId]/page.tsx

@@ -22,13 +22,13 @@ export default async function TemplateDetailViewPage({
   const { allow } = await serverAccessControl();
 
   const [{ name, status, url, fields }, auditsData] = await Promise.all([
-    api.template.get.query({
+    api.template.get({
       publicId: templatePublicId,
       isDraftOnly: false,
     }),
 
     allow(
-      api.audit.allEsignAudits.query({
+      api.audit.allEsignAudits({
         templatePublicId: templatePublicId,
       }),
       ["audits", "read"],

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

@@ -18,10 +18,7 @@ const DocumentsPage = async () => {
   const { allow } = await serverAccessControl();
   const session = await withServerComponentSession();
 
-  const documents = await allow(api.document.getAll.query(), [
-    "documents",
-    "read",
-  ]);
+  const documents = await allow(api.document.getAll(), ["documents", "read"]);
 
   const canUpload = allow(true, ["documents", "read"]);
 

src/app/(authenticated)/(dashboard)/[publicId]/documents/share/_page.tsx

@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 };
 
 const DocumentsPage = async () => {
-  const documents = await api.document.getAll.query();
+  const documents = await api.document.getAll();
   const session = await withServerComponentSession();
 
   if (documents.length === 0) {

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

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 };
 
 const SafePage = async () => {
-  const safes = await api.safe.getSafes.query();
+  const safes = await api.safe.getSafes();
 
   if (!safes?.data?.length) {
     return (